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