vxe-pc-ui 4.5.36 → 4.6.1

package/packages/form/render/index.ts

@@ -4,6 +4,8 @@ import { renderer, getComponent } from '../../ui'
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
+import type { VxeGlobalRendererHandles } from '../../../types'
+
 const componentDefaultModelProp = 'modelValue'
 
 /**
@@ -87,8 +89,12 @@ function getNativeElementOns (renderOpts: any, params: any, modelFunc?: any, cha
  * @param modelFunc
  * @param changeFunc
  */
-function getComponentOns (renderOpts: any, params: any, modelFunc?: any, changeFunc?: any) {
+function getComponentOns (renderOpts: any, params: any, eFns?: {
+  model: (cellValue: any) => void
+  change?: (...args: any[]) => void
+}, eventOns?: Record<string, any>) {
   const { events } = renderOpts
+  const { model: modelFunc, change: changeFunc } = eFns || {}
   const modelEvent = getModelEvent(renderOpts.name)
   const changeEvent = getChangeEvent(renderOpts.name)
   const ons: any = {}
@@ -118,17 +124,20 @@ function getComponentOns (renderOpts: any, params: any, modelFunc?: any, changeF
       }
     }
   }
-  return ons
+  return eventOns ? Object.assign(ons, eventOns) : ons
 }
 
 function getItemOns (renderOpts: any, params: any) {
   const { $form, data, field } = params
-  return getComponentOns(renderOpts, params, (value: any) => {
+  return getComponentOns(renderOpts, params, {
+    model (value) {
     // 处理 model 值双向绑定
-    XEUtils.set(data, field, value)
-  }, () => {
+      XEUtils.set(data, field, value)
+    },
+    change (params) {
     // 处理 change 事件相关逻辑
-    $form.updateStatus(params)
+      $form.updateStatus(params)
+    }
   })
 }
 
@@ -148,12 +157,15 @@ function renderNativeOptgroup (renderOpts: any, params: any, renderOptionsMethod
   const { optionGroups, optionGroupProps = {} } = renderOpts
   const groupOptions = optionGroupProps.options || 'options'
   const groupLabel = optionGroupProps.label || 'label'
-  return optionGroups.map((group: any, gIndex: any) => {
-    return h('optgroup', {
-      key: gIndex,
-      label: group[groupLabel]
-    }, renderOptionsMethods(group[groupOptions], renderOpts, params))
-  })
+  if (optionGroups) {
+    return optionGroups.map((group: any, gIndex: any) => {
+      return h('optgroup', {
+        key: gIndex,
+        label: group[groupLabel]
+      }, renderOptionsMethods(group[groupOptions], renderOpts, params))
+    })
+  }
+  return []
 }
 
 /**
@@ -175,7 +187,7 @@ function nativeItemRender (renderOpts: any, params: any) {
   ]
 }
 
-function defaultItemRender (renderOpts: any, params: any) {
+function defaultItemRender (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
   const { data, field } = params
   const itemValue = XEUtils.get(data, field)
   return [
@@ -232,15 +244,18 @@ function renderNativeFormOptions (options: any, renderOpts: any, params: any) {
   const valueProp = optionProps.value || 'value'
   const disabledProp = optionProps.disabled || 'disabled'
   const cellValue = XEUtils.get(data, field)
-  return options.map((item: any, oIndex: any) => {
-    return h('option', {
-      key: oIndex,
-      value: item[valueProp],
-      disabled: item[disabledProp],
-      /* eslint-disable eqeqeq */
-      selected: item[valueProp] == cellValue
-    }, item[labelProp])
-  })
+  if (options) {
+    return options.map((item: any, oIndex: any) => {
+      return h('option', {
+        key: oIndex,
+        value: item[valueProp],
+        disabled: item[disabledProp],
+        /* eslint-disable eqeqeq */
+        selected: item[valueProp] == cellValue
+      }, item[labelProp])
+    })
+  }
+  return []
 }
 
 /**
@@ -356,6 +371,45 @@ renderer.mixin({
     formItemAutoFocus: 'input',
     renderFormItemContent: defaultItemRender
   },
+  VxeDateRangePicker: {
+    formItemAutoFocus: 'input',
+    renderFormItemContent (renderOpts, params) {
+      const { startField, endField } = renderOpts
+      const { $form, data, field } = params
+      const itemValue = XEUtils.get(data, field)
+      const seProps: Record<string, any> = {}
+      const seOs: Record<string, any> = {}
+      if (startField && endField) {
+        seProps.startValue = XEUtils.get(data, startField)
+        seProps.endValue = XEUtils.get(data, endField)
+        seOs['onUpdate:startValue'] = (value: any) => {
+          if (startField) {
+            XEUtils.set(data, startField, value)
+          }
+        }
+        seOs['onUpdate:endValue'] = (value: any) => {
+          if (endField) {
+            XEUtils.set(data, endField, value)
+          }
+        }
+      }
+      return [
+        h(getDefaultComponent(renderOpts), {
+          ...getComponentFormItemProps(renderOpts, params, itemValue, seProps),
+          ...getComponentOns(renderOpts, params, {
+            model (value: any) {
+              // 处理 model 值双向绑定
+              XEUtils.set(data, field, value)
+            },
+            change () {
+              // 处理 change 事件相关逻辑
+              $form.updateStatus(params)
+            }
+          }, seOs)
+        })
+      ]
+    }
+  },
   VxeButton: {
     renderFormItemContent: defaultFormItemRender
   },

package/packages/input/src/input.ts

@@ -3,11 +3,11 @@ import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex, eqEmptyValue } from '../../ui/src/utils'
 import { hasClass, getAbsolutePos, getEventTargetNode, hasControlKey } from '../../ui/src/dom'
-import { toStringTimeDate, getDateQuarter } from '../../date-picker/src/util'
+import { toStringTimeDate, getDateQuarter } from '../../date-panel/src/util'
 import { handleNumber, toFloatValueFixed } from '../../number-input/src/util'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, ValueOf, InputInternalData, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines, VxeSelectConstructor, VxeSelectMethods, VxeTreeSelectConstructor, VxeTreeSelectMethods, VxeComponentStyleType } from '../../../types'
+import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, ValueOf, InputInternalData, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePanelDefines, VxeSelectConstructor, VxeSelectMethods, VxeTreeSelectConstructor, VxeTreeSelectMethods, VxeComponentStyleType } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -458,7 +458,7 @@ export default defineComponent({
     const computeYearList = computed(() => {
       const { selectMonth, currentDate } = reactData
       const { yearSize } = internalData
-      const years: VxeDatePickerDefines.DateYearItem[] = []
+      const years: VxeDatePanelDefines.DateYearItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
         const selectFullYear = selectMonth.getFullYear()
@@ -561,7 +561,7 @@ export default defineComponent({
     const computeQuarterList = computed(() => {
       const { selectMonth, currentDate } = reactData
       const { quarterSize } = internalData
-      const quarters: VxeDatePickerDefines.DateQuarterItem[] = []
+      const quarters: VxeDatePanelDefines.DateQuarterItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
         const currQuarter = getDateQuarter(currentDate)
@@ -593,7 +593,7 @@ export default defineComponent({
     const computeMonthList = computed(() => {
       const { selectMonth, currentDate } = reactData
       const { monthSize } = internalData
-      const months: VxeDatePickerDefines.DateMonthItem[] = []
+      const months: VxeDatePanelDefines.DateMonthItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
         const currMonth = currentDate.getMonth()
@@ -623,7 +623,7 @@ export default defineComponent({
 
     const computeDayList = computed(() => {
       const { selectMonth, currentDate } = reactData
-      const days: VxeDatePickerDefines.DateDayItem[] = []
+      const days: VxeDatePanelDefines.DateDayItem[] = []
       if (selectMonth && currentDate) {
         const dateHMSTime = computeDateHMSTime.value
         const weekDatas = computeWeekDatas.value
@@ -664,7 +664,7 @@ export default defineComponent({
       const firstDayOfWeek = computeFirstDayOfWeek.value
       return dayDatas.map((list) => {
         const firstItem = list[0]
-        const item: VxeDatePickerDefines.DateDayItem = {
+        const item: VxeDatePanelDefines.DateDayItem = {
           date: firstItem.date,
           isWeekNumber: true,
           isPrev: false,
@@ -678,7 +678,7 @@ export default defineComponent({
     })
 
     const computeHourList = computed(() => {
-      const list: VxeDatePickerDefines.DateHourMinuteSecondItem[] = []
+      const list: VxeDatePanelDefines.DateHourMinuteSecondItem[] = []
       const isDateTimeType = computeIsDateTimeType.value
       if (isDateTimeType) {
         for (let index = 0; index < 24; index++) {
@@ -692,7 +692,7 @@ export default defineComponent({
     })
 
     const computeMinuteList = computed(() => {
-      const list: VxeDatePickerDefines.DateHourMinuteSecondItem[] = []
+      const list: VxeDatePanelDefines.DateHourMinuteSecondItem[] = []
       const isDateTimeType = computeIsDateTimeType.value
       if (isDateTimeType) {
         for (let index = 0; index < 60; index++) {
@@ -1473,7 +1473,7 @@ export default defineComponent({
       }
     }
 
-    const dateSelectEvent = (item: VxeDatePickerDefines.DateYearItem | VxeDatePickerDefines.DateQuarterItem | VxeDatePickerDefines.DateMonthItem | VxeDatePickerDefines.DateDayItem) => {
+    const dateSelectEvent = (item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem) => {
       if (!isDateDisabled(item)) {
         dateSelectItem(item.date)
       }
@@ -1519,7 +1519,7 @@ export default defineComponent({
       }
     }
 
-    const dateMouseenterEvent = (item: VxeDatePickerDefines.DateYearItem | VxeDatePickerDefines.DateQuarterItem | VxeDatePickerDefines.DateMonthItem | VxeDatePickerDefines.DateDayItem) => {
+    const dateMouseenterEvent = (item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem) => {
       if (!isDateDisabled(item)) {
         const { datePanelType } = reactData
         if (datePanelType === 'month') {
@@ -1547,7 +1547,7 @@ export default defineComponent({
       updateTimePos(evnt.currentTarget as HTMLLIElement)
     }
 
-    const dateHourEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
+    const dateHourEvent = (evnt: MouseEvent, item: VxeDatePanelDefines.DateHourMinuteSecondItem) => {
       reactData.datetimePanelValue.setHours(item.value)
       dateTimeChangeEvent(evnt)
     }
@@ -1586,12 +1586,12 @@ export default defineComponent({
       hidePanel()
     }
 
-    const dateMinuteEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
+    const dateMinuteEvent = (evnt: MouseEvent, item: VxeDatePanelDefines.DateHourMinuteSecondItem) => {
       reactData.datetimePanelValue.setMinutes(item.value)
       dateTimeChangeEvent(evnt)
     }
 
-    const dateSecondEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
+    const dateSecondEvent = (evnt: MouseEvent, item: VxeDatePanelDefines.DateHourMinuteSecondItem) => {
       reactData.datetimePanelValue.setSeconds(item.value)
       dateTimeChangeEvent(evnt)
     }
@@ -1934,7 +1934,7 @@ export default defineComponent({
       }
     }
 
-    const renderDateLabel = (item: VxeDatePickerDefines.DateYearItem | VxeDatePickerDefines.DateQuarterItem | VxeDatePickerDefines.DateMonthItem | VxeDatePickerDefines.DateDayItem, label: string | number) => {
+    const renderDateLabel = (item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem, label: string | number) => {
       const { festivalMethod } = props
       if (festivalMethod) {
         const { datePanelType } = reactData

package/packages/language/ar-EG.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} سنوات'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'يناير',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'أسبوع',
+          w: '',
           w0: 'شمس',
           w1: 'الاثنين',
           w2: 'الثلاثاء',

package/packages/language/de-DE.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} Jahre'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Januar',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Woche',
+          w: '',
           w0: 'Sonntag',
           w1: 'am Montag',
           w2: 'Dienstag',

package/packages/language/en-US.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} years'
     },
+    dateRangePicker: {
+      pleaseRange: 'Please select the date time and the end date'
+    },
     input: {
       date: {
         m1: 'January',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Week',
+          w: '',
           w0: 'Sun',
           w1: 'Mon',
           w2: 'Tue',

package/packages/language/es-ES.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} años'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Enero',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Semana',
+          w: '',
           w0: 'Sol',
           w1: 'Lun',
           w2: 'Mar',

package/packages/language/fr-FR.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} ans'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Janvier',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Semaine',
+          w: '',
           w0: 'Soleil',
           w1: 'Lun',
           w2: 'Mar',

package/packages/language/hu-HU.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} Évek'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'január',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Hét',
+          w: '',
           w0: 'Nap',
           w1: 'Mon',
           w2: 'Kedd',

package/packages/language/hy-AM.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 年'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 月',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: '周',
+          w: '',
           w0: '周日',
           w1: '周一',
           w2: '周二',

package/packages/language/id-ID.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} tahun'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Januari',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Pekan',
+          w: '',
           w0: 'Matahari',
           w1: 'Senin',
           w2: 'Sel',

package/packages/language/it-IT.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} anni'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Gennaio',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: 'Settimana',
+          w: '',
           w0: 'Sole',
           w1: 'Lun',
           w2: 'Mar',

package/packages/language/ja-JP.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 年'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '1月',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: '週',
+          w: '',
           w0: '日',
           w1: '月',
           w2: '火',

package/packages/language/ko-KR.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 년'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '1월',
@@ -272,7 +275,7 @@ export default {
           year: 'yyyy'
         },
         weeks: {
-          w: '주',
+          w: '',
           w0: '일요일',
           w1: '월요일',
           w2: '화요일',