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.
Files changed (49) hide show
  1. package/dist/plain-design.commonjs.min.js +27 -18
  2. package/dist/plain-design.min.css +18 -17
  3. package/dist/plain-design.min.js +27 -18
  4. package/dist/report.html +38 -38
  5. package/package.json +44 -44
  6. package/src/packages/components/Application/theme/theme.ts +26 -14
  7. package/src/packages/components/AutoLoadingObserver/index.tsx +172 -0
  8. package/src/packages/components/AutoTable/auto-table.scss +19 -8
  9. package/src/packages/components/AutoTable/filter/useTableOption.filter.search.tsx +3 -3
  10. package/src/packages/components/AutoTable/use/useTableOption.fill.tsx +2 -1
  11. package/src/packages/components/AutoTable/use/useTableOption.loading.tsx +8 -2
  12. package/src/packages/components/AutoTable/use/useTableOption.pagination.tsx +5 -0
  13. package/src/packages/components/Button/button.scss +5 -5
  14. package/src/packages/components/Button/index.tsx +68 -10
  15. package/src/packages/components/Cascade/cascade.scss +2 -2
  16. package/src/packages/components/CascadePanel/flat/cascade-flat-panel.scss +21 -34
  17. package/src/packages/components/CheckboxInner/checkbox-inner.scss +1 -0
  18. package/src/packages/components/DatePicker/date.scss +1 -1
  19. package/src/packages/components/Dialog/dialog.scss +4 -1
  20. package/src/packages/components/FilterFormSingle/index.tsx +7 -2
  21. package/src/packages/components/Form/form.scss +51 -1
  22. package/src/packages/components/Form/layout/useFormLayout.tsx +47 -13
  23. package/src/packages/components/Form/validate/useFormValidation.tsx +21 -16
  24. package/src/packages/components/FormItem/FormItemValidateMessage.tsx +16 -0
  25. package/src/packages/components/FormItem/index.tsx +24 -11
  26. package/src/packages/components/Input/index.scss +17 -5
  27. package/src/packages/components/Input/useMultipleInput.tsx +1 -1
  28. package/src/packages/components/InputNumber/number.scss +1 -1
  29. package/src/packages/components/Object/object.scss +9 -2
  30. package/src/packages/components/Select/SelectPanel.tsx +3 -0
  31. package/src/packages/components/Select/select.utils.tsx +1 -1
  32. package/src/packages/components/SelectGroup/index.tsx +37 -0
  33. package/src/packages/components/Space/index.tsx +30 -0
  34. package/src/packages/components/Space/space.scss +26 -0
  35. package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx +1 -1
  36. package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss +4 -4
  37. package/src/packages/components/Table/table/body/cell.tsx +17 -12
  38. package/src/packages/components/Table/table/table.scss +17 -14
  39. package/src/packages/components/Table/table/use/useTableFormEditor.tsx +2 -0
  40. package/src/packages/components/VirtualList/useVirtualList.tsx +16 -11
  41. package/src/packages/components/VirtualTable/virtual-table.scss +1 -1
  42. package/src/packages/components/createHttp/index.tsx +4 -1
  43. package/src/packages/components/useMessage/message.scss +2 -2
  44. package/src/packages/components/useNotice/notice.scss +1 -1
  45. package/src/packages/components/usePopup/PopupItem.tsx +14 -1
  46. package/src/packages/components/usePopup/popup-item.scss +5 -1
  47. package/src/packages/components/useTooltip/index.tsx +4 -0
  48. package/src/packages/entry.tsx +3 -0
  49. 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 + 12;
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: $margin;
19
+ margin-bottom: 0;
20
20
 
21
21
  .table-operation-bar-right {
22
- margin-left: 12px;
22
+ margin-left: $margin;
23
23
 
24
24
  & > * + * {
25
- margin-left: calc(#{$margin} - 8px);
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
- return ({
137
- /*
138
- * 没有开启overflowTooltip
139
- * 或者没有初始化getBodyCell
140
- * 或者没有bodyCell
141
- * 或者当前处于编辑状态
142
- *
143
- * 则不显示overflowTooltip
144
- */
145
- reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
146
- message: bodyCell?.body,
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: 600;
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
- let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
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 () => {
@@ -154,7 +154,7 @@ $scrollbarSize: 12px;
154
154
 
155
155
  box-sizing: border-box;
156
156
  position: relative;
157
- padding: 1px plv(input-padding-x);
157
+ padding: 1px 11px;
158
158
 
159
159
  .cell-fit-height {
160
160
  height: 100%;
@@ -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
- return await axios.request(requestConfig);
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(background-lite);
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(background-lite);
88
+ color: plv(bg-4);
89
89
  position: relative;
90
90
  z-index: 1;
91
91
 
@@ -40,7 +40,7 @@
40
40
  @include prefix(notice) {
41
41
  text-align: initial;
42
42
  pointer-events: auto;
43
- background-color: plv(background-lite);
43
+ background-color: plv(bg-4);
44
44
  display: inline-block;
45
45
  padding: plv(notice-padding);
46
46
  box-shadow: plv(notice-box-shadow);
@@ -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
- {slots.default.isExist() ? slots.default() : state.option.render()}
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('popup-item-background')}: #{plv(background-lite)};
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
  /*是否在文本溢出时才会显示消息*/
@@ -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
+ }