plain-design 1.0.0-beta.43 → 1.0.0-beta.45
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/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
|
+
}
|