@vxe-ui/plugin-render-element 4.0.11 → 4.0.13
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.
- package/README.md +26 -0
- package/dist/all.common.js +121 -58
- package/dist/form/index.js +13 -12
- package/dist/form-design/checkbox-widget.js +4 -3
- package/dist/form-design/date-picker-widget.js +3 -2
- package/dist/form-design/input-widget.js +3 -2
- package/dist/form-design/number-input-widget.js +3 -2
- package/dist/form-design/radio-widget.js +4 -3
- package/dist/form-design/select-widget.js +4 -3
- package/dist/form-design/switch-widget.js +3 -2
- package/dist/form-design/textarea-widget.js +3 -2
- package/dist/index.common.js +31 -4
- package/dist/index.js +31 -4
- package/dist/index.umd.js +132 -48
- package/dist/index.umd.min.js +1 -1
- package/dist/store/index.js +8 -0
- package/dist/style.css +15 -43
- package/dist/style.min.css +1 -1
- package/dist/table/index.js +18 -12
- package/dist/util/comp.js +11 -0
- package/package.json +3 -3
- package/src/form/index.ts +14 -13
- package/src/form-design/checkbox-widget.ts +5 -4
- package/src/form-design/date-picker-widget.ts +4 -3
- package/src/form-design/input-widget.ts +4 -3
- package/src/form-design/number-input-widget.ts +5 -3
- package/src/form-design/radio-widget.ts +5 -4
- package/src/form-design/select-widget.ts +5 -4
- package/src/form-design/switch-widget.ts +4 -3
- package/src/form-design/textarea-widget.ts +4 -3
- package/src/index.ts +32 -6
- package/src/store/index.ts +5 -0
- package/src/table/index.ts +19 -13
- package/src/util/comp.ts +6 -0
- package/types/index.d.ts +6 -3
package/src/form/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { h,
|
|
1
|
+
import { h, ComponentOptions } from 'vue'
|
|
2
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
3
|
import XEUtils from 'xe-utils'
|
|
3
4
|
|
|
4
5
|
import type { VxeUIExport, VxeGlobalRendererHandles } from 'vxe-pc-ui'
|
|
@@ -93,7 +94,7 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
93
94
|
const labelProp = optionProps.label || 'label'
|
|
94
95
|
const valueProp = optionProps.value || 'value'
|
|
95
96
|
return XEUtils.map(options, (item, oIndex) => {
|
|
96
|
-
return h(
|
|
97
|
+
return h(getCurrComponent('el-option'), {
|
|
97
98
|
key: oIndex,
|
|
98
99
|
value: item[valueProp],
|
|
99
100
|
label: item[labelProp],
|
|
@@ -113,7 +114,7 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
113
114
|
const { attrs } = renderOpts
|
|
114
115
|
const itemValue = XEUtils.get(data, field)
|
|
115
116
|
return [
|
|
116
|
-
h(
|
|
117
|
+
h(getCurrComponent(name), {
|
|
117
118
|
...attrs,
|
|
118
119
|
...getItemProps(renderOpts, params, itemValue, defaultProps),
|
|
119
120
|
...getItemOns(renderOpts, params)
|
|
@@ -126,7 +127,7 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
126
127
|
const { attrs } = renderOpts
|
|
127
128
|
const props = getItemProps(renderOpts, params, null)
|
|
128
129
|
return [
|
|
129
|
-
h(
|
|
130
|
+
h(getCurrComponent('el-button') as ComponentOptions, {
|
|
130
131
|
...attrs,
|
|
131
132
|
...props,
|
|
132
133
|
...getOns(renderOpts, params)
|
|
@@ -156,14 +157,14 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
156
157
|
const valueProp = optionProps.value || 'value'
|
|
157
158
|
const itemValue = XEUtils.get(data, field)
|
|
158
159
|
return [
|
|
159
|
-
h(
|
|
160
|
+
h(getCurrComponent(`${name}Group`) as ComponentOptions, {
|
|
160
161
|
...attrs,
|
|
161
162
|
...getItemProps(renderOpts, params, itemValue),
|
|
162
163
|
...getItemOns(renderOpts, params)
|
|
163
164
|
}, {
|
|
164
165
|
default: () => {
|
|
165
166
|
return options.map((option, oIndex) => {
|
|
166
|
-
return h(
|
|
167
|
+
return h(getCurrComponent(name) as ComponentOptions, {
|
|
167
168
|
key: oIndex,
|
|
168
169
|
label: option[valueProp],
|
|
169
170
|
disabled: option.disabled
|
|
@@ -199,14 +200,14 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
199
200
|
const groupOptions = optionGroupProps.options || 'options'
|
|
200
201
|
const groupLabel = optionGroupProps.label || 'label'
|
|
201
202
|
return [
|
|
202
|
-
h(
|
|
203
|
+
h(getCurrComponent('el-select') as ComponentOptions, {
|
|
203
204
|
...attrs,
|
|
204
205
|
...props,
|
|
205
206
|
...ons
|
|
206
207
|
}, {
|
|
207
208
|
default: () => {
|
|
208
209
|
return XEUtils.map(optionGroups, (group, gIndex) => {
|
|
209
|
-
return h(
|
|
210
|
+
return h(getCurrComponent('el-option-group') as ComponentOptions, {
|
|
210
211
|
label: group[groupLabel],
|
|
211
212
|
key: gIndex
|
|
212
213
|
}, {
|
|
@@ -218,7 +219,7 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
218
219
|
]
|
|
219
220
|
}
|
|
220
221
|
return [
|
|
221
|
-
h(
|
|
222
|
+
h(getCurrComponent('el-select') as ComponentOptions, {
|
|
222
223
|
...attrs,
|
|
223
224
|
...props,
|
|
224
225
|
...ons
|
|
@@ -257,14 +258,14 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
257
258
|
const valueProp = optionProps.value || 'value'
|
|
258
259
|
const itemValue = XEUtils.get(data, field)
|
|
259
260
|
return [
|
|
260
|
-
h(
|
|
261
|
+
h(getCurrComponent('el-radio-group'), {
|
|
261
262
|
...attrs,
|
|
262
263
|
...getItemProps(renderOpts, params, itemValue),
|
|
263
264
|
...getItemOns(renderOpts, params)
|
|
264
265
|
}, {
|
|
265
266
|
default: () => {
|
|
266
267
|
return options.map((option, oIndex) => {
|
|
267
|
-
return h(
|
|
268
|
+
return h(getCurrComponent('el-radio'), {
|
|
268
269
|
key: oIndex,
|
|
269
270
|
value: option[valueProp],
|
|
270
271
|
disabled: option.disabled
|
|
@@ -285,14 +286,14 @@ export function defineFormRender (VxeUI: VxeUIExport) {
|
|
|
285
286
|
const valueProp = optionProps.value || 'value'
|
|
286
287
|
const itemValue = XEUtils.get(data, field)
|
|
287
288
|
return [
|
|
288
|
-
h(
|
|
289
|
+
h(getCurrComponent('el-checkbox-group'), {
|
|
289
290
|
...attrs,
|
|
290
291
|
...getItemProps(renderOpts, params, itemValue),
|
|
291
292
|
...getItemOns(renderOpts, params)
|
|
292
293
|
}, {
|
|
293
294
|
default: () => {
|
|
294
295
|
return options.map((option, oIndex) => {
|
|
295
|
-
return h(
|
|
296
|
+
return h(getCurrComponent('el-checkbox'), {
|
|
296
297
|
key: oIndex,
|
|
297
298
|
value: option[valueProp],
|
|
298
299
|
label: option[labelProp],
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
2
|
import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
|
|
3
|
+
import { getCurrComponent } from '../util/comp'
|
|
3
4
|
import XEUtils from 'xe-utils'
|
|
4
5
|
|
|
5
6
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
@@ -60,7 +61,7 @@ export function createWidgetElCheckbox (VxeUI: VxeUIExport) {
|
|
|
60
61
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
61
62
|
}, {
|
|
62
63
|
default () {
|
|
63
|
-
return h(
|
|
64
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
64
65
|
modelValue: widget.title,
|
|
65
66
|
'onUpdate:modelValue' (val: any) {
|
|
66
67
|
widget.title = val
|
|
@@ -128,7 +129,7 @@ export function createWidgetElCheckbox (VxeUI: VxeUIExport) {
|
|
|
128
129
|
title: widget.title
|
|
129
130
|
}, {
|
|
130
131
|
default () {
|
|
131
|
-
return h(
|
|
132
|
+
return h(getCurrComponent('el-checkbox-group') as ComponentOptions, {
|
|
132
133
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
133
134
|
onChange: changeEvent,
|
|
134
135
|
'onUpdate:modelValue' (val: any) {
|
|
@@ -140,7 +141,7 @@ export function createWidgetElCheckbox (VxeUI: VxeUIExport) {
|
|
|
140
141
|
default: () => {
|
|
141
142
|
return options.options
|
|
142
143
|
? options.options.map((item, index) => {
|
|
143
|
-
return h(
|
|
144
|
+
return h(getCurrComponent('el-checkbox') as ComponentOptions, {
|
|
144
145
|
key: index,
|
|
145
146
|
value: item.value
|
|
146
147
|
}, {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
3
|
|
|
3
4
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
4
5
|
|
|
@@ -52,7 +53,7 @@ export function createWidgetElDatePicker (VxeUI: VxeUIExport) {
|
|
|
52
53
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
53
54
|
}, {
|
|
54
55
|
default () {
|
|
55
|
-
return h(
|
|
56
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
56
57
|
modelValue: widget.title,
|
|
57
58
|
'onUpdate:modelValue' (val: any) {
|
|
58
59
|
widget.title = val
|
|
@@ -119,7 +120,7 @@ export function createWidgetElDatePicker (VxeUI: VxeUIExport) {
|
|
|
119
120
|
title: widget.title
|
|
120
121
|
}, {
|
|
121
122
|
default () {
|
|
122
|
-
return h(
|
|
123
|
+
return h(getCurrComponent('el-date-picker') as ComponentOptions, {
|
|
123
124
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
124
125
|
placeholder: options.placeholder,
|
|
125
126
|
onChange: changeEvent,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
3
|
|
|
3
4
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
4
5
|
|
|
@@ -53,7 +54,7 @@ export function createWidgetElInput (VxeUI: VxeUIExport) {
|
|
|
53
54
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
54
55
|
}, {
|
|
55
56
|
default () {
|
|
56
|
-
return h(
|
|
57
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
57
58
|
modelValue: widget.title,
|
|
58
59
|
'onUpdate:modelValue' (val: any) {
|
|
59
60
|
widget.title = val
|
|
@@ -120,7 +121,7 @@ export function createWidgetElInput (VxeUI: VxeUIExport) {
|
|
|
120
121
|
title: widget.title
|
|
121
122
|
}, {
|
|
122
123
|
default () {
|
|
123
|
-
return h(
|
|
124
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
124
125
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
125
126
|
placeholder: options.placeholder,
|
|
126
127
|
onChange: changeEvent,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
3
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
4
|
|
|
3
5
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
4
6
|
|
|
@@ -52,7 +54,7 @@ export function createWidgetElInputNumber (VxeUI: VxeUIExport) {
|
|
|
52
54
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
53
55
|
}, {
|
|
54
56
|
default () {
|
|
55
|
-
return h(
|
|
57
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
56
58
|
modelValue: widget.title,
|
|
57
59
|
'onUpdate:modelValue' (val: any) {
|
|
58
60
|
widget.title = val
|
|
@@ -119,7 +121,7 @@ export function createWidgetElInputNumber (VxeUI: VxeUIExport) {
|
|
|
119
121
|
title: widget.title
|
|
120
122
|
}, {
|
|
121
123
|
default () {
|
|
122
|
-
return h(
|
|
124
|
+
return h(getCurrComponent('el-input-number') as ComponentOptions, {
|
|
123
125
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
124
126
|
placeholder: options.placeholder,
|
|
125
127
|
onChange: changeEvent,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
2
|
import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
|
|
3
|
+
import { getCurrComponent } from '../util/comp'
|
|
3
4
|
import XEUtils from 'xe-utils'
|
|
4
5
|
|
|
5
6
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
@@ -60,7 +61,7 @@ export function createWidgetElRadio (VxeUI: VxeUIExport) {
|
|
|
60
61
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
61
62
|
}, {
|
|
62
63
|
default () {
|
|
63
|
-
return h(
|
|
64
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
64
65
|
modelValue: widget.title,
|
|
65
66
|
'onUpdate:modelValue' (val: any) {
|
|
66
67
|
widget.title = val
|
|
@@ -128,7 +129,7 @@ export function createWidgetElRadio (VxeUI: VxeUIExport) {
|
|
|
128
129
|
title: widget.title
|
|
129
130
|
}, {
|
|
130
131
|
default () {
|
|
131
|
-
return h(
|
|
132
|
+
return h(getCurrComponent('el-radio-group') as ComponentOptions, {
|
|
132
133
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
133
134
|
onChange: changeEvent,
|
|
134
135
|
'onUpdate:modelValue' (val: any) {
|
|
@@ -140,7 +141,7 @@ export function createWidgetElRadio (VxeUI: VxeUIExport) {
|
|
|
140
141
|
default: () => {
|
|
141
142
|
return options.options
|
|
142
143
|
? options.options.map((item, index) => {
|
|
143
|
-
return h(
|
|
144
|
+
return h(getCurrComponent('el-radio') as ComponentOptions, {
|
|
144
145
|
key: index,
|
|
145
146
|
value: item.value
|
|
146
147
|
}, {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
2
|
import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
|
|
3
|
+
import { getCurrComponent } from '../util/comp'
|
|
3
4
|
import XEUtils from 'xe-utils'
|
|
4
5
|
|
|
5
6
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
@@ -62,7 +63,7 @@ export function createWidgetElSelect (VxeUI: VxeUIExport) {
|
|
|
62
63
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
63
64
|
}, {
|
|
64
65
|
default () {
|
|
65
|
-
return h(
|
|
66
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
66
67
|
modelValue: widget.title,
|
|
67
68
|
'onUpdate:modelValue' (val: any) {
|
|
68
69
|
widget.title = val
|
|
@@ -130,7 +131,7 @@ export function createWidgetElSelect (VxeUI: VxeUIExport) {
|
|
|
130
131
|
title: widget.title
|
|
131
132
|
}, {
|
|
132
133
|
default () {
|
|
133
|
-
return h(
|
|
134
|
+
return h(getCurrComponent('el-select') as ComponentOptions, {
|
|
134
135
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
135
136
|
placeholder: options.placeholder,
|
|
136
137
|
onChange: changeEvent,
|
|
@@ -143,7 +144,7 @@ export function createWidgetElSelect (VxeUI: VxeUIExport) {
|
|
|
143
144
|
default: () => {
|
|
144
145
|
return options.options
|
|
145
146
|
? options.options.map(item => {
|
|
146
|
-
return h(
|
|
147
|
+
return h(getCurrComponent('el-option') as ComponentOptions, {
|
|
147
148
|
label: item.value,
|
|
148
149
|
value: item.value
|
|
149
150
|
})
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
3
|
|
|
3
4
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
4
5
|
|
|
@@ -50,7 +51,7 @@ export function createWidgetElSwitch (VxeUI: VxeUIExport) {
|
|
|
50
51
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
51
52
|
}, {
|
|
52
53
|
default () {
|
|
53
|
-
return h(
|
|
54
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
54
55
|
modelValue: widget.title,
|
|
55
56
|
'onUpdate:modelValue' (val: any) {
|
|
56
57
|
widget.title = val
|
|
@@ -116,7 +117,7 @@ export function createWidgetElSwitch (VxeUI: VxeUIExport) {
|
|
|
116
117
|
title: widget.title
|
|
117
118
|
}, {
|
|
118
119
|
default () {
|
|
119
|
-
return h(
|
|
120
|
+
return h(getCurrComponent('el-switch') as ComponentOptions, {
|
|
120
121
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
121
122
|
onChange: changeEvent,
|
|
122
123
|
'onUpdate:modelValue' (val: any) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { defineComponent, h, PropType,
|
|
1
|
+
import { defineComponent, h, PropType, ComponentOptions } from 'vue'
|
|
2
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
3
|
|
|
3
4
|
import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
|
|
4
5
|
|
|
@@ -52,7 +53,7 @@ export function createWidgetElTextarea (VxeUI: VxeUIExport) {
|
|
|
52
53
|
title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
|
|
53
54
|
}, {
|
|
54
55
|
default () {
|
|
55
|
-
return h(
|
|
56
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
56
57
|
modelValue: widget.title,
|
|
57
58
|
'onUpdate:modelValue' (val: any) {
|
|
58
59
|
widget.title = val
|
|
@@ -119,7 +120,7 @@ export function createWidgetElTextarea (VxeUI: VxeUIExport) {
|
|
|
119
120
|
title: widget.title
|
|
120
121
|
}, {
|
|
121
122
|
default () {
|
|
122
|
-
return h(
|
|
123
|
+
return h(getCurrComponent('el-input') as ComponentOptions, {
|
|
123
124
|
modelValue: $formView ? $formView.getItemValue(widget) : null,
|
|
124
125
|
placeholder: options.placeholder,
|
|
125
126
|
type: 'textarea',
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { defineTableRender } from './table'
|
|
2
2
|
import { defineFormRender } from './form'
|
|
3
3
|
import { defineFormDesignRender } from './form-design'
|
|
4
|
+
import { globalConfig, componentMaps } from './store'
|
|
5
|
+
import XEUtils from 'xe-utils'
|
|
4
6
|
|
|
7
|
+
import type { VxeUIPluginRenderElementOptions } from '../types'
|
|
5
8
|
import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
|
|
6
9
|
|
|
7
10
|
// eslint-disable-next-line no-unused-vars
|
|
@@ -57,11 +60,29 @@ function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearF
|
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
|
|
63
|
+
function toComponentName (name: string) {
|
|
64
|
+
if (name) {
|
|
65
|
+
return name.slice(0, 1).toUpperCase() + name.slice(1)
|
|
66
|
+
}
|
|
67
|
+
return name
|
|
68
|
+
}
|
|
69
|
+
|
|
60
70
|
export const VxeUIPluginRenderElement: VxeUIPluginObject = {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
component (comp: any) {
|
|
72
|
+
if (comp && comp.name) {
|
|
73
|
+
const kcName = XEUtils.kebabCase('el-button')
|
|
74
|
+
const ccName = toComponentName(XEUtils.camelCase('el-button'))
|
|
75
|
+
componentMaps[kcName] = comp
|
|
76
|
+
componentMaps[ccName] = comp
|
|
77
|
+
} else {
|
|
78
|
+
console.error('[VUE_APP_VXE_PLUGIN_VERSION] error component.', comp)
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
install (VxeUI, options?: VxeUIPluginRenderElementOptions) {
|
|
82
|
+
if (options) {
|
|
83
|
+
ElementPlus = options.ElementPlus
|
|
84
|
+
Object.assign(globalConfig, options)
|
|
85
|
+
}
|
|
65
86
|
|
|
66
87
|
// 检查版本
|
|
67
88
|
if (!/^(4)\./.test(VxeUI.uiVersion)) {
|
|
@@ -80,8 +101,13 @@ export const VxeUIPluginRenderElement: VxeUIPluginObject = {
|
|
|
80
101
|
}
|
|
81
102
|
}
|
|
82
103
|
|
|
83
|
-
if (typeof window !== 'undefined'
|
|
84
|
-
window.VxeUI.use
|
|
104
|
+
if (typeof window !== 'undefined') {
|
|
105
|
+
if (window.VxeUI && window.VxeUI.use) {
|
|
106
|
+
window.VxeUI.use(VxeUIPluginRenderElement)
|
|
107
|
+
}
|
|
108
|
+
if ((window as any).ElementPlus) {
|
|
109
|
+
globalConfig.ElementPlus = (window as any).ElementPlus
|
|
110
|
+
}
|
|
85
111
|
}
|
|
86
112
|
|
|
87
113
|
export default VxeUIPluginRenderElement
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { DefineComponent, ConcreteComponent } from 'vue'
|
|
2
|
+
import type { VxeUIPluginRenderElementOptions } from '../../types'
|
|
3
|
+
|
|
4
|
+
export const globalConfig: VxeUIPluginRenderElementOptions = {}
|
|
5
|
+
export const componentMaps: Record<string, DefineComponent | ConcreteComponent> = {}
|
package/src/table/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { h,
|
|
1
|
+
import { h, ComponentOptions } from 'vue'
|
|
2
|
+
import { getCurrComponent } from '../util/comp'
|
|
2
3
|
import XEUtils from 'xe-utils'
|
|
3
4
|
import dayjs from 'dayjs'
|
|
4
5
|
|
|
@@ -258,7 +259,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
258
259
|
const { name, attrs } = renderOpts
|
|
259
260
|
const cellValue = XEUtils.get(row, column.field)
|
|
260
261
|
return [
|
|
261
|
-
h(
|
|
262
|
+
h(getCurrComponent(name), {
|
|
262
263
|
...attrs,
|
|
263
264
|
...getCellEditFilterProps(renderOpts, params, cellValue, defaultProps),
|
|
264
265
|
...getEditOns(renderOpts, params)
|
|
@@ -270,7 +271,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
270
271
|
function defaultButtonEditRender (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderEditParams) {
|
|
271
272
|
const { attrs } = renderOpts
|
|
272
273
|
return [
|
|
273
|
-
h(
|
|
274
|
+
h(getCurrComponent('el-button'), {
|
|
274
275
|
...attrs,
|
|
275
276
|
...getCellEditFilterProps(renderOpts, params, null),
|
|
276
277
|
...getOns(renderOpts, params)
|
|
@@ -295,7 +296,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
295
296
|
class: 'vxe-table--filter-element-wrapper'
|
|
296
297
|
}, column.filters.map((option, oIndex) => {
|
|
297
298
|
const optionValue = option.data
|
|
298
|
-
return h(
|
|
299
|
+
return h(getCurrComponent(name), {
|
|
299
300
|
key: oIndex,
|
|
300
301
|
...attrs,
|
|
301
302
|
...getCellEditFilterProps(renderOpts, params, optionValue, defaultProps),
|
|
@@ -341,7 +342,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
341
342
|
const labelProp = optionProps.label || 'label'
|
|
342
343
|
const valueProp = optionProps.value || 'value'
|
|
343
344
|
return XEUtils.map(options, (item, oIndex) => {
|
|
344
|
-
return h(
|
|
345
|
+
return h(getCurrComponent('el-option'), {
|
|
345
346
|
key: oIndex,
|
|
346
347
|
value: item[valueProp],
|
|
347
348
|
label: item[labelProp],
|
|
@@ -384,6 +385,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
384
385
|
tableFilterDefaultMethod: defaultFuzzyFilterMethod
|
|
385
386
|
},
|
|
386
387
|
ElSelect: {
|
|
388
|
+
tableAutoFocus: 'input',
|
|
387
389
|
renderTableEdit (renderOpts, params) {
|
|
388
390
|
const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
|
|
389
391
|
const { row, column } = params
|
|
@@ -395,14 +397,14 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
395
397
|
const groupOptions = optionGroupProps.options || 'options'
|
|
396
398
|
const groupLabel = optionGroupProps.label || 'label'
|
|
397
399
|
return [
|
|
398
|
-
h(
|
|
400
|
+
h(getCurrComponent('el-select') as ComponentOptions, {
|
|
399
401
|
...attrs,
|
|
400
402
|
...props,
|
|
401
403
|
...ons
|
|
402
404
|
}, {
|
|
403
405
|
default: () => {
|
|
404
406
|
return XEUtils.map(optionGroups, (group, gIndex) => {
|
|
405
|
-
return h(
|
|
407
|
+
return h(getCurrComponent('el-option-group') as ComponentOptions, {
|
|
406
408
|
key: gIndex,
|
|
407
409
|
label: group[groupLabel]
|
|
408
410
|
}, {
|
|
@@ -414,7 +416,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
414
416
|
]
|
|
415
417
|
}
|
|
416
418
|
return [
|
|
417
|
-
h(
|
|
419
|
+
h(getCurrComponent('el-select') as ComponentOptions, {
|
|
418
420
|
...props,
|
|
419
421
|
...attrs,
|
|
420
422
|
...ons
|
|
@@ -439,7 +441,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
439
441
|
? column.filters.map((option, oIndex) => {
|
|
440
442
|
const optionValue = option.data
|
|
441
443
|
const props = getCellEditFilterProps(renderOpts, params, optionValue)
|
|
442
|
-
return h(
|
|
444
|
+
return h(getCurrComponent('el-select') as ComponentOptions, {
|
|
443
445
|
key: oIndex,
|
|
444
446
|
...attrs,
|
|
445
447
|
...props,
|
|
@@ -450,7 +452,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
450
452
|
}, {
|
|
451
453
|
default: () => {
|
|
452
454
|
return XEUtils.map(optionGroups, (group, gIndex) => {
|
|
453
|
-
return h(
|
|
455
|
+
return h(getCurrComponent('el-option-group') as ComponentOptions, {
|
|
454
456
|
key: gIndex,
|
|
455
457
|
label: group[groupLabel]
|
|
456
458
|
}, {
|
|
@@ -463,7 +465,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
463
465
|
: column.filters.map((option, oIndex) => {
|
|
464
466
|
const optionValue = option.data
|
|
465
467
|
const props = getCellEditFilterProps(renderOpts, params, optionValue)
|
|
466
|
-
return h(
|
|
468
|
+
return h(getCurrComponent('el-select') as ComponentOptions, {
|
|
467
469
|
key: oIndex,
|
|
468
470
|
...attrs,
|
|
469
471
|
...props,
|
|
@@ -495,6 +497,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
495
497
|
tableExportMethod: createExportMethod(getSelectCellValue)
|
|
496
498
|
},
|
|
497
499
|
ElCascader: {
|
|
500
|
+
tableAutoFocus: 'input',
|
|
498
501
|
renderTableEdit: createEditRender(),
|
|
499
502
|
renderTableCell (renderOpts, params) {
|
|
500
503
|
return getCellLabelVNs(renderOpts, params, getCascaderCellValue(renderOpts, params))
|
|
@@ -502,6 +505,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
502
505
|
tableExportMethod: createExportMethod(getCascaderCellValue)
|
|
503
506
|
},
|
|
504
507
|
ElDatePicker: {
|
|
508
|
+
tableAutoFocus: 'input',
|
|
505
509
|
renderTableEdit: createEditRender(),
|
|
506
510
|
renderTableCell (renderOpts, params) {
|
|
507
511
|
return getCellLabelVNs(renderOpts, params, getDatePickerCellValue(renderOpts, params))
|
|
@@ -514,7 +518,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
514
518
|
class: 'vxe-table--filter-element-wrapper'
|
|
515
519
|
}, column.filters.map((option, oIndex) => {
|
|
516
520
|
const optionValue = option.data
|
|
517
|
-
return h(
|
|
521
|
+
return h(getCurrComponent(name as string), {
|
|
518
522
|
key: oIndex,
|
|
519
523
|
...attrs,
|
|
520
524
|
...getCellEditFilterProps(renderOpts, params, optionValue),
|
|
@@ -549,6 +553,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
549
553
|
tableExportMethod: createExportMethod(getDatePickerCellValue)
|
|
550
554
|
},
|
|
551
555
|
ElTimePicker: {
|
|
556
|
+
tableAutoFocus: 'input',
|
|
552
557
|
renderTableEdit: createEditRender(),
|
|
553
558
|
renderTableCell (renderOpts, params) {
|
|
554
559
|
return getCellLabelVNs(renderOpts, params, getTimePickerCellValue(renderOpts, params))
|
|
@@ -556,6 +561,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
556
561
|
tableExportMethod: createExportMethod(getTimePickerCellValue)
|
|
557
562
|
},
|
|
558
563
|
ElTimeSelect: {
|
|
564
|
+
tableAutoFocus: 'input',
|
|
559
565
|
renderTableEdit: createEditRender()
|
|
560
566
|
},
|
|
561
567
|
ElRate: {
|
|
@@ -575,7 +581,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
|
|
|
575
581
|
class: 'vxe-table--filter-element-wrapper'
|
|
576
582
|
}, column.filters.map((option, oIndex) => {
|
|
577
583
|
const optionValue = option.data
|
|
578
|
-
return h(
|
|
584
|
+
return h(getCurrComponent(name as string), {
|
|
579
585
|
key: oIndex,
|
|
580
586
|
...attrs,
|
|
581
587
|
...getCellEditFilterProps(renderOpts, params, optionValue),
|
package/src/util/comp.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { resolveComponent } from 'vue'
|
|
2
|
+
import { globalConfig, componentMaps } from '../store'
|
|
3
|
+
|
|
4
|
+
export function getCurrComponent (name: string) {
|
|
5
|
+
return resolveComponent(name) || componentMaps[name] || (globalConfig.ElementPlus ? globalConfig.ElementPlus[name] : null)
|
|
6
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { VxeUIExport } from 'vxe-pc-ui'
|
|
2
2
|
|
|
3
|
+
export interface VxeUIPluginRenderElementOptions {
|
|
4
|
+
ElementPlus?: any
|
|
5
|
+
}
|
|
6
|
+
|
|
3
7
|
/**
|
|
4
8
|
* 基于 Vxe UI 的适配插件,用于兼容 element-plus 组件库
|
|
5
9
|
*/
|
|
6
10
|
export declare const VxeUIPluginRenderElement: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}): void
|
|
11
|
+
component (comp: any): void
|
|
12
|
+
install (VxeUI: VxeUIExport, options?: VxeUIPluginRenderElementOptions): void
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
export default VxeUIPluginRenderElement
|