calendar-vue-next/dist/calendar-vue-next.js

一款高效、简洁、功能丰富、宽度可自适应的 pc 端考勤日历插件

import { defineComponent as P, ref as g, onMounted as x, onUnmounted as V, openBlock as d, createBlock as X, Transition as J, withCtx as q, createElementBlock as h, createElementVNode as v, toDisplayString as p, createCommentVNode as b, h as z, createApp as W, computed as Z, watch as I, normalizeClass as f, normalizeStyle as y, createTextVNode as Q, Fragment as T, renderList as j } from "vue";
const A = {
  birthdayImg: "data:image/png;base64,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",
  sundayStart: !1,
  // 默认是周一开始，周一或周天开始相应的位置也要改一下
  MonthDays: 0,
  // 一个月共几填=>计算数据集合的长度（你的日历共有几排=>每排肯定是七个，礼拜1-天），公式用:Math.ceil(（当月总天数+当月第一天是礼拜几）/7)
  startDay: 0,
  // 当月第一天是礼拜几=>用于补足上月数据展示
  endDay: 0,
  // 当月最后一天是礼拜几=>用于补足下月数据展示
  arrayPreNum: 0,
  // 计算第一排需要补充上个月的天数（因为你本月一号有可能是周2等）
  // 获取某个月的实际天数
  getMonthDays(t) {
    const r = t.getFullYear(), l = t.getMonth() + 1;
    return new Date(r, l, 0).getDate();
  },
  init(t) {
    const r = t.getFullYear(), l = t.getMonth();
    this.startDay = new Date(r, l, 1).getDay();
    const c = new Date(r, l + 1, 0);
    return this.MonthDays = c.getDate(), this.endDay = c.getDay(), this.setArrayPreNum(), t;
  },
  strToDateObj(t) {
    if (typeof t == "string" && (t = t.replace(/-/g, "/"), t = new Date(t), !(t instanceof Date && !isNaN(t.getTime()))))
      throw "日期格式错误，格式为:YYYY-MM-DD";
    return t;
  },
  // 计算第一排需要补充上个月的天数
  setArrayPreNum() {
    const t = this.startDay;
    this.arrayPreNum = this.sundayStart ? t === 0 ? 7 : t : t === 0 ? 6 : t - 1;
  },
  //获取当前日期上个月或者下个月
  resetprevOrNextDateObj(t, r = "next") {
    const l = this.dateFormatStr(t).split("/"), c = parseInt(l[0]), n = parseInt(l[1]);
    let s = c, o;
    r === "next" ? (o = n + 1, o == 13 && (s += 1, o = 1)) : (o = n - 1, o == 0 && (s -= 1, o = 12));
    const i = `${s}/${o}/01`;
    return new Date(i);
  },
  // 上个月末尾的一些日期
  getPrevMonthList(t) {
    let r = [];
    const l = this.arrayPreNum, c = this.resetprevOrNextDateObj(t, "prev"), n = this.getMonthDays(c) - l + 1;
    for (let s = 0; s < l; s++) {
      const o = n + s, i = `${c.getFullYear()}/${c.getMonth() + 1}/${o}`;
      r.push({
        id: o,
        date: i,
        isToday: !1,
        whitchMonth: "prev"
      });
    }
    return r;
  },
  // 下个月末尾的一些日期
  getRightArr(t) {
    let r = [];
    const l = this.resetprevOrNextDateObj(t, "next"), c = this.MonthDays + this.arrayPreNum;
    let n = 7 - c % 7;
    c < 35 && (n += 7);
    for (let s = 0; s < n; s++) {
      const o = s + 1, i = `${l.getFullYear()}/${l.getMonth() + 1}/${o}`;
      r.push({
        id: o,
        date: i,
        isToday: !1,
        whitchMonth: "next"
      });
    }
    return r;
  },
  // format日期.date转string
  dateFormatStr(t) {
    return `${t.getFullYear()}/${t.getMonth() + 1}/${t.getDate()}`;
  },
  // 获取当月的天数数据
  getThisMonthList(t) {
    const r = [], l = this.MonthDays, c = t.getFullYear(), n = t.getMonth() + 1, s = this.dateFormatStr(/* @__PURE__ */ new Date());
    for (let o = 1; o <= l; o++) {
      const i = `${c}/${n}/${o}`;
      r.push({
        id: o,
        date: i,
        isToday: s === i,
        whitchMonth: "current"
      });
    }
    return r;
  },
  // 获取某月的列表 用于渲染
  getMonthList(t) {
    return t = this.init(t), [...this.getPrevMonthList(t), ...this.getThisMonthList(t), ...this.getRightArr(t)];
  }
}, $ = /* @__PURE__ */ v("i", { class: "ivcufont ivcu-cw_1" }, null, -1), _ = [
  $
], tt = { class: "cv-popover-contentBox" }, et = ["innerHTML"], ot = { key: 1 }, at = /* @__PURE__ */ P({
  __name: "template",
  props: {
    obj: {}
  },
  emits: ["close"],
  setup(t, { emit: r }) {
    const l = g(!0), c = r, n = () => {
      console.log("click"), l.value = !1, document.removeEventListener("keyup", s), c("close");
    }, s = (o) => {
      o.code == "Escape" && n();
    };
    return x(() => {
      document.addEventListener("keyup", s);
    }), V(() => {
      n();
    }), (o, i) => (d(), X(J, {
      name: "fade",
      appear: ""
    }, {
      default: q(() => [
        l.value ? (d(), h("div", {
          key: 0,
          class: "cv-popover-ivContainer",
          onKeyup: n
        }, [
          v("button", {
            class: "cv-popover-ivCloseBtn",
            onClick: n
          }, _),
          v("div", tt, [
            o.obj.renderHtml ? (d(), h("div", {
              key: 0,
              innerHTML: o.obj.markContent
            }, null, 8, et)) : (d(), h("p", ot, p(o.obj.markContent), 1))
          ])
        ], 32)) : b("", !0)
      ]),
      _: 1
    }));
  }
});
function rt() {
  const t = g(null);
  let r = null;
  function l(s, o) {
    const i = z(
      at,
      {
        obj: o,
        onClose: () => {
          console.log("emit"), n();
        }
      }
    );
    W({
      render() {
        return i;
      }
    }).mount(s);
  }
  const c = (s) => {
    r = document.createElement("div"), l(r, s), document.body.appendChild(r);
  }, n = () => {
    r && setTimeout(() => {
      document.body.removeChild(r), r = null;
    }, 300);
  };
  return {
    modalRef: t,
    // 如果你需要在模板中访问这个 ref，可以返回它  
    showModal: c,
    hideModal: n
  };
}
const nt = { class: "cv-controlBox" }, lt = { class: "cv-contentBox" }, st = { class: "cv-main" }, ct = ["onMouseenter", "onClick"], ut = ["onClick"], it = ["src"], dt = ["onClick"], At = /* @__PURE__ */ P({
  __name: "template",
  props: {
    min: { type: Boolean, default: !1 },
    futureDisabled: { type: Boolean, default: !1 },
    sundayStart: { type: Boolean, default: !1 },
    titlebgColor: { default: "#f5f7fa" },
    titleColor: { default: "#333333" },
    weeklabelColor: { default: "#9da5b1" },
    arrowColor: { default: "#4b7df6" },
    itembgColor: { default: "#fff" },
    itemlabelColor: { default: "#333333" },
    birthdayImg: { default: A.birthdayImg },
    birthdaybgColor: { default: "#FFF5E7" },
    birthdaylabelColor: { default: "#333333" },
    crrentdaybgColor: { default: "#4b7df6" },
    crrentdaylabelColor: { default: "#fff" },
    clickdaybgColor: { default: "rgba(51, 51, 51,0.8)" },
    clickdaylabelColor: { default: "#fff" },
    hoverbgColor: { default: "#4b7df6" },
    hoverlabelColor: { default: "#fff" },
    prevColor: { default: "#cccccc" },
    nextColor: { default: "#cccccc" },
    markArr: { default: () => [] },
    birthdayArr: { default: () => [] }
  },
  emits: ["onclickdate", "onchangemonth"],
  setup(t, { expose: r, emit: l }) {
    const { showModal: c } = rt(), n = t, s = Z(() => {
      let e = !1;
      if (n.futureDisabled) {
        const u = (/* @__PURE__ */ new Date()).getFullYear() + "." + (/* @__PURE__ */ new Date()).getMonth(), a = A.strToDateObj(o.value);
        e = a.getFullYear() + "." + a.getMonth() >= u;
      }
      return e;
    }), o = g(/* @__PURE__ */ new Date()), i = g(null), B = g(["一", "二", "三", "四", "五", "六"]), M = g(["一", "二", "三", "四", "五", "六"]), D = g([]), k = g(null), O = l, w = () => {
      D.value = A.getMonthList(o.value), N(), E();
    }, N = () => {
      D.value.forEach((e) => {
        e.mark = !1;
        let u = n.markArr.find(
          (a) => A.dateFormatStr(new Date(a.date)) === A.dateFormatStr(new Date(e.date))
        );
        u && Object.assign(e, u, { mark: !0 });
      });
    }, E = () => {
      D.value.forEach((e) => {
        const u = n.birthdayArr.some((a) => A.dateFormatStr(new Date(a)) === e.date);
        Object.assign(e, { isBirthday: u });
      });
    }, L = (e) => {
      if (e === "next" && n.futureDisabled && s.value)
        return;
      const u = o.value;
      o.value = A.resetprevOrNextDateObj(u, e), O("onchangemonth", {
        day1: o.value,
        type: e
      }), w();
    }, K = (e) => {
      o.value = A.strToDateObj(e), w();
    }, R = (e) => {
      o.value = A.strToDateObj(e), i.value = A.dateFormatStr(o.value), w();
    }, F = (e) => {
      c(e);
    }, H = (e) => {
      const u = e.date;
      i.value = u, console.log(e.whitchMonth), !(n.futureDisabled && s.value) && (e.whitchMonth != "current" && K(u), O("onclickdate", e));
    }, Y = (e) => `${e.getFullYear()}年-${e.getMonth() + 1}月`, G = () => {
      const e = n.sundayStart;
      A.sundayStart = e, e ? M.value = ["日", ...B.value] : M.value = [...B.value, "日"], o.value = A.strToDateObj(o.value), w();
    }, S = I(
      () => n.markArr,
      () => {
        N();
      }
    ), U = I(
      () => n.markArr,
      () => {
        E();
      }
    );
    return G(), V(() => {
      S(), U();
    }), r({
      jumpToDay: R
    }), (e, u) => (d(), h("div", {
      class: f(["vue-calendar-ui", { "vue-calendar-small": e.min }])
    }, [
      v("div", nt, [
        v("div", {
          class: "cv-title",
          style: y({ color: e.titleColor })
        }, [
          Q(p(Y(o.value)) + " ", 1),
          v("i", {
            class: f(["ivcufont ivcu-arrowrightcircleyouyuanjiantou cv-arrowRight", { "cv-arrow-disabled": s.value }]),
            style: y({ color: e.arrowColor }),
            onClick: u[0] || (u[0] = (a) => L("next"))
          }, null, 6),
          v("i", {
            class: "ivcufont ivcu-arrowleftcirclezuoyuanjiantou cv-arrowLeft",
            style: y({ color: e.arrowColor }),
            onClick: u[1] || (u[1] = (a) => L("prev"))
          }, null, 4)
        ], 4)
      ]),
      v("div", lt, [
        v("ul", {
          class: "cv-top",
          style: y({ color: e.weeklabelColor })
        }, [
          (d(!0), h(T, null, j(M.value, (a, C) => (d(), h("li", {
            key: C,
            class: "cv-label"
          }, p(a), 1))), 128))
        ], 4),
        v("ul", st, [
          (d(!0), h(T, null, j(D.value, (a, C) => (d(), h("li", {
            class: f(["cv-item", {
              "cv-prev": a.whitchMonth === "prev",
              "cv-next": a.whitchMonth === "next"
            }]),
            key: C
          }, [
            v("div", {
              class: f(["cv-date", {
                "cv-today": a.isToday
              }]),
              style: y({
                "background-color": a.isBirthday ? e.birthdaybgColor : a.isToday ? e.crrentdaybgColor : a.date === i.value ? e.clickdaybgColor : C === k.value ? e.hoverbgColor : e.itembgColor,
                color: a.isBirthday ? e.birthdaylabelColor : a.isToday ? e.crrentdaylabelColor : a.date === i.value ? e.clickdaylabelColor : C === k.value ? e.hoverlabelColor : a.whitchMonth === "prev" ? e.prevColor : a.whitchMonth === "next" ? e.nextColor : e.itemlabelColor
              }),
              onMouseenter: (m) => k.value = C,
              onMouseleave: u[2] || (u[2] = (m) => k.value = null),
              onClick: (m) => H(a)
            }, [
              Q(p(a.id) + " ", 1),
              a.mark && a.userPopover ? (d(), h("span", {
                key: 0,
                class: "cv-click-Box",
                onClick: (m) => F(a)
              }, null, 8, ut)) : b("", !0),
              a.isBirthday ? (d(), h("img", {
                key: 1,
                class: "cv-today-birthday",
                src: e.birthdayImg,
                alt: ""
              }, null, 8, it)) : b("", !0)
            ], 46, ct),
            a.mark ? (d(), h("span", {
              key: 0,
              class: f(["cv-circle", { "cv-circle-label": a.isLabel }]),
              style: y({ "background-color": a.color, color: a.color })
            }, [
              Q(p(a.isLabel ? a.label : null) + " ", 1),
              a.mark && a.userPopover ? (d(), h("span", {
                key: 0,
                class: "cv-click-Box",
                onClick: (m) => F(a)
              }, null, 8, dt)) : b("", !0)
            ], 6)) : b("", !0)
          ], 2))), 128))
        ])
      ])
    ], 2));
  }
}), ht = (t, r) => {
  const l = t.__vccOpts || t;
  for (const [c, n] of r)
    l[c] = n;
  return l;
}, vt = /* @__PURE__ */ ht(At, [["__scopeId", "data-v-87ce9da6"]]);
function Ct(t) {
  t.component("Calendar", vt);
}
export {
  Ct as default
};