plain-design 1.0.0-beta.4 → 1.0.0-beta.40

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

@@ -1,18 +1,31 @@
-import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
+import {computed, createCounter, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
 import {delay} from "plain-utils/utils/delay";
 import './virtual-list.scss';
 import Scroll from "../Scroll";
 import {unit} from "plain-utils/string/unit";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {PlainObject} from "plain-utils/utils/event";
 
 interface DataNode {
-  top: number;
-  bottom: number;
-  height: number;
-
-  data: any;
-  index: number;
+  start: number;
+  end: number;
+  size: number;
+  item: any;
+  id: string;
+  index: number,
 }
 
+/**
+ * 滚动的方向
+ * 纵向：start表示往上滚动，end表示往下滚动
+ * 横向：start表示往左滚动，end表示往右滚动
+ * @author  韦胜健
+ * @date    2024/1/10 14:37
+ */
+const ScrollDirection = createEnum(['start', 'end', 'none'] as const);
+
+const nextRowId = createCounter('__v__');
+
 export function useVirtualList(
   {
     props,
@@ -25,7 +38,12 @@ export function useVirtualList(
       size: number,
       disabled?: boolean,
       dynamicSize?: boolean,
+      /*纵向虚拟滚动，需要横向滚动的时候必须指定宽度*/
       width?: string | number,
+      /*横向虚拟滚动，需要纵向滚动的时候必须指定高度*/
+      height?: string | number,
+      /*启用横向虚拟滚动*/
+      horizontal?: boolean,
     },
     refs: {
       scroll?: typeof Scroll.use.class | null,
@@ -33,7 +51,7 @@ export function useVirtualList(
     },
     emit: {
       onScroll: (e: Event) => void,
-      onPageIndexChange: (data: { pageIndex: number, start: number }) => void,
+      onPageIndexChange: (data: { pageIndex: number, startIndex: number, endIndex: number }) => void,
     },
     transform?: boolean,
   }
@@ -41,18 +59,39 @@ export function useVirtualList(
 
   /*非响应式属性*/
   const freezeState = {
-    scrollTop: 0,                               // 实时的scrollTop值
-    current: {                                  // 当前的页面信息
+    scrollValue: 0,                               // 实时的scrollTop值
+    current: {                                    // 当前的页面信息
       pageIndex: 0,
-      start: 0,
-      end: 0,
+      startIndex: 0,
+      endIndex: 0,
     },
   };
   /*响应式属性*/
   const state = reactive({
-    nodes: [] as DataNode[],                    // 格式化的data数组数据
-    scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
+    scrollValue: 0,                               // 当前滚动scrollTop（非实时的）
     pageSize: 0,                                // 页大小
+    scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
+    id2size: {} as Record<string, number | undefined>,
+    avgSize: props.size
+  });
+
+  const idMap = new WeakMap<PlainObject, string>();
+  let prevEnd = 0;
+
+  const nodes = computed(() => {
+    prevEnd = 0;
+    return props.data.map((item, index): DataNode => {
+      let id = idMap.get(item);
+      if (!id) {
+        id = nextRowId();
+        idMap.set(item, id);
+      }
+      const size: number = state.id2size[id] || state.avgSize;
+      let start = prevEnd;
+      let end = start + size;
+      prevEnd = end;
+      return { id: id!, item, size, start, end, index };
+    });
   });
 
   /**
@@ -60,24 +99,23 @@ export function useVirtualList(
    * @author  韦胜健
    * @date    2020/11/15 9:28
    */
-  const offsetData = computed((): { list: { item: any, index: number }[], startPageIndex: number, start: number } => {
-    const { pageSize, scrollTop } = state;
-    const data = props.data || [];
+  const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, startIndex: number } => {
+    const { pageSize, scrollValue } = state;
     if (!pageSize) {
-      return { list: [], startPageIndex: 0, start: 0 };
+      return { list: [], startPageIndex: 0, startIndex: 0 };
     }
     if (props.disabled) {
       return {
-        list: data.map((item, index) => ({ item, index })),
-        start: 0,
+        list: nodes.value,
+        startIndex: 0,
         startPageIndex: 0,
       };
     }
-    const { start, end, pageIndex } = utils.getPageIndex(scrollTop, pageSize);
+    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue, pageSize);
     return {
-      list: data.map((item, index) => ({ item, index })).slice(start, end),
+      list: nodes.value.slice(startIndex, endIndex),
       startPageIndex: pageIndex,
-      start,
+      startIndex,
     };
   });
 
@@ -90,7 +128,10 @@ export function useVirtualList(
    */
   const classes = useClasses(() => [
     getComponentCls('virtual-list'),
-    { 'virtual-list-disabled': props.disabled, }
+    {
+      'virtual-list-disabled': props.disabled,
+      'virtual-list-horizontal': props.horizontal,
+    },
   ]);
 
   /**
@@ -105,14 +146,28 @@ export function useVirtualList(
     if (props.disabled) {
       return;
     }
-    if (!!props.width) {
-      style.width = unit(props.width);
-      style.minWidth = '100%';
-    }
-    if (!props.dynamicSize) {
-      style.height = `${(props.data || []).length * props.size}px`;
+    if (!props.horizontal) {
+      /*纵向*/
+      if (!!props.width) {
+        style.width = unit(props.width);
+        style.minWidth = '100%';
+      }
+      if (!props.dynamicSize) {
+        style.height = `${(props.data || []).length * props.size}px`;
+      } else {
+        style.height = `${nodes.value[nodes.value.length - 1].end}px`;
+      }
     } else {
-      style.height = `${state.nodes[state.nodes.length - 1].bottom}px`;
+      /*横向*/
+      if (!!props.height) {
+        style.height = unit(props.height);
+        style.minHeight = '100%';
+      }
+      if (!props.dynamicSize) {
+        style.width = `${(props.data || []).length * props.size}px`;
+      } else {
+        style.width = `${nodes.value[nodes.value.length - 1].end}px`;
+      }
     }
   });
 
@@ -130,21 +185,33 @@ export function useVirtualList(
       return;
     }
 
-    const { start } = offsetData.value;
+    const { startIndex } = offsetData.value;
 
-    let top;
+    let start;
     if (!props.dynamicSize) {
-      top = start * props.size;
+      start = startIndex * props.size;
     } else {
-      top = state.nodes[start].top;
+      start = nodes.value[startIndex].start;
     }
 
-    if (transform !== false) {
-      /*transform定位*/
-      style.transform = `translateY(${top}px)`;
+    if (!props.horizontal) {
+      /*纵向定位*/
+      if (transform !== false) {
+        /*transform定位*/
+        style.transform = `translateY(${start}px)`;
+      } else {
+        /*top定位*/
+        style.top = `${start}px`;
+      }
     } else {
-      /*top定位*/
-      style.top = `${top}px`;
+      /*横向定位*/
+      if (transform !== false) {
+        /*transform定位*/
+        style.transform = `translateX(${start}px)`;
+      } else {
+        /*top定位*/
+        style.left = `${start}px`;
+      }
     }
   });
 
@@ -156,23 +223,23 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/11/15 9:29
      */
-    getIndex: (top: number) => {
+    getIndex: (scrollValue: number) => {
       if (!props.dynamicSize) {
         // console.log('not dynamic》》》getIndex', top / props.size)
-        return Math.floor(top / props.size);
+        return Math.floor(scrollValue / props.size);
       } else {
-        const { nodes } = state;
+        const _nodes = nodes.value;
         let start = 0;
-        let end = nodes.length - 1;
+        let end = _nodes.length - 1;
         let temp = 0;
         while (start <= end) {
           let middle = Math.floor((start + end) / 2);
-          let middleBottom = nodes[middle].bottom;
-          if (middleBottom === top) {
+          let middleBottom = _nodes[middle].end;
+          if (middleBottom === scrollValue) {
             return middle + 1;
-          } else if (middleBottom < top) {
+          } else if (middleBottom < scrollValue) {
             start = middle + 1;
-          } else if (middleBottom > top) {
+          } else if (middleBottom > scrollValue) {
             if (!temp || temp > middle) {
               temp = middle;
             }
@@ -188,50 +255,55 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/12/14 22:44
      */
-    getPageIndex: (scrollTop: number, pageSize: number) => {
+    getPageIndex: (scrollValue: number, pageSize: number) => {
+      if (scrollValue < 0) {
+        scrollValue = 0;
+      }
       const data = props.data || [];
       /*当前scrollTop对应的数据中数据的索引*/
-      let scrollIndex = utils.getIndex(scrollTop);
+      let scrollIndex = utils.getIndex(scrollValue);
       let pageIndex = Math.floor(scrollIndex / pageSize);
-      let start = pageIndex === 0 ? 0 : (pageIndex - 1) * pageSize;
-      let end = start + pageSize * 3;
+      let startIndex = (() => {
+        if (state.scrollDirection === 'none') {
+          return scrollIndex - Math.floor(pageSize * 0.5);
+        } else if (state.scrollDirection === ScrollDirection.start) {
+          /*这里多减去2，避免出现空白的间隙*/
+          return scrollIndex - (pageSize - 2);
+        } else {
+          return scrollIndex;
+        }
+      })();
+      let endIndex = startIndex + pageSize * 2;
+      startIndex -= 1;
+      endIndex += 1;
+      if (startIndex < 0) {
+        endIndex -= startIndex;
+        startIndex = 0;
+      }
       /*console.log({
-          scrollIndex,
-          pageIndex,
-          start,
-          end,
-      })*/
-      const exceed = end - data.length;
+        scrollIndex,
+        pageIndex,
+        start,
+        end,
+        pageSize,
+        scrollDirection: state.scrollDirection
+      });*/
+      const exceed = endIndex - data.length;
       if (exceed > 0) {
-        end = data.length;
-        start -= exceed;
-        if (start < 0) {
-          start = 0;
+        endIndex = data.length;
+        startIndex -= exceed;
+        if (startIndex < 0) {
+          startIndex = 0;
         }
       }
-      pageIndex = Math.floor(start / pageSize);
+      pageIndex = Math.floor(startIndex / pageSize);
       return {
         data,
-        start,
-        end,
+        startIndex,
+        endIndex,
         pageIndex,
       };
     },
-    /**
-     * 格式化props.data为 DataNode数组
-     * @author  韦胜健
-     * @date    2020/11/15 9:29
-     */
-    resetData: (data: any[]) => {
-      // console.log('resetData')
-      state.nodes = data.map((item, index) => ({
-        data: item,
-        index,
-        top: props.size * index,
-        height: props.size,
-        bottom: props.size * (index + 1),
-      }));
-    }
   };
 
   /*---------------------------------------handler-------------------------------------------*/
@@ -242,13 +314,13 @@ export function useVirtualList(
       if (props.disabled) {
         return;
       }
-      freezeState.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      const newScrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
+      state.scrollDirection = newScrollValue > freezeState.scrollValue ? ScrollDirection.end : ScrollDirection.start;
+      freezeState.scrollValue = newScrollValue;
       const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, state.pageSize);
-      if (freezeState.current.pageIndex != current.pageIndex || freezeState.current.start != current.start) {
-        state.scrollTop = (e.target as HTMLDivElement).scrollTop;
-        freezeState.current = current;
-        emit.onPageIndexChange(current);
-      }
+      state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
+      freezeState.current = current;
+      emit.onPageIndexChange(current);
     }
   };
 
@@ -259,17 +331,22 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       return;
     }
-    !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
-    /*如果是动态高度，则刷state.nodes*/
-    utils.resetData(data);
+    // !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
   });
 
-  onMounted(() => {
-    const hostHeight = refs.scroll!.refs.host!.offsetHeight;
-    state.pageSize = Math.ceil(hostHeight / props.size);
-    if (props.dynamicSize && !props.disabled) {
-      utils.resetData(props.data);
+  onMounted(async () => {
+    await delay(23);
+    let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+    const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
+    const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
+    if (!!headEl) {
+      hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+    }
+    if (!!footEl) {
+      hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
+
+    state.pageSize = Math.floor(hostSize / props.size);
   });
 
   onUpdated(async () => {
@@ -281,27 +358,25 @@ export function useVirtualList(
     }
     await delay();
     // console.log('dynamic scan height')
-    const elNodes = (Array.from(refs.content!.childNodes || []) as HTMLElement[]).filter(node => node.nodeType !== 3);
+    const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
+    let newAvgSize = state.avgSize;
+
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
-      const { offsetHeight: height } = el;
+      const size = el[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
       let vid = el.getAttribute('vid') || el.getAttribute('data-vid') as null | number | string;
       if (vid == null) {
         throw new Error('Each item of the virtual-list must have an attribute named "vid", please set :vid="index" or :data-vid="index"');
       }
-      vid = Number(vid);
-      const prevNode = state.nodes[vid];
-      const prevHeight = prevNode.height;
-      let deltaHeight = prevHeight - height;
-      if (deltaHeight !== 0) {
-        prevNode.height = height;
-        prevNode.bottom = prevNode.bottom - deltaHeight;
-        for (let j = vid + 1; j < state.nodes!.length; j++) {
-          state.nodes![j].top = state.nodes![j - 1].bottom;
-          state.nodes![j].bottom = state.nodes![j].bottom - deltaHeight;
-        }
+      if (state.id2size[vid] != size) {
+        state.id2size[vid] = size;
+        newAvgSize = Number(((state.avgSize + size) / 2).toFixed(0));
       }
     }
+
+    if (newAvgSize != state.avgSize) {
+      state.avgSize = newAvgSize;
+    }
   });
 
   return {

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

@@ -1,23 +1,6 @@
-@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;
@@ -32,4 +15,35 @@
       }
     }
   }
+
+  &: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

@@ -25,11 +25,11 @@ export const VirtualTable = designComponent({
   inheritPropsType: HTMLDivElement,
   emits: {
     onScroll: (e: Event) => true,
-    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
+    onPageIndexChange: (data: { pageIndex: number, startIndex: number }) => true,
   },
   slots: ['colgroup', 'head', 'headColgroup'],
   scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    default: (scope: { item: any, index: number, vIndex: number, vid: string }) => {},
   },
   setup({ props, slots, scopeSlots, event: { emit } }) {
 
@@ -70,7 +70,7 @@ export const VirtualTable = designComponent({
     const strutStyles = useStyles(style => {
       Object.assign(style, virtual.strutStyles.value);
       !!props.width && (style.width = unit(props.width));
-      style.minHeight = bodyTableWrapperStyles.value.minHeight
+      style.minHeight = bodyTableWrapperStyles.value.minHeight;
     });
 
     const contentStyles = useStyles(style => {
@@ -157,7 +157,7 @@ export const VirtualTable = designComponent({
                   <>
                     {!!headHeight.value && (
                       <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
-                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
+                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs} data-virtual-head>
                           {slots.headColgroup()}
                           <thead>{slots.head()}</thead>
                         </table>
@@ -168,16 +168,16 @@ export const VirtualTable = designComponent({
                         <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>
+                            <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}>
+                        <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, virtualIndex: index }))}</tbody>
+                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, vIndex: index, vid: `__smy__${index}` }))}</tbody>
                         </table>
                       </div>
                     )}

package/src/packages/components/VirtualTable/virtual-table.scss

@@ -93,10 +93,9 @@ $scrollbarSize: 12px;
       }
 
       &.plt-row-checked {
-        border-bottom-color: plv(primary-light-2);
-
         td {
           background-color: plv(primary-light-1);
+          border-bottom-color: plv(primary-light-2);
         }
       }
     }

package/src/packages/components/createProvider/index.ts

@@ -0,0 +1,5 @@
+import {createProvider} from "../../utils/createProvider";
+
+export {createProvider};
+
+export default createProvider;

package/src/packages/components/nextPopupId/index.ts

@@ -0,0 +1,5 @@
+import {nextPopupId} from "../usePopup/utils/popup.utils";
+
+export default nextPopupId;
+
+export {nextPopupId};

package/src/packages/components/useDialog/DialogService.tsx

@@ -10,6 +10,7 @@ import Icon from "../Icon";
 import {ThemeStatusIcons} from "../Application/theme/theme.utils";
 import Input from "../Input";
 import InputNumber from "../InputNumber";
+import $message from "../$message";
 
 /**
  * 弹框服务单个组件
@@ -133,7 +134,15 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
         const dialogProps = { ...targetOption.value.dialogProps };
 
         /*wrap handleConfirm*/
-        dialogProps.handleConfirm = async (close: () => void) => targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        dialogProps.handleConfirm = async (close: () => void) => {
+          if (!!targetOption.value.customOption.editRequired) {
+            if (state.editValue == null || !state.editValue.trim().length) {
+              $message.warn('不能为空！');
+              return false;
+            }
+          }
+          return targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        };
 
         /*wrap onClose*/
         dialogProps.onClose = () => onClose.exec(undefined);
@@ -165,6 +174,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -176,6 +186,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -189,6 +200,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;

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

@@ -15,7 +15,7 @@ export const useDialog = createApplicationService(
     const service = (sourceOption: string | iDialogServiceOption, externalOption?: iDialogServiceOption): () => void => {
       const option = formatOptions(sourceOption, externalOption);
       !option.id && (option.id = nextDialogId());
-      option.minWidth !== null && (option.minWidth = '325px');
+      option.minWidth === null && (option.minWidth = '325px');
 
       getManager().then(async manager => {await manager.service(option);});
 

package/src/packages/components/useImage/ImageService.tsx

@@ -8,6 +8,7 @@ import {Icon} from "../Icon";
 import i18n from "../i18n";
 import Transition from "../Transition";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
+import {ClientZoom} from "../ClientZoom";
 
 const nextCount = createCounter("image_preview");
 
@@ -167,18 +168,20 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         startY: 0,
       };
       const mousedown = (e: MouseEvent) => {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
         freezeState = {
           startTop: state.adjust.top || 0,
           startLeft: state.adjust.left || 0,
-          startX: e.clientX,
-          startY: e.clientY,
+          startX: clientX,
+          startY: clientY,
         };
         document.addEventListener('mousemove', mousemove);
         document.addEventListener('mouseup', mouseup);
       };
       const mousemove = (e: MouseEvent) => {
-        state.adjust.left = e.clientX - freezeState.startX + freezeState.startLeft;
-        state.adjust.top = e.clientY - freezeState.startY + freezeState.startTop;
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        state.adjust.left = clientX - freezeState.startX + freezeState.startLeft;
+        state.adjust.top = clientY - freezeState.startY + freezeState.startTop;
       };
       const mouseup = (e: MouseEvent) => {
         document.removeEventListener('mousemove', mousemove);