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