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

a component library for Vue 3 base on layui-vue

import { defineComponent as j, ref as c, watch as w, computed as p, openBlock as r, createElementBlock as E, createVNode as B, withDirectives as H, createBlock as s, vShow as O, createCommentVNode as v, withCtx as f, normalizeClass as q, createTextVNode as C, toDisplayString as g, unref as P } from "vue";
import G from "../../button/index2.js";
import { useI18n as J } from "../../language/index.js";
import m from "dayjs";
import { useBaseDatePicker as K } from "../hook/useBaseDatePicker.js";
import { setHMS as L } from "../util.js";
import Q from "./common/Date.js";
import R from "./common/DatePickerRender.js";
import U from "./common/Footer.js";
import W from "./common/Month.js";
import X from "./common/Shortcuts.js";
import Z from "./common/Time.js";
import $ from "./common/Year.js";
import { isFunction as ee } from "../../utils/type.js";
const ae = { class: "layui-laydate" }, ye = 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: {}, static: { type: Boolean }, teleportProps: {} }, emits: ["pick"], setup(V, { emit: x }) {
  const t = V, D = x, a = c(), l = c(m()), o = c(), { defaultTimeValue: y, getDefaultValue: S } = K(t), { t: h } = J();
  w(() => t.modelValue, () => {
    a.value = t.modelValue;
    let e = S();
    e = y.value[0] ? L(e, y.value[0]) : e, l.value = t.modelValue || e;
  }, { immediate: !0 });
  const n = p(() => t.type), k = p(() => !t.simple || ["datetime", "time"].includes(n.value));
  function T(e) {
    a.value = e, i();
  }
  function b(e) {
    a.value = e, i();
  }
  function _(e) {
    const u = l.value.year(e);
    ["datetime", "date"].includes(n.value) ? (l.value = u, o.value = "date") : n.value === "yearmonth" ? (l.value = u, o.value = "month") : (a.value = u, i());
  }
  function N(e) {
    const u = l.value.month(e);
    ["datetime", "date"].includes(n.value) ? (l.value = u, o.value = "date") : (a.value = u, l.value = u, i());
  }
  function z(e) {
    l.value = l.value.year(e);
  }
  function F(e) {
    l.value = e;
  }
  function I() {
    o.value = o.value === "date" ? "time" : "date";
  }
  function i(e = !1) {
    k.value && !e || (n.value === "datetime" && (o.value = "date"), D("pick", a.value));
  }
  function A() {
    m().isBefore(m(t.min, t.format)) ? l.value = a.value = m(t.min, t.format) : m().isAfter(m(t.max, t.format)) ? l.value = a.value = m(t.max, t.format) : l.value = a.value = m(), t.simple && i();
  }
  function M(e) {
    const u = ee(e.value) ? e.value() : e.value;
    a.value = m(u), t.simple && i();
  }
  w(() => n.value, (e) => {
    o.value = e !== "datetime" ? e !== "yearmonth" ? e : "month" : "date";
  }, { immediate: !0 });
  const Y = p(() => a.value ? m(a.value).format(t.inputFormat) : "");
  return (e, u) => (r(), E("div", ae, [B(X, { onChangeShortcut: M }), o.value === "date" || o.value === "time" ? H((r(), s(Q, { key: 0, "model-value": a.value, "show-date": l.value, "date-type": n.value, onPick: T, onYearMonthChange: F, onTypeChange: u[0] || (u[0] = (d) => o.value = d) }, null, 8, ["model-value", "show-date", "date-type"])), [[O, o.value === "date"]]) : v("", !0), o.value === "time" ? (r(), s(Z, { key: 1, "model-value": a.value, "show-date": l.value, "date-type": n.value, onPick: b }, null, 8, ["model-value", "show-date", "date-type"])) : v("", !0), o.value === "year" ? (r(), s($, { key: 2, "model-value": a.value, "show-date": l.value, "date-type": n.value, onPick: _ }, null, 8, ["model-value", "show-date", "date-type"])) : v("", !0), o.value === "month" ? (r(), s(W, { key: 3, "model-value": a.value, "show-date": l.value, "date-type": n.value, onPick: N, onYearChange: z, onTypeChange: u[1] || (u[1] = (d) => o.value = "year") }, null, 8, ["model-value", "show-date", "date-type"])) : v("", !0), B(U, { "show-confirm": k.value, "disabled-confirm": !a.value, onConfirm: u[2] || (u[2] = (d) => i(!0)), onNow: A }, { default: f(() => [n.value === "datetime" ? (r(), s(G, { key: 0, size: "xs", class: q({ "type-time": o.value === "time" }), onClick: I }, { default: f(() => [C(g(o.value === "date" ? P(h)("datePicker.selectTime") : P(h)("datePicker.selectDate")), 1)]), _: 1 }, 8, ["class"])) : (r(), s(R, { key: 1, render: "footer", current: a.value }, { default: f(() => [C(g(Y.value), 1)]), _: 1 }, 8, ["current"]))]), _: 1 }, 8, ["show-confirm", "disabled-confirm"])]));
} });
export {
  ye as default
};