@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
271 lines (270 loc) • 9.23 kB
JavaScript
import { defineComponent as re, ref as N, toRef as le, computed as C, watch as M, openBlock as S, createElementBlock as w, normalizeClass as f, unref as n, renderSlot as p, createVNode as v, createElementVNode as h, Fragment as H, renderList as F, withCtx as _, toDisplayString as se, createSlots as oe, mergeProps as ie } from "vue";
import "../renderer/index.mjs";
import "./calendar-cell.vue.mjs";
import { useProps as ue, useNameHelper as de, useLocale as me, emitEvent as G } from "@vexip-ui/config";
import { useHover as fe } from "@vexip-ui/hooks";
import { toFalse as ve, startOfDay as ce, endOfDay as pe, debounceMinor as he, rangeDate as ye, startOfWeek as ge, differenceDays as x } from "@vexip-ui/utils";
import { calendarPanelProps as be } from "./props.mjs";
import y from "../renderer/renderer.mjs";
import Te from "./calendar-cell.vue2.mjs";
const Fe = /* @__PURE__ */ re({
name: "CalendarPanel",
__name: "calendar-panel",
props: be,
emits: ["update:value"],
setup(J, { expose: K, emit: Q }) {
const t = ue("calendarBase", J, {
locale: null,
value: {
default: null,
static: !0
},
year: () => (/* @__PURE__ */ new Date()).getFullYear(),
month: {
default: () => (/* @__PURE__ */ new Date()).getMonth() + 1,
validator: (e) => e > 0 && e <= 12
},
weekDays: {
default: null,
validator: (e) => !e || e.length === 0 || e.length === 7
},
weekStart: {
default: 0,
validator: (e) => e >= 0 && e < 7
},
today: {
default: () => /* @__PURE__ */ new Date(),
validator: (e) => !Number.isNaN(+new Date(e))
},
disabledDate: {
default: ve,
isFunc: !0
},
valueType: {
default: "start",
validator: (e) => e === "start" || e === "end"
},
min: null,
max: null,
range: null,
slots: () => ({})
}), U = Q, u = de("calendar"), o = N(null), i = N(null), d = N([]), m = N(null), { wrapper: X, isHover: Z } = fe(), R = me("calendar", le(t, "locale")), g = C(() => t.min ? +ce(t.min) : -1 / 0), b = C(() => t.max ? +pe(t.max) : 1 / 0), ee = C(() => Number.isNaN(g.value) || Number.isNaN(b.value) ? !1 : g.value > b.value), te = he(V);
Y(t.value), V(), M(() => t.value, Y), M([() => t.year, () => t.month, () => t.weekStart], te), M(Z, (e) => {
e || (m.value = null);
}), M(m, (e) => {
G(t.onHover, e);
}), K({
startValue: o,
endValue: i,
body: X,
isSelected: P,
isHovered: B,
isPrevMonth: E,
isNextMonth: I,
isDisabled: T,
isToday: L,
isInRange: O
});
function $(e) {
var r;
return ((r = t.weekDays) == null ? void 0 : r[e]) || R.value[`week${e || 7}`];
}
function V() {
d.value = ye(
ge(new Date(t.year, t.month - 1, 1), t.weekStart),
42
);
}
function Y(e) {
Array.isArray(e) || (e = [e, e]);
for (let r = 0; r < 2; ++r) {
const a = new Date(e[r] ?? "");
if (r === 0 ? o.value = Number.isNaN(+a) ? null : a : i.value = Number.isNaN(+a) ? null : a, !t.range) break;
}
}
function P(e) {
return !e || !o.value && !i.value ? !1 : !!(o.value && !x(e, o.value) || i.value && !x(e, i.value));
}
function T(e) {
if (typeof t.disabledDate == "function" && t.disabledDate(e))
return !0;
const r = e.getTime();
if (ee.value) {
if (r > b.value && r < g.value)
return !0;
} else if (r < g.value || r > b.value)
return !0;
return !1;
}
function B(e) {
return !e || !m.value ? !1 : !x(e, m.value);
}
function E(e) {
const { year: r, month: a } = t, l = e.getFullYear(), s = e.getMonth();
return l < r || l === r && s < a - 1;
}
function I(e) {
const { year: r, month: a } = t, l = e.getFullYear(), s = e.getMonth();
return l > r || l === r && s > a - 1;
}
function L(e) {
return x(e, t.today) === 0;
}
function ae(e) {
T(e) || (t.valueType === "start" ? o.value = e : i.value = e, G(t.onSelect, e), U("update:value", e));
}
function ne(e) {
m.value = T(e) ? null : e;
}
function O(e) {
if (!m.value && !o.value && !i.value)
return !1;
let r, a;
if (o.value && i.value) {
const l = o.value.getTime(), s = i.value.getTime();
r = Math.min(l, s), a = Math.max(l, s);
} else if (m.value) {
if (!o.value && !i.value) return !1;
const l = m.value.getTime();
if (!o.value || !i.value) {
const s = (o.value ?? i.value).getTime();
r = Math.min(l, s), a = Math.max(l, s);
} else {
const s = o.value.getTime(), c = i.value.getTime(), k = Math.min(s, c), D = Math.max(s, c);
r = Math.min(l, k), a = Math.max(l, D);
}
} else
return !1;
return e.getTime() >= r && e.getTime() <= a;
}
return (e, r) => (S(), w("div", {
class: f([n(u).be("panel"), n(u).bs("vars"), n(t).inherit && n(u).bem("panel", "inherit")]),
role: "grid"
}, [
p(e.$slots, "header", {}, () => [
v(n(y), {
renderer: n(t).slots.header
}, null, 8, ["renderer"])
]),
h("div", {
class: f([n(u).be("row"), n(u).bem("row", "week")]),
"aria-hidden": ""
}, [
(S(), w(H, null, F(7, (a) => h("div", {
key: a,
class: f([n(u).be("cell"), n(u).be("cell-week")])
}, [
p(e.$slots, "week", {
label: $((a - 1 + n(t).weekStart) % 7),
index: a - 1,
week: (a - 1 + n(t).weekStart) % 7
}, () => [
v(n(y), {
renderer: n(t).slots.week,
data: {
label: $((a - 1 + n(t).weekStart) % 7),
index: a - 1,
week: (a - 1 + n(t).weekStart) % 7
}
}, {
default: _(() => [
h("div", {
class: f(n(u).be("index"))
}, se($((a - 1 + n(t).weekStart) % 7)), 3)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 2)), 64))
], 2),
h("div", {
ref: "body",
class: f(n(u).be("body"))
}, [
(S(), w(H, null, F(6, (a) => h("div", {
key: a,
class: f(n(u).be("row"))
}, [
(S(), w(H, null, F(7, (l) => v(Te, {
key: (a - 1) * 7 + l,
date: d.value[(a - 1) * 7 + l - 1],
locale: n(R),
selected: P(d.value[(a - 1) * 7 + l - 1]),
hovered: B(d.value[(a - 1) * 7 + l - 1]),
"is-prev": E(d.value[(a - 1) * 7 + l - 1]),
"is-next": I(d.value[(a - 1) * 7 + l - 1]),
"is-today": L(d.value[(a - 1) * 7 + l - 1]),
disabled: T(d.value[(a - 1) * 7 + l - 1]),
"in-range": n(t).range && O(d.value[(a - 1) * 7 + l - 1]),
onHover: ne,
onSelect: ae
}, oe({ _: 2 }, [
e.$slots.item || n(t).slots.item ? {
name: "item",
fn: _(({
date: s,
label: c,
selected: k,
hovered: D,
isPrev: A,
isNext: W,
isToday: z,
disabled: j,
inRange: q
}) => [
p(e.$slots, "item", {
date: s,
label: c,
selected: k,
hovered: D,
isPrev: A,
isNext: W,
isToday: z,
disabled: j,
inRange: q
}, () => [
v(n(y), {
renderer: n(t).slots.item,
data: {
date: s,
label: c,
selected: k,
hovered: D,
isPrev: A,
isNext: W,
isToday: z,
disabled: j,
inRange: q
}
}, null, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0,
e.$slots.itemContent || n(t).slots.itemContent ? {
name: "default",
fn: _((s) => [
p(e.$slots, "itemContent", ie({ ref_for: !0 }, s), () => [
v(n(y), {
renderer: n(t).slots.itemContent,
data: s
}, null, 8, ["renderer", "data"])
])
]),
key: "1"
} : void 0
]), 1032, ["date", "locale", "selected", "hovered", "is-prev", "is-next", "is-today", "disabled", "in-range"])), 64))
], 2)), 64))
], 2),
p(e.$slots, "footer", {}, () => [
v(n(y), {
renderer: n(t).slots.footer
}, null, 8, ["renderer"])
])
], 2));
}
});
export {
Fe as default
};
//# sourceMappingURL=calendar-panel.vue2.mjs.map