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

a component library for Vue 3 base on layui-vue

import { defineComponent as ue, ref as y, computed as h, watch as F, openBlock as C, createElementBlock as oe, normalizeClass as ne, createElementVNode as c, createVNode as n, unref as r, withCtx as m, toDisplayString as f, createBlock as I, createCommentVNode as E, renderSlot as se, createTextVNode as ie } from "vue";
import S from "dayjs";
import { useI18n as re } from "../../language/index.js";
import k from "../../dropdown/index.js";
import p from "../../icon/index.js";
import { useBaseDatePicker as de } from "../hook/useBaseDatePicker.js";
import { useShortcutsRange as me } from "../hook/useShortcutsRange.js";
import { normalizeDayjsValue as ve, setDateList as U } from "../util.js";
import $ from "./common/DateContent.js";
import ce from "./common/Footer.js";
import q from "./common/Month.js";
import ye from "./common/Shortcuts.js";
import G from "./common/Time.js";
import J from "./common/Year.js";
import { isArray as fe } from "../../utils/arrayUtil.js";
const pe = { class: "layui-laydate-range-main" }, he = { class: "layui-laydate-main" }, ke = { class: "layui-laydate-header" }, Pe = { class: "laydate-set-ym" }, ge = { class: "layui-laydate-main" }, we = { class: "layui-laydate-header" }, be = { class: "laydate-set-ym" }, ze = ue({ __name: "DateRange", 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: M }) {
  const i = K, Q = M, { t: d } = re(), { getDefaultValue: b } = de(i), W = me(), o = y(), s = y(), l = y(b()), u = y(b().add(1, "month")), B = y(), V = y(), R = y(), O = y(), x = y(), X = y(), Y = y(), H = h(() => i.simple && i.type !== "datetime"), D = h(() => [d("datePicker.january"), d("datePicker.february"), d("datePicker.march"), d("datePicker.april"), d("datePicker.may"), d("datePicker.june"), d("datePicker.july"), d("datePicker.august"), d("datePicker.september"), d("datePicker.october"), d("datePicker.november"), d("datePicker.december")]), P = h(() => i.type !== "datetime" ? [] : (fe(i.defaultTime) ? i.defaultTime : [i.defaultTime, i.defaultTime]).map((a) => ve(a, "HH:mm:ss")));
  function T(a, e) {
    return a.hour(e.hour()).minute(e.minute()).second(e.second());
  }
  F(() => i.modelValue, () => {
    const [a, e] = i.modelValue;
    o.value = a, s.value = e;
    const t = b(), v = P.value[0] ? T(t, P.value[0]) : t, w = P.value[1] ? T(t.add(1, "month"), P.value[1]) : t.add(1, "month");
    l.value = a || v, u.value = e || w;
  }, { immediate: !0 }), F(() => l.value, (a) => {
    const e = u.value.clone();
    u.value = a.add(1, "month").set("hour", e.hour()).set("minute", e.minute()).set("second", e.second());
  }, { immediate: !0 });
  const Z = h(() => U(l.value.year(), l.value.month()) || []), ee = h(() => U(u.value.year(), u.value.month()) || []), j = h(() => (a) => {
    var v, w;
    const e = S(a.value), t = s.value || B.value;
    return { "layui-this": a.type === "current" && (((v = o.value) == null ? void 0 : v.startOf("day").valueOf()) === a.value || ((w = s.value) == null ? void 0 : w.startOf("day").valueOf()) === a.value), "laydate-range-hover": !!(a.type === "current" && (o.value && e.isSameOrAfter(o.value, "day") && e.isSameOrBefore(t, "day") || o.value && e.isSameOrBefore(o.value, "day") && e.isSameOrAfter(t, "day"))) };
  });
  function A(a) {
    const e = S(a), t = (o.value || l.value).clone().set("year", e.year()).set("month", e.month()).set("date", e.date()), v = (s.value || u.value).clone().set("year", e.year()).set("month", e.month()).set("date", e.date());
    !o.value || o.value && s.value ? (o.value = t, s.value = void 0) : e.isSameOrBefore(o.value, "day") ? (s.value = o.value.clone().set("hour", u.value.hour()).set("minute", u.value.minute()).set("second", u.value.second()), o.value = t) : s.value = v, H.value && o.value && s.value && _();
  }
  function L(a) {
    o.value && !s.value ? B.value = S(a) : B.value = null;
  }
  function g(a, e) {
    l.value = l.value[a](1, e);
  }
  function N(a, e, t) {
    const v = a[e]();
    l.value = l.value[e](v), t.hide();
  }
  function z(a, e, t) {
    const v = a[e]();
    l.value = u.value[e](v).subtract(1, "month"), t.hide();
  }
  function ae(a) {
    l.value = l.value.clone().set("hour", a.hour()).set("minute", a.minute()).set("second", a.second()), o.value && (o.value = o.value.set("hour", l.value.hour()).set("minute", l.value.minute()).set("second", l.value.second()));
  }
  function te(a) {
    u.value = u.value.clone().set("hour", a.hour()).set("minute", a.minute()).set("second", a.second()), s.value && (s.value = s.value.set("hour", u.value.hour()).set("minute", u.value.minute()).set("second", u.value.second()));
  }
  function le(a) {
    const e = W(a);
    l.value = e[0], u.value = e[1], o.value = e[0], s.value = e[1], i.simple && _();
  }
  function _() {
    Q("pick", [o.value, s.value]);
  }
  return (a, e) => (C(), oe("div", { class: ne(["layui-laydate layui-laydate-range", `layui-laydate-range-${i.type}`]) }, [c("div", pe, [n(ye, { onChangeShortcut: le }), c("div", he, [c("div", ke, [n(r(p), { type: "layui-icon-prev", onClick: e[0] || (e[0] = (t) => g("subtract", "year")) }), n(r(p), { type: "layui-icon-left", onClick: e[1] || (e[1] = (t) => g("subtract", "month")) }), c("div", Pe, [n(r(k), { ref_key: "yearLeftRef", ref: V }, { content: m(() => [n(J, { class: "layui-laydate", "model-value": l.value, "show-date": l.value, onPick: e[2] || (e[2] = (t) => N(t, "year", V.value)) }, null, 8, ["model-value", "show-date"])]), default: m(() => [c("span", null, f(l.value.year()) + " " + f(r(d)("datePicker.year")), 1)]), _: 1 }, 512), n(r(k), { ref_key: "monthLeftRef", ref: O }, { content: m(() => [n(q, { class: "layui-laydate", "model-value": l.value, "show-date": l.value, onPick: e[3] || (e[3] = (t) => N(t, "month", O.value)) }, null, 8, ["model-value", "show-date"])]), default: m(() => [c("span", null, f(D.value[l.value.month()]), 1)]), _: 1 }, 512), i.type === "datetime" ? (C(), I(r(k), { key: 0, ref_key: "timeLeftRef", ref: X }, { content: m(() => [n(G, { class: "layui-laydate", "model-value": o.value || l.value, "show-date": o.value || l.value, onPick: ae }, null, 8, ["model-value", "show-date"])]), default: m(() => [c("span", null, f(l.value.format("HH:mm:ss")), 1)]), _: 1 }, 512)) : E("", !0)]), n(r(p), { type: "layui-icon-right", style: { visibility: "hidden" } }), n(r(p), { type: "layui-icon-next", style: { visibility: "hidden" } })]), n($, { classes: j.value, "date-list": Z.value, "onUpdate:modelValue": A, onHoverCell: L }, null, 8, ["classes", "date-list"])]), c("div", ge, [c("div", we, [n(r(p), { type: "layui-icon-prev", style: { visibility: "hidden" } }), n(r(p), { type: "layui-icon-left", style: { visibility: "hidden" } }), c("div", be, [n(r(k), { ref_key: "yearRightRef", ref: R }, { content: m(() => [n(J, { class: "layui-laydate", "model-value": u.value, "show-date": u.value, onPick: e[4] || (e[4] = (t) => z(t, "year", R.value)) }, null, 8, ["model-value", "show-date"])]), default: m(() => [c("span", null, f(u.value.year()) + " " + f(r(d)("datePicker.year")), 1)]), _: 1 }, 512), n(r(k), { ref_key: "monthRightRef", ref: x }, { content: m(() => [n(q, { class: "layui-laydate", "model-value": u.value, "show-date": u.value, "date-type": "month", onPick: e[5] || (e[5] = (t) => z(t, "month", x.value)) }, null, 8, ["model-value", "show-date"])]), default: m(() => [c("span", null, f(D.value[u.value.month()]), 1)]), _: 1 }, 512), i.type === "datetime" ? (C(), I(r(k), { key: 0, ref_key: "timeRightRef", ref: Y }, { content: m(() => [n(G, { class: "layui-laydate", "model-value": s.value || u.value, "show-date": s.value || u.value, onPick: te }, null, 8, ["model-value", "show-date"])]), default: m(() => [c("span", null, f(u.value.format("HH:mm:ss")), 1)]), _: 1 }, 512)) : E("", !0)]), n(r(p), { type: "layui-icon-right", onClick: e[6] || (e[6] = (t) => g("add", "month")) }), n(r(p), { type: "layui-icon-next", onClick: e[7] || (e[7] = (t) => g("add", "year")) })]), n($, { classes: j.value, "date-list": ee.value, "onUpdate:modelValue": A, onHoverCell: L }, null, 8, ["classes", "date-list"])])]), n(ce, { "show-now": !1, "show-confirm": !H.value, onConfirm: _ }, { footer: m(() => [se(a.$slots, "footer")]), default: m(() => {
    var t, v;
    return [ie(f((t = o.value) == null ? void 0 : t.format(i.inputFormat)) + " " + f(i.rangeSeparator) + " " + f((v = s.value) == null ? void 0 : v.format(i.inputFormat)) + " ", 1)];
  }), _: 3 }, 8, ["show-confirm"])], 2));
} });
export {
  ze as default
};