plain-design 1.0.0-beta.74 → 1.0.0-beta.76
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +30 -28
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/Application/utils/application.utils.ts +2 -7
- package/src/packages/components/ArrowStepGroup/arrow-step.scss +13 -0
- package/src/packages/components/Box/box.scss +6 -0
- package/src/packages/components/Box/index.tsx +29 -0
- package/src/packages/components/ColorPicker/color-picker.scss +6 -0
- package/src/packages/components/DatePicker/createDateRender.multiple.tsx +1 -0
- package/src/packages/components/DatePicker/createDateRender.single.tsx +1 -0
- package/src/packages/components/DatePicker/createRangeDateRender.range.tsx +33 -25
- package/src/packages/components/DatePicker/createRangeDateRender.separate.tsx +11 -3
- package/src/packages/components/DatePicker/date.utils.tsx +2 -1
- package/src/packages/components/DatePicker/index.tsx +1 -1
- package/src/packages/components/DatePicker/useRangeDateRender.tsx +1 -0
- package/src/packages/components/Form/form.scss +17 -0
- package/src/packages/components/Form/index.tsx +9 -1
- package/src/packages/components/Form/layout/useFormLayout.tsx +3 -1
- package/src/packages/components/Form/validate/createValidation.tsx +6 -2
- package/src/packages/components/Form/validate/validate.utils.tsx +4 -1
- package/src/packages/components/FormItem/index.tsx +1 -1
- package/src/packages/components/Input/index.scss +32 -10
- package/src/packages/components/Input/index.tsx +12 -4
- package/src/packages/components/Input/input.utils.ts +1 -2
- package/src/packages/components/Input/useMultipleInput.tsx +15 -13
- package/src/packages/components/Input/useSingleInput.tsx +15 -13
- package/src/packages/components/Input/useTextareaInput.tsx +23 -20
- package/src/packages/components/Input/uses/useInputSuffixIcon.tsx +12 -8
- package/src/packages/components/InputNumber/number.scss +6 -0
- package/src/packages/components/PageCard/index.tsx +48 -0
- package/src/packages/components/PageCard/page-card.scss +124 -0
- package/src/packages/components/PageCardContent/index.tsx +44 -0
- package/src/packages/components/PageCardTitle/index.tsx +51 -0
- package/src/packages/components/PageThemeUtils/index.tsx +3 -0
- package/src/packages/components/RollingNumber/index.tsx +66 -0
- package/src/packages/components/Space/index.tsx +7 -1
- package/src/packages/components/Space/space.scss +13 -0
- package/src/packages/components/Table/table/utils/table.utils.ts +1 -0
- package/src/packages/components/TimePicker/createRangeTimeRender.tsx +11 -3
- package/src/packages/components/TimePicker/createSeparateRangeTimeRender.tsx +11 -3
- package/src/packages/components/TimePicker/createSingleTimeRender.tsx +1 -0
- package/src/packages/components/TimePicker/index.tsx +1 -1
- package/src/packages/components/TimePicker/time.utils.ts +2 -1
- package/src/packages/components/TimePicker/useRangeTimeRender.tsx +1 -0
- package/src/packages/components/Toggle/index.tsx +6 -2
- package/src/packages/components/Toggle/toggle.scss +102 -98
- package/src/packages/components/VirtualList/useVirtualList.tsx +31 -14
- package/src/packages/components/useTooltip/index.tsx +2 -1
- package/src/packages/entry.tsx +43 -1
- package/src/packages/i18n/lang/en-us.ts +2 -0
- package/src/packages/i18n/lang/zh-cn.ts +2 -0
- package/src/packages/styles/global.import.scss +16 -0
- package/src/packages/uses/useStyle.tsx +8 -4
- package/src/packages/utils/renderInputModeTextRangeValue.tsx +25 -0
@@ -1,79 +1,53 @@
|
|
1
1
|
@include prefix(toggle) {
|
2
|
-
background-color: plv(secondary-2);
|
3
|
-
position: relative;
|
4
|
-
outline: none;
|
5
|
-
display: inline-block;
|
6
|
-
vertical-align: middle;
|
7
|
-
user-select: none;
|
8
|
-
transition: background-color 300ms;
|
9
|
-
cursor: pointer;
|
10
|
-
border-radius: 100px;
|
11
|
-
|
12
|
-
.toggle-inner {
|
13
|
-
content: '';
|
14
|
-
position: absolute;
|
15
|
-
left: 2px;
|
16
|
-
top: 2px;
|
17
|
-
bottom: 2px;
|
18
|
-
background: white;
|
19
|
-
box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
|
20
|
-
transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
|
21
|
-
border-radius: inherit;
|
22
|
-
}
|
23
2
|
|
24
|
-
&:
|
25
|
-
position: absolute;
|
26
|
-
left: 2px;
|
27
|
-
right: 2px;
|
28
|
-
top: 2px;
|
29
|
-
bottom: 2px;
|
30
|
-
border-radius: inherit;
|
3
|
+
&:not(.toggle-input-mode-text) {
|
31
4
|
background-color: plv(secondary-2);
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
5
|
+
position: relative;
|
6
|
+
outline: none;
|
7
|
+
display: inline-block;
|
8
|
+
vertical-align: middle;
|
9
|
+
user-select: none;
|
10
|
+
transition: background-color 300ms;
|
11
|
+
cursor: pointer;
|
12
|
+
border-radius: 100px;
|
37
13
|
|
38
|
-
@include sizeMixin(toggle, ()) {
|
39
|
-
height: calc(#{$height} - 6px);
|
40
|
-
width: calc((#{$height} - 6px) * 52 / 32);
|
41
|
-
|
42
|
-
&.toggle-on {
|
43
|
-
.toggle-inner {
|
44
|
-
left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
|
45
|
-
}
|
46
|
-
}
|
47
14
|
.toggle-inner {
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
}
|
15
|
+
content: '';
|
16
|
+
position: absolute;
|
17
|
+
left: 2px;
|
18
|
+
top: 2px;
|
19
|
+
bottom: 2px;
|
20
|
+
background: white;
|
21
|
+
box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
|
22
|
+
transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
|
23
|
+
border-radius: inherit;
|
58
24
|
}
|
59
|
-
}
|
60
25
|
|
61
|
-
|
62
|
-
|
63
|
-
|
26
|
+
&:before {
|
27
|
+
position: absolute;
|
28
|
+
left: 2px;
|
29
|
+
right: 2px;
|
30
|
+
top: 2px;
|
31
|
+
bottom: 2px;
|
32
|
+
border-radius: inherit;
|
33
|
+
background-color: plv(secondary-2);
|
34
|
+
content: "";
|
35
|
+
transform: scaleX(1);
|
36
|
+
/*transform: scale3d(0, 0, 0);*/
|
37
|
+
transition: transform .3s;
|
64
38
|
}
|
65
39
|
|
66
40
|
@include sizeMixin(toggle, ()) {
|
67
41
|
height: calc(#{$height} - 6px);
|
68
|
-
width: calc((#{$height} - 6px) * 52 /
|
42
|
+
width: calc((#{$height} - 6px) * 52 / 32);
|
69
43
|
|
70
44
|
&.toggle-on {
|
71
45
|
.toggle-inner {
|
72
|
-
left: calc((#{$height} - 6px) /
|
46
|
+
left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
|
73
47
|
}
|
74
48
|
}
|
75
49
|
.toggle-inner {
|
76
|
-
right: calc((#{$height} - 6px) /
|
50
|
+
right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
|
77
51
|
}
|
78
52
|
&.toggle-active {
|
79
53
|
.toggle-inner {
|
@@ -85,63 +59,93 @@
|
|
85
59
|
}
|
86
60
|
}
|
87
61
|
}
|
88
|
-
}
|
89
62
|
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
transform: scale3d(0, 0, 0);
|
63
|
+
&.toggle-square {
|
64
|
+
&, & > .toggle-inner & > :before {
|
65
|
+
border-radius: plv(box-size-normal-border-radius);;
|
94
66
|
}
|
95
67
|
|
96
|
-
|
97
|
-
|
68
|
+
@include sizeMixin(toggle, ()) {
|
69
|
+
height: calc(#{$height} - 6px);
|
70
|
+
width: calc((#{$height} - 6px) * 52 / 30);
|
71
|
+
|
72
|
+
&.toggle-on {
|
73
|
+
.toggle-inner {
|
74
|
+
left: calc((#{$height} - 6px) / 2 + 8px);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
.toggle-inner {
|
78
|
+
right: calc((#{$height} - 6px) / 2 + 8px);
|
79
|
+
}
|
80
|
+
&.toggle-active {
|
81
|
+
.toggle-inner {
|
82
|
+
right: calc((#{$height} - 6px) / 2);
|
83
|
+
}
|
84
|
+
|
85
|
+
&.toggle-on .toggle-inner {
|
86
|
+
left: calc((#{$height} - 6px) / 2);
|
87
|
+
}
|
88
|
+
}
|
98
89
|
}
|
99
90
|
}
|
100
|
-
}
|
101
91
|
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
92
|
+
&.toggle-on {
|
93
|
+
&, &.toggle-square {
|
94
|
+
&:before {
|
95
|
+
transform: scale3d(0, 0, 0);
|
96
|
+
}
|
107
97
|
|
108
|
-
|
109
|
-
|
98
|
+
.toggle-inner {
|
99
|
+
right: 2px;
|
100
|
+
}
|
110
101
|
}
|
111
102
|
}
|
112
|
-
}
|
113
103
|
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
background-color: $color-4;
|
104
|
+
&.toggle-active {
|
105
|
+
&, &.toggle-square {
|
106
|
+
.toggle-inner {
|
107
|
+
left: 2px;
|
108
|
+
}
|
109
|
+
|
110
|
+
&.toggle-on .toggle-inner {
|
111
|
+
right: 2px;
|
112
|
+
}
|
124
113
|
}
|
125
|
-
}
|
126
|
-
}
|
114
|
+
}
|
127
115
|
|
128
|
-
|
129
|
-
|
116
|
+
@include statusMixin(toggle) {
|
117
|
+
&.toggle-on {
|
118
|
+
background-color: $color-6;
|
119
|
+
}
|
120
|
+
&:after {
|
121
|
+
border-color: $color-6;
|
122
|
+
}
|
123
|
+
/*&:focus {
|
124
|
+
.toggle-inner {
|
125
|
+
background-color: $color-4;
|
126
|
+
}
|
127
|
+
}*/
|
128
|
+
}
|
130
129
|
|
131
|
-
|
130
|
+
&.toggle-disabled {
|
131
|
+
cursor: not-allowed;
|
132
132
|
|
133
|
-
&:before {
|
134
133
|
background-color: plv(secondary-3);
|
135
|
-
}
|
136
134
|
|
137
|
-
|
138
|
-
|
139
|
-
|
135
|
+
&:before {
|
136
|
+
background-color: plv(secondary-3);
|
137
|
+
}
|
140
138
|
|
141
|
-
|
142
|
-
|
143
|
-
|
139
|
+
.toggle-inner {
|
140
|
+
background-color: #eee;
|
141
|
+
}
|
142
|
+
|
143
|
+
&.toggle-on {
|
144
|
+
@include statusMixin(toggle) {
|
145
|
+
background-color: $color-3;
|
146
|
+
}
|
144
147
|
}
|
145
148
|
}
|
146
149
|
}
|
150
|
+
|
147
151
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
|
1
|
+
import {computed, getComponentCls, onBeforeUnmount, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
|
2
2
|
import {createCounter} from 'plain-utils/utils/createCounter';
|
3
3
|
import {delay} from "plain-utils/utils/delay";
|
4
4
|
import './virtual-list.scss';
|
@@ -6,6 +6,7 @@ import Scroll from "../Scroll";
|
|
6
6
|
import {unit} from "plain-utils/string/unit";
|
7
7
|
import {createEnum} from "plain-utils/utils/createEnum";
|
8
8
|
import {PlainObject} from "plain-utils/utils/event";
|
9
|
+
import {addWindowListener} from "plain-utils/dom/addWindowListener";
|
9
10
|
|
10
11
|
interface DataNode {
|
11
12
|
start: number;
|
@@ -71,12 +72,17 @@ export function useVirtualList(
|
|
71
72
|
/*响应式属性*/
|
72
73
|
const state = reactive({
|
73
74
|
scrollValue: 0, // 当前滚动scrollTop(非实时的)
|
74
|
-
|
75
|
+
hostSize: null as null | number, // 容器高度
|
75
76
|
scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
|
76
77
|
id2size: {} as Record<string, number | undefined>,
|
77
78
|
avgSize: props.size
|
78
79
|
});
|
79
80
|
|
81
|
+
const _pageSize = computed(() => {
|
82
|
+
if (state.hostSize == null) {return null;}
|
83
|
+
return Math.floor(state.hostSize / (state.avgSize == null ? props.size : state.avgSize));
|
84
|
+
});
|
85
|
+
|
80
86
|
const idMap = new WeakMap<PlainObject, string>();
|
81
87
|
let prevEnd = 0;
|
82
88
|
|
@@ -102,7 +108,8 @@ export function useVirtualList(
|
|
102
108
|
* @date 2020/11/15 9:28
|
103
109
|
*/
|
104
110
|
const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, startIndex: number } => {
|
105
|
-
const
|
111
|
+
const pageSize = _pageSize.value;
|
112
|
+
const { scrollValue } = state;
|
106
113
|
if (!pageSize) {
|
107
114
|
return { list: [], startPageIndex: 0, startIndex: 0 };
|
108
115
|
}
|
@@ -142,7 +149,7 @@ export function useVirtualList(
|
|
142
149
|
* @date 2020/12/16 10:48
|
143
150
|
*/
|
144
151
|
const strutStyles = useStyles(style => {
|
145
|
-
if (!
|
152
|
+
if (!_pageSize.value) {
|
146
153
|
return;
|
147
154
|
}
|
148
155
|
if (props.disabled) {
|
@@ -180,7 +187,7 @@ export function useVirtualList(
|
|
180
187
|
*/
|
181
188
|
const contentStyles = useStyles(style => {
|
182
189
|
|
183
|
-
if (!
|
190
|
+
if (!_pageSize.value) {
|
184
191
|
return;
|
185
192
|
}
|
186
193
|
if (props.disabled) {
|
@@ -257,11 +264,19 @@ export function useVirtualList(
|
|
257
264
|
* @author 韦胜健
|
258
265
|
* @date 2020/12/14 22:44
|
259
266
|
*/
|
260
|
-
getPageIndex: (scrollValue: number, pageSize: number) => {
|
267
|
+
getPageIndex: (scrollValue: number, pageSize: number | null | undefined) => {
|
261
268
|
if (scrollValue < 0) {
|
262
269
|
scrollValue = 0;
|
263
270
|
}
|
264
271
|
const data = dataModel.value || [];
|
272
|
+
if (pageSize == null) {
|
273
|
+
return {
|
274
|
+
data,
|
275
|
+
startIndex: 0,
|
276
|
+
endIndex: 0,
|
277
|
+
pageIndex: 0,
|
278
|
+
};
|
279
|
+
}
|
265
280
|
/*当前scrollTop对应的数据中数据的索引*/
|
266
281
|
let scrollIndex = utils.getIndex(scrollValue);
|
267
282
|
let pageIndex = Math.floor(scrollIndex / pageSize);
|
@@ -306,7 +321,7 @@ export function useVirtualList(
|
|
306
321
|
pageIndex,
|
307
322
|
};
|
308
323
|
},
|
309
|
-
|
324
|
+
resetHostSize: () => {
|
310
325
|
let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
311
326
|
const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
|
312
327
|
const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
|
@@ -316,10 +331,8 @@ export function useVirtualList(
|
|
316
331
|
if (!!footEl) {
|
317
332
|
hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
318
333
|
}
|
319
|
-
|
320
|
-
|
321
|
-
if (newPageSize != state.pageSize) {
|
322
|
-
state.pageSize = newPageSize;
|
334
|
+
if (state.hostSize != hostSize) {
|
335
|
+
state.hostSize = hostSize;
|
323
336
|
}
|
324
337
|
},
|
325
338
|
};
|
@@ -335,7 +348,7 @@ export function useVirtualList(
|
|
335
348
|
const newScrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
|
336
349
|
state.scrollDirection = newScrollValue > freezeState.scrollValue ? ScrollDirection.end : ScrollDirection.start;
|
337
350
|
freezeState.scrollValue = newScrollValue;
|
338
|
-
const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop,
|
351
|
+
const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, _pageSize.value);
|
339
352
|
state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
|
340
353
|
freezeState.current = current;
|
341
354
|
emit.onPageIndexChange(current);
|
@@ -344,7 +357,7 @@ export function useVirtualList(
|
|
344
357
|
|
345
358
|
watch(() => dataModel.value || [], (data: any[]) => {
|
346
359
|
delay().then(() => {
|
347
|
-
utils.
|
360
|
+
utils.resetHostSize();
|
348
361
|
});
|
349
362
|
if (props.disabled) {
|
350
363
|
return;
|
@@ -357,9 +370,13 @@ export function useVirtualList(
|
|
357
370
|
|
358
371
|
onMounted(async () => {
|
359
372
|
await delay(23);
|
360
|
-
utils.
|
373
|
+
utils.resetHostSize();
|
361
374
|
});
|
362
375
|
|
376
|
+
onBeforeUnmount(
|
377
|
+
addWindowListener('resize', () => delay(23).then(utils.resetHostSize))
|
378
|
+
);
|
379
|
+
|
363
380
|
onUpdated(async () => {
|
364
381
|
if (props.disabled) {
|
365
382
|
return;
|
@@ -2,6 +2,7 @@ import {createEffects} from 'plain-utils/utils/createEffects';
|
|
2
2
|
import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "plain-design-composition";
|
3
3
|
import {iPopupService, usePopup} from "../usePopup/usePopup";
|
4
4
|
import {iPopupUseOption} from "../usePopup/utils/popup.utils";
|
5
|
+
import {delay} from "plain-utils/utils/delay";
|
5
6
|
|
6
7
|
/**
|
7
8
|
* 提供两种用法,第一种实时地创建tooltip
|
@@ -147,7 +148,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
|
|
147
148
|
},
|
148
149
|
)
|
149
150
|
);
|
150
|
-
const close = () => popup.$popup.hide(popup.popupId);
|
151
|
+
const close = () => {delay(23).then(() => {popup.$popup.hide(popup.popupId);});};
|
151
152
|
effects.push(close);
|
152
153
|
return { close };
|
153
154
|
})();
|
package/src/packages/entry.tsx
CHANGED
@@ -116,6 +116,11 @@ export {StackCard} from './components/StackCard';
|
|
116
116
|
export {StackCardItem} from './components/StackCardItem';
|
117
117
|
export {SortList} from './components/SortList';
|
118
118
|
export {Space} from './components/Space';
|
119
|
+
export {Box} from './components/Box';
|
120
|
+
export {PageCard} from './components/PageCard';
|
121
|
+
export {PageCardTitle} from './components/PageCardTitle';
|
122
|
+
export {PageCardContent} from './components/PageCardContent';
|
123
|
+
export {RollingNumber} from './components/RollingNumber';
|
119
124
|
|
120
125
|
export {VirtualTable} from './components/VirtualTable';
|
121
126
|
export {Table} from './components/Table';
|
@@ -151,6 +156,30 @@ export {PlcObject} from './components/PlcObject';
|
|
151
156
|
export {Ov} from './components/Ov';
|
152
157
|
export {PlcOv} from './components/PlcOv';
|
153
158
|
export type {iOvMeta} from './components/$ov/ov.utils';
|
159
|
+
export type {
|
160
|
+
tPlc,
|
161
|
+
tPlcType,
|
162
|
+
tPlcGroup,
|
163
|
+
tPlcPublicAttrsType,
|
164
|
+
iPlcEventType,
|
165
|
+
iPlcGroupPropsType,
|
166
|
+
iPlcPropsSourceType,
|
167
|
+
iPlcPropsProxyConfig,
|
168
|
+
iPlcPropsType
|
169
|
+
} from './components/Table/plc/utils/plc.utils';
|
170
|
+
export type {iTreeNode} from './components/TreeCore/createTreeNode';
|
171
|
+
export type {
|
172
|
+
iTableOperation,
|
173
|
+
iTableInnerOperation,
|
174
|
+
iTableInnerOperationConfig,
|
175
|
+
iTableOperationPermitMetaConfig,
|
176
|
+
iTableOperationPermitData,
|
177
|
+
iTableOperationPermitMeta,
|
178
|
+
iTableOuterOperation,
|
179
|
+
iTableOuterOperationConfig,
|
180
|
+
iTableOperationPermitConfig
|
181
|
+
} from './components/Table/standard/PlcOperation/PlcOperation.utils';
|
182
|
+
export type {iTreeProps, iTreeState, iTreeKey2CheckStatus, iTreeKeyOrNode, iTreeNodeComputedData} from './components/TreeCore/TreeCore.type';
|
154
183
|
|
155
184
|
export {$configuration} from './components/$configuration';
|
156
185
|
export {createAddressService} from './components/createAddressService';
|
@@ -192,6 +221,19 @@ export {FormToggle} from './components/FormToggle';
|
|
192
221
|
export {FilterFormSingle} from './components/FilterFormSingle';
|
193
222
|
export {FilterFormMultiple} from './components/FilterFormMultiple';
|
194
223
|
export {FilterService} from './components/FilterService';
|
224
|
+
export type {
|
225
|
+
iValidateRule,
|
226
|
+
iValidateState,
|
227
|
+
iAnotherRule,
|
228
|
+
iFormItemValidatePropsType,
|
229
|
+
iFormValidatePropsType,
|
230
|
+
iRegistrationValidator,
|
231
|
+
iValidateResult,
|
232
|
+
iValidateValueGetter,
|
233
|
+
iValidationDisabledFields,
|
234
|
+
iValidationReadonlyFields,
|
235
|
+
iValidatorParam,
|
236
|
+
} from './components/Form/validate/validate.utils';
|
195
237
|
|
196
238
|
export {TableOptionUtils} from './components/TableOptionUtils';
|
197
239
|
export {TableOptionSpace} from './components/TableOptionSpace';
|
@@ -214,7 +256,7 @@ export {createProvider} from './components/createProvider';
|
|
214
256
|
export {usePopupManager} from './components/usePopupManager';
|
215
257
|
export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
|
216
258
|
export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
|
217
|
-
export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
|
259
|
+
export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus, InputMode} from './uses/useStyle';
|
218
260
|
export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
|
219
261
|
export {AutoLoadingObserver} from './components/AutoLoadingObserver';
|
220
262
|
export {lighter, darken} from './utils/color.utils';
|
@@ -98,6 +98,22 @@
|
|
98
98
|
#{$attr}: plv(box-size-#{$key}-#{$attr});
|
99
99
|
}
|
100
100
|
@content;
|
101
|
+
|
102
|
+
&.mt{margin-top: $margin}
|
103
|
+
&.mb{margin-bottom: $margin}
|
104
|
+
&.ml{margin-left: $margin}
|
105
|
+
&.mr{margin-right: $margin}
|
106
|
+
&.mx{margin-left: $margin;margin-right: $margin}
|
107
|
+
&.my{margin-top: $margin;margin-bottom: $margin}
|
108
|
+
&.margin {margin: $margin}
|
109
|
+
|
110
|
+
&.pt{padding-top: $margin}
|
111
|
+
&.pb{padding-bottom: $margin}
|
112
|
+
&.pl{padding-left: $margin}
|
113
|
+
&.pr{padding-right: $margin}
|
114
|
+
&.px{padding-left: $margin;padding-right: $margin}
|
115
|
+
&.py{padding-top: $margin;padding-bottom: $margin}
|
116
|
+
&.padding {padding: $margin}
|
101
117
|
}
|
102
118
|
}
|
103
119
|
}
|
@@ -12,22 +12,25 @@ export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text', 'stroke'
|
|
12
12
|
export const ThemeStatus = createEnum(['secondary', 'primary', 'success', 'warn', 'error'] as const);
|
13
13
|
export const ThemeShape = createEnum(['square', 'round', 'none'] as const);
|
14
14
|
export const ThemeSize = createEnum(['large', 'normal', 'small', 'mini'] as const);
|
15
|
-
export const InputMode = createEnum(['flat', 'stroke'] as const);
|
15
|
+
export const InputMode = createEnum(['flat', 'stroke', 'text'] as const);
|
16
16
|
|
17
17
|
export const StyleProps = {
|
18
18
|
shape: { type: String as PropType<typeof ThemeShape.TYPE> }, // 'square', 'round'
|
19
19
|
size: { type: String as PropType<typeof ThemeSize.TYPE> }, // 'large', 'normal', 'small', 'mini'
|
20
20
|
status: { type: String as PropType<typeof ThemeStatus.TYPE> }, // 'secondary', 'primary', 'success', 'warn', 'error'
|
21
|
+
inputMode: { type: String as PropType<typeof InputMode.TYPE> }, // input的样式类型,flat填充,stroke线型
|
21
22
|
} as const;
|
22
23
|
|
23
24
|
export interface UseStyleProvideData {
|
24
25
|
shape: typeof ThemeShape.TYPE,
|
25
26
|
size: typeof ThemeSize.TYPE,
|
26
27
|
status?: typeof ThemeStatus.TYPE,
|
28
|
+
inputMode?: typeof InputMode.TYPE,
|
29
|
+
|
27
30
|
default: {
|
28
31
|
shape: typeof ThemeShape.TYPE,
|
29
32
|
size: typeof ThemeSize.TYPE,
|
30
|
-
inputMode:
|
33
|
+
inputMode: typeof InputMode.TYPE,
|
31
34
|
buttonMode: typeof ThemeMode.TYPE,
|
32
35
|
},
|
33
36
|
}
|
@@ -44,14 +47,15 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
|
|
44
47
|
const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
|
45
48
|
|
46
49
|
const styleComputed = computed(() => {
|
47
|
-
const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size }, option);
|
50
|
+
const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
|
48
51
|
|
49
|
-
const { shape, size, status } = ctx.props;
|
52
|
+
const { shape, size, status, inputMode } = ctx.props;
|
50
53
|
const parentData = !!parent ? parent.value : {} as any;
|
51
54
|
let data: UseStyleProvideData = {
|
52
55
|
shape: shape || parentData.shape || defaultData.shape,
|
53
56
|
size: size || parentData.size || defaultData.size,
|
54
57
|
status: status || parentData.status || defaultData.status,
|
58
|
+
inputMode: inputMode || parentData.inputMode || defaultData.inputMode,
|
55
59
|
default: applicationConfiguration.value.default
|
56
60
|
};
|
57
61
|
if (!!defaultData.adjust) {
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import {tStyleComputed} from "../uses/useStyle";
|
2
|
+
import Icon from "../components/Icon";
|
3
|
+
|
4
|
+
export const renderInputModeTextRangeValue = (
|
5
|
+
{
|
6
|
+
styleComputed,
|
7
|
+
startValue,
|
8
|
+
endValue,
|
9
|
+
defaultRender,
|
10
|
+
}: {
|
11
|
+
styleComputed: tStyleComputed,
|
12
|
+
startValue: any,
|
13
|
+
endValue: any,
|
14
|
+
defaultRender: () => any,
|
15
|
+
}) => {
|
16
|
+
if (styleComputed.value.inputMode !== 'text') {
|
17
|
+
return defaultRender();
|
18
|
+
} else {
|
19
|
+
return <>
|
20
|
+
{startValue != null && <span>{startValue}</span>}
|
21
|
+
<Icon icon="pi-arrow-right" className="input-mode-text-separate-icon"/>
|
22
|
+
{endValue != null && <span>{endValue}</span>}
|
23
|
+
</>;
|
24
|
+
}
|
25
|
+
};
|