@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
343 lines (342 loc) • 10.9 kB
JavaScript
import { defineComponent as M, ref as T, computed as y, openBlock as n, createElementBlock as i, normalizeClass as u, unref as o, toDisplayString as s, Fragment as x, normalizeStyle as w, createCommentVNode as b, createElementVNode as C } from "vue";
import { useNameHelper as z } from "@vexip-ui/config";
import { getLastDayOfMonth as H, doubleDigits as I } from "@vexip-ui/utils";
import { handleKeyEnter as L } from "./helper.mjs";
const Y = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], q = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], G = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-valuemax", "aria-labelledby"], J = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], P = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], Q = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-labelledby"], _ = /* @__PURE__ */ M({
name: "DateControl",
__name: "date-control",
props: {
unitType: {
type: String,
default: ""
},
enabled: {
type: Object,
default: () => ({})
},
activated: {
type: Object,
default: () => ({})
},
dateValue: {
type: Object,
default: () => ({})
},
dateSeparator: {
type: String,
default: "/"
},
timeSeparator: {
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: () => ({})
},
dateUnitOrder: {
type: Array,
default: () => ["year", "month", "date"]
}
},
emits: [
"input",
"plus",
"minus",
"enter",
"cancel",
"unit-focus",
"prev-unit",
"next-unit",
"blur"
],
setup(e, { expose: E, emit: U }) {
const t = e, c = U, r = z("date-picker"), S = T(), m = y(() => t.locale.ariaLabel ?? {}), $ = y(() => Object.keys(t.enabled).every((l) => !t.enabled[l] || t.activated[l])), p = y(() => ({
[r.be("input")]: !0,
[r.bem("input", "activated")]: $.value,
[r.bem("input", "error")]: t.hasError
})), A = y(() => t.enabled.hour || t.enabled.minute || t.enabled.second), B = y(() => k("year")), V = y(() => k("month")), g = y(() => k("date")), O = y(() => k("hour")), j = y(() => k("minute")), D = y(() => k("second")), K = y(() => H(t.dateValue.year, t.dateValue.month)), f = y(() => {
const [l, a, d] = t.dateUnitOrder;
return {
[l]: -4,
[a]: -2,
[d]: 0
};
});
E({
isActivated: $,
wrapper: S,
focus: () => {
var l;
(l = S.value) == null || l.focus();
},
blur: () => {
var l;
(l = S.value) == null || l.blur();
}
});
function k(l) {
const a = l === "year", d = t.filler;
return t.activated[l] ? a ? t.dateValue.year.toString().padStart(4, "0") : I(t.dateValue[l]) : `${a ? `${d}${d}` : ""}${d}${d}`;
}
function h(l) {
return t.visible && t.unitType === l ? r.bem("unit", "focused") : null;
}
function v(l) {
t.readonly || c("unit-focus", l);
}
function N(l) {
if (!t.visible) return;
const a = L(l);
if (t.readonly) {
switch (a) {
case "ok": {
c("enter");
break;
}
case "esc": {
c("cancel");
break;
}
}
return;
}
switch (a) {
case "next": {
c("next-unit");
break;
}
case "prev": {
c("prev-unit");
break;
}
case "up": {
c("minus", l.ctrlKey);
break;
}
case "down": {
c("plus", l.ctrlKey);
break;
}
case "ok": {
c("enter");
break;
}
case "esc": {
c("cancel");
break;
}
default:
typeof a == "number" && c("input", a);
}
}
function F() {
c("blur");
}
return (l, a) => (n(), i("div", {
ref_key: "wrapper",
ref: S,
class: u(p.value),
role: "none",
tabindex: "-1",
onKeydown: N,
onBlur: F
}, [
!e.focused && !$.value ? (n(), i("div", {
key: 0,
class: u(o(r).be("placeholder"))
}, s(e.placeholder), 3)) : (n(), i(x, { key: 1 }, [
e.enabled.year ? (n(), i("div", {
key: 0,
class: u([o(r).be("unit"), h("year")]),
role: "spinbutton",
"aria-label": m.value.year,
"aria-valuenow": t.dateValue.year,
"aria-valuetext": B.value,
"aria-valuemin": 1,
"aria-valuemax": 9999,
"aria-labelledby": e.labeledBy,
style: w({ order: f.value.year }),
onClick: a[0] || (a[0] = (d) => v("year"))
}, s(B.value), 15, Y)) : b("", !0),
e.labels.year ? (n(), i("div", {
key: 1,
class: u(o(r).be("label")),
"aria-hidden": "",
style: w({ order: f.value.year }),
onClick: a[1] || (a[1] = (d) => v("year"))
}, s(e.labels.year), 7)) : b("", !0),
e.enabled.month ? (n(), i(x, { key: 2 }, [
e.enabled.year ? (n(), i("div", {
key: 0,
class: u(o(r).be("separator")),
"aria-hidden": "",
style: { order: "-3" }
}, s(e.dateSeparator), 3)) : b("", !0),
C("div", {
class: u([o(r).be("unit"), h("month")]),
role: "spinbutton",
"aria-label": m.value.month,
"aria-valuenow": t.dateValue.month,
"aria-valuetext": V.value,
"aria-valuemin": 1,
"aria-valuemax": 12,
"aria-labelledby": e.labeledBy,
style: w({ order: f.value.month }),
onClick: a[2] || (a[2] = (d) => v("month"))
}, s(V.value), 15, q),
e.labels.month ? (n(), i("div", {
key: 1,
class: u(o(r).be("label")),
"aria-hidden": "",
style: w({ order: f.value.month }),
onClick: a[3] || (a[3] = (d) => v("month"))
}, s(e.labels.month), 7)) : b("", !0)
], 64)) : b("", !0),
e.enabled.date ? (n(), i(x, { key: 3 }, [
e.enabled.month || e.enabled.year ? (n(), i("div", {
key: 0,
class: u(o(r).be("separator")),
"aria-hidden": "",
style: { order: "-1" }
}, s(e.dateSeparator), 3)) : b("", !0),
C("div", {
class: u([o(r).be("unit"), h("date")]),
role: "spinbutton",
"aria-label": m.value.date,
"aria-valuenow": t.dateValue.date,
"aria-valuetext": g.value,
"aria-valuemin": 1,
"aria-valuemax": K.value || 31,
"aria-labelledby": e.labeledBy,
style: w({ order: f.value.date }),
onClick: a[4] || (a[4] = (d) => v("date"))
}, s(g.value), 15, G),
e.labels.date ? (n(), i("div", {
key: 1,
class: u(o(r).be("label")),
"aria-hidden": "",
style: w({ order: f.value.date }),
onClick: a[5] || (a[5] = (d) => v("date"))
}, s(e.labels.date), 7)) : b("", !0)
], 64)) : b("", !0),
A.value ? (n(), i(x, { key: 4 }, [
C("div", {
class: u(o(r).be("pad"))
}, null, 2),
e.enabled.hour ? (n(), i("div", {
key: 0,
class: u([o(r).be("unit"), h("hour")]),
role: "spinbutton",
"aria-label": m.value.hour,
"aria-valuenow": t.dateValue.hour,
"aria-valuetext": O.value,
"aria-valuemin": 0,
"aria-valuemax": 23,
"aria-labelledby": e.labeledBy,
onClick: a[6] || (a[6] = (d) => v("hour"))
}, s(O.value), 11, J)) : b("", !0),
e.labels.hour ? (n(), i("div", {
key: 1,
class: u(o(r).be("label")),
"aria-hidden": "",
onClick: a[7] || (a[7] = (d) => v("hour"))
}, s(e.labels.hour), 3)) : b("", !0),
e.enabled.minute ? (n(), i(x, { key: 2 }, [
e.enabled.hour ? (n(), i("div", {
key: 0,
class: u(o(r).be("separator")),
"aria-hidden": ""
}, s(e.timeSeparator), 3)) : b("", !0),
C("div", {
class: u([o(r).be("unit"), h("minute")]),
role: "spinbutton",
"aria-label": m.value.minute,
"aria-valuenow": t.dateValue.minute,
"aria-valuetext": j.value,
"aria-valuemin": 0,
"aria-valuemax": 59,
"aria-labelledby": e.labeledBy,
onClick: a[8] || (a[8] = (d) => v("minute"))
}, s(j.value), 11, P),
e.labels.minute ? (n(), i("div", {
key: 1,
class: u(o(r).be("label")),
"aria-hidden": "",
onClick: a[9] || (a[9] = (d) => v("minute"))
}, s(e.labels.minute), 3)) : b("", !0)
], 64)) : b("", !0),
e.enabled.second ? (n(), i(x, { key: 3 }, [
e.enabled.minute || e.enabled.hour ? (n(), i("div", {
key: 0,
class: u(o(r).be("separator")),
"aria-hidden": ""
}, s(e.timeSeparator), 3)) : b("", !0),
C("div", {
class: u([o(r).be("unit"), h("second")]),
role: "spinbutton",
"aria-label": m.value.second,
"aria-valuenow": t.dateValue.second,
"aria-valuetext": D.value,
"aria-valuemin": 0,
"aria-valuemax": 59,
"aria-labelledby": e.labeledBy,
onClick: a[10] || (a[10] = (d) => v("second"))
}, s(D.value), 11, Q),
e.labels.second ? (n(), i("div", {
key: 1,
class: u(o(r).be("label")),
"aria-hidden": "",
onClick: a[11] || (a[11] = (d) => v("second"))
}, s(e.labels.second), 3)) : b("", !0)
], 64)) : b("", !0)
], 64)) : b("", !0)
], 64))
], 34));
}
});
export {
_ as default
};
//# sourceMappingURL=date-control.vue2.mjs.map