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