@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
39 lines (38 loc) • 3.9 kB
JavaScript
import { defineComponent as _, ref as n, watch as C, computed as N, openBlock as j, createElementBlock as A, createElementVNode as m, createVNode as i, withCtx as h, unref as d, toDisplayString as v, renderSlot as F, createTextVNode as H } from "vue";
import V from "dayjs";
import p from "../../icon/index.js";
import w from "./common/Year.js";
import I from "./common/Footer.js";
import L from "./common/Shortcuts.js";
import { useBaseDatePicker as R } from "../hook/useBaseDatePicker.js";
import { useShortcutsRange as z } from "../hook/useShortcutsRange.js";
const E = { class: "layui-laydate layui-laydate-range" }, T = { 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 = _({ __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: {} }, emits: ["pick"], setup(x, { emit: k }) {
const o = x, D = k, { getDefaultValue: P } = R(o), b = z(), a = n(), t = n(), r = n(V()), y = n(V()), c = n();
C(() => o.modelValue, () => {
const [e, l] = o.modelValue;
a.value = e, t.value = l, r.value = e || P();
}, { immediate: !0 }), C(() => r.value, () => {
y.value = r.value.add(o.yearPage, "year");
}, { immediate: !0 });
const g = N(() => (e) => {
var s, u;
const l = c.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")) };
}), 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();
}, B = (e) => {
a.value && !t.value ? c.value = e : c.value = void 0;
}, O = (e) => {
const l = b(e);
r.value = l[0], y.value = l[1], a.value = l[0], t.value = l[1], o.simple && f();
}, f = () => {
D("pick", [a.value, t.value]);
};
return (e, l) => (j(), A("div", E, [m("div", T, [i(L, { onChangeShortcut: O }), i(w, { modelValue: r.value, showDate: r.value, classes: g.value, onPick: S, onHoverCell: B }, { header: h(({ yearList: s }) => [i(d(p), { 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(p), { type: "layui-icon-next", style: { visibility: "hidden" } })]), _: 1 }, 8, ["modelValue", "showDate", "classes"]), i(w, { modelValue: y.value, showDate: y.value, classes: g.value, onPick: S, onHoverCell: B }, { header: h(({ yearList: s }) => [i(d(p), { type: "layui-icon-prev", style: { visibility: "hidden" } }), m("div", q, [m("span", G, v(s.join(" - ")), 1)]), i(d(p), { type: "layui-icon-next", onClick: l[1] || (l[1] = (u) => r.value = r.value.add(e.yearPage, "year")) })]), _: 1 }, 8, ["modelValue", "showDate", "classes"])]), i(I, { showNow: !1, showConfirm: !o.simple, onConfirm: f }, { default: h(() => [F(e.$slots, "footer", {}, () => {
var s, u;
return [H(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, ["showConfirm"])]));
} });
export {
ee as default
};