vft 0.0.374 → 0.0.375

package/es/components/time-picker/common/picker.vue2.js

@@ -1,35 +1,36 @@
-import { defineComponent as ge, ref as f, useAttrs as Ge, inject as Qe, computed as s, watch as Xe, nextTick as H, unref as n, onBeforeUnmount as Ze, provide as _e, createBlock as h, openBlock as g, mergeProps as xe, withCtx as y, renderSlot as se, withModifiers as T, normalizeStyle as ie, normalizeClass as b, createCommentVNode as B, createElementVNode as ea, toDisplayString as aa } from "vue";
-import { isEqual as la } from "lodash-es";
-import { onClickOutside as oa, unrefElement as na } from "@vueuse/core";
-import { isArray as V, noop as ce } from "@vft/utils";
-import { debugWarn as pe } from "../../../utils/error.js";
+import { defineComponent, ref, useAttrs, inject, computed, watch, nextTick, unref, onBeforeUnmount, provide, createBlock, openBlock, mergeProps, withCtx, renderSlot, withModifiers, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { isEqual } from "lodash-es";
+import { onClickOutside, unrefElement } from "@vueuse/core";
+import { isArray, noop } from "@vft/utils";
+import { debugWarn } from "../../../utils/error.js";
 import "../../config-provider/hooks/use-global-config.js";
-import { EVENT_CODE as F } from "../../../constants/aria.js";
-import { UPDATE_MODEL_EVENT as fe, CHANGE_EVENT as ve } from "../../../constants/event.js";
-import { useNamespace as G } from "../../../hooks/use-namespace/index.js";
+import { EVENT_CODE } from "../../../constants/aria.js";
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from "../../../constants/event.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import { useFocusController as ta } from "../../../hooks/use-focus-controller/index.js";
-import { useEmptyValues as ra } from "../../../hooks/use-empty-values/index.js";
+import { useFocusController } from "../../../hooks/use-focus-controller/index.js";
+import { useEmptyValues } from "../../../hooks/use-empty-values/index.js";
 import "../../form/index.js";
-import { VftInput as ua } from "../../input/index.js";
-import { VftIcon as K } from "../../icon/index.js";
-import { VftTooltip as sa } from "../../tooltip/index.js";
-import { valueEquals as de, parseDate as me, dayOrDaysToDate as $, formatter as he } from "../utils.js";
-import { PICKER_POPPER_OPTIONS_INJECTION_KEY as ia, PICKER_BASE_INJECTION_KEY as ca } from "../constants.js";
-import { timePickerDefaultProps as pa } from "./props.js";
-import fa from "./picker-range-trigger.vue2.js";
-import { useFormItem as va } from "../../form/hooks/use-form-item.js";
-import { useFormSize as da } from "../../form/hooks/use-form-common-props.js";
-const ma = ge({
+import { VftInput } from "../../input/index.js";
+import { VftIcon } from "../../icon/index.js";
+import { VftTooltip } from "../../tooltip/index.js";
+import { valueEquals, parseDate, dayOrDaysToDate, formatter } from "../utils.js";
+import { PICKER_POPPER_OPTIONS_INJECTION_KEY, PICKER_BASE_INJECTION_KEY } from "../constants.js";
+import { timePickerDefaultProps } from "./props.js";
+import _sfc_main$1 from "./picker-range-trigger.vue2.js";
+import { useFormItem } from "../../form/hooks/use-form-item.js";
+import { useFormSize } from "../../form/hooks/use-form-common-props.js";
+const __default__ = defineComponent({
   name: "Picker"
-}), Ua = /* @__PURE__ */ ge({
-  ...ma,
-  props: pa,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: timePickerDefaultProps,
   emits: [
-    fe,
-    ve,
+    UPDATE_MODEL_EVENT,
+    CHANGE_EVENT,
     "focus",
     "blur",
     "clear",
@@ -38,366 +39,588 @@ const ma = ge({
     "visible-change",
     "keydown"
   ],
-  setup(ye, { expose: be, emit: ke }) {
-    const l = ye, v = ke, E = f("zh-cn"), Ie = Ge(), d = G("date"), w = G("input"), k = G("range"), { form: Pe, formItem: Q } = va(), Ve = Qe(
-      ia,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const lang = ref("zh-cn");
+    const attrs = useAttrs();
+    const nsDate = useNamespace("date");
+    const nsInput = useNamespace("input");
+    const nsRange = useNamespace("range");
+    const { form, formItem } = useFormItem();
+    const elPopperOptions = inject(
+      PICKER_POPPER_OPTIONS_INJECTION_KEY,
       {}
-    ), { valueOnClear: S } = ra(l, null), A = f(), c = f(), r = f(!1), z = f(!1), U = f(null);
-    let L = !1;
-    const p = s(() => l.disabled || !!Pe?.disabled), { isFocused: X, handleFocus: Z, handleBlur: _ } = ta(c, {
-      disabled: p,
+    );
+    const { valueOnClear } = useEmptyValues(props, null);
+    const refPopper = ref();
+    const inputRef = ref();
+    const pickerVisible = ref(false);
+    const pickerActualVisible = ref(false);
+    const valueOnOpen = ref(null);
+    let hasJustTabExitedInput = false;
+    const pickerDisabled = computed(() => {
+      return props.disabled || !!form?.disabled;
+    });
+    const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
+      disabled: pickerDisabled,
       beforeFocus() {
-        return l.readonly;
+        return props.readonly;
       },
       afterFocus() {
-        r.value = !0;
+        pickerVisible.value = true;
       },
-      beforeBlur(e) {
-        return !L && A.value?.isFocusInsideContent(e);
+      beforeBlur(event) {
+        return !hasJustTabExitedInput && refPopper.value?.isFocusInsideContent(event);
       },
       afterBlur() {
-        J(), r.value = !1, L = !1, l.validateEvent && Q?.validate("blur").catch((e) => pe(e));
+        handleChange();
+        pickerVisible.value = false;
+        hasJustTabExitedInput = false;
+        props.validateEvent && formItem?.validate("blur").catch((err) => debugWarn(err));
       }
-    }), Ee = s(() => [
-      d.b("editor"),
-      d.bm("editor", l.type),
-      w.e("wrapper"),
-      d.is("disabled", p.value),
-      d.is("active", r.value),
-      k.b("editor"),
-      q ? k.bm("editor", q.value) : "",
-      Ie.class
-    ]), we = s(() => [
-      w.e("icon"),
-      k.e("close-icon"),
-      P.value ? "" : k.e("close-icon--hidden")
+    });
+    const rangeInputKls = computed(() => [
+      nsDate.b("editor"),
+      nsDate.bm("editor", props.type),
+      nsInput.e("wrapper"),
+      nsDate.is("disabled", pickerDisabled.value),
+      nsDate.is("active", pickerVisible.value),
+      nsRange.b("editor"),
+      pickerSize ? nsRange.bm("editor", pickerSize.value) : "",
+      attrs.class
     ]);
-    Xe(r, (e) => {
-      e ? H(() => {
-        e && (U.value = l.modelValue);
-      }) : (o.value = null, H(() => {
-        j(l.modelValue);
-      }));
+    const clearIconKls = computed(() => [
+      nsInput.e("icon"),
+      nsRange.e("close-icon"),
+      !showClose.value ? nsRange.e("close-icon--hidden") : ""
+    ]);
+    watch(pickerVisible, (val) => {
+      if (!val) {
+        userInput.value = null;
+        nextTick(() => {
+          emitChange(props.modelValue);
+        });
+      } else {
+        nextTick(() => {
+          if (val) {
+            valueOnOpen.value = props.modelValue;
+          }
+        });
+      }
+    });
+    const emitChange = (val, isClear) => {
+      if (isClear || !valueEquals(val, valueOnOpen.value)) {
+        emit(CHANGE_EVENT, val);
+        isClear && (valueOnOpen.value = val);
+        props.validateEvent && formItem?.validate("change").catch((err) => debugWarn(err));
+      }
+    };
+    const emitInput = (input) => {
+      if (!valueEquals(props.modelValue, input)) {
+        let formatted;
+        if (isArray(input)) {
+          formatted = input.map(
+            (item) => formatter(item, props.valueFormat, lang.value)
+          );
+        } else if (input) {
+          formatted = formatter(input, props.valueFormat, lang.value);
+        }
+        emit(UPDATE_MODEL_EVENT, input ? formatted : input, lang.value);
+      }
+    };
+    const emitKeydown = (e) => {
+      emit("keydown", e);
+    };
+    const refInput = computed(() => {
+      if (inputRef.value) {
+        return Array.from(
+          inputRef.value.$el.querySelectorAll("input")
+        );
+      }
+      return [];
     });
-    const j = (e, a) => {
-      (a || !de(e, U.value)) && (v(ve, e), a && (U.value = e), l.validateEvent && Q?.validate("change").catch((t) => pe(t)));
-    }, m = (e) => {
-      if (!de(l.modelValue, e)) {
-        let a;
-        V(e) ? a = e.map(
-          (t) => he(t, l.valueFormat, E.value)
-        ) : e && (a = he(e, l.valueFormat, E.value)), v(fe, e && a, E.value);
+    const setSelectionRange = (start, end, pos) => {
+      const _inputs = refInput.value;
+      if (!_inputs.length) return;
+      if (!pos || pos === "min") {
+        _inputs[0].setSelectionRange(start, end);
+        _inputs[0].focus();
+      } else if (pos === "max") {
+        _inputs[1].setSelectionRange(start, end);
+        _inputs[1].focus();
+      }
+    };
+    const onPick = (date = "", visible = false) => {
+      pickerVisible.value = visible;
+      let result;
+      if (isArray(date)) {
+        result = date.map((_) => _.toDate());
+      } else {
+        result = date ? date.toDate() : date;
       }
-    }, Ce = (e) => {
-      v("keydown", e);
-    }, Te = s(() => c.value ? Array.from(
-      c.value.$el.querySelectorAll("input")
-    ) : []), Fe = (e, a, t) => {
-      const i = Te.value;
-      i.length && (!t || t === "min" ? (i[0].setSelectionRange(e, a), i[0].focus()) : t === "max" && (i[1].setSelectionRange(e, a), i[1].focus()));
-    }, x = (e = "", a = !1) => {
-      r.value = a;
-      let t;
-      V(e) ? t = e.map((i) => i.toDate()) : t = e && e.toDate(), o.value = null, m(t);
-    }, Se = () => {
-      z.value = !0;
-    }, De = () => {
-      v("visible-change", !0);
-    }, ee = () => {
-      z.value = !1, r.value = !1, v("visible-change", !1);
-    }, Ne = () => {
-      r.value = !0;
-    }, Re = () => {
-      r.value = !1;
-    }, D = s(() => {
-      let e;
-      if (C.value ? u.value.getDefaultValue && (e = u.value.getDefaultValue()) : V(l.modelValue) ? e = l.modelValue.map(
-        (a) => me(a, l.valueFormat, E.value)
-      ) : e = me(l.modelValue, l.valueFormat, E.value), u.value.getRangeAvailableTime) {
-        const a = u.value.getRangeAvailableTime(
-          e
+      userInput.value = null;
+      emitInput(result);
+    };
+    const onBeforeShow = () => {
+      pickerActualVisible.value = true;
+    };
+    const onShow = () => {
+      emit("visible-change", true);
+    };
+    const onHide = () => {
+      pickerActualVisible.value = false;
+      pickerVisible.value = false;
+      emit("visible-change", false);
+    };
+    const handleOpen = () => {
+      pickerVisible.value = true;
+    };
+    const handleClose = () => {
+      pickerVisible.value = false;
+    };
+    const parsedValue = computed(() => {
+      let dayOrDays;
+      if (valueIsEmpty.value) {
+        if (pickerOptions.value.getDefaultValue) {
+          dayOrDays = pickerOptions.value.getDefaultValue();
+        }
+      } else {
+        if (isArray(props.modelValue)) {
+          dayOrDays = props.modelValue.map(
+            (d) => parseDate(d, props.valueFormat, lang.value)
+          );
+        } else {
+          dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value);
+        }
+      }
+      if (pickerOptions.value.getRangeAvailableTime) {
+        const availableResult = pickerOptions.value.getRangeAvailableTime(
+          dayOrDays
         );
-        la(a, e) || (e = a, C.value || m($(e)));
+        if (!isEqual(availableResult, dayOrDays)) {
+          dayOrDays = availableResult;
+          if (!valueIsEmpty.value) {
+            emitInput(dayOrDaysToDate(dayOrDays));
+          }
+        }
+      }
+      if (isArray(dayOrDays) && dayOrDays.some((day) => !day)) {
+        dayOrDays = [];
+      }
+      return dayOrDays;
+    });
+    const displayValue = computed(() => {
+      if (!pickerOptions.value.panelReady) return "";
+      const formattedValue = formatDayjsToString(parsedValue.value);
+      if (isArray(userInput.value)) {
+        return [
+          userInput.value[0] || formattedValue && formattedValue[0] || "",
+          userInput.value[1] || formattedValue && formattedValue[1] || ""
+        ];
+      } else if (userInput.value !== null) {
+        return userInput.value;
+      }
+      if (!isTimePicker.value && valueIsEmpty.value) return "";
+      if (!pickerVisible.value && valueIsEmpty.value) return "";
+      if (formattedValue) {
+        return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value ? formattedValue.join(", ") : formattedValue;
+      }
+      return "";
+    });
+    const isTimeLikePicker = computed(() => props.type.includes("time"));
+    const isTimePicker = computed(() => props.type.startsWith("time"));
+    const isDatesPicker = computed(() => props.type === "dates");
+    const isMonthsPicker = computed(() => props.type === "months");
+    const isYearsPicker = computed(() => props.type === "years");
+    const triggerIcon = computed(
+      () => props.prefixIcon || (isTimeLikePicker.value ? "icon-clock" : "icon-calendar")
+    );
+    const showClose = ref(false);
+    const onClearIconClick = (event) => {
+      if (props.readonly || pickerDisabled.value) return;
+      if (showClose.value) {
+        event.stopPropagation();
+        if (pickerOptions.value.handleClear) {
+          pickerOptions.value.handleClear();
+        } else {
+          emitInput(valueOnClear.value);
+        }
+        emitChange(valueOnClear.value, true);
+        showClose.value = false;
+        onHide();
+      }
+      emit("clear");
+    };
+    const valueIsEmpty = computed(() => {
+      const { modelValue } = props;
+      return !modelValue || isArray(modelValue) && !modelValue.filter(Boolean).length;
+    });
+    const onMouseDownInput = async (event) => {
+      if (props.readonly || pickerDisabled.value) return;
+      if (event.target?.tagName !== "INPUT" || isFocused.value) {
+        pickerVisible.value = true;
+      }
+    };
+    const onMouseEnter = () => {
+      if (props.readonly || pickerDisabled.value) return;
+      if (!valueIsEmpty.value && props.clearable) {
+        showClose.value = true;
       }
-      return V(e) && e.some((a) => !a) && (e = []), e;
-    }), I = s(() => {
-      if (!u.value.panelReady) return "";
-      const e = Y(D.value);
-      return V(o.value) ? [
-        o.value[0] || e && e[0] || "",
-        o.value[1] || e && e[1] || ""
-      ] : o.value !== null ? o.value : !Oe.value && C.value || !r.value && C.value ? "" : e ? ae.value || le.value || oe.value ? e.join(", ") : e : "";
-    }), Me = s(() => l.type.includes("time")), Oe = s(() => l.type.startsWith("time")), ae = s(() => l.type === "dates"), le = s(() => l.type === "months"), oe = s(() => l.type === "years"), N = s(
-      () => l.prefixIcon || (Me.value ? "icon-clock" : "icon-calendar")
-    ), P = f(!1), ne = (e) => {
-      l.readonly || p.value || (P.value && (e.stopPropagation(), u.value.handleClear ? u.value.handleClear() : m(S.value), j(S.value, !0), P.value = !1, ee()), v("clear"));
-    }, C = s(() => {
-      const { modelValue: e } = l;
-      return !e || V(e) && !e.filter(Boolean).length;
-    }), R = async (e) => {
-      l.readonly || p.value || (e.target?.tagName !== "INPUT" || X.value) && (r.value = !0);
-    }, te = () => {
-      l.readonly || p.value || !C.value && l.clearable && (P.value = !0);
-    }, re = () => {
-      P.value = !1;
-    }, W = (e) => {
-      l.readonly || p.value || (e.touches[0].target?.tagName !== "INPUT" || X.value) && (r.value = !0);
-    }, Be = s(() => l.type.includes("range")), q = da(), Ke = s(() => n(A)?.popperRef?.contentRef), $e = oa(
-      c,
+    };
+    const onMouseLeave = () => {
+      showClose.value = false;
+    };
+    const onTouchStartInput = (event) => {
+      if (props.readonly || pickerDisabled.value) return;
+      if (event.touches[0].target?.tagName !== "INPUT" || isFocused.value) {
+        pickerVisible.value = true;
+      }
+    };
+    const isRangeInput = computed(() => {
+      return props.type.includes("range");
+    });
+    const pickerSize = useFormSize();
+    const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef);
+    const stophandle = onClickOutside(
+      inputRef,
       (e) => {
-        const a = n(Ke), t = na(c);
-        a && (e.target === a || e.composedPath().includes(a)) || e.target === t || t && e.composedPath().includes(t) || (r.value = !1);
+        const unrefedPopperEl = unref(popperEl);
+        const inputEl = unrefElement(inputRef);
+        if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || inputEl && e.composedPath().includes(inputEl))
+          return;
+        pickerVisible.value = false;
       }
     );
-    Ze(() => {
-      $e?.();
+    onBeforeUnmount(() => {
+      stophandle?.();
     });
-    const o = f(null), J = () => {
-      if (o.value) {
-        const e = M(I.value);
-        e && O(e) && (m($(e)), o.value = null);
+    const userInput = ref(null);
+    const handleChange = () => {
+      if (userInput.value) {
+        const value = parseUserInputToDayjs(displayValue.value);
+        if (value) {
+          if (isValidValue(value)) {
+            emitInput(dayOrDaysToDate(value));
+            userInput.value = null;
+          }
+        }
       }
-      o.value === "" && (m(S.value), j(S.value, !0), o.value = null);
-    }, M = (e) => e ? u.value.parseUserInput(e) : null, Y = (e) => e ? u.value.formatToString(e) : null, O = (e) => u.value.isValidValue(e), ue = async (e) => {
-      if (l.readonly || p.value) return;
-      const { code: a } = e;
-      if (Ce(e), a === F.esc) {
-        r.value === !0 && (r.value = !1, e.preventDefault(), e.stopPropagation());
-        return;
+      if (userInput.value === "") {
+        emitInput(valueOnClear.value);
+        emitChange(valueOnClear.value, true);
+        userInput.value = null;
       }
-      if (a === F.down && (u.value.handleFocusPicker && (e.preventDefault(), e.stopPropagation()), r.value === !1 && (r.value = !0, await H()), u.value.handleFocusPicker)) {
-        u.value.handleFocusPicker();
+    };
+    const parseUserInputToDayjs = (value) => {
+      if (!value) return null;
+      return pickerOptions.value.parseUserInput(value);
+    };
+    const formatDayjsToString = (value) => {
+      if (!value) return null;
+      return pickerOptions.value.formatToString(value);
+    };
+    const isValidValue = (value) => {
+      return pickerOptions.value.isValidValue(value);
+    };
+    const handleKeydownInput = async (event) => {
+      if (props.readonly || pickerDisabled.value) return;
+      const { code } = event;
+      emitKeydown(event);
+      if (code === EVENT_CODE.esc) {
+        if (pickerVisible.value === true) {
+          pickerVisible.value = false;
+          event.preventDefault();
+          event.stopPropagation();
+        }
         return;
       }
-      if (a === F.tab) {
-        L = !0;
+      if (code === EVENT_CODE.down) {
+        if (pickerOptions.value.handleFocusPicker) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        if (pickerVisible.value === false) {
+          pickerVisible.value = true;
+          await nextTick();
+        }
+        if (pickerOptions.value.handleFocusPicker) {
+          pickerOptions.value.handleFocusPicker();
+          return;
+        }
+      }
+      if (code === EVENT_CODE.tab) {
+        hasJustTabExitedInput = true;
         return;
       }
-      if (a === F.enter || a === F.numpadEnter) {
-        (o.value === null || o.value === "" || O(M(I.value))) && (J(), r.value = !1), e.stopPropagation();
+      if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
+        if (userInput.value === null || userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) {
+          handleChange();
+          pickerVisible.value = false;
+        }
+        event.stopPropagation();
         return;
       }
-      if (o.value) {
-        e.stopPropagation();
+      if (userInput.value) {
+        event.stopPropagation();
         return;
       }
-      u.value.handleKeydownInput && u.value.handleKeydownInput(e);
-    }, Ae = (e) => {
-      o.value = e, r.value || (r.value = !0);
-    }, ze = (e) => {
-      const a = e.target;
-      o.value ? o.value = [a.value, o.value[1]] : o.value = [a.value, null];
-    }, Ue = (e) => {
-      const a = e.target;
-      o.value ? o.value = [o.value[0], a.value] : o.value = [null, a.value];
-    }, Le = () => {
-      const e = o.value, a = M(e && e[0]), t = n(D);
-      if (a && a.isValid()) {
-        o.value = [
-          Y(a),
-          I.value?.[1] || null
+      if (pickerOptions.value.handleKeydownInput) {
+        pickerOptions.value.handleKeydownInput(event);
+      }
+    };
+    const onUserInput = (e) => {
+      userInput.value = e;
+      if (!pickerVisible.value) {
+        pickerVisible.value = true;
+      }
+    };
+    const handleStartInput = (event) => {
+      const target = event.target;
+      if (userInput.value) {
+        userInput.value = [target.value, userInput.value[1]];
+      } else {
+        userInput.value = [target.value, null];
+      }
+    };
+    const handleEndInput = (event) => {
+      const target = event.target;
+      if (userInput.value) {
+        userInput.value = [userInput.value[0], target.value];
+      } else {
+        userInput.value = [null, target.value];
+      }
+    };
+    const handleStartChange = () => {
+      const values = userInput.value;
+      const value = parseUserInputToDayjs(values && values[0]);
+      const parsedVal = unref(parsedValue);
+      if (value && value.isValid()) {
+        userInput.value = [
+          formatDayjsToString(value),
+          displayValue.value?.[1] || null
         ];
-        const i = [a, t && (t[1] || null)];
-        O(i) && (m($(i)), o.value = null);
+        const newValue = [value, parsedVal && (parsedVal[1] || null)];
+        if (isValidValue(newValue)) {
+          emitInput(dayOrDaysToDate(newValue));
+          userInput.value = null;
+        }
       }
-    }, je = () => {
-      const e = n(o), a = M(e && e[1]), t = n(D);
-      if (a && a.isValid()) {
-        o.value = [
-          n(I)?.[0] || null,
-          Y(a)
+    };
+    const handleEndChange = () => {
+      const values = unref(userInput);
+      const value = parseUserInputToDayjs(values && values[1]);
+      const parsedVal = unref(parsedValue);
+      if (value && value.isValid()) {
+        userInput.value = [
+          unref(displayValue)?.[0] || null,
+          formatDayjsToString(value)
         ];
-        const i = [t && t[0], a];
-        O(i) && (m($(i)), o.value = null);
+        const newValue = [parsedVal && parsedVal[0], value];
+        if (isValidValue(newValue)) {
+          emitInput(dayOrDaysToDate(newValue));
+          userInput.value = null;
+        }
       }
-    }, u = f({}), We = (e) => {
-      u.value[e[0]] = e[1], u.value.panelReady = !0;
-    }, qe = (e) => {
-      v("calendar-change", e);
-    }, Je = (e, a, t) => {
-      v("panel-change", e, a, t);
-    }, Ye = () => {
-      c.value?.focus();
-    }, He = () => {
-      c.value?.blur();
     };
-    return _e(ca, {
-      props: l
-    }), be({
+    const pickerOptions = ref({});
+    const onSetPickerOption = (e) => {
+      pickerOptions.value[e[0]] = e[1];
+      pickerOptions.value.panelReady = true;
+    };
+    const onCalendarChange = (e) => {
+      emit("calendar-change", e);
+    };
+    const onPanelChange = (value, mode, view) => {
+      emit("panel-change", value, mode, view);
+    };
+    const focus = () => {
+      inputRef.value?.focus();
+    };
+    const blur = () => {
+      inputRef.value?.blur();
+    };
+    provide(PICKER_BASE_INJECTION_KEY, {
+      props
+    });
+    __expose({
       /**
        * @description focus input box.
        */
-      focus: Ye,
+      focus,
       /**
        * @description blur input box.
        */
-      blur: He,
+      blur,
       /**
        * @description opens picker
        */
-      handleOpen: Ne,
+      handleOpen,
       /**
        * @description closes picker
        */
-      handleClose: Re,
+      handleClose,
       /**
        * @description pick item manually
        */
-      onPick: x
-    }), (e, a) => (g(), h(n(sa), xe({
-      ref_key: "refPopper",
-      ref: A,
-      visible: r.value,
-      effect: "light",
-      pure: "",
-      trigger: "click"
-    }, e.$attrs, {
-      role: "dialog",
-      teleported: "",
-      transition: `${n(d).namespace.value}-zoom-in-top`,
-      "popper-class": [`${n(d).namespace.value}-picker__popper`, e.popperClass],
-      "popper-options": n(Ve),
-      "fallback-placements": e.fallbackPlacements,
-      "gpu-acceleration": !1,
-      placement: e.placement,
-      "stop-popper-mouse-event": !1,
-      "hide-after": 0,
-      persistent: "",
-      onBeforeShow: Se,
-      onShow: De,
-      onHide: ee
-    }), {
-      default: y(() => [
-        Be.value ? (g(), h(fa, {
-          key: 1,
-          id: e.id,
-          ref_key: "inputRef",
-          ref: c,
-          "model-value": I.value,
-          name: e.name,
-          disabled: p.value,
-          readonly: !e.editable || e.readonly,
-          "start-placeholder": e.startPlaceholder,
-          "end-placeholder": e.endPlaceholder,
-          class: b(Ee.value),
-          style: ie(e.$attrs.style),
-          "aria-label": e.ariaLabel,
-          tabindex: e.tabindex,
-          autocomplete: "off",
-          role: "combobox",
-          onClick: R,
-          onFocus: n(Z),
-          onBlur: n(_),
-          onStartInput: ze,
-          onStartChange: Le,
-          onEndInput: Ue,
-          onEndChange: je,
-          onMousedown: R,
-          onMouseenter: te,
-          onMouseleave: re,
-          onTouchstartPassive: W,
-          onKeydown: ue
-        }, {
-          prefix: y(() => [
-            N.value ? (g(), h(n(K), {
-              key: 0,
-              icon: N.value,
-              class: b([n(w).e("icon"), n(k).e("icon")])
-            }, null, 8, ["icon", "class"])) : B("", !0)
-          ]),
-          "range-separator": y(() => [
-            se(e.$slots, "range-separator", {}, () => [
-              ea("span", {
-                class: b(n(k).b("separator"))
-              }, aa(e.rangeSeparator), 3)
-            ])
-          ]),
-          suffix: y(() => [
-            e.clearIcon ? (g(), h(n(K), {
-              key: 0,
-              icon: e.clearIcon,
-              class: b(we.value),
-              onMousedown: T(n(ce), ["prevent"]),
-              onClick: ne
-            }, null, 8, ["icon", "class", "onMousedown"])) : B("", !0)
-          ]),
-          _: 3
-        }, 8, ["id", "model-value", "name", "disabled", "readonly", "start-placeholder", "end-placeholder", "class", "style", "aria-label", "tabindex", "onFocus", "onBlur"])) : (g(), h(n(ua), {
-          key: 0,
-          id: e.id,
-          ref_key: "inputRef",
-          ref: c,
-          "container-role": "combobox",
-          "model-value": I.value,
-          name: e.name,
-          size: n(q),
-          disabled: p.value,
-          placeholder: e.placeholder,
-          class: b([n(d).b("editor"), n(d).bm("editor", e.type), e.$attrs.class]),
-          style: ie(e.$attrs.style),
-          readonly: !e.editable || e.readonly || ae.value || le.value || oe.value || e.type === "week",
-          "aria-label": e.ariaLabel,
-          tabindex: e.tabindex,
-          "validate-event": !1,
-          onInput: Ae,
-          onFocus: n(Z),
-          onBlur: n(_),
-          onKeydown: ue,
-          onChange: J,
-          onMousedown: R,
-          onMouseenter: te,
-          onMouseleave: re,
-          onTouchstartPassive: W,
-          onClick: a[0] || (a[0] = T(() => {
-          }, ["stop"]))
-        }, {
-          prefix: y(() => [
-            N.value ? (g(), h(n(K), {
-              key: 0,
-              icon: N.value,
-              class: b(n(w).e("icon")),
-              onMousedown: T(R, ["prevent"]),
-              onTouchstartPassive: W
-            }, null, 8, ["icon", "class"])) : B("", !0)
-          ]),
-          suffix: y(() => [
-            P.value && e.clearIcon ? (g(), h(n(K), {
-              key: 0,
-              icon: e.clearIcon,
-              class: b(`${n(w).e("icon")} clear-icon`),
-              onMousedown: T(n(ce), ["prevent"]),
-              onClick: ne
-            }, null, 8, ["icon", "class", "onMousedown"])) : B("", !0)
-          ]),
-          _: 1
-        }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur"]))
-      ]),
-      content: y(() => [
-        se(e.$slots, "default", {
-          visible: r.value,
-          actualVisible: z.value,
-          parsedValue: D.value,
-          format: e.format,
-          dateFormat: e.dateFormat,
-          timeFormat: e.timeFormat,
-          unlinkPanels: e.unlinkPanels,
-          type: e.type,
-          defaultValue: e.defaultValue,
-          showNow: e.showNow,
-          showWeekNumber: e.showWeekNumber,
-          onPick: x,
-          onSelectRange: Fe,
-          onSetPickerOption: We,
-          onCalendarChange: qe,
-          onPanelChange: Je,
-          onMousedown: a[1] || (a[1] = T(() => {
-          }, ["stop"]))
-        })
-      ]),
-      _: 3
-    }, 16, ["visible", "transition", "popper-class", "popper-options", "fallback-placements", "placement"]));
+      onPick
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(VftTooltip), mergeProps({
+        ref_key: "refPopper",
+        ref: refPopper,
+        visible: pickerVisible.value,
+        effect: "light",
+        pure: "",
+        trigger: "click"
+      }, _ctx.$attrs, {
+        role: "dialog",
+        teleported: "",
+        transition: `${unref(nsDate).namespace.value}-zoom-in-top`,
+        "popper-class": [`${unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
+        "popper-options": unref(elPopperOptions),
+        "fallback-placements": _ctx.fallbackPlacements,
+        "gpu-acceleration": false,
+        placement: _ctx.placement,
+        "stop-popper-mouse-event": false,
+        "hide-after": 0,
+        persistent: "",
+        onBeforeShow,
+        onShow,
+        onHide
+      }), {
+        default: withCtx(() => [
+          !isRangeInput.value ? (openBlock(), createBlock(unref(VftInput), {
+            key: 0,
+            id: _ctx.id,
+            ref_key: "inputRef",
+            ref: inputRef,
+            "container-role": "combobox",
+            "model-value": displayValue.value,
+            name: _ctx.name,
+            size: unref(pickerSize),
+            disabled: pickerDisabled.value,
+            placeholder: _ctx.placeholder,
+            class: normalizeClass([unref(nsDate).b("editor"), unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
+            style: normalizeStyle(_ctx.$attrs.style),
+            readonly: !_ctx.editable || _ctx.readonly || isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value || _ctx.type === "week",
+            "aria-label": _ctx.ariaLabel,
+            tabindex: _ctx.tabindex,
+            "validate-event": false,
+            onInput: onUserInput,
+            onFocus: unref(handleFocus),
+            onBlur: unref(handleBlur),
+            onKeydown: handleKeydownInput,
+            onChange: handleChange,
+            onMousedown: onMouseDownInput,
+            onMouseenter: onMouseEnter,
+            onMouseleave: onMouseLeave,
+            onTouchstartPassive: onTouchStartInput,
+            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["stop"]))
+          }, {
+            prefix: withCtx(() => [
+              triggerIcon.value ? (openBlock(), createBlock(unref(VftIcon), {
+                key: 0,
+                icon: triggerIcon.value,
+                class: normalizeClass(unref(nsInput).e("icon")),
+                onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
+                onTouchstartPassive: onTouchStartInput
+              }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
+            ]),
+            suffix: withCtx(() => [
+              showClose.value && _ctx.clearIcon ? (openBlock(), createBlock(unref(VftIcon), {
+                key: 0,
+                icon: _ctx.clearIcon,
+                class: normalizeClass(`${unref(nsInput).e("icon")} clear-icon`),
+                onMousedown: withModifiers(unref(noop), ["prevent"]),
+                onClick: onClearIconClick
+              }, null, 8, ["icon", "class", "onMousedown"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur"])) : (openBlock(), createBlock(_sfc_main$1, {
+            key: 1,
+            id: _ctx.id,
+            ref_key: "inputRef",
+            ref: inputRef,
+            "model-value": displayValue.value,
+            name: _ctx.name,
+            disabled: pickerDisabled.value,
+            readonly: !_ctx.editable || _ctx.readonly,
+            "start-placeholder": _ctx.startPlaceholder,
+            "end-placeholder": _ctx.endPlaceholder,
+            class: normalizeClass(rangeInputKls.value),
+            style: normalizeStyle(_ctx.$attrs.style),
+            "aria-label": _ctx.ariaLabel,
+            tabindex: _ctx.tabindex,
+            autocomplete: "off",
+            role: "combobox",
+            onClick: onMouseDownInput,
+            onFocus: unref(handleFocus),
+            onBlur: unref(handleBlur),
+            onStartInput: handleStartInput,
+            onStartChange: handleStartChange,
+            onEndInput: handleEndInput,
+            onEndChange: handleEndChange,
+            onMousedown: onMouseDownInput,
+            onMouseenter: onMouseEnter,
+            onMouseleave: onMouseLeave,
+            onTouchstartPassive: onTouchStartInput,
+            onKeydown: handleKeydownInput
+          }, {
+            prefix: withCtx(() => [
+              triggerIcon.value ? (openBlock(), createBlock(unref(VftIcon), {
+                key: 0,
+                icon: triggerIcon.value,
+                class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")])
+              }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
+            ]),
+            "range-separator": withCtx(() => [
+              renderSlot(_ctx.$slots, "range-separator", {}, () => [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(nsRange).b("separator"))
+                }, toDisplayString(_ctx.rangeSeparator), 3)
+              ])
+            ]),
+            suffix: withCtx(() => [
+              _ctx.clearIcon ? (openBlock(), createBlock(unref(VftIcon), {
+                key: 0,
+                icon: _ctx.clearIcon,
+                class: normalizeClass(clearIconKls.value),
+                onMousedown: withModifiers(unref(noop), ["prevent"]),
+                onClick: onClearIconClick
+              }, null, 8, ["icon", "class", "onMousedown"])) : createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["id", "model-value", "name", "disabled", "readonly", "start-placeholder", "end-placeholder", "class", "style", "aria-label", "tabindex", "onFocus", "onBlur"]))
+        ]),
+        content: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {
+            visible: pickerVisible.value,
+            actualVisible: pickerActualVisible.value,
+            parsedValue: parsedValue.value,
+            format: _ctx.format,
+            dateFormat: _ctx.dateFormat,
+            timeFormat: _ctx.timeFormat,
+            unlinkPanels: _ctx.unlinkPanels,
+            type: _ctx.type,
+            defaultValue: _ctx.defaultValue,
+            showNow: _ctx.showNow,
+            showWeekNumber: _ctx.showWeekNumber,
+            onPick,
+            onSelectRange: setSelectionRange,
+            onSetPickerOption,
+            onCalendarChange,
+            onPanelChange,
+            onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["stop"]))
+          })
+        ]),
+        _: 3
+      }, 16, ["visible", "transition", "popper-class", "popper-options", "fallback-placements", "placement"]);
+    };
   }
 });
 export {
-  Ua as default
+  _sfc_main as default
 };