cione-comp-lib/es/packages/co-time-calendar/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, onMounted, onUnmounted, toRefs, nextTick, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode } from "vue";
import "./index.vue_vue_type_style_index_0_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoTimeCalendar",
  props: {
    src: {
      type: String
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    type: {
      type: String,
      default: "multicolour"
    },
    dataType: {
      type: String,
      default: "zhCN"
    },
    fontFamily: String,
    headerColor: String,
    headerSize: Number,
    headerLetter: Number,
    contentColor: String,
    contentSize: Number,
    headerBgColor: String,
    bgColor: String
  },
  setup(props) {
    const mouthData = ref([
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]);
    const weekData = ref(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]);
    const multicolourShow = ref(true);
    const multicolourTimer = ref();
    const curDate = ref();
    const calendarDom = ref();
    const calendarHDom = ref();
    const monthYear = ref();
    const monthsDom = ref();
    const prevMonth = ref();
    const nextMonth = ref();
    const monthA = ref();
    const monthB = ref();
    const timeId = ref();
    const getTime = () => {
      const charset = `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`;
      const maxLen = charset.length;
      let ret = "";
      for (let i = 0; i < 6; i++) {
        const randomIndex = Math.floor(Math.random() * maxLen);
        ret += charset[randomIndex];
      }
      timeId.value = ret;
    };
    getTime();
    const dataTypeFn = () => {
      if (props.dataType === "zhCN") {
        mouthData.value = [
          "\u4E00\u6708",
          "\u4E8C\u6708",
          "\u4E09\u6708",
          "\u56DB\u6708",
          "\u4E94\u6708",
          "\u516D\u6708",
          "\u4E03\u6708",
          "\u516B\u6708",
          "\u4E5D\u6708",
          "\u5341\u6708",
          "\u5341\u4E00\u6708",
          "\u5341\u4E8C\u6708"
        ];
        weekData.value = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
      } else if (props.dataType === "en") {
        mouthData.value = [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ];
        weekData.value = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      } else if (props.dataType === "zhTW") {
        mouthData.value = [
          "\u58F9\u6708",
          "\u8CB3\u6708",
          "\u53C1\u6708",
          "\u8086\u6708",
          "\u4F0D\u6708",
          "\u9646\u6708",
          "\u67D2\u6708",
          "\u634C\u6708",
          "\u7396\u6708",
          "\u62FE\u6708",
          "\u62FE\u58F9\u6708",
          "\u62FE\u8D30\u6708"
        ];
        weekData.value = ["\u65E5", "\u58F9", "\u8CB3", "\u53C1", "\u8086", "\u4F0D", "\u9646"];
      }
    };
    function Calendar(t) {
      this.headerDom = t.headerDom;
      var _this = this;
      _this.divId = t.RenderID ? t.RenderID : "", _this.DaysOfWeek = t.DaysOfWeek ? t.DaysOfWeek : weekData.value, _this.Months = t.Months ? t.Months : mouthData.value;
      var e = new Date();
      _this.CurrentMonth = e.getMonth(), _this.CurrentYear = e.getFullYear();
      var r = t.Format;
      _this.f = "string" == typeof r ? r.charAt(0).toUpperCase() : "M";
      _this.enMonths = [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ];
    }
    Calendar.prototype.nextMonth = function() {
      11 == this.CurrentMonth ? (this.CurrentMonth = 0, this.CurrentYear = this.CurrentYear + 1) : this.CurrentMonth = this.CurrentMonth + 1, this.divId = '[data-active="false"] .render', this.showCurrent();
    };
    Calendar.prototype.prevMonth = function() {
      0 == this.CurrentMonth ? (this.CurrentMonth = 11, this.CurrentYear = this.CurrentYear - 1) : this.CurrentMonth = this.CurrentMonth - 1, this.divId = '[data-active="false"] .render', this.showCurrent();
    };
    Calendar.prototype.previousYear = function() {
      this.CurrentYear = this.CurrentYear - 1, this.showCurrent();
    };
    Calendar.prototype.nextYear = function() {
      this.CurrentYear = this.CurrentYear + 1, this.showCurrent();
    };
    Calendar.prototype.showCurrent = function() {
      this.Calendar(this.CurrentYear, this.CurrentMonth);
    };
    Calendar.prototype.checkActive = function() {
      let _this = this;
      1 == monthsDom.value.getAttribute("class").includes("active") ? monthsDom.value.setAttribute("class", "months") : monthsDom.value.setAttribute("class", "months active"), "true" == monthA.value.getAttribute("data-active") ? (monthA.value.setAttribute("data-active", false), monthB.value.setAttribute("data-active", true)) : (monthA.value.setAttribute("data-active", true), monthB.value.setAttribute("data-active", false)), setTimeout(function() {
        _this.headerDom.setAttribute("class", "calendar-header active");
      }, 200), calendarDom.value.setAttribute(
        "data-theme",
        this.enMonths[document.querySelector(`.calendar${timeId.value} [data-active="true"] .render`).getAttribute("data-month")].toLowerCase()
      );
    };
    Calendar.prototype.Calendar = function(t, e) {
      var _a, _b;
      "number" == typeof t && (this.CurrentYear = t), "number" == typeof t && (this.CurrentMonth = e);
      var dm;
      var r = new Date().getDate(), n = new Date().getMonth(), a = new Date().getFullYear(), o = new Date(t, e, 1).getDay(), i = new Date(t, e + 1, 0).getDate(), u = 0 == e ? new Date(t - 1, 11, 0).getDate() : new Date(t, e, 0).getDate(), s = "<span>" + this.Months[e] + " &nbsp; " + t + "</span>", d = '<div class="table">';
      d += '<div class="row head">';
      for (var c = 0; c < 7; c++)
        d += '<div class="cell">' + this.DaysOfWeek[c] + "</div>";
      d += "</div>";
      for (var h, l = dm = "M" == this.f ? 1 : 0 == o ? -5 : 2, v = (c = 0, 0); v < 6; v++) {
        d += '<div class="row">';
        for (var m = 0; m < 7; m++) {
          if ((h = c + dm - o) < 1)
            d += '<div class="cell disable">' + (u - o + l++) + "</div>";
          else if (h > i)
            d += '<div class="cell disable">' + l++ + "</div>";
          else {
            d += '<div class="cell' + (r == h && this.CurrentMonth == n && this.CurrentYear == a ? " active" : "") + '"><span>' + h + "</span></div>", l = 1;
          }
          c % 7 == 6 && h >= i && (v = 10), c++;
        }
        d += "</div>";
      }
      d += "</div>", monthYear.value.innerHTML = s, document.querySelector(`.calendar${timeId.value} ${this.divId}`).innerHTML = d, (_a = document.querySelector(`.calendar${timeId.value} ${this.divId}`)) == null ? void 0 : _a.setAttribute("data-date", this.enMonths[e] + " - " + t), (_b = document.querySelector(`.calendar${timeId.value} ${this.divId}`)) == null ? void 0 : _b.setAttribute("data-month", e);
      curDate.value = a + "-" + n + "-" + r;
    };
    const multicolourInit = () => {
      dataTypeFn();
      clearInterval(multicolourTimer.value);
      var t = new Calendar({
        RenderID: ".render-a",
        Format: "M",
        headerDom: calendarHDom.value
      });
      t.showCurrent(), t.checkActive();
      var e = [prevMonth.value, nextMonth.value];
      for (let i = 0; i < e.length; i++)
        e[i].onclick = function() {
          var _a, _b, _c;
          if (calendarHDom.value.setAttribute("class", "calendar-header"), "true" == monthsDom.value.getAttribute("data-loading"))
            return calendarHDom.value.setAttribute("class", "calendar-header active"), false;
          var e2;
          monthsDom.value.setAttribute("data-loading", "true"), ((_a = this.getAttribute("data-action")) == null ? void 0 : _a.includes("prev")) ? (t.prevMonth(), e2 = "left") : (t.nextMonth(), e2 = "right"), t.checkActive(), monthsDom.value.setAttribute("data-flow", e2), (_b = document.querySelector(`.calendar${timeId.value} .month[data-active="true"]`)) == null ? void 0 : _b.addEventListener("webkitTransitionEnd", function() {
            monthsDom.value.removeAttribute("data-loading");
          }), (_c = document.querySelector(`.calendar${timeId.value} .month[data-active="true"]`)) == null ? void 0 : _c.addEventListener("transitionend", function() {
            monthsDom.value.removeAttribute("data-loading");
          });
        };
      multicolourTimer.value = setInterval(() => {
        let newr = new Date().getDate();
        let newn = new Date().getMonth();
        let newa = new Date().getFullYear();
        let newDate = newa + "-" + newn + "-" + newr;
        if (newDate !== curDate.value) {
          againInit();
        }
      }, 1e3);
    };
    const againInit = () => {
      if (props.type === "multicolour") {
        multicolourShow.value = false;
        nextTick(() => {
          multicolourShow.value = true;
          nextTick(() => {
            multicolourInit();
          });
        });
      }
    };
    const RESET_VIEW = () => {
    };
    watch(
      () => [props.dataType],
      () => {
        againInit();
      },
      { deep: true }
    );
    onMounted(() => {
      multicolourInit();
    });
    onUnmounted(() => {
      clearInterval(multicolourTimer.value);
    });
    return {
      timeId,
      calendarDom,
      calendarHDom,
      monthYear,
      monthsDom,
      prevMonth,
      nextMonth,
      monthA,
      monthB,
      multicolourShow,
      RESET_VIEW,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = {
  class: "calendar-header",
  ref: "calendarHDom"
};
const _hoisted_2 = {
  "data-action": "prev-month",
  href: "javascript:void(0)",
  ref: "prevMonth"
};
const _hoisted_3 = /* @__PURE__ */ createElementVNode("i", null, null, -1);
const _hoisted_4 = [
  _hoisted_3
];
const _hoisted_5 = {
  "data-action": "next-month",
  href: "javascript:void(0)",
  ref: "nextMonth"
};
const _hoisted_6 = /* @__PURE__ */ createElementVNode("i", null, null, -1);
const _hoisted_7 = [
  _hoisted_6
];
const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", { class: "render render-a" }, null, -1);
const _hoisted_9 = [
  _hoisted_8
];
const _hoisted_10 = /* @__PURE__ */ createElementVNode("div", { class: "render render-b" }, null, -1);
const _hoisted_11 = [
  _hoisted_10
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-time-calendar",
    style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
  }, [
    _ctx.multicolourShow ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: normalizeClass(`calendar calendar${_ctx.timeId}`),
      ref: "calendarDom",
      style: normalizeStyle({
        fontFamily: _ctx.fontFamily
      })
    }, [
      createElementVNode("div", _hoisted_1, [
        createElementVNode("a", _hoisted_2, _hoisted_4, 512),
        createElementVNode("div", {
          class: "text",
          ref: "monthYear",
          style: normalizeStyle({
            color: _ctx.headerColor,
            fontSize: _ctx.headerSize + "px",
            letterSpacing: _ctx.headerLetter + "px",
            backgroundColor: _ctx.headerBgColor
          })
        }, null, 4),
        createElementVNode("a", _hoisted_5, _hoisted_7, 512)
      ], 512),
      createElementVNode("div", {
        class: "months",
        ref: "monthsDom",
        "data-flow": "left",
        style: normalizeStyle({
          color: _ctx.contentColor,
          fontSize: _ctx.contentSize + "px"
        })
      }, [
        createElementVNode("div", {
          class: "month month-a",
          ref: "monthA",
          style: normalizeStyle({ backgroundColor: _ctx.bgColor })
        }, _hoisted_9, 4),
        createElementVNode("div", {
          class: "month month-b",
          ref: "monthB",
          style: normalizeStyle({ backgroundColor: _ctx.bgColor })
        }, _hoisted_11, 4)
      ], 4)
    ], 6)) : createCommentVNode("", true)
  ], 4);
}
var CoTimeCalendar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { CoTimeCalendar as default };