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

a component library for Vue 3 base on layui-vue

import { defineComponent as j, ref as s, watch as x, computed as O, openBlock as p, createElementBlock as S, normalizeClass as L, createElementVNode as d, createVNode as n, withCtx as i, Fragment as M, unref as v, toDisplayString as m, 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 b from "../../dropdown/index.js";
import R from "../../icon/index.js";
import { useShortcutsRange as Q } from "../hook/useShortcutsRange.js";
import U from "./common/Footer.js";
import F from "./common/Month.js";
import Y from "./common/Shortcuts.js";
import N from "./common/Year.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: {}, static: { type: Boolean }, teleportProps: {} }, emits: ["pick"], setup(A, { emit: I }) {
  const u = A, z = I, { t: g } = K(), D = Q(), l = s(), o = s(), t = s(f()), c = s(f()), B = s(), C = s(), h = s();
  x(() => u.modelValue, () => {
    const [e, a] = u.modelValue;
    l.value = e, o.value = a, t.value = e || function() {
      const r = f(u.defaultValue);
      return r.isValid() ? r : f().startOf("day");
    }();
  }, { immediate: !0 }), x(() => t.value, () => {
    c.value = t.value.add(1, "year");
  }, { immediate: !0 });
  const V = O(() => (e) => {
    var r, y;
    const a = h.value || o.value;
    return { "layui-this": ((r = l.value) == null ? void 0 : r.isSame(e, "month")) || ((y = o.value) == null ? void 0 : y.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");
  function _(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 && w();
  }
  function P(e) {
    l.value && !o.value ? h.value = e : h.value = void 0;
  }
  function E(e) {
    var a;
    t.value = e, (a = B.value) == null || a.hide();
  }
  function H(e) {
    var a;
    t.value = e.subtract(1, "year"), (a = C.value) == null || a.hide();
  }
  function T(e) {
    const a = D(e);
    t.value = a[0], c.value = a[1], l.value = a[0], o.value = a[1], u.simple && w();
  }
  function w() {
    z("pick", [l.value, o.value]);
  }
  return (e, a) => (p(), S("div", { class: L(["layui-laydate", { "layui-laydate-range": k.value }]) }, [d("div", W, [n(Y, { onChangeShortcut: T }), n(F, { "model-value": l.value, "show-date": t.value, classes: V.value, "date-type": u.type, onPick: _, onHoverCell: P }, { header: i(() => [k.value ? (p(), S(M, { key: 0 }, [n(v(R), { type: "layui-icon-prev", onClick: a[0] || (a[0] = (r) => t.value = t.value.subtract(1, "year")) }), n(v(b), { ref_key: "yearLeftRef", ref: B }, { content: i(() => [n(N, { class: "layui-laydate", "model-value": t.value, "show-date": t.value, onPick: E }, null, 8, ["model-value", "show-date"])]), default: i(() => [d("div", X, [d("span", null, m(t.value.year()) + " " + m(v(g)("datePicker.year")), 1)])]), _: 1 }, 512)], 64)) : (p(), S("div", Z, ee))]), _: 1 }, 8, ["model-value", "show-date", "classes", "date-type"]), k.value ? (p(), $(F, { key: 0, "model-value": o.value, "show-date": c.value, "date-type": u.type, classes: V.value, onPick: _, onHoverCell: P }, { header: i(() => [n(v(b), { ref_key: "yearRightRef", ref: C }, { content: i(() => [n(N, { class: "layui-laydate", "model-value": c.value, "show-date": c.value, onPick: H }, null, 8, ["model-value", "show-date"])]), default: i(() => [d("div", ae, [d("span", null, m(t.value.add(1, "year").year()) + " " + m(v(g)("datePicker.year")), 1)])]), _: 1 }, 512), n(v(R), { type: "layui-icon-next", onClick: a[1] || (a[1] = (r) => t.value = t.value.add(1, "year")) })]), _: 1 }, 8, ["model-value", "show-date", "date-type", "classes"])) : q("", !0)]), n(U, { "show-now": !1, "show-confirm": !u.simple, onConfirm: w }, { default: i(() => [G(e.$slots, "footer", {}, () => {
    var r, y;
    return [J(m((r = l.value) == null ? void 0 : r.format(u.inputFormat)) + " " + m(u.rangeSeparator) + " " + m((y = o.value) == null ? void 0 : y.format(u.inputFormat)), 1)];
  })]), _: 3 }, 8, ["show-confirm"])], 2));
} });
export {
  de as default
};