@layui/layui-vue/es/datePicker/component/common/InputBlock.js

a component library for Vue 3 base on layui-vue

import { defineComponent as M, inject as $, ref as b, computed as g, openBlock as C, createElementBlock as S, normalizeClass as W, createVNode as B, withCtx as w, renderSlot as q, createBlock as G, createElementVNode as H, toDisplayString as K } from "vue";
import d from "dayjs";
import { DATE_PICKER_CONTEXT as U } from "../../interface.js";
import X from "../../../dropdown/index2.js";
import z from "../../../input/index2.js";
import { dayjsToString as I, checkRangeValue as D } from "../../util.js";
import { isArray as c } from "../../../utils/arrayUtil.js";
import { isNumber as J } from "../../../utils/type.js";
const L = ["size"], Q = { key: 1, class: "laydate-range-inputs" }, Y = { class: "range-separator" }, re = M({ __name: "InputBlock", props: { name: {}, modelValue: {}, type: {}, disabled: { type: Boolean }, readonly: { type: Boolean }, placeholder: {}, allowClear: { type: Boolean }, simple: { type: Boolean }, max: {}, min: {}, range: { type: Boolean }, rangeSeparator: {}, size: {}, prefixIcon: {}, suffixIcon: {}, timestamp: { type: Boolean }, format: {}, inputFormat: {}, defaultValue: {}, defaultTime: {}, contentStyle: { type: [Boolean, null, String, Object, Array] }, contentClass: {}, disabledDate: {}, yearPage: {}, shortcuts: {} }, emits: ["update:modelValue", "change", "focus", "blur", "clear"], setup(T, { emit: _ }) {
  const a = T, u = _, i = $(U), x = b(), A = g(() => ["layui-date-picker", { "layui-date-range-picker": a.range }]), p = g(() => c(a.placeholder) ? a.placeholder : [a.placeholder, a.placeholder]), t = g(() => {
    let e;
    if (a.range)
      e = (c(a.modelValue) ? a.modelValue : []).map((o) => I(o, a.format));
    else {
      let o = a.modelValue;
      ["year", "month"].includes(a.type) && J(a.modelValue) && `${a.modelValue}`.length <= 4 && (o += ""), e = I(o, a.format);
    }
    return c(l.value) ? [l.value[0] || e && e[0] || "", l.value[1] || e && e[1] || ""] : l.value !== null ? l.value : e;
  }), l = b(null), E = (e) => {
    l.value = e;
  }, F = (e) => {
    l.value ? l.value = [e, l.value[1]] : l.value = [e, null];
  }, O = (e) => {
    l.value ? l.value = [l.value[0], e] : l.value = [null, e];
  }, f = (e) => a.disabledDate ? a.disabledDate(e.toDate()) : !(!a.min || !e.isBefore(i.min)) || !(!a.max || !e.isAfter(i.max)), j = () => {
    if (l.value) {
      const e = d(t.value, a.format);
      e.isValid() && !f(e) && (u("update:modelValue", m(e)), l.value = null);
    } else
      u("update:modelValue", ""), l.value = null;
  }, N = () => {
    var o, n, r;
    const e = d(l.value && l.value[0], a.format);
    if (e.isValid() && (!((o = t.value) != null && o[1]) || e.isBefore((n = t.value) == null ? void 0 : n[1]))) {
      l.value = [e.format(a.format), ((r = t.value) == null ? void 0 : r[1]) || null];
      const s = [e, d(l.value[1] || null, a.format)];
      D(s) && s.every((h) => !f(h)) && (u("update:modelValue", m(s)), l.value = null);
    }
  }, P = () => {
    var o, n, r;
    const e = d(l.value && l.value[1], a.format);
    if (e.isValid() && (!((o = t.value) != null && o[0]) || e.isAfter((n = t.value) == null ? void 0 : n[0]))) {
      l.value = [((r = t.value) == null ? void 0 : r[0]) || null, e.format(a.format)];
      const s = [d(l.value[0] || null, a.format), e];
      D(s) && s.every((h) => !f(h)) && (u("update:modelValue", m(s)), l.value = null);
    }
  }, k = () => {
    l.value = null, u("update:modelValue", a.range ? [] : ""), u("clear");
  }, v = (e) => {
    y.value = !1, setTimeout(() => {
      y.value || (l.value = null, u("blur", e));
    }, 0);
  }, y = b(!1), V = (e) => {
    y.value = !0, u("focus", e);
  }, m = (e) => {
    if (c(e)) {
      const [o, n] = e;
      return o && n ? [o, n].map((r) => r.format(i.format)) : [];
    }
    if (["date", "datetime"].includes(a.type) && a.timestamp) {
      const o = a.type === "date" ? e.startOf("day").valueOf() : e.valueOf();
      return 1e3 * Math.floor(o / 1e3);
    }
    return e.format(i.format);
  };
  function R(e) {
    var n;
    const o = m(e);
    u("update:modelValue", o), u("change", o), (n = x.value) == null || n.hide();
  }
  return (e, o) => (C(), S("div", { class: W(A.value), size: e.size }, [B(X, { ref_key: "dropdownRef", ref: x, disabled: e.disabled, autoFitMinWidth: !1, "click-to-close": !1, contentClass: e.contentClass, contentStyle: e.contentStyle }, { content: w(() => [q(e.$slots, "default", { onPick: R })]), default: w(() => [e.range ? (C(), S("div", Q, [B(z, { readonly: e.readonly, name: e.name, modelValue: t.value && t.value[0], placeholder: p.value[0], disabled: e.disabled, onInput: F, onChange: N, onBlur: v, onFocus: V, class: "start-input", size: e.size }, null, 8, ["readonly", "name", "modelValue", "placeholder", "disabled", "size"]), H("span", Y, K(e.rangeSeparator), 1), B(z, { readonly: e.readonly, name: e.name, "allow-clear": !e.disabled && e.allowClear, placeholder: p.value[1], modelValue: t.value && t.value[1], disabled: e.disabled, onInput: O, onChange: P, onBlur: v, onFocus: V, class: "end-input", size: e.size, onClear: k }, null, 8, ["readonly", "name", "allow-clear", "placeholder", "modelValue", "disabled", "size"])])) : (C(), G(z, { key: 0, name: e.name, readonly: e.readonly, placeholder: p.value[0], "prefix-icon": e.prefixIcon, "suffix-icon": e.suffixIcon, disabled: e.disabled, modelValue: t.value, onInput: E, onChange: j, onBlur: v, onFocus: V, "allow-clear": !e.disabled && e.allowClear, size: e.size, onClear: k }, null, 8, ["name", "readonly", "placeholder", "prefix-icon", "suffix-icon", "disabled", "modelValue", "allow-clear", "size"]))]), _: 3 }, 8, ["disabled", "contentClass", "contentStyle"])], 10, L));
} });
export {
  re as default
};