maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
272 lines (271 loc) • 9.17 kB
JavaScript
import { defineComponent as te, ref as p, computed as f, watch as O, onMounted as ne, onBeforeUnmount as oe, nextTick as g, openBlock as b, createElementBlock as w, normalizeStyle as V, normalizeClass as F, createElementVNode as N, Fragment as K, renderList as j, toDisplayString as ae } from "vue";
import './assets/MazSlider.Dlk7nygF.css';function ue(a, l) {
let n;
return function(...c) {
clearTimeout(n), n = setTimeout(() => {
a.apply(this, c);
}, l);
};
}
function le(a) {
const l = document.documentElement, n = document.body, c = a.getBoundingClientRect();
return {
y: c.top + (window.pageYOffset || l.scrollTop) - (l.clientTop || n.clientTop || 0),
x: c.left + (window.pageXOffset || l.scrollLeft) - (l.clientLeft || n.clientLeft || 0)
};
}
function se(a, l, n = !1) {
const c = "targetTouches" in a ? a.targetTouches[0] : a, v = le(l), i = {
x: c.pageX - v.x,
y: c.pageY - v.y
};
return {
x: n ? l.offsetWidth - i.x : i.x,
y: n ? l.offsetHeight - i.y : i.y
};
}
function q(a, l, n, c) {
return c === "minus" ? l ? a >= l : !0 : n ? a <= n : !0;
}
function I(a, l, n) {
const c = a + 1, i = l < c ? c - l : l - c;
return 100 / n * i / 100;
}
const re = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ie = ["data-label", "onMousedownPassive", "onTouchstartPassive", "onFocusPassive", "onBlurPassive", "onTouchendPassive", "onKeydownPassive"], ce = /* @__PURE__ */ te({
__name: "MazSlider",
props: {
/** Array of cursors values */
modelValue: {
type: [Number, Array],
required: !0,
validator: (a) => ["number"].includes(typeof a) || Array.isArray(a) || a === null
},
/** array of cursors label */
labels: { type: Array, default: void 0 },
/** min value of sliders */
min: { type: Number, default: 0 },
/** max value of sliders */
max: { type: Number, default: 100 },
/** height size of slider bar */
size: { type: String, default: void 0 },
/** remove div in different colors */
noDivider: { type: Boolean, default: !1 },
/** become a logarithmic slider (exponential) */
log: { type: Boolean, default: !1 },
/** main slider color */
color: {
type: String,
default: "primary"
},
/** disables cursor animation when active */
noCursorAnim: { type: Boolean, default: !1 }
},
emits: ["update:model-value"],
setup(a, { emit: l }) {
const n = a, c = l, v = p(), i = p(), m = p(), d = p(), _ = p([]), B = p([]), y = f(() => typeof n.modelValue == "number" ? [n.modelValue] : n.modelValue ? n.modelValue : [0]), M = f(() => Math.log(n.min || 1)), X = f(() => Math.log(n.max)), C = f(() => {
const { min: e, max: t } = n;
return (X.value - M.value) / (t - e);
}), k = f(() => {
const { min: e, max: t } = n;
return t - e;
}), Y = f(() => ({
paddingTop: n.labels ? "2.5em" : "1em"
})), H = f(() => Array.isArray(n.modelValue));
O(
() => n.modelValue,
() => d.value = y.value,
{ immediate: !0 }
), O(
() => [y.value, n.min, n.max, n.log].join(","),
() => z(!0)
);
const L = ue(() => z(), 300);
ne(() => {
z(!0), window.addEventListener("resize", L);
}), oe(() => {
window.removeEventListener("resize", L);
});
async function z(e) {
e === !0 && U(), await Q(), await g();
for (const [t] of y.value.entries())
P(t);
}
function R(e, t) {
e.key === "ArrowLeft" ? d.value && q(d.value[t] - 1, d.value[t - 1], d.value[t + 1], "minus") && (d.value[t]--, x(d.value)) : e.key === "ArrowRight" && d.value && q(d.value[t] + 1, d.value[t - 1], d.value[t + 1], "plus") && (d.value[t]++, x(d.value));
}
function A(e) {
i.value = void 0, $(e);
}
function U() {
const { min: e, max: t } = n, r = y.value.map(
(o) => o < e ? e : o > t ? t : o
);
x(r), d.value = r;
}
function x(e) {
const t = H.value ? [...e] : e[0];
c("update:model-value", t);
}
function G(e) {
const { labels: t } = n;
return t ? t[e] : void 0;
}
function P(e) {
$(e), n.noDivider || J();
}
async function $(e) {
var r;
await g();
const t = document.querySelectorAll(".m-slider .m-slider__btn");
if (t) {
const o = t[e], u = (o == null ? void 0 : o.clientWidth) + 16, s = {
left: typeof ((r = m.value) == null ? void 0 : r[e]) == "number" ? `${m.value[e] - u / 2 || 1}px` : ""
};
_.value[e] = s;
}
}
function J() {
if (m.value) {
const e = [...m.value];
e.push(0);
const t = e.length, r = Math.round(t / 2);
B.value = e.map((o, u) => ({
left: u === 0 ? 0 : `${e[u - 1]}px`,
// ATTENTION: buttonPositions.value[i - 1]
right: u + 1 === t ? 0 : `calc( 100% - ${o}px )`,
backgroundColor: r === u + 1 ? void 0 : u < r ? `rgba(255, 255, 255, ${I(u, r, t)})` : `rgba(0, 0, 0, ${I(u, r, t)})`
// darken
}));
}
}
async function Q() {
var u, s;
await g();
const { min: e, max: t, log: r } = n, o = (u = v.value) == null ? void 0 : u.clientWidth;
typeof o == "number" ? m.value = (s = d.value) == null ? void 0 : s.map(
(h) => r ? o / t * (e + (Math.log(h) - M.value) / C.value) : o / k.value * (h - e)
) : console.warn("[maz-ui][MazSlider] ref component not found");
}
async function W() {
var u, s, h;
await g();
const { max: e, min: t, log: r } = n, o = (u = v.value) == null ? void 0 : u.clientWidth;
if (typeof o == "number")
return r ? (s = m.value) == null ? void 0 : s.map((T) => {
const Z = T / (o / e), ee = Math.exp((Z - t) * C.value + M.value);
return Math.round(ee);
}) : (h = m.value) == null ? void 0 : h.map(
(T) => Math.round(T / (o / k.value)) + t
);
console.warn("[maz-ui][MazSlider] ref component not found");
}
function S(e, t) {
i.value === void 0 && (i.value = t, P(t));
}
async function D() {
if (i.value === void 0)
return;
const e = await W();
e && x(e), i.value = void 0;
}
async function E(e) {
var r;
if (await g(), i.value === void 0)
return;
const t = (r = v.value) == null ? void 0 : r.clientWidth;
if (m.value) {
const o = m.value[i.value - 1] || 0, u = m.value[i.value + 1] || t;
if (!v.value)
return console.error("[maz-ui](MazSlider/handleMousemove) MazSlider not available");
m.value[i.value] = (() => {
const s = se(e, v.value).x;
return s < o ? o : u && s > u ? u : s;
})(), d.value = await W(), P(i.value);
}
}
return (e, t) => (b(), w(
"div",
{
style: V([Y.value, { fontSize: a.size }]),
class: F(["m-slider m-reset-css", [`m-slider--${a.color}`]]),
role: "button",
tabindex: "-1",
onMousemovePassive: E,
onMouseupPassive: D,
onMouseleavePassive: D,
onTouchmovePassive: E
},
[
N("div", {
ref_key: "MazSlider",
ref: v,
class: "m-slider__bar",
role: "slider",
"aria-valuenow": a.modelValue.toString(),
"aria-valuemin": a.min,
"aria-valuemax": a.max
}, [
(b(!0), w(
K,
null,
j(B.value, (r, o) => (b(), w(
"div",
{
key: `divider-${o}`,
style: V([r]),
class: "m-slider__divider"
},
null,
4
/* STYLE */
))),
128
/* KEYED_FRAGMENT */
)),
(b(!0), w(
K,
null,
j(y.value, (r, o) => {
var u;
return b(), w("button", {
key: `cursor-${o}`,
type: "button",
"data-label": G(o),
class: F(["m-slider__btn", {
"active-cursor": o === i.value && !a.noCursorAnim
}]),
style: V([_.value[o]]),
onMousedownPassive: (s) => S(s, o),
onTouchstartPassive: (s) => S(s, o),
onFocusPassive: (s) => S(s, o),
onBlurPassive: (s) => A(o),
onTouchendPassive: (s) => A(o),
onKeydownPassive: (s) => R(s, o)
}, [
N(
"span",
null,
ae((u = d.value) == null ? void 0 : u[o]),
1
/* TEXT */
)
], 46, ie);
}),
128
/* KEYED_FRAGMENT */
))
], 8, re)
],
38
/* CLASS, STYLE, NEED_HYDRATION */
));
}
}), de = (a, l) => {
const n = a.__vccOpts || a;
for (const [c, v] of l)
n[c] = v;
return n;
}, me = /* @__PURE__ */ de(ce, [["__scopeId", "data-v-547d6a0b"]]);
export {
me as default
};