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

a component library for Vue 3 base on layui-vue

import { defineComponent as D, ref as n, watch as w, computed as j, openBlock as A, createElementBlock as F, createElementVNode as m, createVNode as i, withCtx as h, unref as d, toDisplayString as v, renderSlot as H, createTextVNode as I } from "vue";
import x from "dayjs";
import c from "../../icon/index.js";
import { useBaseDatePicker as L } from "../hook/useBaseDatePicker.js";
import { useShortcutsRange as N } from "../hook/useShortcutsRange.js";
import R from "./common/Footer.js";
import T from "./common/Shortcuts.js";
import C from "./common/Year.js";
const z = { class: "layui-laydate layui-laydate-range" }, E = { class: "layui-laydate-range-main" }, Y = { class: "laydate-set-ym" }, $ = { class: "laydate-time-text" }, q = { class: "laydate-set-ym" }, G = { class: "laydate-time-text" }, ee = D({ __name: "YearRange", 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(k, { emit: P }) {
  const o = k, V = P, { getDefaultValue: b } = L(o), O = N(), a = n(), t = n(), r = n(x()), y = n(x()), p = n();
  w(() => o.modelValue, () => {
    const [e, l] = o.modelValue;
    a.value = e, t.value = l, r.value = e || b();
  }, { immediate: !0 }), w(() => r.value, () => {
    y.value = r.value.add(o.yearPage, "year");
  }, { immediate: !0 });
  const g = j(() => (e) => {
    var s, u;
    const l = p.value || t.value;
    return { "layui-this": ((s = a.value) == null ? void 0 : s.isSame(e, "year")) || ((u = t.value) == null ? void 0 : u.isSame(e, "year")), "laydate-range-hover": !!(a.value && e.isSameOrAfter(a.value, "year") && e.isSameOrBefore(l, "year")) || !!(a.value && e.isSameOrBefore(a.value, "year") && e.isSameOrAfter(l, "year")) };
  });
  function S(e) {
    !a.value || a.value && t.value ? (a.value = e, t.value = void 0) : e.isSameOrBefore(a.value, "year") ? (t.value = a.value, a.value = e) : t.value = e, o.simple && a.value && t.value && f();
  }
  function B(e) {
    a.value && !t.value ? p.value = e : p.value = void 0;
  }
  function _(e) {
    const l = O(e);
    r.value = l[0], y.value = l[1], a.value = l[0], t.value = l[1], o.simple && f();
  }
  function f() {
    V("pick", [a.value, t.value]);
  }
  return (e, l) => (A(), F("div", z, [m("div", E, [i(T, { onChangeShortcut: _ }), i(C, { "model-value": r.value, "show-date": r.value, classes: g.value, onPick: S, onHoverCell: B }, { header: h(({ yearList: s }) => [i(d(c), { type: "layui-icon-prev", onClick: l[0] || (l[0] = (u) => r.value = r.value.subtract(e.yearPage, "year")) }), m("div", Y, [m("span", $, v(s.join(" - ")), 1)]), i(d(c), { type: "layui-icon-next", style: { visibility: "hidden" } })]), _: 1 }, 8, ["model-value", "show-date", "classes"]), i(C, { "model-value": y.value, "show-date": y.value, classes: g.value, onPick: S, onHoverCell: B }, { header: h(({ yearList: s }) => [i(d(c), { type: "layui-icon-prev", style: { visibility: "hidden" } }), m("div", q, [m("span", G, v(s.join(" - ")), 1)]), i(d(c), { type: "layui-icon-next", onClick: l[1] || (l[1] = (u) => r.value = r.value.add(e.yearPage, "year")) })]), _: 1 }, 8, ["model-value", "show-date", "classes"])]), i(R, { "show-now": !1, "show-confirm": !o.simple, onConfirm: f }, { default: h(() => [H(e.$slots, "footer", {}, () => {
    var s, u;
    return [I(v((s = a.value) == null ? void 0 : s.format(o.inputFormat)) + " " + v(o.rangeSeparator) + " " + v((u = t.value) == null ? void 0 : u.format(o.inputFormat)), 1)];
  })]), _: 3 }, 8, ["show-confirm"])]));
} });
export {
  ee as default
};