index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.carouselProps = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  10. var _warning = _interopRequireDefault(require("../_util/warning"));
  11. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  12. var _vcSlick = _interopRequireDefault(require("../vc-slick"));
  13. var _type = require("../_util/type");
  14. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  15. var _style = _interopRequireDefault(require("./style"));
  16. var __rest = void 0 && (void 0).__rest || function (s, e) {
  17. var t = {};
  18. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  19. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  20. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  21. }
  22. return t;
  23. };
  24. // CSSINJS
  25. // Carousel
  26. const carouselProps = () => ({
  27. effect: (0, _type.stringType)(),
  28. dots: (0, _type.booleanType)(true),
  29. vertical: (0, _type.booleanType)(),
  30. autoplay: (0, _type.booleanType)(),
  31. easing: String,
  32. beforeChange: (0, _type.functionType)(),
  33. afterChange: (0, _type.functionType)(),
  34. // style: PropTypes.React.CSSProperties,
  35. prefixCls: String,
  36. accessibility: (0, _type.booleanType)(),
  37. nextArrow: _vueTypes.default.any,
  38. prevArrow: _vueTypes.default.any,
  39. pauseOnHover: (0, _type.booleanType)(),
  40. // className: String,
  41. adaptiveHeight: (0, _type.booleanType)(),
  42. arrows: (0, _type.booleanType)(false),
  43. autoplaySpeed: Number,
  44. centerMode: (0, _type.booleanType)(),
  45. centerPadding: String,
  46. cssEase: String,
  47. dotsClass: String,
  48. draggable: (0, _type.booleanType)(false),
  49. fade: (0, _type.booleanType)(),
  50. focusOnSelect: (0, _type.booleanType)(),
  51. infinite: (0, _type.booleanType)(),
  52. initialSlide: Number,
  53. lazyLoad: (0, _type.stringType)(),
  54. rtl: (0, _type.booleanType)(),
  55. slide: String,
  56. slidesToShow: Number,
  57. slidesToScroll: Number,
  58. speed: Number,
  59. swipe: (0, _type.booleanType)(),
  60. swipeToSlide: (0, _type.booleanType)(),
  61. swipeEvent: (0, _type.functionType)(),
  62. touchMove: (0, _type.booleanType)(),
  63. touchThreshold: Number,
  64. variableWidth: (0, _type.booleanType)(),
  65. useCSS: (0, _type.booleanType)(),
  66. slickGoTo: Number,
  67. responsive: Array,
  68. dotPosition: (0, _type.stringType)(),
  69. verticalSwiping: (0, _type.booleanType)(false)
  70. });
  71. exports.carouselProps = carouselProps;
  72. const Carousel = (0, _vue.defineComponent)({
  73. compatConfig: {
  74. MODE: 3
  75. },
  76. name: 'ACarousel',
  77. inheritAttrs: false,
  78. props: carouselProps(),
  79. setup(props, _ref) {
  80. let {
  81. slots,
  82. attrs,
  83. expose
  84. } = _ref;
  85. const slickRef = (0, _vue.ref)();
  86. const goTo = function (slide) {
  87. let dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  88. var _a;
  89. (_a = slickRef.value) === null || _a === void 0 ? void 0 : _a.slickGoTo(slide, dontAnimate);
  90. };
  91. expose({
  92. goTo,
  93. autoplay: palyType => {
  94. var _a, _b;
  95. (_b = (_a = slickRef.value) === null || _a === void 0 ? void 0 : _a.innerSlider) === null || _b === void 0 ? void 0 : _b.handleAutoPlay(palyType);
  96. },
  97. prev: () => {
  98. var _a;
  99. (_a = slickRef.value) === null || _a === void 0 ? void 0 : _a.slickPrev();
  100. },
  101. next: () => {
  102. var _a;
  103. (_a = slickRef.value) === null || _a === void 0 ? void 0 : _a.slickNext();
  104. },
  105. innerSlider: (0, _vue.computed)(() => {
  106. var _a;
  107. return (_a = slickRef.value) === null || _a === void 0 ? void 0 : _a.innerSlider;
  108. })
  109. });
  110. (0, _vue.watchEffect)(() => {
  111. (0, _warning.default)(props.vertical === undefined, 'Carousel', '`vertical` is deprecated, please use `dotPosition` instead.');
  112. });
  113. const {
  114. prefixCls,
  115. direction
  116. } = (0, _useConfigInject.default)('carousel', props);
  117. // style
  118. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  119. const dotPosition = (0, _vue.computed)(() => {
  120. if (props.dotPosition) return props.dotPosition;
  121. if (props.vertical !== undefined) return props.vertical ? 'right' : 'bottom';
  122. return 'bottom';
  123. });
  124. const vertical = (0, _vue.computed)(() => dotPosition.value === 'left' || dotPosition.value === 'right');
  125. const dsClass = (0, _vue.computed)(() => {
  126. const dotsClass = 'slick-dots';
  127. return (0, _classNames.default)({
  128. [dotsClass]: true,
  129. [`${dotsClass}-${dotPosition.value}`]: true,
  130. [`${props.dotsClass}`]: !!props.dotsClass
  131. });
  132. });
  133. return () => {
  134. const {
  135. dots,
  136. arrows,
  137. draggable,
  138. effect
  139. } = props;
  140. const {
  141. class: cls,
  142. style
  143. } = attrs,
  144. restAttrs = __rest(attrs, ["class", "style"]);
  145. const fade = effect === 'fade' ? true : props.fade;
  146. const className = (0, _classNames.default)(prefixCls.value, {
  147. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  148. [`${prefixCls.value}-vertical`]: vertical.value,
  149. [`${cls}`]: !!cls
  150. }, hashId.value);
  151. return wrapSSR((0, _vue.createVNode)("div", {
  152. "class": className,
  153. "style": style
  154. }, [(0, _vue.createVNode)(_vcSlick.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  155. "ref": slickRef
  156. }, props), restAttrs), {}, {
  157. "dots": !!dots,
  158. "dotsClass": dsClass.value,
  159. "arrows": arrows,
  160. "draggable": draggable,
  161. "fade": fade,
  162. "vertical": vertical.value
  163. }), slots)]));
  164. };
  165. }
  166. });
  167. var _default = exports.default = (0, _type.withInstall)(Carousel);