@vxe-ui/plugin-render-antd 4.3.1 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,101 +1,101 @@
1
- import { h } from 'vue'
2
- import { createWidgetAInput } from './input-widget'
3
- import { createWidgetATextarea } from './textarea-widget'
4
- import { createWidgetAInputNumber } from './number-input-widget'
5
- import { createWidgetADatePicker } from './date-picker-widget'
6
- import { createWidgetASelect } from './select-widget'
7
- import { createWidgetARadio } from './radio-widget'
8
- import { createWidgetACheckbox } from './checkbox-widget'
9
- import { createWidgetASwitch } from './switch-widget'
10
-
11
- import type { VxeUIExport } from 'vxe-pc-ui'
12
-
13
- /**
14
- * 表单设计器 - 渲染器
15
- */
16
- export function defineFormDesignRender (VxeUI: VxeUIExport) {
17
- const { getWidgetAInputConfig, WidgetAInputViewComponent, WidgetAInputFormComponent } = createWidgetAInput(VxeUI)
18
- const { getWidgetATextareaConfig, WidgetATextareaViewComponent, WidgetATextareaFormComponent } = createWidgetATextarea(VxeUI)
19
- const { getWidgetAInputNumberConfig, WidgetAInputNumberViewComponent, WidgetAInputNumberFormComponent } = createWidgetAInputNumber(VxeUI)
20
- const { getWidgetADatePickerConfig, WidgetADatePickerViewComponent, WidgetADatePickerFormComponent } = createWidgetADatePicker(VxeUI)
21
- const { getWidgetASelectConfig, WidgetASelectViewComponent, WidgetASelectFormComponent } = createWidgetASelect(VxeUI)
22
- const { getWidgetARadioConfig, WidgetARadioViewComponent, WidgetARadioFormComponent } = createWidgetARadio(VxeUI)
23
- const { getWidgetACheckboxConfig, WidgetACheckboxViewComponent, WidgetACheckboxFormComponent } = createWidgetACheckbox(VxeUI)
24
- const { getWidgetASwitchConfig, WidgetASwitchViewComponent, WidgetASwitchFormComponent } = createWidgetASwitch(VxeUI)
25
-
26
- VxeUI.renderer.mixin({
27
- AInputWidget: {
28
- createFormDesignWidgetConfig: getWidgetAInputConfig,
29
- renderFormDesignWidgetView (renderOpts, renderParams) {
30
- return h(WidgetAInputViewComponent, { renderOpts, renderParams })
31
- },
32
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
33
- return h(WidgetAInputFormComponent, { renderOpts, renderParams })
34
- }
35
- },
36
- ATextareaWidget: {
37
- createFormDesignWidgetConfig: getWidgetATextareaConfig,
38
- renderFormDesignWidgetView (renderOpts, renderParams) {
39
- return h(WidgetATextareaViewComponent, { renderOpts, renderParams })
40
- },
41
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
42
- return h(WidgetATextareaFormComponent, { renderOpts, renderParams })
43
- }
44
- },
45
- ANumberInputWidget: {
46
- createFormDesignWidgetConfig: getWidgetAInputNumberConfig,
47
- renderFormDesignWidgetView (renderOpts, renderParams) {
48
- return h(WidgetAInputNumberViewComponent, { renderOpts, renderParams })
49
- },
50
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
51
- return h(WidgetAInputNumberFormComponent, { renderOpts, renderParams })
52
- }
53
- },
54
- ADatePickerWidget: {
55
- createFormDesignWidgetConfig: getWidgetADatePickerConfig,
56
- renderFormDesignWidgetView (renderOpts, renderParams) {
57
- return h(WidgetADatePickerViewComponent, { renderOpts, renderParams })
58
- },
59
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
60
- return h(WidgetADatePickerFormComponent, { renderOpts, renderParams })
61
- }
62
- },
63
- ASelectWidget: {
64
- createFormDesignWidgetConfig: getWidgetASelectConfig,
65
- renderFormDesignWidgetView (renderOpts, renderParams) {
66
- return h(WidgetASelectViewComponent, { renderOpts, renderParams })
67
- },
68
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
69
- return h(WidgetASelectFormComponent, { renderOpts, renderParams })
70
- }
71
- },
72
- ARadioWidget: {
73
- createFormDesignWidgetConfig: getWidgetARadioConfig,
74
- renderFormDesignWidgetView (renderOpts, renderParams) {
75
- return h(WidgetARadioViewComponent, { renderOpts, renderParams })
76
- },
77
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
78
- return h(WidgetARadioFormComponent, { renderOpts, renderParams })
79
- }
80
- },
81
- ACheckboxWidget: {
82
- createFormDesignWidgetConfig: getWidgetACheckboxConfig,
83
- createFormDesignWidgetFieldValue: () => [],
84
- renderFormDesignWidgetView (renderOpts: any, renderParams: any) {
85
- return h(WidgetACheckboxViewComponent, { renderOpts, renderParams })
86
- },
87
- renderFormDesignWidgetFormView (renderOpts: any, renderParams: any) {
88
- return h(WidgetACheckboxFormComponent, { renderOpts, renderParams })
89
- }
90
- },
91
- ASwitchWidget: {
92
- createFormDesignWidgetConfig: getWidgetASwitchConfig,
93
- renderFormDesignWidgetView (renderOpts, renderParams) {
94
- return h(WidgetASwitchViewComponent, { renderOpts, renderParams })
95
- },
96
- renderFormDesignWidgetFormView (renderOpts, renderParams) {
97
- return h(WidgetASwitchFormComponent, { renderOpts, renderParams })
98
- }
99
- }
100
- })
101
- }
1
+ import { h } from 'vue'
2
+ import { createWidgetAInput } from './input-widget'
3
+ import { createWidgetATextarea } from './textarea-widget'
4
+ import { createWidgetAInputNumber } from './number-input-widget'
5
+ import { createWidgetADatePicker } from './date-picker-widget'
6
+ import { createWidgetASelect } from './select-widget'
7
+ import { createWidgetARadio } from './radio-widget'
8
+ import { createWidgetACheckbox } from './checkbox-widget'
9
+ import { createWidgetASwitch } from './switch-widget'
10
+
11
+ import type { VxeUIExport } from 'vxe-pc-ui'
12
+
13
+ /**
14
+ * 表单设计器 - 渲染器
15
+ */
16
+ export function defineFormDesignRender (VxeUI: VxeUIExport) {
17
+ const { getWidgetAInputConfig, WidgetAInputViewComponent, WidgetAInputFormComponent } = createWidgetAInput(VxeUI)
18
+ const { getWidgetATextareaConfig, WidgetATextareaViewComponent, WidgetATextareaFormComponent } = createWidgetATextarea(VxeUI)
19
+ const { getWidgetAInputNumberConfig, WidgetAInputNumberViewComponent, WidgetAInputNumberFormComponent } = createWidgetAInputNumber(VxeUI)
20
+ const { getWidgetADatePickerConfig, WidgetADatePickerViewComponent, WidgetADatePickerFormComponent } = createWidgetADatePicker(VxeUI)
21
+ const { getWidgetASelectConfig, WidgetASelectViewComponent, WidgetASelectFormComponent } = createWidgetASelect(VxeUI)
22
+ const { getWidgetARadioConfig, WidgetARadioViewComponent, WidgetARadioFormComponent } = createWidgetARadio(VxeUI)
23
+ const { getWidgetACheckboxConfig, WidgetACheckboxViewComponent, WidgetACheckboxFormComponent } = createWidgetACheckbox(VxeUI)
24
+ const { getWidgetASwitchConfig, WidgetASwitchViewComponent, WidgetASwitchFormComponent } = createWidgetASwitch(VxeUI)
25
+
26
+ VxeUI.renderer.mixin({
27
+ AInputWidget: {
28
+ createFormDesignWidgetConfig: getWidgetAInputConfig,
29
+ renderFormDesignWidgetView (renderOpts, renderParams) {
30
+ return h(WidgetAInputViewComponent, { renderOpts, renderParams })
31
+ },
32
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
33
+ return h(WidgetAInputFormComponent, { renderOpts, renderParams })
34
+ }
35
+ },
36
+ ATextareaWidget: {
37
+ createFormDesignWidgetConfig: getWidgetATextareaConfig,
38
+ renderFormDesignWidgetView (renderOpts, renderParams) {
39
+ return h(WidgetATextareaViewComponent, { renderOpts, renderParams })
40
+ },
41
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
42
+ return h(WidgetATextareaFormComponent, { renderOpts, renderParams })
43
+ }
44
+ },
45
+ ANumberInputWidget: {
46
+ createFormDesignWidgetConfig: getWidgetAInputNumberConfig,
47
+ renderFormDesignWidgetView (renderOpts, renderParams) {
48
+ return h(WidgetAInputNumberViewComponent, { renderOpts, renderParams })
49
+ },
50
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
51
+ return h(WidgetAInputNumberFormComponent, { renderOpts, renderParams })
52
+ }
53
+ },
54
+ ADatePickerWidget: {
55
+ createFormDesignWidgetConfig: getWidgetADatePickerConfig,
56
+ renderFormDesignWidgetView (renderOpts, renderParams) {
57
+ return h(WidgetADatePickerViewComponent, { renderOpts, renderParams })
58
+ },
59
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
60
+ return h(WidgetADatePickerFormComponent, { renderOpts, renderParams })
61
+ }
62
+ },
63
+ ASelectWidget: {
64
+ createFormDesignWidgetConfig: getWidgetASelectConfig,
65
+ renderFormDesignWidgetView (renderOpts, renderParams) {
66
+ return h(WidgetASelectViewComponent, { renderOpts, renderParams })
67
+ },
68
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
69
+ return h(WidgetASelectFormComponent, { renderOpts, renderParams })
70
+ }
71
+ },
72
+ ARadioWidget: {
73
+ createFormDesignWidgetConfig: getWidgetARadioConfig,
74
+ renderFormDesignWidgetView (renderOpts, renderParams) {
75
+ return h(WidgetARadioViewComponent, { renderOpts, renderParams })
76
+ },
77
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
78
+ return h(WidgetARadioFormComponent, { renderOpts, renderParams })
79
+ }
80
+ },
81
+ ACheckboxWidget: {
82
+ createFormDesignWidgetConfig: getWidgetACheckboxConfig,
83
+ createFormDesignWidgetFieldValue: () => [],
84
+ renderFormDesignWidgetView (renderOpts: any, renderParams: any) {
85
+ return h(WidgetACheckboxViewComponent, { renderOpts, renderParams })
86
+ },
87
+ renderFormDesignWidgetFormView (renderOpts: any, renderParams: any) {
88
+ return h(WidgetACheckboxFormComponent, { renderOpts, renderParams })
89
+ }
90
+ },
91
+ ASwitchWidget: {
92
+ createFormDesignWidgetConfig: getWidgetASwitchConfig,
93
+ renderFormDesignWidgetView (renderOpts, renderParams) {
94
+ return h(WidgetASwitchViewComponent, { renderOpts, renderParams })
95
+ },
96
+ renderFormDesignWidgetFormView (renderOpts, renderParams) {
97
+ return h(WidgetASwitchFormComponent, { renderOpts, renderParams })
98
+ }
99
+ }
100
+ })
101
+ }
@@ -1,145 +1,145 @@
1
- import { defineComponent, h, PropType, ComponentOptions } from 'vue'
2
- import { getCurrComponent } from '../util/comp'
3
-
4
- import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
5
-
6
- interface WidgetAInputFormObjVO {
7
- placeholder: string
8
- }
9
-
10
- export function createWidgetAInput (VxeUI: VxeUIExport) {
11
- const getWidgetAInputConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetAInputFormObjVO> => {
12
- return {
13
- title: '输入框',
14
- icon: 'vxe-icon-input',
15
- options: {
16
- placeholder: ''
17
- }
18
- }
19
- }
20
-
21
- const WidgetAInputFormComponent = defineComponent({
22
- props: {
23
- renderOpts: {
24
- type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
25
- default: () => ({})
26
- },
27
- renderParams: {
28
- type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetAInputFormObjVO>>,
29
- default: () => ({})
30
- }
31
- },
32
- emits: [],
33
- setup (props) {
34
- const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
35
- const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
36
- const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch')
37
- const VxeUIInputComponent = VxeUI.getComponent('VxeInput')
38
-
39
- return () => {
40
- const { renderParams } = props
41
- const { widget } = renderParams
42
- const { options } = widget
43
-
44
- return h(VxeUIFormComponent, {
45
- class: 'vxe-form-design--widget-render-form-wrapper',
46
- vertical: true,
47
- span: 24,
48
- titleBold: true,
49
- titleOverflow: true,
50
- data: options
51
- }, {
52
- default () {
53
- return [
54
- h(VxeUIFormItemComponent, {
55
- title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
56
- }, {
57
- default () {
58
- return h(VxeUIInputComponent, {
59
- modelValue: widget.title,
60
- placeholder: options.placeholder,
61
- 'onUpdate:modelValue' (val: any) {
62
- widget.title = val
63
- }
64
- })
65
- }
66
- }),
67
- h(VxeUIFormItemComponent, {
68
- title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
69
- field: 'placeholder',
70
- itemRender: { name: 'VxeInput' }
71
- }),
72
- h(VxeUIFormItemComponent, {
73
- title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
74
- }, {
75
- default () {
76
- return h(VxeUISwitchComponent, {
77
- modelValue: widget.required,
78
- 'onUpdate:modelValue' (val: any) {
79
- widget.required = val
80
- }
81
- })
82
- }
83
- })
84
- ]
85
- }
86
- })
87
- }
88
- }
89
- })
90
-
91
- const WidgetAInputViewComponent = defineComponent({
92
- props: {
93
- renderOpts: {
94
- type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
95
- default: () => ({})
96
- },
97
- renderParams: {
98
- type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetAInputFormObjVO>>,
99
- default: () => ({})
100
- }
101
- },
102
- emits: [],
103
- setup (props) {
104
- const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
105
-
106
- const changeEvent = () => {
107
- const { renderParams } = props
108
- const { widget, $formView } = renderParams
109
- if ($formView) {
110
- const itemValue = $formView ? $formView.getItemValue(widget) : null
111
- $formView.updateWidgetStatus(widget, itemValue)
112
- }
113
- }
114
-
115
- return () => {
116
- const { renderParams } = props
117
- const { widget, $formView } = renderParams
118
-
119
- return h(VxeUIFormItemComponent, {
120
- class: ['vxe-form-design--widget-render-form-item'],
121
- field: widget.field,
122
- title: widget.title
123
- }, {
124
- default () {
125
- return h(getCurrComponent('a-input') as ComponentOptions, {
126
- value: $formView ? $formView.getItemValue(widget) : null,
127
- onChange: changeEvent,
128
- 'onUpdate:value' (val: any) {
129
- if ($formView) {
130
- $formView.setItemValue(widget, val)
131
- }
132
- }
133
- })
134
- }
135
- })
136
- }
137
- }
138
- })
139
-
140
- return {
141
- getWidgetAInputConfig,
142
- WidgetAInputFormComponent,
143
- WidgetAInputViewComponent
144
- }
145
- }
1
+ import { defineComponent, h, PropType, ComponentOptions } from 'vue'
2
+ import { getCurrComponent } from '../util/comp'
3
+
4
+ import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
5
+
6
+ interface WidgetAInputFormObjVO {
7
+ placeholder: string
8
+ }
9
+
10
+ export function createWidgetAInput (VxeUI: VxeUIExport) {
11
+ const getWidgetAInputConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetAInputFormObjVO> => {
12
+ return {
13
+ title: '输入框',
14
+ icon: 'vxe-icon-input',
15
+ options: {
16
+ placeholder: ''
17
+ }
18
+ }
19
+ }
20
+
21
+ const WidgetAInputFormComponent = defineComponent({
22
+ props: {
23
+ renderOpts: {
24
+ type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
25
+ default: () => ({})
26
+ },
27
+ renderParams: {
28
+ type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetAInputFormObjVO>>,
29
+ default: () => ({})
30
+ }
31
+ },
32
+ emits: [],
33
+ setup (props) {
34
+ const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
35
+ const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
36
+ const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch')
37
+ const VxeUIInputComponent = VxeUI.getComponent('VxeInput')
38
+
39
+ return () => {
40
+ const { renderParams } = props
41
+ const { widget } = renderParams
42
+ const { options } = widget
43
+
44
+ return h(VxeUIFormComponent, {
45
+ class: 'vxe-form-design--widget-render-form-wrapper',
46
+ vertical: true,
47
+ span: 24,
48
+ titleBold: true,
49
+ titleOverflow: true,
50
+ data: options
51
+ }, {
52
+ default () {
53
+ return [
54
+ h(VxeUIFormItemComponent, {
55
+ title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
56
+ }, {
57
+ default () {
58
+ return h(VxeUIInputComponent, {
59
+ modelValue: widget.title,
60
+ placeholder: options.placeholder,
61
+ 'onUpdate:modelValue' (val: any) {
62
+ widget.title = val
63
+ }
64
+ })
65
+ }
66
+ }),
67
+ h(VxeUIFormItemComponent, {
68
+ title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
69
+ field: 'placeholder',
70
+ itemRender: { name: 'VxeInput' }
71
+ }),
72
+ h(VxeUIFormItemComponent, {
73
+ title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
74
+ }, {
75
+ default () {
76
+ return h(VxeUISwitchComponent, {
77
+ modelValue: widget.required,
78
+ 'onUpdate:modelValue' (val: any) {
79
+ widget.required = val
80
+ }
81
+ })
82
+ }
83
+ })
84
+ ]
85
+ }
86
+ })
87
+ }
88
+ }
89
+ })
90
+
91
+ const WidgetAInputViewComponent = defineComponent({
92
+ props: {
93
+ renderOpts: {
94
+ type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
95
+ default: () => ({})
96
+ },
97
+ renderParams: {
98
+ type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetAInputFormObjVO>>,
99
+ default: () => ({})
100
+ }
101
+ },
102
+ emits: [],
103
+ setup (props) {
104
+ const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem')
105
+
106
+ const changeEvent = () => {
107
+ const { renderParams } = props
108
+ const { widget, $formView } = renderParams
109
+ if ($formView) {
110
+ const itemValue = $formView ? $formView.getItemValue(widget) : null
111
+ $formView.updateWidgetStatus(widget, itemValue)
112
+ }
113
+ }
114
+
115
+ return () => {
116
+ const { renderParams } = props
117
+ const { widget, $formView } = renderParams
118
+
119
+ return h(VxeUIFormItemComponent, {
120
+ class: ['vxe-form-design--widget-render-form-item'],
121
+ field: widget.field,
122
+ title: widget.title
123
+ }, {
124
+ default () {
125
+ return h(getCurrComponent('a-input') as ComponentOptions, {
126
+ value: $formView ? $formView.getItemValue(widget) : null,
127
+ onChange: changeEvent,
128
+ 'onUpdate:value' (val: any) {
129
+ if ($formView) {
130
+ $formView.setItemValue(widget, val)
131
+ }
132
+ }
133
+ })
134
+ }
135
+ })
136
+ }
137
+ }
138
+ })
139
+
140
+ return {
141
+ getWidgetAInputConfig,
142
+ WidgetAInputFormComponent,
143
+ WidgetAInputViewComponent
144
+ }
145
+ }