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