@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
51 lines (50 loc) • 4.47 kB
JavaScript
import { defineComponent as j, ref as p, watch as f, computed as h, openBlock as r, createElementBlock as k, createVNode as C, withDirectives as E, createBlock as s, vShow as M, createCommentVNode as v, withCtx as V, renderSlot as O, normalizeClass as $, createTextVNode as w, toDisplayString as D, unref as T, Fragment as q } from "vue";
import i from "dayjs";
import { useI18n as G } from "../../language/index.js";
import { useBaseDatePicker as H } from "../hook/useBaseDatePicker.js";
import J from "../../button/index2.js";
import K from "./common/Date.js";
import L from "./common/Time.js";
import Q from "./common/Year.js";
import R from "./common/Month.js";
import U from "./common/Footer.js";
import W from "./common/Shortcuts.js";
import { isFunction as X } from "../../utils/type.js";
const Z = { class: "layui-laydate" }, de = j({ __name: "DatePicker", 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(g, { emit: B }) {
const a = g, x = B, l = p(), t = p(i()), o = p(), { getDefaultValue: P } = H(a), { t: c } = G();
f(() => a.modelValue, () => {
l.value = a.modelValue, t.value = a.modelValue || P();
}, { immediate: !0 });
const m = h(() => a.type), y = h(() => !a.simple || ["datetime", "time"].includes(m.value));
f(() => m.value, (e) => {
o.value = e !== "datetime" ? e !== "yearmonth" ? e : "month" : "date";
}, { immediate: !0 });
const S = (e) => {
l.value = e, n();
}, b = (e) => {
l.value = e, n();
}, F = (e) => {
const u = t.value.year(e);
["datetime", "date"].includes(m.value) ? (t.value = u, o.value = "date") : m.value === "yearmonth" ? (t.value = u, o.value = "month") : (l.value = u, n());
}, N = (e) => {
const u = t.value.month(e);
["datetime", "date"].includes(m.value) ? (t.value = u, o.value = "date") : (l.value = u, t.value = u, n());
}, _ = (e) => {
t.value = t.value.year(e);
}, z = (e) => {
t.value = e;
}, I = () => {
o.value = o.value === "date" ? "time" : "date";
}, n = (e = !1) => {
y.value && !e || (m.value === "datetime" && (o.value = "date"), x("pick", l.value));
}, A = () => {
i().isBefore(i(a.min, a.format)) ? t.value = l.value = i(a.min, a.format) : i().isAfter(i(a.max, a.format)) ? t.value = l.value = i(a.max, a.format) : t.value = l.value = i(), a.simple && n();
}, Y = (e) => {
const u = X(e.value) ? e.value() : e.value;
l.value = i(u), a.simple && n();
};
return (e, u) => (r(), k("div", Z, [C(W, { onChangeShortcut: Y }), o.value === "date" || o.value === "time" ? E((r(), s(K, { key: 0, modelValue: l.value, showDate: t.value, dateType: m.value, onPick: S, onYearMonthChange: z, onTypeChange: u[0] || (u[0] = (d) => o.value = d) }, null, 8, ["modelValue", "showDate", "dateType"])), [[M, o.value === "date"]]) : v("", !0), o.value === "time" ? (r(), s(L, { key: 1, modelValue: l.value, showDate: t.value, dateType: m.value, onPick: b }, null, 8, ["modelValue", "showDate", "dateType"])) : v("", !0), o.value === "year" ? (r(), s(Q, { key: 2, modelValue: l.value, showDate: t.value, dateType: m.value, onPick: F }, null, 8, ["modelValue", "showDate", "dateType"])) : v("", !0), o.value === "month" ? (r(), s(R, { key: 3, modelValue: l.value, showDate: t.value, dateType: m.value, onPick: N, onYearChange: _, onTypeChange: u[1] || (u[1] = (d) => o.value = "year") }, null, 8, ["modelValue", "showDate", "dateType"])) : v("", !0), C(U, { showConfirm: y.value, disabledConfirm: !l.value, onConfirm: u[2] || (u[2] = (d) => n(!0)), onNow: A }, { default: V(() => [O(e.$slots, "footer", {}, () => [m.value === "datetime" ? (r(), s(J, { key: 0, size: "xs", class: $({ "type-time": o.value === "time" }), onClick: I }, { default: V(() => [w(D(o.value === "date" ? T(c)("datePicker.selectTime") : T(c)("datePicker.selectDate")), 1)]), _: 1 }, 8, ["class"])) : (r(), k(q, { key: 1 }, [w(D(l.value ? i(l.value).format(a.inputFormat) : ""), 1)], 64))])]), _: 3 }, 8, ["showConfirm", "disabledConfirm"])]));
} });
export {
de as default
};