vxe-pc-ui 4.6.49 → 4.7.0

package/packages/form-design/src/layout-style.ts

@@ -1,216 +0,0 @@
-import { VNode, createCommentVNode, h, inject, ref, reactive, provide } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import { getIcon, getI18n, renderer } from '@vxe-ui/core'
-import { getSlotVNs } from '../../ui/src/vn'
-import VxeModalComponent from '../../modal/src/modal'
-import VxeTabsComponent from '../../tabs/src/tabs'
-import VxeTabPaneComponent from '../../tabs/src/tab-pane'
-import VxeFormViewComponent from './form-view'
-import { DefaultPCStyleFormComponent, DefaultMobileStyleFormComponent } from './default-style-form'
-import { createDefaultFormViewPCFormConfig, createDefaultFormViewMobileFormConfig } from './default-setting-data'
-
-import type { VxeFormDesignConstructor, VxeFormViewDefines, VxeFormDesignPrivateMethods, VxeFormDesignDefines, VxeFormDesignLayoutStyle } from '../../../types'
-
-export default defineVxeComponent({
-  name: 'FormDesignLayoutStyle',
-  props: {},
-  emits: [],
-  setup () {
-    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
-
-    const reactData = reactive({
-      activeTab: 1
-    })
-
-    const $xeFormDesignLayoutStyle: VxeFormDesignLayoutStyle = {
-      reactData,
-
-      renderVN () {
-        return []
-      }
-    }
-
-    if (!$xeFormDesign) {
-      return $xeFormDesignLayoutStyle
-    }
-
-    const { props: formDesignProps, reactData: formDesignReactData } = $xeFormDesign
-
-    const settingVisible = ref(false)
-    const settingConfig = ref<VxeFormDesignDefines.FormDesignConfig | null>(null)
-    const settingFormData = ref({})
-
-    const updatePreviewView = () => {
-      settingConfig.value = $xeFormDesign.getConfig()
-    }
-
-    const createFormViewFormConfig = (params: VxeFormViewDefines.CreateFormConfigParams<VxeFormDesignDefines.DefaultSettingFormDataObjVO>) => {
-      const { viewRender } = params
-      const { activeTab } = reactData
-      const { name } = viewRender || {}
-      const compConf = renderer.get(name) || {}
-      const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null
-      const createMobileFormConfig = compConf ? compConf.createFormViewMobileFormConfig : null
-      if (activeTab === 2) {
-        if (createMobileFormConfig) {
-          return createMobileFormConfig(params)
-        }
-        return createDefaultFormViewMobileFormConfig(params)
-      }
-      if (createPCFormConfig) {
-        return createPCFormConfig(params)
-      }
-      return createDefaultFormViewPCFormConfig(params)
-    }
-
-    const formDesignLayoutStyleMethod = {
-      updatePreviewView,
-      openStylePreview () {
-        const { showPc } = formDesignProps
-        updatePreviewView()
-        reactData.activeTab = showPc ? 1 : 2
-        settingVisible.value = true
-      }
-    }
-
-    Object.assign($xeFormDesignLayoutStyle, formDesignLayoutStyleMethod)
-
-    const renderStylePreview = () => {
-      const { activeTab } = reactData
-      return h('div', {
-        class: ['vxe-form-design--layout-style-preview', `is--${activeTab === 2 ? 'mobile' : 'pc'}`]
-      }, [
-        h(VxeFormViewComponent, {
-          modelValue: settingFormData.value,
-          config: settingConfig.value,
-          createFormConfig: createFormViewFormConfig,
-          'onUpdate:modelValue' (val) {
-            settingFormData.value = val
-          }
-        })
-      ])
-    }
-
-    const renderMobileStyle = () => {
-      const { formRender } = formDesignProps
-      const { formData } = formDesignReactData
-      if (formRender) {
-        const compConf = renderer.get(formRender.name)
-        const renderSettingMobileFormView = compConf ? compConf.renderFormDesignMobileStyleFormView : null
-        if (renderSettingMobileFormView) {
-          return h('div', {
-            class: 'vxe-form-design--custom-setting-mobile-form-view'
-          }, getSlotVNs(renderSettingMobileFormView({ }, { $formDesign: $xeFormDesign, formConfig: formData })))
-        }
-      }
-      return h(DefaultMobileStyleFormComponent, {
-        formData
-      })
-    }
-
-    const renderPCStyle = () => {
-      const { formRender } = formDesignProps
-      const { formData } = formDesignReactData
-      if (formRender) {
-        const compConf = renderer.get(formRender.name)
-        const renderStylePCFormView = compConf ? compConf.renderFormDesignStyleFormView : null
-        if (renderStylePCFormView) {
-          return h('div', {
-            class: 'vxe-form-design--custom-setting-pc-form-view'
-          }, getSlotVNs(renderStylePCFormView({ }, { $formDesign: $xeFormDesign, formConfig: formData })))
-        }
-      }
-      return h(DefaultPCStyleFormComponent, {
-        formData
-      })
-    }
-
-    const renderStyleSetting = () => {
-      const { showPc, showMobile } = formDesignProps
-      const { activeTab } = reactData
-      return h('div', {
-        class: 'vxe-form-design--layout-style-setting'
-      }, [
-        h(VxeTabsComponent, {
-          modelValue: activeTab,
-          titleWidth: showPc && showMobile ? '50%' : '100%',
-          titleAlign: 'center',
-          padding: true,
-          onChange: updatePreviewView,
-          'onUpdate:modelValue' (val) {
-            reactData.activeTab = val
-          }
-        }, {
-          default () {
-            const tabVNs: VNode[] = []
-            if (showPc) {
-              tabVNs.push(
-                h(VxeTabPaneComponent, {
-                  title: getI18n('vxe.formDesign.widgetProp.displaySetting.pc'),
-                  icon: getIcon().FORM_DESIGN_PROPS_PC,
-                  k: 1,
-                  name: 1
-                }, {
-                  default () {
-                    return renderPCStyle()
-                  }
-                })
-              )
-            }
-            if (showMobile) {
-              tabVNs.push(
-                h(VxeTabPaneComponent, {
-                  title: getI18n('vxe.formDesign.widgetProp.displaySetting.mobile'),
-                  icon: getIcon().FORM_DESIGN_PROPS_MOBILE,
-                  key: 2,
-                  name: 2
-                }, {
-                  default () {
-                    return renderMobileStyle()
-                  }
-                })
-              )
-            }
-            return tabVNs
-          }
-        })
-      ])
-    }
-
-    const renderVN = () => {
-      const { showPc, showMobile } = formDesignProps
-      return h(VxeModalComponent, {
-        modelValue: settingVisible.value,
-        title: getI18n('vxe.formDesign.styleSetting.title'),
-        height: '90vh',
-        width: '90vw',
-        escClosable: true,
-        maskClosable: true,
-        destroyOnClose: true,
-        showMaximize: true,
-        transfer: true,
-        'onUpdate:modelValue' (val) {
-          settingVisible.value = val
-        }
-      }, {
-        default () {
-          return h('div', {
-            class: 'vxe-form-design--layout-style'
-          }, [
-            renderStylePreview(),
-            showPc || showMobile ? renderStyleSetting() : createCommentVNode()
-          ])
-        }
-      })
-    }
-
-    $xeFormDesignLayoutStyle.renderVN = renderVN
-
-    provide('$xeFormDesignLayoutStyle', $xeFormDesignLayoutStyle)
-
-    return $xeFormDesignLayoutStyle
-  },
-  render () {
-    return this.renderVN()
-  }
-})

package/packages/form-design/src/layout-view-item.ts

@@ -1,149 +0,0 @@
-import { h, PropType, inject, createCommentVNode } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { getIcon } from '@vxe-ui/core'
-import VxeButtonComponent from '../../button/src/button'
-
-import type { VxeFormDesignDefines, VxeFormDesignConstructor, VxeFormDesignPrivateMethods } from '../../../types'
-
-export const ViewItemComponent = defineVxeComponent({
-  name: 'FormDesignLayoutViewItem',
-  props: {
-    item: {
-      type: Object as PropType<VxeFormDesignDefines.WidgetObjItem>,
-      default: () => ({})
-    },
-    itemIndex: {
-      type: Number,
-      default: 0
-    },
-    items: {
-      type: Array as PropType<VxeFormDesignDefines.WidgetObjItem[]>,
-      default: () => []
-    }
-  },
-  emits: [],
-  setup (props, { slots }) {
-    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
-
-    if (!$xeFormDesign) {
-      return () => []
-    }
-
-    const { reactData: formDesignReactData } = $xeFormDesign
-
-    const sortDragstartEvent = (evnt: DragEvent) => {
-      const { widgetObjList } = formDesignReactData
-      const divEl = evnt.currentTarget as HTMLDivElement
-      const widgetId = Number(divEl.getAttribute('data-widget-id'))
-      const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
-      if (currRest) {
-        formDesignReactData.dragWidget = null
-        formDesignReactData.sortWidget = currRest.item
-      }
-    }
-
-    const sortDragendEvent = () => {
-      formDesignReactData.activeWidget = formDesignReactData.sortWidget
-      formDesignReactData.sortWidget = null
-    }
-
-    const sortDragenterEvent = (evnt: DragEvent) => {
-      const { widgetObjList, sortWidget } = formDesignReactData
-      const formDesignInternalData = $xeFormDesign.internalData
-      const { lastDragTime } = formDesignInternalData
-      if (lastDragTime && lastDragTime > Date.now() - 300) {
-        evnt.preventDefault()
-        return
-      }
-      if (sortWidget) {
-        const divEl = evnt.currentTarget as HTMLDivElement
-        evnt.preventDefault()
-        const widgetId = Number(divEl.getAttribute('data-widget-id'))
-        if (widgetId !== sortWidget.id) {
-          const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
-          if (targetRest) {
-            const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === sortWidget.id, { children: 'children' })
-            if (currRest) {
-              // 控件换位置
-              if (currRest.parent && currRest.parent.name === 'row') {
-                // 如是是从 row 移出
-                currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget()
-              } else {
-                currRest.items.splice(currRest.index, 1)
-              }
-              targetRest.items.splice(targetRest.index, 0, currRest.item)
-              formDesignInternalData.lastDragTime = Date.now()
-              $xeFormDesign.dispatchEvent('drag-widget', { widget: currRest.item }, evnt)
-            }
-          }
-        }
-      }
-    }
-
-    // const dragoverItemEvent = (evnt: DragEvent) => {
-    //   // const { sortWidget, dragWidget } = formDesignReactData
-    //   // if (sortWidget || dragWidget) {
-    //   //   evnt.preventDefault()
-    //   // }
-    // }
-
-    const handleClickEvent = (evnt: KeyboardEvent, item: VxeFormDesignDefines.WidgetObjItem) => {
-      $xeFormDesign.handleClickWidget(evnt, item)
-    }
-
-    return () => {
-      const { dragWidget, activeWidget, sortWidget } = formDesignReactData
-      const { item } = props
-      const { name } = item
-      const isActive = activeWidget && activeWidget.id === item.id
-      const defaultSlot = slots.default
-
-      return h('div', {
-        key: item.id,
-        'data-widget-id': item.id,
-        draggable: true,
-        class: ['vxe-form-design--preview-item', `widget-${XEUtils.kebabCase(name)}`, {
-          'is--active': isActive,
-          'is--sort': sortWidget && sortWidget.id === item.id,
-          'is--drag': dragWidget && dragWidget.id === item.id
-        }],
-        onDragstart: sortDragstartEvent,
-        onDragend: sortDragendEvent,
-        onDragenter: sortDragenterEvent,
-        // onDragover: dragoverItemEvent,
-        onClick (evnt: KeyboardEvent) {
-          handleClickEvent(evnt, item)
-        }
-      }, [
-        h('div', {
-          class: 'vxe-form-design--preview-item-view vxe-form--item-row'
-        }, defaultSlot ? defaultSlot({}) : []),
-        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, item)
-              }
-            }),
-            h(VxeButtonComponent, {
-              icon: getIcon().FORM_DESIGN_WIDGET_DELETE,
-              status: 'danger',
-              size: 'mini',
-              circle: true,
-              onClick (params) {
-                $xeFormDesign.handleRemoveWidget(params.$event, item)
-              }
-            })
-          ])
-          : createCommentVNode()
-      ])
-    }
-  }
-})

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

@@ -1,146 +0,0 @@
-import { h, inject, VNode } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { getIcon, getI18n, renderer } from '@vxe-ui/core'
-import { getSlotVNs } from '../../ui/src/vn'
-import { getWidgetConfig, getWidgetConfigTitle } from './widget-info'
-
-import type { VxeFormDesignConstructor, VxeFormDesignPrivateMethods, VxeFormDesignDefines } from '../../../types'
-
-export default defineVxeComponent({
-  props: {},
-  emits: [],
-  setup () {
-    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
-
-    if (!$xeFormDesign) {
-      return () => []
-    }
-
-    const { reactData: formDesignReactData } = $xeFormDesign
-
-    const dragstartEvent = (evnt: DragEvent) => {
-      const divEl = evnt.currentTarget as HTMLDivElement
-      const dataTransfer = evnt.dataTransfer
-      const widgetName = divEl.getAttribute('data-widget-name') || ''
-      if ($xeFormDesign.validWidgetUnique(widgetName)) {
-        const dragWidget = $xeFormDesign.createWidget(widgetName)
-        if (dataTransfer) {
-          dataTransfer.setData('text/plain', widgetName)
-        }
-        formDesignReactData.sortWidget = null
-        formDesignReactData.dragWidget = dragWidget
-      } else {
-        evnt.preventDefault()
-      }
-    }
-
-    const dragendEvent = (evnt: DragEvent) => {
-      evnt.preventDefault()
-      if (formDesignReactData.dragWidget) {
-        const newWidget = formDesignReactData.dragWidget
-        formDesignReactData.activeWidget = newWidget
-        $xeFormDesign.dispatchEvent('add-widget', { newWidget }, evnt)
-      }
-      formDesignReactData.dragWidget = null
-      formDesignReactData.sortWidget = null
-    }
-
-    const cancelDragoverItem = (evnt: DragEvent, group: VxeFormDesignDefines.WidgetConfigGroup) => {
-      const { widgetObjList, dragWidget } = formDesignReactData
-      if (dragWidget) {
-        if (group.children.some(widget => widget.name === dragWidget.name)) {
-          const rest = XEUtils.findTree(widgetObjList, item => item && item.id === dragWidget.id, { children: 'children' })
-          if (rest) {
-            rest.items.splice(rest.index, 1)
-          }
-        }
-      }
-    }
-
-    const addNewWidget = (evnt: KeyboardEvent, widgetName: string) => {
-      if ($xeFormDesign.validWidgetUnique(widgetName)) {
-        const { widgetObjList } = formDesignReactData
-        const dragWidget = $xeFormDesign.createWidget(widgetName)
-        widgetObjList.push(dragWidget)
-        formDesignReactData.activeWidget = dragWidget
-        formDesignReactData.sortWidget = null
-        formDesignReactData.dragWidget = null
-        $xeFormDesign.dispatchEvent('add-widget', { newWidget: dragWidget }, evnt)
-      }
-    }
-
-    const renderWidgetList = (group: VxeFormDesignDefines.WidgetConfigGroup) => {
-      const widgetVNs: VNode[] = []
-      if (group.children) {
-        group.children.forEach((widget, index) => {
-          const { name } = widget
-          const configTitle = getWidgetConfigTitle(name, $xeFormDesign)
-          const compConf = renderer.get(name) || {}
-          const widgetConf = getWidgetConfig(name)
-          const renderWidgetItem = compConf.renderFormDesignWidgetItem
-          widgetVNs.push(
-            h('div', {
-              key: index,
-              class: 'vxe-form-design--widget-item'
-            }, h('div', {
-              class: 'vxe-form-design--widget-box',
-              'data-widget-name': name,
-              title: configTitle,
-              draggable: true,
-              onDragstart: dragstartEvent,
-              onDragend: dragendEvent
-            }, renderWidgetItem
-              ? getSlotVNs(renderWidgetItem({}, { $formDesign: $xeFormDesign }))
-              : [
-                  h('i', {
-                    class: ['vxe-form-design--widget-item-icon', widgetConf ? (widgetConf.icon || '') : '']
-                  }),
-                  h('span', {
-                    class: 'vxe-form-design--widget-item-name'
-                  }, configTitle),
-                  h('span', {
-                    class: 'vxe-form-design--widget-item-add',
-                    onClick (evnt: KeyboardEvent) {
-                      addNewWidget(evnt, name)
-                    }
-                  }, [
-                    h('i', {
-                      class: getIcon().FORM_DESIGN_WIDGET_ADD
-                    })
-                  ])
-                ]))
-          )
-        })
-      }
-      return widgetVNs
-    }
-
-    const renderWidgetGroups = () => {
-      const { widgetConfigs } = formDesignReactData
-      return widgetConfigs.map((config, gIndex) => {
-        const { title, group } = config
-        return h('div', {
-          key: gIndex,
-          class: 'vxe-form-design--widget-group'
-        }, [
-          h('div', {
-            class: 'vxe-form-design--widget-title'
-          }, group ? getI18n(`vxe.formDesign.widget.group.${group}`) : `${title || ''}`),
-          h('div', {
-            class: 'vxe-form-design--widget-list',
-            onDragover (evnt: DragEvent) {
-              cancelDragoverItem(evnt, config)
-            }
-          }, renderWidgetList(config))
-        ])
-      })
-    }
-
-    return () => {
-      return h('div', {
-        class: 'vxe-form-design--widget'
-      }, renderWidgetGroups())
-    }
-  }
-})

package/packages/form-design/src/use/index.ts

@@ -1,5 +0,0 @@
-export * from './widget-name'
-export * from './widget-view'
-export * from './widget-subtable-view'
-export * from './widget-prop-data-source'
-export * from './widget-prop-default-value'

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

@@ -1,14 +0,0 @@
-import { computed } from 'vue'
-import XEUtils from 'xe-utils'
-
-import type { VxeGlobalRendererHandles } from '../../../../types'
-
-export function useWidgetName (props: { renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions }) {
-  const computeKebabCaseName = computed(() => {
-    const { renderOpts } = props
-    return renderOpts ? XEUtils.kebabCase(renderOpts.name) : ''
-  })
-  return {
-    computeKebabCaseName
-  }
-}