vxe-pc-ui 3.0.0 → 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/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeIconPickerComponent from './src/icon-picker'
+import { dynamicApp } from '../dynamics'
+
+export const VxeIconPicker = Object.assign(VxeIconPickerComponent, {
+  install: function (app: VueConstructor) {
+    app.component(VxeIconPickerComponent.name as string, VxeIconPickerComponent)
+  }
+})
+
+dynamicApp.use(VxeIconPicker)
+VxeUI.component(VxeIconPickerComponent)
+
+export const IconPicker = VxeIconPicker
+export default VxeIconPicker