vue-next-yui 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +37 -37
- package/vue-next-yui.es.js +104 -96
- package/vue-next-yui.umd.js +1 -1
package/package.json
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "vue-next-yui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "vue-next-yui",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "vite",
|
|
8
|
-
"build": "vite build",
|
|
9
|
-
"preview": "vite preview"
|
|
10
|
-
},
|
|
11
|
-
"main": "vue-next-yui.umd.js",
|
|
12
|
-
"module": "vue-next-yui.es.js",
|
|
13
|
-
"exports": {
|
|
14
|
-
".": {
|
|
15
|
-
"import": "vue-next-yui.es.js",
|
|
16
|
-
"require": "vue-next-yui.umd.js"
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
"dependencies": {
|
|
20
|
-
"vue": "^3.4.29",
|
|
21
|
-
"vue-router": "^4.3.3"
|
|
22
|
-
},
|
|
23
|
-
"devDependencies": {
|
|
24
|
-
"@vitejs/plugin-vue": "^5.0.5",
|
|
25
|
-
"sass": "^1.77.8",
|
|
26
|
-
"vite": "^5.3.1"
|
|
27
|
-
},
|
|
28
|
-
"keywords": [
|
|
29
|
-
"vue-next-yui",
|
|
30
|
-
"npm",
|
|
31
|
-
"package",
|
|
32
|
-
"vue",
|
|
33
|
-
"vue3"
|
|
34
|
-
],
|
|
35
|
-
"author": "shawyu",
|
|
36
|
-
"license": "MIT"
|
|
37
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-next-yui",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "vue-next-yui",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"main": "vue-next-yui.umd.js",
|
|
12
|
+
"module": "vue-next-yui.es.js",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": "vue-next-yui.es.js",
|
|
16
|
+
"require": "vue-next-yui.umd.js"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"vue": "^3.4.29",
|
|
21
|
+
"vue-router": "^4.3.3"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@vitejs/plugin-vue": "^5.0.5",
|
|
25
|
+
"sass": "^1.77.8",
|
|
26
|
+
"vite": "^5.3.1"
|
|
27
|
+
},
|
|
28
|
+
"keywords": [
|
|
29
|
+
"vue-next-yui",
|
|
30
|
+
"npm",
|
|
31
|
+
"package",
|
|
32
|
+
"vue",
|
|
33
|
+
"vue3"
|
|
34
|
+
],
|
|
35
|
+
"author": "shawyu",
|
|
36
|
+
"license": "MIT"
|
|
37
|
+
}
|
package/vue-next-yui.es.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
1
|
+
import { ref as r, reactive as ee, onMounted as te, onBeforeUnmount as le, watch as V, openBlock as m, createElementBlock as y, createElementVNode as M, renderSlot as j, normalizeClass as N, withModifiers as O, unref as $, createCommentVNode as z, Fragment as ae, renderList as oe, pushScopeId as ne, popScopeId as ue } from "vue";
|
|
2
|
+
const U = (n, h) => {
|
|
3
|
+
const u = n.__vccOpts || n;
|
|
4
4
|
for (const [v, x] of h)
|
|
5
|
-
|
|
6
|
-
return
|
|
7
|
-
},
|
|
5
|
+
u[v] = x;
|
|
6
|
+
return u;
|
|
7
|
+
}, R = (n) => (ne("data-v-3bff58af"), n = n(), ue(), n), se = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "yu-slide-arrow"
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
],
|
|
13
|
-
|
|
14
|
-
],
|
|
10
|
+
}, ie = ["fill"], re = /* @__PURE__ */ R(() => /* @__PURE__ */ M("path", { d: "M703.967748 885.366929c-8.532661 0-14.932661-2.134677-21.332661-8.532661l-384-341.332662c-6.4-6.4-10.667339-14.932661-10.667339-23.467338s4.267339-17.067339 10.667339-23.467339l384-341.334677c12.8-12.8 34.134677-10.665323 44.8 2.134677 12.802016 12.8 10.667339 34.134677-2.132662 44.8L369.033071 512.034268l356.267338 317.865323c12.8 10.667339 14.932661 32 2.132662 44.8-6.4 6.4-14.932661 10.667339-23.465323 10.667338z" }, null, -1)), ve = [
|
|
11
|
+
re
|
|
12
|
+
], ce = ["fill"], de = /* @__PURE__ */ R(() => /* @__PURE__ */ M("path", { d: "M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z" }, null, -1)), fe = [
|
|
13
|
+
de
|
|
14
|
+
], he = {
|
|
15
15
|
key: 1,
|
|
16
16
|
class: "yu-slide-indicator"
|
|
17
|
-
},
|
|
17
|
+
}, pe = ["onClick"], me = {
|
|
18
18
|
name: "Slide"
|
|
19
|
-
},
|
|
19
|
+
}, ye = /* @__PURE__ */ Object.assign(me, {
|
|
20
20
|
props: {
|
|
21
21
|
option: {
|
|
22
22
|
type: Object,
|
|
@@ -45,52 +45,52 @@ const z = (r, h) => {
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
emits: ["slide"],
|
|
48
|
-
setup(
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
const g =
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
54
|
-
duration:
|
|
55
|
-
showArrow: !!
|
|
56
|
-
showIndicator: !!
|
|
57
|
-
autoPlay: !!
|
|
58
|
-
loop: !!
|
|
48
|
+
setup(n, { emit: h }) {
|
|
49
|
+
const u = n, v = r(""), x = h, p = "all 0.45s", t = r(null), l = r(0), d = r(0), f = r(null), c = r(!1), w = r(!1), S = r(!1), i = r(0);
|
|
50
|
+
r(0);
|
|
51
|
+
const g = r("white"), a = ee({
|
|
52
|
+
width: u.option.width || document.body.clientWidth,
|
|
53
|
+
height: u.option.height || "auto",
|
|
54
|
+
duration: u.option.duration || 3e3,
|
|
55
|
+
showArrow: !!u.option.showArrow || !1,
|
|
56
|
+
showIndicator: !!u.option.showIndicator || !1,
|
|
57
|
+
autoPlay: !!u.option.autoPlay || !1,
|
|
58
|
+
loop: !!u.option.loop || !1
|
|
59
59
|
});
|
|
60
|
-
|
|
61
|
-
g.value = ["black", "white"].includes(
|
|
62
|
-
}),
|
|
60
|
+
te(() => {
|
|
61
|
+
g.value = ["black", "white"].includes(u.themeStyle) ? u.themeStyle : "white", q();
|
|
62
|
+
}), le(() => {
|
|
63
63
|
clearTimeout(f.value);
|
|
64
|
-
}),
|
|
64
|
+
}), V(() => u.option, (e, o) => {
|
|
65
65
|
console.log("option的name变化了", e, o);
|
|
66
|
-
}),
|
|
66
|
+
}), V(l, (e, o) => {
|
|
67
67
|
});
|
|
68
|
-
const
|
|
68
|
+
const q = () => {
|
|
69
69
|
if (!t.value) return;
|
|
70
70
|
let e = t.value.children;
|
|
71
71
|
d.value = e.length;
|
|
72
|
-
for (let o = 0,
|
|
72
|
+
for (let o = 0, s = e.length; o < s; o++)
|
|
73
73
|
e[o].setAttribute("index", o);
|
|
74
74
|
t.value.style.transition = p, a.loop ? (t.value.style.transform = `translateX(${-(l.value + 1) * a.width}px)`, t.value.insertBefore(e[e.length - 1].cloneNode(!0), e[0]), t.value.appendChild(e[1].cloneNode(!0))) : t.value.style.transform = `translateX(${-l.value * a.width}px)`, a.autoPlay && _();
|
|
75
|
-
},
|
|
76
|
-
const
|
|
75
|
+
}, D = (e, o = 300) => {
|
|
76
|
+
const s = r(!0);
|
|
77
77
|
return (...T) => {
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
s.value && (s.value = !1, e(...T), setTimeout(() => {
|
|
79
|
+
s.value = !0;
|
|
80
80
|
}, o));
|
|
81
81
|
};
|
|
82
82
|
}, _ = () => {
|
|
83
83
|
clearTimeout(f.value), f.value = setTimeout(() => {
|
|
84
|
-
a.loop ? P() : (console.log("a", l.value, d.value - 1), l.value >= d.value - 1 ?
|
|
84
|
+
a.loop ? P() : (console.log("a", l.value, d.value - 1), l.value >= d.value - 1 ? B(0) : (console.log("c"), P()));
|
|
85
85
|
}, a.duration);
|
|
86
|
-
},
|
|
87
|
-
let
|
|
88
|
-
t.value.style.transition = "none", t.value.style.transform = `translateX(${-
|
|
89
|
-
},
|
|
90
|
-
|
|
86
|
+
}, C = (e) => {
|
|
87
|
+
let s = (a.loop ? l.value + 1 : l.value) * a.width + i.value - e;
|
|
88
|
+
t.value.style.transition = "none", t.value.style.transform = `translateX(${-s}px)`;
|
|
89
|
+
}, L = (e) => {
|
|
90
|
+
i.value && (a.loop ? e >= i.value && e - i.value > 80 ? k() : e < i.value && i.value - e > 80 ? P() : (t.value.style.transition = p, t.value.style.transform = `translateX(${-(l.value + 1) * a.width}px)`, a.autoPlay && _()) : e >= i.value && e - i.value > 80 && l.value > 0 ? k() : e < i.value && i.value - e > 80 && l.value < d.value - 1 ? P() : (t.value.style.transition = p, t.value.style.transform = `translateX(${-l.value * a.width}px)`, a.autoPlay && _()), i.value = 0, setTimeout(() => {
|
|
91
91
|
w.value = !1;
|
|
92
92
|
}, 300));
|
|
93
|
-
},
|
|
93
|
+
}, k = () => {
|
|
94
94
|
if (!(t.value && t.value.children)) return;
|
|
95
95
|
let e = t.value.children;
|
|
96
96
|
a.loop ? (l.value--, t.value.style.transition = p, t.value.style.transform = `translateX(${-(l.value + 1) * e[0].offsetWidth}px)`, l.value < 0 && (l.value = d.value - 1, setTimeout(() => {
|
|
@@ -102,58 +102,58 @@ const z = (r, h) => {
|
|
|
102
102
|
a.loop ? (l.value++, t.value.style.transition = p, t.value.style.transform = `translateX(${-(l.value + 1) * e[0].offsetWidth}px)`, l.value > d.value - 1 && (l.value = 0, setTimeout(() => {
|
|
103
103
|
t.value.style.transition = "none", t.value.style.transform = `translateX(${-e[0].offsetWidth}px)`;
|
|
104
104
|
}, 300))) : l.value < d.value - 1 && (l.value++, t.value.style.transition = p, t.value.style.transform = `translateX(${-l.value * e[0].offsetWidth}px)`), a.autoPlay && _(), x("slide", l.value);
|
|
105
|
-
},
|
|
105
|
+
}, B = (e) => {
|
|
106
106
|
let o = t.value.children;
|
|
107
107
|
a.autoPlay && clearTimeout(f.value), l.value = e;
|
|
108
|
-
let
|
|
109
|
-
t.value.style.transition = p, t.value.style.transform = `translateX(${-
|
|
110
|
-
}, F = (e) => {
|
|
111
|
-
v.value += "MouseEnter_", e.preventDefault(), S.value = !0, a.autoPlay && clearTimeout(f.value);
|
|
112
|
-
}, q = (e) => {
|
|
113
|
-
v.value += "MouseLeave_", e.preventDefault(), S.value && (S.value = !1, a.autoPlay && _());
|
|
108
|
+
let s = a.loop ? l.value + 1 : l.value;
|
|
109
|
+
t.value.style.transition = p, t.value.style.transform = `translateX(${-s * o[0].offsetWidth}px)`, a.autoPlay && _(), x("slide", e);
|
|
114
110
|
}, G = (e) => {
|
|
115
|
-
v.value += "
|
|
111
|
+
v.value += "MouseEnter_", e.preventDefault(), S.value = !0, a.autoPlay && clearTimeout(f.value);
|
|
116
112
|
}, H = (e) => {
|
|
117
|
-
v.value += "
|
|
113
|
+
v.value += "MouseLeave_", e.preventDefault(), S.value && (S.value = !1, a.autoPlay && _());
|
|
118
114
|
}, J = (e) => {
|
|
119
|
-
v.value += "
|
|
115
|
+
v.value += "MouseDown_", e.preventDefault(), S.value = !1, !(c.value || w.value) && (a.autoPlay && clearTimeout(f.value), c.value = !0, i.value = e.clientX);
|
|
120
116
|
}, K = (e) => {
|
|
117
|
+
v.value += "MouseMove_", e.preventDefault(), c.value && (!w.value && (w.value = !0), C(e.clientX));
|
|
118
|
+
}, Q = (e) => {
|
|
119
|
+
v.value += "MouseUp_", e.preventDefault(), c.value && (c.value = !1, L(e.clientX));
|
|
120
|
+
}, Y = (e) => {
|
|
121
121
|
if (v.value += "TouchStart_", e.preventDefault(), c.value || w.value) return;
|
|
122
122
|
a.autoPlay && clearTimeout(f.value), c.value = !0;
|
|
123
123
|
let o = e.changedTouches[0];
|
|
124
|
-
|
|
125
|
-
},
|
|
126
|
-
v.value += "TouchMove_", e.preventDefault(), c.value && (!w.value && (w.value = !0),
|
|
127
|
-
},
|
|
128
|
-
v.value += "TouchLeave_", e.preventDefault(), c.value && (c.value = !1,
|
|
129
|
-
},
|
|
130
|
-
a.autoPlay && clearTimeout(f.value),
|
|
131
|
-
}, 300),
|
|
124
|
+
i.value = o.clientX;
|
|
125
|
+
}, Z = (e) => {
|
|
126
|
+
v.value += "TouchMove_", e.preventDefault(), c.value && (!w.value && (w.value = !0), C(e.changedTouches[0].clientX));
|
|
127
|
+
}, W = (e) => {
|
|
128
|
+
v.value += "TouchLeave_", e.preventDefault(), c.value && (c.value = !1, L(e.changedTouches[0].clientX));
|
|
129
|
+
}, A = D(() => {
|
|
130
|
+
a.autoPlay && clearTimeout(f.value), k();
|
|
131
|
+
}, 300), E = D(() => {
|
|
132
132
|
a.autoPlay && clearTimeout(f.value), P();
|
|
133
133
|
}, 300);
|
|
134
134
|
return (e, o) => (m(), y("div", {
|
|
135
135
|
class: "yu-slide-wrapper",
|
|
136
|
-
onMousedown:
|
|
137
|
-
onMousemove:
|
|
138
|
-
onMouseup:
|
|
139
|
-
onMouseenter:
|
|
140
|
-
onMouseleave:
|
|
141
|
-
onTouchstart:
|
|
142
|
-
onTouchmove:
|
|
143
|
-
onTouchend:
|
|
144
|
-
onTouchcancel:
|
|
136
|
+
onMousedown: J,
|
|
137
|
+
onMousemove: K,
|
|
138
|
+
onMouseup: Q,
|
|
139
|
+
onMouseenter: G,
|
|
140
|
+
onMouseleave: H,
|
|
141
|
+
onTouchstart: Y,
|
|
142
|
+
onTouchmove: Z,
|
|
143
|
+
onTouchend: W,
|
|
144
|
+
onTouchcancel: W
|
|
145
145
|
}, [
|
|
146
146
|
M("div", {
|
|
147
147
|
class: "yu-slide-container",
|
|
148
148
|
ref_key: "slideItemContainer",
|
|
149
149
|
ref: t
|
|
150
150
|
}, [
|
|
151
|
-
|
|
151
|
+
j(e.$slots, "default", {}, void 0, !0)
|
|
152
152
|
], 512),
|
|
153
|
-
a.showArrow ? (m(), y("div",
|
|
153
|
+
a.showArrow ? (m(), y("div", se, [
|
|
154
154
|
M("div", {
|
|
155
|
-
class:
|
|
156
|
-
onClick: o[0] || (o[0] =
|
|
155
|
+
class: N(["prev", g.value]),
|
|
156
|
+
onClick: o[0] || (o[0] = O((...s) => $(A) && $(A)(...s), ["stop"]))
|
|
157
157
|
}, [
|
|
158
158
|
(m(), y("svg", {
|
|
159
159
|
class: "icon",
|
|
@@ -162,11 +162,11 @@ const z = (r, h) => {
|
|
|
162
162
|
xmlns: "http://www.w3.org/2000/svg",
|
|
163
163
|
width: "18",
|
|
164
164
|
height: "18"
|
|
165
|
-
},
|
|
165
|
+
}, ve, 8, ie))
|
|
166
166
|
], 2),
|
|
167
167
|
M("div", {
|
|
168
|
-
class:
|
|
169
|
-
onClick: o[1] || (o[1] =
|
|
168
|
+
class: N(["next", g.value]),
|
|
169
|
+
onClick: o[1] || (o[1] = O((...s) => $(E) && $(E)(...s), ["stop"]))
|
|
170
170
|
}, [
|
|
171
171
|
(m(), y("svg", {
|
|
172
172
|
class: "icon",
|
|
@@ -175,21 +175,25 @@ const z = (r, h) => {
|
|
|
175
175
|
xmlns: "http://www.w3.org/2000/svg",
|
|
176
176
|
width: "18",
|
|
177
177
|
height: "18"
|
|
178
|
-
},
|
|
178
|
+
}, fe, 8, ce))
|
|
179
179
|
], 2)
|
|
180
|
-
])) :
|
|
181
|
-
a.showIndicator ? (m(), y("div",
|
|
182
|
-
(m(!0), y(
|
|
183
|
-
class:
|
|
180
|
+
])) : z("", !0),
|
|
181
|
+
a.showIndicator ? (m(), y("div", he, [
|
|
182
|
+
(m(!0), y(ae, null, oe(d.value, (s, T) => (m(), y("span", {
|
|
183
|
+
class: N([g.value, { active: l.value === T }]),
|
|
184
184
|
key: T,
|
|
185
|
-
onClick:
|
|
186
|
-
}, null, 10,
|
|
187
|
-
])) :
|
|
185
|
+
onClick: O((Me) => B(T), ["stop"])
|
|
186
|
+
}, null, 10, pe))), 128))
|
|
187
|
+
])) : z("", !0)
|
|
188
188
|
], 32));
|
|
189
189
|
}
|
|
190
|
-
}),
|
|
190
|
+
}), I = /* @__PURE__ */ U(ye, [["__scopeId", "data-v-3bff58af"]]);
|
|
191
|
+
I.install = function(n) {
|
|
192
|
+
n.component(I.name, I);
|
|
193
|
+
};
|
|
194
|
+
const we = { class: "yu-slide-item-wrapper" }, _e = { class: "yu-slide-item" }, ge = {
|
|
191
195
|
name: "SlideItem"
|
|
192
|
-
},
|
|
196
|
+
}, Te = /* @__PURE__ */ Object.assign(ge, {
|
|
193
197
|
props: {
|
|
194
198
|
name: {
|
|
195
199
|
type: String,
|
|
@@ -216,24 +220,28 @@ const z = (r, h) => {
|
|
|
216
220
|
}
|
|
217
221
|
}
|
|
218
222
|
},
|
|
219
|
-
setup(
|
|
220
|
-
return (h,
|
|
221
|
-
M("div",
|
|
222
|
-
|
|
223
|
+
setup(n) {
|
|
224
|
+
return (h, u) => (m(), y("div", we, [
|
|
225
|
+
M("div", _e, [
|
|
226
|
+
j(h.$slots, "default", {}, void 0, !0)
|
|
223
227
|
])
|
|
224
228
|
]));
|
|
225
229
|
}
|
|
226
|
-
}),
|
|
227
|
-
|
|
228
|
-
|
|
230
|
+
}), b = /* @__PURE__ */ U(Te, [["__scopeId", "data-v-69b2940a"]]);
|
|
231
|
+
b.install = function(n) {
|
|
232
|
+
n.component(b.name, b);
|
|
233
|
+
};
|
|
234
|
+
const F = [I, b], X = function(n) {
|
|
235
|
+
X.installed || (X.installed = !0, F.map((h) => {
|
|
236
|
+
n.component(h.name, h);
|
|
229
237
|
}));
|
|
230
238
|
};
|
|
231
|
-
typeof window < "u" && window.Vue &&
|
|
239
|
+
typeof window < "u" && window.Vue && X(window.Vue);
|
|
232
240
|
const Pe = {
|
|
233
241
|
// 导出的对象必须具备一个 install 方法
|
|
234
|
-
install:
|
|
242
|
+
install: X,
|
|
235
243
|
// 组件列表
|
|
236
|
-
...
|
|
244
|
+
...F
|
|
237
245
|
};
|
|
238
246
|
export {
|
|
239
247
|
Pe as default
|
package/vue-next-yui.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,y){typeof exports=="object"&&typeof module<"u"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis<"u"?globalThis:e||self,e["vue-next-yui"]=y(e.Vue))})(this,function(e){"use strict";const y=(
|
|
1
|
+
(function(e,y){typeof exports=="object"&&typeof module<"u"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis<"u"?globalThis:e||self,e["vue-next-yui"]=y(e.Vue))})(this,function(e){"use strict";const y=(s,h)=>{const u=s.__vccOpts||s;for(const[c,g]of h)u[c]=g;return u},P=s=>(e.pushScopeId("data-v-3bff58af"),s=s(),e.popScopeId(),s),D={key:0,class:"yu-slide-arrow"},L=["fill"],W=[P(()=>e.createElementVNode("path",{d:"M703.967748 885.366929c-8.532661 0-14.932661-2.134677-21.332661-8.532661l-384-341.332662c-6.4-6.4-10.667339-14.932661-10.667339-23.467338s4.267339-17.067339 10.667339-23.467339l384-341.334677c12.8-12.8 34.134677-10.665323 44.8 2.134677 12.802016 12.8 10.667339 34.134677-2.132662 44.8L369.033071 512.034268l356.267338 317.865323c12.8 10.667339 14.932661 32 2.132662 44.8-6.4 6.4-14.932661 10.667339-23.465323 10.667338z"},null,-1))],A=["fill"],z=[P(()=>e.createElementVNode("path",{d:"M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z"},null,-1))],j={key:1,class:"yu-slide-indicator"},U=["onClick"],k=y(Object.assign({name:"Slide"},{props:{option:{type:Object,default(){return{}}},value:{type:Number,default(){return 0}},themeStyle:{type:String,default(){return"white"}},gap:{type:[Number,String],default(){return 0}}},emits:["slide"],setup(s,{emit:h}){const u=s,c=e.ref(""),g=h,p="all 0.45s",l=e.ref(null),a=e.ref(0),f=e.ref(0),v=e.ref(null),d=e.ref(!1),m=e.ref(!1),$=e.ref(!1),r=e.ref(0);e.ref(0);const w=e.ref("white"),o=e.reactive({width:u.option.width||document.body.clientWidth,height:u.option.height||"auto",duration:u.option.duration||3e3,showArrow:!!u.option.showArrow||!1,showIndicator:!!u.option.showIndicator||!1,autoPlay:!!u.option.autoPlay||!1,loop:!!u.option.loop||!1});e.onMounted(()=>{w.value=["black","white"].includes(u.themeStyle)?u.themeStyle:"white",F()}),e.onBeforeUnmount(()=>{clearTimeout(v.value)}),e.watch(()=>u.option,(t,n)=>{console.log("option的name变化了",t,n)}),e.watch(a,(t,n)=>{});const F=()=>{if(!l.value)return;let t=l.value.children;f.value=t.length;for(let n=0,i=t.length;n<i;n++)t[n].setAttribute("index",n);l.value.style.transition=p,o.loop?(l.value.style.transform=`translateX(${-(a.value+1)*o.width}px)`,l.value.insertBefore(t[t.length-1].cloneNode(!0),t[0]),l.value.appendChild(t[1].cloneNode(!0))):l.value.style.transform=`translateX(${-a.value*o.width}px)`,o.autoPlay&&_()},N=(t,n=300)=>{const i=e.ref(!0);return(...T)=>{i.value&&(i.value=!1,t(...T),setTimeout(()=>{i.value=!0},n))}},_=()=>{clearTimeout(v.value),v.value=setTimeout(()=>{o.loop?M():(console.log("a",a.value,f.value-1),a.value>=f.value-1?V(0):(console.log("c"),M()))},o.duration)},I=t=>{let i=(o.loop?a.value+1:a.value)*o.width+r.value-t;l.value.style.transition="none",l.value.style.transform=`translateX(${-i}px)`},b=t=>{r.value&&(o.loop?t>=r.value&&t-r.value>80?S():t<r.value&&r.value-t>80?M():(l.value.style.transition=p,l.value.style.transform=`translateX(${-(a.value+1)*o.width}px)`,o.autoPlay&&_()):t>=r.value&&t-r.value>80&&a.value>0?S():t<r.value&&r.value-t>80&&a.value<f.value-1?M():(l.value.style.transition=p,l.value.style.transform=`translateX(${-a.value*o.width}px)`,o.autoPlay&&_()),r.value=0,setTimeout(()=>{m.value=!1},300))},S=()=>{if(!(l.value&&l.value.children))return;let t=l.value.children;o.loop?(a.value--,l.value.style.transition=p,l.value.style.transform=`translateX(${-(a.value+1)*t[0].offsetWidth}px)`,a.value<0&&(a.value=f.value-1,setTimeout(()=>{l.value.style.transition="none",l.value.style.transform=`translateX(${-f.value*t[0].offsetWidth}px)`},300))):a.value>0&&(a.value--,l.value.style.transition=p,l.value.style.transform=`translateX(${-a.value*t[0].offsetWidth}px)`),o.autoPlay&&_(),g("slide",a.value)},M=()=>{if(!(l.value&&l.value.children))return;let t=l.value.children;o.loop?(a.value++,l.value.style.transition=p,l.value.style.transform=`translateX(${-(a.value+1)*t[0].offsetWidth}px)`,a.value>f.value-1&&(a.value=0,setTimeout(()=>{l.value.style.transition="none",l.value.style.transform=`translateX(${-t[0].offsetWidth}px)`},300))):a.value<f.value-1&&(a.value++,l.value.style.transition=p,l.value.style.transform=`translateX(${-a.value*t[0].offsetWidth}px)`),o.autoPlay&&_(),g("slide",a.value)},V=t=>{let n=l.value.children;o.autoPlay&&clearTimeout(v.value),a.value=t;let i=o.loop?a.value+1:a.value;l.value.style.transition=p,l.value.style.transform=`translateX(${-i*n[0].offsetWidth}px)`,o.autoPlay&&_(),g("slide",t)},G=t=>{c.value+="MouseEnter_",t.preventDefault(),$.value=!0,o.autoPlay&&clearTimeout(v.value)},H=t=>{c.value+="MouseLeave_",t.preventDefault(),$.value&&($.value=!1,o.autoPlay&&_())},J=t=>{c.value+="MouseDown_",t.preventDefault(),$.value=!1,!(d.value||m.value)&&(o.autoPlay&&clearTimeout(v.value),d.value=!0,r.value=t.clientX)},K=t=>{c.value+="MouseMove_",t.preventDefault(),d.value&&(!m.value&&(m.value=!0),I(t.clientX))},Q=t=>{c.value+="MouseUp_",t.preventDefault(),d.value&&(d.value=!1,b(t.clientX))},Y=t=>{if(c.value+="TouchStart_",t.preventDefault(),d.value||m.value)return;o.autoPlay&&clearTimeout(v.value),d.value=!0;let n=t.changedTouches[0];r.value=n.clientX},Z=t=>{c.value+="TouchMove_",t.preventDefault(),d.value&&(!m.value&&(m.value=!0),I(t.changedTouches[0].clientX))},X=t=>{c.value+="TouchLeave_",t.preventDefault(),d.value&&(d.value=!1,b(t.changedTouches[0].clientX))},C=N(()=>{o.autoPlay&&clearTimeout(v.value),S()},300),O=N(()=>{o.autoPlay&&clearTimeout(v.value),M()},300);return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"yu-slide-wrapper",onMousedown:J,onMousemove:K,onMouseup:Q,onMouseenter:G,onMouseleave:H,onTouchstart:Y,onTouchmove:Z,onTouchend:X,onTouchcancel:X},[e.createElementVNode("div",{class:"yu-slide-container",ref_key:"slideItemContainer",ref:l},[e.renderSlot(t.$slots,"default",{},void 0,!0)],512),o.showArrow?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",{class:e.normalizeClass(["prev",w.value]),onClick:n[0]||(n[0]=e.withModifiers((...i)=>e.unref(C)&&e.unref(C)(...i),["stop"]))},[(e.openBlock(),e.createElementBlock("svg",{class:"icon",fill:w.value,viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18"},W,8,L))],2),e.createElementVNode("div",{class:e.normalizeClass(["next",w.value]),onClick:n[1]||(n[1]=e.withModifiers((...i)=>e.unref(O)&&e.unref(O)(...i),["stop"]))},[(e.openBlock(),e.createElementBlock("svg",{class:"icon",fill:w.value,viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18"},z,8,A))],2)])):e.createCommentVNode("",!0),o.showIndicator?(e.openBlock(),e.createElementBlock("div",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(i,T)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass([w.value,{active:a.value===T}]),key:T,onClick:e.withModifiers(ue=>V(T),["stop"])},null,10,U))),128))])):e.createCommentVNode("",!0)],32))}}),[["__scopeId","data-v-3bff58af"]]);k.install=function(s){s.component(k.name,k)};const R={class:"yu-slide-item-wrapper"},q={class:"yu-slide-item"},x=y(Object.assign({name:"SlideItem"},{props:{name:{type:String,default(){return""}},size:{type:[Number,String],default(){return"16px"}},showArrow:{type:Boolean,default(){return!1}},showPagination:{type:Boolean,default(){return!1}}},setup(s){return(h,u)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",q,[e.renderSlot(h.$slots,"default",{},void 0,!0)])]))}}),[["__scopeId","data-v-69b2940a"]]);x.install=function(s){s.component(x.name,x)};const E=[k,x],B=function(s){B.installed||(B.installed=!0,E.map(h=>{s.component(h.name,h)}))};return typeof window<"u"&&window.Vue&&B(window.Vue),{install:B,...E}});
|