@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, createElementBlock as E, openBlock as H, normalizeClass as d, unref as i, createVNode as K, mergeProps as M, withCtx as g, renderSlot as h, createTextVNode as V, toDisplayString as $, createElementVNode as T } 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) => (H(), E("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(() => [
T("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
}, [
h(e.$slots, "default", {}, () => [
T("div", {
class: d(i(l).be("handler"))
}, null, 2)
])
], 42, A)
]),
default: g(() => [
h(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