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