mealcomes/dist/es/calendar-BkP1MBrq.mjs

MealComes 用于学习前端的组件库

import { c as A, w as W } from "./utils-aznwSRCL.mjs";
import { defineComponent as B, computed as y, createElementBlock as D, openBlock as b, normalizeClass as u, unref as o, createElementVNode as v, Fragment as j, renderList as P, toDisplayString as E, renderSlot as N, ref as F, createVNode as h, withCtx as g, createTextVNode as $, createSlots as I, normalizeProps as L, guardReactiveProps as q } from "vue";
import { M as C } from "./button-DLbtVcMl.mjs";
import { i as K, d as S, l as R } from "./vendor-A6FqSOUk.mjs";
const G = {
  modelValue: {
    type: Date
  },
  /**
   * 是否为缩小版
   */
  mini: {
    type: Boolean,
    default: !1
  }
}, H = {
  "update:modelValue": (r) => r instanceof Date
}, J = (r, m) => {
  const p = r.subtract(1, "month").endOf("month").date();
  return Array.from({ length: m }).map(
    (l, d) => p - (m - d - 1)
  );
}, Q = (r) => {
  const m = r.daysInMonth();
  return Array.from({ length: m }).map((p, l) => l + 1);
}, U = (r) => Array.from({ length: r.length / 7 }).map((m, p) => {
  const l = p * 7;
  return r.slice(l, l + 7);
}), X = {
  /**
   * 当前选中的天
   */
  selectedDay: {
    type: Object
  },
  /**
   * 当前的日期
   */
  date: {
    type: Object,
    required: !0
  }
}, Z = {
  /**
   * 当选中了某个日期的时候触发
   */
  pick: (r) => K(r)
}, re = ["", "default", "small", "large"], de = {
  large: 40,
  default: 32,
  small: 24
}, Y = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六"
], ee = ["onClick"], te = /* @__PURE__ */ B({
  name: "date-table",
  __name: "date-table",
  props: X,
  emits: Z,
  setup(r, { emit: m }) {
    const p = A("calendar-table"), l = A("calendar-day"), d = r, O = m, w = S();
    S.extend(R);
    const k = S.localeData().firstDayOfWeek(), i = y(() => {
      const t = k;
      return t === 0 ? Y.map((n) => n.slice(2)) : Y.slice(t).concat(Y.slice(0, t)).map((n) => n.slice(2));
    }), z = y(() => {
      let t = [];
      const n = d.date.startOf("month").day(), a = J(
        d.date,
        (n - k + 7) % 7
      ).map((x) => ({
        text: x,
        type: "prev"
      })), s = Q(d.date).map(
        (x) => ({
          text: x,
          type: "current"
        })
      );
      t = [...a, ...s];
      const e = 42 - t.length, c = Array.from({
        length: e
      }).map((x, T) => ({
        text: T + 1,
        type: "next"
      }));
      return t = t.concat(c), U(t);
    }), f = (t, n) => {
      switch (n) {
        case "prev":
          return d.date.startOf("month").subtract(1, "month").date(t);
        case "next":
          return d.date.startOf("month").add(1, "month").date(t);
        case "current":
          return d.date.date(t);
      }
    }, M = ({ text: t, type: n }) => {
      const a = f(t, n);
      return {
        isSelected: a.isSame(d.selectedDay),
        type: `${n}-month`,
        day: a.format("YYYY-MM-DD"),
        date: a.toDate()
      };
    }, V = ({ text: t, type: n }) => {
      const a = [n];
      if (n === "current") {
        const s = f(t, n);
        s.isSame(d.selectedDay, "day") && a.push(l.is("selected", !0)), s.isSame(w, "day") && a.push(l.is("today", !0));
      }
      return a;
    }, _ = ({ text: t, type: n }) => {
      const a = f(t, n);
      O("pick", a);
    };
    return (t, n) => (b(), D("table", {
      class: u([o(p).b()]),
      cellspacing: "0",
      cellpadding: "0"
    }, [
      v("thead", null, [
        v("tr", null, [
          (b(!0), D(j, null, P(i.value, (a) => (b(), D("th", {
            key: a,
            scope: "col"
          }, E(a), 1))), 128))
        ])
      ]),
      v("tbody", null, [
        (b(!0), D(j, null, P(z.value, (a, s) => (b(), D("tr", {
          key: s,
          class: u({
            [o(p).e("row")]: !0
          })
        }, [
          (b(!0), D(j, null, P(a, (e, c) => (b(), D("td", {
            key: c,
            class: u(V(e)),
            onClick: (x) => _(e)
          }, [
            v("div", {
              class: u(o(l).b())
            }, [
              N(t.$slots, "date-cell", {
                data: M(e)
              }, () => [
                v("span", null, E(e.text), 1)
              ])
            ], 2)
          ], 10, ee))), 128))
        ], 2))), 128))
      ])
    ], 2));
  }
}), ae = /* @__PURE__ */ B({
  name: "mc-calendar",
  __name: "calendar",
  props: G,
  emits: H,
  setup(r, { expose: m, emit: p }) {
    const l = A("calendar"), d = r, O = p, w = S(), k = F(), i = y(() => d.modelValue ? S(d.modelValue) : f.value || w), z = y(
      () => `${i.value.year()} - ${i.value.format("M")}`
    ), f = y({
      get() {
        return d.modelValue ? i.value : k.value;
      },
      set(s) {
        if (!s) return;
        k.value = s;
        const e = s.toDate();
        O("update:modelValue", e);
      }
    }), M = (s) => {
      f.value = s;
    }, V = y(() => i.value.subtract(1, "month").date(1)), _ = y(() => i.value.add(1, "month").date(1)), t = y(() => i.value.subtract(1, "year").date(1)), n = y(() => i.value.add(1, "year").date(1)), a = (s) => {
      const c = {
        "prev-month": V.value,
        "next-month": _.value,
        "prev-year": t.value,
        "next-year": n.value,
        today: w
      }[s];
      c.isSame(i.value, "day") || M(c);
    };
    return m({
      /** 当前选中的日期 */
      selectedDay: f,
      /** 选择指定的某一天 */
      pickDay: M,
      /** 选择日期 */
      selectDate: a
    }), (s, e) => (b(), D("div", {
      class: u([o(l).b(), o(l).is("mini", s.mini)])
    }, [
      v("div", {
        class: u(o(l).e("header"))
      }, [
        N(s.$slots, "header", { date: z.value }, () => [
          v("div", {
            class: u(o(l).e("title"))
          }, E(z.value), 3),
          v("div", {
            class: u(o(l).e("button-group"))
          }, [
            h(o(C), {
              size: "small",
              onClick: e[0] || (e[0] = (c) => a("prev-year"))
            }, {
              default: g(() => e[5] || (e[5] = [
                $("前一年", -1)
              ])),
              _: 1,
              __: [5]
            }),
            h(o(C), {
              size: "small",
              onClick: e[1] || (e[1] = (c) => a("prev-month"))
            }, {
              default: g(() => e[6] || (e[6] = [
                $("上个月", -1)
              ])),
              _: 1,
              __: [6]
            }),
            h(o(C), {
              size: "small",
              onClick: e[2] || (e[2] = (c) => a("today"))
            }, {
              default: g(() => e[7] || (e[7] = [
                $("今天", -1)
              ])),
              _: 1,
              __: [7]
            }),
            h(o(C), {
              size: "small",
              onClick: e[3] || (e[3] = (c) => a("next-month"))
            }, {
              default: g(() => e[8] || (e[8] = [
                $("下个月", -1)
              ])),
              _: 1,
              __: [8]
            }),
            h(o(C), {
              size: "small",
              onClick: e[4] || (e[4] = (c) => a("next-year"))
            }, {
              default: g(() => e[9] || (e[9] = [
                $("后一年", -1)
              ])),
              _: 1,
              __: [9]
            })
          ], 2)
        ])
      ], 2),
      v("div", {
        class: u(o(l).e("body"))
      }, [
        h(te, {
          class: u([o(l).is("mini", s.mini)]),
          date: i.value,
          "selected-day": f.value,
          onPick: M
        }, I({ _: 2 }, [
          s.$slots["date-cell"] ? {
            name: "date-cell",
            fn: g((c) => [
              N(s.$slots, "date-cell", L(q(c)))
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["class", "date", "selected-day"])
      ], 2)
    ], 2));
  }
}), ce = W(ae);
export {
  ce as M,
  Y as W,
  H as a,
  re as b,
  G as c,
  de as d
};
//# sourceMappingURL=calendar-BkP1MBrq.mjs.map