vft 0.0.362 → 0.0.363

package/lib/components/time-picker/common/picker.vue2.cjs

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