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