@layui/layui-vue/es/datePicker/component/common/Month.js

a component library for Vue 3 base on layui-vue

import { defineComponent as w, inject as B, ref as D, computed as x, watch as S, openBlock as u, createElementBlock as d, createElementVNode as o, renderSlot as A, toDisplayString as v, unref as h, Fragment as M, createVNode as N, renderList as F, normalizeClass as O } from "vue";
import T from "dayjs";
import { DATE_PICKER_CONTEXT as I } from "../../interface.js";
import { useI18n as $ } from "../../../language/index.js";
import V from "../../../icon/index.js";
const q = { class: "layui-laydate-main" }, z = { class: "layui-laydate-header" }, K = { key: 0, class: "laydate-set-ym" }, L = { class: "laydate-time-text" }, R = { class: "laydate-set-ym" }, X = { class: "layui-laydate-content", style: { height: "220px" } }, G = { class: "layui-laydate-list laydate-month-list" }, H = ["onClick", "onMouseenter"], Z = w({ name: "MonthPanel", __name: "Month", props: { modelValue: {}, showDate: {}, dateType: {}, classes: { type: Function, default: () => ({}) } }, emits: ["pick", "year-change", "type-change", "hover-cell"], setup(j, { emit: E }) {
  const f = j, m = E, l = B(I), y = D(), c = D(T()), { t } = $(), P = x(() => [t("datePicker.january"), t("datePicker.february"), t("datePicker.march"), t("datePicker.april"), t("datePicker.may"), t("datePicker.june"), t("datePicker.july"), t("datePicker.august"), t("datePicker.september"), t("datePicker.october"), t("datePicker.november"), t("datePicker.december")]), k = (e) => {
    if (l.disabledDate)
      return l.disabledDate(n(e).toDate());
    const a = n(e);
    return !(!l.min || !a.isBefore(l.min, "month")) || !(!l.max || !a.isAfter(l.max, "month"));
  }, b = x(() => (e, a) => {
    const s = n(e);
    return a && a.isSame(s, "month");
  }), n = (e) => c.value.startOf("year").month(e);
  S([() => f.modelValue, () => f.showDate], ([e, a]) => {
    y.value = e ? e.month() : null, c.value = a;
  }, { immediate: !0 });
  const g = (e) => {
    m("year-change", c.value.year() + e);
  };
  return (e, a) => (u(), d("div", q, [o("div", z, [A(e.$slots, "header", {}, () => [e.dateType === "month" ? (u(), d("div", K, [o("span", L, v((Number(y.value) ?? -1) > -1 ? P.value[Number(y.value)] : h(t)("datePicker.selectMonth")), 1)])) : (u(), d(M, { key: 1 }, [N(h(V), { type: "layui-icon-prev", onClick: a[0] || (a[0] = (s) => g(-1)) }), o("div", R, [o("span", { onClick: a[1] || (a[1] = (s) => m("type-change")) }, v(c.value.year()), 1)]), N(h(V), { type: "layui-icon-next", onClick: a[2] || (a[2] = (s) => g(1)) })], 64))])]), o("div", X, [o("ul", G, [(u(!0), d(M, null, F(P.value, (s, i) => {
    var C;
    return u(), d("li", { key: s, class: O({ "layui-this": b.value(i, e.modelValue), "layui-laydate-current": b.value(i, h(T)()), "layui-disabled": k(i), ...(C = e.classes) == null ? void 0 : C.call(e, n(i)) }), onClick: (_) => ((r) => {
      if (k(r))
        return;
      const p = n(r);
      y.value = r, c.value = p, m("pick", l.range ? p : r);
    })(i), onMouseenter: (_) => ((r) => {
      if (k(r) || !l.range)
        return;
      const p = n(r);
      m("hover-cell", p);
    })(i) }, v(s.slice(0, 3)), 43, H);
  }), 128))])])]));
} });
export {
  Z as default
};