@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
251 lines (250 loc) • 6.83 kB
JavaScript
import { defineComponent as K, ref as A, computed as v, createElementBlock as i, openBlock as u, normalizeClass as d, unref as o, toDisplayString as s, Fragment as h, createCommentVNode as b, createElementVNode as g } from "vue";
import { useNameHelper as F } from "@vexip-ui/config";
import { doubleDigits as N } from "@vexip-ui/utils";
import { handleKeyEnter as T } from "./helper.mjs";
const D = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], H = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], I = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], q = /* @__PURE__ */ K({
name: "TimeControl",
__name: "time-control",
props: {
unitType: {
type: String,
default: ""
},
enabled: {
type: Object,
default: () => ({})
},
activated: {
type: Object,
default: () => ({})
},
timeValue: {
type: Object,
default: () => ({})
},
separator: {
type: String,
default: ":"
},
visible: {
type: Boolean,
default: !1
},
focused: {
type: Boolean,
default: !1
},
filler: {
type: String,
default: "-",
validator: (e) => e.length === 1
},
steps: {
type: Array,
default: () => [1, 1, 1]
},
ctrlSteps: {
type: Array,
default: () => [5, 5, 5]
},
labels: {
type: Object,
default: () => ({})
},
hasError: {
type: Boolean,
default: !1
},
placeholder: {
type: String,
default: ""
},
readonly: {
type: Boolean,
default: !1
},
labeledBy: {
type: String,
default: void 0
},
locale: {
type: Object,
default: () => ({})
}
},
emits: [
"input",
"plus",
"minus",
"enter",
"cancel",
"unit-focus",
"unit-blur",
"prev-unit",
"next-unit",
"blur"
],
setup(e, { expose: S, emit: V }) {
const t = e, r = V, n = F("time-picker"), m = A(), y = v(() => t.locale.ariaLabel ?? {}), x = v(() => Object.keys(t.enabled).every((a) => !t.enabled[a] || t.activated[a])), w = v(() => k("hour")), B = v(() => k("minute")), C = v(() => k("second"));
S({
isActivated: x,
wrapper: m,
focus: () => {
var a;
(a = m.value) == null || a.focus();
},
blur: () => {
var a;
(a = m.value) == null || a.blur();
}
});
function k(a) {
return t.activated[a] ? N(t.timeValue[a]) : `${t.filler}${t.filler}`;
}
function p(a) {
return t.visible && t.unitType === a ? n.bem("unit", "focused") : null;
}
function c(a) {
t.readonly || r("unit-focus", a);
}
function $(a) {
if (!t.visible) return;
const l = T(a);
if (t.readonly) {
switch (l) {
case "ok": {
r("enter");
break;
}
case "esc": {
r("cancel");
break;
}
}
return;
}
switch (l) {
case "next": {
r("next-unit");
break;
}
case "prev": {
r("prev-unit");
break;
}
case "up": {
r("minus", a.ctrlKey);
break;
}
case "down": {
r("plus", a.ctrlKey);
break;
}
case "ok": {
j();
break;
}
case "esc": {
E();
break;
}
default:
typeof l == "number" && r("input", l);
}
}
function j() {
r("enter");
}
function E() {
r("cancel");
}
function O() {
r("blur");
}
return (a, l) => (u(), i("div", {
ref_key: "wrapper",
ref: m,
class: d([o(n).be("input"), e.hasError && o(n).bem("input", "error")]),
role: "none",
tabindex: "-1",
onKeydown: $,
onBlur: O
}, [
!e.focused && !x.value ? (u(), i("div", {
key: 0,
class: d(o(n).be("placeholder"))
}, s(e.placeholder), 3)) : (u(), i(h, { key: 1 }, [
e.enabled.hour ? (u(), i("div", {
key: 0,
class: d([o(n).be("unit"), p("hour")]),
role: "spinbutton",
"aria-label": y.value.hour,
"aria-valuenow": t.timeValue.hour,
"aria-valuetext": w.value,
"aria-valuemin": 0,
"aria-valuemax": 23,
"aria-labelledby": e.labeledBy,
onClick: l[0] || (l[0] = (f) => c("hour"))
}, s(w.value), 11, D)) : b("", !0),
e.labels.hour ? (u(), i("div", {
key: 1,
class: d(o(n).be("label")),
"aria-hidden": "",
onClick: l[1] || (l[1] = (f) => c("hour"))
}, s(e.labels.hour), 3)) : b("", !0),
e.enabled.minute ? (u(), i(h, { key: 2 }, [
e.enabled.hour ? (u(), i("div", {
key: 0,
class: d(o(n).be("separator")),
"aria-hidden": ""
}, s(e.separator), 3)) : b("", !0),
g("div", {
class: d([o(n).be("unit"), p("minute")]),
role: "spinbutton",
"aria-label": y.value.minute,
"aria-valuenow": t.timeValue.minute,
"aria-valuetext": B.value,
"aria-valuemin": 0,
"aria-valuemax": 59,
"aria-labelledby": e.labeledBy,
onClick: l[2] || (l[2] = (f) => c("minute"))
}, s(B.value), 11, H),
e.labels.minute ? (u(), i("div", {
key: 1,
class: d(o(n).be("label")),
"aria-hidden": "",
onClick: l[3] || (l[3] = (f) => c("minute"))
}, s(e.labels.minute), 3)) : b("", !0)
], 64)) : b("", !0),
e.enabled.second ? (u(), i(h, { key: 3 }, [
e.enabled.minute || e.enabled.hour ? (u(), i("div", {
key: 0,
class: d(o(n).be("separator")),
"aria-hidden": ""
}, s(e.separator), 3)) : b("", !0),
g("div", {
class: d([o(n).be("unit"), p("second")]),
role: "spinbutton",
"aria-label": y.value.second,
"aria-valuenow": t.timeValue.second,
"aria-valuetext": C.value,
"aria-valuemin": 0,
"aria-valuemax": 59,
"aria-labelledby": e.labeledBy,
onClick: l[4] || (l[4] = (f) => c("second"))
}, s(C.value), 11, I),
e.labels.second ? (u(), i("div", {
key: 1,
class: d(o(n).be("label")),
"aria-hidden": "",
onClick: l[5] || (l[5] = (f) => c("second"))
}, s(e.labels.second), 3)) : b("", !0)
], 64)) : b("", !0)
], 64))
], 34));
}
});
export {
q as default
};
//# sourceMappingURL=time-control.vue2.mjs.map