index.js 5.1 KB

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