@layui/layui-vue/es/datePicker/component/MonthRange.js

a component library for Vue 3 base on layui-vue

import { defineComponent as j, ref as n, watch as x, computed as O, openBlock as p, createElementBlock as w, normalizeClass as L, createElementVNode as d, createVNode as s, withCtx as m, Fragment as M, unref as v, toDisplayString as i, createBlock as $, createCommentVNode as q, renderSlot as G, createTextVNode as J } from "vue";
import f from "dayjs";
import { useI18n as K } from "../../language/index.js";
import P from "../../icon/index.js";
import T from "../../dropdown/index.js";
import b from "./common/Month.js";
import N from "./common/Year.js";
import Q from "./common/Footer.js";
import U from "./common/Shortcuts.js";
import { useShortcutsRange as Y } from "../hook/useShortcutsRange.js";
const W = { class: "layui-laydate-range-main" }, X = { class: "laydate-set-ym" }, Z = { key: 1, class: "laydate-set-ym" }, ee = [d("span", null, "选择月份范围", -1)], ae = { class: "laydate-set-ym" }, de = j({ __name: "MonthRange", props: { modelValue: {}, size: {}, type: {}, disabled: { type: Boolean }, readonly: { type: Boolean }, allowClear: { type: Boolean }, simple: { type: Boolean }, range: { type: Boolean }, rangeSeparator: {}, prefixIcon: {}, suffixIcon: {}, timestamp: { type: Boolean }, yearPage: {}, name: {}, placeholder: {}, max: {}, min: {}, format: {}, inputFormat: {}, defaultValue: {}, defaultTime: {}, contentStyle: { type: [Boolean, null, String, Object, Array] }, contentClass: {}, disabledDate: {}, shortcuts: {} }, emits: ["pick"], setup(R, { emit: F }) {
  const u = R, A = F, { t: S } = K(), I = Y(), l = n(), o = n(), t = n(f()), y = n(f()), g = n(), C = n(), h = n();
  x(() => u.modelValue, () => {
    const [e, a] = u.modelValue;
    l.value = e, o.value = a, t.value = e || (() => {
      const r = f(u.defaultValue);
      return r.isValid() ? r : f().startOf("day");
    })();
  }, { immediate: !0 }), x(() => t.value, () => {
    y.value = t.value.add(1, "year");
  }, { immediate: !0 });
  const B = O(() => (e) => {
    var r, c;
    const a = h.value || o.value;
    return { "layui-this": ((r = l.value) == null ? void 0 : r.isSame(e, "month")) || ((c = o.value) == null ? void 0 : c.isSame(e, "month")), "laydate-range-hover": !!(l.value && e.isSameOrAfter(l.value, "month") && e.isSameOrBefore(a, "month")) || !!(l.value && e.isSameOrBefore(l.value, "month") && e.isSameOrAfter(a, "month")) };
  }), k = O(() => u.type === "yearmonth"), D = (e) => {
    !l.value || l.value && o.value ? (l.value = e, o.value = void 0) : e.isSameOrBefore(l.value, "month") ? (o.value = l.value, l.value = e) : o.value = e, u.simple && l.value && o.value && V();
  }, _ = (e) => {
    l.value && !o.value ? h.value = e : h.value = void 0;
  }, z = (e) => {
    var a;
    t.value = e, (a = g.value) == null || a.hide();
  }, E = (e) => {
    var a;
    t.value = e.subtract(1, "year"), (a = C.value) == null || a.hide();
  }, H = (e) => {
    const a = I(e);
    t.value = a[0], y.value = a[1], l.value = a[0], o.value = a[1], u.simple && V();
  }, V = () => {
    A("pick", [l.value, o.value]);
  };
  return (e, a) => (p(), w("div", { class: L(["layui-laydate", { "layui-laydate-range": k.value }]) }, [d("div", W, [s(U, { onChangeShortcut: H }), s(b, { modelValue: l.value, showDate: t.value, classes: B.value, dateType: u.type, onPick: D, onHoverCell: _ }, { header: m(() => [k.value ? (p(), w(M, { key: 0 }, [s(v(P), { type: "layui-icon-prev", onClick: a[0] || (a[0] = (r) => t.value = t.value.subtract(1, "year")) }), s(v(T), { ref_key: "yearLeftRef", ref: g }, { content: m(() => [s(N, { class: "layui-laydate", modelValue: t.value, showDate: t.value, onPick: z }, null, 8, ["modelValue", "showDate"])]), default: m(() => [d("div", X, [d("span", null, i(t.value.year()) + " " + i(v(S)("datePicker.year")), 1)])]), _: 1 }, 512)], 64)) : (p(), w("div", Z, ee))]), _: 1 }, 8, ["modelValue", "showDate", "classes", "dateType"]), k.value ? (p(), $(b, { key: 0, modelValue: o.value, showDate: y.value, dateType: u.type, classes: B.value, onPick: D, onHoverCell: _ }, { header: m(() => [s(v(T), { ref_key: "yearRightRef", ref: C }, { content: m(() => [s(N, { class: "layui-laydate", modelValue: y.value, showDate: y.value, onPick: E }, null, 8, ["modelValue", "showDate"])]), default: m(() => [d("div", ae, [d("span", null, i(t.value.add(1, "year").year()) + " " + i(v(S)("datePicker.year")), 1)])]), _: 1 }, 512), s(v(P), { type: "layui-icon-next", onClick: a[1] || (a[1] = (r) => t.value = t.value.add(1, "year")) })]), _: 1 }, 8, ["modelValue", "showDate", "dateType", "classes"])) : q("", !0)]), s(Q, { showNow: !1, showConfirm: !u.simple, onConfirm: V }, { default: m(() => [G(e.$slots, "footer", {}, () => {
    var r, c;
    return [J(i((r = l.value) == null ? void 0 : r.format(u.inputFormat)) + " " + i(u.rangeSeparator) + " " + i((c = o.value) == null ? void 0 : c.format(u.inputFormat)), 1)];
  })]), _: 3 }, 8, ["showConfirm"])], 2));
} });
export {
  de as default
};