@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
592 lines (591 loc) • 19.6 kB
JavaScript
import { defineComponent as xe, ref as V, reactive as Te, computed as p, watch as Be, onMounted as Pe, createElementBlock as h, openBlock as c, normalizeStyle as ze, normalizeClass as o, unref as a, createBlock as G, createCommentVNode as B, createElementVNode as s, withCtx as P, Fragment as S, renderList as J, toDisplayString as y, withDirectives as K, createVNode as A, normalizeProps as D, guardReactiveProps as Y, vShow as Q, renderSlot as z, withModifiers as L, createTextVNode as E, createSlots as Ne } from "vue";
import "../button/index.mjs";
import "../calendar-panel/index.mjs";
import "../icon/index.mjs";
import "../resize-observer/index.mjs";
import "./time-wheel.vue.mjs";
import { useNameHelper as je, useIcons as Fe } from "@vexip-ui/config";
import { toDate as le, range as H, callIfFunc as Oe } from "@vexip-ui/utils";
import { useRtl as Le } from "@vexip-ui/hooks";
import { datePickerTypes as Ee } from "./symbol.mjs";
import He from "../resize-observer/resize-observer.mjs";
import I from "../icon/icon.mjs";
import Ie from "../calendar/calendar-panel.vue2.mjs";
import re from "./time-wheel.vue2.mjs";
import ie from "../button/button.mjs";
const We = ["aria-labelledby"], qe = ["title", "onClick"], Ge = ["onClick", "onMouseenter"], Je = ["onClick", "onMouseenter"], ut = /* @__PURE__ */ xe({
name: "DatePanel",
__name: "date-panel",
props: {
type: {
default: "date",
validator: (i) => Ee.includes(i)
},
enabled: {
type: Object,
default: () => ({})
},
startValue: {
type: Object,
default: null
},
endValue: {
type: Object,
default: null
},
shortcuts: {
type: Array,
default: () => []
},
confirmText: {
type: String,
default: null
},
cancelText: {
type: String,
default: null
},
today: {
type: [Number, String, Date],
default: () => /* @__PURE__ */ new Date()
},
disabledDate: {
type: Function,
default: () => !1
},
noAction: {
type: Boolean,
default: !1
},
steps: {
type: Array,
default: () => [1, 1, 1]
},
range: {
type: Boolean,
default: !1
},
startActivated: {
type: Object,
default: () => ({})
},
endActivated: {
type: Object,
default: () => ({})
},
min: {
type: [Number, String, Date],
default: null
},
max: {
type: [Number, String, Date],
default: null
},
disabledTime: {
type: Object,
default: () => ({})
},
hasError: {
type: Boolean,
default: !1
},
locale: {
type: Object,
default: () => ({})
},
selectingType: {
type: String,
default: "start"
},
weekStart: {
type: Number,
default: null
},
staticWheel: {
type: Boolean,
default: !1
},
shortcutsPlacement: {
type: String,
default: "left"
},
labeledBy: {
type: String,
default: void 0
}
},
emits: [
"click",
"shortcut",
"toggle-col",
"change",
"cancel",
"confirm",
"hover",
"type-change",
"time-change"
],
setup(i, { expose: oe, emit: se }) {
const t = i, M = se, r = je("date-picker"), w = Fe(), { isRtl: N } = Le(), U = le(t.today), ue = H(12, 1, 1), f = V(
t.type === "year" ? "year" : t.type === "month" ? "month" : "date"
), d = V(U.getFullYear()), b = V(U.getMonth() + 1), g = V(0), $ = V(0), k = V([]), R = Te({ width: 0, height: 0 }), ce = p(() => {
const { width: e, height: n } = R;
switch (t.shortcutsPlacement) {
case "top":
return { paddingTop: `${n}px` };
case "right":
return { paddingRight: `${e}px` };
case "bottom":
return { paddingBottom: `${n}px` };
default:
return { paddingLeft: `${e}px` };
}
}), X = p(() => {
const e = t.startActivated;
return e.year && e.month && e.date;
}), de = p(() => {
const e = t.endActivated;
return e.year && e.month && e.date;
}), me = p(() => t.type === "datetime"), he = p(() => t.range ? X.value || de.value ? [W("start"), W("end")] : ["", ""] : X.value ? W("start") : ""), ve = p(() => [
t.locale.week7,
t.locale.week1,
t.locale.week2,
t.locale.week3,
t.locale.week4,
t.locale.week5,
t.locale.week6
].map((e) => e.slice(0, 2)));
Be(
d,
(e) => {
k.value = H(12, Math.floor(e / 10) * 10, 1);
},
{ immediate: !0 }
), Pe(() => {
ne("start");
}), oe({ refreshCalendar: ne });
function W(e) {
const n = e === "start" ? t.startValue : t.endValue;
return n ? `${n.year}-${n.month}-${n.date}` : "";
}
function Z(e) {
return t.locale[`month${e}`];
}
function x(e) {
f.value = e;
}
function j(e, n) {
if (e === "year")
d.value += n;
else {
b.value += n;
const l = new Date(d.value, b.value - 1, 1);
d.value = l.getFullYear(), b.value = l.getMonth() + 1;
}
}
function fe(e) {
M("click", e);
}
function ye(e) {
const { value: n, name: l } = t.shortcuts[e];
M("shortcut", l, Oe(n));
}
function be(e) {
q([e.getFullYear(), e.getMonth() + 1, e.getDate()]);
}
function ge(e) {
F(e) || (d.value = e, t.type !== "year" ? x("month") : q([e, 1, 1]));
}
function ke(e) {
T(e) || (b.value = e, t.type !== "month" ? x("date") : q([d.value, e, 1]));
}
function q(e) {
M("change", e);
}
function Me(e, n) {
M("time-change", "start", e, n);
}
function we(e, n) {
M("time-change", "end", e, n);
}
function Ae() {
f.value === "year" ? k.value = H(12, k.value[0] - 10, 1) : j("year", -1);
}
function $e() {
f.value === "year" ? k.value = H(12, k.value[10], 1) : j("year", 1);
}
function Ce() {
M("cancel");
}
function Ve() {
M("confirm");
}
function pe(e) {
M("hover", e);
}
function _(e) {
return e ? t.startActivated.year && t.startValue.year === e || t.endActivated.year && t.endValue.year === e : !1;
}
function ee(e) {
if (!e) return !1;
const n = 100 * d.value + e;
return t.startActivated.month && 100 * t.startValue.year + t.startValue.month === n || t.endActivated.month && 100 * t.endValue.year + t.endValue.month === n;
}
function F(e) {
if (t.type === "year")
return t.disabledDate(new Date(e, 0));
for (let n = 1; n <= 12; ++n)
if (!T(n, e))
return !1;
return !0;
}
function T(e, n = d.value) {
if (t.type === "year") return !1;
if (t.type === "month")
return t.disabledDate(new Date(n, e - 1));
const l = new Date(n, e - 1), m = new Date(n, e, 0).getDate();
for (let v = 1; v <= m; ++v)
if (l.setDate(v), !t.disabledDate(l))
return !1;
return !0;
}
function Se(e) {
g.value = F(e) ? 0 : e;
}
function De(e) {
$.value = T(e) ? 0 : e;
}
function te(e) {
if (!t.range || !g.value && !t.startActivated.year && !t.endActivated.year)
return !1;
const n = t.startValue.year, l = t.endValue.year;
let u, m;
if (!g.value && t.startActivated.year && t.endActivated.year)
u = Math.min(n, l), m = Math.max(n, l);
else if (g.value) {
if (!t.startActivated.year && !t.endActivated.year) return !1;
if (!t.startActivated.year || !t.endActivated.year) {
const v = t.startActivated.year ? n : l;
u = Math.min(g.value, v), m = Math.max(g.value, v);
} else {
const v = Math.min(n, l), C = Math.max(n, l);
u = Math.min(g.value, v), m = Math.max(g.value, C);
}
} else
return !1;
return e >= u && e <= m;
}
function ae(e) {
if (!t.range || !$.value && !t.startActivated.month && !t.endActivated.month)
return !1;
const n = 100 * t.startValue.year + t.startValue.month, l = 100 * t.endValue.year + t.endValue.month;
let u, m;
if (!$.value && t.startActivated.month && t.endActivated.month)
u = Math.min(n, l), m = Math.max(n, l);
else if ($.value) {
if (!t.startActivated.month && !t.endActivated.month) return !1;
const C = 100 * d.value + $.value;
if (!t.startActivated.month || !t.endActivated.month) {
const O = t.startActivated.month ? n : l;
u = Math.min(C, O), m = Math.max(C, O);
} else {
const O = Math.min(n, l), Re = Math.max(n, l);
u = Math.min(C, O), m = Math.max(C, Re);
}
} else
return !1;
const v = 100 * d.value + e;
return v >= u && v <= m;
}
function ne(e) {
const n = le(t.today);
e === "start" ? (d.value = t.startActivated.year ? t.startValue.year : n.getFullYear(), b.value = t.startActivated.month ? t.startValue.month : n.getMonth() + 1) : (d.value = t.endActivated.year ? t.endValue.year : n.getFullYear(), b.value = t.endActivated.month ? t.endValue.month : n.getMonth() + 1);
}
function Ye(e) {
var l;
const n = (l = e.borderBoxSize) == null ? void 0 : l[0];
n ? (R.width = n.inlineSize, R.height = n.blockSize) : (R.width = e.contentRect.width, R.height = e.contentRect.height);
}
return (e, n) => (c(), h("div", {
class: o({
[a(r).be("panel")]: !0,
[a(r).bem("panel", "vertical")]: i.shortcuts.length && (i.shortcutsPlacement === "top" || i.shortcutsPlacement === "bottom")
}),
"aria-labelledby": i.labeledBy,
style: ze(ce.value),
onClick: fe
}, [
i.shortcuts.length ? (c(), G(a(He), {
key: 0,
"on-resize": Ye
}, {
default: P(() => [
s("div", {
class: o([
a(r).be("list"),
a(r).bem("list", "sub"),
a(r).be("shortcuts"),
a(r).bem("shortcuts", i.shortcutsPlacement)
])
}, [
(c(!0), h(S, null, J(i.shortcuts, (l, u) => (c(), h("div", {
key: u,
class: o(a(r).be("shortcut")),
title: l.name,
onClick: (m) => ye(u)
}, y(l.name), 11, qe))), 128))
], 2)
]),
_: 1
})) : B("", !0),
s("div", {
class: o(a(r).be("list")),
role: "application"
}, [
s("div", {
class: o(a(r).be("panel-body"))
}, [
s("div", {
class: o(a(r).be("date-panel"))
}, [
s("div", {
class: o(a(r).be("header"))
}, [
s("div", {
class: o([a(r).be("arrow"), a(r).be("prev-year")]),
onClick: Ae
}, [
A(a(I), D(Y(a(N) ? a(w).anglesRight : a(w).anglesLeft)), null, 16)
], 2),
K(s("div", {
class: o([a(r).be("arrow"), a(r).be("prev-month")]),
onClick: n[0] || (n[0] = (l) => j("month", -1))
}, [
A(a(I), D(Y(a(N) ? a(w).angleRight : a(w).angleLeft)), null, 16)
], 2), [
[Q, f.value === "date"]
]),
s("div", {
class: o(a(r).be("year-month"))
}, [
z(e.$slots, "title", {
panel: f.value,
yearStart: k.value[0],
year: d.value,
month: b.value,
togglePanel: x
}, () => [
s("div", {
key: "year",
class: o(a(r).be("year")),
onClick: n[1] || (n[1] = L((l) => x("year"), ["stop"]))
}, [
f.value === "year" ? (c(), h(S, { key: 0 }, [
E(y(`${k.value[0]}${i.locale.year} - ${k.value[9]}${i.locale.year}`), 1)
], 64)) : (c(), h(S, { key: 1 }, [
E(y(`${d.value}${i.locale.year}`), 1)
], 64))
], 2),
K(s("div", {
class: o(a(r).be("month")),
onClick: n[2] || (n[2] = L((l) => x("month"), ["stop"]))
}, y(Z(b.value)), 3), [
[Q, f.value === "date"]
])
])
], 2),
K(s("div", {
class: o([a(r).be("arrow"), a(r).be("next-month")]),
onClick: n[3] || (n[3] = (l) => j("month", 1))
}, [
A(a(I), D(Y(a(N) ? a(w).angleLeft : a(w).angleRight)), null, 16)
], 2), [
[Q, f.value === "date"]
]),
s("div", {
class: o([a(r).be("arrow"), a(r).be("next-year")]),
onClick: $e
}, [
A(a(I), D(Y(a(N) ? a(w).anglesLeft : a(w).anglesRight)), null, 16)
], 2)
], 2),
s("div", {
class: o(a(r).be("calendar"))
}, [
f.value === "year" ? (c(), h("div", {
key: 0,
class: o(a(r).be("year-panel")),
onMouseleave: n[4] || (n[4] = (l) => g.value = 0)
}, [
(c(!0), h(S, null, J(k.value, (l, u) => (c(), h("div", {
key: u,
class: o({
[a(r).be("year-item")]: !0,
[a(r).bem("year-item", "selected")]: _(l),
[a(r).bem("year-item", "next")]: u > 9,
[a(r).bem("year-item", "disabled")]: F(l),
[a(r).bem("year-item", "in-range")]: te(l)
}),
onClick: L((m) => ge(l), ["stop"]),
onMouseenter: (m) => Se(l)
}, [
s("div", {
class: o(a(r).be("year-label"))
}, [
z(e.$slots, "year", {
year: l,
selected: _(l),
isNext: u > 9,
disabled: F(l),
inRange: te(l)
}, () => [
s("div", {
class: o(a(r).be("year-label-inner"))
}, y(l), 3)
])
], 2)
], 42, Ge))), 128))
], 34)) : f.value === "month" ? (c(), h("div", {
key: 1,
class: o(a(r).be("month-panel")),
onMouseleave: n[5] || (n[5] = (l) => $.value = 0)
}, [
(c(!0), h(S, null, J(a(ue), (l) => (c(), h("div", {
key: l,
class: o({
[a(r).be("month-item")]: !0,
[a(r).bem("month-item", "selected")]: ee(l),
[a(r).bem("month-item", "disabled")]: T(l),
[a(r).bem("month-item", "in-range")]: ae(l)
}),
onClick: L((u) => ke(l), ["stop"]),
onMouseenter: (u) => De(l)
}, [
s("div", {
class: o(a(r).be("month-label"))
}, [
z(e.$slots, "month", {
year: d.value,
month: l,
selected: ee(l),
disabled: T(l),
inRange: ae(l)
}, () => [
s("div", {
class: o(a(r).be("month-label-inner"))
}, y(Z(l)), 3)
])
], 2)
], 42, Je))), 128))
], 34)) : (c(), G(a(Ie), {
key: 2,
inherit: "",
value: he.value,
year: d.value,
month: b.value,
"value-type": i.selectingType,
"disabled-date": i.disabledDate,
range: i.range,
min: i.min,
max: i.max,
"week-start": i.weekStart,
"week-days": ve.value,
onSelect: be,
onHover: pe
}, Ne({ _: 2 }, [
e.$slots.week ? {
name: "week",
fn: P((l) => [
z(e.$slots, "week", D(Y(l)))
]),
key: "0"
} : void 0,
e.$slots.date ? {
name: "itemContent",
fn: P((l) => [
z(e.$slots, "date", D(Y(l)))
]),
key: "1"
} : void 0
]), 1032, ["value", "year", "month", "value-type", "disabled-date", "range", "min", "max", "week-start", "week-days"]))
], 2)
], 2),
me.value ? (c(), h("div", {
key: 0,
class: o(a(r).be("time-panel"))
}, [
s("div", {
class: o([a(r).be("header"), a(r).bem("header", "time")])
}, [
i.range ? (c(), h(S, { key: 0 }, [
s("div", {
class: o(a(r).be("title"))
}, y(i.locale.startTime), 3),
s("div", {
class: o(a(r).be("title"))
}, y(i.locale.endTime), 3)
], 64)) : B("", !0)
], 2),
s("div", {
class: o(a(r).be("wheel"))
}, [
A(re, {
hour: i.startValue.hour,
minute: i.startValue.minute,
second: i.startValue.second,
candidate: 3,
steps: i.steps,
"disabled-time": i.disabledTime,
"no-transition": i.staticWheel,
onChange: Me
}, null, 8, ["hour", "minute", "second", "steps", "disabled-time", "no-transition"]),
i.range ? (c(), G(re, {
key: 0,
hour: i.endValue.hour,
minute: i.endValue.minute,
second: i.endValue.second,
candidate: 3,
steps: i.steps,
"disabled-time": i.disabledTime,
"no-transition": i.staticWheel,
onChange: we
}, null, 8, ["hour", "minute", "second", "steps", "disabled-time", "no-transition"])) : B("", !0)
], 2)
], 2)) : B("", !0)
], 2),
i.noAction ? B("", !0) : (c(), h("div", {
key: 0,
class: o(a(r).be("action"))
}, [
A(a(ie), {
inherit: "",
text: "",
size: "small",
onClick: Ce
}, {
default: P(() => [
E(y(i.cancelText || i.locale.cancel), 1)
]),
_: 1
}),
A(a(ie), {
inherit: "",
type: "primary",
size: "small",
disabled: i.hasError,
onClick: Ve
}, {
default: P(() => [
E(y(i.confirmText || i.locale.confirm), 1)
]),
_: 1
}, 8, ["disabled"])
], 2))
], 2)
], 14, We));
}
});
export {
ut as default
};
//# sourceMappingURL=date-panel.vue2.mjs.map