@vxe-ui/plugin-render-element 4.3.0 → 4.4.0

package/src/form-design/checkbox-widget.ts

@@ -1,167 +1,167 @@
-import { defineComponent, h, PropType, ComponentOptions } from 'vue'
-import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
-import { getCurrComponent } from '../util/comp'
-import XEUtils from 'xe-utils'
-
-import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
-
-interface WidgetElCheckboxFormObjVO {
-  options: WidgetDataSourceOptionObjVO[]
-}
-
-export function createWidgetElCheckbox (VxeUI: VxeUIExport) {
-  const getWidgetElCheckboxConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetElCheckboxFormObjVO> => {
-    return {
-      title: '复选框',
-      icon: 'vxe-icon-checkbox-checked',
-      options: {
-        options: XEUtils.range(0, 3).map((v, i) => {
-          return {
-            value: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [i + 1])
-          }
-        })
-      }
-    }
-  }
-
-  const WidgetElCheckboxFormComponent = defineComponent({
-    props: {
-      renderOpts: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
-        default: () => ({})
-      },
-      renderParams: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetElCheckboxFormObjVO>>,
-        default: () => ({})
-      }
-    },
-    emits: [],
-    setup (props) {
-      const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
-      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
-      const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch')
-
-      const { renderDataSourceFormItem } = useWidgetPropDataSource(VxeUI, props, false)
-
-      return () => {
-        const { renderParams } = props
-        const { widget } = renderParams
-
-        return h(VxeUIFormComponent, {
-          class: 'vxe-form-design--widget-render-form-wrapper',
-          vertical: true,
-          span: 24,
-          titleBold: true,
-          titleOverflow: true,
-          data: widget.options
-        }, {
-          default () {
-            return [
-              h(VxeUIFormItemComponent, {
-                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
-              }, {
-                default () {
-                  return h(getCurrComponent('el-input') as ComponentOptions, {
-                    modelValue: widget.title,
-                    'onUpdate:modelValue' (val: any) {
-                      widget.title = val
-                    }
-                  })
-                }
-              }),
-              h(VxeUIFormItemComponent, {
-                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
-                field: 'placeholder',
-                itemRender: { name: 'ElInput' }
-              }),
-              h(VxeUIFormItemComponent, {
-                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
-              }, {
-                default () {
-                  return h(VxeUISwitchComponent, {
-                    modelValue: widget.required,
-                    'onUpdate:modelValue' (val: any) {
-                      widget.required = val
-                    }
-                  })
-                }
-              }),
-              renderDataSourceFormItem()
-            ]
-          }
-        })
-      }
-    }
-  })
-
-  const WidgetElCheckboxViewComponent = defineComponent({
-    props: {
-      renderOpts: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
-        default: () => ({})
-      },
-      renderParams: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetElCheckboxFormObjVO>>,
-        default: () => ({})
-      }
-    },
-    emits: [],
-    setup (props) {
-      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
-
-      const changeEvent = () => {
-        const { renderParams } = props
-        const { widget, $formView } = renderParams
-        if ($formView) {
-          const itemValue = $formView ? $formView.getItemValue(widget) : null
-          $formView.updateWidgetStatus(widget, itemValue)
-        }
-      }
-
-      return () => {
-        const { renderParams } = props
-        const { widget, $formView } = renderParams
-        const { options } = widget
-
-        return h(VxeUIFormItemComponent, {
-          class: ['vxe-form-design--widget-render-form-item'],
-          field: widget.field,
-          title: widget.title
-        }, {
-          default () {
-            return h(getCurrComponent('el-checkbox-group') as ComponentOptions, {
-              modelValue: $formView ? $formView.getItemValue(widget) : null,
-              onChange: changeEvent,
-              'onUpdate:modelValue' (val: any) {
-                if ($formView) {
-                  $formView.setItemValue(widget, val)
-                }
-              }
-            }, {
-              default: () => {
-                return options.options
-                  ? options.options.map((item, index) => {
-                    return h(getCurrComponent('el-checkbox') as ComponentOptions, {
-                      key: index,
-                      value: item.value
-                    }, {
-                      default () {
-                        return `${item.value}`
-                      }
-                    })
-                  })
-                  : []
-              }
-            })
-          }
-        })
-      }
-    }
-  })
-
-  return {
-    getWidgetElCheckboxConfig,
-    WidgetElCheckboxFormComponent,
-    WidgetElCheckboxViewComponent
-  }
-}
+import { defineComponent, h, PropType, ComponentOptions } from 'vue'
+import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
+import { getCurrComponent } from '../util/comp'
+import XEUtils from 'xe-utils'
+
+import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
+
+interface WidgetElCheckboxFormObjVO {
+  options: WidgetDataSourceOptionObjVO[]
+}
+
+export function createWidgetElCheckbox (VxeUI: VxeUIExport) {
+  const getWidgetElCheckboxConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetElCheckboxFormObjVO> => {
+    return {
+      title: '复选框',
+      icon: 'vxe-icon-checkbox-checked',
+      options: {
+        options: XEUtils.range(0, 3).map((v, i) => {
+          return {
+            value: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [i + 1])
+          }
+        })
+      }
+    }
+  }
+
+  const WidgetElCheckboxFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetElCheckboxFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
+      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
+      const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch')
+
+      const { renderDataSourceFormItem } = useWidgetPropDataSource(VxeUI, props, false)
+
+      return () => {
+        const { renderParams } = props
+        const { widget } = renderParams
+
+        return h(VxeUIFormComponent, {
+          class: 'vxe-form-design--widget-render-form-wrapper',
+          vertical: true,
+          span: 24,
+          titleBold: true,
+          titleOverflow: true,
+          data: widget.options
+        }, {
+          default () {
+            return [
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
+              }, {
+                default () {
+                  return h(getCurrComponent('el-input') as ComponentOptions, {
+                    modelValue: widget.title,
+                    'onUpdate:modelValue' (val: any) {
+                      widget.title = val
+                    }
+                  })
+                }
+              }),
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                field: 'placeholder',
+                itemRender: { name: 'ElInput' }
+              }),
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+              }, {
+                default () {
+                  return h(VxeUISwitchComponent, {
+                    modelValue: widget.required,
+                    'onUpdate:modelValue' (val: any) {
+                      widget.required = val
+                    }
+                  })
+                }
+              }),
+              renderDataSourceFormItem()
+            ]
+          }
+        })
+      }
+    }
+  })
+
+  const WidgetElCheckboxViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetElCheckboxFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
+
+      const changeEvent = () => {
+        const { renderParams } = props
+        const { widget, $formView } = renderParams
+        if ($formView) {
+          const itemValue = $formView ? $formView.getItemValue(widget) : null
+          $formView.updateWidgetStatus(widget, itemValue)
+        }
+      }
+
+      return () => {
+        const { renderParams } = props
+        const { widget, $formView } = renderParams
+        const { options } = widget
+
+        return h(VxeUIFormItemComponent, {
+          class: ['vxe-form-design--widget-render-form-item'],
+          field: widget.field,
+          title: widget.title
+        }, {
+          default () {
+            return h(getCurrComponent('el-checkbox-group') as ComponentOptions, {
+              modelValue: $formView ? $formView.getItemValue(widget) : null,
+              onChange: changeEvent,
+              'onUpdate:modelValue' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            }, {
+              default: () => {
+                return options.options
+                  ? options.options.map((item, index) => {
+                    return h(getCurrComponent('el-checkbox') as ComponentOptions, {
+                      key: index,
+                      value: item.value
+                    }, {
+                      default () {
+                        return `${item.value}`
+                      }
+                    })
+                  })
+                  : []
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetElCheckboxConfig,
+    WidgetElCheckboxFormComponent,
+    WidgetElCheckboxViewComponent
+  }
+}

package/src/form-design/date-picker-widget.ts

@@ -1,144 +1,144 @@
-import { defineComponent, h, PropType, ComponentOptions } from 'vue'
-import { getCurrComponent } from '../util/comp'
-
-import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
-
-interface WidgetElDatePickerFormObjVO {
-  placeholder: string
-}
-
-export function createWidgetElDatePicker (VxeUI: VxeUIExport) {
-  const getWidgetElDatePickerConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetElDatePickerFormObjVO> => {
-    return {
-      title: '日期',
-      icon: 'vxe-icon-input',
-      options: {
-        placeholder: '请选择'
-      }
-    }
-  }
-
-  const WidgetElDatePickerFormComponent = defineComponent({
-    props: {
-      renderOpts: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
-        default: () => ({})
-      },
-      renderParams: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetElDatePickerFormObjVO>>,
-        default: () => ({})
-      }
-    },
-    emits: [],
-    setup (props) {
-      const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
-      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
-      const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch')
-
-      return () => {
-        const { renderParams } = props
-        const { widget } = renderParams
-
-        return h(VxeUIFormComponent, {
-          class: 'vxe-form-design--widget-render-form-wrapper',
-          vertical: true,
-          span: 24,
-          titleBold: true,
-          titleOverflow: true,
-          data: widget.options
-        }, {
-          default () {
-            return [
-              h(VxeUIFormItemComponent, {
-                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
-              }, {
-                default () {
-                  return h(getCurrComponent('el-input') as ComponentOptions, {
-                    modelValue: widget.title,
-                    'onUpdate:modelValue' (val: any) {
-                      widget.title = val
-                    }
-                  })
-                }
-              }),
-              h(VxeUIFormItemComponent, {
-                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
-                field: 'placeholder',
-                itemRender: { name: 'ElDatePicker' }
-              }),
-              h(VxeUIFormItemComponent, {
-                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
-              }, {
-                default () {
-                  return h(VxeUISwitchComponent, {
-                    modelValue: widget.required,
-                    'onUpdate:modelValue' (val: any) {
-                      widget.required = val
-                    }
-                  })
-                }
-              })
-            ]
-          }
-        })
-      }
-    }
-  })
-
-  const WidgetElDatePickerViewComponent = defineComponent({
-    props: {
-      renderOpts: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
-        default: () => ({})
-      },
-      renderParams: {
-        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetElDatePickerFormObjVO>>,
-        default: () => ({})
-      }
-    },
-    emits: [],
-    setup (props) {
-      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
-
-      const changeEvent = () => {
-        const { renderParams } = props
-        const { widget, $formView } = renderParams
-        if ($formView) {
-          const itemValue = $formView ? $formView.getItemValue(widget) : null
-          $formView.updateWidgetStatus(widget, itemValue)
-        }
-      }
-
-      return () => {
-        const { renderParams } = props
-        const { widget, $formView } = renderParams
-        const { options } = widget
-
-        return h(VxeUIFormItemComponent, {
-          class: ['vxe-form-design--widget-render-form-item'],
-          field: widget.field,
-          title: widget.title
-        }, {
-          default () {
-            return h(getCurrComponent('el-date-picker') as ComponentOptions, {
-              modelValue: $formView ? $formView.getItemValue(widget) : null,
-              placeholder: options.placeholder,
-              onChange: changeEvent,
-              'onUpdate:modelValue' (val: any) {
-                if ($formView) {
-                  $formView.setItemValue(widget, val)
-                }
-              }
-            })
-          }
-        })
-      }
-    }
-  })
-
-  return {
-    getWidgetElDatePickerConfig,
-    WidgetElDatePickerFormComponent,
-    WidgetElDatePickerViewComponent
-  }
-}
+import { defineComponent, h, PropType, ComponentOptions } from 'vue'
+import { getCurrComponent } from '../util/comp'
+
+import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
+
+interface WidgetElDatePickerFormObjVO {
+  placeholder: string
+}
+
+export function createWidgetElDatePicker (VxeUI: VxeUIExport) {
+  const getWidgetElDatePickerConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetElDatePickerFormObjVO> => {
+    return {
+      title: '日期',
+      icon: 'vxe-icon-input',
+      options: {
+        placeholder: '请选择'
+      }
+    }
+  }
+
+  const WidgetElDatePickerFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetElDatePickerFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
+      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
+      const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch')
+
+      return () => {
+        const { renderParams } = props
+        const { widget } = renderParams
+
+        return h(VxeUIFormComponent, {
+          class: 'vxe-form-design--widget-render-form-wrapper',
+          vertical: true,
+          span: 24,
+          titleBold: true,
+          titleOverflow: true,
+          data: widget.options
+        }, {
+          default () {
+            return [
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
+              }, {
+                default () {
+                  return h(getCurrComponent('el-input') as ComponentOptions, {
+                    modelValue: widget.title,
+                    'onUpdate:modelValue' (val: any) {
+                      widget.title = val
+                    }
+                  })
+                }
+              }),
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                field: 'placeholder',
+                itemRender: { name: 'ElDatePicker' }
+              }),
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+              }, {
+                default () {
+                  return h(VxeUISwitchComponent, {
+                    modelValue: widget.required,
+                    'onUpdate:modelValue' (val: any) {
+                      widget.required = val
+                    }
+                  })
+                }
+              })
+            ]
+          }
+        })
+      }
+    }
+  })
+
+  const WidgetElDatePickerViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetElDatePickerFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
+
+      const changeEvent = () => {
+        const { renderParams } = props
+        const { widget, $formView } = renderParams
+        if ($formView) {
+          const itemValue = $formView ? $formView.getItemValue(widget) : null
+          $formView.updateWidgetStatus(widget, itemValue)
+        }
+      }
+
+      return () => {
+        const { renderParams } = props
+        const { widget, $formView } = renderParams
+        const { options } = widget
+
+        return h(VxeUIFormItemComponent, {
+          class: ['vxe-form-design--widget-render-form-item'],
+          field: widget.field,
+          title: widget.title
+        }, {
+          default () {
+            return h(getCurrComponent('el-date-picker') as ComponentOptions, {
+              modelValue: $formView ? $formView.getItemValue(widget) : null,
+              placeholder: options.placeholder,
+              onChange: changeEvent,
+              'onUpdate:modelValue' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetElDatePickerConfig,
+    WidgetElDatePickerFormComponent,
+    WidgetElDatePickerViewComponent
+  }
+}