plain-design 1.0.0-beta.12 → 1.0.0-beta.121

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

@@ -1,17 +1,17 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, 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 "@peryl/react-compose";
 import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {delay} from "plain-utils/utils/delay";
+import {createEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
 import './popup-item.scss';
 import {PopupManager} from "./usePopupManager";
 import {refreshPopup} from "./refresh/refreshPopup";
 import {getBoundary} from "./utils/getBoundary";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {getElementParents} from "../../utils/getElementParents";
+import {getElementParents} from "@peryl/utils/getElementParents";
 import {usePopupTrigger} from "./trigger/usePopupTrigger";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
-import {doNothing} from "../../utils/doNothing";
-import {unit} from "plain-utils/string/unit";
+import {doNothing} from "@peryl/utils/doNothing";
+import {unit} from "@peryl/utils/unit";
 import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
 
 export const PopupItem = designComponent({
@@ -39,7 +39,12 @@ export const PopupItem = designComponent({
 
     const manager = PopupManager.inject()!;
 
-    const state = reactive({
+    const state: {
+      option: iPopupOption,
+      isShow: boolean,
+      isAnimationReady: boolean,
+      zIndex: number,
+    } = reactive({
       /**
        * 当前popup item对应的option对象，不可以通过props.option来更新，必须调用manager.methods.update手动更新
        * @author  韦胜健
@@ -82,6 +87,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,
       }
     ]);
 
@@ -193,7 +199,7 @@ export const PopupItem = designComponent({
             clearTimeout(timer);
             timer = null;
           }
-          methods.refresh(true);
+          methods.refresh(state.option.transformRefreshOnScroll);
           timer = setTimeout(() => {
             methods.refresh();
           }, 100);
@@ -321,9 +327,9 @@ export const PopupItem = designComponent({
      * @author  韦胜健
      * @date    2023/5/16 17:14
      */
-    useWatchAutoClear(() => state.option.reference, () => {
-      const effects: SimpleFunction[] = [];
+    useWatchAutoClear(() => state.option.reference, (): (() => void) => {
       if (!state.option.reference) {return doNothing;}
+      const { effects } = createEffects();
       const parents = getElementParents(state.option.reference).concat(window as any);
       const onScroll = () => {
         if (state.option.hideOnScroll) {
@@ -340,7 +346,7 @@ export const PopupItem = designComponent({
         parent.addEventListener('scroll', onScroll);
         effects.push(() => {parent.removeEventListener('scroll', onScroll);});
       });
-      return () => {effects.forEach(i => i());};
+      return effects.clear;
     });
 
     /**
@@ -368,36 +374,58 @@ export const PopupItem = designComponent({
 
     PopupItemProvide.provide(state);
 
+    let prevContent: any;
+
     return () => (
-      !!state.option.reference && <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
-        <div
-          data-id={state.option.id}
-          ref={onRef.popup}
-          className={classes.value}
-          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}/>)}
-          <div
-            ref={onRef.body}
-            className="popup-item-body"
-          >
-            {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
-            {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+      !!state.option.reference && (
+        (() => {
+          const content = (
             <div
-              ref={onRef.content}
-              style={contentStyles.value}
-              className="popup-item-content"
+              data-id={state.option.id}
+              ref={onRef.popup}
+              className={classes.value}
+              data-popup-show={String(state.isShow)}
               onTransitionEnd={handler.onTransitionend}
+              style={styles.value}
+              onClick={handler.onClickPopup}
             >
-              {slots.default.isExist() ? slots.default() : state.option.render()}
+              {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
+              {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+              <div
+                ref={onRef.body}
+                className="popup-item-body"
+              >
+                {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
+                {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+                <div
+                  ref={onRef.content}
+                  style={contentStyles.value}
+                  className="popup-item-content"
+                  onTransitionEnd={handler.onTransitionend}
+                >
+                  {(() => {
+                    /*关闭的时候如果content为空，则渲染最后一次不为空的content内容*/
+                    let content = slots.default.isExist() ? slots.default() : state.option.render();
+                    if (!content) {
+                      if (!state.isShow) {
+                        content = prevContent;
+                      }
+                    } else {
+                      prevContent = content;
+                    }
+                    return content;
+                  })()}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </Portal>
+          );
+          return state.option.appendToBody ? (
+            <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
+              {content}
+            </Portal>
+          ) : content;
+        })()
+      )
     );
   },
 });

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

@@ -12,7 +12,10 @@
 
 @include comp(popup-item) {
 
-  --#{componentName('popup-item-background')}: #{plv(background-lite)};
+  --#{componentName('background-color')}: #{plv(bg-4)};
+  --#{componentName('table-head-background')}: #{plv(bg-4)};
+
+  --#{componentName('popup-item-background')}: #{plv(bg-4)};
 
   position: fixed;
   filter: drop-shadow(0 0 2px #c8c8c8);
@@ -97,21 +100,26 @@
 
   &.popup-item-is-dark {
     --#{componentName('popup-item-background')}: rgba(0, 0, 0, 0.88);
-    color: white;
+    color: plv(pbfc);
     filter: none;
   }
 
   &.popup-item-dark-app {
-    filter: drop-shadow(0 0 0.5px plv(secondary-6));
+    filter: drop-shadow(0 0 16px var(--custom-bg-1));
   }
 
   &.popup-item-no-background {
     --#{componentName('popup-item-background')}: transparent !important;
+    filter: none !important;
   }
 
   &.popup-item-no-border {
     filter: none !important;
   }
+
+  &.popup-item-no-interactive {
+    pointer-events: none;
+  }
   /*---------------------------------------animation-------------------------------------------*/
 
   &.popup-item-animation-fade {
@@ -218,4 +226,27 @@
     @include whenShow {.popup-item-body{transform: initial}}
     /*@formatter:on*/
   }
+
+  &.popup-item-animation-clip {
+    /*@formatter:off*/
+    &,& .popup-item-content {transition: all ease 200ms;}
+    &[data-direction=top] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 100%,-0% 100%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(-0% 100%,100% 100%,100% 100%,-0% 100%); } }
+    }
+    &[data-direction=bottom] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 100%,-0% 100%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 0,-0% 0); } }
+    }
+    &[data-direction=left] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(100% 0,100% 100%,-0% 100%,-0% 0%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(100% 0%,100% 100%,100% 100%,100% 0%); } }
+    }
+    &[data-direction=right] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(0% 0,0% 100%,100% 100%,100% 0%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(0% 0%,0% 100%,0% 100%,0% 0%); } }
+    }
+    /*@formatter:on*/
+  }
 }
+

package/src/packages/components/usePopup/refresh/MaxMinTopLeft.ts

@@ -0,0 +1,38 @@
+import {iPopupRefreshBuildParams} from "../utils/popup.utils";
+
+export function MaxMinTopLeft(
+  {
+    top,
+    left,
+    buildParams,
+    option,
+  }: {
+    top: number,
+    left: number,
+    buildParams: iPopupRefreshBuildParams,
+    option: {
+      maxTop?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+      minTop?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+      maxLeft?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+      minLeft?: number | ((buildParams: iPopupRefreshBuildParams) => number),
+    }
+  }
+): { top: number, left: number } {
+  if (option.maxTop != null) {
+    const maxTop = typeof option.maxTop === "function" ? option.maxTop(buildParams) : option.maxTop;
+    if (top > maxTop) {top = maxTop;}
+  }
+  if (option.minTop != null) {
+    const minTop = typeof option.minTop === "function" ? option.minTop(buildParams) : option.minTop;
+    if (top < minTop) {top = minTop;}
+  }
+  if (option.maxLeft != null) {
+    const maxLeft = typeof option.maxLeft === "function" ? option.maxLeft(buildParams) : option.maxLeft;
+    if (left > maxLeft) {left = maxLeft;}
+  }
+  if (option.minLeft != null) {
+    const minLeft = typeof option.minLeft === "function" ? option.minLeft(buildParams) : option.minLeft;
+    if (left < minLeft) {left = minLeft;}
+  }
+  return { top, left };
+}

package/src/packages/components/usePopup/refresh/calcPosition.ts

@@ -1,5 +1,6 @@
 import {iPopupRefreshBuildParams} from "../utils/popup.utils";
 import {handleDirection} from "../utils/handleDirection";
+import {MaxMinTopLeft} from "./MaxMinTopLeft";
 
 /**
  * 计算popup根节点定位信息
@@ -7,13 +8,15 @@ import {handleDirection} from "../utils/handleDirection";
  * @date    2023/5/16 16:16
  */
 export function calcPosition(
-  {
+  buildParams: iPopupRefreshBuildParams
+): { top: number, left: number } {
+
+  const {
     direction,
     align,
     rects,
     option
-  }: iPopupRefreshBuildParams
-) {
+  } = buildParams;
 
   let top: number | null = null;
   let left: number | null = null;
@@ -81,5 +84,5 @@ export function calcPosition(
     if (left > maxLeft) {left = maxLeft;}
   }
 
-  return { top: top!, left: left! };
+  return MaxMinTopLeft({ top: top!, left: left!, buildParams, option, });
 }

package/src/packages/components/usePopup/refresh/refreshArrow.ts

@@ -1,6 +1,6 @@
 import {iPopupRefreshBuildParams} from "../utils/popup.utils";
 import {handleDirection} from "../utils/handleDirection";
-import {getComponentCls} from "plain-design-composition";
+import {getComponentCls} from "@peryl/react-compose";
 
 /**
  * 更新箭头定位信息

package/src/packages/components/usePopup/refresh/refreshPopup.ts

@@ -5,6 +5,7 @@ import {calcPosition} from "./calcPosition";
 import {applyPosition} from "./applyPosition";
 import {refreshArrow} from "./refreshArrow";
 import {getRects} from "../utils/getRects";
+import {MaxMinTopLeft} from "./MaxMinTopLeft";
 
 /**
  * 刷新popup定位
@@ -64,7 +65,8 @@ export function refreshPopup(params: iPopupRefreshParams) {
     buildParams.rects = getRects(refs);
     refreshArrow(buildParams);
   } else {
-    const { top, left, height, width } = rects.alignReference;
+    const { top: _top, left: _left, height, width } = rects.alignReference;
+    const { top, left } = MaxMinTopLeft({ top: _top!, left: _left!, buildParams, option, });
     Object.assign(refs.popupEl.style, {
       ...params.transformLocation ? { transform: `translate3d(${left}px,${top}px,0)` } : { top: `${top}px`, left: `${left}px`, },
       height: `${height}px`,

package/src/packages/components/usePopup/trigger/useManagerTrigger.clickOutside.tsx

@@ -1,6 +1,6 @@
 import {iPopupManager} from "../utils/popup.utils";
-import {onBeforeUnmount, onMounted} from "plain-design-composition";
-import {throttle} from "plain-utils/utils/throttle";
+import {onBeforeUnmount, onMounted} from "@peryl/react-compose";
+import {throttle} from "@peryl/utils/throttle";
 
 /**
  * 处理点击页面任何元素的时候检查是否触发了某个popup的click outside动作
@@ -36,9 +36,9 @@ export function useManagerTriggerClickOutside({ hooks }: iPopupManager) {
     { trailing: false }
   );
   onMounted(() => {
-    window.addEventListener('click', onClick, true);
+    window.addEventListener('mouseup', onClick, true);
   });
   onBeforeUnmount(() => {
-    window.removeEventListener('click', onClick, true);
+    window.removeEventListener('mouseup', onClick, true);
   });
 }

package/src/packages/components/usePopup/trigger/usePopupTrigger.tsx

@@ -1,6 +1,6 @@
 import {ePopupTrigger, iPopupManager, iPopupOption} from "../utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {onBeforeUnmount, watchEffect} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {onBeforeUnmount, watchEffect} from "@peryl/react-compose";
 
 /**
  * 初始化监听popper根节点事件

package/src/packages/components/usePopup/trigger/useReferenceTrigger.tsx

@@ -1,6 +1,6 @@
 import {ePopupTrigger, iPopupManager, iPopupUseOption} from "../utils/popup.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {onBeforeUnmount, SimpleFunction, watchEffect} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {globalWatchEffect, onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
 import {isStopPopup} from "../utils/stopPopup";
 
 /**
@@ -28,57 +28,63 @@ export function createReferenceTrigger(
   }
 ) {
   const { effects } = createEffects();
+  const { effects: setupEffects } = createEffects();
 
   let prev: ReturnType<typeof get> | null = null;
 
-  watchEffect(() => {
-    const { reference, trigger } = get();
-    if (!!prev && prev.trigger === trigger && prev.reference === reference) {
-      return;
-    }
-    effects.clear();
-    prev = { reference, trigger };
-
-    if (!reference) {return;}
-
-    const onClick = (e: MouseEvent) => {
-      if (isStopPopup(e)) {
+  setupEffects.push(
+    globalWatchEffect(() => {
+      const { reference, trigger } = get();
+      if (!!prev && prev.trigger === trigger && prev.reference === reference) {
         return;
       }
-      manager.hooks.onTriggerReferenceClick.exec({ e, option: getOption() });
-    };
-    const onContextmenu = (e: MouseEvent) => {
-      e.preventDefault();
-      manager.hooks.onTriggerReferenceContextmenu.exec({ e, option: getOption() });
-    };
-    const onMouseenter = (e: MouseEvent) => {manager.hooks.onTriggerReferenceEnter.exec({ e, option: getOption() });};
-    const onMouseleave = (e: MouseEvent) => {manager.hooks.onTriggerReferenceLeave.exec({ e, option: getOption() });};
-    const onMousedown = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousedown.exec({ e, option: getOption() });};
-    const onMousemove = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousemove.exec({ e, option: getOption() });};
-    const onFocus = (e: FocusEvent) => {manager.hooks.onTriggerReferenceFocus.exec({ e, option: getOption() });};
-    const onBlur = (e: FocusEvent) => {manager.hooks.onTriggerReferenceBlur.exec({ e, option: getOption() });};
+      effects.clear();
+      prev = { reference, trigger };
 
+      if (!reference) {return;}
 
-    reference.addEventListener('click', onClick);
-    reference.addEventListener('contextmenu', onContextmenu);
-    reference.addEventListener('mouseenter', onMouseenter);
-    reference.addEventListener('mouseleave', onMouseleave);
-    reference.addEventListener('mousedown', onMousedown);
-    reference.addEventListener('mousemove', onMousemove);
-    reference.addEventListener('focus', onFocus);
-    reference.addEventListener('blur', onBlur);
+      const onClick = (e: MouseEvent) => {
+        if (isStopPopup(e)) {
+          return;
+        }
+        manager.hooks.onTriggerReferenceClick.exec({ e, option: getOption() });
+      };
+      const onContextmenu = (e: MouseEvent) => {
+        e.preventDefault();
+        manager.hooks.onTriggerReferenceContextmenu.exec({ e, option: getOption() });
+      };
+      const onMouseenter = (e: MouseEvent) => {manager.hooks.onTriggerReferenceEnter.exec({ e, option: getOption() });};
+      const onMouseleave = (e: MouseEvent) => {manager.hooks.onTriggerReferenceLeave.exec({ e, option: getOption() });};
+      const onMousedown = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousedown.exec({ e, option: getOption() });};
+      const onMousemove = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousemove.exec({ e, option: getOption() });};
+      const onFocus = (e: FocusEvent) => {manager.hooks.onTriggerReferenceFocus.exec({ e, option: getOption() });};
+      const onBlur = (e: FocusEvent) => {manager.hooks.onTriggerReferenceBlur.exec({ e, option: getOption() });};
 
-    effects.push(() => {
-      reference.removeEventListener('click', onClick);
-      reference.removeEventListener('contextmenu', onContextmenu);
-      reference.removeEventListener('mouseenter', onMouseenter);
-      reference.removeEventListener('mouseleave', onMouseleave);
-      reference.removeEventListener('mousedown', onMousedown);
-      reference.removeEventListener('mousemove', onMousemove);
-      reference.removeEventListener('focus', onFocus);
-      reference.removeEventListener('blur', onBlur);
-    });
-  });
 
-  onBeforeUnmount(() => {effects.clear();});
+      reference.addEventListener('click', onClick);
+      reference.addEventListener('contextmenu', onContextmenu);
+      reference.addEventListener('mouseenter', onMouseenter);
+      reference.addEventListener('mouseleave', onMouseleave);
+      reference.addEventListener('mousedown', onMousedown);
+      reference.addEventListener('mousemove', onMousemove);
+      reference.addEventListener('focus', onFocus);
+      reference.addEventListener('blur', onBlur);
+
+      effects.push(() => {
+        reference.removeEventListener('click', onClick);
+        reference.removeEventListener('contextmenu', onContextmenu);
+        reference.removeEventListener('mouseenter', onMouseenter);
+        reference.removeEventListener('mouseleave', onMouseleave);
+        reference.removeEventListener('mousedown', onMousedown);
+        reference.removeEventListener('mousemove', onMousemove);
+        reference.removeEventListener('focus', onFocus);
+        reference.removeEventListener('blur', onBlur);
+      });
+    })
+  );
+
+  onBeforeUnmount(() => {
+    effects.clear();
+    setupEffects.clear();
+  });
 }

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

@@ -1,6 +1,7 @@
 import {PopupManager} from "./usePopupManager";
 import {iPopupManager, iPopupUseOption, nextPopupId} from "./utils/popup.utils";
-import {onBeforeUnmount, SimpleFunction} from "plain-design-composition";
+import {onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
 
 export function usePopup() {
   const popupId = nextPopupId();
@@ -20,8 +21,21 @@ export function createPopup(onBeforeUnmount?: (handler: SimpleFunction) => void)
 
 export function _createPopup(popupManager: iPopupManager) {
 
+  /*记录操作过的popup id，在销毁的时候将这些popup option在manager中全部注销*/
   const idMap = {} as Record<string, boolean>;
 
+  const hide: typeof popupManager.methods.hide = (ids) => {
+    toArray(ids).forEach(id => idMap[id] = true);
+    return popupManager.methods.hide(ids);
+  };
+  const update: typeof popupManager.methods.update = (option) => {
+    idMap[option.id] = true;
+    return popupManager.methods.update(option);
+  };
+  const refresh: typeof popupManager.methods.refresh = (option) => {
+    idMap[option.id] = true;
+    return popupManager.methods.refresh(option);
+  };
   const show: typeof popupManager.methods.show = (useOption) => {
     const data = popupManager.methods.show(useOption);
     idMap[data.option.id] = true;
@@ -29,23 +43,25 @@ export function _createPopup(popupManager: iPopupManager) {
   };
   const toggle = (option: iPopupUseOption) => {
     if (popupManager.methods.isShow(option)) {
-      $popup.hide(option.id);
+      hide(option.id);
     } else {
       show(option);
     }
   };
-  const absolute: typeof popupManager.methods.absolute = (absluteOption) => {
-    const data = popupManager.methods.absolute(absluteOption);
+  const absolute: typeof popupManager.methods.absolute = (absoluteOption) => {
+    const data = popupManager.methods.absolute(absoluteOption);
     idMap[data.option.id] = true;
     return data;
   };
-  const dispose = () => {Object.keys(idMap).forEach(id => {popupManager.methods.remove(id);});};
+  const dispose = () => {
+    Object.keys(idMap).forEach(id => {popupManager.methods.remove(id);});
+  };
 
   const $popup = {
     manager: popupManager,
-    hide: popupManager.methods.hide,
-    update: popupManager.methods.update,
-    refresh: popupManager.methods.refresh,
+    hide,
+    update,
+    refresh,
     show,
     toggle,
     dispose,

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

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, inject, onBeforeUnmount, provide, reactive, RenderNode} from "plain-design-composition";
+import {computed, getComponentCls, inject, onBeforeUnmount, provide, reactive, RenderNode} from "@peryl/react-compose";
 import {ePopupAnimation, ePopupTrigger, iPopupDefaultOption, iPopupManager, iPopupOption, iPopupUseOption, nextPopupManagerId, nextPopupType} from "./utils/popup.utils";
 import {createPopupManagerHooks} from "./utils/createPopupManagerHooks";
 import {PopupItem} from "./PopupItem";
@@ -11,7 +11,7 @@ import {useManagerTriggerHover} from "./trigger/useManagerTrigger.hover";
 import {useManagerTriggerContextmenu} from "./trigger/useManagerTrigger.contextmenu";
 import {useManagerTriggerFocus} from "./trigger/useManagerTrigger.focus";
 import {useManagerTriggerClickOutside} from "./trigger/useManagerTrigger.clickOutside";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 
 /**
  * popup item管理器
@@ -62,7 +62,8 @@ export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.T
         trigger: ePopupTrigger.hover,
         animation: ePopupAnimation.fade,
         destroyOnClose: true,
-        to: 'body',
+        appendToBody: true,
+        transformRefreshOnScroll: true,
         offset: 0,
         offsetAlign: 0,
         autoSwitchDirection: true,

package/src/packages/components/usePopup/utils/createPopupManagerHooks.tsx

@@ -1,4 +1,4 @@
-import {createHooks, createSyncHooks} from "plain-design-composition";
+import {createHooks, createSyncHooks} from "@peryl/react-compose";
 import {iPopupOption, iPopupUseOption} from "./popup.utils";
 
 /**

package/src/packages/components/usePopup/utils/ids2map.ts

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 
 export function ids2map(id: string | string[]): Record<string, true | undefined> {
   if (typeof id === "string") {

package/src/packages/components/usePopup/utils/popup.utils.ts

@@ -1,10 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {createCounter} from "plain-utils/utils/createCounter";
-import {getComponentCls, RenderNode, SimpleFunction} from "plain-design-composition";
+import {createEnum} from "@peryl/utils/createEnum";
+import {createCounter} from "@peryl/utils/createCounter";
+import {createProvider, getComponentCls, RenderNode, SimpleFunction} from "@peryl/react-compose";
 import {iPopupManagerHooks} from "./createPopupManagerHooks";
 import {iElementRect} from "../../../utils/getRowEl";
 import {ThemeSize, ThemeStatus} from "../../../uses/useStyle";
-import {createProvider} from "../../../utils/createProvider";
 
 /**
  * direction
@@ -43,7 +42,7 @@ export type iPopupTrigger = typeof ePopupTrigger.TYPE
  * @author  韦胜健
  * @date    2023.5.13 22:11
  */
-export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide'] as const);
+export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide', 'clip'] as const);
 export type iPopupAnimation = typeof ePopupAnimation.TYPE
 
 /*---------------------------------------popup utils-------------------------------------------*/
@@ -62,7 +61,8 @@ export interface iPopupDefaultOption {
   trigger: iPopupTrigger,                     // 触发类型
   animation: iPopupAnimation,                 // 动画类型
   destroyOnClose: boolean,                    // 关闭的时候销毁popup
-  to: string,                                 // 挂载到某个dom节点下
+  appendToBody: boolean,                      // 挂载到某个dom节点下
+  transformRefreshOnScroll: boolean,          // scroll的时候refresh使用transform来优化
   offset: number,                             // 在direction方向上的距离
   offsetAlign: number,                        // 在align方向上的偏移距离
   autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction
@@ -96,6 +96,10 @@ export interface iPopupCustomOption {
   minHeight?: string | number,                // 最小高度
   width?: string | number,                    // 固定宽度
   height?: string | number,                   // 固定高度
+  maxTop?: number | ((param: iPopupRefreshBuildParams) => number),// 最大top值
+  minTop?: number | ((param: iPopupRefreshBuildParams) => number),// 最小top值
+  maxLeft?: number | ((param: iPopupRefreshBuildParams) => number),// 最大left值
+  minLeft?: number | ((param: iPopupRefreshBuildParams) => number),// 最小left值
   noBackground?: boolean,                     // 禁用背景色
   noTransition?: boolean,                     // 禁用过度动画
   cover?: boolean,                            // 覆盖reference