vxe-pc-ui 4.6.49 → 4.7.0

package/packages/form-design/widget-input/input-view.ts

@@ -1,65 +0,0 @@
-import { PropType, h, inject } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { getI18n } from '@vxe-ui/core'
-import { WidgetInputFormObjVO } from './input-data'
-import { useWidgetName } from '../../form-design/src/use'
-import VxeFormItemComponent from '../../form/src/form-item'
-
-import type { VxeGlobalRendererHandles, VxeFormViewConstructor, VxeFormViewPrivateMethods } from '../../../types'
-
-export const WidgetInputViewComponent = defineVxeComponent({
-  props: {
-    renderOpts: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
-      default: () => ({})
-    },
-    renderParams: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetInputFormObjVO>>,
-      default: () => ({})
-    }
-  },
-  emits: [],
-  setup (props) {
-    const $xeFormView = inject<(VxeFormViewConstructor & VxeFormViewPrivateMethods) | null>('$xeFormView', null)
-
-    const { computeKebabCaseName } = useWidgetName(props)
-
-    const changeEvent = () => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      if ($xeFormView) {
-        const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null
-        $xeFormView.updateWidgetStatus(widget, itemValue)
-      }
-    }
-
-    return () => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const { options } = widget
-      const kebabCaseName = computeKebabCaseName.value
-
-      return h(VxeFormItemComponent, {
-        class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
-        field: widget.field,
-        title: widget.title,
-        itemRender: {}
-      }, {
-        default () {
-          return h('input', {
-            class: 'vxe-default-input',
-            type: 'text',
-            placeholder: options.placeholder || getI18n('vxe.base.pleaseInput'),
-            value: $xeFormView ? $xeFormView.getItemValue(widget) : null,
-            onChange: changeEvent,
-            onInput (evnt: InputEvent & { target: HTMLInputElement }) {
-              if ($xeFormView) {
-                $xeFormView.setItemValue(widget, evnt.target.value)
-              }
-            }
-          })
-        }
-      })
-    }
-  }
-})

package/packages/form-design/widget-row/index.ts

@@ -1,3 +0,0 @@
-export * from './row-data'
-export * from './row-form'
-export * from './row-view'

package/packages/form-design/widget-row/row-data.ts

@@ -1,28 +0,0 @@
-import XEUtils from 'xe-utils'
-import { handleGetFormDesignWidgetName } from '../render/util'
-
-import type { VxeGlobalRendererHandles } from '../../../types'
-
-export interface WidgetRowFormObjVO {
-  colSize: number
-  colSpan: string
-}
-
-export const getWidgetRowConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetRowFormObjVO> => {
-  const { $formDesign } = params
-  const defaultColSize = 2
-  return {
-    title: handleGetFormDesignWidgetName,
-    group: 'layout',
-    icon: 'vxe-icon-row-col',
-    options: {
-      colSize: defaultColSize,
-      colSpan: '12,12'
-    },
-    children: $formDesign
-      ? XEUtils.range(0, defaultColSize).map(() => {
-        return $formDesign.createEmptyWidget()
-      })
-      : []
-  }
-}

package/packages/form-design/widget-row/row-form.ts

@@ -1,176 +0,0 @@
-import { PropType, h, ref, computed, inject } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { getI18n } from '@vxe-ui/core'
-import { useWidgetName } from '../../form-design/src/use'
-import { WidgetRowFormObjVO } from './row-data'
-import VxeFormComponent from '../../form/src/form'
-import VxeFormItemComponent from '../../form/src/form-item'
-import VxeRowComponent from '../../row/src/row'
-import VxeColComponent from '../../row/src/col'
-import XEUtils from 'xe-utils'
-
-import type { VxeGlobalRendererHandles, VxeFormDesignConstructor, VxeFormDesignPrivateMethods } from '../../../types'
-
-export const WidgetRowFormComponent = defineVxeComponent({
-  props: {
-    renderOpts: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
-      default: () => ({})
-    },
-    renderParams: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetRowFormObjVO>>,
-      default: () => ({})
-    }
-  },
-  emits: [],
-  setup (props) {
-    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
-
-    if (!$xeFormDesign) {
-      return () => []
-    }
-
-    const { computeKebabCaseName } = useWidgetName(props)
-
-    const spanOptions = ref([
-      {
-        label: getI18n('vxe.formDesign.widgetProp.rowProp.col2'),
-        value: 2,
-        list: [
-          { value: '12,12', spans: [12, 12] },
-          { value: '8,16', spans: [8, 16] },
-          { value: '16,8', spans: [16, 8] },
-          { value: '6,18', spans: [6, 18] },
-          { value: '18,6', spans: [18, 6] }
-        ]
-      },
-      {
-        label: getI18n('vxe.formDesign.widgetProp.rowProp.col3'),
-        value: 3,
-        list: [
-          { value: '8,8,8', spans: [8, 8, 8] },
-          { value: '6,6,12', spans: [6, 6, 12] },
-          { value: '12,6,6', spans: [12, 6, 6] },
-          { value: '6,12,6', spans: [6, 12, 6] }
-        ]
-      },
-      {
-        label: getI18n('vxe.formDesign.widgetProp.rowProp.col4'),
-        value: 4,
-        list: [
-          { value: '6,6,6,6', spans: [6, 6, 6, 6] }
-        ]
-      },
-      {
-        label: getI18n('vxe.formDesign.widgetProp.rowProp.col6'),
-        value: 6,
-        list: [
-          { value: '4,4,4,4,4,4', spans: [4, 4, 4, 4, 4, 4] }
-        ]
-      }
-    ])
-
-    const labelMaps: Record<number, string> = {
-      18: '3/4',
-      16: '2/3',
-      12: '1/2',
-      8: '1/3',
-      6: '1/4',
-      4: '1/6'
-    }
-
-    const computeSelectSpanItem = computed(() => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const { options } = widget
-      return spanOptions.value.find(item => item.value === options.colSize)
-    })
-
-    const changeColSpan = (item: {
-      value: string
-      spans: number[]
-    }) => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const { options } = widget
-      const { reactData: formDesignReactData } = $xeFormDesign
-      const { widgetObjList } = formDesignReactData
-      const oldChildList = widget.children.filter(item => item.name)
-      const overList = oldChildList.slice(options.colSize)
-      if (overList.length) {
-        const rest = XEUtils.findTree(widgetObjList, obj => obj.id === widget.id, { children: 'children' })
-        if (rest) {
-          const { items, index } = rest
-          if (index >= items.length - 1) {
-            items.push(...overList)
-          } else {
-            items.splice(index + 1, 0, ...overList)
-          }
-        }
-      }
-      options.colSpan = item.value
-      widget.children = XEUtils.range(0, options.colSize).map((num, index) => {
-        return oldChildList[index] || $xeFormDesign.createEmptyWidget()
-      })
-    }
-    return () => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const kebabCaseName = computeKebabCaseName.value
-
-      return h(VxeFormComponent, {
-        class: `vxe-form-design--widget-${kebabCaseName}-form`,
-        vertical: true,
-        span: 24,
-        titleBold: true,
-        titleOverflow: true,
-        data: widget.options
-      }, {
-        default () {
-          return [
-            h(VxeFormItemComponent, {
-              title: getI18n('vxe.formDesign.widgetProp.rowProp.colSize'),
-              field: 'colSize',
-              itemRender: { name: 'VxeRadioGroup', options: spanOptions.value, props: { type: 'button' } }
-            }),
-            h(VxeFormItemComponent, {
-              title: getI18n('vxe.formDesign.widgetProp.rowProp.layout')
-            }, {
-              default () {
-                const selectSpanItem = computeSelectSpanItem.value
-                if (selectSpanItem) {
-                  return selectSpanItem.list.map((item, rIndex) => {
-                    return h(VxeRowComponent, {
-                      key: rIndex,
-                      class: [`vxe-form-design--widget-${kebabCaseName}-form-row`, {
-                        'is--active': item.value === widget.options.colSpan
-                      }],
-                      onClick () {
-                        changeColSpan(item)
-                      }
-                    }, {
-                      default () {
-                        return item.spans.map((span, sIndex) => {
-                          return h(VxeColComponent, {
-                            key: `${rIndex}${sIndex}`,
-                            class: `vxe-form-design--widget-${kebabCaseName}-form-col`,
-                            span
-                          }, {
-                            default () {
-                              return h('div', {}, `${labelMaps[span]}`)
-                            }
-                          })
-                        })
-                      }
-                    })
-                  })
-                }
-                return []
-              }
-            })
-          ]
-        }
-      })
-    }
-  }
-})

package/packages/form-design/widget-row/row-view.ts

@@ -1,281 +0,0 @@
-import { PropType, h, inject, computed, createCommentVNode } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { hasFormDesignLayoutType } from '../src/util'
-import { renderer, getIcon } from '@vxe-ui/core'
-import { getSlotVNs } from '../../ui/src/vn'
-import XEUtils from 'xe-utils'
-import { WidgetRowFormObjVO } from './row-data'
-import VxeFormGroupComponent from '../../form/src/form-group'
-import VxeFormItemComponent from '../../form/src/form-item'
-import VxeRowComponent from '../../row/src/row'
-import VxeColComponent from '../../row/src/col'
-import VxeButtonComponent from '../../button/src/button'
-
-import type { VxeGlobalRendererHandles, VxeFormDesignDefines, VxeFormDesignConstructor, VxeFormDesignPrivateMethods, VxeFormViewConstructor, VxeFormViewPrivateMethods } from '../../../types'
-
-const ViewColItemComponent = defineVxeComponent({
-  name: 'ViewColItem',
-  props: {
-    parentWidget: {
-      type: Object as PropType<VxeFormDesignDefines.WidgetObjItem<WidgetRowFormObjVO>>,
-      default: () => ({})
-    },
-    widget: {
-      type: Object as PropType<VxeFormDesignDefines.WidgetObjItem<WidgetRowFormObjVO>>,
-      default: () => ({})
-    },
-    span: Number,
-    colItemIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: [],
-  setup (props) {
-    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
-
-    if (!$xeFormDesign) {
-      return () => []
-    }
-
-    const { reactData: formDesignReactData } = $xeFormDesign
-
-    const handleDragstartColItemEvent = (evnt: DragEvent) => {
-      evnt.stopPropagation()
-      const divEl = evnt.currentTarget as HTMLDivElement
-      const dataTransfer = evnt.dataTransfer
-      const widgetId = divEl.getAttribute('data-widget-id') || ''
-      const dragWidget = $xeFormDesign.getWidgetById(widgetId)
-      if (dataTransfer) {
-        dataTransfer.setData('text/plain', widgetId)
-      }
-      formDesignReactData.sortWidget = dragWidget
-      formDesignReactData.dragWidget = null
-    }
-
-    const sortDragenterColItemEvent = (evnt: DragEvent) => {
-      const { parentWidget, colItemIndex } = props
-      const { widgetObjList, sortWidget } = formDesignReactData
-      const targetWidget = parentWidget.children[colItemIndex]
-      const formDesignInternalData = $xeFormDesign.internalData
-      evnt.stopPropagation()
-      if (sortWidget && parentWidget && sortWidget.id !== parentWidget.id) {
-        if (hasFormDesignLayoutType(sortWidget)) {
-          return
-        }
-        if (!hasFormDesignLayoutType(targetWidget)) {
-          const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === sortWidget.id, { children: 'children' })
-          if (currRest) {
-            const { item, index, items, parent } = currRest
-            // 如果数据异常，动态修复
-            if (parentWidget.children.length !== parentWidget.options.colSize) {
-              parentWidget.children = XEUtils.range(0, parentWidget.options.colSize).map((index) => {
-                return parentWidget.children[index] || $xeFormDesign.createEmptyWidget()
-              })
-            }
-            // 如果是 row 内移动
-            if (parent && parent.id === parentWidget.id) {
-              parentWidget.children[colItemIndex] = item
-              parentWidget.children[index] = targetWidget
-            } else {
-              // 如果已存在控件
-              if (targetWidget && targetWidget.name) {
-                return
-              }
-              parentWidget.children[colItemIndex] = item
-              items.splice(index, 1)
-            }
-            evnt.preventDefault()
-            formDesignInternalData.lastDragTime = Date.now()
-            $xeFormDesign.dispatchEvent('drag-widget', { widget: item }, evnt)
-          }
-        }
-      }
-    }
-
-    return () => {
-      const { widget, span } = props
-      const { dragWidget, activeWidget, sortWidget } = formDesignReactData
-      return h(VxeFormItemComponent, {
-        span,
-        padding: false
-      }, {
-        default () {
-          const name = widget ? widget.name : ''
-          const compConf = renderer.get(name) || {}
-          const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView
-          const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = widget || { name }
-          const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, readonly: false, disabled: false, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null }
-          const isActive = activeWidget && widget && activeWidget.id === widget.id
-          const isEmptyWidget = !renderWidgetDesignView
-          return h('div', {
-            class: 'vxe-form-design--widget-row-view',
-            'data-widget-id': widget.id,
-            draggable: !isEmptyWidget,
-            onDragstart: handleDragstartColItemEvent,
-            onDragenter: sortDragenterColItemEvent,
-            onClick (evnt: KeyboardEvent) {
-              if (widget) {
-                $xeFormDesign.handleClickWidget(evnt, widget)
-              }
-            }
-          }, [
-            h('div', {
-              class: ['vxe-form-design--widget-row-view-item-inner', {
-                'is--empty': isEmptyWidget,
-                'is--active': isActive,
-                'is--sort': sortWidget && widget && sortWidget.id === widget.id,
-                'is--drag': dragWidget && widget && dragWidget.id === widget.id
-              }]
-            }, [
-              renderWidgetDesignView
-                ? h('div', {
-                  class: 'vxe-form-design--widget-row-view-item-wrapper'
-                }, [
-                  h('div', {
-                    class: 'vxe-form-design--widget-row-view-item-box vxe-form--item-row'
-                  }, getSlotVNs(renderWidgetDesignView(renderOpts, params))),
-                  isActive
-                    ? h('div', {
-                      class: 'vxe-form-design--preview-item-operate'
-                    }, [
-                      h(VxeButtonComponent, {
-                        icon: getIcon().FORM_DESIGN_WIDGET_COPY,
-                        status: 'primary',
-                        size: 'mini',
-                        circle: true,
-                        onClick (params) {
-                          $xeFormDesign.handleCopyWidget(params.$event, widget)
-                        }
-                      }),
-                      h(VxeButtonComponent, {
-                        icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
-                        status: 'danger',
-                        size: 'mini',
-                        circle: true,
-                        onClick (params) {
-                          $xeFormDesign.handleRemoveWidget(params.$event, widget)
-                        }
-                      })
-                    ])
-                    : createCommentVNode()
-                ])
-                : h('div', {
-                  class: 'vxe-form-design--widget-row-view-empty'
-                }, '控件位置')
-            ])
-          ])
-        }
-      })
-    }
-  }
-})
-
-export const WidgetRowEditComponent = defineVxeComponent({
-  name: 'WidgetRowEdit',
-  props: {
-    renderOpts: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetEditOptions>,
-      default: () => ({})
-    },
-    renderParams: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetEditParams<WidgetRowFormObjVO>>,
-      default: () => ({})
-    }
-  },
-  emits: [],
-  setup (props) {
-    const computedColObjList = computed(() => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const { options } = widget
-      const { colSpan } = options
-      const colList = colSpan ? `${colSpan}`.split(',') : []
-      const rest = colList.map((span) => Number(span))
-      return rest
-    })
-
-    return () => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      return h(VxeFormGroupComponent, {
-        field: widget.field
-      }, {
-        default () {
-          const colObjList = computedColObjList.value
-          return colObjList.map((span, colItemIndex) => {
-            return h(ViewColItemComponent, {
-              key: colItemIndex,
-              parentWidget: widget,
-              widget: widget.children[colItemIndex],
-              span,
-              colItemIndex
-            })
-          })
-        }
-      })
-    }
-  }
-})
-
-export const WidgetRowViewComponent = defineVxeComponent({
-  name: 'WidgetRowView',
-  props: {
-    renderOpts: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
-      default: () => ({})
-    },
-    renderParams: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetRowFormObjVO>>,
-      default: () => ({})
-    }
-  },
-  emits: [],
-  setup (props) {
-    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
-    const $xeFormView = inject<(VxeFormViewConstructor & VxeFormViewPrivateMethods) | null>('$xeFormView', null)
-
-    const computedColObjList = computed(() => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const { options } = widget
-      const { colSpan } = options
-      const colList = colSpan ? `${colSpan}`.split(',') : []
-      const rest = colList.map((span) => Number(span))
-      return rest
-    })
-
-    return () => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const colObjList = computedColObjList.value
-      return h(VxeRowComponent, {}, {
-        default () {
-          return colObjList.map((span, colItemIndex) => {
-            return h(VxeColComponent, {
-              key: colItemIndex,
-              class: 'vxe-form--item-row',
-              span
-            }, {
-              default () {
-                const subWidget = widget.children[colItemIndex]
-                if (subWidget) {
-                  const { name } = subWidget
-                  const compConf = renderer.get(name) || {}
-                  const renderWidgetDesignView = compConf.renderFormDesignWidgetView
-                  const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = subWidget
-                  const isEditMode = !!$xeFormDesign
-                  const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget: subWidget, readonly: false, disabled: false, isEditMode, isViewMode: !isEditMode, $formDesign: $xeFormDesign, $formView: $xeFormView }
-                  if (renderWidgetDesignView) {
-                    return getSlotVNs(renderWidgetDesignView(renderOpts, params))
-                  }
-                }
-                return createCommentVNode()
-              }
-            })
-          })
-        }
-      })
-    }
-  }
-})

package/packages/form-design/widget-select/index.ts

@@ -1,3 +0,0 @@
-export * from './select-data'
-export * from './select-form'
-export * from './select-view'

package/packages/form-design/widget-select/select-data.ts

@@ -1,23 +0,0 @@
-import { handleGetFormDesignWidgetName } from '../render/util'
-import { getI18n } from '@vxe-ui/core'
-import XEUtils from 'xe-utils'
-import { WidgetDataSourceOptionObjVO } from '../../form-design/src/use'
-
-export interface WidgetSelectFormObjVO {
-  options: WidgetDataSourceOptionObjVO[]
-}
-
-export const getWidgetSelectConfig = () => {
-  return {
-    title: handleGetFormDesignWidgetName,
-    icon: 'vxe-icon-select',
-    query: true,
-    options: {
-      options: XEUtils.range(0, 3).map((v, i) => {
-        return {
-          value: getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [i + 1])
-        }
-      })
-    }
-  }
-}

package/packages/form-design/widget-select/select-form.ts

@@ -1,77 +0,0 @@
-import { PropType, h } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { getI18n } from '@vxe-ui/core'
-import VxeFormComponent from '../../form/src/form'
-import VxeFormItemComponent from '../../form/src/form-item'
-import VxeInputComponent from '../../input/src/input'
-import VxeSwitchComponent from '../../switch/src/switch'
-import { WidgetSelectFormObjVO } from './select-data'
-import { useWidgetName, useWidgetPropDataSource } from '../../form-design/src/use'
-
-import type { VxeGlobalRendererHandles } from '../../../types'
-
-export const WidgetSelectFormComponent = defineVxeComponent({
-  props: {
-    renderOpts: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
-      default: () => ({})
-    },
-    renderParams: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetSelectFormObjVO>>,
-      default: () => ({})
-    }
-  },
-  emits: [],
-  setup (props) {
-    const { renderDataSourceFormItem } = useWidgetPropDataSource(props, {
-      isSubOption: true
-    })
-
-    const { computeKebabCaseName } = useWidgetName(props)
-
-    return () => {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const kebabCaseName = computeKebabCaseName.value
-
-      return h(VxeFormComponent, {
-        class: ['vxe-form-design--widget-render-form-wrapper', `widget-${kebabCaseName}`],
-        vertical: true,
-        span: 24,
-        titleBold: true,
-        titleOverflow: true,
-        data: widget.options
-      }, {
-        default () {
-          return [
-            h(VxeFormItemComponent, {
-              title: getI18n('vxe.formDesign.widgetProp.name')
-            }, {
-              default () {
-                return h(VxeInputComponent, {
-                  modelValue: widget.title,
-                  'onUpdate:modelValue' (val) {
-                    widget.title = val
-                  }
-                })
-              }
-            }),
-            h(VxeFormItemComponent, {
-              title: getI18n('vxe.formDesign.widgetProp.required')
-            }, {
-              default () {
-                return h(VxeSwitchComponent, {
-                  modelValue: widget.required,
-                  'onUpdate:modelValue' (val) {
-                    widget.required = val
-                  }
-                })
-              }
-            }),
-            renderDataSourceFormItem()
-          ]
-        }
-      })
-    }
-  }
-})