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