UNPKG

@layui/layui-vue

Version:

a component library for Vue 3 base on layui-vue

51 lines (50 loc) 4.47 kB
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 };