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