@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
350 lines (349 loc) • 11.9 kB
JavaScript
import { defineComponent as Se, ref as c, computed as v, provide as _e, nextTick as N, watch as W, createElementBlock as S, openBlock as w, unref as t, normalizeClass as f, createCommentVNode as $, createElementVNode as _, createVNode as T, normalizeProps as Y, guardReactiveProps as G, withCtx as H, normalizeStyle as A, Fragment as J, renderList as Ee, createBlock as Ie, renderSlot as Ce, createTextVNode as $e, toDisplayString as Te } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../scroll/index.mjs";
import "../form/index.mjs";
import "./wheel-item.vue.mjs";
import { useProps as Ae, createStateProp as Le, useNameHelper as Me, useIcons as Pe, emitEvent as L } from "@vexip-ui/config";
import { useDisplay as Re, useRtl as De, useModifier as Fe } from "@vexip-ui/hooks";
import { toFalse as Ne, USE_TOUCH as We, debounceMinor as Q, debounce as He, boundRange as Ve } from "@vexip-ui/utils";
import { wheelProps as Be } from "./props.mjs";
import { WHEEL_STATE as Ue } from "./symbol.mjs";
import { useFieldStore as Oe } from "../form/helper.mjs";
import Z from "../icon/icon.mjs";
import je from "../scroll/scroll.vue2.mjs";
import qe from "./wheel-item.vue2.mjs";
import Ke from "../renderer/renderer.mjs";
const Xe = ["id", "aria-labelledby"], cl = /* @__PURE__ */ Se({
name: "Wheel",
__name: "wheel",
props: Be,
emits: ["update:value"],
setup(ee, { expose: le, emit: ae }) {
const { idFor: V, labelId: te, state: re, disabled: oe, loading: ne, validateField: ue, getFieldValue: se, setFieldValue: ie } = Oe(() => {
var e;
return (e = p.value) == null ? void 0 : e.focus();
}), l = Ae("wheel", ee, {
state: Le(re),
horizontal: !1,
value: {
default: () => se(),
static: !0
},
candidate: {
default: 2,
validator: (e) => [0, 1, 2, 3].includes(e)
},
arrow: !1,
pointer: We,
options: {
default: () => [],
static: !0
},
insertEmpty: !1,
disabled: () => oe.value,
loading: () => ne.value,
loadingLock: !1,
disabledItem: {
default: Ne,
isFunc: !0
},
noTransition: !1,
selectable: !1,
slots: () => ({})
}), de = ae, n = Me("wheel"), m = Pe(), E = c(/* @__PURE__ */ new Set()), s = c(0), M = c(0), P = c(0), i = c(0), d = c(0), h = c(0), b = c(0), R = c(!1), { isRtl: B } = De(), p = Re(ye), g = c();
Fe({
target: p,
passive: !1,
onKeyDown: (e, a) => {
(a.up || a.down) && (e.preventDefault(), a.up ? q() : K());
}
});
const ve = v(() => {
const e = l.options.map((a) => {
if (typeof a == "object") {
const { value: r, label: o, disabled: X = !1 } = a;
return {
value: r,
label: o || String(r),
disabled: X,
meta: a
};
}
return { value: a, label: String(a), disabled: !1, meta: a };
});
return l.insertEmpty && e.unshift({
value: "",
label: typeof l.insertEmpty == "string" ? l.insertEmpty : "-",
disabled: !1,
meta: ""
}), e;
}), u = v(() => Array.from(E.value)), U = v(() => l.loading && l.loadingLock), ce = v(() => [
n.b(),
n.bs("vars"),
n.bm(l.horizontal ? "horizontal" : "vertical"),
{
[n.bm("inherit")]: l.inherit,
[n.bm(l.state)]: l.state !== "default",
[n.bm("disabled")]: l.disabled,
[n.bm("readonly")]: U.value,
[n.bm("loading")]: l.loading
}
]), fe = v(() => l.horizontal ? {
paddingRight: `${h.value}px`,
paddingLeft: `${h.value}px`
} : {
paddingTop: `${b.value}px`,
paddingBottom: `${b.value}px`
}), O = v(() => l.horizontal ? {
width: h.value ? `${h.value}px` : void 0
} : {
height: b.value ? `${b.value}px` : void 0
}), me = v(() => {
const e = {
inset: l.horizontal ? `0 ${h.value - 1}px` : `${b.value - 1}px 0`
};
return l.horizontal ? (e.borderTop = "0", e.borderBottom = "0") : (e.borderRight = "0", e.borderLeft = "0"), e;
}), D = v(() => l.disabled || !u.value.slice(0, s.value).some((e) => !C(e))), F = v(() => l.disabled || s.value >= u.value.length - 1 || !u.value.slice(s.value + 1, u.value.length).some((e) => !C(e))), he = v(
() => l.horizontal ? B.value ? m.value.angleRight : m.value.angleLeft : m.value.angleUp
), be = v(
() => l.horizontal ? B.value ? m.value.angleLeft : m.value.angleRight : m.value.angleDown
);
_e(Ue, { increaseItem: pe, decreaseItem: ge });
const I = Q(() => {
const e = Math.max(
u.value.findIndex((a) => a.value === l.value),
0
);
y(x(e));
}), z = Q(() => {
N(() => {
const e = l.horizontal;
u.value.forEach((o) => {
o && o.el && (i.value = Math.max(i.value, o.el.offsetWidth), d.value = Math.max(d.value, o.el.offsetHeight));
});
const a = l.candidate, r = 2 * a + 1;
M.value = r * i.value, P.value = r * d.value, h.value = a * i.value, b.value = a * d.value, E.value.forEach((o) => {
e ? o.width = i.value : o.height = d.value;
}), setTimeout(() => {
var o;
(o = g.value) == null || o.refresh();
}, 0);
});
}), k = He(() => {
if (g.value) {
let e = 0, a = 0;
l.horizontal ? e = s.value * i.value : a = s.value * d.value, N(() => {
var r;
(r = g.value) == null || r.scrollTo(e, a);
});
}
}, 20);
W(
() => l.value,
() => {
I(), k();
},
{ immediate: !0 }
), W(() => l.horizontal, z), W(() => l.candidate, z), le({
idFor: V,
currentActive: s,
isInit: R,
targetWidth: i,
targetHeight: d,
wrapperWidth: M,
wrapperHeight: P,
itemList: u,
wrapper: p,
scroll: g,
refreshScroll: k,
focus: (e) => {
var a;
return (a = p.value) == null ? void 0 : a.focus(e);
},
blur: () => {
var e;
return (e = p.value) == null ? void 0 : e.blur();
}
});
function C(e) {
return e.disabled || l.disabledItem(e.value, e.meta);
}
function y(e) {
if (s.value === e) return;
s.value = e;
const a = u.value[e], r = a == null ? void 0 : a.value;
k(), de("update:value", r), ie(r), L(l.onChange, r, a == null ? void 0 : a.meta), ue();
}
function j(e, a) {
for (a = a / Math.abs(a); u.value[e].disabled && (e += a, !(e < 0 || e >= u.value.length)); )
;
return e;
}
function x(e, a = 1) {
return u.value[e] && C(u.value[e]) && (e = j(e, 1 * a), (a > 0 ? e >= u.value.length : e < 0) && (e = j(Ve(e, 0, u.value.length - 1), -1 * a), (a > 0 ? e < 0 : e >= u.value.length) && (e = 0))), e;
}
function pe(e) {
E.value.add(e), z(), I();
}
function ge(e) {
E.value.delete(e), z(), I();
}
function ye() {
var e;
z(), (e = g.value) == null || e.refresh(), N(() => {
R.value = !0, I(), k();
});
}
function we({ signX: e, signY: a }) {
if (l.disabled || U.value) return !1;
const r = l.horizontal ? e : a;
return !(r < 0 && D.value || r > 0 && F.value);
}
function ze({ clientX: e, clientY: a }) {
const r = l.horizontal ? e / i.value : a / d.value, o = Math.round(r);
o !== s.value ? y(x(o, o > r ? 1 : -1)) : k();
}
function ke({
sign: e,
clientX: a,
clientY: r
}) {
const o = l.horizontal ? Math.round(a / i.value) : Math.round(r / d.value);
y(x(o, e));
}
function q() {
if (!D.value) {
y(x(s.value - 1, -1));
const e = u.value[s.value];
L(l.onPrev, e == null ? void 0 : e.value, e == null ? void 0 : e.meta);
}
}
function K() {
if (!F.value) {
y(x(s.value + 1, 1));
const e = u.value[s.value];
L(l.onNext, e == null ? void 0 : e.value, e == null ? void 0 : e.meta);
}
}
function xe(e, a) {
l.selectable && !C(u.value[a]) && y(a), L(l.onItemClick, e.value, e.meta);
}
return (e, a) => (w(), S("div", {
id: t(V),
ref_key: "wrapper",
ref: p,
class: f(ce.value),
tabindex: "0",
role: "group",
"aria-labelledby": t(te)
}, [
t(l).arrow ? (w(), S("div", {
key: 0,
ref: "prevArrow",
class: f([
t(n).be("arrow"),
t(n).bem("arrow", "prev"),
D.value ? t(n).bem("arrow", "disabled") : ""
]),
"aria-hidden": "",
onClick: q
}, [
T(t(Z), Y(G(he.value)), null, 16)
], 2)) : $("", !0),
_("div", {
class: f(t(n).be("scroll")),
role: "none"
}, [
T(t(je), {
ref_key: "scroll",
ref: g,
inherit: "",
"scroll-x": t(l).horizontal ? i.value * s.value : 0,
"scroll-y": t(l).horizontal ? 0 : d.value * s.value,
width: t(l).horizontal ? M.value : "100%",
height: t(l).horizontal ? "100%" : P.value,
pointer: t(l).pointer,
mode: t(l).horizontal ? "horizontal" : "vertical",
"delta-x": i.value,
"delta-y": d.value,
"on-before-scroll": we,
"no-transition": t(l).noTransition,
onWheel: ke,
onScrollEnd: ze
}, {
default: H(() => [
_("ul", {
ref: "list",
class: f(t(n).be("list")),
style: A(fe.value)
}, [
R.value ? (w(!0), S(J, { key: 0 }, Ee(ve.value, (r, o) => (w(), Ie(qe, {
key: o,
value: r.value,
disabled: r.disabled || t(l).disabledItem(r.value, r),
active: s.value === o,
meta: r.meta,
onClick: (X) => xe(r, o)
}, {
default: H(() => [
Ce(e.$slots, "default", {
option: r,
index: o
}, () => [
T(t(Ke), {
renderer: t(l).slots.default,
data: { option: r, index: o }
}, {
default: H(() => [
$e(Te(r.label), 1)
]),
_: 2
}, 1032, ["renderer", "data"])
])
]),
_: 2
}, 1032, ["value", "disabled", "active", "meta", "onClick"]))), 128)) : $("", !0)
], 6)
]),
_: 3
}, 8, ["scroll-x", "scroll-y", "width", "height", "pointer", "mode", "delta-x", "delta-y", "no-transition"]),
t(l).candidate ? (w(), S(J, { key: 0 }, [
_("div", {
class: f([t(n).be("mask"), t(n).bem("mask", "top")]),
style: A(O.value)
}, null, 6),
_("div", {
class: f([t(n).be("mask"), t(n).bem("mask", "bottom")]),
style: A(O.value)
}, null, 6)
], 64)) : $("", !0),
_("div", {
class: f({
[t(n).be("border")]: !0,
[t(n).bem("border", "active")]: t(l).loading,
[t(n).bem("border", "vertical")]: t(l).horizontal
}),
style: A(me.value)
}, null, 6)
], 2),
t(l).arrow ? (w(), S("div", {
key: 1,
ref: "nextArrow",
class: f([
t(n).be("arrow"),
t(n).bem("arrow", "next"),
F.value ? t(n).bem("arrow", "disabled") : ""
]),
"aria-hidden": "",
onClick: K
}, [
T(t(Z), Y(G(be.value)), null, 16)
], 2)) : $("", !0)
], 10, Xe));
}
});
export {
cl as default
};
//# sourceMappingURL=wheel.vue2.mjs.map