@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
672 lines (671 loc) • 24.2 kB
JavaScript
import { defineComponent as bt, useSlots as ht, toRef as M, ref as k, computed as v, watch as h, reactive as oe, nextTick as Ie, createElementBlock as b, openBlock as m, unref as t, normalizeClass as d, createElementVNode as F, createVNode as f, withKeys as we, withModifiers as U, createCommentVNode as I, normalizeStyle as Ee, renderSlot as re, withCtx as w, Fragment as Te, mergeProps as se, Transition as gt, normalizeProps as Ct, guardReactiveProps as Vt, renderList as xt, toDisplayString as ie, createBlock as kt, createTextVNode as Fe } from "vue";
import "../button/index.mjs";
import "../icon/index.mjs";
import "../popper/index.mjs";
import "../form/index.mjs";
import "../renderer/index.mjs";
import "./time-wheel.vue.mjs";
import "./time-control.vue.mjs";
import { useNameHelper as yt, useProps as St, createIconProp as ue, createStateProp as $t, createSizeProp as Pt, useLocale as At, useIcons as It, useWordSpace as wt, makeSentence as Ue, emitEvent as u } from "@vexip-ui/config";
import { usePopper as Et, placementWhileList as Tt, useSetTimeout as Ft, useClickOutside as Ut, useHover as zt } from "@vexip-ui/hooks";
import { USE_TOUCH as Bt, doubleDigits as Nt, boundRange as Rt, callIfFunc as Ht, toAttrValue as ze } from "@vexip-ui/utils";
import { timePickerProps as Mt } from "./props.mjs";
import { useTimeBound as Lt, useColumn as Ot } from "./helper.mjs";
import { TIME_REG as Dt } from "./symbol.mjs";
import { useFieldStore as jt } from "../form/helper.mjs";
import ce from "../renderer/renderer.mjs";
import L from "../icon/icon.mjs";
import Be from "./time-control.vue2.mjs";
import Wt from "../popper/popper.vue.mjs";
import Ne from "./time-wheel.vue2.mjs";
import Re from "../button/button.mjs";
const Kt = ["id", "aria-disabled", "aria-expanded", "aria-labelledby"], qt = ["onKeydown"], Gt = ["aria-label"], Jt = ["aria-labelledby"], Qt = ["title", "onClick"], Cn = /* @__PURE__ */ bt({
name: "TimePicker",
__name: "time-picker",
props: Mt,
emits: ["update:value", "update:visible"],
setup(He, { expose: Me, emit: Le }) {
const {
idFor: de,
labelId: O,
state: Oe,
disabled: De,
loading: je,
size: We,
validateField: Ke,
clearField: qe,
getFieldValue: Ge,
setFieldValue: Je
} = jt(() => {
var e;
return (e = $.value) == null ? void 0 : e.focus();
}), o = yt("time-picker"), n = St("timePicker", He, {
size: Pt(We),
state: $t(Oe),
locale: null,
visible: !1,
placement: {
default: "bottom-start",
validator: (e) => Tt.includes(e)
},
transfer: !1,
format: "HH:mm:ss",
separator: ":",
value: {
default: () => Ge(),
static: !0
},
filler: {
default: "-",
validator: (e) => e.length === 1
},
clearable: !1,
noAction: !1,
noArrow: !1,
pointer: Bt,
candidate: {
default: 3,
validator: (e) => [0, 1, 2, 3].includes(e)
},
steps: () => [1, 1, 1],
labels: () => ({}),
shortcuts: () => [],
range: null,
disabled: () => De.value,
transitionName: () => o.ns("drop"),
confirmText: null,
cancelText: null,
ctrlSteps: () => [5, 5, 5],
prefix: ue(),
prefixColor: "",
suffix: ue(),
suffixColor: "",
noSuffix: !1,
exchange: !1,
loading: () => je.value,
loadingIcon: ue(),
loadingLock: !1,
loadingEffect: null,
min: null,
max: null,
outsideClose: !0,
outsideCancel: !1,
placeholder: null,
unitReadonly: !1,
popperAlive: null,
shortcutsPlacement: "left",
slots: () => ({})
}), Y = Le, Qe = ht(), y = At("timePicker", M(n, "locale")), S = It(), fe = wt(), Xe = M(n, "placement"), Ye = M(n, "transfer"), c = k(n.visible), C = k(!1), z = k(""), r = ge(), i = ge(), p = k("start"), E = k(!1), { timer: me } = Ft(), B = Ut(ft), Z = k(), { reference: $, transferTo: pe, updatePopper: ve } = Et({
placement: Xe,
transfer: Ye,
wrapper: B,
popper: v(() => {
var e;
return (e = Z.value) == null ? void 0 : e.wrapper;
}),
isDrop: !0
}), { isHover: be } = zt($), { isTimeDisabled: V } = Lt(M(n, "min"), M(n, "max")), D = k(), j = k(), Ze = v(() => {
if (n.placeholder)
return Array.isArray(n.placeholder) ? n.placeholder[0] : n.placeholder;
const { select: e, start: l, time: a } = y.value.placeholder;
return Ue(n.range ? `${l} ${a}` : `${e} ${a}`, fe.value);
}), _e = v(() => {
if (n.placeholder)
return Array.isArray(n.placeholder) ? n.placeholder[1] || n.placeholder[0] : n.placeholder;
const { end: e, time: l } = y.value.placeholder;
return Ue(`${e} ${l}`, fe.value);
}), et = v(() => [
o.b(),
o.ns("input-vars"),
o.bs("vars"),
{
[o.bm("inherit")]: n.inherit,
[o.bm("disabled")]: n.disabled,
[o.bm(n.size)]: n.size !== "default",
[o.bm("no-hour")]: !r.enabled.hour,
[o.bm("no-minute")]: !r.enabled.minute,
[o.bm("no-second")]: !r.enabled.second,
[o.bm("visible")]: c.value,
[o.bm(n.state)]: n.state !== "default",
[o.bm("is-range")]: n.range
}
]), N = v(() => n.loading && n.loadingLock), tt = v(() => {
const e = o.be("selector");
return {
[e]: !0,
[`${e}--disabled`]: n.disabled,
[`${e}--readonly`]: N.value,
[`${e}--loading`]: n.loading,
[`${e}--${n.size}`]: n.size !== "default",
[`${e}--focused`]: C.value,
[`${e}--${n.state}`]: n.state !== "default"
};
}), nt = v(() => !!(Qe.prefix || n.prefix || n.slots.prefix)), P = v(() => {
const e = [r, i].map((l) => Object.values(l.timeValue).map(Nt).join(":"));
return n.range ? e : e[0];
}), he = v(() => !n.disabled && !N.value && n.clearable && be.value && !!z.value), W = v(() => {
const { hour: e, minute: l, second: a } = r.timeValue;
return V.hour(e) || V.minute(e, l) || V.second(e, l, a);
}), K = v(() => {
if (!n.range) return !1;
const { hour: e, minute: l, second: a } = i.timeValue;
return V.hour(e) || V.minute(e, l) || V.second(e, l, a);
});
h(
() => n.value,
(e) => {
R(e), z.value = (Array.isArray(e) ? e[0] || e[1] : e) ? _() : "";
},
{ immediate: !0 }
), h(() => n.format, lt, { immediate: !0 }), h(
() => n.visible,
(e) => {
c.value = e;
}
), h(c, (e) => {
e && ve();
}), h(C, (e) => {
e ? u(n.onFocus) : u(n.onBlur);
}), h(p, (e) => {
!n.unitReadonly && c.value && u(n.onChangeCol, g().column, e);
}), h(
() => r.column,
(e) => {
!n.unitReadonly && c.value && p.value === "start" && u(n.onChangeCol, e, "start");
}
), h(
() => i.column,
(e) => {
!n.unitReadonly && c.value && p.value === "end" && u(n.onChangeCol, e, "end");
}
), h(
() => n.disabled,
(e) => {
e && (G(!1), J());
}
), h(N, (e) => {
e && G(!1);
}), Me({
idFor: de,
isHover: be,
currentVisible: c,
focused: C,
startState: r,
endState: i,
currentState: p,
currentValue: P,
startError: W,
endError: K,
wrapper: B,
reference: $,
popper: Z,
start: D,
end: j,
updatePopper: ve,
focus: (e) => {
var l;
return (l = $.value) == null ? void 0 : l.focus(e);
},
blur: () => {
var e;
return (e = $.value) == null ? void 0 : e.blur();
}
});
function ge() {
const { currentColumn: e, enabled: l, resetColumn: a, enterColumn: s } = Ot([
"hour",
"minute",
"second"
]), A = oe({
hour: 0,
minute: 0,
second: 0
}), x = oe({
hour: !1,
minute: !1,
second: !1
});
return oe({
column: e,
enabled: l,
activated: x,
timeValue: A,
resetColumn: a,
enterColumn: s
});
}
function g() {
return p.value === "start" ? r : i;
}
function R(e) {
Array.isArray(e) || (e = [e, e]);
const l = /* @__PURE__ */ new Date();
for (let a = 0; a < 2; ++a) {
const s = Dt.exec(e[a] || ""), A = a === 0 ? r : i, { timeValue: x } = A;
if (s) {
q(!0, a === 0 ? "start" : "end");
const mt = parseInt(s[1]), pt = s[2] ? parseInt(s[2].slice(1)) : 0, vt = s[3] ? parseInt(s[3].slice(1)) : 0, ae = new Date(2e3, 1, 1, mt, pt, vt);
x.hour = ae.getHours(), x.minute = ae.getMinutes(), x.second = ae.getSeconds();
} else
x.hour = l.getHours(), x.minute = l.getMinutes(), x.second = l.getSeconds(), q(!1, a === 0 ? "start" : "end");
if (!n.range) break;
}
}
function lt() {
[r, i].forEach((e) => {
e.enabled.hour = n.format.includes("H"), e.enabled.minute = n.format.includes("m"), e.enabled.second = n.format.includes("s");
});
}
function q(e, l) {
(l ? l === "start" ? [r] : [i] : [r, i]).forEach((s) => {
Object.keys(s.activated).forEach((A) => {
s.activated[A] = e;
});
});
}
function _() {
return Array.isArray(P.value) ? P.value.join("|") : P.value;
}
function at() {
(W.value || n.range && K.value) && R(n.value);
}
function G(e) {
c.value !== e && (c.value = e, Y("update:visible", e), u(n.onToggle, e));
}
function ot() {
at(), z.value !== _() && (z.value = _(), q(!0), Y("update:value", P.value), Je(P.value), u(n.onChange, P.value), Ke());
}
function Ce() {
n.disabled || (C.value = !0, me.focus = setTimeout(() => {
var e, l;
C.value && (p.value === "start" ? (e = D.value) == null || e.focus() : (l = j.value) == null || l.focus());
}, 120));
}
function J() {
var e, l;
clearTimeout(me.focus), C.value = !1, (e = D.value) == null || e.blur(), (l = j.value) == null || l.blur();
}
function Ve(e) {
if (n.disabled || N.value) return;
const l = e.target;
G(!0), Ce(), B.value && l && (Array.from(B.value.querySelectorAll(`.${o.be("unit")}`)).some((s) => s === l || s.contains(l)) || (r.column = null, i.column = null));
}
function H(e = !0) {
G(!1), e && ot(), r.resetColumn(), i.resetColumn();
}
function xe(e = !0) {
n.disabled || N.value || n.clearable && Ie(() => {
const l = n.range ? [] : "";
R(null), e && H(!1), Y("update:value", l), u(n.onChange, l), u(n.onClear), qe(l), e && J(), z.value = "", Ie(() => {
q(!1);
});
});
}
function ke(e) {
c.value && (g().activated[e] = !0);
}
function ye(e) {
g().column = e;
}
function Se(e) {
const l = g(), a = l.column;
a && (rt(a, e), l.column !== "second" && l.timeValue[a] >= 10 && l.enterColumn("next", !1));
}
function rt(e, l) {
const a = g(), s = a.timeValue[e];
a.activated[e] && s > 0 && s < 10 ? a.timeValue[e] = s * 10 + l : a.timeValue[e] = l, ee(e), a.activated[e] = !0, u(n.onInput, e, a.timeValue[e]);
}
function ee(e) {
const l = g().timeValue;
l[e] = Rt(l[e], 0, e === "hour" ? 23 : 59), l[e] = Math.round(l[e] / Q(e)) * Q(e);
}
function $e(e) {
const l = g(), a = l.column;
a && l.enabled[a] && (l.timeValue[a] += e ? Ae(a) : Q(a), ee(a), u(n.onPlus, a, l.timeValue[a]));
}
function Pe(e) {
const l = g(), a = l.column;
a && l.enabled[a] && (l.timeValue[a] -= e ? Ae(a) : Q(a), ee(a), u(n.onMinus, a, l.timeValue[a]));
}
function Q(e) {
return n.steps[e === "hour" ? 0 : e === "minute" ? 1 : 2] || 1;
}
function Ae(e) {
return n.ctrlSteps[e === "hour" ? 0 : e === "minute" ? 1 : 2] || 1;
}
function te() {
requestAnimationFrame(() => {
var e;
J(), (e = $.value) == null || e.focus();
});
}
function ne() {
te(), H(), u(n.onEnter);
}
function le() {
te(), R(n.value), H(!1), u(n.onCancel);
}
function st(e) {
const { value: l, name: a } = n.shortcuts[e], s = Ht(l);
te(), R(s), u(n.onShortcut, a, s), H();
}
function T(e) {
p.value = e;
}
function X(e) {
if (n.range) {
e === "prev" && p.value === "start" && !r.column && T("end");
const l = g(), a = l.column;
if (l.enterColumn(e, !a), a === l.column) {
const s = p.value === "start";
(s ? i : r).resetColumn(e === "prev" ? "second" : "hour", e === "prev"), T(s ? "end" : "start");
}
} else
r.enterColumn(e);
}
function it(e) {
T("start"), ye(e);
}
function ut(e) {
T("end"), ye(e);
}
function ct() {
Object.keys(r.timeValue).forEach((e) => {
const l = i.timeValue[e];
i.timeValue[e] = r.timeValue[e], r.timeValue[e] = l;
});
}
function dt(e) {
n.exchange && (!c.value && e.stopPropagation(), ct());
}
function ft() {
u(n.onClickOutside), n.outsideClose && c.value && (H(!n.outsideCancel), J(), u(n.onOutsideClose));
}
return (e, l) => (m(), b("div", {
id: t(de),
ref_key: "wrapper",
ref: B,
class: d(et.value),
role: "group",
"aria-disabled": t(ze)(t(n).disabled),
"aria-expanded": t(ze)(c.value),
"aria-haspopup": "dialog",
"aria-labelledby": t(O),
onClick: Ve
}, [
F("div", {
ref_key: "reference",
ref: $,
class: d(tt.value),
tabindex: "0",
onKeydown: [
we(U(Ve, ["prevent"]), ["space"]),
l[7] || (l[7] = we(U((a) => xe(!1), ["prevent"]), ["backspace"]))
]
}, [
nt.value ? (m(), b("div", {
key: 0,
class: d([t(o).be("icon"), t(o).be("prefix")]),
style: Ee({ color: t(n).prefixColor })
}, [
re(e.$slots, "prefix", {}, () => [
f(t(ce), {
renderer: t(n).slots.prefix
}, {
default: w(() => [
f(t(L), {
icon: t(n).prefix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
], 6)) : I("", !0),
F("div", {
class: d(t(o).be("control"))
}, [
f(Be, {
ref_key: "startInput",
ref: D,
"unit-type": p.value === "start" ? t(r).column : "",
enabled: t(r).enabled,
activated: t(r).activated,
"time-value": t(r).timeValue,
steps: t(n).steps,
"ctrl-steps": t(n).ctrlSteps,
focused: C.value,
visible: c.value,
separator: t(n).separator,
filler: t(n).filler,
labels: t(n).labels,
"has-error": W.value,
placeholder: Ze.value,
readonly: t(n).unitReadonly,
"labeled-by": t(O),
locale: t(y),
onInput: Se,
onPlus: $e,
onMinus: Pe,
onEnter: ne,
onCancel: le,
onUnitFocus: it,
onPrevUnit: l[0] || (l[0] = (a) => X("prev")),
onNextUnit: l[1] || (l[1] = (a) => X("next")),
onBlur: l[2] || (l[2] = (a) => t(r).column = null)
}, null, 8, ["unit-type", "enabled", "activated", "time-value", "steps", "ctrl-steps", "focused", "visible", "separator", "filler", "labels", "has-error", "placeholder", "readonly", "labeled-by", "locale"]),
t(n).range ? (m(), b(Te, { key: 0 }, [
F("div", {
class: d([t(o).be("exchange"), t(n).exchange ? t(o).bem("exchange", "enabled") : ""]),
onClick: dt
}, [
re(e.$slots, "exchange", {}, () => [
f(t(ce), {
renderer: t(n).slots.exchange
}, {
default: w(() => [
f(t(L), se(t(S).exchange, { style: { "padding-top": "1px" } }), null, 16)
]),
_: 1
}, 8, ["renderer"])
])
], 2),
f(Be, {
ref_key: "endInput",
ref: j,
"unit-type": p.value === "end" ? t(i).column : "",
enabled: t(i).enabled,
activated: t(i).activated,
"time-value": t(i).timeValue,
steps: t(n).steps,
"ctrl-steps": t(n).ctrlSteps,
focused: C.value,
visible: c.value,
separator: t(n).separator,
filler: t(n).filler,
labels: t(n).labels,
"has-error": K.value,
placeholder: _e.value,
readonly: t(n).unitReadonly,
"labeled-by": t(O),
locale: t(y),
onInput: Se,
onPlus: $e,
onMinus: Pe,
onEnter: ne,
onCancel: le,
onUnitFocus: ut,
onPrevUnit: l[3] || (l[3] = (a) => X("prev")),
onNextUnit: l[4] || (l[4] = (a) => X("next")),
onBlur: l[5] || (l[5] = (a) => t(i).column = null)
}, null, 8, ["unit-type", "enabled", "activated", "time-value", "steps", "ctrl-steps", "focused", "visible", "separator", "filler", "labels", "has-error", "placeholder", "readonly", "labeled-by", "locale"])
], 64)) : I("", !0)
], 2),
t(n).noSuffix ? t(n).clearable || t(n).loading ? (m(), b("div", {
key: 2,
class: d([t(o).be("icon"), t(o).bem("icon", "placeholder"), t(o).be("suffix")])
}, null, 2)) : I("", !0) : (m(), b("div", {
key: 1,
class: d([t(o).be("icon"), t(o).be("suffix")]),
style: Ee({
color: t(n).suffixColor,
opacity: he.value || t(n).loading ? "0%" : ""
})
}, [
re(e.$slots, "suffix", {}, () => [
f(t(ce), {
renderer: t(n).slots.suffix
}, {
default: w(() => [
f(t(L), se(t(S).clock, {
icon: t(n).suffix || t(S).clock.icon
}), null, 16, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
], 6)),
f(gt, {
name: t(o).ns("fade"),
appear: ""
}, {
default: w(() => [
he.value ? (m(), b("button", {
key: 0,
class: d([t(o).be("icon"), t(o).be("clear")]),
type: "button",
tabindex: "-1",
"aria-label": t(y).ariaLabel.clear,
onClick: l[6] || (l[6] = U((a) => xe(), ["stop"]))
}, [
f(t(L), Ct(Vt(t(S).clear)), null, 16)
], 10, Gt)) : t(n).loading ? (m(), b("div", {
key: 1,
class: d([t(o).be("icon"), t(o).be("loading")])
}, [
f(t(L), se(t(S).loading, {
effect: t(n).loadingEffect || t(S).loading.effect,
icon: t(n).loadingIcon || t(S).loading.icon
}), null, 16, ["effect", "icon"])
], 2)) : I("", !0)
]),
_: 1
}, 8, ["name"])
], 42, qt),
f(t(Wt), {
ref_key: "popper",
ref: Z,
class: d([t(o).be("popper"), t(o).bs("vars")]),
visible: c.value,
to: t(pe),
transition: t(n).transitionName,
alive: t(n).popperAlive ?? !t(pe),
onClick: U(Ce, ["stop"]),
onBeforeEnter: l[16] || (l[16] = (a) => E.value = !0),
onBeforeLeave: l[17] || (l[17] = (a) => E.value = !0),
onAfterEnter: l[18] || (l[18] = (a) => E.value = !1),
onAfterLeave: l[19] || (l[19] = (a) => E.value = !1)
}, {
default: w(() => [
F("div", {
class: d({
[t(o).be("panel")]: !0,
[t(o).bem("panel", "vertical")]: t(n).shortcuts.length && (t(n).shortcutsPlacement === "top" || t(n).shortcutsPlacement === "bottom")
}),
"aria-labelledby": t(O)
}, [
t(n).shortcuts.length ? (m(), b("div", {
key: 0,
class: d([
t(o).be("list"),
t(o).bem("list", "sub"),
t(o).be("shortcuts"),
t(o).bem("shortcuts", t(n).shortcutsPlacement)
])
}, [
(m(!0), b(Te, null, xt(t(n).shortcuts, (a, s) => (m(), b("div", {
key: s,
class: d(t(o).be("shortcut")),
title: a.name,
onClick: (A) => st(s)
}, ie(a.name), 11, Qt))), 128))
], 2)) : I("", !0),
F("div", {
class: d(t(o).be("list"))
}, [
F("div", {
class: d(t(o).be("wheels"))
}, [
f(Ne, {
hour: t(r).timeValue.hour,
"onUpdate:hour": l[8] || (l[8] = (a) => t(r).timeValue.hour = a),
minute: t(r).timeValue.minute,
"onUpdate:minute": l[9] || (l[9] = (a) => t(r).timeValue.minute = a),
second: t(r).timeValue.second,
"onUpdate:second": l[10] || (l[10] = (a) => t(r).timeValue.second = a),
"no-arrow": t(n).noArrow,
candidate: t(n).candidate,
steps: t(n).steps,
pointer: t(n).pointer,
"disabled-time": t(V),
"no-transition": E.value,
onChange: ke,
onToggleCol: l[11] || (l[11] = (a) => T("start"))
}, null, 8, ["hour", "minute", "second", "no-arrow", "candidate", "steps", "pointer", "disabled-time", "no-transition"]),
t(n).range ? (m(), kt(Ne, {
key: 0,
hour: t(i).timeValue.hour,
"onUpdate:hour": l[12] || (l[12] = (a) => t(i).timeValue.hour = a),
minute: t(i).timeValue.minute,
"onUpdate:minute": l[13] || (l[13] = (a) => t(i).timeValue.minute = a),
second: t(i).timeValue.second,
"onUpdate:second": l[14] || (l[14] = (a) => t(i).timeValue.second = a),
"no-arrow": t(n).noArrow,
candidate: t(n).candidate,
steps: t(n).steps,
pointer: t(n).pointer,
"disabled-time": t(V),
"no-transition": E.value,
onChange: ke,
onToggleCol: l[15] || (l[15] = (a) => T("end"))
}, null, 8, ["hour", "minute", "second", "no-arrow", "candidate", "steps", "pointer", "disabled-time", "no-transition"])) : I("", !0)
], 2),
t(n).noAction ? I("", !0) : (m(), b("div", {
key: 0,
class: d(t(o).be("action"))
}, [
f(t(Re), {
inherit: "",
text: "",
size: "small",
onClick: U(le, ["stop"])
}, {
default: w(() => [
Fe(ie(t(n).cancelText || t(y).cancel), 1)
]),
_: 1
}),
f(t(Re), {
inherit: "",
type: "primary",
size: "small",
disabled: W.value || K.value,
onClick: U(ne, ["stop"])
}, {
default: w(() => [
Fe(ie(t(n).confirmText || t(y).confirm), 1)
]),
_: 1
}, 8, ["disabled"])
], 2))
], 2)
], 10, Jt)
]),
_: 1
}, 8, ["class", "visible", "to", "transition", "alive"])
], 10, Kt));
}
});
export {
Cn as default
};
//# sourceMappingURL=time-picker.vue2.mjs.map