vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
388 lines (387 loc) • 15.6 kB
JavaScript
import { defineComponent as He, ref as w, computed as u, watch as ae, createElementBlock as p, openBlock as f, normalizeStyle as S, normalizeClass as R, unref as D, createElementVNode as M, createCommentVNode as N, Fragment as A, renderList as re, withModifiers as P, renderSlot as Ee, createBlock as Ve, createTextVNode as q, toDisplayString as G, resolveDynamicComponent as Be, withKeys as x, isVNode as se } from "vue";
import { useInject as Ce, useResizeObserver as Re } from "../utils/index.js";
const De = { class: "slider-dots" }, Te = { class: "slider-marks" }, je = ["onClick"], ze = /* @__PURE__ */ He({
__name: "Slider",
props: {
width: { default: "100%" },
height: { default: "100%" },
vertical: { type: Boolean, default: !1 },
min: { default: 0 },
max: { default: 100 },
marks: { default: () => ({}) },
disabled: { type: Boolean, default: !1 },
range: { type: Boolean, default: !1 },
step: { default: 1 },
tooltip: { type: Boolean, default: !0 },
tooltipOpen: { type: Boolean, default: !1 },
tooltipStyle: { default: () => ({}) },
formatTooltip: { type: Function, default: (r) => r },
value: { default: 0 }
},
emits: ["update:value", "change"],
setup(r, { emit: ue }) {
const l = r, O = w(), Q = w(0), Z = w(0), a = w(0), n = w(0), g = w(), $ = w(), v = w(), c = w(), { colorPalettes: B } = Ce("Slider"), _ = ue, d = u(() => l.vertical ? Z.value : Q.value), ve = u(() => l.vertical ? {
height: typeof l.height == "number" ? `${l.height}px` : l.height
} : {
width: typeof l.width == "number" ? `${l.width}px` : l.width
}), de = u(() => l.vertical ? {
bottom: `${a.value}px`,
top: "auto",
height: `${n.value - a.value}px`
} : {
left: `${a.value}px`,
right: "auto",
width: `${n.value - a.value}px`
}), fe = u(() => l.vertical ? {
bottom: `${a.value}px`,
top: "auto",
transform: "translate(-50%, 50%)"
} : {
left: `${a.value}px`,
right: "auto",
transform: "translate(-50%, -50%)"
}), ce = u(() => l.vertical ? {
bottom: `${n.value}px`,
top: "auto",
transform: "translate(-50%, 50%)"
} : {
left: `${n.value}px`,
right: "auto",
transform: "translate(-50%, -50%)"
}), Y = u(() => Object.keys(l.marks).length > 0), m = u(() => {
let t = [];
return Y.value && (t = Object.keys(l.marks).map(parseFloat).sort((e, i) => e - i)), t;
}), C = u(() => {
const t = [];
return m.value.length > 0 && m.value.forEach((e) => {
t.push(xe(e));
}), t;
}), b = u(() => l.step === "mark" ? 1 : l.step), me = u(() => b.value.toString().split(".")[1]?.length ?? 0), ee = u(() => {
let t = 0;
return m.value.forEach((e) => {
const i = e.toString().split(".");
(i[1]?.length ?? 0 > t) && (t = i[1]?.length);
}), t;
}), L = u(() => {
if (d.value === 0) return l.value;
let t;
if (n.value === d.value ? t = l.max : (t = le(n.value), l.step === "mark" ? t = H(t, m.value) : l.step > 1 && !m.value.includes(t) && (t = Math.round(t / l.step) * l.step)), l.range) {
let e;
return a.value === 0 ? e = l.min : (e = le(a.value), l.step === "mark" ? e = H(e, m.value) : l.step > 1 && !m.value.includes(e) && (e = Math.round(e / l.step) * l.step)), [e, t];
}
return t;
}), he = u(() => l.range ? l.formatTooltip(L.value[0]) : null), pe = u(() => l.range ? l.formatTooltip(L.value[1]) : l.formatTooltip(L.value));
ae(
() => [l.min, l.max, l.step, l.vertical, l.value],
() => {
te();
},
{
deep: !0,
flush: "post"
}
), ae(L, (t) => {
JSON.stringify(t) !== JSON.stringify(l.value) && (_("update:value", t), _("change", t));
}), Re(O, () => {
ge();
});
function ge() {
Q.value = O.value.offsetWidth, Z.value = O.value.offsetHeight, te();
}
function be(t) {
const e = h((we(t) - l.min) / b.value, "*");
a.value = k(e, 2);
}
function ke(t) {
const e = h((Pe(t) - l.min) / b.value, "*");
n.value = k(e, 2);
}
function ye(t) {
const e = h((Se(t) - l.min) / b.value, "*");
n.value = k(e, 2);
}
function te() {
l.range ? (be(l.value[0]), ke(l.value[1])) : ye(l.value);
}
function we(t) {
return t < l.min ? l.min : t;
}
function Pe(t) {
return t > l.max ? l.max : t;
}
function Se(t) {
return t < l.min ? l.min : t > l.max ? l.max : t;
}
function H(t, e) {
if (!Y.value)
return console.warn("Please set the marks property"), 0;
let i = e[0], o = Math.abs(t - i);
const s = e.length;
for (let z = 1; z < s; z++) {
const oe = Math.abs(t - e[z]);
oe < o && (o = oe, i = e[z]);
}
return i;
}
function le(t) {
const e = h(t, "/") * b.value + l.min;
return m.value.includes(k(e, ee.value)) ? k(e, ee.value) : k(e, me.value);
}
function xe(t) {
const e = (t - l.min) / (l.max - l.min) * d.value;
return k(e, 2);
}
function k(t, e) {
return parseFloat(t.toFixed(e));
}
function ie(t) {
t.classList.remove("show-handle-tooltip");
}
function y(t, e) {
t.focus(), l.tooltip && !l.tooltipOpen && e.classList.add("show-handle-tooltip");
}
function T(t) {
let e, i;
if (l.vertical) {
e = O.value.getBoundingClientRect().bottom - t.clientY;
const s = Math.round(h(e, "/"));
i = k(h(s, "*"), 2);
} else {
const o = O.value.getBoundingClientRect().left;
e = t.clientX - o;
const s = Math.round(h(e, "/"));
i = k(h(s, "*"), 2);
}
return {
originalPosition: e,
stepPosition: i
};
}
function K(t, e) {
if (Y.value) {
const i = H(t, C.value);
return Math.abs(t - i) < Math.abs(t - e) ? i : e;
} else
return e;
}
function $e(t) {
const {
originalPosition: e,
// 指针点击位置
stepPosition: i
// 只考虑步长时将要移动的位置
} = T(t);
let o;
if (l.step === "mark") {
const s = H(e, C.value);
l.range && Math.abs(s - a.value) < Math.abs(s - n.value) ? (s !== a.value && (a.value = s), y(g.value, $.value)) : (s !== n.value && (n.value = s), y(v.value, c.value));
} else
o = K(e, i), l.range && Math.abs(o - a.value) < Math.abs(o - n.value) ? (o !== a.value && (a.value = o), y(g.value, $.value)) : (o !== n.value && (n.value = o), y(v.value, c.value));
}
function X(t) {
g.value && (g.value.setPointerCapture(t.pointerId), document.addEventListener("pointermove", J), document.addEventListener("pointerup", E), document.addEventListener("pointercancel", E), J(t));
}
function J(t) {
const {
originalPosition: e,
// 初始位置
stepPosition: i
// 只考虑步长时将要移动的位置
} = T(t);
let o;
if (l.tooltip && !l.tooltipOpen && $.value.classList.add("show-handle-tooltip"), l.step === "mark") {
const s = H(e, C.value);
s <= n.value ? s !== a.value && (a.value = s) : (a.value = n.value, v.value.focus(), E(), U(t));
} else
o = K(e, i), o < 0 ? a.value = 0 : 0 <= o && o <= n.value ? a.value = o : (a.value = n.value, v.value.focus(), E(), U(t));
}
function E() {
l.tooltip && !l.tooltipOpen && $.value.classList.remove("show-handle-tooltip"), document.removeEventListener("pointermove", J), document.removeEventListener("pointerup", E), document.removeEventListener("pointercancel", E);
}
function U(t) {
v.value && (v.value.setPointerCapture(t.pointerId), document.addEventListener("pointermove", W), document.addEventListener("pointerup", V), document.addEventListener("pointercancel", V), W(t));
}
function W(t) {
let {
originalPosition: e,
// 初始位置
stepPosition: i
// 只考虑步长时将要移动的位置
} = T(t), o;
if ({ originalPosition: e, stepPosition: i } = T(t), l.tooltip && !l.tooltipOpen && c.value.classList.add("show-handle-tooltip"), l.step === "mark") {
const s = H(e, C.value);
s >= a.value ? s !== n.value && (n.value = s) : (n.value = a.value, l.range && (g.value.focus(), V(), X(t)));
} else
o = K(e, i), o > d.value ? n.value = d.value : a.value <= o && o <= d.value ? n.value = o : (n.value = a.value, l.range && (g.value.focus(), V(), X(t)));
}
function V() {
l.tooltip && !l.tooltipOpen && c.value.classList.remove("show-handle-tooltip"), document.removeEventListener("pointermove", W), document.removeEventListener("pointerup", V), document.removeEventListener("pointercancel", V);
}
function Le(t) {
const e = `${Math.abs(t - l.min) / (l.max - l.min) * 100}%`;
return l.vertical ? {
bottom: e
} : {
left: e
};
}
function ne(t) {
return l.range ? L.value[0] <= t && t <= L.value[1] : t <= L.value;
}
function j(t) {
const e = l.marks[t], o = typeof e == "object" && !se(e) ? e.label : e;
return o ? typeof o == "function" ? o() : o : null;
}
function Me(t) {
const e = `${Math.abs(t - l.min) / (l.max - l.min) * 100}%`;
let i = {};
const o = l.marks[t];
return typeof o == "object" && !se(o) && "style" in o && (i = o.style), l.vertical ? {
transform: "translateY(50%)",
bottom: e,
...i
} : {
transform: "translateX(-50%)",
left: e,
...i
};
}
function Oe(t) {
const e = C.value[t];
l.range && Math.abs(e - a.value) < Math.abs(e - n.value) ? (e !== a.value && (a.value = e), y(g.value, $.value)) : (e !== n.value && (n.value = e), y(v.value, c.value));
}
function F(t, e) {
const i = h(t, "-");
e === "low" ? i < 0 ? a.value = 0 : a.value = i : i >= a.value ? n.value = i : (n.value = a.value, a.value = i, g.value.focus());
}
function I(t, e) {
const i = h(t, "+");
e === "high" ? i > d.value ? n.value = d.value : n.value = i : i <= n.value ? a.value = i : (a.value = n.value, n.value = i, v.value.focus());
}
function h(t, e) {
return e === "+" ? t + d.value * b.value / (l.max - l.min) : e === "-" ? t - d.value * b.value / (l.max - l.min) : e === "*" ? t * d.value * b.value / (l.max - l.min) : e === "/" ? t * (l.max - l.min) / (d.value * b.value) : t;
}
return (t, e) => (f(), p("div", {
ref_key: "sliderRef",
ref: O,
class: R(["slider-wrap", {
"slider-horizontal": !r.vertical,
"slider-vertical": r.vertical,
"slider-with-marks": Object.keys(r.marks).length > 0,
"slider-disabled": r.disabled
}]),
style: S([
ve.value,
`
--slider-rail-color: rgba(0, 0, 0, 0.04);
--slider-rail-color-hover: rgba(0, 0, 0, 0.1);
--slider-rail-color-disabled: rgba(0, 0, 0, 0.06);
--slider-track-color: ${D(B)[2]};
--slider-track-color-hover: ${D(B)[5]};
--slider-track-color-disabled: rgba(0, 0, 0, 0.25);
--slider-handle-color: #fff;
--slider-handle-shadow-color: ${D(B)[2]};
--slider-handle-shadow-color-hover-focus: ${D(B)[5]};
--slider-handle-shadow-color-disabled: #bfbfbf;
--slider-dot-color: #fff;
--slider-dot-border-color: #f0f0f0;
--slider-dot-border-color-hover: rgba(0, 0, 0, 0.1);
--slider-dot-color-active: ${D(B)[2]};
--slider-mark-color: rgba(0, 0, 0, 0.45);
--slider-mark-color-active: rgba(0, 0, 0, 0.88);
--slider-tooltip-color: #fff;
--slider-tooltip-bg-color: rgba(0, 0, 0, 0.85);
`
]),
onPointerdown: e[12] || (e[12] = (i) => r.disabled ? () => !1 : $e(i))
}, [
e[15] || (e[15] = M("div", { class: "slider-rail" }, null, -1)),
M("div", {
class: "slider-track",
style: S(de.value)
}, null, 4),
Object.keys(r.marks).length > 0 ? (f(), p(A, { key: 0 }, [
M("div", De, [
(f(!0), p(A, null, re(m.value, (i, o) => (f(), p("span", {
class: R(["slider-dot", { "slider-dot-active": ne(i) }]),
style: S(Le(i)),
key: o
}, null, 6))), 128))
]),
M("div", Te, [
(f(!0), p(A, null, re(m.value, (i, o) => (f(), p("span", {
class: R(["slider-mark", { "slider-mark-active": ne(i) }]),
style: S(Me(i)),
key: o,
onClick: P((s) => r.disabled ? () => !1 : Oe(o), ["stop"])
}, [
Ee(t.$slots, "mark", {
label: j(i),
value: i
}, () => [
typeof j(i) == "string" ? (f(), p(A, { key: 0 }, [
q(G(j(i)), 1)
], 64)) : (f(), Ve(Be(j(i)), { key: 1 }))
], !0)
], 14, je))), 128))
])
], 64)) : N("", !0),
r.range ? (f(), p("div", {
key: 1,
tabindex: "0",
ref_key: "lowHandleRef",
ref: g,
class: "slider-handle",
style: S(fe.value),
onKeydown: [
e[0] || (e[0] = x(P((i) => r.disabled ? () => !1 : F(a.value, "low"), ["prevent"]), ["left"])),
e[1] || (e[1] = x(P((i) => r.disabled ? () => !1 : I(a.value, "low"), ["prevent"]), ["right"])),
e[2] || (e[2] = x(P((i) => r.disabled ? () => !1 : F(a.value, "low"), ["prevent"]), ["down"])),
e[3] || (e[3] = x(P((i) => r.disabled ? () => !1 : I(a.value, "low"), ["prevent"]), ["up"]))
],
onPointerdown: e[4] || (e[4] = (i) => r.disabled ? () => !1 : X(i)),
onBlur: e[5] || (e[5] = (i) => r.tooltip && !r.disabled && !r.tooltipOpen ? ie($.value) : () => !1)
}, [
r.tooltip ? (f(), p("div", {
key: 0,
ref_key: "lowTooltipRef",
ref: $,
class: R(["handle-tooltip", { "show-handle-tooltip": r.tooltipOpen }]),
style: S(r.tooltipStyle)
}, [
q(G(he.value) + " ", 1),
e[13] || (e[13] = M("div", { class: "tooltip-arrow" }, null, -1))
], 6)) : N("", !0)
], 36)) : N("", !0),
M("div", {
tabindex: "0",
ref_key: "highHandleRef",
ref: v,
class: "slider-handle",
style: S(ce.value),
onKeydown: [
e[6] || (e[6] = x(P((i) => r.disabled ? () => !1 : F(n.value, "high"), ["prevent"]), ["left"])),
e[7] || (e[7] = x(P((i) => r.disabled ? () => !1 : I(n.value, "high"), ["prevent"]), ["right"])),
e[8] || (e[8] = x(P((i) => r.disabled ? () => !1 : F(n.value, "high"), ["prevent"]), ["down"])),
e[9] || (e[9] = x(P((i) => r.disabled ? () => !1 : I(n.value, "high"), ["prevent"]), ["up"]))
],
onPointerdown: e[10] || (e[10] = (i) => r.disabled ? () => !1 : U(i)),
onBlur: e[11] || (e[11] = (i) => r.tooltip && !r.disabled && !r.tooltipOpen ? ie(c.value) : () => !1)
}, [
r.tooltip ? (f(), p("div", {
key: 0,
ref_key: "highTooltipRef",
ref: c,
class: R(["handle-tooltip", { "show-handle-tooltip": r.tooltipOpen }]),
style: S(r.tooltipStyle)
}, [
q(G(pe.value) + " ", 1),
e[14] || (e[14] = M("div", { class: "tooltip-arrow" }, null, -1))
], 6)) : N("", !0)
], 36)
], 38));
}
});
export {
ze as default
};