vxe-pc-ui 4.6.49 → 4.7.0

package/packages/form-design/src/use/widget-prop-data-source.ts

@@ -1,282 +0,0 @@
-import { VNode, h, onMounted, ref, watch } from 'vue'
-import { VxeUI, getIcon, getI18n } from '@vxe-ui/core'
-import VxeFormItemComponent from '../../../form/src/form-item'
-import VxeButtonComponent from '../../../button/src/button'
-import VxeTextareaComponent from '../../../textarea/src/textarea'
-import VxeTipComponent from '../../../tip/src/tip'
-
-import type { VxeGlobalRendererHandles } from '../../../../types'
-
-export interface WidgetDataSourceOptionSubObjVO {
-  value: string,
-}
-
-export interface WidgetDataSourceOptionObjVO {
-  value: string,
-  options?: WidgetDataSourceOptionSubObjVO[]
-}
-
-export function useWidgetPropDataSource (props: {
-  readonly renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions
-  readonly renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<{
-    options: WidgetDataSourceOptionObjVO[]
-  }>
-}, renderConfig?: {
-  isSubOption?: boolean
-}) {
-  const renConf = Object.assign({}, renderConfig)
-  const isSubOption = renConf.isSubOption
-
-  const optionsContent = ref('')
-  const expandIndexList = ref<number[]>([])
-
-  const addOptionEvent = () => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    const options = widget.options.options || []
-    options.push({
-      value: getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [options.length + 1])
-    })
-    widget.options.options = [...options]
-  }
-
-  const subRE = /^(\s|\t)+/
-
-  const hasSubOption = (str: string) => {
-    return subRE.test(str)
-  }
-
-  const expandAllOption = () => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    const options = widget.options.options || []
-    const indexList: number[] = []
-    options.forEach((group, gIndex) => {
-      const { options } = group
-      if (options && options.length) {
-        indexList.push(gIndex)
-      }
-    })
-    expandIndexList.value = indexList
-  }
-
-  const toggleExpandOption = (item: WidgetDataSourceOptionSubObjVO, gIndex: number) => {
-    if (expandIndexList.value.includes(gIndex)) {
-      expandIndexList.value = expandIndexList.value.filter(num => num !== gIndex)
-    } else {
-      expandIndexList.value.push(gIndex)
-    }
-  }
-
-  const removeOptionEvent = (item: WidgetDataSourceOptionSubObjVO, group: WidgetDataSourceOptionObjVO | null) => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    const { options } = widget
-    if (group) {
-      if (group.options) {
-        group.options = group.options.filter(obj => obj !== item)
-      }
-    } else {
-      options.options = options.options.filter(obj => obj !== item)
-    }
-  }
-
-  const confirmBatchAddOptionEvent = () => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    const optList: WidgetDataSourceOptionSubObjVO[] = []
-    const rowList = optionsContent.value.split('\n')
-    let prevGroup: Required<WidgetDataSourceOptionObjVO> | null = null
-    if (isSubOption) {
-      rowList.forEach((str, index) => {
-        const nextStr = rowList[index + 1]
-        const value = str.trim()
-        if (!value) {
-          return
-        }
-        const item: WidgetDataSourceOptionSubObjVO = {
-          value
-        }
-        if (prevGroup) {
-          if (hasSubOption(str)) {
-            prevGroup.options.push(item)
-            return
-          }
-          prevGroup = null
-          optList.push(item)
-        } else {
-          optList.push(item)
-        }
-        if (nextStr) {
-          if (hasSubOption(nextStr)) {
-            prevGroup = Object.assign(item, { options: [] })
-          }
-        }
-      })
-    } else {
-      rowList.forEach((str) => {
-        optList.push({
-          value: str.trim()
-        })
-      })
-    }
-    widget.options.options = optList
-    expandAllOption()
-  }
-
-  const openPopupEditEvent = () => {
-    const { renderParams } = props
-    const { widget } = renderParams
-
-    const contList: string[] = []
-    widget.options.options?.forEach(group => {
-      contList.push(group.value)
-      group.options?.forEach(item => {
-        contList.push(`\t${item.value}`)
-      })
-    })
-
-    optionsContent.value = contList.join('\n')
-
-    VxeUI.modal.open({
-      title: `${widget.title} - ${getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption')}`,
-      width: 500,
-      height: '50vh ',
-      resize: true,
-      showFooter: true,
-      showCancelButton: true,
-      showConfirmButton: true,
-      confirmButtonText: getI18n('vxe.formDesign.widgetProp.dataSource.buildOption'),
-      onConfirm: confirmBatchAddOptionEvent,
-      slots: {
-        default () {
-          return h('div', {
-            class: 'vxe-form-design--widget-form-item-data-source-popup'
-          }, [
-            h(VxeTipComponent, {
-              status: 'primary',
-              title: '',
-              content: getI18n(`vxe.formDesign.widgetProp.dataSource.${isSubOption ? 'batchEditSubTip' : 'batchEditTip'}`)
-            }),
-            h(VxeTextareaComponent, {
-              resize: 'none',
-              modelValue: optionsContent.value,
-              'onUpdate:modelValue' (val) {
-                optionsContent.value = val
-              }
-            })
-          ])
-        }
-      }
-    })
-  }
-
-  const renderOption = (item: WidgetDataSourceOptionSubObjVO, group: WidgetDataSourceOptionObjVO | null, isExpand: boolean, gIndex: number, hasSub: boolean, isFirst: boolean, isLast: boolean) => {
-    const hasFirstLevel = !group
-    return h('div', {
-      class: ['vxe-form-design--widget-form-item-data-source-option', {
-        'is--first': isFirst,
-        'is--last': isLast
-      }]
-    }, [
-      h('div', {
-        class: 'vxe-form-design--widget-expand-btn'
-      }, hasFirstLevel && hasSub
-        ? [
-            h('i', {
-              class: isExpand ? getIcon().FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE : getIcon().FORM_DESIGN_WIDGET_OPTION_EXPAND_OPEN,
-              onClick () {
-                toggleExpandOption(item, gIndex)
-              }
-            })
-          ]
-        : []),
-      h('input', {
-        class: 'vxe-default-input',
-        value: item.value,
-        onInput (evnt: InputEvent & { target: HTMLInputElement }) {
-          item.value = evnt.target.value
-        }
-      }),
-      h(VxeButtonComponent, {
-        status: 'danger',
-        mode: 'text',
-        icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
-        onClick () {
-          removeOptionEvent(item, group)
-        }
-      })
-    ])
-  }
-
-  const renderOptions = () => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    const { options } = widget
-    const groups = options.options
-    const optVNs: VNode[] = []
-    if (groups) {
-      groups.forEach((group, gIndex) => {
-        const { options } = group
-        const isExpand = expandIndexList.value.includes(gIndex)
-        if (options && options.length) {
-          optVNs.push(renderOption(group, null, isExpand, gIndex, true, gIndex === 0, gIndex === groups.length - 1))
-          if (isExpand) {
-            optVNs.push(
-              h('div', {
-                class: 'vxe-form-design--widget-form-item-data-source-sub-option'
-              }, options.map(item => renderOption(item, group, isExpand, 0, false, false, false)))
-            )
-          }
-        } else {
-          optVNs.push(renderOption(group, null, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1))
-        }
-      })
-    }
-    return optVNs
-  }
-
-  watch(() => props.renderParams.widget, () => {
-    expandAllOption()
-  })
-
-  onMounted(() => {
-    expandAllOption()
-  })
-
-  const renderDataSourceFormItemContent = () => {
-    return [
-      h('div', {}, [
-        h(VxeButtonComponent, {
-          status: 'primary',
-          mode: 'text',
-          content: getI18n('vxe.formDesign.widgetProp.dataSource.addOption'),
-          onClick: addOptionEvent
-        }),
-        h(VxeButtonComponent, {
-          status: 'primary',
-          mode: 'text',
-          content: getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption'),
-          onClick: openPopupEditEvent
-        })
-      ]),
-      h('div', {
-        class: 'vxe-form-design--widget-form-item-data-source-wrapper'
-      }, renderOptions())
-    ]
-  }
-
-  return {
-    renderDataSourceFormItem () {
-      return h(VxeFormItemComponent, {
-        title: getI18n('vxe.formDesign.widgetProp.dataSource.name'),
-        field: 'options'
-      }, {
-        default () {
-          return renderDataSourceFormItemContent()
-        }
-      })
-    },
-    renderDataSourceFormItemContent
-  }
-}

package/packages/form-design/src/use/widget-prop-default-value.ts

@@ -1,52 +0,0 @@
-import { h, ref } from 'vue'
-import VxeFormItemComponent from '../../../form/src/form-item'
-import VxeSelectComponent from '../../../select/src/select'
-import VxeInputComponent from '../../../input/src/input'
-
-import type { VxeGlobalRendererHandles } from '../../../../types'
-
-export interface WidgetDefaultValueObjVO<V = any> {
-  type: string
-  value: V
-}
-
-export function useWidgetPropDefaultValue (props: {
-  readonly renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions
-  readonly renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<{
-    defaultValue: WidgetDefaultValueObjVO
-  }>
-}) {
-  const defValOptions = ref([
-    { value: 'custom', label: '自定义' }
-    // { value: 'linkage', label: '数据联动' }
-  ])
-
-  return {
-    renderDefaultValueFormItem () {
-      const { renderParams } = props
-      const { widget } = renderParams
-      const { defaultValue } = widget.options
-      return h(VxeFormItemComponent, {
-        title: '默认值'
-      }, {
-        default () {
-          return [
-            h(VxeSelectComponent, {
-              modelValue: defaultValue.type,
-              options: defValOptions.value,
-              'onUpdate:modelValue' (val) {
-                defaultValue.type = val
-              }
-            }),
-            h(VxeInputComponent, {
-              modelValue: defaultValue.value,
-              'onUpdate:modelValue' (val) {
-                defaultValue.value = val
-              }
-            })
-          ]
-        }
-      })
-    }
-  }
-}

package/packages/form-design/src/use/widget-subtable-view.ts

@@ -1,52 +0,0 @@
-import { computed } from 'vue'
-import XEUtils from 'xe-utils'
-
-import type { VxeGlobalRendererHandles, VxeFormDesignDefines } from '../../../../types'
-import type { VxeTableDefines } from '../../../../types/components/table'
-
-export function useSubtableView <D = any, P = Record<string, any>> (props: {
-  renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetSubtableEditViewOptions
-  renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetSubtableEditViewParams
-}) {
-  const currWidget = computed<VxeFormDesignDefines.WidgetObjItem<P>>(() => {
-    const { renderParams } = props
-    return renderParams.widget
-  })
-
-  const currColumn = computed<VxeTableDefines.ColumnInfo<D>>(() => {
-    const { renderParams } = props
-    return renderParams.column
-  })
-
-  const currRow = computed<D>(() => {
-    const { renderParams } = props
-    return renderParams.row
-  })
-
-  const widgetOptions = computed<P>(() => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    return widget ? widget.options : {}
-  })
-
-  const cellModel = computed({
-    get () {
-      const { renderParams } = props
-      const { row, column } = renderParams
-      return XEUtils.get(row, column.field)
-    },
-    set (value) {
-      const { renderParams } = props
-      const { row, column } = renderParams
-      return XEUtils.set(row, column.field, value)
-    }
-  })
-
-  return {
-    currColumn,
-    currRow,
-    currWidget,
-    widgetOptions,
-    cellModel
-  }
-}

package/packages/form-design/src/use/widget-view.ts

@@ -1,52 +0,0 @@
-import { computed } from 'vue'
-
-import type { VxeGlobalRendererHandles, VxeFormDesignDefines } from '../../../../types'
-
-export function useWidgetView <P = any> (props: {
-  renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions | VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions
-  renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams | VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams
-}) {
-  const currWidget = computed<VxeFormDesignDefines.WidgetObjItem<P>>(() => {
-    const { renderParams } = props
-    return renderParams.widget
-  })
-
-  const isEditMode = computed(() => {
-    const { renderParams } = props
-    return renderParams.isEditMode || false
-  })
-
-  const isViewMode = computed(() => {
-    const { renderParams } = props
-    return renderParams.isViewMode || false
-  })
-
-  const widgetOptions = computed<P>(() => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    return widget ? widget.options : {}
-  })
-
-  const widgetModel = computed({
-    get () {
-      const { renderParams } = props
-      const { $formView, widget } = renderParams
-      return $formView ? $formView.getItemValue(widget) : null
-    },
-    set (value) {
-      const { renderParams } = props
-      const { $formView, widget } = renderParams
-      if ($formView) {
-        $formView.setItemValue(widget, value)
-      }
-    }
-  })
-
-  return {
-    currWidget,
-    widgetOptions,
-    widgetModel,
-    isEditMode,
-    isViewMode
-  }
-}

package/packages/form-design/src/util.ts

@@ -1,26 +0,0 @@
-import XEUtils from 'xe-utils'
-import { getWidgetConfig } from './widget-info'
-
-import type { VxeFormDesignDefines } from '../../../types'
-
-let maxWidgetId = 100000
-
-export function getNewWidgetId (widgetObjList: VxeFormDesignDefines.WidgetObjItem[]) {
-  XEUtils.eachTree(widgetObjList, item => {
-    if (item) {
-      maxWidgetId = Math.max(maxWidgetId, item.id)
-    }
-  }, { children: 'children' })
-  return ++maxWidgetId
-}
-
-/**
- * 判断是否布局控件
- */
-export const hasFormDesignLayoutType = (widget: VxeFormDesignDefines.WidgetObjItem) => {
-  if (widget) {
-    const widgetConf = getWidgetConfig(widget.name)
-    return widgetConf.group === 'layout'
-  }
-  return false
-}

package/packages/form-design/src/widget-info.ts

@@ -1,116 +0,0 @@
-import { ref } from 'vue'
-import { renderer } from '@vxe-ui/core'
-import { getNewWidgetId } from './util'
-import { errLog } from '../../ui/src/log'
-import XEUtils from 'xe-utils'
-
-import type { VxeFormPropTypes, VxeFormDesignConstructor, VxeFormDesignDefines, VxeGlobalRendererHandles } from '../../../types'
-
-// 控件原始配置信息，带响应
-const refWidgetReactConfigMaps = ref<Record<string, VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj>>({})
-
-export const getWidgetConfig = (name: string) => {
-  const widgetReactConfigMaps = refWidgetReactConfigMaps.value
-  return widgetReactConfigMaps[name] || {}
-}
-
-export function getWidgetConfigTitle (name: string, $xeFormDesign: VxeFormDesignConstructor | null) {
-  const widgetConf = getWidgetConfig(name)
-  if (widgetConf) {
-    const configTitle = widgetConf.title
-    const params = { name, $formDesign: $xeFormDesign }
-    return XEUtils.toValueString(XEUtils.isFunction(configTitle) ? configTitle(params) : configTitle)
-  }
-  return name
-}
-
-export function getWidgetConfigCustomGroup (name: string, $xeFormDesign: VxeFormDesignConstructor | null) {
-  const widgetConf = getWidgetConfig(name)
-  if (widgetConf) {
-    const configCustomGroup = widgetConf.customGroup
-    const params = { name, $formDesign: $xeFormDesign }
-    return XEUtils.toValueString(XEUtils.isFunction(configCustomGroup) ? configCustomGroup(params) : configCustomGroup)
-  }
-  return name
-}
-
-const validWidgetUniqueField = (field: string, widgetObjList: VxeFormDesignDefines.WidgetObjItem<any>[]) => {
-  return !XEUtils.findTree(widgetObjList, item => item.field === field, { children: 'children' })
-}
-
-export class FormDesignWidgetInfo {
-  id = 0
-  field = ''
-  title = ''
-  name = ''
-  required = false
-  hidden = false
-  options: VxeFormPropTypes.Data = {}
-  children: FormDesignWidgetInfo[] = []
-  model = {
-    update: false,
-    value: ''
-  }
-
-  constructor ($xeFormDesign: VxeFormDesignConstructor | null, name: string, widgetObjList: VxeFormDesignDefines.WidgetObjItem<any>[]) {
-    let customField = ''
-    if (name) {
-      const compConf = renderer.get(name) || {}
-      if (compConf) {
-        const widgetReactConfigMaps = refWidgetReactConfigMaps.value
-        const createWidgetFormConfig = compConf.createFormDesignWidgetConfig
-        if (createWidgetFormConfig) {
-          const params = { name, $formDesign: $xeFormDesign }
-          const widgetConfig = createWidgetFormConfig(params) || {}
-          const titleConf = widgetConfig.title
-          const fieldConf = widgetConfig.field
-          this.title = XEUtils.toValueString(XEUtils.isFunction(titleConf) ? titleConf(params) : titleConf)
-          this.options = widgetConfig.options || {}
-          this.children = widgetConfig.children || []
-          if (fieldConf) {
-            if (XEUtils.isFunction(fieldConf)) {
-              customField = fieldConf({ name, $formDesign: $xeFormDesign })
-            } else {
-              customField = fieldConf
-            }
-          }
-          if (!widgetReactConfigMaps[name]) {
-            widgetReactConfigMaps[name] = { ...widgetConfig }
-            refWidgetReactConfigMaps.value = Object.assign({}, widgetReactConfigMaps)
-          }
-        }
-      }
-    }
-    const widgetId = getNewWidgetId(widgetObjList)
-    if (customField) {
-      // 如果使用了自定义字段，验证字段名是否唯一
-      if (!validWidgetUniqueField(customField, widgetObjList)) {
-        errLog('vxe.error.uniField', [customField])
-      }
-    }
-    this.id = widgetId
-    this.field = customField || `${name}${widgetId}`
-    this.name = name
-  }
-}
-
-export function configToWidget (conf: {
-  name: string
-  id: number
-  field: string
-  title: string
-  required: boolean
-  hidden: boolean
-  options?: any
-  children?: VxeFormDesignDefines.WidgetObjItem[]
-}) {
-  const widget = new FormDesignWidgetInfo(null, conf.name, [])
-  widget.id = conf.id
-  widget.title = conf.title || ''
-  widget.field = conf.field || ''
-  widget.required = conf.required || false
-  widget.hidden = conf.hidden || false
-  widget.options = Object.assign({}, widget.options, conf.options)
-  widget.children = conf.children ? conf.children.map(item => configToWidget(item)) : []
-  return widget
-}

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

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

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

@@ -1,18 +0,0 @@
-import { handleGetFormDesignWidgetName } from '../render/util'
-
-import type { VxeGlobalRendererHandles } from '../../../types'
-
-export interface WidgetInputFormObjVO {
-  placeholder: string
-}
-
-export const getWidgetInputConfig = (): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetInputFormObjVO> => {
-  return {
-    title: handleGetFormDesignWidgetName,
-    icon: 'vxe-icon-input',
-    query: true,
-    options: {
-      placeholder: ''
-    }
-  }
-}

package/packages/form-design/widget-input/input-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 { WidgetInputFormObjVO } from './input-data'
-import { useWidgetName } from '../../form-design/src/use'
-
-import type { VxeGlobalRendererHandles } from '../../../types'
-
-export const WidgetInputFormComponent = defineVxeComponent({
-  props: {
-    renderOpts: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
-      default: () => ({})
-    },
-    renderParams: {
-      type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetInputFormObjVO>>,
-      default: () => ({})
-    }
-  },
-  emits: [],
-  setup (props) {
-    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.placeholder'),
-              field: 'placeholder',
-              itemRender: { name: 'VxeInput' }
-            }),
-            h(VxeFormItemComponent, {
-              title: getI18n('vxe.formDesign.widgetProp.required')
-            }, {
-              default () {
-                return h(VxeSwitchComponent, {
-                  modelValue: widget.required,
-                  'onUpdate:modelValue' (val) {
-                    widget.required = val
-                  }
-                })
-              }
-            })
-          ]
-        }
-      })
-    }
-  }
-})