plain-design 1.0.0-beta.5 → 1.0.0-beta.50

package/src/packages/components/Upload/upload.scss

@@ -1,185 +1,185 @@
-@include prefix(upload) {
-  .upload-item {
-    position: relative;
-
-    .upload-item-inner {
-      padding: 6px 9px;
-      font-size: 14px;
-      color: plv(text-2);
-      position: relative;
-      z-index: 2;
-      height: 100%;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-
-      & > .#{componentName(icon)}:first-child {
-        color: plv(text-2);
-      }
-
-      & > .#{componentName(icon)}, & > .#{componentName(loading)} {
-        margin-right: 4px;
-      }
-    }
-
-    .upload-item-progress {
-      position: absolute;
-      top: 2px;
-      bottom: 2px;
-      left: 2px;
-      right: 2px;
-      z-index: 1;
-
-      .upload-item-progress-inner {
-        transition: all 1s linear;
-        height: 100%;
-        background-color: plv(priamry-light-2);
-        border-top-right-radius: 100px;
-        border-bottom-right-radius: 100px;
-        z-index: -1;
-      }
-    }
-
-    .upload-item-content {
-      display: inline-block;
-    }
-
-    & + .upload-item {
-      margin-top: 8px;
-    }
-
-    &.upload-item-status-success {
-      .upload-item-inner {
-        &, & > .#{componentName(icon)} {
-          color: plv(primary-6);
-        }
-      }
-    }
-
-    &.upload-item-status-error {
-      .upload-item-inner {
-        &, & > .#{componentName(icon)} {
-          color: plv(error-6);
-        }
-      }
-    }
-
-    &.upload-item-status-ready {
-      .upload-item-inner {
-        &, & > .#{componentName(icon)} {
-          color: plv(warn-6);
-        }
-      }
-    }
-  }
-
-  &.upload-preview {
-    .upload-item {
-      .upload-item-content {
-        &:hover {
-          text-decoration: underline;
-          color: plv(primary-6);
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  &.upload-remove {
-    .upload-item {
-      .upload-item-inner {
-        padding-right: 32px;
-      }
-
-      .upload-item-remove {
-        width: 32px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: plv(text-2);
-        transition: all 300ms linear;
-
-        &:hover {
-          color: plv(primary-6);
-        }
-      }
-    }
-  }
-
-  &.upload-single {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    justify-content: center;
-
-    & > .#{componentName(button-group)}:first-child {
-      & > .#{componentName(button)}:last-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
-    .upload-item {
-      flex: 1;
-      border: solid 1px plv(border-color);
-      border-top-right-radius: 2px;
-      border-bottom-right-radius: 2px;
-    }
-
-    &:not(.upload-disabled) {
-      .upload-item {
-        border-left: none;
-      }
-    }
-  }
-
-  &.upload-multiple {
-    .upload-button {
-
-    }
-
-    .upload-list {
-      margin-top: 8px;
-
-      .upload-item {
-        border: dashed 1px plv(border-color);
-      }
-    }
-
-    .upload-drop-area {
-      display: flex;
-      flex-direction: column;
-      padding: 12px;
-      align-items: center;
-      justify-content: center;
-      border: dashed 1px plv(border-color);
-      cursor: pointer;
-
-      & > .#{componentName(icon)} {
-        font-size: 32px;
-        color: plv(primary-6);
-        margin-bottom: 8px;
-      }
-
-      .upload-drop-upload-button {
-        margin-left: 4px;
-      }
-    }
-
-    &.upload-disabled {
-      .upload-drop-area {
-        color: plv(text-2);
-        cursor: not-allowed;
-
-        & > .#{componentName(icon)} {
-          color: plv(text-2);
-        }
-      }
-    }
-  }
-}
+@include prefix(upload) {
+  .upload-item {
+    position: relative;
+
+    .upload-item-inner {
+      padding: 6px 9px;
+      font-size: 14px;
+      color: plv(text-2);
+      position: relative;
+      z-index: 2;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+
+      & > .#{componentName(icon)}:first-child {
+        color: plv(text-2);
+      }
+
+      & > .#{componentName(icon)}, & > .#{componentName(loading)} {
+        margin-right: 4px;
+      }
+    }
+
+    .upload-item-progress {
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      z-index: 1;
+
+      .upload-item-progress-inner {
+        transition: all 1s linear;
+        height: 100%;
+        background-color: plv(priamry-light-2);
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+        z-index: -1;
+      }
+    }
+
+    .upload-item-content {
+      display: inline-block;
+    }
+
+    & + .upload-item {
+      margin-top: 8px;
+    }
+
+    &.upload-item-status-success {
+      .upload-item-inner {
+        &, & > .#{componentName(icon)} {
+          color: plv(primary-6);
+        }
+      }
+    }
+
+    &.upload-item-status-error {
+      .upload-item-inner {
+        &, & > .#{componentName(icon)} {
+          color: plv(error-6);
+        }
+      }
+    }
+
+    &.upload-item-status-ready {
+      .upload-item-inner {
+        &, & > .#{componentName(icon)} {
+          color: plv(warn-6);
+        }
+      }
+    }
+  }
+
+  &.upload-preview {
+    .upload-item {
+      .upload-item-content {
+        &:hover {
+          text-decoration: underline;
+          color: plv(primary-6);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  &.upload-remove {
+    .upload-item {
+      .upload-item-inner {
+        padding-right: 32px;
+      }
+
+      .upload-item-remove {
+        width: 32px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: plv(text-2);
+        transition: all 300ms linear;
+
+        &:hover {
+          color: plv(primary-6);
+        }
+      }
+    }
+  }
+
+  &.upload-single {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+
+    & > .#{componentName(button-group)}:first-child {
+      & > .#{componentName(button)}:last-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    .upload-item {
+      flex: 1;
+      border: solid 1px plv(border-color);
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+
+    &:not(.upload-disabled) {
+      .upload-item {
+        border-left: none;
+      }
+    }
+  }
+
+  &.upload-multiple {
+    .upload-button {
+
+    }
+
+    .upload-list {
+      margin-top: 8px;
+
+      .upload-item {
+        border: dashed 1px plv(border-color);
+      }
+    }
+
+    .upload-drop-area {
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      align-items: center;
+      justify-content: center;
+      border: dashed 1px plv(border-color);
+      cursor: pointer;
+
+      & > .#{componentName(icon)} {
+        font-size: 32px;
+        color: plv(primary-6);
+        margin-bottom: 8px;
+      }
+
+      .upload-drop-upload-button {
+        margin-left: 4px;
+      }
+    }
+
+    &.upload-disabled {
+      .upload-drop-area {
+        color: plv(text-2);
+        cursor: not-allowed;
+
+        & > .#{componentName(icon)} {
+          color: plv(text-2);
+        }
+      }
+    }
+  }
+}

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

@@ -1,63 +1,72 @@
-import './virtual-list.scss';
-import {designComponent, useRefs} from "plain-design-composition";
-import Scroll from "../Scroll";
-import {useVirtualList} from "./useVirtualList";
-
-export const VirtualList = designComponent({
-  name: 'virtual-list',
-  inheritPropsType: Scroll,
-  props: {
-    data: { type: Array, require: true, default: [] },            // 要渲染的长数据
-    size: { type: Number, require: true, default: 40 },           // 每一行高度
-    dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
-    disabled: { type: Boolean },                                  // 禁用虚拟滚动
-    width: { type: [String, Number] },                            // 当需要横向滚动是，需要指定内容宽度
-  },
-  emits: {
-    onScroll: (e: Event) => true,
-    onRefScroll: (scroll: typeof Scroll.use.class | null) => true,
-    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
-  },
-  scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
-    content: (scope: { data: any[] }) => {},
-  },
-  setup({ props, scopeSlots, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({
-      scroll: Scroll,
-      content: HTMLDivElement,
-    });
-
-    const { virtual } = useVirtualList({ refs, props, emit, });
-
-    const onRefScroll = (scroll: typeof Scroll.use.class | null) => {
-      onRef.scroll(scroll);
-      emit.onRefScroll(scroll);
-    };
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => {
-        const { list } = virtual.offsetData.value;
-        return (
-          <Scroll scrollX={!!props.width} onScroll={virtual.handler.onScroll} ref={onRefScroll as any} className={virtual.classes.value} disableTransitionWhenScroll>
-            <div className="virtual-list-strut" style={virtual.strutStyles.value}>
-              <div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
-                {scopeSlots.content.isExist() ?
-                  scopeSlots.content({ data: list }, null) :
-                  list.map((node, virtualIndex) =>
-                    scopeSlots.default({ item: node.item, index: node.index, virtualIndex })
-                  )}
-              </div>
-            </div>
-          </Scroll>
-        );
-      }
-    };
-  },
-});
-
-export default VirtualList;
+import './virtual-list.scss';
+import {designComponent, useRefs} from "plain-design-composition";
+import Scroll from "../Scroll";
+import {useVirtualList} from "./useVirtualList";
+
+export const VirtualList = designComponent({
+  name: 'virtual-list',
+  inheritPropsType: Scroll,
+  props: {
+    data: { type: Array, require: true, default: [] },            // 要渲染的长数据
+    size: { type: Number, require: true, default: 40 },           // 每一行高度
+    dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
+    disabled: { type: Boolean },                                  // 禁用虚拟滚动
+    horizontal: { type: Boolean },                                // 启用横向虚拟滚动
+    width: { type: [String, Number] },                            // 纵向虚拟滚动需要横向滚动时，需要指定内容宽度
+    height: { type: [String, Number] },                           // 横向虚拟滚动需要纵向滚动时，需要指定内容高度
+  },
+  emits: {
+    onScroll: (e: Event) => true,
+    onRefScroll: (scroll: typeof Scroll.use.class | null) => true,
+    onPageIndexChange: (data: { pageIndex: number, startIndex: number, endIndex: number }) => true,
+  },
+  scopeSlots: {
+    default: (scope: { item: any, index: number, vid: string, vIndex: number }) => {},
+    content: (scope: { data: any[] }) => {},
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({
+      scroll: Scroll,
+      content: HTMLDivElement,
+    });
+
+    const { virtual } = useVirtualList({ refs, props, emit, });
+
+    const onRefScroll = (scroll: typeof Scroll.use.class | null) => {
+      onRef.scroll(scroll);
+      emit.onRefScroll(scroll);
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => {
+        const { list } = virtual.offsetData.value;
+        return (
+          <Scroll
+            scrollX={!!props.width || props.horizontal}
+            scrollY={!!props.height || !props.horizontal}
+            onScroll={virtual.handler.onScroll}
+            ref={onRefScroll as any}
+            className={virtual.classes.value}
+            disableTransitionWhenScroll
+          >
+            <div className="virtual-list-strut" style={virtual.strutStyles.value}>
+              <div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
+                {scopeSlots.content.isExist() ?
+                  scopeSlots.content({ data: list }, null) :
+                  list.map((node, vIndex) =>
+                    scopeSlots.default({ item: node.item, index: node.index, vid: node.id, vIndex })
+                  )}
+              </div>
+            </div>
+          </Scroll>
+        );
+      }
+    };
+  },
+});
+
+export default VirtualList;