@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
594 lines (593 loc) • 20.3 kB
JavaScript
import { defineComponent as Xe, useSlots as Ye, ref as h, computed as f, shallowReadonly as je, reactive as qe, toRef as pe, watch as ge, createElementBlock as L, openBlock as T, unref as l, normalizeClass as g, createElementVNode as $, renderSlot as D, createCommentVNode as z, createBlock as Ge, createVNode as y, normalizeProps as Je, guardReactiveProps as Qe, withCtx as m, normalizeStyle as B, Fragment as G, renderList as me, mergeProps as J, createTextVNode as Q, toDisplayString as U, createSlots as be } from "vue";
import "../renderer/index.mjs";
import "../form/index.mjs";
import "./slider-trigger.vue.mjs";
import { useProps as Ue, createStateProp as We, useNameHelper as Ze, useHoverDelay as et, emitEvent as he } from "@vexip-ui/config";
import { useSetTimeout as tt, useMoving as at } from "@vexip-ui/hooks";
import { decimalLength as lt, toFixed as ye, throttle as rt } from "@vexip-ui/utils";
import { sliderProps as nt } from "./props.mjs";
import { useFieldStore as it } from "../form/helper.mjs";
import S from "../renderer/renderer.mjs";
import ke from "./slider-trigger.vue2.mjs";
const st = ["id", "aria-labelledby"];
const kt = /* @__PURE__ */ Xe({
name: "Slider",
__name: "slider",
props: nt,
emits: ["update:value"],
setup(Me, { expose: Ve, emit: Pe }) {
const { idFor: W, state: Te, labelId: $e, disabled: De, loading: Se, validateField: Z, getFieldValue: Ne, setFieldValue: ee } = it(ce), e = Ue("slider", Me, {
state: We(Te),
value: {
default: () => Ne() ?? 0,
static: !0
},
min: 0,
max: 100,
step: {
default: 1,
validator: (t) => t > 0
},
vertical: !1,
hideTip: !1,
tipTransfer: null,
disabled: () => De.value,
loading: () => Se.value,
loadingLock: !1,
reverse: !1,
range: !1,
markers: null,
markerOnly: !1,
tipHover: !1,
flipMarker: !1,
triggerFade: !1,
tipProps: () => ({}),
sync: !1,
rangeDraggable: !1,
slots: () => ({})
}), te = Pe, _ = Ye(), o = Ze("slider"), ae = et(), { timer: k } = tt(), u = h([0, 0]), v = h([!1, !1]), M = h(
1
/* END */
), H = h(!1), O = h(!1), N = h(), R = h(), A = h(), p = f(() => {
const t = e.markers, a = [];
if (!t) return a;
if (Array.isArray(t))
for (const r of t) {
const { value: n, ...s } = typeof r == "number" ? { value: r } : r;
Number.isNaN(n) || a.push({ value: n, marker: s });
}
else
for (const r of Object.keys(t)) {
const n = parseFloat(r), s = t[r];
Number.isNaN(n) || a.push({
value: n,
marker: typeof s == "string" ? { label: s } : s
});
}
return a.sort((r, n) => r.value - n.value);
}), Re = f(() => !!p.value.find(({ marker: t }) => t.label)), le = f(() => e.loading && e.loadingLock), re = f(() => e.range && e.rangeDraggable), Ae = f(() => ({
[o.b()]: !0,
[o.bs("vars")]: !0,
[o.bm("inherit")]: e.inherit,
[o.bm(e.state)]: e.state !== "default",
[o.bm("vertical")]: e.vertical,
[o.bm("sliding")]: v.value[1] || v.value[0],
[o.bm("disabled")]: e.disabled,
[o.bm("readonly")]: le.value,
[o.bm("loading")]: e.loading,
[o.bm("reverse")]: e.reverse,
[o.bm("with-marker")]: Re.value,
[o.bm("flip-marker")]: e.flipMarker,
[o.bm("hide-trigger")]: e.triggerFade && !O.value,
[o.bm("range-draggable")]: re.value
})), ne = f(() => lt(e.step)), E = f(() => Math.ceil(Math.min(e.min, e.max) / e.step)), K = f(() => Math.floor(Math.max(e.min, e.max) / e.step)), i = f(() => [
ye(u.value[0] * e.step, ne.value),
ye(u.value[1] * e.step, ne.value)
]), X = f(() => K.value - E.value || 1), d = f(() => [I(u.value[0]), I(u.value[1])]), Ee = f(() => {
const { vertical: t, reverse: a } = e;
return {
[t ? a ? "bottom" : "top" : a ? "right" : "left"]: `${Math.min(d.value[0], d.value[1])}%`,
[t ? "height" : "width"]: `${Math.abs(d.value[0] - d.value[1])}%`
};
}), we = f(() => {
const { vertical: t, reverse: a } = e;
return {
[a ? "bottom" : "top"]: t ? `${d.value[0]}%` : "50%",
[a ? "right" : "left"]: t ? "50%" : `${d.value[0]}%`,
zIndex: M.value === 0 ? 1 : void 0,
transform: `translate(${a ? "" : "-"}50%, ${a ? "" : "-"}50%)`
};
}), Fe = f(() => {
const { vertical: t, reverse: a } = e;
return {
[a ? "bottom" : "top"]: t ? `${d.value[1]}%` : "50%",
[a ? "right" : "left"]: t ? "50%" : `${d.value[1]}%`,
zIndex: M.value === 1 ? 1 : void 0,
transform: `translate(${a ? "" : "-"}50%, ${a ? "" : "-"}50%)`
};
}), C = f(() => e.disabled || le.value), w = je(
qe({
values: i,
sliding: v,
percent: d,
disabled: pe(e, "disabled"),
loading: pe(e, "loading")
})
), { target: xe } = at({
disabled: f(() => !re.value || C.value),
onStart: (t, a) => {
if (!N.value || a.button > 0)
return !1;
clearTimeout(k.sliding), a.stopPropagation(), a.preventDefault(), c = N.value.getBoundingClientRect(), t.startValue = u.value[
0
/* START */
], t.endValue = u.value[
1
/* END */
], t.valueDiff = t.endValue - t.startValue;
},
onMove: (t, a) => {
if (!c)
return;
a.preventDefault();
const r = e.vertical, n = e.reverse, s = r ? t.deltaY : t.deltaX;
for (let P = 0; P < 2; ++P) {
const Ke = P ? 1 : 0;
u.value[Ke] = (n ? -1 : 1) * (s / c[r ? "height" : "width"]) * X.value + Number(t[P ? "endValue" : "startValue"]);
}
V(), u.value[
0
/* START */
] === E.value ? u.value[
1
/* END */
] = u.value[
0
/* START */
] + t.valueDiff : u.value[
1
/* END */
] === K.value && (u.value[
0
/* START */
] = u.value[
1
/* END */
] - t.valueDiff), b("input");
},
onEnd: () => b()
});
j(e.value), V();
let F = e.range ? i.value[0] > i.value[1] ? [i.value[1], i.value[0]] : [i.value[0], i.value[1]] : i.value[1], Y = Array.isArray(F) ? [...F] : F;
ge(
() => e.value,
(t) => {
q(F, t) || (j(t), V());
}
), ge(
() => e.step,
() => {
j(e.value), V();
}
), Ve({
idFor: W,
sliding: v,
track: N,
startTrigger: R,
endTrigger: A,
isValueInRange: x,
focus: ce,
blur: He
});
function I(t) {
return (parseFloat(t) - E.value) / X.value * 100;
}
function j(t) {
if (e.range) {
const a = Array.isArray(t) ? t : [t, 100];
u.value = [a[0] / e.step, a[1] / e.step];
} else
u.value = [E.value, (Array.isArray(t) ? t[0] : t) / e.step];
}
function V() {
u.value = u.value.map((t) => {
let a = Math.max(E.value, Math.min(K.value, Math.round(t)));
if (e.markerOnly && p.value.length) {
let r = 1 / 0, n = 0;
for (const { value: s } of p.value) {
const P = Math.abs(a * e.step - s);
r > P && (r = P, n = s);
}
a = n / e.step;
}
return a;
});
}
function ie() {
H.value || v.value[0] || v.value[1] || (O.value = !1);
}
function Le() {
clearTimeout(k.hover), k.hover = setTimeout(() => {
H.value = !0, O.value = !0;
}, ae.value);
}
function _e() {
clearTimeout(k.hover), k.hover = setTimeout(() => {
H.value = !1, ie();
}, ae.value);
}
function b(t = "change", a = e.sync) {
const [r, n] = i.value, s = e.range ? r > n ? [n, r] : [r, n] : n;
if (t === "change") {
if (q(F, s)) return;
F = s, a || (Y = s, te("update:value", s), ee(s)), he(e.onChange, s), a || Z();
} else {
if (q(Y, s)) return;
Y = s, a && (te("update:value", s), ee(s)), he(e.onInput, s), a && Z();
}
}
let c = null;
function se(t) {
if (!c) return;
const a = e.vertical, r = e.reverse, n = a ? t.clientY : t.clientX;
u.value[M.value] = (r ? -1 : 1) * ((n - c[a ? r ? "bottom" : "top" : r ? "right" : "left"]) / c[a ? "height" : "width"]) * X.value + E.value;
}
function q(t, a) {
return Array.isArray(t) && Array.isArray(a) ? t[0] === a[0] && t[1] === a[1] : t === a;
}
const Oe = rt((t) => {
!c || e.disabled || (t.preventDefault(), se(t), V(), R.value && R.value.updateTooltip(), A.value && A.value.updateTooltip(), b("input"));
});
function Ce(t) {
if (!(!N.value || C.value)) {
if (clearTimeout(k.sliding), t.stopPropagation(), t.preventDefault(), c = N.value.getBoundingClientRect(), e.range) {
const { vertical: a, reverse: r } = e, n = a ? t.clientY : t.clientX, s = (r ? c[a ? "bottom" : "right"] - n : n - c[a ? "top" : "left"]) / c[a ? "height" : "width"] * 100;
M.value = Math.abs(s - d.value[0]) < Math.abs(s - d.value[1]) ? 0 : 1;
} else
M.value = 1;
v.value[M.value] = !0, O.value = !0, se(t), V(), b("input"), document.addEventListener("pointermove", oe), document.addEventListener("pointerup", ue);
}
}
function oe(t) {
Oe(t);
}
function ue() {
c = null, document.removeEventListener("pointermove", oe), document.removeEventListener("pointerup", ue), b(), k.sliding = setTimeout(() => {
v.value[M.value] = !1, ie();
}, 250);
}
function Ie(t) {
t.cancelable && (t.stopPropagation(), t.preventDefault());
}
function ze(t) {
const { vertical: a, reverse: r } = e;
return t = I(t), {
[r ? "bottom" : "top"]: a ? `${t}%` : "50%",
[r ? "right" : "left"]: a ? "50%" : `${t}%`,
transform: `translate(${r ? "" : "-"}50%, ${r ? "" : "-"}50%)`
};
}
function Be(t) {
const { vertical: a, reverse: r } = e;
return t = I(t), {
[r ? "bottom" : "top"]: a ? `${t}%` : void 0,
[r ? "right" : "left"]: a ? void 0 : `${t}%`,
transform: `translate${a ? "Y" : "X"}(${r ? "" : "-"}50%)`
};
}
function x(t) {
const a = parseFloat(t);
if (Number.isNaN(a)) return !1;
if (e.range) {
const r = Math.min(i.value[0], i.value[1]), n = Math.max(i.value[0], i.value[1]);
return a >= r && a <= n;
} else
return a <= i.value[1];
}
function de(t, a, r = !1) {
u.value[t] += a, V(), r && b();
}
function ve(t, a) {
if (!C.value)
if (e.markerOnly || a === "alt") {
if (!p.value.length) return;
const r = i.value[t];
for (const { value: n } of p.value)
if (n > r) {
u.value[t] = n;
break;
}
b();
} else
de(t, a === "shift" ? 5 : a === "ctrl" ? 20 : 1, !0);
}
function fe(t, a) {
if (!C.value)
if (e.markerOnly || a === "alt") {
if (!p.value.length) return;
const r = i.value[t];
for (let n = p.value.length - 1; n >= 0; --n) {
const { value: s } = p.value[n];
if (s < r) {
u.value[t] = s;
break;
}
}
b();
} else
de(t, a === "shift" ? -5 : a === "ctrl" ? -20 : -1);
}
function ce(t) {
var a;
(a = R.value || A.value) == null || a.focus(t);
}
function He() {
var t;
(t = R.value || A.value) == null || t.blur();
}
return (t, a) => (T(), L("div", {
id: l(W),
class: g(Ae.value),
tabindex: "-1",
role: "group",
"aria-labelledby": l($e),
onPointerdown: Ce,
onPointerenter: Le,
onPointerleave: _e,
onTouchstart: Ie
}, [
$("div", {
class: g(l(o).be("container"))
}, [
$("div", {
ref_key: "track",
ref: N,
class: g(l(o).be("track"))
}, null, 2),
D(t.$slots, "filler", Je(Qe(l(w))), () => [
y(l(S), {
renderer: l(e).slots.filler,
data: l(w)
}, {
default: m(() => [
$("div", {
ref_key: "filler",
ref: xe,
class: g(l(o).be("filler")),
style: B(Ee.value)
}, [
$("div", {
class: g(l(o).be("filler-inner"))
}, null, 2)
], 6)
]),
_: 1
}, 8, ["renderer", "data"])
]),
p.value.length ? (T(), L(G, { key: 0 }, [
$("div", {
class: g(l(o).be("points"))
}, [
(T(!0), L(G, null, me(p.value, ({ value: r, marker: n }) => (T(), L("div", {
key: r,
class: g([l(o).be("point"), x(r) && l(o).bem("point", "in-range")]),
style: B(ze(r))
}, [
D(t.$slots, "point", J({ ref_for: !0 }, l(w), {
marker: n,
markerValue: r,
inRange: x(r)
}), () => [
y(l(S), {
renderer: l(e).slots.point,
data: {
...l(w),
marker: n,
markerValue: r,
inRange: x(r)
}
}, {
default: m(() => [
$("span", {
class: g(l(o).be("dot"))
}, null, 2)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 6))), 128))
], 2),
$("div", {
class: g(l(o).be("markers"))
}, [
(T(!0), L(G, null, me(p.value, ({ value: r, marker: n }) => (T(), L("div", J({
key: r,
ref_for: !0
}, n.attrs, {
class: [l(o).be("marker"), n.class],
style: [Be(r), n.style]
}), [
D(t.$slots, "marker", J({ ref_for: !0 }, l(w), {
marker: n,
markerValue: r,
inRange: x(r)
}), () => [
y(l(S), {
renderer: l(e).slots.marker,
data: {
...l(w),
marker: n,
markerValue: r,
inRange: x(r)
}
}, {
default: m(() => [
Q(U(n.label), 1)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 16))), 128))
], 2)
], 64)) : z("", !0),
l(e).range ? (T(), Ge(ke, {
key: 1,
ref_key: "startTrigger",
ref: R,
value: i.value[0],
"tip-transfer": l(e).tipTransfer,
"hide-tip": l(e).hideTip,
vertical: l(e).vertical,
min: l(e).min,
max: l(e).max,
disabled: l(e).disabled,
loading: l(e).loading,
reverse: l(e).reverse,
sliding: v.value[0],
"tip-hover": l(e).tipHover,
style: B(we.value),
"tip-props": l(e).tipProps,
onKeyPlus: a[0] || (a[0] = (r) => ve(0, r)),
onKeyMinus: a[1] || (a[1] = (r) => fe(0, r))
}, be({
default: m(() => [
_.trigger || l(e).slots.trigger ? D(t.$slots, "trigger", {
key: 0,
type: "start",
value: i.value[0],
sliding: v.value[0],
percent: d.value[0],
disabled: l(e).disabled,
loading: l(e).loading
}, () => [
y(l(S), {
renderer: l(e).slots.trigger,
data: {
type: "start",
value: i.value[0],
sliding: v.value[0],
percent: d.value[0],
disabled: l(e).disabled,
loading: l(e).loading
}
}, null, 8, ["renderer", "data"])
]) : z("", !0)
]),
_: 2
}, [
_.tip || l(e).slots.tip ? {
name: "tip",
fn: m(() => [
D(t.$slots, "tip", {
type: "start",
value: i.value[0],
sliding: v.value[0],
percent: d.value[0],
disabled: l(e).disabled,
loading: l(e).loading
}, () => [
y(l(S), {
renderer: l(e).slots.tip,
data: {
type: "start",
value: i.value[0],
sliding: v.value[0],
percent: d.value[0],
disabled: l(e).disabled,
loading: l(e).loading
}
}, {
default: m(() => [
Q(U(i.value[0]), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1032, ["value", "tip-transfer", "hide-tip", "vertical", "min", "max", "disabled", "loading", "reverse", "sliding", "tip-hover", "style", "tip-props"])) : z("", !0),
y(ke, {
ref_key: "endTrigger",
ref: A,
value: i.value[1],
"tip-transfer": l(e).tipTransfer,
"hide-tip": l(e).hideTip,
vertical: l(e).vertical,
min: l(e).min,
max: l(e).max,
disabled: l(e).disabled,
loading: l(e).loading,
reverse: l(e).reverse,
sliding: v.value[1],
"tip-hover": l(e).tipHover,
style: B(Fe.value),
"tip-props": l(e).tipProps,
onKeyPlus: a[2] || (a[2] = (r) => ve(1, r)),
onKeyMinus: a[3] || (a[3] = (r) => fe(1, r))
}, be({
default: m(() => [
_.trigger || l(e).slots.trigger ? D(t.$slots, "trigger", {
key: 0,
type: "end",
value: i.value[1],
sliding: v.value[1],
percent: d.value[1],
disabled: l(e).disabled,
loading: l(e).loading
}, () => [
y(l(S), {
renderer: l(e).slots.trigger,
data: {
type: "end",
value: i.value[1],
sliding: v.value[1],
percent: d.value[1],
disabled: l(e).disabled,
loading: l(e).loading
}
}, null, 8, ["renderer", "data"])
]) : z("", !0)
]),
_: 2
}, [
_.tip || l(e).slots.tip ? {
name: "tip",
fn: m(() => [
D(t.$slots, "tip", {
type: "end",
value: i.value[1],
sliding: v.value[1],
percent: d.value[1],
disabled: l(e).disabled,
loading: l(e).loading
}, () => [
y(l(S), {
renderer: l(e).slots.tip,
data: {
type: "end",
value: i.value[1],
sliding: v.value[1],
percent: d.value[1],
disabled: l(e).disabled,
loading: l(e).loading
}
}, {
default: m(() => [
Q(U(i.value[1]), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1032, ["value", "tip-transfer", "hide-tip", "vertical", "min", "max", "disabled", "loading", "reverse", "sliding", "tip-hover", "style", "tip-props"])
], 2)
], 42, st));
}
});
export {
kt as default
};
//# sourceMappingURL=slider.vue2.mjs.map