vxe-pc-ui 3.0.1 → 3.0.2

package/packages/form/src/itemInfo.ts

@@ -0,0 +1,47 @@
+import XEUtils from 'xe-utils'
+
+export class ItemInfo {
+  constructor ($xeForm: any, item: any) {
+    Object.assign(this, {
+      id: XEUtils.uniqueId('item_'),
+      title: item.title,
+      field: item.field,
+      span: item.span,
+      align: item.align,
+      titleBold: item.titleBold,
+      titleAlign: item.titleAlign,
+      titleWidth: item.titleWidth,
+      titleColon: item.titleColon,
+      vertical: item.vertical,
+      padding: item.padding,
+      titleAsterisk: item.titleAsterisk,
+      titlePrefix: item.titlePrefix,
+      titleSuffix: item.titleSuffix,
+      titleOverflow: item.titleOverflow,
+      showTitle: item.showTitle,
+      resetValue: item.resetValue,
+      visibleMethod: item.visibleMethod,
+      visible: item.visible,
+      folding: item.folding,
+      collapseNode: item.collapseNode,
+      className: item.className,
+      contentClassName: item.contentClassName,
+      contentStyle: item.contentStyle,
+      titleClassName: item.titleClassName,
+      titleStyle: item.titleStyle,
+      itemRender: item.itemRender,
+      rules: item.rules,
+      // 渲染属性
+      showError: false,
+      errRule: null,
+      slots: item.slots,
+      children: []
+    })
+  }
+
+  update (name: string, value: any) {
+    this[name] = value
+  }
+
+  [key: string]: any;
+}

package/packages/form/src/render.ts

@@ -0,0 +1,98 @@
+import { CreateElement, VNode } from 'vue'
+import { getIcon, renderer, renderEmptyElement } from '../../ui'
+import { getFuncText, isEnableConf } from '../../ui/src/utils'
+import { getSlotVNs } from '../../ui/src/vn'
+import VxeTooltipComponent from '../../tooltip/src/tooltip'
+import VxeIconComponent from '../../icon/src/icon'
+
+import type { VxeFormConstructor, VxeFormDefines, VxeFormItemPropTypes, VxeFormItemConstructor, VxeFormGatherConstructor, VxeFormPrivateMethods } from '../../../types'
+
+function renderPrefixIcon (h: CreateElement, titlePrefix: VxeFormItemPropTypes.TitlePrefix) {
+  return h('span', {
+    class: 'vxe-form--item-title-prefix'
+  }, [
+    h(VxeIconComponent, {
+      class: titlePrefix.icon || getIcon().FORM_PREFIX,
+      props: {
+        status: titlePrefix.iconStatus
+      }
+    })
+  ])
+}
+
+function renderSuffixIcon (h: CreateElement, titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
+  return h('span', {
+    class: 'vxe-form--item-title-suffix'
+  }, [
+    h(VxeIconComponent, {
+      class: titleSuffix.icon || getIcon().FORM_SUFFIX,
+      props: {
+        status: titleSuffix.iconStatus
+      }
+    })
+  ])
+}
+
+export function renderTitle (h: CreateElement, _vm: VxeFormItemConstructor | VxeFormGatherConstructor, $xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
+  const formProps = $xeForm
+  const { data, readonly, disabled } = formProps
+  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
+  const tooltipOpts = $xeForm.computeTooltipOpts
+  const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
+  const params = { data, readonly, disabled, field, property: field, item, $form: $xeForm, $grid: $xeForm.xegrid }
+  const titleSlot = slots ? slots.title : null
+  const extraSlot = slots ? slots.extra : null
+  const titVNs: VNode[] = []
+  if (titlePrefix) {
+    titVNs.push(
+      (titlePrefix.content || titlePrefix.message)
+        ? h(VxeTooltipComponent, {
+          props: {
+            ...tooltipOpts,
+            ...titlePrefix,
+            content: getFuncText(titlePrefix.content || titlePrefix.message)
+          },
+          scopedSlots: {
+            default: () => renderPrefixIcon(h, titlePrefix)
+          }
+        })
+        : renderPrefixIcon(h, titlePrefix)
+    )
+  }
+  const rftTitle = compConf ? (compConf.renderFormItemTitle || compConf.renderItemTitle) : null
+  titVNs.push(
+    h('span', {
+      class: 'vxe-form--item-title-label'
+    }, titleSlot ? $xeForm.callSlot(titleSlot, params) : (rftTitle ? getSlotVNs(rftTitle(h, itemRender, params)) : getFuncText(item.title)))
+  )
+  const fixVNs = []
+  if (titleSuffix) {
+    fixVNs.push(
+      (titleSuffix.content || titleSuffix.message)
+        ? h(VxeTooltipComponent, {
+          props: {
+            ...tooltipOpts,
+            ...titleSuffix,
+            content: getFuncText(titleSuffix.content || titleSuffix.message)
+          },
+          scopedSlots: {
+            default: () => renderSuffixIcon(h, titleSuffix)
+          }
+        })
+        : renderSuffixIcon(h, titleSuffix)
+    )
+  }
+  return [
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs),
+    h('div', {
+      class: 'vxe-form--item-title-postfix'
+    }, fixVNs),
+    extraSlot
+      ? h('div', {
+        class: 'vxe-form--item-title-extra'
+      }, $xeForm.callSlot(extraSlot, params))
+      : renderEmptyElement(_vm)
+  ]
+}

package/packages/form/src/util.ts

@@ -0,0 +1,80 @@
+import { renderer } from '../../ui'
+import XEUtils from 'xe-utils'
+import { ItemInfo } from './itemInfo'
+import { isEnableConf } from '../../ui/src/utils'
+
+import type { VxeFormItemConstructor, VxeFormGatherConstructor, VxeFormConstructor, VxeFormDefines } from '../../../types'
+
+export interface XEFormItemProvide {
+  formItem: ItemInfo;
+}
+
+export function isFormItem (item: any): item is ItemInfo {
+  return item instanceof ItemInfo
+}
+
+export function createItem ($xeForm: VxeFormConstructor, _vm: any) {
+  return isFormItem(_vm) ? _vm : new ItemInfo($xeForm, _vm)
+}
+
+export function handleFieldOrItem ($xeForm: VxeFormConstructor, fieldOrItem: string | VxeFormDefines.ItemInfo) {
+  if (fieldOrItem) {
+    return XEUtils.isString(fieldOrItem) ? $xeForm.getItemByField(fieldOrItem) : fieldOrItem
+  }
+  return null
+}
+
+export function isHiddenItem ($xeForm: VxeFormConstructor, formItem: VxeFormDefines.ItemInfo) {
+  const { reactData } = $xeForm
+  const { collapseAll } = reactData
+  const { folding, visible } = formItem
+  return visible === false || (folding && collapseAll)
+}
+
+export function isActiveItem ($xeForm: VxeFormConstructor, formItem: VxeFormDefines.ItemInfo) {
+  let { visibleMethod, itemRender, visible, field } = formItem
+  if (visible === false) {
+    return visible
+  }
+  const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
+  const fiVisibleMethod = compConf ? (compConf.formItemVisibleMethod || compConf.itemVisibleMethod) : null
+  if (!visibleMethod && fiVisibleMethod) {
+    visibleMethod = fiVisibleMethod
+  }
+  if (!visibleMethod) {
+    return true
+  }
+  const formProps = $xeForm
+  const { data } = formProps
+  return visibleMethod({ data, field, property: field, item: formItem, $form: $xeForm, $grid: $xeForm.xegrid })
+}
+
+export function watchItem (_vm: VxeFormItemConstructor | VxeFormGatherConstructor, formItemPropKeys: string[], formItem: ItemInfo) {
+  formItemPropKeys.forEach(name => {
+    _vm.$watch(name, (val) => {
+      formItem.update(name, val)
+    })
+  })
+}
+
+export function assembleItem ($xeForm: VxeFormConstructor, el: HTMLDivElement, formItem: ItemInfo, formGather: XEFormItemProvide | null) {
+  const { reactData } = $xeForm
+  const { staticItems } = reactData
+  const parentElem = el.parentNode
+  const parentItem = formGather ? formGather.formItem : null
+  const parentItems = parentItem ? parentItem.children : staticItems
+  if (parentElem) {
+    parentItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, formItem)
+    reactData.staticItems = staticItems.slice(0)
+  }
+}
+
+export function destroyItem ($xeForm: VxeFormConstructor, formItem: ItemInfo) {
+  const { reactData } = $xeForm
+  const { staticItems } = reactData
+  const index = XEUtils.findIndexOf(staticItems, item => item.id === formItem.id)
+  if (index > -1) {
+    staticItems.splice(index, 1)
+  }
+  reactData.staticItems = staticItems.slice(0)
+}

package/packages/form-gather/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeFormGatherComponent from '../form/src/form-gather'
+import { dynamicApp } from '../dynamics'
+
+export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeFormGatherComponent.name as string, VxeFormGatherComponent)
+  }
+})
+
+dynamicApp.use(VxeFormGather)
+VxeUI.component(VxeFormGatherComponent)
+
+export const FormGather = VxeFormGather
+export default VxeFormGather

package/packages/form-item/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeFormItemComponent from '../form/src/form-item'
+import { dynamicApp } from '../dynamics'
+
+export const VxeFormItem = Object.assign(VxeFormItemComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeFormItemComponent.name as string, VxeFormItemComponent)
+  }
+})
+
+dynamicApp.use(VxeFormItem)
+VxeUI.component(VxeFormItemComponent)
+
+export const FormItem = VxeFormItem
+export default VxeFormItem

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

@@ -193,6 +193,11 @@ export default defineVxeComponent({
       const $xeIconPicker = this
       $xeIconPicker.$emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params))
     },
+    emitModel (value: any) {
+      const $xeDrawer = this
+
+      $xeDrawer.$emit('modelValue', value)
+    },
     isPanelVisible () {
       const $xeIconPicker = this
       const reactData = $xeIconPicker.reactData
@@ -378,7 +383,7 @@ export default defineVxeComponent({
 
       reactData.selectIcon = selectValue
       if (selectValue !== props.value) {
-        $xeIconPicker.$emit('modelValue', selectValue)
+        $xeIconPicker.emitModel(selectValue)
         $xeIconPicker.dispatchEvent('change', { value: selectValue }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {

package/packages/image/src/preview.ts

@@ -166,10 +166,9 @@ export default defineVxeComponent({
     },
     emitModel  (value: VxeImagePreviewPropTypes.ModelValue) {
       const $xeImagePreview = this
-      const reactData = $xeImagePreview.reactData
 
-      reactData.activeIndex = value
       $xeImagePreview.$emit('input', value)
+      $xeImagePreview.$emit('modelValue', value)
     },
     handleCloseEvent  (evnt: MouseEvent) {
       const $xeImagePreview = this

package/packages/input/src/input.ts

@@ -865,6 +865,11 @@ export default defineVxeComponent({
       const $xeInput = this
       $xeInput.$emit(type, createEvent(evnt, { $input: $xeInput }, params))
     },
+    emitModel (value: any) {
+      const $xeInput = this
+
+      $xeInput.$emit('modelValue', value)
+    },
     focus () {
       const $xeInput = this
       const reactData = $xeInput.reactData
@@ -922,7 +927,7 @@ export default defineVxeComponent({
       const { inputValue } = reactData
       $xeInput.dispatchEvent(evnt.type, { value: inputValue }, evnt)
     },
-    emitModel  (value: string, evnt: Event | { type: string }) {
+    handleChange  (value: string, evnt: Event | { type: string }) {
       const $xeInput = this
       const props = $xeInput
       const reactData = $xeInput.reactData
@@ -930,7 +935,7 @@ export default defineVxeComponent({
       const formItemInfo = $xeInput.formItemInfo
 
       reactData.inputValue = value
-      $xeInput.$emit('modelValue', value)
+      $xeInput.emitModel(value)
       $xeInput.dispatchEvent('input', { value }, evnt as any)
       if (XEUtils.toValueString(props.value) !== value) {
         $xeInput.dispatchEvent('change', { value }, evnt as any)
@@ -949,7 +954,7 @@ export default defineVxeComponent({
       reactData.inputValue = value
       if (!isDatePickerType) {
         if (inpImmediate) {
-          $xeInput.emitModel(value, evnt)
+          $xeInput.handleChange(value, evnt)
         } else {
           $xeInput.dispatchEvent('input', { value }, evnt)
         }
@@ -1017,7 +1022,7 @@ export default defineVxeComponent({
       if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) {
         $xeInput.focus()
       }
-      $xeInput.emitModel('', evnt)
+      $xeInput.handleChange('', evnt)
       $xeInput.dispatchEvent('clear', { value }, evnt)
     },
     clickSuffixEvent  (evnt: Event) {
@@ -1098,7 +1103,7 @@ export default defineVxeComponent({
         if (inputValue) {
           const validValue = toFloatValueFixed(inputValue, digitsValue)
           if (inputValue !== validValue) {
-            $xeInput.emitModel(validValue, { type: 'init' })
+            $xeInput.handleChange(validValue, { type: 'init' })
           }
         }
       }
@@ -1172,19 +1177,19 @@ export default defineVxeComponent({
               datetimeRest.push(item)
             }
           })
-          $xeInput.emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+          $xeInput.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
         } else {
           // 如果是日期类型
           if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-            $xeInput.emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
+            $xeInput.handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
           } else {
-            $xeInput.emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
+            $xeInput.handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
           }
         }
       } else {
         // 如果为单选
         if (!XEUtils.isEqual(props.value, inpVal)) {
-          $xeInput.emitModel(inpVal, { type: 'update' })
+          $xeInput.handleChange(inpVal, { type: 'update' })
         }
       }
     },
@@ -1214,7 +1219,7 @@ export default defineVxeComponent({
                 inpNumVal = inpStringVal
               }
             }
-            $xeInput.emitModel($xeInput.getNumberValue(inpNumVal), { type: 'check' })
+            $xeInput.handleChange($xeInput.getNumberValue(inpNumVal), { type: 'check' })
           }
         } else if (isDatePickerType) {
           if (inputValue) {
@@ -1223,7 +1228,7 @@ export default defineVxeComponent({
               if (type === 'time') {
                 inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat)
                 if (inputValue !== inpDateVal) {
-                  $xeInput.emitModel(inpDateVal, { type: 'check' })
+                  $xeInput.handleChange(inpDateVal, { type: 'check' })
                 }
                 reactData.inputValue = inpDateVal
               } else {
@@ -1249,7 +1254,7 @@ export default defineVxeComponent({
               $xeInput.dateRevert()
             }
           } else {
-            $xeInput.emitModel('', { type: 'check' })
+            $xeInput.handleChange('', { type: 'check' })
           }
         }
       }
@@ -1261,7 +1266,7 @@ export default defineVxeComponent({
       const { inputValue } = reactData
       const inpImmediate = $xeInput.computeInpImmediate
       if (!inpImmediate) {
-        $xeInput.emitModel(inputValue, evnt)
+        $xeInput.handleChange(inputValue, evnt)
       }
       $xeInput.afterCheckValue()
       if (!reactData.visiblePanel) {
@@ -1727,10 +1732,10 @@ export default defineVxeComponent({
                 datetimeRest.push(item)
               }
             })
-            $xeInput.emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+            $xeInput.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
           } else {
             // 如果是日期类型
-            $xeInput.emitModel(dateMultipleValue.join(','), { type: 'update' })
+            $xeInput.handleChange(dateMultipleValue.join(','), { type: 'update' })
           }
         } else {
           $xeInput.dateChange(dateValue || reactData.currentDate)

package/packages/layout-footer/src/layout-footer.ts

@@ -28,6 +28,7 @@ export default defineVxeComponent({
       const $xeLayoutFooter = this
       $xeLayoutFooter.$emit(type, createEvent(evnt, { $layoutFooter: $xeLayoutFooter }, params))
     },
+
     //
     // Render
     //

package/packages/list/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeListComponent from './src/list'
+import { dynamicApp } from '../dynamics'
+
+export const VxeList = Object.assign(VxeListComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeListComponent.name as string, VxeListComponent)
+  }
+})
+
+dynamicApp.use(VxeList)
+VxeUI.component(VxeListComponent)
+
+export const List = VxeList
+export default VxeList