@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
244 lines (243 loc) • 7.77 kB
JavaScript
import { defineComponent as q, toRef as x, ref as $, watch as g, createBlock as A, openBlock as G, unref as a, normalizeClass as l, withCtx as s, createElementVNode as m, withKeys as K, withModifiers as R, renderSlot as b, createVNode as o, toDisplayString as V } from "vue";
import "../column/index.mjs";
import "../number-input/index.mjs";
import "../renderer/index.mjs";
import "../row/index.mjs";
import "./calendar-panel.vue.mjs";
import { useProps as J, useNameHelper as O, useLocale as Q, emitEvent as D } from "@vexip-ui/config";
import { calendarProps as W } from "./props.mjs";
import X from "./calendar-panel.vue2.mjs";
import w from "../renderer/renderer.mjs";
import Z from "../row/row.mjs";
import B from "../row/column.mjs";
import E from "../number-input/number-input.vue2.mjs";
const P = ["onClick", "onKeydown"], T = ["aria-label"], pe = /* @__PURE__ */ q({
name: "Calendar",
__name: "calendar",
props: W,
emits: ["update:value", "update:year", "update:month"],
setup(F, { expose: I, emit: N }) {
const t = J("calendar", F, {
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: () => !1,
isFunc: !0
},
slots: () => ({})
}), k = N, n = O("calendar"), M = Q("calendar", x(t, "locale")), c = $(t.value), u = $(t.year), i = $(t.month);
g(
() => t.value,
(e) => {
c.value = e;
}
), g(
() => t.year,
(e) => {
u.value = e;
}
), g(
() => t.month,
(e) => {
i.value = e;
}
), I({ calendarValue: c, calendarYear: u, calendarMonth: i });
function z(e) {
return `${e}${M.value.year}`;
}
function H(e) {
return `${e}${M.value.month}`;
}
function L(e) {
return typeof t.disabledDate != "function" ? !0 : t.disabledDate(e);
}
function C(e) {
L(e) || (c.value = e), D(t.onSelect, e), k("update:value", e);
}
function U(e) {
u.value = e, D(t.onYearChange, e, i.value), k("update:year", e);
}
function j(e) {
i.value = e, D(t.onMonthChange, u.value, e), k("update:month", e);
}
return (e, S) => (G(), A(X, {
value: c.value,
"onUpdate:value": S[0] || (S[0] = (r) => c.value = r),
inherit: a(t).inherit,
class: l([a(n).b()]),
year: u.value,
month: i.value,
"week-start": a(t).weekStart,
today: a(t).today,
"disabled-date": a(t).disabledDate
}, {
header: s(() => [
b(e.$slots, "header", {}, () => [
o(a(w), {
renderer: a(t).slots.header
}, {
default: s(() => [
o(a(Z), {
inherit: "",
class: l(a(n).be("header")),
align: "middle"
}, {
default: s(() => [
o(a(B), { flex: "auto" }, {
default: s(() => [
b(e.$slots, "title", {}, () => [
o(a(w), {
renderer: a(t).slots.title
}, null, 8, ["renderer"])
])
]),
_: 3
}),
o(a(B), {
class: l(a(n).be("actions")),
flex: "0"
}, {
default: s(() => [
o(a(E), {
value: u.value,
inherit: "",
class: l(a(n).be("year-input")),
min: 1970,
max: 2300,
formatter: z,
onChange: U
}, null, 8, ["value", "class"]),
o(a(E), {
value: i.value,
inherit: "",
class: l(a(n).be("month-input")),
min: 1,
max: 12,
formatter: H,
onChange: j
}, null, 8, ["value", "class"])
]),
_: 1
}, 8, ["class"])
]),
_: 3
}, 8, ["class"])
]),
_: 3
}, 8, ["renderer"])
])
]),
week: s(({ label: r, index: y, week: d }) => [
m("div", {
class: l(a(n).be("week"))
}, [
b(e.$slots, "week", {
label: r,
index: y,
week: d
}, () => [
o(a(w), {
renderer: a(t).slots.week,
data: { label: r, index: y, week: d }
}, {
default: s(() => [
m("div", {
class: l(a(n).be("week-value"))
}, V(r), 3)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 2)
]),
item: s(({ date: r, label: y, selected: d, hovered: _, isPrev: f, isNext: p, isToday: h, disabled: v }) => [
m("div", {
class: l({
[a(n).be("date")]: !0,
[a(n).bem("date", "selected")]: d,
[a(n).bem("date", "prev")]: f,
[a(n).bem("date", "next")]: p,
[a(n).bem("date", "today")]: h,
[a(n).bem("date", "disabled")]: v
}),
tabindex: "0",
onClick: (Y) => C(r),
onKeydown: [
K(R((Y) => C(r), ["prevent"]), ["enter"]),
K(R((Y) => C(r), ["prevent"]), ["space"])
]
}, [
m("div", {
class: l(a(n).be("date-header"))
}, [
b(e.$slots, "date", {
selected: d,
hovered: _,
date: r,
isPrev: f,
isNext: p,
isToday: h,
disabled: v
}, () => [
o(a(w), {
renderer: a(t).slots.date,
data: { selected: d, hovered: _, date: r, isPrev: f, isNext: p, isToday: h, disabled: v }
}, {
default: s(() => [
m("div", {
class: l(a(n).be("date-value")),
"aria-label": y
}, V(r.getDate()), 11, T)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 2),
m("div", {
class: l(a(n).be("date-content"))
}, [
b(e.$slots, "content", {
selected: d,
hovered: _,
date: r,
isPrev: f,
isNext: p,
isToday: h,
disabled: v
}, () => [
o(a(w), {
renderer: a(t).slots.content,
data: { selected: d, hovered: _, date: r, isPrev: f, isNext: p, isToday: h, disabled: v }
}, null, 8, ["renderer", "data"])
])
], 2)
], 42, P)
]),
_: 3
}, 8, ["value", "inherit", "class", "year", "month", "week-start", "today", "disabled-date"]));
}
});
export {
pe as default
};
//# sourceMappingURL=calendar.vue2.mjs.map