dk-plus
Version:
225 lines (224 loc) • 7.71 kB
JavaScript
import { defineComponent as X, ref as b, computed as y, reactive as Z, watch as D, nextTick as B, onMounted as p, onBeforeUnmount as ee, toRefs as te } from "vue";
import { dkDatePickerProps as ne } from "./index3.js";
import { datePickerEmits as re } from "./index4.js";
import { formatByPattern as k, parseByPattern as R, coerceToDate as ae } from "./index5.js";
const fe = X({
name: "DkDatePicker",
props: ne,
emits: re,
setup(n, { emit: l }) {
const F = b(), P = b(), I = b(), s = y(() => String(n.type || "date").includes("range")), S = y(() => n.type === "daterange"), r = Z({
open: !1,
text: "",
startText: "",
endText: "",
committed: null,
committedRange: [null, null],
draft: null,
draftRange: [null, null],
rangePicking: 0
});
let h = !1;
const z = (e) => {
if (e === "" || e === null || e === void 0)
return !0;
const t = n.emptyValues;
return t ? Array.isArray(t) && t.some((a) => Object.is(a, e)) : !1;
}, Y = (e) => {
if (z(e))
return null;
const t = ae(e);
if (t)
return t;
if (typeof e == "string") {
const a = n.valueFormat || n.format || "YYYY-MM-DD";
return R(e, a);
}
return null;
}, O = (e) => {
if (s.value) {
const t = Array.isArray(e) ? e : [], a = Y(t[0]), i = Y(t[1]);
return { single: null, range: [a, i] };
}
return { single: Y(e), range: [null, null] };
}, W = (e) => e ? n.valueFormat ? n.valueFormat === "timestamp" ? e.getTime() : k(e, n.valueFormat) : e : n.valueFormat ? "" : null, C = (e) => {
const [t, a] = e;
return !t && !a ? [] : n.valueFormat ? n.valueFormat === "timestamp" ? [t ? t.getTime() : "", a ? a.getTime() : ""] : [t ? k(t, n.valueFormat) : "", a ? k(a, n.valueFormat) : ""] : [t, a];
}, u = (e) => e ? k(e, n.format || "YYYY-MM-DD") : "", A = (e) => e ? k(e, "YYYY-MM-DD") : "", H = () => {
const e = n.valueOnClear;
if (typeof e == "function")
try {
return e();
} catch {
return [];
}
return e !== void 0 ? e : s.value ? [] : n.valueFormat ? "" : null;
}, v = () => {
if (s.value) {
const t = C(r.draftRange);
l("update:modelValue", t), l("change", t);
return;
}
const e = W(r.draft);
l("update:modelValue", e), l("change", e);
}, L = b({}), m = () => {
if (!n.teleported || !P.value)
return;
const e = P.value.getBoundingClientRect(), t = parseFloat(String(n.panelWidth || "320")) || 320, a = 360, i = 4, E = [n.placement, ...n.fallbackPlacements || []].filter(Boolean), g = (d, o) => d >= 0 && o >= 0 && d + a <= window.innerHeight && o + t <= window.innerWidth;
let w = e.bottom + i, x = e.left;
for (const d of E) {
if (d === "top") {
const o = e.top - i - a, c = e.left;
if (g(o, c)) {
w = o, x = c;
break;
}
}
if (d === "bottom") {
const o = e.bottom + i, c = e.left;
if (g(o, c)) {
w = o, x = c;
break;
}
}
if (d === "right") {
const o = e.top, c = e.right + i;
if (g(o, c)) {
w = o, x = c;
break;
}
}
if (d === "left") {
const o = e.top, c = e.left - i - t;
if (g(o, c)) {
w = o, x = c;
break;
}
}
}
L.value = {
position: "fixed",
top: `${Math.max(0, w)}px`,
left: `${Math.max(0, x)}px`,
width: n.panelWidth,
zIndex: 2023
};
}, M = (e) => {
const t = e.target, a = F.value, i = I.value;
a && a.contains(t) || i && i.contains(t) || (n.showConfirm, f());
}, V = () => {
n.disabled || r.open || (r.open = !0, l("visible-change", !0), r.draft = r.committed, r.draftRange = [...r.committedRange], r.rangePicking = 0, document.addEventListener("click", M), B(() => m()));
}, f = () => {
!r.open || (r.open = !1, l("visible-change", !1), document.removeEventListener("click", M));
}, _ = (e) => {
n.automaticDropdown && V(), l("focus", e);
}, $ = (e) => {
l("blur", e);
}, j = (e) => {
if (n.disabled)
return;
const t = typeof e.value == "function" ? e.value() : e.value, a = Y(t);
!a || (r.draft = a, r.text = u(a), n.showConfirm || (v(), f()));
}, K = (e) => {
if (n.disabled)
return;
const t = R(e, "YYYY-MM-DD");
!t || (r.draft = t, r.text = u(t), n.showConfirm || (v(), f()));
}, U = (e) => {
if (n.disabled || !S.value)
return;
const t = R(e, "YYYY-MM-DD");
if (!t)
return;
const [a] = r.draftRange;
if (r.rangePicking === 0)
r.draftRange = [t, null], r.rangePicking = 1, l("calendar-change", C([t, null]));
else {
const i = a;
i && t.getTime() < i.getTime() ? r.draftRange = [t, i] : r.draftRange = [i, t], r.rangePicking = 0, l("calendar-change", C(r.draftRange)), r.startText = u(r.draftRange[0]), r.endText = u(r.draftRange[1]), n.showConfirm || (v(), f());
}
}, q = () => {
n.disabled || !n.showConfirm || (v(), f());
}, T = () => {
if (n.disabled)
return;
const e = H();
l("update:modelValue", e), l("change", e), l("clear"), f();
}, G = (e) => {
if (e.key === "Escape" && f(), e.key === "Enter") {
if (n.disabled || !n.editable || n.readonly || s.value)
return;
const t = R(r.text, n.format || "YYYY-MM-DD");
if (!t)
return;
r.draft = t, n.showConfirm || v();
}
}, J = y(() => ({
"--date-picker-panel-width": n.panelWidth
})), N = y(() => typeof n.clearIcon == "string" ? n.clearIcon : void 0), Q = y(() => {
if (typeof n.prefixIcon == "string" && n.prefixIcon)
return n.prefixIcon;
const e = String(n.type || "date").toLowerCase();
return e === "time" || e === "timerange" ? "IconClock" : "IconCalendar";
});
return D(
() => n.modelValue,
(e) => {
h = !0;
const t = O(e);
r.committed = t.single, r.committedRange = t.range, r.draft = t.single, r.draftRange = [...t.range], r.text = u(t.single), r.startText = u(t.range[0]), r.endText = u(t.range[1]), B(() => {
h = !1;
});
},
{ immediate: !0 }
), D(
() => r.text,
(e, t) => {
h || !n.editable || n.readonly || t && !e && T();
}
), D(
() => [r.startText, r.endText],
(e, t) => {
if (h || !n.editable || n.readonly || !s.value)
return;
const [a, i] = e, [E, g] = t;
(E || g) && !a && !i && T();
}
), D(
() => n.disabled,
(e) => {
e && f();
}
), p(() => {
window.addEventListener("resize", m), window.addEventListener("scroll", m, !0);
}), ee(() => {
document.removeEventListener("click", M), window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
}), {
rootRef: F,
triggerRef: P,
dropdownRef: I,
...te(r),
isRange: s,
rootStyle: J,
dropdownStyle: L,
resolvedClearIcon: N,
resolvedPrefixIcon: Q,
displayOne: u,
toPanelValue: A,
openDropdown: V,
closeDropdown: f,
onFocus: _,
onBlur: $,
onKeydown: G,
applyShortcut: j,
onPickSingle: K,
onPickRange: U,
onConfirm: q,
onClear: T,
refreshDropdownPosition: m
};
}
});
export {
fe as default
};