@vxe-ui/plugin-render-antd 4.0.7 → 4.0.8

package/src/form-design/use.ts

@@ -1,255 +1,255 @@
-import { VNode, h, onMounted, ref, watch } from 'vue'
-
-import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormItemComponent, VxeButtonComponent, VxeTextareaComponent, VxeTipComponent } from 'vxe-pc-ui'
-
-export interface WidgetDataSourceOptionSubObjVO {
-  value: string,
-}
-
-export interface WidgetDataSourceOptionObjVO {
-  value: string,
-  options?: WidgetDataSourceOptionSubObjVO[]
-}
-
-export function useWidgetPropDataSource (VxeUI: VxeUIExport, props: {
-  readonly renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions;
-  readonly renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<{
-    options: WidgetDataSourceOptionObjVO[]
-  }>;
-}, isSubOption: boolean) {
-  const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
-  const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
-  const VxeUITextareaComponent = VxeUI.getComponent<VxeTextareaComponent>('VxeTextarea')
-  const VxeUITipComponent = VxeUI.getComponent<VxeTipComponent>('VxeTip')
-
-  const optionsContent = ref('')
-  const expandIndexList = ref<number[]>([])
-
-  const addOptionEvent = () => {
-    const { renderParams } = props
-    const { widget } = renderParams
-    const options = widget.options.options || []
-    options.push({
-      value: VxeUI.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 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} - ${VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption')}`,
-      width: 500,
-      height: '50vh ',
-      resize: true,
-      showFooter: true,
-      showCancelButton: true,
-      showConfirmButton: true,
-      confirmButtonText: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.buildOption'),
-      onConfirm: confirmBatchAddOptionEvent,
-      slots: {
-        default () {
-          return h('div', {
-            class: 'vxe-form-design--widget-form-item-data-source-popup'
-          }, [
-            h(VxeUITipComponent, {
-              status: 'primary',
-              title: '',
-              content: VxeUI.getI18n(`vxe.formDesign.widgetProp.dataSource.${isSubOption ? 'batchEditSubTip' : 'batchEditTip'}`)
-            }),
-            h(VxeUITextareaComponent, {
-              resize: 'none',
-              modelValue: optionsContent.value,
-              'onUpdate:modelValue' (val: any) {
-                optionsContent.value = val
-              }
-            })
-          ])
-        }
-      }
-    })
-  }
-
-  const renderOption = (item: WidgetDataSourceOptionSubObjVO, hasFirstLevel: boolean, isExpand: boolean, gIndex: number, hasSub: boolean, isFirst: boolean, isLast: boolean) => {
-    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 ? VxeUI.getIcon().FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE : VxeUI.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(VxeUIButtonComponent, {
-        status: 'danger',
-        mode: 'text',
-        icon: VxeUI.getIcon().FORM_DESIGN_WIDGET_DELETE
-      })
-    ])
-  }
-
-  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, true, 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, false, isExpand, 0, false, false, false)))
-            )
-          }
-        } else {
-          optVNs.push(renderOption(group, true, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1))
-        }
-      })
-    }
-    return optVNs
-  }
-
-  watch(() => props.renderParams.widget, () => {
-    expandAllOption()
-  })
-
-  onMounted(() => {
-    expandAllOption()
-  })
-
-  return {
-    renderDataSourceFormItem () {
-      return h(VxeUIFormItemComponent, {
-        title: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.name'),
-        field: 'options'
-      }, {
-        default () {
-          return [
-            h('div', {}, [
-              h(VxeUIButtonComponent, {
-                status: 'primary',
-                mode: 'text',
-                content: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.addOption'),
-                onClick: addOptionEvent
-              }),
-              h(VxeUIButtonComponent, {
-                status: 'primary',
-                mode: 'text',
-                content: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption'),
-                onClick: openPopupEditEvent
-              })
-            ]),
-            h('div', {
-              class: 'vxe-form-design--widget-form-item-data-source'
-            }, renderOptions())
-          ]
-        }
-      })
-    }
-  }
-}
+import { VNode, h, onMounted, ref, watch } from 'vue'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormItemComponent, VxeButtonComponent, VxeTextareaComponent, VxeTipComponent } from 'vxe-pc-ui'
+
+export interface WidgetDataSourceOptionSubObjVO {
+  value: string,
+}
+
+export interface WidgetDataSourceOptionObjVO {
+  value: string,
+  options?: WidgetDataSourceOptionSubObjVO[]
+}
+
+export function useWidgetPropDataSource (VxeUI: VxeUIExport, props: {
+  readonly renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions;
+  readonly renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<{
+    options: WidgetDataSourceOptionObjVO[]
+  }>;
+}, isSubOption: boolean) {
+  const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+  const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+  const VxeUITextareaComponent = VxeUI.getComponent<VxeTextareaComponent>('VxeTextarea')
+  const VxeUITipComponent = VxeUI.getComponent<VxeTipComponent>('VxeTip')
+
+  const optionsContent = ref('')
+  const expandIndexList = ref<number[]>([])
+
+  const addOptionEvent = () => {
+    const { renderParams } = props
+    const { widget } = renderParams
+    const options = widget.options.options || []
+    options.push({
+      value: VxeUI.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 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} - ${VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption')}`,
+      width: 500,
+      height: '50vh ',
+      resize: true,
+      showFooter: true,
+      showCancelButton: true,
+      showConfirmButton: true,
+      confirmButtonText: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.buildOption'),
+      onConfirm: confirmBatchAddOptionEvent,
+      slots: {
+        default () {
+          return h('div', {
+            class: 'vxe-form-design--widget-form-item-data-source-popup'
+          }, [
+            h(VxeUITipComponent, {
+              status: 'primary',
+              title: '',
+              content: VxeUI.getI18n(`vxe.formDesign.widgetProp.dataSource.${isSubOption ? 'batchEditSubTip' : 'batchEditTip'}`)
+            }),
+            h(VxeUITextareaComponent, {
+              resize: 'none',
+              modelValue: optionsContent.value,
+              'onUpdate:modelValue' (val: any) {
+                optionsContent.value = val
+              }
+            })
+          ])
+        }
+      }
+    })
+  }
+
+  const renderOption = (item: WidgetDataSourceOptionSubObjVO, hasFirstLevel: boolean, isExpand: boolean, gIndex: number, hasSub: boolean, isFirst: boolean, isLast: boolean) => {
+    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 ? VxeUI.getIcon().FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE : VxeUI.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(VxeUIButtonComponent, {
+        status: 'danger',
+        mode: 'text',
+        icon: VxeUI.getIcon().FORM_DESIGN_WIDGET_DELETE
+      })
+    ])
+  }
+
+  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, true, 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, false, isExpand, 0, false, false, false)))
+            )
+          }
+        } else {
+          optVNs.push(renderOption(group, true, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1))
+        }
+      })
+    }
+    return optVNs
+  }
+
+  watch(() => props.renderParams.widget, () => {
+    expandAllOption()
+  })
+
+  onMounted(() => {
+    expandAllOption()
+  })
+
+  return {
+    renderDataSourceFormItem () {
+      return h(VxeUIFormItemComponent, {
+        title: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.name'),
+        field: 'options'
+      }, {
+        default () {
+          return [
+            h('div', {}, [
+              h(VxeUIButtonComponent, {
+                status: 'primary',
+                mode: 'text',
+                content: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.addOption'),
+                onClick: addOptionEvent
+              }),
+              h(VxeUIButtonComponent, {
+                status: 'primary',
+                mode: 'text',
+                content: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption'),
+                onClick: openPopupEditEvent
+              })
+            ]),
+            h('div', {
+              class: 'vxe-form-design--widget-form-item-data-source'
+            }, renderOptions())
+          ]
+        }
+      })
+    }
+  }
+}

package/src/index.ts

@@ -1,71 +1,71 @@
-import { defineTableRender } from './table'
-import { defineFormRender } from './form'
-import { defineFormDesignRender } from './form-design'
-
-import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
-
-/**
- * 检查触发源是否属于目标节点
- */
-function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
-  let targetElem
-  let target = evnt.target
-  while (target && target.nodeType && target !== document) {
-    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
-      targetElem = target
-    } else if (target === container) {
-      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
-    }
-    target = target.parentNode
-  }
-  return { flag: false }
-}
-
-/**
- * 事件兼容性处理
- */
-function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
-  const { $event } = params
-  const bodyElem = document.body
-  if (
-    // 下拉框
-    getEventTargetNode($event, bodyElem, 'ant-select-dropdown').flag ||
-    // 级联
-    getEventTargetNode($event, bodyElem, 'ant-cascader-menus').flag ||
-    // 日期
-    getEventTargetNode($event, bodyElem, 'ant-picker-dropdown').flag ||
-    getEventTargetNode($event, bodyElem, 'ant-calendar-picker-container').flag ||
-    // 时间选择
-    getEventTargetNode($event, bodyElem, 'ant-time-picker-panel').flag
-  ) {
-    return false
-  }
-}
-
-export const VxeUIPluginRenderAntd: VxeUIPluginObject = {
-  install (VxeUI, options?: {
-    Antd?: any
-  }) {
-    // 检查版本
-    if (!/^(4)\./.test(VxeUI.uiVersion)) {
-      console.error('[plugin-render-antd 4.x] Version 4.x is required')
-    }
-
-    defineTableRender(VxeUI)
-    defineFormRender(VxeUI)
-    defineFormDesignRender(VxeUI)
-
-    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
-    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
-    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
-
-    // 兼容老版本
-    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
-  }
-}
-
-if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
-  window.VxeUI.use(VxeUIPluginRenderAntd)
-}
-
-export default VxeUIPluginRenderAntd
+import { defineTableRender } from './table'
+import { defineFormRender } from './form'
+import { defineFormDesignRender } from './form-design'
+
+import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
+  let targetElem
+  let target = evnt.target
+  while (target && target.nodeType && target !== document) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentNode
+  }
+  return { flag: false }
+}
+
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+  const { $event } = params
+  const bodyElem = document.body
+  if (
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'ant-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'ant-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'ant-picker-dropdown').flag ||
+    getEventTargetNode($event, bodyElem, 'ant-calendar-picker-container').flag ||
+    // 时间选择
+    getEventTargetNode($event, bodyElem, 'ant-time-picker-panel').flag
+  ) {
+    return false
+  }
+}
+
+export const VxeUIPluginRenderAntd: VxeUIPluginObject = {
+  install (VxeUI, options?: {
+    Antd?: any
+  }) {
+    // 检查版本
+    if (!/^(4)\./.test(VxeUI.uiVersion)) {
+      console.error('[VUE_APP_VXE_PLUGIN_VERSION] Requires VUE_APP_VXE_TABLE_VERSION+ version. VUE_APP_VXE_PLUGIN_DESCRIBE')
+    }
+
+    defineTableRender(VxeUI)
+    defineFormRender(VxeUI)
+    defineFormDesignRender(VxeUI)
+
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
+
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
+  }
+}
+
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderAntd)
+}
+
+export default VxeUIPluginRenderAntd