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