plain-design 1.0.0-beta.7 → 1.0.0-beta.70

package/src/packages/components/VirtualList/virtual-list.scss

@@ -1,35 +1,49 @@
-@include comp(virtual-table) {
-  @include comp(virtual-list) {
-    & > .scroll-wrapper {
-      & > .scroll-content {
-        overflow-y: unset;
-      }
-    }
-  }
-}
-
-@include comp(virtual-list) {
-  position: relative;
-
-  & > .scroll-wrapper {
-    & > .scroll-content {
-      overflow-y: hidden;
-      min-width: 100%;
-    }
-  }
-
-  &:not(.virtual-list-disabled) {
-    .virtual-list-strut {
-      position: relative;
-      //overflow: hidden;
-
-      .virtual-list-content {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        //overflow: hidden;
-      }
-    }
-  }
-}
+@include comp(virtual-list) {
+  position: relative;
+
+  &:not(.virtual-list-disabled) {
+    .virtual-list-strut {
+      position: relative;
+      //overflow: hidden;
+
+      .virtual-list-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        //overflow: hidden;
+      }
+    }
+  }
+
+  &:not(.virtual-list-horizontal) {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-y: hidden;
+        min-width: 100%;
+      }
+    }
+  }
+
+  &.virtual-list-horizontal {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-x: hidden;
+        min-height: 100%;
+      }
+    }
+  }
+}
+
+
+@include comp(virtual-table) {
+  @include comp(virtual-list) {
+    &.virtual-list-horizontal, &:not(.virtual-list-horizontal) {
+      & > .scroll-wrapper {
+        & > .scroll-content {
+          overflow-y: unset;
+        }
+      }
+    }
+  }
+}

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

@@ -1,201 +1,201 @@
-import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
-import {Scroll} from "../Scroll";
-import {useVirtualList} from "../VirtualList/useVirtualList";
-import {unit} from "plain-utils/string/unit";
-import './virtual-table.scss';
-import i18n from "../i18n";
-import {doNothing} from "../../utils/doNothing";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-
-export const VirtualTable = designComponent({
-  name: 'virtual-table',
-  props: {
-    data: { type: Array as PropType<PlainObject[]>, require: true, default: [] },// 要渲染的长数据
-    headData: { type: Array as PropType<PlainObject[][]> },       // 表头数据
-    size: { type: Number, require: true, default: 40 },           // 每一行高度
-    headSize: { type: Number, require: true, default: 40 },       // 表头高度
-    dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
-    disabled: { type: Boolean },                                  // 禁用虚拟滚动
-    summaryData: { type: Array as PropType<PlainObject[]> },      // 合计行数据
-    width: { type: Number },                                      // 宽度
-    height: { type: Number },                                     // 高度
-    showRows: { type: Number },                                   // 显示的行数，用来控制bodyTableWrapper的最小高度
-  },
-  inheritPropsType: HTMLDivElement,
-  emits: {
-    onScroll: (e: Event) => true,
-    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
-  },
-  slots: ['colgroup', 'head', 'headColgroup'],
-  scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
-  },
-  setup({ props, slots, scopeSlots, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({
-      scroll: Scroll,
-      content: HTMLDivElement,
-      body: HTMLDivElement,
-      summary: HTMLDivElement,
-      head: HTMLDivElement,
-    });
-
-    const headHeight = computed(() => {
-      if (!props.headData || props.headData.length === 0) {return null;}
-      return props.headData.length * props.headSize;
-    });
-
-    /*虚拟滚动时让出顶部距离显示表头*/
-    const { virtual } = useVirtualList({ props, refs: refs as any, emit, transform: false });
-
-    /*---------------------------------------computed-------------------------------------------*/
-    const styles = useStyles(style => {
-      style.height = unit(props.height);
-    });
-    const tableStyles = useStyles((style) => {
-      !!props.width && (style.width = unit(props.width));
-    });
-
-    const summaryTableStyles = useStyles((styles) => {
-      Object.assign(styles, tableStyles.value);
-      styles.height = `${!props.summaryData ? 0 : props.summaryData.length * props.size}px`;
-    });
-
-    const headTableStyles = useStyles(styles => {
-      Object.assign(styles, tableStyles.value);
-      headHeight.value != null && (styles.height = `${headHeight.value}px`);
-    });
-
-    const strutStyles = useStyles(style => {
-      Object.assign(style, virtual.strutStyles.value);
-      !!props.width && (style.width = unit(props.width));
-      style.minHeight = bodyTableWrapperStyles.value.minHeight
-    });
-
-    const contentStyles = useStyles(style => {
-      Object.assign(style, virtual.contentStyles.value);
-      if (!props.disabled) {style.paddingBottom = (summaryTableStyles.value as any).height;}
-    });
-
-    const bodyTableWrapperStyles = useStyles(style => {
-      /**
-       * body wrapper给一个最小高度，避免数据不够时合集行数据没有固定在底部。如果不像要这个效果可以注释掉下面这段代码
-       * @author  韦胜健
-       * @date    2023.1.20 20:48
-       */
-      !!props.showRows && (style.minHeight = `${props.size * props.showRows}px`);
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls("scroll-table"),
-      getComponentCls('virtual-table'),
-      {
-        'virtual-table-has-summary': !!props.summaryData && props.summaryData.length > 0
-      }
-    ]);
-
-    const handler = {
-      onScroll: (e: any) => {
-        virtual.handler.onScroll(e);
-        !!refs.summary && (refs.summary.scrollLeft = e.target.scrollLeft);
-        !!refs.head && (refs.head.scrollLeft = e.target.scrollLeft);
-      },
-      onWheelBody: (e: WheelEvent) => {
-        if (e.altKey) {
-          e.preventDefault();
-          e.stopPropagation();
-          refs.scroll?.methods.scrollLeft(refs.scroll?.freezeState.wrapperScrollLeft + (e.deltaX + e.deltaY) * 3, 100);
-        }
-      },
-      onWheelHead: (e: WheelEvent) => {
-        refs.scroll?.methods.scrollLeft(refs.scroll?.freezeState.wrapperScrollLeft + (e.deltaX + e.deltaY) * 3, 100);
-        e.stopPropagation();
-        e.preventDefault();
-      },
-      /*onWheelSummary: (e: WheelEvent) => {
-        refs.scroll?.methods.scroll({
-          x: refs.scroll?.freezeState.wrapperScrollLeft + e.deltaX * 3,
-          y: refs.scroll?.freezeState.wrapperScrollTop + e.deltaY * 2
-        }, 100);
-        e.stopPropagation();
-        e.preventDefault();
-      },*/
-    };
-
-    useWatchAutoClear(() => !!refs.head, flag => {
-      if (!flag) {return doNothing;}
-      refs.head?.addEventListener('wheel', handler.onWheelHead);
-      return () => refs.head?.removeEventListener('wheel', handler.onWheelHead);
-    });
-
-    useWatchAutoClear(() => !!refs.body, flag => {
-      if (!flag) {return doNothing;}
-      refs.body?.addEventListener('wheel', handler.onWheelBody);
-      return () => refs.head?.removeEventListener('wheel', handler.onWheelBody);
-    });
-
-    return {
-      refer: {
-        refs
-      },
-      render: () => {
-        const { list } = virtual.offsetData.value;
-        return (
-          <div style={styles.value} className={classes.value}>
-            <Scroll
-              refreshState={props.width}
-              ref={onRef.scroll}
-              onScroll={handler.onScroll}
-              scrollX
-              className={virtual.classes.value}
-              horizontalScrollbarTooltip={i18n('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
-              disableTransitionWhenScroll={!props.disabled}
-            >
-              {{
-                default: () => (
-                  <>
-                    {!!headHeight.value && (
-                      <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
-                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
-                          {slots.headColgroup()}
-                          <thead>{slots.head()}</thead>
-                        </table>
-                      </div>
-                    )}
-                    <div className="virtual-list-strut" style={strutStyles.value}>
-                      <div className="virtual-list-content" ref={onRef.content} style={contentStyles.value}>
-                        <div className="virtual-table-body-table-wrapper" ref={onRef.body} style={bodyTableWrapperStyles.value}>
-                          <table className="virtual-table-body-table" {...{ ...PublicTableAttrs, style: tableStyles.value }}>
-                            {slots.colgroup()}
-                            <tbody>{list.map((node, virtualIndex) => scopeSlots.default({ ...node, virtualIndex }))}</tbody>
-                          </table>
-                        </div>
-                      </div>
-                    </div>
-                    {!!props.summaryData?.length && (
-                      <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
-                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs}>
-                          {slots.colgroup()}
-                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
-                        </table>
-                      </div>
-                    )}
-                  </>
-                ),
-              }}
-            </Scroll>
-          </div>
-        );
-      }
-    };
-  },
-});
-
-const PublicTableAttrs = {
-  cellPadding: 0,
-  cellSpacing: 0,
-  border: 0,
-};
-
-export default VirtualTable;
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {Scroll} from "../Scroll";
+import {useVirtualList} from "../VirtualList/useVirtualList";
+import {unit} from "plain-utils/string/unit";
+import './virtual-table.scss';
+import i18n from "../i18n";
+import {doNothing} from "../../utils/doNothing";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+
+export const VirtualTable = designComponent({
+  name: 'virtual-table',
+  props: {
+    data: { type: Array as PropType<PlainObject[]>, require: true, default: [] },// 要渲染的长数据
+    headData: { type: Array as PropType<PlainObject[][]> },       // 表头数据
+    size: { type: Number, require: true, default: 40 },           // 每一行高度
+    headSize: { type: Number, require: true, default: 40 },       // 表头高度
+    dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
+    disabled: { type: Boolean },                                  // 禁用虚拟滚动
+    summaryData: { type: Array as PropType<PlainObject[]> },      // 合计行数据
+    width: { type: Number },                                      // 宽度
+    height: { type: Number },                                     // 高度
+    showRows: { type: Number },                                   // 显示的行数，用来控制bodyTableWrapper的最小高度
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onScroll: (e: Event) => true,
+    onPageIndexChange: (data: { pageIndex: number, startIndex: number }) => true,
+  },
+  slots: ['colgroup', 'head', 'headColgroup'],
+  scopeSlots: {
+    default: (scope: { item: any, index: number, vIndex: number, vid: string }) => {},
+  },
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({
+      scroll: Scroll,
+      content: HTMLDivElement,
+      body: HTMLDivElement,
+      summary: HTMLDivElement,
+      head: HTMLDivElement,
+    });
+
+    const headHeight = computed(() => {
+      if (!props.headData || props.headData.length === 0) {return null;}
+      return props.headData.length * props.headSize;
+    });
+
+    /*虚拟滚动时让出顶部距离显示表头*/
+    const { virtual } = useVirtualList({ props, refs: refs as any, emit, transform: false });
+
+    /*---------------------------------------computed-------------------------------------------*/
+    const styles = useStyles(style => {
+      style.height = unit(props.height);
+    });
+    const tableStyles = useStyles((style) => {
+      !!props.width && (style.width = unit(props.width));
+    });
+
+    const summaryTableStyles = useStyles((styles) => {
+      Object.assign(styles, tableStyles.value);
+      styles.height = `${!props.summaryData ? 0 : props.summaryData.length * props.size}px`;
+    });
+
+    const headTableStyles = useStyles(styles => {
+      Object.assign(styles, tableStyles.value);
+      headHeight.value != null && (styles.height = `${headHeight.value}px`);
+    });
+
+    const strutStyles = useStyles(style => {
+      Object.assign(style, virtual.strutStyles.value);
+      !!props.width && (style.width = unit(props.width));
+      style.minHeight = bodyTableWrapperStyles.value.minHeight;
+    });
+
+    const contentStyles = useStyles(style => {
+      Object.assign(style, virtual.contentStyles.value);
+      if (!props.disabled) {style.paddingBottom = (summaryTableStyles.value as any).height;}
+    });
+
+    const bodyTableWrapperStyles = useStyles(style => {
+      /**
+       * body wrapper给一个最小高度，避免数据不够时合集行数据没有固定在底部。如果不像要这个效果可以注释掉下面这段代码
+       * @author  韦胜健
+       * @date    2023.1.20 20:48
+       */
+      !!props.showRows && (style.minHeight = `${props.size * props.showRows}px`);
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls("scroll-table"),
+      getComponentCls('virtual-table'),
+      {
+        'virtual-table-has-summary': !!props.summaryData && props.summaryData.length > 0
+      }
+    ]);
+
+    const handler = {
+      onScroll: (e: any) => {
+        virtual.handler.onScroll(e);
+        !!refs.summary && (refs.summary.scrollLeft = e.target.scrollLeft);
+        !!refs.head && (refs.head.scrollLeft = e.target.scrollLeft);
+      },
+      onWheelBody: (e: WheelEvent) => {
+        if (e.altKey) {
+          e.preventDefault();
+          e.stopPropagation();
+          refs.scroll?.methods.scrollLeft(refs.scroll?.freezeState.wrapperScrollLeft + (e.deltaX + e.deltaY) * 3, 100);
+        }
+      },
+      onWheelHead: (e: WheelEvent) => {
+        refs.scroll?.methods.scrollLeft(refs.scroll?.freezeState.wrapperScrollLeft + (e.deltaX + e.deltaY) * 3, 100);
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      /*onWheelSummary: (e: WheelEvent) => {
+        refs.scroll?.methods.scroll({
+          x: refs.scroll?.freezeState.wrapperScrollLeft + e.deltaX * 3,
+          y: refs.scroll?.freezeState.wrapperScrollTop + e.deltaY * 2
+        }, 100);
+        e.stopPropagation();
+        e.preventDefault();
+      },*/
+    };
+
+    useWatchAutoClear(() => !!refs.head, flag => {
+      if (!flag) {return doNothing;}
+      refs.head?.addEventListener('wheel', handler.onWheelHead);
+      return () => refs.head?.removeEventListener('wheel', handler.onWheelHead);
+    });
+
+    useWatchAutoClear(() => !!refs.body, flag => {
+      if (!flag) {return doNothing;}
+      refs.body?.addEventListener('wheel', handler.onWheelBody);
+      return () => refs.head?.removeEventListener('wheel', handler.onWheelBody);
+    });
+
+    return {
+      refer: {
+        refs
+      },
+      render: () => {
+        const { list } = virtual.offsetData.value;
+        return (
+          <div style={styles.value} className={classes.value}>
+            <Scroll
+              refreshState={props.width}
+              ref={onRef.scroll}
+              onScroll={handler.onScroll}
+              scrollX
+              className={virtual.classes.value}
+              horizontalScrollbarTooltip={i18n.$it('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
+              disableTransitionWhenScroll={!props.disabled}
+            >
+              {{
+                default: () => (
+                  <>
+                    {!!headHeight.value && (
+                      <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
+                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs} data-virtual-head>
+                          {slots.headColgroup()}
+                          <thead>{slots.head()}</thead>
+                        </table>
+                      </div>
+                    )}
+                    <div className="virtual-list-strut" style={strutStyles.value}>
+                      <div className="virtual-list-content" ref={onRef.content} style={contentStyles.value}>
+                        <div className="virtual-table-body-table-wrapper" ref={onRef.body} style={bodyTableWrapperStyles.value}>
+                          <table className="virtual-table-body-table" {...{ ...PublicTableAttrs, style: tableStyles.value }}>
+                            {slots.colgroup()}
+                            <tbody>{list.map((item, vIndex) => scopeSlots.default({ ...item, vIndex, vid: item.id }))}</tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+                    {!!props.summaryData?.length && (
+                      <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
+                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs} data-virtual-foot>
+                          {slots.colgroup()}
+                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, vIndex: index, vid: `__smy__${index}` }))}</tbody>
+                        </table>
+                      </div>
+                    )}
+                  </>
+                ),
+              }}
+            </Scroll>
+          </div>
+        );
+      }
+    };
+  },
+});
+
+const PublicTableAttrs = {
+  cellPadding: 0,
+  cellSpacing: 0,
+  border: 0,
+};
+
+export default VirtualTable;