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

package/src/pages/index/components/service/DemoImagePreviewer.tsx

@@ -0,0 +1,185 @@
+import {designPage} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$previewer} from "../../../../packages";
+import {DemoLine} from "../../Demo/DemoLine";
+import {ImagePreviewer} from "../../../../packages/components/ImagePreviewer";
+import {createImagePreviewerOption} from "../../../../packages/components/ImagePreviewer/image-previewer.utils";
+
+export const DemoDocument = designPage(() => {
+  return () => (
+    <DemoRow title="使用手册">
+      <p>1、默认情况下ImagePreviewer会撑满宽度，然后高度由图片自动撑开；下边第一个示例设置了宽度800px，高度自动由图片撑开，如果多张图片高度不一致，则由高度最大的图片撑开；</p>
+      <p>2、ImagePreviewer分为三个区域，一个是顶部的按钮栏，中间图片展示栏，底部的画廊栏；</p>
+      <p>3、可以使用鼠标滚动，或者点击按钮栏的放大缩小按钮对当前展示的图片进行缩放；</p>
+      <p>4、可以点击旋转按钮，对图片进行旋转；</p>
+      <p>5、缩放或者旋转之后可以拖拽图片调整查看具体的图片位置；</p>
+      <p>6。在没有缩放或者旋转的状态下，左右滑动来切换浏览的图片；</p>
+      <p>7、点击按钮栏的重置按钮，或者缩放图片为原始大小，会自动令图片回正，回正就是原始状态，此时可以左右滑动切换浏览图片；</p>
+      <p>8、点击左右按钮切换图片也会令图片回正；</p>
+      <p>9、底部画廊在超长溢出的情况下可以拖拽左右滚动，也可以使用鼠标滚动上下滚动，触摸板左右滚动也可以支持；</p>
+      <p>10、触摸板左右的按钮点击可以自动滚动到上一页，下一页；每次滚动距离为半页距离；</p>
+      <p>11、快捷键：ESC（关闭全屏浏览）；左按键（上一张图）；右按键（下一张图）；滚轮向上（放大）；滚轮向下（缩小）；</p>
+    </DemoRow>
+  );
+});
+
+export const DemoImagePreviewer = designPage(() => {
+
+  const imageList = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/1.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/2.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/3.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/4.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/5.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/6.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/7.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/8.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/9.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/10.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/11.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/12.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/13.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/14.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/15.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/16.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/17.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/18.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/19.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/20.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/21.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/22.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=DemoImagePreviewer",
+  ];
+
+  const option = createImagePreviewerOption(imageList);
+  option.button = { close: false };
+  option.galleryHeight = 60;
+
+  return () => (
+    <DemoRow title="基本用法">
+      <div style={{ width: '500px', maxWidth: '100%' }}>
+        <ImagePreviewer option={option}/>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoImagePreview = designPage(() => {
+
+  const imageList = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/mountains.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-262367.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-athena-1586795.jpg?x-oss-process=image/resize,h_1080,m_lfit"
+  ];
+
+  return () => (
+    <DemoRow title="图片预览">
+      <DemoLine>
+        <p>1. 调用预览服务的时候如果传入原始的imageElement这个dom对象的话，初始会有一个放大动画</p>
+        <p>2. 双击可以关闭预览，或者ESC按键或者点击顶部的关闭按钮都可以关闭预览</p>
+      </DemoLine>
+      <DemoLine>
+        {imageList.map((item, index) => (
+          <img style={{ height: '100px' }} src={item} key={index} onClick={e => $previewer.preview({ current: index, urls: imageList }, e.currentTarget as any)}/>
+        ))}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+
+export const demoImagePreview2 = designPage(() => {
+
+  const imageList = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/mountains.jpg??x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-pixabay-262367.jpg??x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/pexels-athena-1586795.jpg?x-oss-process=image/resize,h_1080,m_lfit&?v=1"
+  ];
+
+  return () => (
+    <DemoRow title="关闭时没有原始图片">
+      <p>关闭时没有原始图片的情况下，关闭动画会往底部缩小并且关闭</p>
+      {imageList.map((item, index) => (
+        index == 0 ? null : <img style={{ height: '100px' }} src={item} key={index} onClick={e => $previewer.preview({ current: index, urls: imageList }, e.currentTarget as any)}/>
+      ))}
+    </DemoRow>
+  );
+});
+
+export const demoImagePreview3 = designPage(() => {
+
+  const imageList = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/1.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/2.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/3.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/4.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/5.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/6.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/7.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/8.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/9.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/10.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/11.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/12.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/13.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/14.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/15.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/16.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/17.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/18.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/19.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/20.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/21.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/22.jpg?x-oss-process=image/resize,h_1080,m_lfit",
+  ];
+
+  return () => (
+    <DemoRow title="多图预览示例">
+      {imageList.map((item, index) => (
+        <img style={{ height: '100px' }} src={item} key={index} onClick={e => $previewer.preview({ current: index, urls: imageList }, e.currentTarget as any)}/>
+      ))}
+    </DemoRow>
+  );
+});
+
+
+export const demoImagePreview4 = designPage(() => {
+
+  const imageList = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/1.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/2.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/3.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/4.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/5.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/6.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/7.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/8.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/9.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/10.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/11.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/12.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/13.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/14.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/15.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/16.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/17.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/18.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/19.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/20.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/21.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/xiaomi_su7/22.jpg?x-oss-process=image/resize,h_1080,m_lfit&v=1",
+  ];
+
+  return () => (
+    <DemoRow title="无原始图预览示例">
+      <p>1. 没有加载过的图片url，第一次预览的时候会显示加载状态；</p>
+      <p>2. 画廊使用的是虚拟滚动，所以并不是所有图片会立即加载，画廊滚动的时候会预初始化下一页图片，也就是会预加载下一页</p>
+      <ul>
+        {imageList.map((item, index) => (
+          <li key={index} onClick={() => $previewer.preview({ current: index, urls: imageList })} style={{ lineHeight: '40px' }}>
+            ITEM_${item}
+          </li>
+        ))}
+      </ul>
+    </DemoRow>
+  );
+});

package/src/pages/index/home/AppHome.tsx

@@ -1,14 +1,29 @@
-import {designPage} from "plain-design-composition";
+import {designPage, onBeforeUnmount, reactive} from "plain-design-composition";
 import {AppMenu} from "./AppMenu";
 import {AppHead} from "./AppHead";
 import {AppContent} from "./AppContent";
+import {clearDeviceInfo, eDeviceType, getDeviceInfo} from "../../../packages/utils/getDeviceInfo";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {delay} from "plain-utils/utils/delay";
 
 export const AppHome = designPage(() => {
+
+  const state = reactive({
+    deviceType: getDeviceInfo().deviceType
+  });
+
+  onBeforeUnmount(
+    addWindowListener('resize', async () => {
+      clearDeviceInfo();
+      state.deviceType = getDeviceInfo().deviceType;
+    })
+  );
+
   return () => (
     <div className="app-home">
       <AppHead/>
-      <div className="app-body">
-        <AppMenu/>
+      <div className="app-body" style={{ paddingLeft: state.deviceType !== eDeviceType.desktop ? '0' : undefined }}>
+        {state.deviceType === eDeviceType.desktop && <AppMenu/>}
         <AppContent/>
       </div>
     </div>

package/src/pages/index/home/menus.tsx

@@ -90,6 +90,7 @@ export const MenuGroups: MenuGroup[] = [
     name: '视图', children: [
       { name: 'List', title: '列表', page: '/normal/DemoList', complete: true },
       { name: 'VirtualList', title: '虚拟列表', page: '/normal/DemoVirtualList', complete: true },
+      { name: 'SortList', title: '排序列表', page: '/normal/DemoSortList', complete: true },
       { name: 'Progress', title: '进度条', page: '/normal/DemoProgress', complete: true },
       { name: 'Tree', title: '树形组件', page: '/normal/DemoTree', complete: true },
       // {name: 'Virtual Tree', title: '虚拟树', page: '/normal/virtual-tree', complete: false},
@@ -116,6 +117,7 @@ export const MenuGroups: MenuGroup[] = [
       { name: 'Popup', title: '悬浮框', page: '/normal/DemoPopup', complete: true },
       { name: 'Card', title: '卡片', page: '/normal/DemoCard', complete: true },
       { name: 'Carousel', title: '轮播', page: '/normal/DemoCarousel', complete: true },
+      { name: 'StackCard', title: '堆叠卡片', page: '/normal/DemoStackCard', complete: true },
       { name: 'Collapse', title: '折叠面板', page: '/normal/DemoCollapse', complete: true },
       { name: 'Layout', title: '布局', page: '/normal/DemoLayout', complete: true },
       { name: 'Alert', title: '提示信息', page: '/normal/DemoAlert', complete: true },
@@ -135,7 +137,7 @@ export const MenuGroups: MenuGroup[] = [
       { name: '$file', title: '文件服务', page: '/service/DemoFileService', complete: true },
       // { name: '$popper', title: '浮层服务', page: '/service/DemoPopperService', complete: false },
       { name: '$popup', title: '弹出服务', page: '/service/DemoPopupService', complete: true },
-      // {name: '$image', title: '图片服务', page: '/service/image-service', complete: false},
+      { name: '$previewer', title: '预览服务', page: '/service/DemoImagePreviewer', complete: true },
     ]
   },
   {

package/src/packages/components/CarouselGroup/carousel.scss

@@ -1,143 +0,0 @@
-@include prefix(carousel-group) {
-  position: relative;
-
-  &:not(.carousel-vertical) {
-    overflow-x: hidden;
-  }
-
-  .#{componentName(carousel)}, .carousel-cover, .carousel-operator, .carousel-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-
-    &.carousel-cover, &.carousel-operator, &.carousel-indicator {
-      z-index: 99;
-    }
-  }
-
-  .#{componentName(carousel)} {
-    &.carousel-animating {
-      transition: transform ease 600ms;
-    }
-
-    pointer-events: auto;
-  }
-
-  .carousel-cover {
-    pointer-events: auto;
-  }
-
-  .carousel-operator {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-
-    .carousel-operator-btn {
-      transition: background-color 300ms linear;
-      cursor: pointer;
-      pointer-events: auto;
-      background-color: rgba(#000000, 0.2);
-      color: white;
-      width: 36px;
-      height: 36px;
-      border-radius: 36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-
-      &:hover:not(:active) {
-        background-color: rgba(#ffffff, 0.65);
-      }
-    }
-  }
-
-  .carousel-indicator {
-    top: initial;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    flex-wrap: nowrap;
-
-    .carousel-indicator-item {
-      pointer-events: auto;
-      width: 20px;
-      height: 2px;
-      background-color: plv(background-color);
-      opacity: 0.6;
-      transition: all 200ms linear;
-      cursor: pointer;
-
-      &:not(:last-child) {
-        margin-right: 8px;
-      }
-
-      &.carousel-indicator-item-active {
-        opacity: 1;
-        width: 30px;
-        height: 4px;
-      }
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &.carousel-vertical {
-    overflow-y: hidden;
-
-    .carousel-operator {
-      flex-direction: column;
-      padding: 20px;
-      align-items: flex-end;
-
-      .carousel-operator-btn:nth-child(1) {
-        transform: rotate(90deg);
-      }
-
-      .carousel-operator-btn:nth-child(2) {
-        transform: rotate(90deg);
-      }
-    }
-
-    .carousel-indicator {
-      flex-direction: column;
-      padding: 20px 36px;
-      left: initial;
-      top: 0;
-
-      .carousel-indicator-item {
-        height: 8px;
-        width: 2px;
-        margin-right: 0;
-
-        &.carousel-indicator-item-active {
-          height: 16px;
-          width: 4px;
-        }
-
-        &:not(:last-child) {
-          margin-bottom: 4px;
-        }
-      }
-    }
-  }
-
-  &.carousel-card {
-    .#{componentName(carousel)} {
-      right: initial;
-    }
-
-    .carousel-indicator {
-      .carousel-indicator-item {
-        background-color: rgba(black, 0.5);
-      }
-    }
-  }
-}

package/src/packages/components/CarouselGroup/index.tsx

@@ -1,274 +0,0 @@
-import {classnames, computed, designComponent, getComponentCls, onMounted, reactive, useClasses, useCollect, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {throttle} from "plain-utils/utils/throttle";
-import Icon from "../Icon";
-import {Carousel} from "../Carousel";
-import './carousel.scss';
-
-export const CarouselGroup = designComponent({
-  name: 'carousel-group',
-  props: {
-    modelValue: { type: [String, Number] },                       // 双向绑定值
-    height: { type: [Number, String], default: 225 },             // 轮播高度
-    autoplay: { type: Number, default: 3000 },                    // 自定播放时间，为0则取消自动播放
-    disabledOperator: { type: Boolean },                          // 禁用前后按钮
-    disabledIndicator: { type: Boolean },                         // 禁用指示器
-    indicatorTrigger: { type: String, default: 'click' },         // 指示器激活触发器：click。hover
-    vertical: { type: Boolean },                                  // 轮播方向为纵向
-    card: { type: Boolean },                                      // 卡片形式的切换
-    cardScale: { type: Number, default: 0.64 },                   // 卡片形式轮播的时候，缩小比例
-  },
-  inheritPropsType: HTMLDivElement,
-  scopeSlots: {
-    indicator: (scope: { val: string, index: number, active: boolean }) => {},
-  },
-  slots: ['cover', 'default'],
-  emits: {
-    onUpdateModelValue: (val: string | number | undefined | null) => true,
-  },
-  setup({ props, slots, scopeSlots, event: { emit } }) {
-
-    /*子元素*/
-    const items = CarouselCollector.parent();
-
-    const { refs, onRef } = useRefs({
-      el: HTMLDivElement
-    });
-    const state = reactive({
-      width: 0,                                                   // 容器宽度
-      height: 0,                                                  // 容器高度
-      autoplayTimer: null as null | number,                       // 自动播放定时器
-      prevActiveIndex: null as null | number,                     // 上一个激活的index，当元素个数为3时，需要通过这个属性优化动画
-    });
-
-    /*双向绑定值*/
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-    /*子元素val数组*/
-    const vals = computed(() => items.map(item => String(item.itemVal)!));
-    /*当前激活的元素的val值*/
-    const activeVal = computed(() => {
-      if (vals.value.length === 0) {
-        return null;
-      }
-      if (model.value != null) {
-        return String(model.value);
-      } else {
-        return vals.value[0];
-      }
-    });
-    /*当前激活的元素的val的在 数组中的索引*/
-    const activeIndex = computed(() => {
-      if (!activeVal.value) {
-        return 0;
-      }
-      return vals.value.indexOf(activeVal.value);
-    });
-
-    /*实际渲染的，排序过的val数组*/
-    const sortVals = computed(() => {
-      const valArray = vals.value;
-      let prev = valArray.slice(0, activeIndex.value);
-      let next = valArray.slice(activeIndex.value + 1);
-
-      if (Math.abs(prev.length - next.length) > 1) {
-        if (prev.length > next.length) {
-          while (prev.length - next.length > 1) {
-            next.push(prev.shift()!);
-          }
-        } else {
-          while (next.length - prev.length > 1) {
-            prev.unshift(next.pop()!);
-          }
-        }
-      }
-      return [...prev, activeVal.value, ...next];
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('carousel-group'),
-      {
-        'carousel-vertical': props.vertical,
-        'carousel-card': props.card,
-      }
-    ]);
-    const styles = useStyles(style => {
-      style.height = unit(props.height);
-    });
-
-    const utils = {
-      /**
-       * 子元素的左偏移位置
-       * @author  韦胜健
-       * @date    2020/11/22 23:19
-       */
-      getItemStyles: (val: any) => {
-        if (!state.width) {
-          return null;
-        }
-        /*当前val在sortVals中的索引*/
-        const sortIndex = sortVals.value.indexOf(String(val));
-        /*激活val在sortVals中的索引*/
-        const activeSortIndex = sortVals.value.indexOf(String(activeVal.value));
-
-        /*当前val与激活val在sortVal的间距*/
-        let duration = sortIndex - activeSortIndex;
-
-        const style = {
-          zIndex: sortVals.value.length - Math.abs(duration),
-        } as any;
-
-        if (!props.vertical) {
-          if (!props.card) {
-            /*非卡片形式的轮播*/
-            style.transform = `translateX(${duration * state.width}px)`;
-          } else {
-            style.width = `${props.cardScale * 100}%`;
-            style.height = `${props.cardScale * 100}%`;
-
-            /*卡片轮播*/
-            let left = duration * state.width * (props.cardScale) + (state.width * (1 - props.cardScale) / 2);
-            left += (sortIndex > activeSortIndex ? -1 : 1) * Math.abs(sortIndex - activeSortIndex) * state.width * 0.125;
-            style.transform = `translateX(${left}px) translateY(${state.height * ((1 - props.cardScale) / 2)}px) scale(${sortIndex === activeSortIndex ? '1' : '0.83'})`;
-          }
-        } else {
-          /*纵向非卡片形式的轮播*/
-          style.transform = `translateY(${duration * state.height}px)`;
-        }
-
-        return style;
-      },
-      /**
-       * 重置自动播放定时器
-       * @author  韦胜健
-       * @date    2020/11/22 23:19
-       */
-      resetAutoplayTimer: (autoplay: number | null) => {
-        /*无论怎么样都要清理掉定时器*/
-        if (!!state.autoplayTimer) {
-          clearInterval(state.autoplayTimer);
-          state.autoplayTimer = null;
-        }
-        /*如果autoplay有值，重新设定一个自动播放定时器*/
-        if (!!autoplay) {
-          state.autoplayTimer = setInterval(methods.next, autoplay) as any as number;
-        }
-      },
-      /**
-       * 子元素是否需要动画（当元素为3时，只有prevActiveIndex以及activeIndex的元素需要动画，另一个需要立刻移动到对应的位置）
-       * @author  韦胜健
-       * @date    2020/11/22 23:20
-       */
-      isAnimating: (val: any) => {
-        if (vals.value.length !== 3 && !props.card) {
-          return true;
-        }
-        let index = vals.value.indexOf(val);
-        return index === state.prevActiveIndex || index === activeIndex.value;
-      },
-    };
-
-    const methods = {
-      /**
-       * 显示上一个元素
-       * @author  韦胜健
-       * @date    2020/11/22 23:21
-       */
-      prev: () => {
-        state.prevActiveIndex = activeIndex.value;
-        model.value = sortVals.value[sortVals.value.indexOf(activeVal.value) - 1]!;
-      },
-      /**
-       * 显示下一个元素
-       * @author  韦胜健
-       * @date    2020/11/22 23:21
-       */
-      next: () => {
-        state.prevActiveIndex = activeIndex.value;
-        model.value = sortVals.value[sortVals.value.indexOf(activeVal.value) + 1]!;
-      },
-      /**
-       * 显示特定元素
-       * @author  韦胜健
-       * @date    2020/11/22 23:21
-       */
-      show: (val: any) => {
-        state.prevActiveIndex = activeIndex.value;
-        model.value = val;
-
-        utils.resetAutoplayTimer(props.autoplay);
-      },
-    };
-
-    const handler = {
-      onPrev: throttle(() => {
-        utils.resetAutoplayTimer(props.autoplay);
-        methods.prev();
-      }, 500, { trailing: true, leading: true }),
-      onNext: throttle(() => {
-        utils.resetAutoplayTimer(props.autoplay);
-        methods.next();
-      }, 500, { trailing: true, leading: true }),
-      onIndicator: (index: number) => {
-        methods.show(vals.value[index]);
-      },
-    };
-
-    onMounted(() => {
-      state.width = refs.el!.offsetWidth;
-      state.height = refs.el!.offsetHeight;
-    });
-
-    watch(() => props.autoplay, utils.resetAutoplayTimer, { immediate: true });
-
-    return {
-      refer: {
-        refs,
-        utils,
-        methods,
-      },
-      render: () => (
-        <div className={classes.value} style={styles.value} ref={onRef.el}>
-          {slots.default()}
-          {slots.cover.isExist() && <div className="carousel-cover">
-            {slots.cover()}
-          </div>}
-
-          {!props.disabledOperator && <div className="carousel-operator">
-            <div className="carousel-operator-btn carousel-operator-prev" onClick={handler.onPrev}>
-              <Icon icon="pi-left"/>
-            </div>
-            <div className="carousel-operator-btn carousel-operator-next" onClick={handler.onNext}>
-              <Icon icon="pi-right"/>
-            </div>
-          </div>}
-
-          {!props.disabledIndicator && <div className="carousel-indicator">
-            {items.map((item, index) => (
-              scopeSlots.indicator({ val: String(item.itemVal), index, active: index === activeIndex.value }, (
-                <div
-                  {...{
-                    [props.indicatorTrigger === 'hover' ? 'onMouseEnter' : 'onClick']: () => handler.onIndicator(index)
-                  }}
-                  className={classnames(
-                    [
-                      'carousel-indicator-item',
-                      {
-                        'carousel-indicator-item-active': index === activeIndex.value,
-                      }
-                    ]
-                  )} key={index}/>
-              ))
-            ))}
-          </div>}
-        </div>
-      )
-    };
-  },
-});
-
-export default CarouselGroup;
-
-export const CarouselCollector = useCollect(() => ({
-  parent: CarouselGroup,
-  child: Carousel,
-}));