dk-plus
Version:
204 lines (203 loc) • 7.22 kB
JavaScript
import { defineComponent as te, ref as ae, reactive as ue, watch as re, onBeforeUnmount as oe, computed as l } from "vue";
import { dkSliderProps as ie } from "./index3.js";
import { sliderEmits as ce } from "./index4.js";
import { normalizeSliderValue as T, isRangeValue as E, valueToPercent as x, clamp as h, roundToStep as F } from "./index5.js";
const ve = te({
name: "DkSlider",
props: ie,
emits: ce,
setup(n, { emit: I }) {
const k = ae(), u = ue({
inner: T(n.modelValue, n.min, n.max, n.range),
dragging: !1,
draggingIndex: 0,
hoverIndex: null,
activeIndex: 0
});
let y;
const $ = () => {
y && window.clearTimeout(y), y = void 0;
}, A = (e) => {
I("update:modelValue", e), I("input", e);
}, D = (e) => {
I("update:modelValue", e), I("change", e);
};
re(
() => [n.modelValue, n.min, n.max, n.range],
() => {
u.inner = T(n.modelValue, n.min, n.max, n.range);
},
{ immediate: !0 }
), oe(() => {
$(), M();
});
const s = l(() => Math.min(n.min, n.max)), m = l(() => Math.max(n.min, n.max)), d = l(() => T(u.inner, s.value, m.value, n.range)), g = l(() => E(d.value) ? d.value[0] : d.value), V = l(() => E(d.value) ? d.value[1] : d.value), b = l(() => n.range ? Math.min(g.value, V.value) : g.value), w = l(() => n.range ? Math.max(g.value, V.value) : g.value), U = l(() => n.vertical ? {
height: n.height || "200px"
} : {}), z = l(() => {
const e = x(b.value, s.value, m.value), a = x(w.value, s.value, m.value), t = Math.max(0, a - e);
return n.vertical ? {
height: `${t}%`,
bottom: `${e}%`
} : {
width: `${t}%`,
left: `${e}%`
};
}), H = (e) => {
const a = e === 0 ? n.range ? b.value : g.value : w.value, t = h(x(a, s.value, m.value), 0, 100);
return n.vertical ? { bottom: `${t}%` } : { left: `${t}%` };
}, X = (e) => n.formatTooltip ? String(n.formatTooltip(e)) : String(e), Y = (e) => n.showTooltip ? !!(u.dragging && u.draggingIndex === e || u.hoverIndex === e) : !1, j = l(() => {
const e = n.marks;
if (!e)
return [];
const a = [];
for (const t of Object.keys(e)) {
const r = Number(t);
if (!Number.isFinite(r))
continue;
const o = e[r];
typeof o == "string" ? a.push({ value: r, label: o }) : o && typeof o == "object" && a.push({
value: r,
label: o.label,
style: o.style ? o.style : void 0
});
}
return a.filter((t) => t.value >= s.value && t.value <= m.value).sort((t, r) => t.value - r.value);
}), _ = l(() => {
if (!n.showStops)
return [];
const e = s.value, a = m.value, t = n.step;
if (!Number.isFinite(t) || t <= 0)
return [];
const r = Math.floor((a - e) / t);
if (r <= 1)
return [];
const o = [];
for (let i = 1; i < r; i++) {
const v = e + i * t, c = h(x(v, e, a), 0, 100);
o.push(c);
}
return o;
}), O = (e) => n.vertical ? { bottom: `${e}%` } : { left: `${e}%` }, q = (e) => {
const a = h(x(e, s.value, m.value), 0, 100);
return n.vertical ? { bottom: `${a}%` } : { left: `${a}%` };
}, L = (e, a) => {
const t = k.value;
if (!t)
return s.value;
const r = t.getBoundingClientRect(), o = s.value, i = m.value, v = i - o;
if (v <= 0)
return o;
let c = 0;
if (n.vertical) {
const S = r.height || 1;
c = (r.bottom - a) / S;
} else {
const S = r.width || 1;
c = (e - r.left) / S;
}
c = h(c, 0, 1);
const ee = o + c * v, ne = F(ee, n.step, o);
return h(ne, o, i);
}, f = (e, a, t) => {
if (n.disabled)
return;
const r = s.value, o = m.value, i = h(F(a, n.step, r), r, o);
if (!n.range) {
u.inner = i, t === "input" ? A(u.inner) : D(u.inner);
return;
}
const v = E(d.value) ? [...d.value] : [r, o];
v[e] = i;
let c = [v[0], v[1]];
c[0] > c[1] && (c = [c[1], c[0]], u.activeIndex = e === 0 ? 1 : 0, u.draggingIndex = u.activeIndex), u.inner = c, t === "input" ? A(u.inner) : D(u.inner);
}, G = (e) => {
if (!n.range)
return 0;
const a = b.value, t = w.value;
return Math.abs(e - a) <= Math.abs(e - t) ? 0 : 1;
}, J = (e) => {
if (n.disabled || e.button !== 0)
return;
const a = L(e.clientX, e.clientY), t = G(a);
u.activeIndex = t, f(t, a, "change");
}, R = () => {
document.addEventListener("mousemove", B), document.addEventListener("mouseup", C), document.addEventListener("touchmove", N, { passive: !1 }), document.addEventListener("touchend", P);
}, M = () => {
document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", C), document.removeEventListener("touchmove", N), document.removeEventListener("touchend", P);
}, K = (e, a) => {
n.disabled || a.button === 0 && (u.dragging = !0, u.draggingIndex = e, u.activeIndex = e, R());
}, Q = (e) => {
n.disabled || (u.dragging = !0, u.draggingIndex = e, u.activeIndex = e, R());
}, B = (e) => {
if (!u.dragging)
return;
const a = L(e.clientX, e.clientY);
f(u.draggingIndex, a, "input");
}, C = () => {
!u.dragging || (u.dragging = !1, M(), D(u.inner));
}, N = (e) => {
if (!u.dragging)
return;
e.preventDefault();
const a = e.touches[0];
if (!a)
return;
const t = L(a.clientX, a.clientY);
f(u.draggingIndex, t, "input");
}, P = () => {
!u.dragging || (u.dragging = !1, M(), D(u.inner));
}, W = (e, a) => {
if (n.disabled)
return;
const t = n.step;
if (!Number.isFinite(t) || t <= 0)
return;
const r = a.key;
if (r !== "ArrowLeft" && r !== "ArrowRight" && r !== "ArrowUp" && r !== "ArrowDown" && r !== "Home" && r !== "End")
return;
a.preventDefault();
const o = e === 0 ? n.range ? b.value : g.value : w.value;
let i = o;
(r === "ArrowLeft" || r === "ArrowDown") && (i = o - t), (r === "ArrowRight" || r === "ArrowUp") && (i = o + t), r === "Home" && (i = s.value), r === "End" && (i = m.value), u.activeIndex = e, f(e, i, "change");
}, Z = (e, a) => {
if (n.disabled)
return;
$();
const t = n.debounce || 0;
if (!t) {
u.activeIndex = e, f(e, a, "change");
return;
}
y = window.setTimeout(() => {
u.activeIndex = e, f(e, a, "change");
}, t);
}, p = l(() => !!n.range);
return {
runwayRef: k,
state: u,
normalized: d,
firstValue: g,
secondValue: V,
minValue: b,
maxValue: w,
isRange: p,
runwayStyle: U,
barStyle: z,
buttonStyle: H,
tooltipVisible: Y,
formatTooltipText: X,
marksList: j,
stops: _,
stopStyle: O,
markStyle: q,
onRunwayMouseDown: J,
onButtonDown: K,
onButtonTouchStart: Q,
onKeydown: W,
onInputNumberChange: Z
};
}
});
export {
ve as default
};