plain-design 1.0.0-beta.30 → 1.0.0-beta.32

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 (61) hide show
  1. package/dist/plain-design.commonjs.min.js +3 -3
  2. package/dist/plain-design.min.css +11 -6
  3. package/dist/plain-design.min.js +3 -3
  4. package/dist/report.html +2 -2
  5. package/package.json +3 -3
  6. package/src/packages/components/$previewer/ImagePreviewerFixedContainer.tsx +107 -0
  7. package/src/packages/components/$previewer/image-previewer-fixed-container.scss +18 -0
  8. package/src/packages/components/$previewer/index.tsx +52 -0
  9. package/src/packages/components/Application/service/useApplicationService.tsx +2 -0
  10. package/src/packages/components/Carousel/carousel.scss +391 -0
  11. package/src/packages/components/Carousel/index.tsx +569 -22
  12. package/src/packages/components/CarouselItem/index.tsx +77 -0
  13. package/src/packages/components/ImagePreviewer/ImagePreviewer.tsx +572 -0
  14. package/src/packages/components/ImagePreviewer/ImagePreviewerButtonBar.tsx +140 -0
  15. package/src/packages/components/ImagePreviewer/ImagePreviewerCarouselImage.tsx +54 -0
  16. package/src/packages/components/ImagePreviewer/ImagePreviewerGallery.tsx +202 -0
  17. package/src/packages/components/ImagePreviewer/PreviewerLoading.tsx +26 -0
  18. package/src/packages/components/ImagePreviewer/image-previewer.scss +244 -0
  19. package/src/packages/components/ImagePreviewer/image-previewer.utils.tsx +135 -0
  20. package/src/packages/components/ImagePreviewer/index.tsx +5 -0
  21. package/src/packages/components/ImagePreviewer/previewer-loading.scss +52 -0
  22. package/src/packages/components/Input/useMultipleInput.tsx +2 -79
  23. package/src/packages/components/InputNumber/NumberResize.tsx +14 -1
  24. package/src/packages/components/InputNumber/input-number.utils.tsx +7 -5
  25. package/src/packages/components/InputNumber/useInputNumber.public.tsx +25 -6
  26. package/src/packages/components/Scroll/index.tsx +6 -6
  27. package/src/packages/components/SortList/index.tsx +191 -0
  28. package/src/packages/components/SortList/sort-list.scss +11 -0
  29. package/src/packages/components/StackCard/index.tsx +260 -0
  30. package/src/packages/components/StackCard/stack-card.scss +28 -0
  31. package/src/packages/components/StackCardItem/index.tsx +23 -0
  32. package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx +1 -1
  33. package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx +2 -1
  34. package/src/packages/components/Table/table/body/row.tsx +1 -1
  35. package/src/packages/components/Table/table/use/useTableDraggier.row.tsx +1 -1
  36. package/src/packages/components/Table/table/utils/createTableHooks.ts +1 -1
  37. package/src/packages/components/Tree/RenderTreeNode.tsx +2 -1
  38. package/src/packages/components/Tree/index.tsx +2 -1
  39. package/src/packages/components/VirtualList/index.tsx +12 -3
  40. package/src/packages/components/VirtualList/useVirtualList.tsx +129 -86
  41. package/src/packages/components/VirtualList/virtual-list.scss +31 -17
  42. package/src/packages/components/VirtualTable/index.tsx +1 -1
  43. package/src/packages/entry.tsx +5 -1
  44. package/src/packages/uses/useDragHorizontalScroll.ts +82 -0
  45. package/src/packages/utils/ComponentUtils.ts +10 -0
  46. package/src/packages/utils/buildCycleIndexList.ts +31 -0
  47. package/src/packages/utils/getDeviceInfo.ts +44 -44
  48. package/src/packages/utils/getRectAutoFormat.ts +9 -0
  49. package/src/packages/utils/notNull.ts +9 -0
  50. package/src/pages/index/app.scss +1 -1
  51. package/src/pages/index/components/normal/DemoCarousel.tsx +178 -73
  52. package/src/pages/index/components/normal/DemoKeepAlive.tsx +25 -25
  53. package/src/pages/index/components/normal/DemoNumber.tsx +4 -1
  54. package/src/pages/index/components/normal/DemoSortList.tsx +70 -0
  55. package/src/pages/index/components/normal/DemoStackCard.tsx +356 -0
  56. package/src/pages/index/components/normal/DemoVirtualList.tsx +89 -3
  57. package/src/pages/index/components/service/DemoImagePreviewer.tsx +185 -0
  58. package/src/pages/index/home/AppHome.tsx +18 -3
  59. package/src/pages/index/home/menus.tsx +3 -1
  60. package/src/packages/components/CarouselGroup/carousel.scss +0 -143
  61. package/src/packages/components/CarouselGroup/index.tsx +0 -274
package/src/packages/utils/getDeviceInfo.ts CHANGED
@@ -9,50 +9,50 @@ interface iDeviceInfo {
9
9
  osType: typeof eOsType.TYPE,
10
10
  }
11
11
 
12
- export const getDeviceInfo = (() => {
13
- let info: iDeviceInfo | null = null;
14
-
15
- return () => {
16
- if (isSSR()) {
17
- throw new Error('服务端渲染的情况下不可以获取设备信息');
18
- }
19
- if (!info) {
20
- const userAgent = navigator.userAgent;
21
-
22
- info = {
23
- deviceType: (() => {
24
- const isMobile = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
25
- if (isMobile) {
26
- return eDeviceType.mobile;
27
- }
28
- if (/iPad|Android/i.test(userAgent) && !isMobile) {
29
- return eDeviceType.tablet;
30
- }
31
- return eDeviceType.desktop;
32
- })(),
33
- osType: (() => {
34
- if (/Win/i.test(userAgent)) {
35
- return eOsType.win;
36
- }
37
- if (/Mac/i.test(userAgent)) {
38
- return eOsType.mac;
39
- }
40
- if (/Linux/i.test(userAgent)) {
41
- return eOsType.linux;
42
- }
43
- if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
44
- return eOsType.ios;
45
- }
46
- if (/Android/.test(userAgent)) {
47
- return eOsType.android;
48
- }
49
- return 'unknown';
50
- })()
51
- };
52
- }
53
- return info;
54
- };
55
- })();
12
+ let info: iDeviceInfo | null = null;
13
+
14
+ export const getDeviceInfo = () => {
15
+ if (isSSR()) {
16
+ throw new Error('服务端渲染的情况下不可以获取设备信息');
17
+ }
18
+ if (!info) {
19
+ const userAgent = navigator.userAgent;
20
+
21
+ info = {
22
+ deviceType: (() => {
23
+ const isMobile = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
24
+ if (isMobile) {
25
+ return eDeviceType.mobile;
26
+ }
27
+ if (/iPad|Android/i.test(userAgent) && !isMobile) {
28
+ return eDeviceType.tablet;
29
+ }
30
+ return eDeviceType.desktop;
31
+ })(),
32
+ osType: (() => {
33
+ if (/Win/i.test(userAgent)) {
34
+ return eOsType.win;
35
+ }
36
+ if (/Mac/i.test(userAgent)) {
37
+ return eOsType.mac;
38
+ }
39
+ if (/Linux/i.test(userAgent)) {
40
+ return eOsType.linux;
41
+ }
42
+ if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
43
+ return eOsType.ios;
44
+ }
45
+ if (/Android/.test(userAgent)) {
46
+ return eOsType.android;
47
+ }
48
+ return 'unknown';
49
+ })()
50
+ };
51
+ }
52
+ return info;
53
+ };
54
+
55
+ export const clearDeviceInfo = () => {info = null;};
56
56
 
57
57
  export const isPC = () => getDeviceInfo().deviceType === eDeviceType.desktop;
58
58
 
package/src/packages/utils/getRectAutoFormat.ts ADDED
@@ -0,0 +1,9 @@
1
+ export function getRectAutoFormat(el: HTMLElement) {
2
+ const { top, left, height, width } = el.getBoundingClientRect();
3
+ return {
4
+ top: Number(top.toFixed(0)),
5
+ left: Number(left.toFixed(0)),
6
+ height: Number(height.toFixed(0)),
7
+ width: Number(width.toFixed(0)),
8
+ };
9
+ }
package/src/packages/utils/notNull.ts ADDED
@@ -0,0 +1,9 @@
1
+ export function notNull<T, D>(val: T, defaultValue: D | (() => D)): Exclude<T, null | undefined> | D {
2
+ // @ts-ignore
3
+ return val != null ? val : (typeof defaultValue === "function" ? defaultValue() : defaultValue);
4
+ }
5
+
6
+ export function notNullFunction<T, D>(val: T, defaultValue: D): Exclude<T, null | undefined> | D {
7
+ // @ts-ignore
8
+ return val != null ? val : defaultValue;
9
+ }
package/src/pages/index/app.scss CHANGED
@@ -38,7 +38,7 @@ html, body, #app {
38
38
  align-items: stretch;
39
39
  position: sticky;
40
40
  top: 0;
41
- z-index: 10;
41
+ z-index: 50;
42
42
  border-bottom: solid 1px plv(border-color);
43
43
  background-color: plv(background-color);
44
44
 
package/src/pages/index/components/normal/DemoCarousel.tsx CHANGED
@@ -1,6 +1,6 @@
1
- import {designPage} from "plain-design-composition";
1
+ import {designPage, reactive} from "plain-design-composition";
2
2
  import {DemoRow} from "../../Demo/DemoRow";
3
- import {Carousel, CarouselGroup} from "../../../../packages";
3
+ import {Carousel, CarouselItem} from "../../../../packages";
4
4
  import {DemoLine} from "../../Demo/DemoLine";
5
5
 
6
6
  export default designPage(() => {
@@ -9,73 +9,108 @@ export default designPage(() => {
9
9
  color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
10
10
  };
11
11
 
12
+ const state = reactive({
13
+ currentItem: undefined as any,
14
+ currentItem2: undefined as any
15
+ });
16
+
12
17
  return () => (
13
18
  <div>
14
19
  <DemoRow title={'基本用法'}>
15
- <CarouselGroup>
16
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
17
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
18
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
19
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
20
- </CarouselGroup>
20
+ <p>Carousel有子元素自动撑开高度，支持无限轮播</p>
21
+ <Carousel largeSwitchButton autoPlay={0}>
22
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
23
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
24
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
25
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
26
+ </Carousel>
21
27
  </DemoRow>
22
28
  <DemoRow title={'两个元素，三个元素'}>
23
- <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
24
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
25
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
26
- </CarouselGroup>
27
- <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
28
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
29
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
30
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
31
- </CarouselGroup>
29
+ <Carousel style={{ width: '400px', display: 'inline-flex' }} autoPlay={0}>
30
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
31
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
32
+ </Carousel>
33
+ <Carousel style={{ width: '400px', display: 'inline-flex' }} autoPlay={0}>
34
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
35
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
36
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
37
+ </Carousel>
32
38
  </DemoRow>
33
39
  <DemoRow title={'禁用前后按钮'}>
34
- <CarouselGroup disabledOperator>
35
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
36
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
37
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
38
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
39
- </CarouselGroup>
40
+ <Carousel switchButton={false}>
41
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
42
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
43
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
44
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
45
+ </Carousel>
46
+ </DemoRow>
47
+ <DemoRow title={'禁用拂动'}>
48
+ <p>只可以通过指示器或者切换按钮切换内容，但是此时可以选择页面中的文本</p>
49
+ <Carousel disableSwiper>
50
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
51
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
52
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
53
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
54
+ </Carousel>
40
55
  </DemoRow>
41
56
  <DemoRow title={'指示器'}>
42
57
  <DemoLine title={'禁用指示器'}>
43
- <CarouselGroup disabledIndicator style={{ width: '400px' }}>
44
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
45
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
46
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
47
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
48
- </CarouselGroup>
58
+ <Carousel noIndicator style={{ width: '400px' }}>
59
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
60
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
61
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
62
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
63
+ </Carousel>
49
64
  </DemoLine>
50
65
  <DemoLine title={'鼠标悬浮激活指示器'}>
51
- <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'}>
52
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
53
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
54
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
55
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
56
- </CarouselGroup>
66
+ <Carousel style={{ width: '400px' }} indicatorTrigger={'hover'}>
67
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
68
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
69
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
70
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
71
+ </Carousel>
72
+ </DemoLine>
73
+ <DemoLine title={'圆点指示器'}>
74
+ <Carousel style={{ width: '400px' }} indicatorStyle="dot">
75
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
76
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
77
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
78
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
79
+ </Carousel>
80
+ </DemoLine>
81
+ <DemoLine title={'文字指示器'}>
82
+ <Carousel style={{ width: '400px' }} indicatorStyle="text">
83
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
84
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
85
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
86
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
87
+ </Carousel>
57
88
  </DemoLine>
58
89
  <DemoLine title={'自定义指示器'}>
59
- <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'} v-slots={{
90
+ <Carousel style={{ width: '400px' }} indicatorTrigger={'hover'} v-slots={{
60
91
  default: () => <>
61
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
62
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
63
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
64
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
92
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
93
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
94
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
95
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
65
96
  </>,
66
- indicator: ({ active, index }) => (
67
- <div key={index} style={{ marginRight: '8px', height: '5px', width: '5px', backgroundColor: `rgba(255,255,255,${active ? '1' : '0.5'})` }}/>
97
+ indicator: ({ activeIndex }) => (
98
+ <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: '3', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: '16px' }}>
99
+ {new Array(4).fill(1).map((_, index) => (
100
+ <div key={index} style={{ marginRight: '8px', height: '5px', width: '5px', backgroundColor: `rgba(255,255,255,${activeIndex === index ? '1' : '0.5'})` }}/>
101
+ ))}
102
+ </div>
68
103
  )
69
104
  }}/>
70
105
  </DemoLine>
71
106
  </DemoRow>
72
107
  <DemoRow title={'cover覆盖内容'}>
73
- <CarouselGroup v-slots={{
108
+ <Carousel v-slots={{
74
109
  default: () => <>
75
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
76
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
77
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
78
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
110
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
111
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
112
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
113
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
79
114
  </>,
80
115
  cover: () => (
81
116
  <div style={{ pointerEvents: 'none', textAlign: 'center', padding: '20px', color: 'white', boxSizing: 'border-box' }}>
@@ -84,41 +119,111 @@ export default designPage(() => {
84
119
  )
85
120
  }}/>
86
121
  </DemoRow>
87
-
88
122
  <DemoRow title={'自动播放'}>
89
123
  <DemoLine title={'禁用自动播放'}>
90
- <CarouselGroup autoplay={0} style={{ width: '400px' }}>
91
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
92
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
93
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
94
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
95
- </CarouselGroup>
124
+ <Carousel autoPlay={0} style={{ width: '400px' }}>
125
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
126
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
127
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
128
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
129
+ </Carousel>
96
130
  </DemoLine>
97
131
  <DemoLine title={'时间间隔为6s'}>
98
- <CarouselGroup autoplay={6000} style={{ width: '400px' }}>
99
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
100
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
101
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
102
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
103
- </CarouselGroup>
132
+ <Carousel autoPlay={6000} style={{ width: '400px' }}>
133
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
134
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
135
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
136
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
137
+ </Carousel>
104
138
  </DemoLine>
105
139
  </DemoRow>
106
-
107
140
  <DemoRow title={'纵向切换'}>
108
- <CarouselGroup vertical>
109
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
110
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
111
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
112
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
113
- </CarouselGroup>
141
+ <p>纵向切换的时候需要设置固定高度</p>
142
+ <Carousel vertical height={300} style={{ marginBottom: '16px' }} autoPlay={0}>
143
+ <CarouselItem>
144
+ <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
145
+ </CarouselItem>
146
+ <CarouselItem>
147
+ <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
148
+ </CarouselItem>
149
+ <CarouselItem>
150
+ <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '100%' }}>panel3</div>
151
+ </CarouselItem>
152
+ </Carousel>
153
+
154
+ <Carousel vertical height={300} autoPlay={0}>
155
+ <CarouselItem>
156
+ <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
157
+ </CarouselItem>
158
+ <CarouselItem>
159
+ <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
160
+ </CarouselItem>
161
+ </Carousel>
162
+ </DemoRow>
163
+ <DemoRow title={'双向绑定 Item.val'}>
164
+ <p>state.currentItem:{String(state.currentItem)}</p>
165
+ <Carousel v-model={state.currentItem} style={{ marginBottom: "16px" }} autoPlay={0}>
166
+ <CarouselItem val="panel1"><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
167
+ <CarouselItem val="panel2"><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
168
+ <CarouselItem val="panel3"><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
169
+ <CarouselItem val="panel4"><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
170
+ </Carousel>
171
+ <Carousel vertical height={300} autoPlay={0} v-model={state.currentItem}>
172
+ <CarouselItem val="panel1">
173
+ <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
174
+ </CarouselItem>
175
+ <CarouselItem val="panel2">
176
+ <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
177
+ </CarouselItem>
178
+ <CarouselItem val="panel3">
179
+ <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '100%' }}>panel3</div>
180
+ </CarouselItem>
181
+ <CarouselItem val="panel4">
182
+ <div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100%' }}>panel4</div>
183
+ </CarouselItem>
184
+ </Carousel>
185
+ </DemoRow>
186
+ <DemoRow title={'双向绑定 Item.index'}>
187
+ <p>state.currentItem:{String(state.currentItem2)}</p>
188
+ <Carousel v-model={state.currentItem2} style={{ marginBottom: "16px" }} autoPlay={0}>
189
+ <CarouselItem><div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '250px' }}>panel1</div></CarouselItem>
190
+ <CarouselItem><div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '200px' }}>panel2</div></CarouselItem>
191
+ <CarouselItem><div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '150px' }}>panel3</div></CarouselItem>
192
+ <CarouselItem><div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100px' }}>panel4</div></CarouselItem>
193
+ </Carousel>
194
+ <Carousel vertical height={300} autoPlay={0} v-model={state.currentItem2}>
195
+ <CarouselItem>
196
+ <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '100%' }}>panel1</div>
197
+ </CarouselItem>
198
+ <CarouselItem>
199
+ <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '100%' }}>panel2</div>
200
+ </CarouselItem>
201
+ <CarouselItem>
202
+ <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '100%' }}>panel3</div>
203
+ </CarouselItem>
204
+ <CarouselItem>
205
+ <div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '100%' }}>panel4</div>
206
+ </CarouselItem>
207
+ </Carousel>
114
208
  </DemoRow>
115
209
  <DemoRow title={'卡片形式切换'}>
116
- <CarouselGroup card autoplay={0} style={{ width: '500px' }}>
117
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
118
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
119
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
120
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
121
- </CarouselGroup>
210
+ <p>建议用组件StackCard</p>
211
+ <div style={{ display: 'flex', justifyContent: 'center', overflow: 'hidden' }}>
212
+ <Carousel card autoPlay={0} style={{ width: '40%' }}>
213
+ <CarouselItem>
214
+ <div style={{ backgroundColor: '#8A2BE2', ...publicItemStyles, height: '300px' }}>panel1</div>
215
+ </CarouselItem>
216
+ <CarouselItem>
217
+ <div style={{ backgroundColor: '#409EFF', ...publicItemStyles, height: '300px' }}>panel2</div>
218
+ </CarouselItem>
219
+ <CarouselItem>
220
+ <div style={{ backgroundColor: '#F38585', ...publicItemStyles, height: '300px' }}>panel3</div>
221
+ </CarouselItem>
222
+ <CarouselItem>
223
+ <div style={{ backgroundColor: '#455a64', ...publicItemStyles, height: '300px' }}>panel4</div>
224
+ </CarouselItem>
225
+ </Carousel>
226
+ </div>
122
227
  </DemoRow>
123
228
  </div>
124
229
  );
package/src/pages/index/components/normal/DemoKeepAlive.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import {computed, designPage, reactive} from "plain-design-composition";
2
2
  import {DemoRow} from "../../Demo/DemoRow";
3
- import {$message, Button, ButtonGroup, Carousel, CarouselGroup, Checkbox, CheckboxGroup, Collapse, CollapseGroup, Input, KeepAlive, Segment, SegmentGroup, Tag} from "../../../../packages";
3
+ import {$message, Button, ButtonGroup, CarouselItem, Carousel, Checkbox, CheckboxGroup, Collapse, CollapseGroup, Input, KeepAlive, Segment, SegmentGroup, Tag} from "../../../../packages";
4
4
  import React, {useState} from "react";
5
5
  import {iKeepAliveMeta} from "../../../../packages/components/KeepAlive/utils/keepalive.utils";
6
6
  import {delay} from "plain-utils/utils/delay";
@@ -17,12 +17,12 @@ export const demo1 = designPage(() => {
17
17
  };
18
18
  const DemoCarousel = () => {
19
19
  return (
20
- <CarouselGroup autoplay={0}>
21
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
22
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
23
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
24
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
25
- </CarouselGroup>
20
+ <Carousel autoPlay={0}>
21
+ <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
22
+ <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
23
+ <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
24
+ <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
25
+ </Carousel>
26
26
  );
27
27
  };
28
28
 
@@ -136,16 +136,16 @@ export const demo3 = designPage(() => {
136
136
  };
137
137
  const DemoCarousel: React.FC<{ coverText: string }> = (props) => {
138
138
  return (
139
- <CarouselGroup autoplay={0} cover={
139
+ <Carousel autoPlay={0} cover={
140
140
  <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
141
141
  {props.coverText}
142
142
  </div>
143
143
  }>
144
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
145
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
146
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
147
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
148
- </CarouselGroup>
144
+ <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
145
+ <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
146
+ <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
147
+ <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
148
+ </Carousel>
149
149
  );
150
150
  };
151
151
 
@@ -273,16 +273,16 @@ export const demo5 = designPage(() => {
273
273
  };
274
274
  const DemoCarousel: React.FC<{ coverText: string }> = (props) => {
275
275
  return (
276
- <CarouselGroup autoplay={0} cover={
276
+ <Carousel autoPlay={0} cover={
277
277
  <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
278
278
  {props.coverText}
279
279
  </div>
280
280
  }>
281
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
282
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
283
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
284
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
285
- </CarouselGroup>
281
+ <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
282
+ <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
283
+ <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
284
+ <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
285
+ </Carousel>
286
286
  );
287
287
  };
288
288
 
@@ -404,16 +404,16 @@ export const demo6 = designPage(() => {
404
404
  };
405
405
  const DemoCarousel: React.FC<{ coverText: string }> = (props) => {
406
406
  return (
407
- <CarouselGroup autoplay={0} cover={
407
+ <Carousel autoPlay={0} cover={
408
408
  <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
409
409
  {props.coverText}
410
410
  </div>
411
411
  }>
412
- <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
413
- <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
414
- <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
415
- <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
416
- </CarouselGroup>
412
+ <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
413
+ <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
414
+ <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
415
+ <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
416
+ </Carousel>
417
417
  );
418
418
  };
419
419
 
package/src/pages/index/components/normal/DemoNumber.tsx CHANGED
@@ -191,7 +191,10 @@ export const demo10 = designPage(() => {
191
191
  <p>没有值的时候，点击add或者sub的默认单位为px</p>
192
192
  <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']}/>
193
193
  <InputNumber width="200" v-model={state.val[12]} button="resize" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" availableUnits={['px', 'em', '%']}/>{state.val[12]}
194
- <p>{state.val[12]}</p>
194
+ <p>必须带单位，否则视输入值无效，注意需要设置默认单位</p>
195
+ <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit/>
196
+ <p>手动判断输入的值是否有效，比如以2开头的值就无效</p>
197
+ <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit isValueEffective={(val) => val == null || String(val).charAt(0) !== '2'}/>
195
198
  </DemoRow>
196
199
  );
197
200
  });
package/src/pages/index/components/normal/DemoSortList.tsx ADDED
@@ -0,0 +1,70 @@
1
+ import {designPage, reactive} from "plain-design-composition";
2
+ import {DemoRow} from "../../Demo/DemoRow";
3
+ import {SortList} from "../../../../packages";
4
+
5
+ export const DemoSortList = designPage(() => {
6
+
7
+ const state = reactive({
8
+ list: ["#CC6666", "#CC9966", "#CCCC66", "#99CC66", "#66CC66", "#66CC99", "#66CCCC", "#6699CC", "#6666CC", "#9966CC", "#CC66CC", "#CC6699", "#B83D3D", "#8A2E2E", "#3DB8B8", "#2E8A8A"] as string[],
9
+ });
10
+
11
+ return () => (
12
+ <DemoRow title="基本用法">
13
+ <div style={{ width: '240px' }}>
14
+ <SortList
15
+ v-model={state.list}
16
+ col={4}
17
+ space={1}
18
+ v-slots={{
19
+ default: ({ index, item }) => (<div style={{ height: '80px', backgroundColor: item, cursor: 'move' }}/>)
20
+ }}
21
+ />
22
+ </div>
23
+ </DemoRow>
24
+ );
25
+ });
26
+
27
+
28
+ export const DemoSortList2 = designPage(() => {
29
+
30
+ const state = reactive({
31
+ list: ["#CC6666", "#CC9966", "#CCCC66", "#99CC66", "#66CC66", "#66CC99", "#66CCCC", "#6699CC", "#6666CC", "#9966CC", "#CC66CC", "#CC6699", "#B83D3D", "#8A2E2E", "#3DB8B8", "#2E8A8A"] as string[],
32
+ });
33
+
34
+ return () => (
35
+ <DemoRow title="单列纵向">
36
+ <div style={{ width: '240px' }}>
37
+ <SortList
38
+ v-model={state.list}
39
+ col={2}
40
+ space={0}
41
+ v-slots={{
42
+ default: ({ index, item }) => (<div style={{ height: '80px', backgroundColor: item, cursor: 'move' }}/>)
43
+ }}
44
+ />
45
+ </div>
46
+ </DemoRow>
47
+ );
48
+ });
49
+
50
+ export const DemoSortListVertical = designPage(() => {
51
+
52
+ const state = reactive({
53
+ list: ["#CC6666", "#CC9966", "#CCCC66", "#99CC66", "#66CC66", "#66CC99", "#66CCCC", "#6699CC", "#6666CC", "#9966CC", "#CC66CC", "#CC6699", "#B83D3D", "#8A2E2E", "#3DB8B8", "#2E8A8A"] as string[],
54
+ });
55
+
56
+ return () => (
57
+ <DemoRow title="单列纵向">
58
+ <div style={{ width: '240px' }}>
59
+ <SortList
60
+ v-model={state.list}
61
+ col={1}
62
+ space={1}
63
+ v-slots={{
64
+ default: ({ index, item }) => (<div style={{ height: '80px', backgroundColor: item, cursor: 'move' }}/>)
65
+ }}
66
+ />
67
+ </div>
68
+ </DemoRow>
69
+ );
70
+ });