plain-design 1.0.0-beta.31 → 1.0.0-beta.33

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. package/dist/plain-design.commonjs.min.js +18 -18
  2. package/dist/plain-design.min.css +11 -6
  3. package/dist/plain-design.min.js +18 -18
  4. package/dist/report.html +38 -38
  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/Scroll/index.tsx +6 -6
  24. package/src/packages/components/SortList/index.tsx +191 -0
  25. package/src/packages/components/SortList/sort-list.scss +11 -0
  26. package/src/packages/components/StackCard/index.tsx +260 -0
  27. package/src/packages/components/StackCard/stack-card.scss +28 -0
  28. package/src/packages/components/StackCardItem/index.tsx +23 -0
  29. package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx +1 -1
  30. package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx +2 -1
  31. package/src/packages/components/Table/table/body/row.tsx +1 -1
  32. package/src/packages/components/Table/table/use/useTableDraggier.row.tsx +1 -1
  33. package/src/packages/components/Table/table/utils/createTableHooks.ts +1 -1
  34. package/src/packages/components/ThemeEditor/index.tsx +25 -24
  35. package/src/packages/components/Tree/RenderTreeNode.tsx +2 -1
  36. package/src/packages/components/Tree/index.tsx +2 -1
  37. package/src/packages/components/VirtualList/index.tsx +12 -3
  38. package/src/packages/components/VirtualList/useVirtualList.tsx +129 -86
  39. package/src/packages/components/VirtualList/virtual-list.scss +31 -17
  40. package/src/packages/components/VirtualTable/index.tsx +1 -1
  41. package/src/packages/entry.tsx +5 -1
  42. package/src/packages/i18n/lang/en-us.ts +36 -0
  43. package/src/packages/i18n/lang/zh-cn.ts +36 -0
  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/DemoSortList.tsx +70 -0
  54. package/src/pages/index/components/normal/DemoStackCard.tsx +356 -0
  55. package/src/pages/index/components/normal/DemoVirtualList.tsx +89 -3
  56. package/src/pages/index/components/service/DemoImagePreviewer.tsx +185 -0
  57. package/src/pages/index/home/AppHome.tsx +18 -3
  58. package/src/pages/index/home/menus.tsx +3 -1
  59. package/src/packages/components/CarouselGroup/carousel.scss +0 -143
  60. package/src/packages/components/CarouselGroup/index.tsx +0 -274
package/src/packages/utils/buildCycleIndexList.ts ADDED
@@ -0,0 +1,31 @@
1
+ export function buildCycleIndexList({ length, current }: { length: number, current: number }) {
2
+
3
+ const sourceList = new Array(length).fill(null).map((_, index) => index);
4
+ const cycleIndexList = (() => {
5
+
6
+ if (sourceList.length <= 2) {
7
+ return sourceList;
8
+ }
9
+
10
+ const leftList = sourceList.slice(0, current);
11
+ const rightList = sourceList.slice(current + 1);
12
+
13
+ while (Math.abs(leftList.length - rightList.length) >= 2) {
14
+ if (leftList.length > rightList.length) {
15
+ rightList.push(leftList.shift()!);
16
+ } else {
17
+ leftList.unshift(rightList.pop()!);
18
+ }
19
+ }
20
+ return [...leftList, current, ...rightList];
21
+ })();
22
+
23
+ const currentIndexInCycle = cycleIndexList.indexOf(current);
24
+
25
+ const index2distance = cycleIndexList.reduce((prev, item, cycleIndex) => {
26
+ prev[item] = cycleIndex - currentIndexInCycle;
27
+ return prev;
28
+ }, {} as Record<number, number>);
29
+
30
+ return { cycleIndexList, currentIndexInCycle, index2distance };
31
+ }
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