index.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  4. var _excluded = ["class", "style"];
  5. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  6. import { ref, computed, watchEffect, defineComponent } from 'vue';
  7. import PropTypes from '../_util/vue-types';
  8. import warning from '../_util/warning';
  9. import classNames from '../_util/classNames';
  10. import SlickCarousel from '../vc-slick';
  11. import { withInstall } from '../_util/type';
  12. import useConfigInject from '../_util/hooks/useConfigInject';
  13. // Carousel
  14. export var carouselProps = function carouselProps() {
  15. return {
  16. effect: String,
  17. dots: {
  18. type: Boolean,
  19. default: true
  20. },
  21. vertical: {
  22. type: Boolean,
  23. default: undefined
  24. },
  25. autoplay: {
  26. type: Boolean,
  27. default: undefined
  28. },
  29. easing: String,
  30. beforeChange: Function,
  31. afterChange: Function,
  32. // style: PropTypes.React.CSSProperties,
  33. prefixCls: String,
  34. accessibility: {
  35. type: Boolean,
  36. default: undefined
  37. },
  38. nextArrow: PropTypes.any,
  39. prevArrow: PropTypes.any,
  40. pauseOnHover: {
  41. type: Boolean,
  42. default: undefined
  43. },
  44. // className: String,
  45. adaptiveHeight: {
  46. type: Boolean,
  47. default: undefined
  48. },
  49. arrows: {
  50. type: Boolean,
  51. default: false
  52. },
  53. autoplaySpeed: Number,
  54. centerMode: {
  55. type: Boolean,
  56. default: undefined
  57. },
  58. centerPadding: String,
  59. cssEase: String,
  60. dotsClass: String,
  61. draggable: {
  62. type: Boolean,
  63. default: false
  64. },
  65. fade: {
  66. type: Boolean,
  67. default: undefined
  68. },
  69. focusOnSelect: {
  70. type: Boolean,
  71. default: undefined
  72. },
  73. infinite: {
  74. type: Boolean,
  75. default: undefined
  76. },
  77. initialSlide: Number,
  78. lazyLoad: String,
  79. rtl: {
  80. type: Boolean,
  81. default: undefined
  82. },
  83. slide: String,
  84. slidesToShow: Number,
  85. slidesToScroll: Number,
  86. speed: Number,
  87. swipe: {
  88. type: Boolean,
  89. default: undefined
  90. },
  91. swipeToSlide: {
  92. type: Boolean,
  93. default: undefined
  94. },
  95. swipeEvent: Function,
  96. touchMove: {
  97. type: Boolean,
  98. default: undefined
  99. },
  100. touchThreshold: Number,
  101. variableWidth: {
  102. type: Boolean,
  103. default: undefined
  104. },
  105. useCSS: {
  106. type: Boolean,
  107. default: undefined
  108. },
  109. slickGoTo: Number,
  110. responsive: Array,
  111. dotPosition: {
  112. type: String,
  113. default: undefined
  114. },
  115. verticalSwiping: {
  116. type: Boolean,
  117. default: false
  118. }
  119. };
  120. };
  121. var Carousel = defineComponent({
  122. compatConfig: {
  123. MODE: 3
  124. },
  125. name: 'ACarousel',
  126. inheritAttrs: false,
  127. props: carouselProps(),
  128. setup: function setup(props, _ref) {
  129. var slots = _ref.slots,
  130. attrs = _ref.attrs,
  131. expose = _ref.expose;
  132. var slickRef = ref();
  133. var goTo = function goTo(slide) {
  134. var _slickRef$value;
  135. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  136. (_slickRef$value = slickRef.value) === null || _slickRef$value === void 0 ? void 0 : _slickRef$value.slickGoTo(slide, dontAnimate);
  137. };
  138. expose({
  139. goTo: goTo,
  140. autoplay: function autoplay(palyType) {
  141. var _slickRef$value2, _slickRef$value2$inne;
  142. (_slickRef$value2 = slickRef.value) === null || _slickRef$value2 === void 0 ? void 0 : (_slickRef$value2$inne = _slickRef$value2.innerSlider) === null || _slickRef$value2$inne === void 0 ? void 0 : _slickRef$value2$inne.handleAutoPlay(palyType);
  143. },
  144. prev: function prev() {
  145. var _slickRef$value3;
  146. (_slickRef$value3 = slickRef.value) === null || _slickRef$value3 === void 0 ? void 0 : _slickRef$value3.slickPrev();
  147. },
  148. next: function next() {
  149. var _slickRef$value4;
  150. (_slickRef$value4 = slickRef.value) === null || _slickRef$value4 === void 0 ? void 0 : _slickRef$value4.slickNext();
  151. },
  152. innerSlider: computed(function () {
  153. var _slickRef$value5;
  154. return (_slickRef$value5 = slickRef.value) === null || _slickRef$value5 === void 0 ? void 0 : _slickRef$value5.innerSlider;
  155. })
  156. });
  157. watchEffect(function () {
  158. warning(props.vertical === undefined, 'Carousel', '`vertical` is deprecated, please use `dotPosition` instead.');
  159. });
  160. var _useConfigInject = useConfigInject('carousel', props),
  161. prefixCls = _useConfigInject.prefixCls,
  162. direction = _useConfigInject.direction;
  163. var dotPosition = computed(function () {
  164. if (props.dotPosition) return props.dotPosition;
  165. if (props.vertical !== undefined) return props.vertical ? 'right' : 'bottom';
  166. return 'bottom';
  167. });
  168. var vertical = computed(function () {
  169. return dotPosition.value === 'left' || dotPosition.value === 'right';
  170. });
  171. var dsClass = computed(function () {
  172. var _classNames;
  173. var dotsClass = 'slick-dots';
  174. return classNames((_classNames = {}, _defineProperty(_classNames, dotsClass, true), _defineProperty(_classNames, "".concat(dotsClass, "-").concat(dotPosition.value), true), _defineProperty(_classNames, "".concat(props.dotsClass), !!props.dotsClass), _classNames));
  175. });
  176. return function () {
  177. var _classNames2;
  178. var dots = props.dots,
  179. arrows = props.arrows,
  180. draggable = props.draggable,
  181. effect = props.effect;
  182. var cls = attrs.class,
  183. style = attrs.style,
  184. restAttrs = _objectWithoutProperties(attrs, _excluded);
  185. var fade = effect === 'fade' ? true : props.fade;
  186. var className = classNames(prefixCls.value, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls.value, "-vertical"), vertical.value), _defineProperty(_classNames2, "".concat(cls), !!cls), _classNames2));
  187. return _createVNode("div", {
  188. "class": className,
  189. "style": style
  190. }, [_createVNode(SlickCarousel, _objectSpread(_objectSpread(_objectSpread({
  191. "ref": slickRef
  192. }, props), restAttrs), {}, {
  193. "dots": !!dots,
  194. "dotsClass": dsClass.value,
  195. "arrows": arrows,
  196. "draggable": draggable,
  197. "fade": fade,
  198. "vertical": vertical.value
  199. }), slots)]);
  200. };
  201. }
  202. });
  203. export default withInstall(Carousel);