vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
342 lines (341 loc) • 12.3 kB
JavaScript
import { defineComponent as be, mergeModels as K, useModel as ke, ref as f, computed as j, watch as F, createElementBlock as i, openBlock as s, normalizeStyle as Me, normalizeClass as R, unref as p, createElementVNode as r, createCommentVNode as _, renderSlot as w, createTextVNode as z, toDisplayString as P, createVNode as Q, createBlock as we, mergeProps as D, Fragment as S, renderList as V } from "vue";
import { getYear as T, getMonth as C, parse as Ce, format as O, startOfDay as N, startOfMonth as U, getTime as y, addDays as W, getDay as Oe, startOfYear as Fe, addMonths as Se, set as X, isSameDay as Ve, isSameMonth as Z, getDate as $e } from "date-fns";
import x from "../select/index.js";
import je from "../radio/index.js";
import { useInject as _e, useSlotsExist as ze } from "../utils/index.js";
const Pe = { class: "calendar-header-wrap" }, Te = {
key: 0,
class: "calendar-header-content"
}, Ne = { class: "calendar-header-actions" }, We = {
tabindex: "0",
class: "calendar-display-wrap"
}, Ye = {
key: 0,
class: "calendar-date-panel"
}, Be = { class: "calendar-body" }, Ee = { class: "calendar-table" }, Re = ["title", "onClick"], Ue = { class: "date-cell-inner" }, Le = { class: "date-value" }, He = { class: "date-content" }, qe = {
key: 1,
class: "calendar-month-panel"
}, Ae = { class: "calendar-body" }, Ge = { class: "calendar-table" }, Je = ["title", "onClick"], Ke = { class: "date-cell-inner" }, Qe = { class: "date-value" }, Xe = { class: "date-content" }, at = /* @__PURE__ */ be({
__name: "Calendar",
props: /* @__PURE__ */ K({
display: { default: "panel" },
mode: { default: "month" },
header: { default: void 0 },
yearSelectProps: { default: () => ({}) },
monthSelectProps: { default: () => ({}) },
modeRadioProps: { default: () => ({}) },
startDayOfWeek: { default: 0 },
dateStrip: { type: Boolean, default: !0 },
dateFormat: { type: Function, default: void 0 },
weekFormat: { type: Function, default: void 0 },
monthFormat: { type: Function, default: void 0 },
disabledDate: { type: Function, default: void 0 },
valueFormat: { default: void 0 }
}, {
value: {},
valueModifiers: {}
}),
emits: /* @__PURE__ */ K(["change", "panelChange", "select"], ["update:value"]),
setup(d, { emit: I }) {
const o = d, u = ke(d, "value"), L = f(Date.now()), H = f([]), ee = f(re()), te = f([
{
label: "月",
value: "month"
},
{
label: "年",
value: "year"
}
]), v = f(T(L.value)), b = f(C(L.value) + 1), h = f(o.mode), $ = f([]), q = f([]), { colorPalettes: Y } = _e("Calendar"), k = I, ae = ze(["header"]), le = j(() => {
const e = ["一", "二", "三", "四", "五", "六", "日"], t = [];
t.push(e[o.startDayOfWeek]);
let l = (o.startDayOfWeek + 1) % 7;
for (; l !== o.startDayOfWeek; )
t.push(e[l]), l = (l + 1) % 7;
return t;
}), m = j(() => {
if (u.value)
return typeof u.value == "string" ? Ce(u.value, o.valueFormat, /* @__PURE__ */ new Date()).getTime() : u.value;
}), A = j(() => new Date(v.value, b.value - 1, 1).getTime()), ne = j(() => ae.header || o.header);
F(
m,
(e) => {
e && (v.value = T(e), b.value = C(e) + 1);
},
{
immediate: !0
}
), F(
() => o.mode,
(e) => {
h.value = e;
}
), F(
() => [o.startDayOfWeek, o.dateStrip, b.value, v.value],
() => {
$.value = ue();
},
{
immediate: !0,
deep: !0
}
), F(
v,
() => {
H.value = oe(), q.value = ce();
},
{
immediate: !0
}
), F(
() => o.valueFormat,
(e) => {
u.value && (e === void 0 || e === "T" ? typeof u.value == "string" && (u.value = Number(O(N(u.value).getTime(), "T"))) : u.value = O(N(u.value).getTime(), e));
},
{
immediate: !0
}
);
function oe() {
const e = [], t = v.value - 10, l = v.value + 10;
for (let n = t; n < l; n++)
e.push({
label: `${n}年`,
value: n
});
return e;
}
function re() {
const e = [];
for (let t = 1; t <= 12; t++)
e.push({
label: `${t}月`,
value: t
});
return e;
}
function B(e, t, l) {
return {
type: "date",
dateObject: {
date: $e(e),
month: C(e),
year: T(e)
},
timestamp: y(e),
inCurrentMonth: Z(e, t),
isCurrentDate: Ve(l, e)
};
}
function se(e, t, l, n = !1) {
const a = C(e);
let c = y(U(e)), M = y(W(c, -1));
const g = [];
let J = !n;
for (; Oe(M) !== l || J; )
g.unshift(B(M, e, t)), M = y(W(M, -1)), J = !1;
for (; C(c) === a; )
g.push(B(c, e, t)), c = y(W(c, 1));
const De = n ? g.length <= 28 ? 28 : g.length <= 35 ? 35 : 42 : 42;
for (; g.length < De; )
g.push(B(c, e, t)), c = y(W(c, 1));
return g;
}
function ue() {
const e = se(A.value, Date.now(), o.startDayOfWeek, o.dateStrip), t = 7, l = e.length / t, n = [];
for (let a = 0; a < l; a++)
n.push(e.slice(a * t, (a + 1) * t));
return n;
}
function ie(e, t) {
return {
type: "month",
monthObject: {
month: C(e),
year: T(e)
},
timestamp: y(e),
isCurrent: Z(t, e)
};
}
function de(e, t) {
const l = [], n = Fe(e);
for (let a = 0; a < 12; a++)
l.push(ie(y(Se(n, a)), t));
return l;
}
function ce() {
const e = de(A.value, Date.now()), t = 3, l = e.length / t, n = [];
for (let a = 0; a < l; a++)
n.push(e.slice(a * t, (a + 1) * t));
return n;
}
function me(e) {
return O(e.timestamp, "yyyy-MM-dd");
}
function ve(e) {
return O(e.timestamp, "yyyy-MM");
}
function he(e, t) {
return o.dateFormat === void 0 ? `${e}` : o.dateFormat(e, t);
}
function fe(e, t, l) {
return o.weekFormat === void 0 ? e : o.weekFormat(e, t, l);
}
function pe(e, t) {
return o.monthFormat === void 0 ? `${e}月` : o.monthFormat(e, t);
}
function G(e) {
return o.valueFormat === void 0 || o.valueFormat === "T" ? Number(O(e, "T")) : O(e, o.valueFormat);
}
function ye(e) {
let t;
m.value ? N(new Date(m.value)).getTime() !== e.timestamp && (t = X(new Date(m.value), {
year: e.dateObject.year,
month: e.dateObject.month,
date: e.dateObject.date
}).getTime()) : t = e.timestamp, t && (t = G(t), u.value = t, k("select", t, "date"), k("change", t, e.dateObject));
}
function ge(e) {
let t;
m.value ? U(new Date(m.value)).getTime() !== e.timestamp && (t = X(new Date(m.value), {
year: e.monthObject.year,
month: e.monthObject.month
}).getTime()) : t = e.timestamp, t && (t = G(t), u.value = t, k("select", t, "month"), k("change", t, e.monthObject));
}
function E() {
h.value === "month" ? k(
"panelChange",
u.value,
{ year: v.value, month: b.value },
h.value
) : k("panelChange", u.value, { year: v.value }, h.value);
}
return (e, t) => (s(), i("div", {
class: R(["calendar-wrap", `calendar-${d.display}`]),
style: Me(`
--calendar-primary-color: ${p(Y)[5]};
--calendar-panel-primary-bg-color: ${p(Y)[0]};
--calendar-card-primary-bg-color: ${p(Y)[5]};
`)
}, [
r("div", Pe, [
ne.value ? (s(), i("div", Te, [
w(e.$slots, "header", {}, () => [
z(P(d.header), 1)
], !0)
])) : _("", !0),
r("div", Ne, [
Q(p(x), D({
class: "calendar-year-select",
size: d.display === "card" ? "small" : "middle",
options: H.value,
"max-display": 8,
modelValue: v.value,
"onUpdate:modelValue": t[0] || (t[0] = (l) => v.value = l),
onChange: E
}, d.yearSelectProps), null, 16, ["size", "options", "modelValue"]),
h.value === "month" ? (s(), we(p(x), D({
key: 0,
class: "calendar-month-select",
size: d.display === "card" ? "small" : "middle",
options: ee.value,
"max-display": 8,
modelValue: b.value,
"onUpdate:modelValue": t[1] || (t[1] = (l) => b.value = l),
onChange: E
}, d.monthSelectProps), null, 16, ["size", "options", "modelValue"])) : _("", !0),
Q(p(je), D({
class: "calendar-mode-radio",
"button-size": d.display === "card" ? "small" : "middle",
options: te.value,
value: h.value,
"onUpdate:value": t[2] || (t[2] = (l) => h.value = l),
button: "",
onChange: E
}, d.modeRadioProps), null, 16, ["button-size", "options", "value"])
])
]),
r("div", We, [
h.value === "month" ? (s(), i("div", Ye, [
r("div", Be, [
r("table", Ee, [
r("thead", null, [
r("tr", null, [
(s(!0), i(S, null, V(le.value, (l, n) => (s(), i("th", { key: n }, [
w(e.$slots, "week", {
defaultWeek: l,
week: n,
timestamp: $.value[0][n].timestamp
}, () => [
z(P(fe(l, n, $.value[0][n].timestamp)), 1)
], !0)
]))), 128))
])
]),
r("tbody", null, [
(s(!0), i(S, null, V($.value, (l, n) => (s(), i("tr", { key: n }, [
(s(!0), i(S, null, V(l, (a, c) => (s(), i("td", {
class: R(["calendar-date-cell", {
"date-cell-disabled": d.disabledDate && d.disabledDate(a.timestamp),
"date-cell-in-view": a.inCurrentMonth,
"date-cell-today": a.isCurrentDate,
"date-cell-selected": m.value && p(N)(m.value).getTime() === a.timestamp
}]),
key: c,
title: me(a),
onClick: (M) => ye(a)
}, [
r("div", Ue, [
r("div", Le, [
w(e.$slots, "dateValue", D({ ref_for: !0 }, a), () => [
z(P(he(a.dateObject.date, a.timestamp)), 1)
], !0)
]),
r("div", He, [
w(e.$slots, "dateContent", D({ ref_for: !0 }, a), void 0, !0)
])
])
], 10, Re))), 128))
]))), 128))
])
])
])
])) : _("", !0),
h.value === "year" ? (s(), i("div", qe, [
r("div", Ae, [
r("table", Ge, [
r("tbody", null, [
(s(!0), i(S, null, V(q.value, (l, n) => (s(), i("tr", { key: n }, [
(s(!0), i(S, null, V(l, (a, c) => (s(), i("td", {
class: R(["calendar-date-cell date-cell-in-view", {
"date-cell-today": a.isCurrent,
"date-cell-selected": m.value && p(U)(m.value).getTime() === a.timestamp
}]),
key: c,
title: ve(a),
onClick: (M) => ge(a)
}, [
r("div", Ke, [
r("div", Qe, [
w(e.$slots, "monthValue", D({ ref_for: !0 }, a), () => [
z(P(pe(a.monthObject.month + 1, a.timestamp)), 1)
], !0)
]),
r("div", Xe, [
w(e.$slots, "monthContent", D({ ref_for: !0 }, a), void 0, !0)
])
])
], 10, Je))), 128))
]))), 128))
])
])
])
])) : _("", !0)
])
], 6));
}
});
export {
at as default
};