plain-design 1.0.0-beta.43 → 1.0.0-beta.44
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +27 -18
- package/dist/plain-design.min.css +18 -17
- package/dist/plain-design.min.js +27 -18
- package/dist/report.html +38 -38
- package/package.json +44 -44
- package/src/packages/components/Application/theme/theme.ts +26 -14
- package/src/packages/components/AutoLoadingObserver/index.tsx +172 -0
- package/src/packages/components/AutoTable/auto-table.scss +19 -8
- package/src/packages/components/AutoTable/filter/useTableOption.filter.search.tsx +3 -3
- package/src/packages/components/AutoTable/use/useTableOption.fill.tsx +2 -1
- package/src/packages/components/AutoTable/use/useTableOption.loading.tsx +8 -2
- package/src/packages/components/AutoTable/use/useTableOption.pagination.tsx +5 -0
- package/src/packages/components/Button/button.scss +5 -5
- package/src/packages/components/Button/index.tsx +68 -10
- package/src/packages/components/Cascade/cascade.scss +2 -2
- package/src/packages/components/CascadePanel/flat/cascade-flat-panel.scss +21 -34
- package/src/packages/components/CheckboxInner/checkbox-inner.scss +1 -0
- package/src/packages/components/DatePicker/date.scss +1 -1
- package/src/packages/components/Dialog/dialog.scss +4 -1
- package/src/packages/components/FilterFormSingle/index.tsx +7 -2
- package/src/packages/components/Form/form.scss +51 -1
- package/src/packages/components/Form/layout/useFormLayout.tsx +47 -13
- package/src/packages/components/Form/validate/useFormValidation.tsx +21 -16
- package/src/packages/components/FormItem/FormItemValidateMessage.tsx +16 -0
- package/src/packages/components/FormItem/index.tsx +24 -11
- package/src/packages/components/Icon/index.tsx +1 -1
- package/src/packages/components/Input/index.scss +17 -5
- package/src/packages/components/Input/useMultipleInput.tsx +1 -1
- package/src/packages/components/InputNumber/number.scss +1 -1
- package/src/packages/components/Object/object.scss +9 -2
- package/src/packages/components/Select/SelectPanel.tsx +3 -0
- package/src/packages/components/Select/select.utils.tsx +1 -1
- package/src/packages/components/SelectGroup/index.tsx +37 -0
- package/src/packages/components/Space/index.tsx +30 -0
- package/src/packages/components/Space/space.scss +26 -0
- package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss +4 -4
- package/src/packages/components/Table/table/body/cell.tsx +17 -12
- package/src/packages/components/Table/table/table.scss +17 -14
- package/src/packages/components/Table/table/use/useTableFormEditor.tsx +2 -0
- package/src/packages/components/VirtualList/useVirtualList.tsx +16 -11
- package/src/packages/components/VirtualTable/virtual-table.scss +1 -1
- package/src/packages/components/createHttp/index.tsx +4 -1
- package/src/packages/components/useMessage/message.scss +2 -2
- package/src/packages/components/useNotice/notice.scss +1 -1
- package/src/packages/components/usePopup/PopupItem.tsx +14 -1
- package/src/packages/components/usePopup/popup-item.scss +5 -1
- package/src/packages/components/useTooltip/index.tsx +4 -0
- package/src/packages/entry.tsx +3 -0
- package/src/packages/uses/useCollapseStyles.tsx +55 -0
@@ -17,7 +17,7 @@
|
|
17
17
|
.cascade-panel-item {
|
18
18
|
transition: all ease 150ms;
|
19
19
|
position: relative;
|
20
|
-
background-color: plv(background-
|
20
|
+
background-color: plv(background-color);
|
21
21
|
overflow: hidden;
|
22
22
|
|
23
23
|
.cascade-panel-item-inner {
|
@@ -29,7 +29,7 @@
|
|
29
29
|
display: flex;
|
30
30
|
align-items: center;
|
31
31
|
justify-content: space-between;
|
32
|
-
border-bottom: solid 1px plv(background-
|
32
|
+
border-bottom: solid 1px plv(background-color);
|
33
33
|
cursor: pointer;
|
34
34
|
color: plv(text-2);
|
35
35
|
|
@@ -1,6 +1,15 @@
|
|
1
1
|
@include prefix(cascade-panel-flat) {
|
2
2
|
width: 500px;
|
3
3
|
|
4
|
+
& > .#{componentName(scroll)} {
|
5
|
+
& > .scroll-wrapper {
|
6
|
+
& > .scroll-content {
|
7
|
+
overflow-x: initial !important;
|
8
|
+
overflow-y: initial !important;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
4
13
|
.cascade-panel-flat-header {
|
5
14
|
position: sticky;
|
6
15
|
top: 0;
|
@@ -83,35 +92,26 @@
|
|
83
92
|
&.cascade-panel-size-normal, &.cascade-panel-size-large {
|
84
93
|
@include comp(cascade-panel-flat) {
|
85
94
|
.cascade-panel-flat-header {
|
86
|
-
padding: 8px calc(#{plv(input-padding-x)} - 8px);
|
87
95
|
|
88
|
-
.cascade-panel-flat-header-item {
|
89
|
-
padding: 0 8px;
|
90
|
-
line-height: 28px;
|
91
|
-
cursor: pointer;
|
92
|
-
|
93
|
-
&:hover {
|
94
|
-
background-color: plv(background-hover);
|
95
|
-
}
|
96
|
-
}
|
97
96
|
}
|
98
97
|
.cascade-panel-flat-body {
|
99
|
-
padding: 8px calc(#{plv(input-padding-x)} - 8px);
|
100
98
|
|
101
|
-
.cascade-panel-flat-item {
|
102
|
-
padding: 8px 8px;
|
103
|
-
}
|
104
99
|
}
|
105
100
|
}
|
106
101
|
}
|
107
|
-
|
102
|
+
|
103
|
+
@include sizeMixin(cascade-panel, ()) {
|
108
104
|
@include comp(cascade-panel-flat) {
|
105
|
+
.cascade-panel-flat-item {
|
106
|
+
border-radius: plv(box-size-#{$name}-border-radius);
|
107
|
+
}
|
109
108
|
.cascade-panel-flat-header {
|
110
|
-
|
109
|
+
font-size: $font-size;
|
110
|
+
padding: 2px 2px;
|
111
111
|
|
112
112
|
.cascade-panel-flat-header-item {
|
113
|
-
padding: 0
|
114
|
-
line-height:
|
113
|
+
padding: 0 calc(#{plv(input-padding-x-#{$name})} - 2px);
|
114
|
+
line-height: 28px;
|
115
115
|
cursor: pointer;
|
116
116
|
|
117
117
|
&:hover {
|
@@ -120,26 +120,13 @@
|
|
120
120
|
}
|
121
121
|
}
|
122
122
|
.cascade-panel-flat-body {
|
123
|
-
|
123
|
+
font-size: $font-size;
|
124
|
+
padding: 2px 2px;
|
124
125
|
|
125
126
|
.cascade-panel-flat-item {
|
126
|
-
padding:
|
127
|
+
padding: calc((#{plv(input-padding-x-#{$name})} - 2px) * 0.6) calc(#{plv(input-padding-x-#{$name})} - 2px);
|
127
128
|
}
|
128
129
|
}
|
129
130
|
}
|
130
131
|
}
|
131
|
-
|
132
|
-
@include sizeMixin(cascade-panel, ()) {
|
133
|
-
@include comp(cascade-panel-flat) {
|
134
|
-
.cascade-panel-flat-item {
|
135
|
-
border-radius: plv(box-size-#{$name}-border-radius);
|
136
|
-
}
|
137
|
-
.cascade-panel-flat-header {
|
138
|
-
font-size: $font-size;
|
139
|
-
}
|
140
|
-
.cascade-panel-flat-body {
|
141
|
-
font-size: $font-size;
|
142
|
-
}
|
143
|
-
}
|
144
|
-
}
|
145
132
|
}
|
@@ -12,7 +12,10 @@
|
|
12
12
|
}
|
13
13
|
|
14
14
|
.dialog-content {
|
15
|
-
background-color: plv(
|
15
|
+
background-color: plv(bg-3);
|
16
|
+
--#{componentName('background-color')}: #{plv(bg-3)};
|
17
|
+
--#{componentName('table-head-background')}: #{plv(bg-3)};
|
18
|
+
|
16
19
|
border: solid 1px plv(border-color);
|
17
20
|
display: flex;
|
18
21
|
flex-direction: column;
|
@@ -28,6 +28,7 @@ export const FilterFormSingle = designComponent({
|
|
28
28
|
hideHandlerSelector: { type: Boolean },
|
29
29
|
hideSearchButton: { type: Boolean },
|
30
30
|
width: { type: String, default: '440px' },
|
31
|
+
handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
|
31
32
|
},
|
32
33
|
emits: {
|
33
34
|
onSearch: (data: iFilterFormSingleData) => true,
|
@@ -111,7 +112,11 @@ export const FilterFormSingle = designComponent({
|
|
111
112
|
* @author 韦胜健
|
112
113
|
* @date 2023.1.6 12:46
|
113
114
|
*/
|
114
|
-
search: async () => {
|
115
|
+
search: async () => {
|
116
|
+
const data = await methods.getData();
|
117
|
+
emit.onSearch(data);
|
118
|
+
await props.handleSearch?.(data);
|
119
|
+
},
|
115
120
|
};
|
116
121
|
|
117
122
|
const handler = {
|
@@ -156,7 +161,7 @@ export const FilterFormSingle = designComponent({
|
|
156
161
|
)}
|
157
162
|
{FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
|
158
163
|
{!props.hideSearchButton && (
|
159
|
-
<Button label={i18n('base.query').d('查询')} icon="pi-search" mode="fill"
|
164
|
+
<Button label={i18n('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
|
160
165
|
)}
|
161
166
|
{slots.append()}
|
162
167
|
</InputGroup>
|
@@ -11,6 +11,22 @@
|
|
11
11
|
line-height: $height;
|
12
12
|
font-size: $font-size;
|
13
13
|
}
|
14
|
+
|
15
|
+
/*@formatter:off*/
|
16
|
+
.form-item-validate-message-inner {
|
17
|
+
font-size: $font-size;
|
18
|
+
|
19
|
+
}
|
20
|
+
.form-item-validate-position-bottom-left { .form-item-validate-message-inner {line-height: 1.5em} }
|
21
|
+
.form-item-validate-position-bottom-right { .form-item-validate-message-inner {line-height: 1.5em} }
|
22
|
+
.form-item-validate-position-right {
|
23
|
+
.form-item-validate-message-inner {
|
24
|
+
margin-left: $margin;
|
25
|
+
line-height: $height;
|
26
|
+
height: $height;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
/*@formatter:on*/
|
14
30
|
}
|
15
31
|
|
16
32
|
@include prefix(form-item) {
|
@@ -60,16 +76,19 @@
|
|
60
76
|
&.form-item-content-align-left {
|
61
77
|
.form-item-content-inner {
|
62
78
|
text-align: left;
|
79
|
+
position: relative;
|
63
80
|
}
|
64
81
|
}
|
65
82
|
&.form-item-content-align-center {
|
66
83
|
.form-item-content-inner {
|
67
84
|
text-align: center;
|
85
|
+
position: relative;
|
68
86
|
}
|
69
87
|
}
|
70
88
|
&.form-item-content-align-right {
|
71
89
|
.form-item-content-inner {
|
72
90
|
text-align: right;
|
91
|
+
position: relative;
|
73
92
|
}
|
74
93
|
}
|
75
94
|
|
@@ -103,12 +122,43 @@
|
|
103
122
|
}
|
104
123
|
}
|
105
124
|
|
106
|
-
|
107
125
|
&.form-item-no-label {
|
108
126
|
.form-item-content {
|
109
127
|
width: 100% !important;
|
110
128
|
}
|
111
129
|
}
|
130
|
+
|
131
|
+
.form-item-validate-message-inner {
|
132
|
+
color: plv(error-6);
|
133
|
+
white-space: nowrap;
|
134
|
+
display: flex;
|
135
|
+
align-items: center;
|
136
|
+
@include comp(icon) {
|
137
|
+
margin-right: 0.25em;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
&.form-item-validate-position-bottom-left {
|
141
|
+
.form-item-validate-message-inner {
|
142
|
+
position: absolute;
|
143
|
+
top: 100%;
|
144
|
+
left: 0;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
&.form-item-validate-position-bottom-right {
|
148
|
+
.form-item-validate-message-inner {
|
149
|
+
position: absolute;
|
150
|
+
top: 100%;
|
151
|
+
right: 0;
|
152
|
+
}
|
153
|
+
}
|
154
|
+
&.form-item-validate-position-right {
|
155
|
+
.form-item-validate-message-inner {
|
156
|
+
position: absolute;
|
157
|
+
left: 100%;
|
158
|
+
top: 0;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
112
162
|
}
|
113
163
|
|
114
164
|
&.form-column-1 {
|
@@ -41,6 +41,7 @@ export const FormLayoutPropsOption = {
|
|
41
41
|
verticalLabel: { type: Boolean as PropType<boolean> }, // 纵向的表单
|
42
42
|
gutter: { type: Number }, // 列间隔
|
43
43
|
rowGutter: { type: Number }, // 行间隔
|
44
|
+
validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
|
44
45
|
} as const;
|
45
46
|
|
46
47
|
/**
|
@@ -63,6 +64,7 @@ export const FormItemLayoutPropsOption = {
|
|
63
64
|
contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> }, // content 对齐方式
|
64
65
|
singleColumnContentWidth: { type: Number }, // 单列的时候form item content的宽度
|
65
66
|
colon: { type: Boolean as PropType<boolean | null>, default: null }, // label的冒号
|
67
|
+
validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
|
66
68
|
} as const;
|
67
69
|
|
68
70
|
/**
|
@@ -96,14 +98,32 @@ export const useFormLayout = (() => {
|
|
96
98
|
const isSingleColumn = computed(() => props.column === 1);
|
97
99
|
/*列间距*/
|
98
100
|
const gutter = computed((): number => {
|
99
|
-
if (props.gutter != null) {
|
101
|
+
if (props.gutter != null) {
|
102
|
+
return removeUnit(props.gutter) as any;
|
103
|
+
}
|
100
104
|
/*单列的情况下不设置列间距*/
|
101
105
|
return isSingleColumn.value ? 0 : FormSizeGutter[styleComputed.value.size];
|
102
106
|
});
|
103
107
|
/*行间距*/
|
104
108
|
const rowGutter = computed((): number => {
|
105
|
-
if (props.rowGutter != null) {
|
106
|
-
|
109
|
+
if (props.rowGutter != null) {
|
110
|
+
return removeUnit(props.rowGutter) as any;
|
111
|
+
}
|
112
|
+
return FormSizeRowsGutter[styleComputed.value.size];
|
113
|
+
});
|
114
|
+
/*校验消息的位置*/
|
115
|
+
const validateMessagePosition = computed(() => {
|
116
|
+
if (!!props.validateMessagePosition) {return props.validateMessagePosition;}
|
117
|
+
|
118
|
+
/*纵向文本的情况下,校验消息默认放在左下角*/
|
119
|
+
if (props.verticalLabel) {return FormValidateMessagePosition["bottom-left"];}
|
120
|
+
if (isSingleColumn.value) {
|
121
|
+
/*单列的情况下,校验消息默认放在右侧*/
|
122
|
+
return FormValidateMessagePosition['right'];
|
123
|
+
} else {
|
124
|
+
/*其他都放在右下角*/
|
125
|
+
return FormValidateMessagePosition['bottom-right'];
|
126
|
+
}
|
107
127
|
});
|
108
128
|
/*根节点样式*/
|
109
129
|
const styles = useStyles((styles) => {
|
@@ -118,7 +138,7 @@ export const useFormLayout = (() => {
|
|
118
138
|
style.marginLeft = unit(-gutter.value / 2);
|
119
139
|
}
|
120
140
|
});
|
121
|
-
const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn };
|
141
|
+
const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn, validateMessagePosition };
|
122
142
|
provide(FORM_LAYOUT_PROVIDER, refer);
|
123
143
|
return refer;
|
124
144
|
};
|
@@ -178,7 +198,7 @@ export const useFormLayout = (() => {
|
|
178
198
|
* @author 韦胜健
|
179
199
|
* @date 2022.9.4 23:22
|
180
200
|
*/
|
181
|
-
const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || eFormLabelAlign.left);
|
201
|
+
const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || (form.props.verticalLabel ? eFormLabelAlign.left : eFormLabelAlign.right));
|
182
202
|
|
183
203
|
/**
|
184
204
|
* 内容对其方式
|
@@ -187,6 +207,7 @@ export const useFormLayout = (() => {
|
|
187
207
|
*/
|
188
208
|
const contentAlign = computed(() => props.contentAlign || form.props.contentAlign || eFormContentAlign.left);
|
189
209
|
|
210
|
+
const validateMessagePosition = computed(() => props.validateMessagePosition || form.validateMessagePosition.value);
|
190
211
|
/**
|
191
212
|
* 根节点样式
|
192
213
|
* @author 韦胜健
|
@@ -196,7 +217,9 @@ export const useFormLayout = (() => {
|
|
196
217
|
styles.width = (() => {
|
197
218
|
const totalColumn = Number(form.props.column);
|
198
219
|
const itemColumn = column.value;
|
199
|
-
if (itemColumn === totalColumn) {
|
220
|
+
if (itemColumn === totalColumn) {
|
221
|
+
return '100%';
|
222
|
+
}
|
200
223
|
return `calc(${Number((itemColumn / totalColumn).toFixed(4)) * 100}%)`;
|
201
224
|
})();
|
202
225
|
styles.padding = `0 ${unit(form.gutter.value / 2)}`;
|
@@ -227,12 +250,16 @@ export const useFormLayout = (() => {
|
|
227
250
|
}
|
228
251
|
} else {
|
229
252
|
style.width = unit((() => {
|
230
|
-
if (props.singleColumnContentWidth) {
|
231
|
-
|
253
|
+
if (props.singleColumnContentWidth) {
|
254
|
+
return props.singleColumnContentWidth;
|
255
|
+
}
|
256
|
+
if (form.props.singleColumnContentWidth) {
|
257
|
+
return form.props.singleColumnContentWidth;
|
258
|
+
}
|
232
259
|
if (form.props.column === 1 && !!form.props.labelWidth) {
|
233
260
|
return `calc(100% - ${unit(form.props.labelWidth)})`;
|
234
261
|
}
|
235
|
-
return
|
262
|
+
return 400;
|
236
263
|
})());
|
237
264
|
}
|
238
265
|
});
|
@@ -245,6 +272,7 @@ export const useFormLayout = (() => {
|
|
245
272
|
labelStyles,
|
246
273
|
contentStyles,
|
247
274
|
form,
|
275
|
+
validateMessagePosition,
|
248
276
|
};
|
249
277
|
};
|
250
278
|
|
@@ -259,8 +287,14 @@ const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
|
|
259
287
|
};
|
260
288
|
|
261
289
|
const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
|
262
|
-
large:
|
263
|
-
normal:
|
264
|
-
small:
|
265
|
-
mini:
|
290
|
+
large: 32,
|
291
|
+
normal: 24,
|
292
|
+
small: 16,
|
293
|
+
mini: 12,
|
266
294
|
};
|
295
|
+
|
296
|
+
export const FormValidateMessagePosition = createEnum([
|
297
|
+
'bottom-left',
|
298
|
+
'bottom-right',
|
299
|
+
'right'
|
300
|
+
] as const);
|
@@ -2,6 +2,7 @@ import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iForm
|
|
2
2
|
import {provide, reactive} from "plain-design-composition";
|
3
3
|
import {$message} from "../../$message";
|
4
4
|
import {Validation} from "./createValidation";
|
5
|
+
import {AutoLoadingObserver} from "../../AutoLoadingObserver";
|
5
6
|
|
6
7
|
/**
|
7
8
|
* Form以及FormItem的上下文状态注入关键字
|
@@ -97,24 +98,28 @@ export function useFormValidation({ props }: { props: iFormValidatePropsType })
|
|
97
98
|
* @date 2022.11.5 23:28
|
98
99
|
*/
|
99
100
|
validate: async (config?: { autoLoading?: boolean, autoAlert?: boolean, }) => {
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
if (
|
111
|
-
|
101
|
+
let promise = (async () => {
|
102
|
+
config = config || {};
|
103
|
+
if (config.autoLoading != false) {
|
104
|
+
loading.show();
|
105
|
+
}
|
106
|
+
try {
|
107
|
+
const validateResultData = await parentValidation.methods.validate({
|
108
|
+
state,
|
109
|
+
formData: props.modelValue,
|
110
|
+
});
|
111
|
+
if (!!validateResultData && validateResultData.length > 0) {
|
112
|
+
if (config.autoAlert !== false) {
|
113
|
+
$message(getValidateResultMessage(validateResultData[0], props.modelValue));
|
114
|
+
}
|
115
|
+
return Promise.reject(validateResultData);
|
112
116
|
}
|
113
|
-
|
117
|
+
} finally {
|
118
|
+
loading.hide();
|
114
119
|
}
|
115
|
-
}
|
116
|
-
|
117
|
-
|
120
|
+
})();
|
121
|
+
AutoLoadingObserver.subject(promise);
|
122
|
+
return promise;
|
118
123
|
},
|
119
124
|
};
|
120
125
|
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import {designComponent} from "plain-design-composition";
|
2
|
+
import Icon from "../Icon";
|
3
|
+
|
4
|
+
export const FormItemValidateMessage = designComponent({
|
5
|
+
props: {
|
6
|
+
message: { type: String }
|
7
|
+
},
|
8
|
+
setup({ props }) {
|
9
|
+
return () => (
|
10
|
+
!!props.message && <div className="form-item-validate-message-inner">
|
11
|
+
<Icon icon="pi-exclamation-polygon-fill"/>
|
12
|
+
<span>{props.message}</span>
|
13
|
+
</div>
|
14
|
+
);
|
15
|
+
},
|
16
|
+
});
|
@@ -4,7 +4,7 @@ import {EditProps, useEdit} from "../../uses/useEdit";
|
|
4
4
|
import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
|
5
5
|
import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
|
6
6
|
import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
|
7
|
-
import {
|
7
|
+
import {FormItemValidateMessage} from "./FormItemValidateMessage";
|
8
8
|
|
9
9
|
export const FormItem = designComponent({
|
10
10
|
name: '-form-item',
|
@@ -63,6 +63,7 @@ export const FormItem = designComponent({
|
|
63
63
|
getComponentCls('form-item'),
|
64
64
|
`form-item-label-align-${formItemLayout.labelAlign.value}`,
|
65
65
|
`form-item-content-align-${formItemLayout.contentAlign.value}`,
|
66
|
+
`form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
|
66
67
|
{
|
67
68
|
'form-item-required': formItemValidation.isRequired.value,
|
68
69
|
'form-item-has-label': !!props.label,
|
@@ -72,16 +73,23 @@ export const FormItem = designComponent({
|
|
72
73
|
},
|
73
74
|
]);
|
74
75
|
|
75
|
-
useTooltip({
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
76
|
+
/* useTooltip({
|
77
|
+
ignoreEmptyMessage: true,
|
78
|
+
alwaysShow: true,
|
79
|
+
tooltip: () => ({
|
80
|
+
type: uuid(),
|
81
|
+
trigger: 'manual',
|
82
|
+
popperSize: styleComputed.value.size,
|
83
|
+
reference: refs.el,
|
84
|
+
message: formItemValidation.validateMessage.value,
|
85
|
+
status: 'error',
|
86
|
+
placement: formItemLayout.form.props.singleColumnCenter ? 'right-center' : 'bottom-end',
|
87
|
+
minWidth: 0,
|
88
|
+
noBackground: true,
|
89
|
+
noArrow: true,
|
90
|
+
offset: 16,
|
91
|
+
})
|
92
|
+
});*/
|
85
93
|
|
86
94
|
return {
|
87
95
|
refer: {
|
@@ -102,9 +110,13 @@ export const FormItem = designComponent({
|
|
102
110
|
{slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
|
103
111
|
<div className="form-item-content-inner">
|
104
112
|
{slots.default()}
|
113
|
+
{/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
|
114
|
+
{formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
|
105
115
|
</div>
|
106
116
|
{slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
|
107
117
|
</div>
|
118
|
+
{/*校验消息放在右边的时候,放在外部,使得与输入框横向对齐*/}
|
119
|
+
{formItemLayout.validateMessagePosition.value === 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
|
108
120
|
</div>
|
109
121
|
)
|
110
122
|
};
|
@@ -112,3 +124,4 @@ export const FormItem = designComponent({
|
|
112
124
|
});
|
113
125
|
|
114
126
|
export default FormItem;
|
127
|
+
|
@@ -14,7 +14,7 @@ export const Icon = designComponent({
|
|
14
14
|
inheritPropsType: iHTMLElement,
|
15
15
|
props: {
|
16
16
|
icon: { type: String },
|
17
|
-
strokeWidth: { type: Number, default:
|
17
|
+
strokeWidth: { type: Number, default: 2 },
|
18
18
|
strokeLinecap: { type: String as PropType<tStrokeLinecap>, default: "butt", },
|
19
19
|
strokeLinejoin: { type: String as PropType<tStrokeLinejoin>, default: "miter", },
|
20
20
|
|
@@ -57,8 +57,6 @@
|
|
57
57
|
box-sizing: border-box;
|
58
58
|
display: flex;
|
59
59
|
align-items: center;
|
60
|
-
padding-right: plv(input-padding-x);
|
61
|
-
padding-left: plv(input-padding-x);
|
62
60
|
|
63
61
|
&:not(:first-child) {
|
64
62
|
border-left: solid 1px plv(border-color);
|
@@ -70,7 +68,7 @@
|
|
70
68
|
/*prefix icon右侧的input-box不需要左边框以及左边距*/
|
71
69
|
.input-prefix-icon {
|
72
70
|
& + .input-box {
|
73
|
-
padding-left: 0;
|
71
|
+
padding-left: 0 !important;
|
74
72
|
border-left: none;
|
75
73
|
}
|
76
74
|
}
|
@@ -179,9 +177,11 @@
|
|
179
177
|
/*prefix icon以及suffix icon的宽度与高度相同,显示为正方形*/
|
180
178
|
.input-prefix-icon {
|
181
179
|
width: $height;
|
180
|
+
color: plv(text-2);
|
182
181
|
}
|
183
182
|
.input-suffix-icon-wrapper {
|
184
|
-
|
183
|
+
color: plv(text-2);
|
184
|
+
width: plv(input-clear-size-#{$name})
|
185
185
|
}
|
186
186
|
|
187
187
|
&.input-size-mini {
|
@@ -189,6 +189,14 @@
|
|
189
189
|
line-height: 1.667;
|
190
190
|
}
|
191
191
|
}
|
192
|
+
|
193
|
+
/*所有的直接子节点,垂直居中,加上左右边距,除了第一个直接子节点之外,其他节点都加上左边框*/
|
194
|
+
& > div, & > span, & > input, & > textarea {
|
195
|
+
&:not(.input-suffix-icon-wrapper) {
|
196
|
+
padding-right: plv(input-padding-x-#{$name});
|
197
|
+
padding-left: plv(input-padding-x-#{$name});
|
198
|
+
}
|
199
|
+
}
|
192
200
|
}
|
193
201
|
|
194
202
|
/*input status*/
|
@@ -327,12 +335,16 @@
|
|
327
335
|
&:not(.input-empty) {
|
328
336
|
.input-box.input-tag-container {
|
329
337
|
padding-left: 3px;
|
338
|
+
padding-right: 0;
|
339
|
+
@include comp(auto-width-input) {
|
340
|
+
padding: 0 3px;
|
341
|
+
}
|
330
342
|
}
|
331
343
|
}
|
332
344
|
|
333
345
|
&.input-empty {
|
334
346
|
.input-tag-container {
|
335
|
-
|
347
|
+
@include comp(auto-width-input) {
|
336
348
|
flex: 1;
|
337
349
|
}
|
338
350
|
}
|
@@ -106,7 +106,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
|
|
106
106
|
<AutoWidthInput
|
107
107
|
modelValue={text.value}
|
108
108
|
onChange={handler.onChange}
|
109
|
-
placeholder={editComputed.value.placeholder}
|
109
|
+
placeholder={!(model.value as any)?.length ? editComputed.value.placeholder : undefined}
|
110
110
|
disabled={!!editComputed.value.disabled}
|
111
111
|
readonly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
|
112
112
|
{...props.nativeAttrs}
|
@@ -1,11 +1,18 @@
|
|
1
1
|
@include comp(object) {
|
2
2
|
.object-icon {
|
3
3
|
cursor: pointer;
|
4
|
-
padding-right: calc(#{plv(input-padding-x)} - 4px);
|
5
|
-
padding-left: calc(#{plv(input-padding-x)} - 4px);
|
6
4
|
|
7
5
|
&:active {
|
8
6
|
background-color: plv(secondary-light-2);
|
9
7
|
}
|
10
8
|
}
|
9
|
+
@include sizeMixin(input, ()) {
|
10
|
+
span.object-icon {
|
11
|
+
width: calc(#{$height} - 2px);
|
12
|
+
padding: 0;
|
13
|
+
display: flex;
|
14
|
+
align-items: center;
|
15
|
+
justify-content: center;
|
16
|
+
}
|
17
|
+
}
|
11
18
|
}
|
@@ -5,6 +5,7 @@ import {Loading} from "../Loading";
|
|
5
5
|
import Empty from "../Empty";
|
6
6
|
import {ApplicationConfigurationProvider} from "../Application/utils/application.utils";
|
7
7
|
import i18n from "../i18n";
|
8
|
+
import {useSearchText} from "../SelectGroup";
|
8
9
|
|
9
10
|
export const SelectPanel = designComponent({
|
10
11
|
name: 'select-panel',
|
@@ -27,6 +28,8 @@ export const SelectPanel = designComponent({
|
|
27
28
|
|
28
29
|
const applicationConfiguration = ApplicationConfigurationProvider.inject();
|
29
30
|
|
31
|
+
useSearchText.provide(() => props.searchText);
|
32
|
+
|
30
33
|
const handler = {
|
31
34
|
onClickOption: (selectOptionProps: any, e: MouseEvent,) => {emit.onSelect(selectOptionProps, e);},
|
32
35
|
onEnterOption: emit.onEnterOption,
|
@@ -151,7 +151,7 @@ export const SelectUtils = {
|
|
151
151
|
if (!!props.isMatchSearch) {
|
152
152
|
return props.isMatchSearch(searchText, optionProps);
|
153
153
|
}
|
154
|
-
return !!optionProps.label && optionProps.label.indexOf(searchText) > -1;
|
154
|
+
return !!optionProps.label && optionProps.label.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
|
155
155
|
},
|
156
156
|
};
|
157
157
|
|