dk-plus
Version:
277 lines (276 loc) • 9.69 kB
JavaScript
import { defineComponent as ne, ref as k, reactive as ae, computed as re, watch as S, onMounted as le, onBeforeUnmount as ue, toRefs as ie, nextTick as oe } from "vue";
import { dkTimePickerProps as se } from "./index3.js";
import { timePickerEmits as ce } from "./index4.js";
import { parseByPattern as D, coerceToDate as fe, formatByPattern as N } from "../../dkdatepicker/src/index5.js";
import de from "./index5.js";
const Re = ne({
name: "DkTimePicker",
props: se,
emits: ce,
components: { DkTimePickerPanel: de },
setup(t, { emit: i, expose: $ }) {
const A = k(), E = k(), B = k(), O = k({}), r = ae({
open: !1,
active: "single",
text: "",
startText: "",
endText: ""
}), y = k(null), g = k([null, null]), m = k(null), c = k([null, null]);
let w = !1;
const F = re(() => {
const e = String(t.format || ""), n = String(t.valueFormat || "");
return n === "timestamp" ? e.includes("ss") : e.includes("ss") || n.includes("ss");
}), q = (e) => {
if (e === "" || e === null || e === void 0)
return !0;
const n = t.emptyValues;
return n ? Array.isArray(n) && n.some((a) => Object.is(a, e)) : !1;
}, P = (e) => {
if (q(e))
return null;
const n = fe(e);
if (n)
return n;
if (typeof e == "string") {
const a = e.trim();
if (!a)
return null;
if (t.valueFormat === "timestamp") {
const o = Number(a);
return Number.isFinite(o) ? new Date(o) : null;
}
const l = t.valueFormat ? D(a, t.valueFormat) : null;
if (l)
return l;
const u = t.format ? D(a, t.format) : null;
if (u)
return u;
}
return null;
}, v = (e) => e ? N(e, t.format || "HH:mm:ss") : "", V = (e) => e ? t.valueFormat ? t.valueFormat === "timestamp" ? e.getTime() : t.valueFormat ? N(e, t.valueFormat) : e : e : t.valueFormat ? "" : null, W = () => {
const e = t.valueOnClear;
if (typeof e == "function")
try {
return e();
} catch {
return t.isRange ? [] : t.valueFormat ? "" : null;
}
return e !== void 0 ? e : t.isRange ? [] : t.valueFormat ? "" : null;
}, b = (e) => {
if (!e)
return !1;
const n = e.getHours(), a = e.getMinutes(), l = e.getSeconds(), u = typeof t.disabledHours == "function" ? t.disabledHours() : [], o = typeof t.disabledMinutes == "function" ? t.disabledMinutes(n) : [], f = typeof t.disabledSeconds == "function" ? t.disabledSeconds(n, a) : [], h = F.value ? Array.isArray(f) && f.includes(l) : !1;
return Array.isArray(u) && u.includes(n) || Array.isArray(o) && o.includes(a) || h;
}, z = () => {
if (t.isRange) {
r.startText = v(g.value[0]), r.endText = v(g.value[1]);
return;
}
r.text = v(y.value);
};
S(() => t.modelValue, () => {
if (w = !0, t.isRange) {
const e = Array.isArray(t.modelValue) ? t.modelValue : [], n = P(e[0]), a = P(e[1]);
g.value = [n, a];
} else {
const e = Array.isArray(t.modelValue) ? t.modelValue[0] : t.modelValue;
y.value = P(e);
}
z(), w = !1;
}, { immediate: !0 });
const R = () => {
if (!t.teleported || !E.value)
return;
const e = E.value.getBoundingClientRect(), n = t.isRange ? F.value ? 560 : 420 : F.value ? 280 : 210, a = t.isRange ? 352 : 332, l = 4, u = [t.placement, ...t.fallbackPlacements || []].filter(Boolean), o = (T, s) => T >= 0 && s >= 0 && T + a <= window.innerHeight && s + n <= window.innerWidth;
let f = e.bottom + l, h = e.left;
for (const T of u) {
if (T === "top") {
const s = e.top - l - a, d = e.left;
if (o(s, d)) {
f = s, h = d;
break;
}
}
if (T === "bottom") {
const s = e.bottom + l, d = e.left;
if (o(s, d)) {
f = s, h = d;
break;
}
}
if (T === "right") {
const s = e.top, d = e.right + l;
if (o(s, d)) {
f = s, h = d;
break;
}
}
if (T === "left") {
const s = e.top, d = e.left - l - n;
if (o(s, d)) {
f = s, h = d;
break;
}
}
}
const te = Math.max(12, Math.min(n - 12, e.left + e.width / 2 - h));
O.value = {
position: "fixed",
top: `${Math.max(0, f)}px`,
left: `${Math.max(0, h)}px`,
zIndex: 2023,
"--dk-time-picker-arrow-left": `${te}px`
};
}, H = (e) => {
const n = e.target, a = A.value, l = B.value;
a && a.contains(n) || l && l.contains(n) || x(!1);
}, _ = () => {
if (t.isRange) {
const [a, l] = g.value, u = t.defaultValue, o = Array.isArray(u) ? u[0] : u, f = Array.isArray(u) ? u[1] : u;
c.value = [a || (o instanceof Date ? o : null), l || (f instanceof Date ? f : null)], r.startText = v(c.value[0]), r.endText = v(c.value[1]);
return;
}
const e = t.defaultValue, n = y.value || (e instanceof Date ? e : null);
m.value = n, r.text = v(n);
}, M = () => {
t.disabled || t.readonly || r.open || (r.open = !0, _(), i("visible-change", !0), oe(() => {
R();
}), document.addEventListener("click", H));
}, x = (e) => {
!r.open || (r.open = !1, i("visible-change", !1), document.removeEventListener("click", H), e || (z(), m.value = y.value, c.value = [g.value[0], g.value[1]]));
}, j = (e) => {
if (e.key === "Escape") {
U();
return;
}
if (e.key === "Enter") {
if (t.disabled || t.readonly)
return;
if (r.open) {
I();
return;
}
if (!t.editable || t.isRange)
return;
const n = String(r.text || "").trim();
if (!n)
return;
const a = D(n, t.format || "HH:mm:ss");
if (!a || b(a))
return;
m.value = a, y.value = a;
const l = V(a);
i("update:modelValue", l), i("change", l);
}
}, L = (e) => {
M(), i("focus", e);
}, K = (e) => {
i("blur", e);
}, G = (e) => {
if (!w && (r.text = String(e != null ? e : ""), !(!t.editable || t.disabled || t.readonly) && !r.open)) {
const n = r.text.trim();
if (!n)
return;
const a = D(n, t.format || "HH:mm:ss");
a && !b(a) && (y.value = a);
}
}, J = (e) => {
w || (r.startText = String(e != null ? e : ""));
}, Q = (e) => {
w || (r.endText = String(e != null ? e : ""));
}, X = (e) => {
r.active = "start", L(e);
}, Y = (e) => {
r.active = "end", L(e);
}, Z = (e) => {
t.disabled || t.readonly || b(e) || (m.value = e, r.text = v(e));
}, p = (e) => {
t.disabled || t.readonly || b(e) || (c.value = [e, c.value[1]], r.startText = v(e), r.active = "end");
}, ee = (e) => {
t.disabled || t.readonly || b(e) || (c.value = [c.value[0], e], r.endText = v(e));
}, I = () => {
if (t.disabled || t.readonly)
return;
if (t.isRange) {
const [n, a] = c.value;
if (b(n) || b(a))
return;
g.value = [n, a];
const l = [V(n), V(a)];
i("update:modelValue", l), i("change", l), x(!0);
return;
}
if (b(m.value))
return;
y.value = m.value;
const e = V(m.value);
i("update:modelValue", e), i("change", e), x(!0);
}, U = () => {
x(!1);
}, C = () => {
if (t.disabled || t.readonly)
return;
const e = W();
t.isRange ? (g.value = [null, null], c.value = [null, null], r.startText = "", r.endText = "", i("update:modelValue", Array.isArray(e) ? e : []), i("change", Array.isArray(e) ? e : [])) : (y.value = null, m.value = null, r.text = "", i("update:modelValue", e), i("change", e)), i("clear"), x(!0);
};
return S(
() => r.text,
(e, n) => {
w || !t.editable || t.readonly || t.isRange || n && !e && C();
}
), S(
() => [r.startText, r.endText],
(e, n) => {
if (w || !t.editable || t.readonly || !t.isRange)
return;
const [a, l] = e, [u, o] = n;
(u || o) && !a && !l && C();
}
), S(
() => t.disabled,
(e) => {
e && x(!1);
}
), le(() => {
window.addEventListener("resize", R), window.addEventListener("scroll", R, !0);
}), ue(() => {
document.removeEventListener("click", H), window.removeEventListener("resize", R), window.removeEventListener("scroll", R, !0);
}), $({ focus: () => {
var n, a;
const e = (n = A.value) == null ? void 0 : n.querySelector("input");
(a = e == null ? void 0 : e.focus) == null || a.call(e);
}, blur: () => {
var n, a;
const e = (n = A.value) == null ? void 0 : n.querySelector("input");
(a = e == null ? void 0 : e.blur) == null || a.call(e);
}, handleOpen: () => M(), handleClose: () => x(!1) }), {
rootRef: A,
triggerRef: E,
dropdownRef: B,
dropdownStyle: O,
showSeconds: F,
...ie(r),
draft: m,
draftRange: c,
openDropdown: M,
closeDropdown: x,
onKeydown: j,
onPickSingleDraft: Z,
onPickRangeDraftStart: p,
onPickRangeDraftEnd: ee,
commit: I,
cancel: U,
onClear: C,
onFocus: L,
onBlur: K,
onInputUpdate: G,
onStartInputUpdate: J,
onEndInputUpdate: Q,
onStartFocus: X,
onEndFocus: Y
};
}
});
export {
Re as default
};