@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
159 lines (158 loc) • 4.27 kB
JavaScript
import { defineComponent as C, ref as u, computed as D, openBlock as E, createElementBlock as H, normalizeClass as d, unref as i, createVNode as K, mergeProps as M, withCtx as g, createElementVNode as h, renderSlot as T, createTextVNode as V, toDisplayString as $ } from "vue";
import "../tooltip/index.mjs";
import { useNameHelper as j, useHoverDelay as z } from "@vexip-ui/config";
import { useSetTimeout as L, useModifier as O } from "@vexip-ui/hooks";
import q from "../tooltip/tooltip.mjs";
const A = ["aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-disabled"], R = /* @__PURE__ */ C({
name: "SliderTrigger",
__name: "slider-trigger",
props: {
value: {
type: Number,
default: 0
},
tipTransfer: {
type: [Boolean, String],
default: !1
},
hideTip: {
type: Boolean,
default: !1
},
vertical: {
type: Boolean,
default: !1
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
disabled: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
reverse: {
type: Boolean,
default: !1
},
sliding: {
type: Boolean,
default: !1
},
tipHover: {
type: Boolean,
default: !1
},
tipProps: {
type: Object,
default: () => ({})
}
},
emits: ["key-minus", "key-plus"],
setup(t, { expose: x, emit: B }) {
const f = t, p = B, l = j("slider"), c = z(), r = u(!1), n = u(null), s = u(), { timer: o } = L(), { target: k } = O({
passive: !1,
onKeyDown: (e, a) => {
if (a.up || a.down || a.left || a.right) {
b(e);
const y = e.ctrlKey ? "ctrl" : e.shiftKey ? "shift" : e.altKey ? "alt" : void 0;
a.up || a.left ? p("key-minus", y) : p("key-plus", y);
}
}
}), w = D(() => {
var e;
return [l.be("tip"), (e = f.tipProps) == null ? void 0 : e.tipClass];
});
x({ updateTooltip: N, focus: P, blur: S });
function m() {
clearTimeout(o.hover), f.disabled || (o.hover = setTimeout(() => {
r.value = !0;
}, c.value));
}
function v() {
clearTimeout(o.hover), o.hover = setTimeout(() => {
r.value = !1;
}, c.value);
}
function b(e) {
e.cancelable && (e.stopPropagation(), e.preventDefault());
}
function N() {
n.value && n.value.updatePopper();
}
function P(e) {
var a;
(a = s.value) == null || a.focus(e);
}
function S() {
var e;
(e = s.value) == null || e.blur();
}
return (e, a) => (E(), H("div", {
ref_key: "wrapper",
ref: k,
class: d(i(l).be("trigger")),
tabindex: "-1",
onTouchstart: b
}, [
K(i(q), M({
ref_key: "tooltip",
ref: n,
placement: t.vertical ? "right" : "top"
}, t.tipProps, {
trigger: "custom",
transfer: t.tipTransfer,
visible: r.value || t.sliding,
"tip-class": w.value,
disabled: t.hideTip,
"no-hover": !t.tipHover,
onTipEnter: m,
onTipLeave: v
}), {
trigger: g(() => [
h("div", {
ref_key: "handler",
ref: s,
class: d({
[i(l).be("button")]: !0,
[i(l).bem("button", "loading")]: t.loading,
[i(l).bem("button", "sliding")]: t.sliding
}),
role: "slider",
tabindex: "0",
"aria-valuenow": t.value,
"aria-valuemin": t.min,
"aria-valuemax": t.max,
"aria-disabled": t.disabled,
onMouseenter: m,
onMouseleave: v
}, [
T(e.$slots, "default", {}, () => [
h("div", {
class: d(i(l).be("handler"))
}, null, 2)
])
], 42, A)
]),
default: g(() => [
T(e.$slots, "tip", {}, () => [
V($(t.value), 1)
])
]),
_: 3
}, 16, ["placement", "transfer", "visible", "tip-class", "disabled", "no-hover"])
], 34));
}
});
export {
R as default
};
//# sourceMappingURL=slider-trigger.vue2.mjs.map