comic-plus/es/components/schedule/src/calendar.vue.mjs

<p align="center"> <img width="200px" src="./logo.png"/> </p>

import { defineComponent, inject, ref, computed, watch, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref, withCtx, Fragment, renderList, normalizeClass, createCommentVNode, createTextVNode, renderSlot, warn } from "vue";
import { SCHEDULE_PROVIDE } from "./type.mjs";
import "../../../index2.mjs";
import "../../../icons/index.mjs";
import { CuButtonGroup } from "../../button-group/index.mjs";
import { CuButton } from "../../button/index.mjs";
import "../../link/index.mjs";
import "../../container/index.mjs";
import "../../form/index.mjs";
import "../../form-item/index.mjs";
import "../../checkbox/index.mjs";
import "../../checkbox-group/index.mjs";
import "../../radio/index.mjs";
import "../../radio-button/index.mjs";
import "../../radio-group/index.mjs";
import "../../input/index.mjs";
import "../../input-number/index.mjs";
import "../../textarea/index.mjs";
import "../../switch/index.mjs";
import "../../slider/index.mjs";
import "../../select/index.mjs";
import "../../option/index.mjs";
import "../../option-group/index.mjs";
import "../../cascader/index.mjs";
import "../../time-picker/index.mjs";
import "../../date-picker/index.mjs";
import "../../color-picker/index.mjs";
import "../../upload/index.mjs";
import "../../tag/index.mjs";
import "../../tag-complex/index.mjs";
import "../../collapse/index.mjs";
import "../../collapse-item/index.mjs";
import "../../waterfall/index.mjs";
import "../../waterfall-item/index.mjs";
import "../../image/index.mjs";
import "../../badge/index.mjs";
import "../../carousel/index.mjs";
import "../../carousel-item/index.mjs";
import "../../progress/index.mjs";
import "../../card/index.mjs";
import "../../card-group/index.mjs";
import "../../empty/index.mjs";
import "../../ellipsis/index.mjs";
import "../../countdown/index.mjs";
import "../../pagination/index.mjs";
import "../../menu/index.mjs";
import "../../menu-item/index.mjs";
import "../../sub-menu/index.mjs";
import "../../tabs/index.mjs";
import "../../tab-pane/index.mjs";
import "../../elevator/index.mjs";
import "../../elevator-item/index.mjs";
import "../../backtop/index.mjs";
import "../../breadcrumb/index.mjs";
import "../../breadcrumb-item/index.mjs";
import "../../dialog/index.mjs";
import "../../drawer/index.mjs";
import "../../transition-collapse/index.mjs";
import "../../divider/index.mjs";
import "../../step/index.mjs";
import "../../step-item/index.mjs";
import "../../step-card/index.mjs";
import "../../scrollbar/index.mjs";
import "../../avatar/index.mjs";
import "../../avatar-group/index.mjs";
import "../../dropdown/index.mjs";
import "../../dropdown-menu/index.mjs";
import "../../dropdown-item/index.mjs";
import "../../tree/index.mjs";
import "../../atlas/index.mjs";
import "../../tip/index.mjs";
import "../../anchor/index.mjs";
import "../../anchor-link/index.mjs";
import "../../affix/index.mjs";
import "../../pistol/index.mjs";
import "../../bullet/index.mjs";
import "../../zone/index.mjs";
import "../../list/index.mjs";
import "../../list-item/index.mjs";
import "../../skeleton/index.mjs";
import "../../skeleton-item/index.mjs";
import "../../rate/index.mjs";
import "../../space/index.mjs";
import "../../clock/index.mjs";
import "../../web-footer/index.mjs";
import "../../timeline/index.mjs";
import "../../timeline-item/index.mjs";
import "../../calendar/index.mjs";
import "../index.mjs";
import "../../popover/index.mjs";
import "../../table/index.mjs";
import "../../table-column/index.mjs";
import "../../contextmenu/index.mjs";
import "../../watermark/index.mjs";
import { Left, Right } from "../../../icons/components/components.mjs";
const _hoisted_1 = { class: "cu-schedule-calendar" };
const _hoisted_2 = { class: "cu-schedule-calendar__header" };
const _hoisted_3 = {
  class: "cu-schedule-calendar__table",
  cellspacing: "5",
  cellpadding: "5"
};
const _hoisted_4 = { class: "cu-schedule-calendar__thead" };
const _hoisted_5 = { class: "cu-schedule-calendar__tr" };
const _hoisted_6 = { class: "cu-schedule-calendar__th" };
const _hoisted_7 = { class: "cu-schedule-calendar__tbody" };
const _hoisted_8 = { class: "cu-schedule-calendar__tr" };
const _hoisted_9 = ["onClick"];
const _hoisted_10 = { class: "cu-schedule-calendar__cell" };
const _hoisted_11 = {
  key: 0,
  class: "dot"
};
const _hoisted_12 = {
  key: 0,
  class: "cu-schedule-calendar__extra"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "CuCalendar"
  },
  __name: "calendar",
  setup(__props, { expose: __expose }) {
    const { date, props } = inject(SCHEDULE_PROVIDE);
    const weeks = ref([0, 1, 2, 3, 4, 5, 6]);
    const ty = ref();
    const tm = ref();
    const dn = ref((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
    const weekForLang = { 0: "日", 1: "一", 2: "二", 3: "三", 4: "四", 5: "五", 6: "六" };
    function setValue() {
      let time = new Date(dn.value);
      ty.value = time.getFullYear();
      tm.value = time.getMonth();
    }
    setValue();
    const hasScheduleDays = computed(() => {
      var _a;
      if (!props.hasScheduleDays) return [];
      return (_a = props.hasScheduleDays) == null ? void 0 : _a.map((v) => {
        return new Date(v).setHours(0, 0, 0, 0);
      });
    });
    const dates = computed(() => {
      let tml = new Date(ty.value, tm.value + 1, 0).getDate();
      let dl = Array.from({ length: tml }, (val, index) => {
        return {
          isCurMonth: true,
          value: index + 1
        };
      });
      let fd = new Date(ty.value, tm.value, 1).getDay();
      let ld = new Date(ty.value, tm.value, 0).getDate();
      let len, i;
      for (i = ld; i > ld - fd; --i) {
        dl.unshift({
          isPrevMonth: true,
          value: i
        });
      }
      for (i = 0, len = dl.length; i + len < 42; ++i) {
        dl.push({
          isNextMonth: true,
          value: i + 1
        });
      }
      let result = [];
      for (var x = 0; x < Math.ceil(dl.length / 7); x++) {
        var start = x * 7;
        var end = start + 7;
        result.push(dl.slice(start, end));
      }
      if (result[0].every((v) => v.isPrevMonth)) {
        result.shift();
      }
      if (result[result.length - 1].every((v) => v.isNextMonth)) {
        result.pop();
      }
      return result;
    });
    function prevMonth() {
      if (props.loading) return;
      tm.value === 0 ? (--ty.value, tm.value = 11) : --tm.value;
      dn.value = new Date(ty.value, tm.value, 1).getTime();
    }
    function nextMonth() {
      if (props.loading) return;
      tm.value === 11 ? (++ty.value, tm.value = 0) : ++tm.value;
      dn.value = new Date(ty.value, tm.value, 1).getTime();
    }
    function prevYear() {
      ty.value--;
      dn.value = new Date(ty.value, tm.value, 1).getTime();
    }
    function nextYear() {
      ty.value++;
      dn.value = new Date(ty.value, tm.value, 1).getTime();
    }
    function today() {
      dn.value = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
      setValue();
    }
    function isSelect(item) {
      let time = getTime(item);
      let f = new Date(dn.value).setHours(0, 0, 0, 0);
      return time === f;
    }
    function hasSchedule(item) {
      return hasScheduleDays.value.includes(getTime(item));
    }
    function getTime(item) {
      let mon = tm.value;
      item.isPrevMonth && mon--;
      item.isNextMonth && mon++;
      return new Date(ty.value, mon, item.value).setHours(0, 0, 0, 0);
    }
    function selectDay(item) {
      if (props.loading) return;
      item.isPrevMonth ? tm.value === 0 ? (--ty.value, tm.value = 11) : --tm.value : item.isNextMonth ? tm.value === 11 ? (++ty.value, tm.value = 0) : ++tm.value : (ty.value, tm.value);
      dn.value = new Date(ty.value, tm.value, item.value).setHours(0, 0, 0, 0);
    }
    const dateTypeFn = {
      "prev-year": prevYear,
      "prev-month": prevMonth,
      today,
      "next-month": nextMonth,
      "next-year": nextYear
    };
    function selectDate(value) {
      var _a;
      if (props.loading) return;
      if (value instanceof Date) {
        dn.value = new Date(value).setHours(0, 0, 0, 0);
        setValue();
      } else if (value in dateTypeFn) {
        (_a = dateTypeFn[value]) == null ? void 0 : _a.call(dateTypeFn);
      } else {
        warn("SelectDate can only pass in parameters in Date or specified string format");
        return;
      }
    }
    watch(dn, (val) => {
      date.value = new Date(val);
    });
    __expose({
      selectDate
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("span", null, toDisplayString(ty.value + "年 " + (tm.value + 1) + "月"), 1),
          createVNode(unref(CuButtonGroup), { size: "small" }, {
            default: withCtx(() => [
              createVNode(unref(CuButton), {
                color: "#acadad",
                light: "",
                icon: unref(Left),
                onClick: prevMonth
              }, null, 8, ["icon"]),
              createVNode(unref(CuButton), {
                color: "#acadad",
                light: "",
                icon: unref(Right),
                onClick: nextMonth
              }, null, 8, ["icon"])
            ]),
            _: 1
          })
        ]),
        createElementVNode("table", _hoisted_3, [
          createElementVNode("thead", _hoisted_4, [
            createElementVNode("tr", _hoisted_5, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week) => {
                return openBlock(), createElementBlock("th", _hoisted_6, toDisplayString(weekForLang[week]), 1);
              }), 256))
            ])
          ]),
          createElementVNode("tbody", _hoisted_7, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(dates.value, (week) => {
              return openBlock(), createElementBlock("tr", _hoisted_8, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
                  return openBlock(), createElementBlock("td", {
                    class: normalizeClass(["cu-schedule-calendar__td", { "is-prev": day.isPrevMonth, "is-next": day.isNextMonth, "is-today": isSelect(day) }]),
                    onClick: ($event) => selectDay(day)
                  }, [
                    createElementVNode("div", _hoisted_10, [
                      hasSchedule(day) ? (openBlock(), createElementBlock("div", _hoisted_11)) : createCommentVNode("", true),
                      createTextVNode(" " + toDisplayString(day.value), 1)
                    ])
                  ], 10, _hoisted_9);
                }), 256))
              ]);
            }), 256))
          ])
        ]),
        _ctx.$slots.calendar ? (openBlock(), createElementBlock("div", _hoisted_12, [
          renderSlot(_ctx.$slots, "calendar")
        ])) : createCommentVNode("", true)
      ]);
    };
  }
});
export {
  _sfc_main as default
};