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

Sign up to get free protection for your applications and to get access to all the features.
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
+ });