plain-design 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -3,6 +3,7 @@ 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";
 
 interface DataNode {
   top: number;
@@ -13,6 +14,8 @@ interface DataNode {
   index: number;
 }
 
+const ScrollDirection = createEnum(['up', 'down', 'none'] as const);
+
 export function useVirtualList(
   {
     props,
@@ -53,6 +56,7 @@ export function useVirtualList(
     nodes: [] as DataNode[],                    // 格式化的data数组数据
     scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
     pageSize: 0,                                // 页大小
+    scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
   });
 
   /**
@@ -189,18 +193,37 @@ export function useVirtualList(
      * @date    2020/12/14 22:44
      */
     getPageIndex: (scrollTop: number, pageSize: number) => {
+      if (scrollTop < 0) {
+        scrollTop = 0;
+      }
       const data = props.data || [];
       /*当前scrollTop对应的数据中数据的索引*/
       let scrollIndex = utils.getIndex(scrollTop);
       let pageIndex = Math.floor(scrollIndex / pageSize);
-      let start = pageIndex === 0 ? 0 : (pageIndex - 1) * pageSize;
-      let end = start + pageSize * 3;
+      let start = (() => {
+        if (state.scrollDirection === 'none') {
+          return scrollIndex - Math.floor(pageSize * 0.5);
+        } else if (state.scrollDirection === 'up') {
+          return scrollIndex - pageSize;
+        } else {
+          return scrollIndex;
+        }
+      })();
+      let end = start + pageSize * 2;
+      start -= 1;
+      end += 1;
+      if (start < 0) {
+        end -= start;
+        start = 0;
+      }
       /*console.log({
-          scrollIndex,
-          pageIndex,
-          start,
-          end,
-      })*/
+        scrollIndex,
+        pageIndex,
+        start,
+        end,
+        pageSize,
+        scrollDirection: state.scrollDirection
+      });*/
       const exceed = end - data.length;
       if (exceed > 0) {
         end = data.length;
@@ -242,13 +265,13 @@ export function useVirtualList(
       if (props.disabled) {
         return;
       }
-      freezeState.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      const newScrollTop = (e.target as HTMLDivElement).scrollTop;
+      state.scrollDirection = newScrollTop > freezeState.scrollTop ? ScrollDirection.down : ScrollDirection.up;
+      freezeState.scrollTop = newScrollTop;
       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.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      freezeState.current = current;
+      emit.onPageIndexChange(current);
     }
   };
 
@@ -265,8 +288,17 @@ export function useVirtualList(
   });
 
   onMounted(() => {
-    const hostHeight = refs.scroll!.refs.host!.offsetHeight;
-    state.pageSize = Math.ceil(hostHeight / props.size);
+    let hostHeight = refs.scroll!.refs.host!.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) {
+      hostHeight -= headEl.offsetHeight;
+    }
+    if (!!footEl) {
+      hostHeight -= footEl.offsetHeight;
+    }
+
+    state.pageSize = Math.floor(hostHeight / props.size);
     if (props.dynamicSize && !props.disabled) {
       utils.resetData(props.data);
     }

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

@@ -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>
@@ -175,7 +175,7 @@ export const VirtualTable = designComponent({
                     </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>
                         </table>

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/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);

package/src/packages/components/useMessage/Message.tsx

@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, Pro
 import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
 import Icon from "../Icon";
 import './message.scss';
+import {useStyle} from "../../uses/useStyle";
 
 export const Message = designComponent({
   name: 'message-service',
@@ -16,9 +17,12 @@ export const Message = designComponent({
 
     onMounted(() => emit.onReady());
 
+    const { styleComputed } = useStyle();
+
     const classes = useClasses(() => [
       getComponentCls('message'),
-      `message-status-${props.option.status}`
+      `message-status-${props.option.status}`,
+      `message-size-${styleComputed.value.size}`
     ]);
     const styles = { zIndex: nextIndex() };
 

package/src/packages/components/useMessage/message.scss

@@ -142,4 +142,8 @@
       }
     }
   }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
 }

package/src/packages/components/usePopup/PopupItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
 import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {delay} from "plain-utils/utils/delay";
@@ -82,6 +82,7 @@ export const PopupItem = designComponent({
         'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
         [`popup-item-status-${state.option.status}`]: !!state.option.status,
         'popup-item-dark-app': application.value.theme.dark,
+        'popup-item-no-interactive': !state.option.interactive,
       }
     ]);
 
@@ -262,6 +263,14 @@ export const PopupItem = designComponent({
         };
         return check;
       })(),
+      /**
+       * 阻止点击popup的事件冒泡，如果有div包裹popup几点，在react中即使popup不是这个div的子节点也会导致事件冒泡到div上
+       * @author  韦胜健
+       * @date    2023/8/10 11:27
+       */
+      onClickPopup: (e: iMouseEvent) => {
+        e.stopPropagation();
+      },
     };
 
     onMounted(async () => {
@@ -369,6 +378,7 @@ export const PopupItem = designComponent({
           data-popup-show={String(state.isShow)}
           onTransitionEnd={handler.onTransitionend}
           style={styles.value}
+          onClick={handler.onClickPopup}
         >
           {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
           {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}

package/src/packages/components/usePopup/popup-item.scss

@@ -112,6 +112,10 @@
   &.popup-item-no-border {
     filter: none !important;
   }
+
+  &.popup-item-no-interactive {
+    pointer-events: none;
+  }
   /*---------------------------------------animation-------------------------------------------*/
 
   &.popup-item-animation-fade {

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

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

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

@@ -0,0 +1,5 @@
+import {usePopupTrigger} from '../usePopup/trigger/usePopupTrigger';
+
+export default usePopupTrigger;
+
+export {usePopupTrigger};

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

@@ -0,0 +1,5 @@
+import {useReferenceTrigger} from '../usePopup/trigger/useReferenceTrigger';
+
+export default useReferenceTrigger;
+
+export {useReferenceTrigger};

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

@@ -46,6 +46,8 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         if (option.overflow) {
           if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
             state.isOverflow = true;
+          } else {
+            state.isOverflow = false;
           }
         }
       },

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

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

package/src/packages/entry.tsx

@@ -1,4 +1,5 @@
 import {setComponentPrefix} from "plain-design-composition";
+import {createProvider} from "./utils/createProvider";
 
 export {Application} from "./components/Application";
 export type {iApplicationConfiguration} from './components/Application/utils/application.utils';
@@ -54,6 +55,7 @@ export {TabGroup} from './components/TabGroup';
 export {Tab} from './components/Tab';
 export {Tag} from './components/Tag';
 export {Tree} from './components/Tree';
+export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
 export {ColorPicker} from './components/ColorPicker';
 export {TimePicker} from './components/TimePicker';
 export {DatePicker} from './components/DatePicker';
@@ -85,9 +87,28 @@ export {CascadePanel} from './components/CascadePanel';
 export {usePopup} from './components/usePopup';
 export {Popup} from './components/Popup';
 export {createPopup} from './components/createPopup';
+export type {
+  iPopupAlign,
+  iPopupAnimation,
+  iPopupBoundary,
+  iPopupCustomOption,
+  iPopupDefaultOption,
+  iPopupDirection,
+  iPopupManager,
+  iPopupOption,
+  iPopupPlacement,
+  iPopupRects,
+  iPopupRefreshBuildParams,
+  iPopupRefreshParams,
+  iPopupRefs,
+  iPopupTrigger,
+  iPopupUseOption,
+} from './components/usePopup/utils/popup.utils';
 export {createScrollUtils} from './components/createScrollUtils';
 export {useAutoScrollUtils} from './components/useAutoScrollUtils';
 export {ClientZoom} from './components/ClientZoom';
+export {Layout} from './components/Layout';
+export {LayoutSection} from './components/LayoutSection';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -127,6 +148,11 @@ export type {iOvMeta} from './components/$ov/ov.utils';
 export {$configuration} from './components/$configuration';
 export {createAddressService} from './components/createAddressService';
 export {createHttp} from './components/createHttp';
+export type {
+  iHttpRequestConfig,
+  iPlainResponseDataType,
+  iHttpResponseDataType
+} from './components/createHttp/http.utils';
 
 export {Address} from './components/Address';
 export {AddressCascade} from './components/AddressCascade';
@@ -162,5 +188,13 @@ export type {
   iTableOptionCacheRegistryConfig,
   iTableOptionGetCacheParam
 } from './components/AutoTable/use/useTableOption.cache.utils';
+export {PageThemeUtils} from './components/PageThemeUtils';
+export {ThemePrimaryColors} from './components/ThemePrimaryColors';
+export {useReferenceTrigger} from './components/useReferenceTrigger';
+export {usePopupTrigger} from './components/usePopupTrigger';
+export {useWatchAutoClear} from './components/useWatchAutoClear';
+export {nextPopupId} from './components/nextPopupId';
+export {createProvider} from './components/createProvider';
+export {usePopupManager} from './components/usePopupManager';
 
 setComponentPrefix(globalComponentPrefix);

package/src/packages/uses/useEdit.ts

@@ -74,6 +74,10 @@ export const useEdit = useFunctionWrapper(
       }
     }
 
+    onBeforeUnmount(() => {
+      editComputed.effect.stop();
+    });
+
     return {
       editState,
       editComputed,

package/src/packages/uses/useStyle.tsx

@@ -1,4 +1,4 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
 import {useFunctionWrapper} from "./useFunctionWrapper";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
@@ -62,6 +62,14 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   provide(USE_STYLE_PROVIDER, styleComputed);
 
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      (styleComputed.value as any).ctx = null;
+      (styleComputed.value as any).parent = null;
+      styleComputed.effect.stop();
+    });
+  });
+
   return { styleComputed };
 });
 

package/src/packages/utils/ClientZoom.ts

@@ -1,8 +1,10 @@
+import {iMouseEvent} from 'plain-design-composition';
+
 export const ClientZoom = (() => {
   let zoom: '' | number = '';
   return {
-    get: () => {
-      return zoom;
+    get: (): number => {
+      return zoom === '' ? 1 : zoom;
     },
     set: (_zoom: number | null) => {
       const __zoom = _zoom == null ? '' : _zoom;
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
         };
       }
     },
+    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
+      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
+      return {
+        clientX: ClientZoom.formatClientValue(clientX),
+        clientY: ClientZoom.formatClientValue(clientY),
+        offsetX: ClientZoom.formatClientValue(offsetX),
+        offsetY: ClientZoom.formatClientValue(offsetY),
+      };
+    },
+    formatClientValue: (val: number) => {
+      return ClientZoom.zoomPosition(val);
+    },
+    zoomPosition(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val / zoom).toFixed(2));
+    },
+    zoomSize(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val * zoom).toFixed(2));
+    },
   };
 })();

package/src/packages/utils/useMove.tsx

@@ -1,6 +1,7 @@
 import {createEffects} from "plain-utils/utils/createEffects";
 import {watch} from "plain-design-composition";
 import {removeUnit} from "plain-utils/string/removeUnit";
+import {ClientZoom} from "../components/ClientZoom";
 
 export function useMove(
   {
@@ -26,6 +27,8 @@ export function useMove(
 
   const onMousedown = (e: MouseEvent) => {
 
+    const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
     const { effects: draggierEffects } = createEffects();
 
     const el = e.currentTarget as HTMLElement;
@@ -35,16 +38,19 @@ export function useMove(
     const dragState = {
       isDragging: false,
       start: {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: Number(removeUnit(style.left) || 0),
         top: Number(removeUnit(style.top) || 0),
       }
     };
 
     const onMousemove = (e: MouseEvent) => {
-      const durX = e.clientX - dragState.start.x;
-      const durY = e.clientY - dragState.start.y;
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
+      const durX = clientX - dragState.start.x;
+      const durY = clientY - dragState.start.y;
 
       if (!dragState.isDragging) {
         if (durX >= 5 || durY >= 5) {

package/src/pages/index/App.tsx

@@ -2,8 +2,9 @@ import {designPage} from 'plain-design-composition';
 import './app.scss';
 import {AppHome} from "./home/AppHome";
 import {DemoRowController} from "./Demo/DemoRowController";
-import {Application} from "../../packages";
-import {PageThemeUtils} from "./PageThemeUtils";
+import {Application, ClientZoom, PageThemeUtils} from "../../packages";
+
+PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
 
 export const App = designPage(() => {
   return () => (

package/src/pages/index/app.scss

@@ -69,6 +69,11 @@ html, body, #app {
         font-weight: 700;
         white-space: nowrap;
       }
+
+      img {
+        height: 18px;
+        transform: translateY(0.3em);
+      }
     }
 
     .app-head-operation {

package/src/pages/index/components/AutoTable/AutoHeightAutoRow.tsx

@@ -1,14 +1,19 @@
 import {designPage} from "plain-design-composition";
 import {useTableOption} from "../../../module/useTableOption";
 import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
+import TableOptionSpace from "../../../../packages/components/TableOptionSpace";
+
+let option: TableOptionSpace.iTableOption;
 
 export const demo1 = designPage(() => {
 
-  const option = useTableOption({
-    url: '/demo',
-    showRowsMode: 'auto',
-    fill: true,
-  });
+  if (!option) {
+    option = useTableOption({
+      url: '/demo',
+      showRowsMode: 'auto',
+      fill: true,
+    });
+  }
 
 
   const onClick = () => {