plain-design 1.0.0-beta.83 → 1.0.0-beta.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.83",
+  "version": "1.0.0-beta.85",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/$loading/index.tsx

@@ -0,0 +1,3 @@
+import useLoading from "../useLoading";
+
+export const $loading = useLoading().$loading;

package/src/packages/components/Application/service/createApplicationServiceManager.tsx

@@ -84,8 +84,11 @@ export function createApplicationServiceManager<Option extends { hold?: boolean
                 option={item}
                 ref={onRefList(i)}
                 onDestroy={() => {
-                  options.value.splice(i, 1);
-                  optionIds.splice(i, 1);
+                  const index = options.value.indexOf(item);
+                  if (index > -1) {
+                    options.value.splice(index, 1);
+                    optionIds.splice(index, 1);
+                  }
                 }}
                 onReady={() => serviceReadyObserver.onReady({ option: item, ins: refList[i] })}
               />

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

@@ -4,6 +4,7 @@ import {EditProps, useEdit} from "../../uses/useEdit";
 import './box.scss';
 
 export const Box = designComponent({
+  name: "box",
   props: {
     ...StyleProps,
     ...EditProps,

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

@@ -16,6 +16,7 @@ import {InnerTransition} from "../../utils/InnerTransition";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {OpenController} from "../../utils/OpenController";
 import {ClientZoom} from "../../utils/ClientZoom";
+import {createTransitionHandler} from "../createTransitionHandler";
 
 export const Dialog = designComponent({
   name: '-dialog',
@@ -198,24 +199,13 @@ export const Dialog = designComponent({
      * @author  韦胜健
      * @date    2023/1/19 17:36
      */
-    const handleContentTransition = (() => {
-      const processState = { timer: null as any };
-      const process = async () => {
-        if (processState.timer != null) {
-          clearTimeout(processState.timer);
-          processState.timer = null;
-        }
-        if (!refs.content) {await delay();}
-        if (!refs.content) {return;}
-        const transitionDuration = Number(window.getComputedStyle(refs.content).transitionDuration.replace('s', '')) * 1000;
-        processState.timer = setTimeout(() => {
-          open.value = staticState.isShow;
-          staticState.isShow ? hooks.onOpen.exec(undefined) : hooks.onClose.exec(undefined);
-          processState.timer = null;
-        }, transitionDuration);
-      };
-      return process;
-    })();
+    const handleTransition = createTransitionHandler({
+      getTransitionElement: () => refs.content,
+      isOpen: open,
+      isShow: { get value() {return staticState.isShow;}, set value(newVal) {staticState.isShow = newVal;} },
+      onOpen: () => hooks.onOpen.exec(undefined),
+      onClose: () => hooks.onClose.exec(undefined),
+    });
 
     /**
      * 控制多次执行show的时候，只执行一次，避免派发多次onShow的情况
@@ -271,7 +261,7 @@ export const Dialog = designComponent({
         model.value = true;
         await hooks.onShow.exec(undefined);
         staticState.isShow = true;
-        handleContentTransition();
+        handleTransition();
         showing.end();
       },
       hide: async () => {
@@ -289,7 +279,7 @@ export const Dialog = designComponent({
         model.value = false;
         await hooks.onHide.exec(undefined);
         staticState.isShow = false;
-        handleContentTransition();
+        handleTransition();
         hiding.end();
       },
       confirm: throttle(async () => {

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent, onBeforeUnmount} from "plain-design-composition";
 import {usePageRenderContext} from "../usePageRenderContext";
 
 export const PageRenderList = designComponent({
@@ -9,11 +9,11 @@ export const PageRenderList = designComponent({
 
     const pageRenderContext = usePageRenderContext();
 
-    pageRenderContext.renderHook.use({
+    onBeforeUnmount(pageRenderContext.renderHook.use({
       separate: false,
       processor: ({ list, render }) => {list.push({ render, key: '', seq: 1 });},
       render: () => slots.default()
-    });
+    }));
 
     return () => {
       return pageRenderContext.renderHook.exec();

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

@@ -1,6 +1,7 @@
 import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
 
 export const ParagraphItem = designComponent({
+  name: 'paragraph-item',
   props: {},
   slots: ['default'],
   setup({ props, slots }) {

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -1,5 +1,4 @@
 import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
-import {useAutoScroll} from "../../../Scroll/useAutoScroll";
 import {createEffects} from "plain-utils/utils/createEffects";
 import VirtualTable from "../../../VirtualTable";
 import {iTableHooks} from "../utils/createTableHooks";
@@ -10,6 +9,7 @@ import {addClass} from "plain-utils/dom/addClass";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {ClientZoom} from "../../../ClientZoom";
+import {createAutoScrollManager} from "../../../createAutoScrollManager";
 
 export function useTableDraggierRow(
   {
@@ -29,8 +29,11 @@ export function useTableDraggierRow(
     model: { value: any[] | null | undefined }
   }
 ) {
+
   /*自动滚动*/
-  const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });
+  /*const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });*/
+
+  const autoScrollManager = createAutoScrollManager(() => refs.virtual?.refs.scroll);
 
   /*拖拽结束之后要清除的副作用*/
   const { effects: draggierEffects } = createEffects();
@@ -180,13 +183,13 @@ export function useTableDraggierRow(
 
       /*---------------------------------------初始化auto scroll-------------------------------------------*/
       /*自动滚动*/
-      if (refs.virtual?.refs.scroll?.refs.wrapper) {
+      /*if (refs.virtual?.refs.scroll?.refs.wrapper) {
         const { scrollHeight, offsetHeight } = refs.virtual.refs.scroll.refs.wrapper;
         if (scrollHeight > offsetHeight) {
           autoScroll.showHover();
           draggierEffects.push(() => {autoScroll.hideHover();});
         }
-      }
+      }*/
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
@@ -222,16 +225,25 @@ export function useTableDraggierRow(
       const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
+      const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
+      const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
+
       if (top < minTop) {
         top = minTop;
       } else {
-        const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
-        const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
         if (top > maxTop) {
           top = maxTop;
         }
       }
 
+      if (top == minTop) {
+        autoScrollManager.set('top');
+      } else if (top == maxTop) {
+        autoScrollManager.set('bottom');
+      } else {
+        autoScrollManager.set(null);
+      }
+
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
         prevClientY = clientY;

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

@@ -8,7 +8,7 @@ import DropdownOption from "../DropdownOption";
 export const ThemeColorSelector = designComponent({
   name: 'theme-color-selector',
   inheritPropsType: Dropdown,
-  setup({}) {
+  setup() {
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),

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

@@ -7,7 +7,7 @@ import './theme-locale-selector.scss';
 
 export const ThemeLocaleSelector = designComponent({
   name: 'theme-locale-selector',
-  setup({}) {
+  setup() {
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-locale-selector'),

package/src/packages/components/VirtualList/createVirtualDraggier.ts

@@ -10,6 +10,7 @@ import {createWebDraggier, iDraggierData} from "../../utils/createDraggier";
 import {delay} from "plain-utils/utils/delay";
 import {PlainScroll} from "../Scroll";
 import {iVirtualList} from "./useVirtualList";
+import {createAutoScrollManager} from "../createAutoScrollManager";
 
 /**
  * 创建虚拟列表的拖拽移动节点管理对象
@@ -40,45 +41,7 @@ export function createVirtualDraggier(
 ) {
 
   /*管理自动滚动*/
-  const autoScrollManager = (() => {
-    const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
-
-    const handler = {
-      top: () => {
-        getScroll()?.methods.autoScrollTop();
-      },
-      bottom: () => {
-        getScroll()?.methods.autoScrollBottom();
-      },
-      left: () => {
-        getScroll()?.methods.autoScrollLeft();
-      },
-      right: () => {
-        getScroll()?.methods.autoScrollRight();
-      },
-      stop: () => {
-        getScroll()?.methods.stopAutoScroll();
-      },
-    };
-
-    const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
-      const newVal = val;
-      const oldVal = _state.value;
-      if (newVal == oldVal) {
-        return;
-      }
-      _state.value = val;
-
-      if (!oldVal && !!newVal) {
-        handler[newVal]();
-      } else {
-        handler.stop();
-      }
-    };
-    const get = () => _state.value;
-    const stop = () => getScroll()?.methods.stopAutoScroll();
-    return { get, set, stop };
-  })();
+  const autoScrollManager = createAutoScrollManager(getScroll);
 
   /*静态变量*/
   const dragStaticState = createDefaultDraggierStaticState();

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

@@ -0,0 +1,41 @@
+import {PlainScroll} from "../Scroll";
+
+export function createAutoScrollManager(getScroll: () => PlainScroll | null | undefined) {
+  const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
+
+  const handler = {
+    top: () => {
+      getScroll()?.methods.autoScrollTop();
+    },
+    bottom: () => {
+      getScroll()?.methods.autoScrollBottom();
+    },
+    left: () => {
+      getScroll()?.methods.autoScrollLeft();
+    },
+    right: () => {
+      getScroll()?.methods.autoScrollRight();
+    },
+    stop: () => {
+      getScroll()?.methods.stopAutoScroll();
+    },
+  };
+
+  const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
+    const newVal = val;
+    const oldVal = _state.value;
+    if (newVal == oldVal) {
+      return;
+    }
+    _state.value = val;
+
+    if (!oldVal && !!newVal) {
+      handler[newVal]();
+    } else {
+      handler.stop();
+    }
+  };
+  const get = () => _state.value;
+  const stop = () => getScroll()?.methods.stopAutoScroll();
+  return { get, set, stop };
+}

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

@@ -8,9 +8,15 @@ export function createPlainAddressService(
   {
     http,
     getAddress,
+    getAddressByCodes,
+    getAddressByParentCodes,
+    getAddressByLabel,
   }: {
     http: iHttp,
     getAddress: () => Promise<iAddressSyncMeta[]>,
+    getAddressByCodes?: (codes: string[]) => Promise<iAddressSyncMeta[]>
+    getAddressByParentCodes?: (codes: string[]) => Promise<iAddressSyncMeta[]>
+    getAddressByLabel?: (label: string, type?: typeof eAddressTypeEnum.TYPE) => Promise<iAddressSyncMeta[]>
   }
 ) {
   return createAddressService({
@@ -32,7 +38,7 @@ export function createPlainAddressService(
       return findAddressList(0);
     },*/
     getAddress,
-    getAddressByCodes: async (codes) => {
+    getAddressByCodes: getAddressByCodes || (async (codes) => {
       const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
         all: true,
         orders: { field: 'code', desc: false },
@@ -44,8 +50,8 @@ export function createPlainAddressService(
         type: (Deep2Type)[i.deep as 1],
         parentCode: i.parentCode,
       }));
-    },
-    getAddressByParentCodes: async (codes) => {
+    }),
+    getAddressByParentCodes: getAddressByParentCodes || (async (codes) => {
       const nowTime = Date.now();
       const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
         all: true,
@@ -62,8 +68,8 @@ export function createPlainAddressService(
         type: (Deep2Type)[i.deep as 1],
         parentCode: i.parentCode,
       }));
-    },
-    getAddressByLabel: async (label: string, type?: typeof eAddressTypeEnum.TYPE) => {
+    }),
+    getAddressByLabel: getAddressByLabel || (async (label: string, type?: typeof eAddressTypeEnum.TYPE) => {
       const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
         all: true,
         orders: { field: 'code', desc: false },
@@ -78,7 +84,7 @@ export function createPlainAddressService(
         type: (Deep2Type)[i.deep as 1],
         parentCode: i.parentCode,
       }));
-    },
+    }),
   });
 }
 

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

@@ -126,7 +126,7 @@ export function createRequestInterceptor({ baseURL }: { baseURL?: string }) {
 
   return {
     intercept,
-  };
+  }
 }
 
 export interface iRequestInterceptor {

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

@@ -8,6 +8,7 @@ import {delay} from "plain-utils/utils/delay";
 import {PlainScroll} from "../Scroll";
 import {createDefaultDraggierReactiveState, createDefaultDraggierStaticState, iVirtualDraggierHandler} from "../VirtualList/createVirtualDraggier";
 import {iVirtualNode} from "../VirtualList/useVirtualList";
+import {createAutoScrollManager} from "../createAutoScrollManager";
 
 /**
  * 创建虚拟列表的拖拽移动节点管理对象
@@ -38,45 +39,7 @@ export function createScrollDraggier(
 ) {
 
   /*管理自动滚动*/
-  const autoScrollManager = (() => {
-    const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
-
-    const handler = {
-      top: () => {
-        getScroll()?.methods.autoScrollTop();
-      },
-      bottom: () => {
-        getScroll()?.methods.autoScrollBottom();
-      },
-      left: () => {
-        getScroll()?.methods.autoScrollLeft();
-      },
-      right: () => {
-        getScroll()?.methods.autoScrollRight();
-      },
-      stop: () => {
-        getScroll()?.methods.stopAutoScroll();
-      },
-    };
-
-    const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
-      const newVal = val;
-      const oldVal = _state.value;
-      if (newVal == oldVal) {
-        return;
-      }
-      _state.value = val;
-
-      if (!oldVal && !!newVal) {
-        handler[newVal]();
-      } else {
-        handler.stop();
-      }
-    };
-    const get = () => _state.value;
-    const stop = () => getScroll()?.methods.stopAutoScroll();
-    return { get, set, stop };
-  })();
+  const autoScrollManager = createAutoScrollManager(getScroll);
 
   /*静态变量*/
   const dragStaticState = {

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

@@ -0,0 +1,46 @@
+import {delay} from "plain-utils/utils/delay";
+
+/**
+ * 创建一个transition管理器
+ * @author  韦胜健
+ * @date    2024.7.1 13:39
+ */
+export function createTransitionHandler(
+  {
+    getTransitionElement,
+    isShow,
+    isOpen,
+    onOpen,
+    onClose,
+  }: {
+    /*获取执行transition动画的元素对象*/
+    getTransitionElement: () => HTMLElement | null | undefined,
+    /*当前是否显示，此时过度动画准备开始*/
+    isShow: { value: boolean },
+    /*当前是否已经显示/隐藏，此时过度动画已经结束*/
+    isOpen: { value: boolean },
+    /*已经显示触发动作*/
+    onOpen?: () => void,
+    /*已经隐藏触发动作*/
+    onClose?: () => void,
+  }
+): (() => void) {
+  const processState = { timer: null as any };
+  const process = async () => {
+    if (processState.timer != null) {
+      clearTimeout(processState.timer);
+      processState.timer = null;
+    }
+    /*等Transition相应show属性之后，再处理，不然读取的transitionDuration为0*/
+    await delay(23);
+    const el = getTransitionElement();
+    if (!el) {return;}
+    const transitionDuration = Number(window.getComputedStyle(el).transitionDuration.replace('s', '')) * 1000;
+    processState.timer = setTimeout(() => {
+      isOpen.value = isShow.value;
+      isShow.value ? onOpen?.() : onClose?.();
+      processState.timer = null;
+    }, transitionDuration);
+  };
+  return process;
+}

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

@@ -0,0 +1,20 @@
+export function loadFile<T = any>(filePath: string, globalName?: string, Win?: Window): Promise<T> {
+  const _window = Win || window;
+  return new Promise<T>((resolve, reject) => {
+    if (/\.js(\?.*)?/.test(filePath)) {
+      const el = _window.document.createElement('script') as HTMLScriptElement;
+      el.setAttribute('src', filePath);
+      el.onload = () => resolve(!globalName ? undefined : (_window as any)[globalName]);
+      el.onerror = reject;
+      _window.document.body.appendChild(el);
+    } else if (/\.css(\?.*)?/.test(filePath)) {
+      const el = _window.document.createElement('link') as HTMLLinkElement;
+      el.setAttribute('rel', 'stylesheet');
+      el.setAttribute('type', 'text/css');
+      el.setAttribute('href', filePath);
+      el.onload = () => resolve(undefined as any);
+      el.onerror = reject;
+      _window.document.body.appendChild(el);
+    }
+  });
+}

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

@@ -1,6 +1,6 @@
 import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
 import {closeDialogServiceHook, destroyDialogServiceHook, dialogCustomOptionKeys, DialogServiceEditType, iDialogServiceCustomOption, iDialogServiceOption} from "./dialog.service.utils";
-import {computed, createHooks, getComponentCls, reactive, ref, toRaw, useRefs} from "plain-design-composition";
+import {computed, createHooks, getComponentCls, onBeforeUnmount, reactive, ref, toRaw, useRefs} from "plain-design-composition";
 import {Dialog} from "../Dialog";
 import {i18n} from "../../i18n";
 import {DialogAlign, DialogCloseType, DialogPositions} from "../Dialog/utils/dialog.utils";
@@ -81,14 +81,14 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
      * @author  韦胜健
      * @date    2022.5.4 21:46
      */
-    closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());});
+    onBeforeUnmount(closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());}));
 
     /**
      * 销毁dialog service观察者对象，用来销毁hold类型的服务
      * @author  韦胜健
      * @date    2022/6/2 18:00
      */
-    destroyDialogServiceHook.use(opt => {
+    onBeforeUnmount(destroyDialogServiceHook.use(opt => {
       if (opt === state.option || opt === toRaw(state.option)) {
         if (!isOpen.value) {
           /*如果已经关闭，则直接销毁*/
@@ -102,13 +102,13 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
           });
         }
       }
-    });
+    }));
 
-    onClose.use(() => {
+    onBeforeUnmount(onClose.use(() => {
       targetOption.value.dialogProps.onClose?.();
       /*如果服务为持有服务，则关闭时不销毁*/
       !targetOption.value.customOption.hold && destroy();
-    });
+    }));
 
     return {
       refer: {

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

@@ -1,6 +1,6 @@
 import {createCounter} from "plain-utils/utils/createCounter";
 import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
-import {computed, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useStyles} from "plain-design-composition";
+import {computed, createHooks, getComponentCls, iHTMLDivElement, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useRefs, useStyles} from "plain-design-composition";
 import {KeyboardService} from "../KeyboardService";
 import {Image} from "../Image";
 import {Tooltip} from "../Tooltip";
@@ -9,6 +9,7 @@ import i18n from "../i18n";
 import Transition from "../Transition";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
 import {ClientZoom} from "../ClientZoom";
+import {createTransitionHandler} from "../createTransitionHandler";
 
 const nextCount = createCounter("image_preview");
 
@@ -22,9 +23,17 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
   name: 'image-preview-service',
   setup: ({ option, destroy }) => {
 
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
     const step = { scale: 0.2, rotate: 90, };
 
     const isShow = ref(false);
+    const isOpen = ref(false);
+
+    const hooks = {
+      onOpen: createHooks(),
+      onClose: createHooks(),
+    };
 
     const state = reactive({
       option,
@@ -65,6 +74,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
       await state.mounted;
       isShow.value = true;
       state.zIndex = nextIndex();
+      handleTransition();
 
       setTimeout(() => {
         const activeElement = document.activeElement as HTMLElement;
@@ -72,7 +82,10 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
       });
     };
 
-    const hide = () => isShow.value = false;
+    const hide = () => {
+      isShow.value = false;
+      handleTransition();
+    };
 
     const resetAdjust = () => state.adjust = {
       scale: null as null | number,           // 当前图片缩放大小
@@ -204,18 +217,28 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
       onClickMask: hide,
     };
 
+    const handleTransition = createTransitionHandler({
+      getTransitionElement: () => refs.el,
+      isOpen,
+      isShow,
+      onOpen: () => hooks.onOpen.exec(undefined),
+      onClose: () => hooks.onClose.exec(undefined),
+    });
+
     onBeforeUnmount(KeyboardService.listen({ esc: () => {isShow.value && hide();} }));
 
+    onBeforeUnmount(hooks.onClose.use(() => {destroy();}));
+
     return {
       refer: {
         isShow,
-        isOpen: isShow,
+        isOpen,
         service,
       },
       render: () => (
         <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
           <Transition name={getComponentCls('image-preview')} show={isShow.value}>
-            <div className={getComponentCls('image-preview-service')} style={{ zIndex: state.zIndex }} onClick={handler.onClickMask}>
+            <div ref={onRef.el} className={getComponentCls('image-preview-service')} style={{ zIndex: state.zIndex }} onClick={handler.onClickMask}>
               <div className="image-preview-service-img-wrapper">
                 <Transition switch name={getComponentCls('transition-scale')} key={state.count}>
                   {/*不加这个div，switch动画没有效果，真是奇怪。Button可以，Card可以，就Image不行*/}