t-fighting-design/es/calendar/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as F, ref as v, computed as M, watch as Y, openBlock as o, createElementBlock as r, normalizeClass as z, normalizeStyle as j, unref as c, createElementVNode as s, toDisplayString as u, renderSlot as y, createVNode as g, withCtx as _, createCommentVNode as k, Fragment as C, renderList as w, createBlock as I, createTextVNode as m } from "vue";
import { Props as K } from "./index3.js";
import { FButton as D } from "../../button/index.js";
import { FText as O } from "../../text/index.js";
import { addZero as A, sizeChange as x } from "../../_utils/index3.js";
import { WEEK_DATA as P } from "../../_utils/index10.js";
import { useCalculiTime as W } from "../../_hooks/use-calculi-time/index.js";
import "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const Z = {
  key: 0,
  class: "f-calendar__header"
}, q = { class: "f-calendar__time" }, G = { class: "f-calendar__time-now" }, J = { class: "f-calendar__option" }, Q = /* @__PURE__ */ m("\u4E0A\u4E2A\u6708"), R = /* @__PURE__ */ m("\u4ECA\u5929"), U = /* @__PURE__ */ m("\u4E0B\u4E2A\u6708"), X = { class: "f-calendar__week" }, ee = { class: "f-calendar__day" }, te = ["onClick"], ae = { class: "f-calendar__solar" }, ne = {
  key: 0,
  class: "f-calendar__lunar"
}, oe = {
  key: 1,
  class: "f-calendar__memorandum"
}, le = F({
  name: "FCalendar"
}), he = /* @__PURE__ */ F({
  ...le,
  props: K,
  setup(b) {
    const n = b, i = v(n.date.getFullYear()), l = v(n.date.getMonth()), d = v(n.date.getDate()), { AllMonthDays: B, changeLastMonth: E, changeNextMonth: $ } = W(
      i,
      l
    ), N = (e, a) => a === d.value && e === l.value + 1 ? "f-calendar__day-today" : e !== l.value + 1 ? "f-calendar__not-month" : "", f = (e) => {
      ({
        last: () => E(),
        next: () => $(),
        now: () => {
          l.value = n.date.getMonth(), i.value = n.date.getFullYear(), d.value = n.date.getDate();
        }
      })[e]();
    }, S = M(() => `${i.value}\u5E74 ${A(l.value + 1)}\u6708 ${A(
      d.value
    )}\u65E5`), T = (e, a) => {
      d.value = a, e < l.value + 1 ? E() : e > l.value + 1 && $(), n.changeDate && n.changeDate({
        year: i.value,
        month: e || l.value,
        date: a
      });
    }, L = M(() => {
      const { borderColor: e, dayCellHeight: a, weekCellHeight: t } = n;
      return {
        "--f-calendar-border-color": e,
        "--f-calendar-day-height": x(a),
        "--f-calendar-week-height": x(t)
      };
    }), V = (e) => n.memorandum ? Object.keys(n.memorandum).includes(e) : !1;
    return Y(
      () => l.value,
      (e) => {
        n.changeSwitch && n.changeSwitch({
          year: i.value,
          month: e + 1,
          date: d.value
        });
      }
    ), (e, a) => (o(), r("div", {
      class: z(["f-calendar", { "f-calendar__border": e.border }]),
      style: j(c(L))
    }, [
      e.showHeader ? (o(), r("header", Z, [
        s("div", q, [
          s("span", G, u(c(S)), 1)
        ]),
        s("div", J, [
          s("div", {
            class: "f-calendar__last",
            onClick: a[0] || (a[0] = (t) => f("last"))
          }, [
            y(e.$slots, "last-change", {}, () => [
              g(c(D), {
                text: "",
                size: "mini",
                type: "primary"
              }, {
                default: _(() => [
                  Q
                ]),
                _: 1
              })
            ])
          ]),
          s("div", {
            class: "f-calendar__now",
            onClick: a[1] || (a[1] = (t) => f("now"))
          }, [
            y(e.$slots, "now-change", {}, () => [
              g(c(D), {
                text: "",
                size: "mini",
                type: "primary"
              }, {
                default: _(() => [
                  R
                ]),
                _: 1
              })
            ])
          ]),
          s("div", {
            class: "f-calendar__next",
            onClick: a[2] || (a[2] = (t) => f("next"))
          }, [
            y(e.$slots, "next-change", {}, () => [
              g(c(D), {
                text: "",
                size: "mini",
                type: "primary"
              }, {
                default: _(() => [
                  U
                ]),
                _: 1
              })
            ])
          ])
        ])
      ])) : k("", !0),
      s("ul", X, [
        (o(!0), r(C, null, w(c(P), (t, h) => (o(), r("li", {
          key: h,
          class: "f-calendar__week-li"
        }, u(t), 1))), 128))
      ]),
      s("ul", ee, [
        (o(!0), r(C, null, w(c(B), (t, h) => (o(), r("li", {
          key: h,
          class: z([
            "f-calendar__day-li",
            N(t.cMonth, t.cDay)
          ]),
          onClick: (p) => T(t.cMonth, t.cDay)
        }, [
          s("span", ae, u(t.cDay), 1),
          e.lunar ? (o(), r("span", ne, u(t.festival || t.IDayCn), 1)) : k("", !0),
          V(t.date) ? (o(), r("div", oe, [
            (o(!0), r(C, null, w(e.memorandum[t.date], (p, H) => (o(), I(c(O), {
              key: H,
              type: p.type || "default",
              size: 14,
              center: "",
              class: "f-calendar__memorandum-item"
            }, {
              default: _(() => [
                m(u(p.content), 1)
              ]),
              _: 2
            }, 1032, ["type"]))), 128))
          ])) : k("", !0)
        ], 10, te))), 128))
      ])
    ], 6));
  }
});
export {
  he as default
};