@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 f, unref as h, Fragment as M, createVNode as N, renderList as F, normalizeClass as O } from "vue";
import T from "dayjs";
import { useI18n as I } from "../../../language/index.js";
import V from "../../../icon/index.js";
import { DATE_PICKER_CONTEXT as $ } from "../../interface.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 v = j, m = E, l = B($), y = D(), c = D(T()), { t } = I(), 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")]);
  function k(e) {
    if (l.disabledDate)
      return l.disabledDate(s(e).toDate());
    const a = s(e);
    return !(!l.min || !a.isBefore(l.min, "month")) || !(!l.max || !a.isAfter(l.max, "month"));
  }
  const b = x(() => (e, a) => {
    const n = s(e);
    return a && a.isSame(n, "month");
  });
  function s(e) {
    return c.value.startOf("year").month(e);
  }
  function g(e) {
    m("year-change", c.value.year() + e);
  }
  return S([() => v.modelValue, () => v.showDate], ([e, a]) => {
    y.value = e ? e.month() : null, c.value = a;
  }, { immediate: !0 }), (e, a) => (u(), d("div", q, [o("div", z, [A(e.$slots, "header", {}, () => [e.dateType === "month" ? (u(), d("div", K, [o("span", L, f((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] = (n) => g(-1)) }), o("div", R, [o("span", { onClick: a[1] || (a[1] = (n) => m("type-change")) }, f(c.value.year()), 1)]), N(h(V), { type: "layui-icon-next", onClick: a[2] || (a[2] = (n) => g(1)) })], 64))])]), o("div", X, [o("ul", G, [(u(!0), d(M, null, F(P.value, (n, i) => {
    var C;
    return u(), d("li", { key: n, 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, s(i)) }), onClick: (_) => function(r) {
      if (k(r))
        return;
      const p = s(r);
      y.value = r, c.value = p, m("pick", l.range ? p : r);
    }(i), onMouseenter: (_) => function(r) {
      if (k(r) || !l.range)
        return;
      const p = s(r);
      m("hover-cell", p);
    }(i) }, f(n.slice(0, 3)), 43, H);
  }), 128))])])]));
} });
export {
  Z as default
};