@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
373 lines (372 loc) • 13.3 kB
JavaScript
import { defineComponent as Ae, ref as A, reactive as D, computed as m, watch as M, provide as Ce, toRef as Oe, onMounted as Re, createElementBlock as C, openBlock as O, normalizeStyle as F, normalizeClass as h, createVNode as g, createCommentVNode as G, unref as a, withCtx as V, createElementVNode as R, renderSlot as W, mergeProps as ie, withModifiers as Te, createTextVNode as $e, Fragment as Ie, renderList as Le } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import { useProps as _e, useNameHelper as Ee, useIcons as Ne, useHoverDelay as He, emitEvent as q } from "@vexip-ui/config";
import { useRtl as Pe, useHover as De, useSetTimeout as Me } from "@vexip-ui/hooks";
import { debounceMinor as J } from "@vexip-ui/utils";
import { carouselProps as Fe } from "./props.mjs";
import { CAROUSEL_STATE as Ve } from "./symbol.mjs";
import We from "../resize-observer/resize-observer.mjs";
import B from "../renderer/renderer.mjs";
import re from "../icon/icon.mjs";
const qe = ["onClick"], lt = /* @__PURE__ */ Ae({
name: "Carousel",
__name: "carousel",
props: Fe,
emits: ["update:active"],
setup(oe, { expose: se, emit: ne }) {
const e = _e("carousel", oe, {
active: {
default: 0,
static: !0
},
viewSize: {
default: 3,
validator: (t) => t > 0
},
vertical: !1,
disabled: !1,
loop: !1,
arrow: {
default: "outside",
validator: (t) => ["outside", "inside", "none"].includes(t)
},
arrowTrigger: {
default: "hover",
validator: (t) => ["hover", "always"].includes(t)
},
autoplay: {
default: !1,
validator: (t) => typeof t == "number" ? t > 500 : !0
},
pointer: {
default: "none",
validator: (t) => ["outside", "inside", "none"].includes(t)
},
speed: 300,
activeOffset: 0,
height: null,
ignoreHover: !1,
slots: () => ({})
}), ue = ne, s = Ee("carousel"), b = Ne(), K = He(), { isRtl: L } = Pe(), o = A(/* @__PURE__ */ new Set()), l = A(0), y = A(!1), T = A(e.arrowTrigger === "always"), c = D({
width: 0,
height: 0
}), u = D({
width: 0,
height: 0,
offset: 0
}), f = D({
width: 0,
height: 0
}), { wrapper: $, isHover: ve } = De(), z = A(), S = A(), k = m(() => e.disabled || o.value.size <= e.viewSize), fe = m(() => ({
[s.b()]: !0,
[s.bs("vars")]: !0,
[s.bm("inherit")]: e.inherit,
[s.bm("vertical")]: e.vertical,
[s.bm("disabled")]: k.value
})), ce = m(() => ({
height: e.vertical && e.height ? `${e.height}${typeof e.height == "number" ? "px" : ""}` : void 0
})), de = m(() => ({
width: c.width ? `${c.width}px` : void 0,
height: c.height ? `${c.height}px` : void 0
})), he = m(() => ({
width: u.width ? `${u.width}px` : void 0,
height: u.height ? `${u.height}px` : void 0,
transform: u.offset ? `translate${e.vertical ? "Y" : "X"}(${L.value && !e.vertical ? `${-u.offset}` : u.offset}px) translateZ(0)` : void 0,
transitionDuration: y.value ? "0ms" : `${e.speed}ms`
})), U = m(() => k.value || !e.loop && l.value <= 0), _ = m(() => k.value || !e.loop && l.value >= o.value.size - e.viewSize), E = m(() => e.vertical ? [b.value.angleUp, b.value.angleDown] : L.value ? [b.value.angleRight, b.value.angleLeft] : [b.value.angleLeft, b.value.angleRight]);
M(
() => e.active,
(t) => {
H(t - e.activeOffset);
}
), M(ve, (t) => {
e.ignoreHover || (t ? ze() : Se());
}), M(() => e.viewSize, Y), M(() => e.autoplay, Z);
const Q = J(() => {
Array.from(o.value).forEach((t, i) => {
t.label = i;
});
}), ee = J(() => {
o.value.forEach((t) => {
t.width = f.width, t.height = f.height;
});
}), X = J(() => {
u.width = f.width * o.value.size, u.height = f.height * o.value.size;
});
Ce(
Ve,
D({
vertical: Oe(e, "vertical"),
increaseItem: pe,
decreaseItem: me,
isItemActive: we,
handleSelect: ye
})
);
let p = !1, N = !1;
y.value = !0, Re(() => {
te(), H(e.active - e.activeOffset), le(), setTimeout(() => {
y.value = !1, p = !1, Z();
}, 0);
}), se({
itemStates: o,
currentActive: l,
arrowActive: T,
wrapper: $,
prev: z,
next: S,
refresh: Y
});
function pe(t) {
o.value.add(t), Q(), ee(), X();
}
function me(t) {
o.value.delete(t), Q(), X();
}
function we(t) {
return (l.value + e.activeOffset) % o.value.size === t;
}
function te() {
if (!$.value) return;
let t = 0, i = 0;
e.arrow === "outside" && (e.vertical ? (t = z.value ? z.value.offsetHeight : 0, i = S.value ? S.value.offsetHeight : 0) : (t = z.value ? z.value.offsetWidth : 0, i = S.value ? S.value.offsetWidth : 0)), e.vertical ? (c.width = 0, c.height = $.value.offsetHeight - t - i, f.width = 0, f.height = c.height / e.viewSize) : (c.width = $.value.offsetWidth - t - i, c.height = 0, f.width = c.width / e.viewSize, f.height = 0);
}
function Y() {
te(), ee(), X(), u.offset > 0 ? I(0) : x(0), setTimeout(() => {
y.value = !1, p = !1;
}, 0);
}
function ae() {
const t = (l.value + e.activeOffset) % o.value.size;
ue("update:active", t), q(e.onChange, t);
}
function I(t = 1) {
if (k.value || p) return;
const i = e.vertical ? f.height : f.width, n = Array.from(o.value), r = n.length, v = (l.value - t + r) % r, j = l.value;
if (v >= r - e.viewSize) {
if (!e.loop) return;
if (u.offset < 0)
if (t < l.value)
u.offset = -v * i;
else {
u.offset = i * (r - v);
for (let d = v; d < r; ++d)
n[d].offset = -r * i;
}
else {
for (let d = 0; d < r; ++d)
n[d].offset = d < v ? 0 : (L.value && !e.vertical ? r : -r) * i;
u.offset = i * (r - v);
}
l.value = v;
} else
l.value = v, u.offset = -l.value * i;
N = l.value <= r - e.viewSize, p = !0, l.value !== j && ae();
}
function x(t = 1) {
if (k.value || p) return;
const i = e.vertical ? f.height : f.width, n = Array.from(o.value), r = n.length, v = l.value + t, j = l.value;
if (v > o.value.size - e.viewSize) {
if (!e.loop) return;
if (u.offset > 0)
u.offset = i * (r - v);
else {
const d = v + e.viewSize - r;
for (let P = 0, xe = n.length; P < xe; ++P)
n[P].offset = P < d ? (L.value && !e.vertical ? -r : r) * i : 0;
u.offset = -v * i;
}
l.value = v % r;
} else
l.value = v, u.offset = -l.value * i;
N = l.value <= r - e.viewSize, p = !0, l.value !== j && ae();
}
function H(t) {
if (k.value || p || t === l.value) return;
const i = o.value.size;
if (t = t % i + (t < 0 ? i : 0), e.loop) {
let n, r;
t > l.value ? (n = t - l.value, r = i - t + l.value) : (n = i - l.value + t, r = l.value - t), n < r ? x(n) : n > r ? I(r) : u.offset > 0 ? I(n) : x(n);
} else
t < l.value ? I(l.value - t) : x(t - l.value);
}
function le() {
N ? (o.value.forEach((t) => {
t.offset = 0;
}), N = !1, y.value = !0, requestAnimationFrame(() => {
u.offset = -l.value * (e.vertical ? f.height : f.width), requestAnimationFrame(() => {
y.value = !1, p = !1;
});
})) : p = !1;
}
function ge() {
I(1), q(e.onPrev, (l.value + e.activeOffset) % o.value.size);
}
function be() {
x(1), q(e.onNext, (l.value + e.activeOffset) % o.value.size);
}
function ye(t) {
q(e.onSelect, t);
}
const { timer: w } = Me();
function Z() {
if (clearInterval(w.play), !e.autoplay) return;
let t = 4e3;
typeof e.autoplay == "number" && (t = e.autoplay), w.play = window.setInterval(() => {
!e.loop && _.value ? H(0) : x();
}, t);
}
function ze() {
e.autoplay && (clearTimeout(w.hover), w.hover = setTimeout(() => {
clearInterval(w.play);
}, K.value)), e.arrowTrigger === "hover" && e.arrow === "inside" && (T.value = !0);
}
function Se() {
e.autoplay && (clearTimeout(w.hover), w.hover = setTimeout(() => {
Z();
}, K.value)), e.arrowTrigger === "hover" && (T.value = !1);
}
function ke(t) {
return e.loop ? !1 : !(t >= e.activeOffset - 1 && t < o.value.size - e.activeOffset - 1);
}
return (t, i) => (O(), C("div", {
ref_key: "wrapper",
ref: $,
class: h(fe.value),
role: "list",
style: F(ce.value)
}, [
g(a(We), { onResize: Y }, {
default: V(() => [
R("div", {
style: F({
position: "relative",
display: "flex",
flexDirection: a(e).vertical ? "column" : "row",
width: "100%"
})
}, [
a(e).arrow !== "none" ? (O(), C("div", {
key: 0,
ref_key: "prev",
ref: z,
class: h([
a(s).bem("arrow", a(e).arrow),
a(s).bem("arrow", "prev"),
T.value ? a(s).bem("arrow", "show") : ""
])
}, [
R("div", {
class: h({
[a(s).be("handler")]: !0,
[a(s).bem("handler", "disabled")]: U.value
}),
onClick: ge
}, [
W(t.$slots, "prevArrow", { disabled: U.value }, () => [
g(a(B), {
renderer: a(e).slots.prevArrow,
data: { disabled: U.value }
}, {
default: V(() => [
g(a(re), ie(E.value[0], {
scale: +(E.value[0].scale || 1) * 1.5
}), null, 16, ["scale"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)
], 2)) : G("", !0),
R("div", {
class: h(a(s).be("list")),
style: F(de.value)
}, [
R("div", {
class: h(a(s).be("track")),
style: F(he.value),
onTransitionend: Te(le, ["self"])
}, [
W(t.$slots, "default", {}, () => [
g(a(B), {
renderer: a(e).slots.default
}, null, 8, ["renderer"]),
i[0] || (i[0] = $e("> "))
])
], 38)
], 6),
a(e).arrow !== "none" ? (O(), C("div", {
key: 1,
ref_key: "next",
ref: S,
class: h([
a(s).bem("arrow", a(e).arrow),
a(s).bem("arrow", "next"),
T.value ? a(s).bem("arrow", "show") : ""
])
}, [
R("div", {
class: h({
[a(s).be("handler")]: !0,
[a(s).bem("handler", "disabled")]: _.value
}),
onClick: be
}, [
W(t.$slots, "nextArrow", { disabled: _.value }, () => [
g(a(B), {
renderer: a(e).slots.nextArrow,
data: { disabled: _.value }
}, {
default: V(() => [
g(a(re), ie(E.value[1], {
scale: +(E.value[1].scale || 1) * 1.5
}), null, 16, ["scale"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)
], 2)) : G("", !0)
], 4)
]),
_: 3
}),
a(e).pointer !== "none" ? (O(), C("div", {
key: 0,
class: h(a(s).bem("pointers", a(e).pointer))
}, [
(O(!0), C(Ie, null, Le(o.value.size, (n) => (O(), C("div", {
key: n,
class: h({
[a(s).be("pointer")]: !0,
[a(s).bem("pointer", "active")]: n - 1 === (l.value + a(e).activeOffset) % o.value.size,
[a(s).bem("pointer", "disabled")]: ke(n - a(e).activeOffset - 1)
}),
onClick: (r) => H(n - a(e).activeOffset - 1)
}, [
W(t.$slots, "pointer", {
active: n - 1 === (l.value + a(e).activeOffset) % o.value.size
}, () => [
g(a(B), {
renderer: a(e).slots.pointer,
data: { active: n - 1 === (l.value + a(e).activeOffset) % o.value.size }
}, {
default: V(() => [
R("span", {
class: h(a(s).be("pointer-inner"))
}, null, 2)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 10, qe))), 128))
], 2)) : G("", !0)
], 6));
}
});
export {
lt as default
};
//# sourceMappingURL=carousel.vue2.mjs.map