plain-design 1.0.0-beta.43 → 1.0.0-beta.45
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/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/PlcOperation.tsx +1 -1
- 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
@@ -0,0 +1,37 @@
|
|
1
|
+
import {designComponent, inject, provide} from "plain-design-composition";
|
2
|
+
import DropdownGroup from "../DropdownGroup";
|
3
|
+
|
4
|
+
export const SelectGroup = designComponent({
|
5
|
+
name: 'select-group',
|
6
|
+
props: {
|
7
|
+
title: { type: String },
|
8
|
+
},
|
9
|
+
slots: ['default'],
|
10
|
+
setup({ props, slots }) {
|
11
|
+
|
12
|
+
const searchText = useSearchText.inject();
|
13
|
+
|
14
|
+
return () => {
|
15
|
+
return (
|
16
|
+
/*有搜索关键词的时候不显示分组标题*/
|
17
|
+
!searchText?.()?.length && (
|
18
|
+
<DropdownGroup>
|
19
|
+
{slots.default(props.title)}
|
20
|
+
</DropdownGroup>
|
21
|
+
)
|
22
|
+
);
|
23
|
+
};
|
24
|
+
},
|
25
|
+
});
|
26
|
+
|
27
|
+
export const useSearchText = (() => {
|
28
|
+
const PROVIDE_NAME = '@@SEARCH_TEXT_PROVIDER';
|
29
|
+
return {
|
30
|
+
provide: (getSearchText: () => string | null | undefined) => {
|
31
|
+
provide(PROVIDE_NAME, getSearchText);
|
32
|
+
},
|
33
|
+
inject: () => {
|
34
|
+
return inject(PROVIDE_NAME) as (() => string | null | undefined) | undefined | null;
|
35
|
+
},
|
36
|
+
};
|
37
|
+
})();
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import './space.scss';
|
2
|
+
import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
|
3
|
+
import {StyleProps, useStyle} from "../../uses/useStyle";
|
4
|
+
|
5
|
+
export const Space = designComponent({
|
6
|
+
name: 'space',
|
7
|
+
props: {
|
8
|
+
vertical: { type: Boolean },
|
9
|
+
...StyleProps,
|
10
|
+
},
|
11
|
+
slots: ['default'],
|
12
|
+
setup({ props, slots }) {
|
13
|
+
|
14
|
+
const { styleComputed } = useStyle();
|
15
|
+
|
16
|
+
const classes = useClasses(() => [
|
17
|
+
getComponentCls('space'),
|
18
|
+
`space-${props.vertical ? 'vertical' : 'horizontal'}`,
|
19
|
+
`space-size-${styleComputed.value.size}`,
|
20
|
+
]);
|
21
|
+
|
22
|
+
return () => (
|
23
|
+
<div className={classes.value}>
|
24
|
+
{slots.default()}
|
25
|
+
</div>
|
26
|
+
);
|
27
|
+
},
|
28
|
+
});
|
29
|
+
|
30
|
+
export default Space;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
@include comp(space) {
|
2
|
+
|
3
|
+
display: flex;
|
4
|
+
|
5
|
+
@include sizeMixin(space, ()) {
|
6
|
+
&.space-horizontal {
|
7
|
+
& > * + * {
|
8
|
+
margin-left: plv(#{margin-#{$name}});
|
9
|
+
}
|
10
|
+
}
|
11
|
+
&.space-vertical {
|
12
|
+
& > * + * {
|
13
|
+
margin-top: plv(#{margin-#{$name}});
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
&.space-horizontal {
|
19
|
+
flex-direction: row;
|
20
|
+
}
|
21
|
+
|
22
|
+
&.space-vertical {
|
23
|
+
flex-direction: column;
|
24
|
+
}
|
25
|
+
|
26
|
+
}
|
@@ -183,7 +183,7 @@ export const PlcOperation = designComponent({
|
|
183
183
|
const predicateWidth = computed((): number => {
|
184
184
|
if (innerOperationConfigs.value.length === 0) {return 0;}
|
185
185
|
return innerOperationConfigs.value.reduce((prev) => {
|
186
|
-
return prev + 2 * 14 +
|
186
|
+
return prev + 2 * 14 + 13;
|
187
187
|
}, 0) + 24;
|
188
188
|
});
|
189
189
|
|
@@ -6,7 +6,7 @@
|
|
6
6
|
|
7
7
|
.table-operation-bar-left {
|
8
8
|
flex: 1;
|
9
|
-
overflow: hidden;
|
9
|
+
//overflow: hidden;
|
10
10
|
white-space: nowrap;
|
11
11
|
text-align: left;
|
12
12
|
}
|
@@ -16,13 +16,13 @@
|
|
16
16
|
@include comp(auto-table) {
|
17
17
|
@include sizeMixin(auto-table, ()) {
|
18
18
|
.table-operation-bar {
|
19
|
-
margin-bottom:
|
19
|
+
margin-bottom: 0;
|
20
20
|
|
21
21
|
.table-operation-bar-right {
|
22
|
-
margin-left:
|
22
|
+
margin-left: $margin;
|
23
23
|
|
24
24
|
& > * + * {
|
25
|
-
margin-left: calc(#{$margin}
|
25
|
+
margin-left: calc(#{$margin});
|
26
26
|
}
|
27
27
|
|
28
28
|
& > .#{componentName(button-group)} {
|
@@ -127,24 +127,29 @@ export const PltCell = designComponent({
|
|
127
127
|
* @author 韦胜健
|
128
128
|
* @date 2023.1.20 14:00
|
129
129
|
*/
|
130
|
+
const emptyOverflowTooltipOption = { reference: null, message: null, };
|
130
131
|
const overflowTooltip = createTooltip({
|
131
132
|
overflow: true,
|
132
133
|
/*当没有message时注销监听鼠标事件*/
|
133
134
|
ignoreEmptyMessage: false,
|
134
135
|
tooltip: () => {
|
135
136
|
const bodyCell = getBodyCell();
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
137
|
+
/*
|
138
|
+
* 没有开启overflowTooltip
|
139
|
+
* 或者没有初始化getBodyCell
|
140
|
+
* 或者没有bodyCell
|
141
|
+
* 或者当前处于编辑状态
|
142
|
+
*
|
143
|
+
* 则不显示overflowTooltip
|
144
|
+
*/
|
145
|
+
if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
|
146
|
+
return emptyOverflowTooltipOption
|
147
|
+
} else {
|
148
|
+
return {
|
149
|
+
reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
|
150
|
+
message: bodyCell?.body,
|
151
|
+
};
|
152
|
+
}
|
148
153
|
},
|
149
154
|
}, popup);
|
150
155
|
effects.push(overflowTooltip.clear);
|
@@ -2,10 +2,26 @@
|
|
2
2
|
position: relative;
|
3
3
|
|
4
4
|
@include sizeMixin(table, (font-size)) {
|
5
|
+
.plt-cell {
|
6
|
+
padding: 0 plv(input-padding-x-#{$name});
|
7
|
+
|
8
|
+
&.plt-cell-editing {
|
9
|
+
&:not(.plt-cell-add-edit-padding) {
|
10
|
+
padding-left: 2px;
|
11
|
+
@include comp(input) {
|
12
|
+
& > div, & > span, & > input, & > textarea {
|
13
|
+
&:first-child {
|
14
|
+
padding-left: calc(#{plv(input-padding-x-#{$name})} - 3px);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
5
21
|
}
|
6
22
|
.virtual-table-head-table {
|
7
23
|
td {
|
8
|
-
font-weight:
|
24
|
+
font-weight: 500;
|
9
25
|
letter-spacing: 1px;
|
10
26
|
|
11
27
|
.plt-head-cell-indicator {
|
@@ -84,19 +100,6 @@
|
|
84
100
|
padding: 0;
|
85
101
|
}
|
86
102
|
|
87
|
-
&.plt-cell-editing {
|
88
|
-
&:not(.plt-cell-add-edit-padding) {
|
89
|
-
padding-left: 2px;
|
90
|
-
@include comp(input) {
|
91
|
-
& > div, & > span, & > input, & > textarea {
|
92
|
-
&:first-child {
|
93
|
-
padding-left: calc(#{plv(input-padding-x)} - 3px);
|
94
|
-
}
|
95
|
-
}
|
96
|
-
}
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
103
|
&.plt-cell-link {
|
101
104
|
color: plv(primary-6);
|
102
105
|
cursor: pointer;
|
@@ -118,6 +118,8 @@ export function useTableFormEditor(
|
|
118
118
|
ref={onRef.form}
|
119
119
|
column={1}
|
120
120
|
modelValue={node.state.editRow}
|
121
|
+
labelAlign="right"
|
122
|
+
validateMessagePosition="bottom-left"
|
121
123
|
>
|
122
124
|
{showPlcArray.value.map((plc, index) => {
|
123
125
|
if (plc.props.editColSpan === 0) {
|
@@ -304,6 +304,20 @@ export function useVirtualList(
|
|
304
304
|
pageIndex,
|
305
305
|
};
|
306
306
|
},
|
307
|
+
resetPageSize: () => {
|
308
|
+
let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
309
|
+
const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
|
310
|
+
const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
|
311
|
+
if (!!headEl) {
|
312
|
+
hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
313
|
+
}
|
314
|
+
if (!!footEl) {
|
315
|
+
hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
316
|
+
}
|
317
|
+
|
318
|
+
const newPageSize = Math.floor(hostSize / props.size);
|
319
|
+
if (newPageSize != state.pageSize) {state.pageSize = newPageSize;}
|
320
|
+
},
|
307
321
|
};
|
308
322
|
|
309
323
|
/*---------------------------------------handler-------------------------------------------*/
|
@@ -325,6 +339,7 @@ export function useVirtualList(
|
|
325
339
|
};
|
326
340
|
|
327
341
|
watch(() => props.data, (data: any[]) => {
|
342
|
+
delay().then(() => {utils.resetPageSize();});
|
328
343
|
if (props.disabled) {
|
329
344
|
return;
|
330
345
|
}
|
@@ -336,17 +351,7 @@ export function useVirtualList(
|
|
336
351
|
|
337
352
|
onMounted(async () => {
|
338
353
|
await delay(23);
|
339
|
-
|
340
|
-
const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
|
341
|
-
const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
|
342
|
-
if (!!headEl) {
|
343
|
-
hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
344
|
-
}
|
345
|
-
if (!!footEl) {
|
346
|
-
hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
347
|
-
}
|
348
|
-
|
349
|
-
state.pageSize = Math.floor(hostSize / props.size);
|
354
|
+
utils.resetPageSize();
|
350
355
|
});
|
351
356
|
|
352
357
|
onUpdated(async () => {
|
@@ -1,12 +1,15 @@
|
|
1
1
|
import Axios from "axios";
|
2
2
|
import {iHttpRequestConfig, iPlainResponseDataType} from "./http.utils";
|
3
|
+
import {AutoLoadingObserver} from "../AutoLoadingObserver";
|
3
4
|
|
4
5
|
export function createHttp(defaultRequestConfig: iHttpRequestConfig<iPlainResponseDataType>) {
|
5
6
|
|
6
7
|
const axios = Axios.create(defaultRequestConfig);
|
7
8
|
|
8
9
|
async function request<T>(requestConfig: iHttpRequestConfig<iPlainResponseDataType & T>): Promise<iPlainResponseDataType & T> {
|
9
|
-
|
10
|
+
let promise = axios.request(requestConfig);
|
11
|
+
AutoLoadingObserver.subject(promise);
|
12
|
+
return promise as any;
|
10
13
|
}
|
11
14
|
|
12
15
|
return {
|
@@ -61,7 +61,7 @@
|
|
61
61
|
box-shadow: plv(message-box-shadow);
|
62
62
|
position: relative;
|
63
63
|
overflow: hidden;
|
64
|
-
background-color: plv(
|
64
|
+
background-color: plv(bg-4);
|
65
65
|
color: plv(text-2);
|
66
66
|
border-radius: plv(box-size-normal-border-radius);
|
67
67
|
|
@@ -85,7 +85,7 @@
|
|
85
85
|
justify-content: center;
|
86
86
|
|
87
87
|
@include prefix(icon) {
|
88
|
-
color: plv(
|
88
|
+
color: plv(bg-4);
|
89
89
|
position: relative;
|
90
90
|
z-index: 1;
|
91
91
|
|
@@ -369,6 +369,8 @@ export const PopupItem = designComponent({
|
|
369
369
|
|
370
370
|
PopupItemProvide.provide(state);
|
371
371
|
|
372
|
+
let prevContent: any;
|
373
|
+
|
372
374
|
return () => (
|
373
375
|
!!state.option.reference && (
|
374
376
|
(() => {
|
@@ -396,7 +398,18 @@ export const PopupItem = designComponent({
|
|
396
398
|
className="popup-item-content"
|
397
399
|
onTransitionEnd={handler.onTransitionend}
|
398
400
|
>
|
399
|
-
{
|
401
|
+
{(() => {
|
402
|
+
/*关闭的时候如果content为空,则渲染最后一次不为空的content内容*/
|
403
|
+
let content = slots.default.isExist() ? slots.default() : state.option.render();
|
404
|
+
if (!content) {
|
405
|
+
if (!state.isShow) {
|
406
|
+
content = prevContent;
|
407
|
+
}
|
408
|
+
} else {
|
409
|
+
prevContent = content;
|
410
|
+
}
|
411
|
+
return content;
|
412
|
+
})()}
|
400
413
|
</div>
|
401
414
|
</div>
|
402
415
|
</div>
|
@@ -12,7 +12,10 @@
|
|
12
12
|
|
13
13
|
@include comp(popup-item) {
|
14
14
|
|
15
|
-
--#{componentName('
|
15
|
+
--#{componentName('background-color')}: #{plv(bg-4)};
|
16
|
+
--#{componentName('table-head-background')}: #{plv(bg-4)};
|
17
|
+
|
18
|
+
--#{componentName('popup-item-background')}: #{plv(bg-4)};
|
16
19
|
|
17
20
|
position: fixed;
|
18
21
|
filter: drop-shadow(0 0 2px #c8c8c8);
|
@@ -107,6 +110,7 @@
|
|
107
110
|
|
108
111
|
&.popup-item-no-background {
|
109
112
|
--#{componentName('popup-item-background')}: transparent !important;
|
113
|
+
filter: none !important;
|
110
114
|
}
|
111
115
|
|
112
116
|
&.popup-item-no-border {
|
@@ -127,6 +127,9 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
|
|
127
127
|
if (reference == null || message == null || (typeof message === "string" && !message.trim().length)) {
|
128
128
|
return false;
|
129
129
|
}
|
130
|
+
if (option.alwaysShow) {
|
131
|
+
return true;
|
132
|
+
}
|
130
133
|
if (!state.isEnter) {
|
131
134
|
return false;
|
132
135
|
}
|
@@ -175,6 +178,7 @@ export function useTooltip(option: iTooltipServiceOption) {
|
|
175
178
|
}
|
176
179
|
|
177
180
|
export interface iTooltipServiceOption {
|
181
|
+
alwaysShow?: boolean,
|
178
182
|
/*传递给tooltip的水星*/
|
179
183
|
tooltip: () => Omit<iPopupUseOption, 'id' | 'reference' | 'render'> & { reference: HTMLElement | null | undefined, message: any },
|
180
184
|
/*是否在文本溢出时才会显示消息*/
|
package/src/packages/entry.tsx
CHANGED
@@ -62,6 +62,7 @@ export {TimePicker} from './components/TimePicker';
|
|
62
62
|
export {DatePicker} from './components/DatePicker';
|
63
63
|
export {Select} from './components/Select';
|
64
64
|
export {SelectOption} from './components/SelectOption';
|
65
|
+
export {SelectGroup} from './components/SelectGroup';
|
65
66
|
export {Form} from './components/Form';
|
66
67
|
export {FormItem} from './components/FormItem';
|
67
68
|
export {Cascade} from './components/Cascade';
|
@@ -114,6 +115,7 @@ export {$previewer} from './components/$previewer';
|
|
114
115
|
export {StackCard} from './components/StackCard';
|
115
116
|
export {StackCardItem} from './components/StackCardItem';
|
116
117
|
export {SortList} from './components/SortList';
|
118
|
+
export {Space} from './components/Space';
|
117
119
|
|
118
120
|
export {VirtualTable} from './components/VirtualTable';
|
119
121
|
export {Table} from './components/Table';
|
@@ -207,6 +209,7 @@ export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
|
|
207
209
|
export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
|
208
210
|
export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
|
209
211
|
export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
|
212
|
+
export {AutoLoadingObserver} from './components/AutoLoadingObserver';
|
210
213
|
|
211
214
|
// @ts-ignore
|
212
215
|
setComponentPrefix(globalComponentPrefix);
|
@@ -0,0 +1,55 @@
|
|
1
|
+
import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "plain-design-composition";
|
2
|
+
import {delay} from "plain-utils/utils/delay";
|
3
|
+
|
4
|
+
export function useCollapseStyles(
|
5
|
+
{
|
6
|
+
isShow,
|
7
|
+
active,
|
8
|
+
inactive
|
9
|
+
}: {
|
10
|
+
isShow: () => boolean,
|
11
|
+
active: () => StyleProperties,
|
12
|
+
inactive: () => StyleProperties,
|
13
|
+
}
|
14
|
+
) {
|
15
|
+
|
16
|
+
const state = (() => {
|
17
|
+
const show = isShow();
|
18
|
+
return reactive({
|
19
|
+
isMount: show,
|
20
|
+
styles: show ? active() : inactive(),
|
21
|
+
|
22
|
+
onTransitionEnd: undefined as undefined | ((e: iTransitionEvent) => void)
|
23
|
+
});
|
24
|
+
})();
|
25
|
+
|
26
|
+
watch(() => isShow(), async show => {
|
27
|
+
if (show) {
|
28
|
+
if (!state.isMount) {
|
29
|
+
state.isMount = true;
|
30
|
+
await delay(23);
|
31
|
+
}
|
32
|
+
state.styles = active();
|
33
|
+
state.onTransitionEnd = undefined;
|
34
|
+
} else {
|
35
|
+
if (!state.isMount) {
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
state.styles = inactive();
|
39
|
+
state.onTransitionEnd = () => {
|
40
|
+
state.isMount = false;
|
41
|
+
state.onTransitionEnd = undefined;
|
42
|
+
};
|
43
|
+
}
|
44
|
+
});
|
45
|
+
|
46
|
+
const styles = useStyleCache(styles => {
|
47
|
+
Object.assign(styles, state.styles);
|
48
|
+
});
|
49
|
+
|
50
|
+
return reactive({
|
51
|
+
styles,
|
52
|
+
show: computed(() => state.isMount),
|
53
|
+
onTransitionEnd: (e: iTransitionEvent) => state.onTransitionEnd?.(e)
|
54
|
+
});
|
55
|
+
}
|