vxe-pc-ui 4.1.19 → 4.1.21

package/packages/date-picker/src/date-picker.ts

@@ -1,21 +1,30 @@
 import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, VxeComponentStyleType } from '../../ui'
+import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { toStringTimeDate, getDateQuarter } from './util'
 import { getSlotVNs } from '../..//ui/src/vn'
 
-import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerReactData, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines } from '../../../types'
+import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeTableConstructor, VxeTablePrivateMethods, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeDatePicker',
   props: {
     modelValue: [String, Number, Date] as PropType<VxeDatePickerPropTypes.ModelValue>,
-    immediate: { type: Boolean as PropType<VxeDatePickerPropTypes.Immediate>, default: true },
+    immediate: {
+      type: Boolean as PropType<VxeDatePickerPropTypes.Immediate>,
+      default: true
+    },
     name: String as PropType<VxeDatePickerPropTypes.Name>,
-    type: { type: String as PropType<VxeDatePickerPropTypes.Type>, default: 'date' },
-    clearable: { type: Boolean as PropType<VxeDatePickerPropTypes.Clearable>, default: () => getConfig().datePicker.clearable },
+    type: {
+      type: String as PropType<VxeDatePickerPropTypes.Type>,
+      default: 'date'
+    },
+    clearable: {
+      type: Boolean as PropType<VxeDatePickerPropTypes.Clearable>,
+      default: () => getConfig().datePicker.clearable
+    },
     readonly: {
       type: Boolean as PropType<VxeDatePickerPropTypes.Readonly>,
       default: null
@@ -25,30 +34,55 @@ export default defineComponent({
       default: null
     },
     placeholder: String as PropType<VxeDatePickerPropTypes.Placeholder>,
-    maxlength: [String, Number] as PropType<VxeDatePickerPropTypes.Maxlength>,
-    autocomplete: { type: String as PropType<VxeDatePickerPropTypes.Autocomplete>, default: 'off' },
+    maxLength: [String, Number] as PropType<VxeDatePickerPropTypes.MaxLength>,
+    autoComplete: {
+      type: String as PropType<VxeDatePickerPropTypes.AutoComplete>,
+      default: 'off'
+    },
     align: String as PropType<VxeDatePickerPropTypes.Align>,
     form: String as PropType<VxeDatePickerPropTypes.Form>,
     className: String as PropType<VxeDatePickerPropTypes.ClassName>,
-    size: { type: String as PropType<VxeDatePickerPropTypes.Size>, default: () => getConfig().datePicker.size || getConfig().size },
+    size: {
+      type: String as PropType<VxeDatePickerPropTypes.Size>,
+      default: () => getConfig().datePicker.size || getConfig().size
+    },
     multiple: Boolean as PropType<VxeDatePickerPropTypes.Multiple>,
 
     // date、week、month、quarter、year
-    startDate: { type: [String, Number, Date] as PropType<VxeDatePickerPropTypes.MinDate>, default: () => getConfig().datePicker.startDate },
-    endDate: { type: [String, Number, Date] as PropType<VxeDatePickerPropTypes.MaxDate>, default: () => getConfig().datePicker.endDate },
+    startDate: {
+      type: [String, Number, Date] as PropType<VxeDatePickerPropTypes.MinDate>,
+      default: () => getConfig().datePicker.startDate
+    },
+    endDate: {
+      type: [String, Number, Date] as PropType<VxeDatePickerPropTypes.MaxDate>,
+      default: () => getConfig().datePicker.endDate
+    },
     minDate: [String, Number, Date] as PropType<VxeDatePickerPropTypes.MinDate>,
     maxDate: [String, Number, Date] as PropType<VxeDatePickerPropTypes.MaxDate>,
-    // 已废弃 startWeek，被 startDay 替换
-    startWeek: Number as PropType<VxeDatePickerPropTypes.StartDay>,
-    startDay: { type: [String, Number] as PropType<VxeDatePickerPropTypes.StartDay>, default: () => getConfig().datePicker.startDay },
+    startDay: {
+      type: [String, Number] as PropType<VxeDatePickerPropTypes.StartDay>,
+      default: () => getConfig().datePicker.startDay
+    },
     labelFormat: String as PropType<VxeDatePickerPropTypes.LabelFormat>,
     valueFormat: String as PropType<VxeDatePickerPropTypes.ValueFormat>,
-    editable: { type: Boolean as PropType<VxeDatePickerPropTypes.Editable>, default: true },
-    festivalMethod: { type: Function as PropType<VxeDatePickerPropTypes.FestivalMethod>, default: () => getConfig().datePicker.festivalMethod },
-    disabledMethod: { type: Function as PropType<VxeDatePickerPropTypes.DisabledMethod>, default: () => getConfig().datePicker.disabledMethod },
+    editable: {
+      type: Boolean as PropType<VxeDatePickerPropTypes.Editable>,
+      default: true
+    },
+    festivalMethod: {
+      type: Function as PropType<VxeDatePickerPropTypes.FestivalMethod>,
+      default: () => getConfig().datePicker.festivalMethod
+    },
+    disabledMethod: {
+      type: Function as PropType<VxeDatePickerPropTypes.DisabledMethod>,
+      default: () => getConfig().datePicker.disabledMethod
+    },
 
     // week
-    selectDay: { type: [String, Number] as PropType<VxeDatePickerPropTypes.SelectDay>, default: () => getConfig().datePicker.selectDay },
+    selectDay: {
+      type: [String, Number] as PropType<VxeDatePickerPropTypes.SelectDay>,
+      default: () => getConfig().datePicker.selectDay
+    },
 
     prefixIcon: String as PropType<VxeDatePickerPropTypes.PrefixIcon>,
     suffixIcon: String as PropType<VxeDatePickerPropTypes.SuffixIcon>,
@@ -56,7 +90,14 @@ export default defineComponent({
     transfer: {
       type: Boolean as PropType<VxeDatePickerPropTypes.Transfer>,
       default: null
-    }
+    },
+
+    // 已废弃 startWeek，被 startDay 替换
+    startWeek: Number as PropType<VxeDatePickerPropTypes.StartDay>,
+    // 已废弃
+    maxlength: [String, Number] as PropType<VxeDatePickerPropTypes.MaxLength>,
+    // 已废弃
+    autocomplete: String as PropType<VxeDatePickerPropTypes.AutoComplete>
   },
   emits: [
     'update:modelValue',
@@ -78,25 +119,22 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
 
-    const $xeModal = inject<VxeModalConstructor & VxeModalMethods | null>('$xeModal', null)
-    const $xeTable = inject<VxeTableConstructor & VxeTablePrivateMethods | null>('$xeTable', null)
-    const $xeForm = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
+    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
     const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
     const { computeSize } = useSize(props)
 
-    const yearSize = 12
-    const monthSize = 20
-    const quarterSize = 8
-
     const reactData = reactive<DatePickerReactData>({
       initialized: false,
       panelIndex: 0,
       visiblePanel: false,
       isAniVisible: false,
-      panelStyle: null,
+      panelStyle: {},
       panelPlacement: '',
       isActivated: false,
       inputValue: props.modelValue,
@@ -108,6 +146,13 @@ export default defineComponent({
       currentDate: null
     })
 
+    const internalData: DatePickerInternalData = {
+      yearSize: 12,
+      monthSize: 20,
+      quarterSize: 8,
+      hpTimeout: undefined
+    }
+
     const refElem = ref() as Ref<HTMLDivElement>
     const refInputTarget = ref() as Ref<HTMLInputElement>
     const refInputPanel = ref() as Ref<HTMLDivElement>
@@ -124,19 +169,12 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
       getRefMaps: () => refMaps
     } as unknown as VxeDatePickerConstructor
 
     let datePickerMethods = {} as DatePickerMethods
 
-    const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => {
-      const { type } = props
-      if (type === 'time') {
-        return toStringTimeDate(value)
-      }
-      return XEUtils.toStringDate(value, format)
-    }
-
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
       if (transfer === null) {
@@ -144,7 +182,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
           return true
         }
       }
@@ -209,7 +247,7 @@ export default defineComponent({
           if (XEUtils.isValidDate(date)) {
             return date
           }
-          return null
+          return date
         })
       }
       return []
@@ -232,7 +270,13 @@ export default defineComponent({
       if (valueFormat) {
         return valueFormat
       }
-      return type === 'time' ? 'HH:mm:ss' : (type === 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd')
+      if (type === 'time') {
+        return 'HH:mm:ss'
+      }
+      if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss'
+      }
+      return 'yyyy-MM-dd'
     })
 
     const computeDateValue = computed(() => {
@@ -293,6 +337,7 @@ export default defineComponent({
     })
 
     const computeYearList = computed(() => {
+      const { yearSize } = internalData
       const { selectMonth, currentDate } = reactData
       const years: VxeDatePickerDefines.DateYearItem[] = []
       if (selectMonth && currentDate) {
@@ -344,7 +389,7 @@ export default defineComponent({
     })
 
     const computeWeekDatas = computed(() => {
-      const weeks = []
+      const weeks: number[] = []
       const isDatePickerType = computeIsDatePickerType.value
       if (isDatePickerType) {
         let sWeek = computeFirstDayOfWeek.value
@@ -390,6 +435,7 @@ export default defineComponent({
     })
 
     const computeQuarterList = computed(() => {
+      const { quarterSize } = internalData
       const { selectMonth, currentDate } = reactData
       const quarters: VxeDatePickerDefines.DateQuarterItem[] = []
       if (selectMonth && currentDate) {
@@ -421,6 +467,7 @@ export default defineComponent({
     })
 
     const computeMonthList = computed(() => {
+      const { monthSize } = internalData
       const { selectMonth, currentDate } = reactData
       const months: VxeDatePickerDefines.DateMonthItem[] = []
       if (selectMonth && currentDate) {
@@ -576,12 +623,20 @@ export default defineComponent({
       return immediate
     })
 
+    const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => {
+      const { type } = props
+      if (type === 'time') {
+        return toStringTimeDate(value)
+      }
+      return XEUtils.toStringDate(value, format)
+    }
+
     const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => {
       const { inputValue } = reactData
       datePickerMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
-    const emitModel = (value: string, evnt: Event | { type: string }) => {
+    const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
       if (XEUtils.toValueString(props.modelValue) !== value) {
@@ -601,7 +656,7 @@ export default defineComponent({
       reactData.inputValue = value
       if (!isDatePickerType) {
         if (inpImmediate) {
-          emitModel(value, evnt)
+          handleChange(value, evnt)
         } else {
           datePickerMethods.dispatchEvent('input', { value }, evnt)
         }
@@ -632,12 +687,10 @@ export default defineComponent({
       }
     }
 
-    let hidePanelTimeout: number
-
-    const hidePanel = (): Promise<void> => {
-      return new Promise(resolve => {
+    const hidePanel = () => {
+      return new Promise<void>(resolve => {
         reactData.visiblePanel = false
-        hidePanelTimeout = window.setTimeout(() => {
+        internalData.hpTimeout = window.setTimeout(() => {
           reactData.isAniVisible = false
           resolve()
         }, 350)
@@ -649,7 +702,7 @@ export default defineComponent({
       if (isDatePickerType) {
         hidePanel()
       }
-      emitModel('', evnt)
+      handleChange('', evnt)
       datePickerMethods.dispatchEvent('clear', { value }, evnt)
     }
 
@@ -736,9 +789,11 @@ export default defineComponent({
         const sWeek = XEUtils.toNumber(props.selectDay) as VxeDatePickerPropTypes.SelectDay
         date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek)
       } else if (isDateTimeType) {
-        date.setHours(datetimePanelValue.getHours())
-        date.setMinutes(datetimePanelValue.getMinutes())
-        date.setSeconds(datetimePanelValue.getSeconds())
+        if (datetimePanelValue) {
+          date.setHours(datetimePanelValue.getHours())
+          date.setMinutes(datetimePanelValue.getMinutes())
+          date.setSeconds(datetimePanelValue.getSeconds())
+        }
       }
       const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek })
       dateCheckMonth(date)
@@ -757,25 +812,27 @@ export default defineComponent({
           }
           dateListValue.forEach(item => {
             if (item) {
-              item.setHours(datetimePanelValue.getHours())
-              item.setMinutes(datetimePanelValue.getMinutes())
-              item.setSeconds(datetimePanelValue.getSeconds())
+              if (datetimePanelValue) {
+                item.setHours(datetimePanelValue.getHours())
+                item.setMinutes(datetimePanelValue.getMinutes())
+                item.setSeconds(datetimePanelValue.getSeconds())
+              }
               datetimeRest.push(item)
             }
           })
-          emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+          handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
         } else {
           // 如果是日期类型
           if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-            emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
+            handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
           } else {
-            emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
+            handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
           }
         }
       } else {
         // 如果为单选
         if (!XEUtils.isEqual(modelValue, inpVal)) {
-          emitModel(inpVal, { type: 'update' })
+          handleChange(inpVal, { type: 'update' })
         }
       }
     }
@@ -792,7 +849,7 @@ export default defineComponent({
             if (type === 'time') {
               inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat)
               if (inputValue !== inpDateVal) {
-                emitModel(inpDateVal, { type: 'check' })
+                handleChange(inpDateVal, { type: 'check' })
               }
               reactData.inputValue = inpDateVal
             } else {
@@ -802,9 +859,11 @@ export default defineComponent({
                 const dateValue = computeDateValue.value
                 if (inputValue !== XEUtils.toDateString(dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
                   isChange = true
-                  datetimePanelValue.setHours(inpDateVal.getHours())
-                  datetimePanelValue.setMinutes(inpDateVal.getMinutes())
-                  datetimePanelValue.setSeconds(inpDateVal.getSeconds())
+                  if (datetimePanelValue) {
+                    datetimePanelValue.setHours(inpDateVal.getHours())
+                    datetimePanelValue.setMinutes(inpDateVal.getMinutes())
+                    datetimePanelValue.setSeconds(inpDateVal.getSeconds())
+                  }
                 }
               } else {
                 isChange = true
@@ -818,7 +877,7 @@ export default defineComponent({
             dateRevert()
           }
         } else {
-          emitModel('', { type: 'check' })
+          handleChange('', { type: 'check' })
         }
       }
     }
@@ -827,7 +886,7 @@ export default defineComponent({
       const { inputValue } = reactData
       const inpImmediate = computeInpImmediate.value
       if (!inpImmediate) {
-        emitModel(inputValue, evnt)
+        handleChange(inputValue, evnt)
       }
       afterCheckValue()
       if (!reactData.visiblePanel) {
@@ -875,6 +934,7 @@ export default defineComponent({
     const datePrevEvent = (evnt: Event) => {
       const { type } = props
       const { datePanelType, selectMonth } = reactData
+      const { yearSize } = internalData
       const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value
       if (!isDisabledPrevDateBtn) {
         if (type === 'year') {
@@ -910,6 +970,7 @@ export default defineComponent({
     const dateNextEvent = (evnt: Event) => {
       const { type } = props
       const { datePanelType, selectMonth } = reactData
+      const { yearSize } = internalData
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value
       if (!isDisabledNextDateBtn) {
         if (type === 'year') {
@@ -1057,12 +1118,16 @@ export default defineComponent({
     }
 
     const dateTimeChangeEvent = (evnt: Event) => {
-      reactData.datetimePanelValue = new Date(reactData.datetimePanelValue.getTime())
+      const { datetimePanelValue } = reactData
+      reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : new Date()
       updateTimePos(evnt.currentTarget as HTMLLIElement)
     }
 
     const dateHourEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
-      reactData.datetimePanelValue.setHours(item.value)
+      const { datetimePanelValue } = reactData
+      if (datetimePanelValue) {
+        datetimePanelValue.setHours(item.value)
+      }
       dateTimeChangeEvent(evnt)
     }
 
@@ -1082,16 +1147,18 @@ export default defineComponent({
             const datetimeRest: Date[] = []
             dateListValue.forEach(item => {
               if (item) {
-                item.setHours(datetimePanelValue.getHours())
-                item.setMinutes(datetimePanelValue.getMinutes())
-                item.setSeconds(datetimePanelValue.getSeconds())
+                if (datetimePanelValue) {
+                  item.setHours(datetimePanelValue.getHours())
+                  item.setMinutes(datetimePanelValue.getMinutes())
+                  item.setSeconds(datetimePanelValue.getSeconds())
+                }
                 datetimeRest.push(item)
               }
             })
-            emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+            handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
           } else {
             // 如果是日期类型
-            emitModel(dateMultipleValue.join(','), { type: 'update' })
+            handleChange(dateMultipleValue.join(','), { type: 'update' })
           }
         } else {
           dateChange(dateValue || reactData.currentDate)
@@ -1101,12 +1168,18 @@ export default defineComponent({
     }
 
     const dateMinuteEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
-      reactData.datetimePanelValue.setMinutes(item.value)
+      const { datetimePanelValue } = reactData
+      if (datetimePanelValue) {
+        datetimePanelValue.setMinutes(item.value)
+      }
       dateTimeChangeEvent(evnt)
     }
 
     const dateSecondEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
-      reactData.datetimePanelValue.setSeconds(item.value)
+      const { datetimePanelValue } = reactData
+      if (datetimePanelValue) {
+        datetimePanelValue.setSeconds(item.value)
+      }
       dateTimeChangeEvent(evnt)
     }
 
@@ -1204,7 +1277,9 @@ export default defineComponent({
         reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first')
         nextTick(() => {
           const timeBodyElem = refInputTimeBody.value
-          XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos)
+          XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
+            updateTimePos(elem)
+          })
         })
       }
     }
@@ -1299,7 +1374,10 @@ export default defineComponent({
         if (!reactData.initialized) {
           reactData.initialized = true
         }
-        clearTimeout(hidePanelTimeout)
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout)
+          internalData.hpTimeout = undefined
+        }
         reactData.isActivated = true
         reactData.isAniVisible = true
         if (isDatePickerType) {
@@ -1456,13 +1534,13 @@ export default defineComponent({
             }]
           }, extraItem && extraItem.label
             ? [
-                h('span', label),
+                h('span', `${label}`),
                 h('span', {
                   class: ['vxe-date-picker--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                   style: extraItem.style
                 }, XEUtils.toValueString(extraItem.label))
               ]
-            : label)
+            : `${label}`)
         ]
         const festivalLabel = festivalItem.label
         if (festivalLabel) {
@@ -1966,10 +2044,12 @@ export default defineComponent({
       ])
     }
 
+    const dispatchEvent = (type: ValueOf<VxeDatePickerEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params))
+    }
+
     datePickerMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $input: $xeDatePicker }, params))
-      },
+      dispatchEvent,
 
       focus () {
         const inputElem = refInputTarget.value
@@ -2040,7 +2120,7 @@ export default defineComponent({
     initValue()
 
     const renderVN = () => {
-      const { className, type, align, name, autocomplete } = props
+      const { className, type, align, name, autocomplete, autoComplete } = props
       const { inputValue, visiblePanel, isActivated } = reactData
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
@@ -2084,7 +2164,7 @@ export default defineComponent({
             placeholder: inpPlaceholder,
             readonly: inputReadonly,
             disabled: isDisabled,
-            autocomplete,
+            autocomplete: autoComplete || autocomplete,
             onKeydown: keydownEvent,
             onKeyup: keyupEvent,
             onWheel: wheelEvent,