plain-design 1.0.0-beta.71 → 1.0.0-beta.72

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

@@ -1,116 +1,116 @@
-import {iPopupEditorOption} from "./popup-editor.utils";
-import {computed, onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {createPopup} from "../usePopup/usePopup";
-import {iPopupUseOption} from "../usePopup/utils/popup.utils";
-import {createReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
-
-export function createPopupEditor(
-  {
-    option, onBeforeUnmount,
-  }: {
-    option: iPopupEditorOption,
-    onBeforeUnmount?: (handler: SimpleFunction) => void,
-  }
-) {
-
-  const { effects } = createEffects();
-
-  const popup = createPopup(effects.push);
-
-  const reference = computed(() => {
-    let reference = option.reference() as any;
-    if (!reference) {return null;}
-    if ('$el' in reference) {reference = reference.$el;}
-    return reference;
-  });
-
-  const getOption = (): iPopupUseOption => {
-    const popperAttrs = option.popperAttrs?.();
-    return {
-      id: popup.popupId,
-      reference: reference.value,
-      render: () => option.popper(),
-      trigger: 'click',
-      animation: 'drop',
-      placement: 'bottom-start',
-      boundary: 'body',
-      toggleOnClickReference: !option.alwaysShowOnClickReference,
-      noArrow: true,
-      autoSwitchDirection: true,
-      refreshOnScroll: true,
-
-      ...popperAttrs,
-
-      onShow: () => {
-        option.onShow?.();
-        popperAttrs?.onShow?.();
-      },
-      onHide: () => {
-        option.onHide?.();
-        popperAttrs?.onHide?.();
-      },
-      onOpen: () => {
-        option.onOpen?.();
-        popperAttrs?.onOpen?.();
-      },
-      onClose: () => {
-        option.onClose?.();
-        popperAttrs?.onClose?.();
-      },
-    };
-  };
-
-  /**
-   * 初始化reference的trigger事件监听
-   * @author  韦胜健
-   * @date    2023/5/16 16:11
-   */
-  createReferenceTrigger({
-    get: () => ({ reference: reference.value, trigger: option.popperAttrs?.().trigger || 'click' }),
-    manager: popup.$popup.manager,
-    getOption: () => getOption(),
-    onBeforeUnmount: effects.push,
-  });
-
-  const methods = {
-    show: () => {
-      popup.$popup.show(getOption());
-    },
-    hide: () => {
-      popup.$popup.hide(getOption().id);
-    },
-    toggle: () => {
-      popup.$popup.toggle(getOption());
-    },
-    dispose: () => {
-      methods.hide();
-      effects.clear();
-    },
-    isShow: () => popup.$popup.manager.methods.isShow(getOption())
-  };
-
-  effects.push(
-    watch(() => option.popperAttrs?.(), () => {
-      popup.$popup.update(getOption());
-    })
-  );
-
-  effects.push(() => {
-    popup.$popup.manager.methods.remove(popup.popupId);
-  });
-
-  onBeforeUnmount?.(() => effects.clear());
-
-  return {
-    methods,
-  };
-}
-
-export type iPopupEditor = ReturnType<typeof createPopupEditor>
-
-export type iPopupEditorUseOption = Partial<iPopupUseOption>
-
-export function usePopperEditor(option: iPopupEditorOption) {
-  return createPopupEditor({ option, onBeforeUnmount });
-}
+import {iPopupEditorOption} from "./popup-editor.utils";
+import {computed, onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {createPopup} from "../usePopup/usePopup";
+import {iPopupUseOption} from "../usePopup/utils/popup.utils";
+import {createReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
+
+export function createPopupEditor(
+  {
+    option, onBeforeUnmount,
+  }: {
+    option: iPopupEditorOption,
+    onBeforeUnmount?: (handler: SimpleFunction) => void,
+  }
+) {
+
+  const { effects } = createEffects();
+
+  const popup = createPopup(effects.push);
+
+  const reference = computed(() => {
+    let reference = option.reference() as any;
+    if (!reference) {return null;}
+    if ('$el' in reference) {reference = reference.$el;}
+    return reference;
+  });
+
+  const getOption = (): iPopupUseOption => {
+    const popperAttrs = option.popperAttrs?.();
+    return {
+      id: popup.popupId,
+      reference: reference.value,
+      render: () => option.popper(),
+      trigger: 'click',
+      animation: 'drop',
+      placement: 'bottom-start',
+      boundary: 'body',
+      toggleOnClickReference: !option.alwaysShowOnClickReference,
+      noArrow: true,
+      autoSwitchDirection: true,
+      refreshOnScroll: true,
+
+      ...popperAttrs,
+
+      onShow: () => {
+        option.onShow?.();
+        popperAttrs?.onShow?.();
+      },
+      onHide: () => {
+        option.onHide?.();
+        popperAttrs?.onHide?.();
+      },
+      onOpen: () => {
+        option.onOpen?.();
+        popperAttrs?.onOpen?.();
+      },
+      onClose: () => {
+        option.onClose?.();
+        popperAttrs?.onClose?.();
+      },
+    };
+  };
+
+  /**
+   * 初始化reference的trigger事件监听
+   * @author  韦胜健
+   * @date    2023/5/16 16:11
+   */
+  createReferenceTrigger({
+    get: () => ({ reference: reference.value, trigger: option.popperAttrs?.().trigger || 'click' }),
+    manager: popup.$popup.manager,
+    getOption: () => getOption(),
+    onBeforeUnmount: effects.push,
+  });
+
+  const methods = {
+    show: () => {
+      popup.$popup.show(getOption());
+    },
+    hide: () => {
+      popup.$popup.hide(getOption().id);
+    },
+    toggle: () => {
+      popup.$popup.toggle(getOption());
+    },
+    dispose: () => {
+      methods.hide();
+      effects.clear();
+    },
+    isShow: () => popup.$popup.manager.methods.isShow(getOption())
+  };
+
+  effects.push(
+    watch(() => option.popperAttrs?.(), () => {
+      popup.$popup.update(getOption());
+    })
+  );
+
+  effects.push(() => {
+    popup.$popup.manager.methods.remove(popup.popupId);
+  });
+
+  onBeforeUnmount?.(() => effects.clear());
+
+  return {
+    methods,
+  };
+}
+
+export type iPopupEditor = ReturnType<typeof createPopupEditor>
+
+export type iPopupEditorUseOption = Partial<iPopupUseOption>
+
+export function usePopperEditor(option: iPopupEditorOption) {
+  return createPopupEditor({ option, onBeforeUnmount });
+}

package/src/packages/components/usePopupEditor/popup-editor.utils.ts

@@ -1,15 +1,15 @@
-import {RenderNode} from "plain-design-composition";
-import {iPopupEditorUseOption} from "./index";
-
-export interface iPopupEditorOption {
-  alwaysShowOnClickReference?: () => boolean,
-
-  reference: () => HTMLElement | null | undefined,
-  popper: () => RenderNode,
-  popperAttrs?: () => iPopupEditorUseOption
-
-  onShow?: () => void,
-  onHide?: () => void,
-  onOpen?: () => void,
-  onClose?: () => void,
-}
+import {RenderNode} from "plain-design-composition";
+import {iPopupEditorUseOption} from "./index";
+
+export interface iPopupEditorOption {
+  alwaysShowOnClickReference?: () => boolean,
+
+  reference: () => HTMLElement | null | undefined,
+  popper: () => RenderNode,
+  popperAttrs?: () => iPopupEditorUseOption
+
+  onShow?: () => void,
+  onHide?: () => void,
+  onOpen?: () => void,
+  onClose?: () => void,
+}

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

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

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

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

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

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

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

@@ -1,188 +1,188 @@
-import {createEffects} from 'plain-utils/utils/createEffects';
-import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "plain-design-composition";
-import {iPopupService, usePopup} from "../usePopup/usePopup";
-import {iPopupUseOption} from "../usePopup/utils/popup.utils";
-
-/**
- * 提供两种用法，第一种实时地创建tooltip
- * @author  韦胜健
- * @date    2023.1.21 14:06
- */
-export function createTooltip(option: iTooltipServiceOption, popup: iPopupService) {
-  const { effects } = createEffects();
-
-  const state = reactive({
-    isEnter: false,
-    isOverflow: false,
-  });
-
-  const getOption = (): iPopupUseOption => {
-    const { message, reference, ...leftTooltipOption } = option.tooltip();
-    return {
-      popperClass: getComponentCls('tooltip'),
-      id: popup.popupId,
-      reference: reference!,
-      dark: true,
-      placement: 'top',
-      animation: 'fade',
-      size: 'mini',
-      type: 'tooltip',
-      hideOnScroll: true,
-      hideOnClickReference: true,
-      trigger: 'hover',
-      minWidth: 68,
-      render: () => typeof message === "function" ? message() : message,
-      ...leftTooltipOption,
-    };
-  };
-
-  const referenceEnterHandler = (() => {
-    const staticState = {
-      reference: null as null | undefined | HTMLElement,
-    };
-    const handler = {
-      onMouseenter: () => {
-        state.isEnter = true;
-        if (option.overflow) {
-          if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
-            state.isOverflow = true;
-          } else {
-            state.isOverflow = false;
-          }
-        }
-      },
-      onMouseleave: () => {
-        state.isEnter = false;
-      },
-    };
-    const clear = () => {
-      /*关闭option对应的tooltip*/
-      tooltipHandler.close();
-      /*注销监听鼠标事件*/
-      if (!!staticState.reference) {
-        staticState.reference.removeEventListener('mouseenter', handler.onMouseenter);
-        staticState.reference.removeEventListener('mouseleave', handler.onMouseleave);
-        staticState.reference = null;
-      }
-    };
-    effects.push(
-      watch(
-        () => option.tooltip(),
-        ({ message, reference }) => {
-          if (!reference) {
-            clear();
-            return;
-          }
-          if (!message) {
-            if (!option.ignoreEmptyMessage) {
-              clear();
-              return;
-            }
-          } else {
-            if (option.overflow) {
-              nextTick().then(() => {
-                const { scrollWidth, offsetWidth } = reference;
-                state.isOverflow = scrollWidth > offsetWidth;
-              });
-            }
-          }
-          if (!!staticState.reference) {
-            if (staticState.reference !== reference) {
-              /*新的reference与老的不同，先清空之前的监听动作并且关闭tooltip，再重新初始化监听动作*/
-              clear();
-            } else {
-              /*新的reference与老的相同，只是message发生了变化，不做任何处理*/
-              return;
-            }
-          }
-          staticState.reference = reference;
-          staticState.reference.addEventListener('mouseenter', handler.onMouseenter);
-          staticState.reference.addEventListener('mouseleave', handler.onMouseleave);
-        },
-      )
-    );
-    effects.push(clear);
-    return { clear };
-  })();
-
-  const tooltipHandler = (() => {
-    effects.push(
-      watch(
-        () => option.tooltip().message,
-        val => {
-          popup.$popup.update(getOption());
-          const reference = option.tooltip().reference;
-          if (!!reference && val != null) {
-            if (!state.isEnter && (reference == document.activeElement || reference.contains(document.activeElement))) {
-              state.isEnter = true;
-            }
-          }
-        }
-      )
-    );
-    effects.push(
-      watch(
-        (): boolean => {
-          const { reference, message } = option.tooltip();
-          if (reference == null || message == null || (typeof message === "string" && !message.trim().length)) {
-            return false;
-          }
-          if (option.alwaysShow) {
-            return true;
-          }
-          if (!state.isEnter) {
-            return false;
-          }
-          if (option.overflow && !state.isOverflow) {
-            return false;
-          }
-          return true;
-        },
-        (flag) => {
-          if (!flag) {
-            close();
-          } else {
-            popup.$popup.show(getOption());
-          }
-        },
-      )
-    );
-    const close = () => popup.$popup.hide(popup.popupId);
-    effects.push(close);
-    return { close };
-  })();
-
-  const clear = () => {
-    effects.clear();
-    popup.dispose();
-  };
-
-  return { referenceEnterHandler, tooltipHandler, clear };
-}
-
-/**
- * 第二种，在组件初始化的时候创建的tooltip
- * 在组件setup过程中通过reactive函数创建的响应式状态，如果被其他组件渲染所依赖，当这个响应式变量发生变化时也会触发当前这个组件重新渲染
- * 为了避免当前组件触发不必要的渲染，只能是将reactive创建变量的时机转移到setup执行之外，由此出现了createTooltip的使用方式
- * @author  韦胜健
- * @date    2023.1.21 14:07
- */
-export function useTooltip(option: iTooltipServiceOption) {
-  const popup = usePopup();
-  const val = createTooltip(option, popup);
-  onBeforeUnmount(() => {
-    val.clear();
-    popup.dispose();
-  });
-  return val;
-}
-
-export interface iTooltipServiceOption {
-  alwaysShow?: boolean,
-  /*传递给tooltip的水星*/
-  tooltip: () => Omit<iPopupUseOption, 'id' | 'reference' | 'render'> & { reference: HTMLElement | null | undefined, message: any },
-  /*是否在文本溢出时才会显示消息*/
-  overflow?: boolean,
-  /*是否忽略空白消息，当没有消息的时候也监听reference的鼠标事件*/
-  ignoreEmptyMessage?: boolean,
-}
+import {createEffects} from 'plain-utils/utils/createEffects';
+import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "plain-design-composition";
+import {iPopupService, usePopup} from "../usePopup/usePopup";
+import {iPopupUseOption} from "../usePopup/utils/popup.utils";
+
+/**
+ * 提供两种用法，第一种实时地创建tooltip
+ * @author  韦胜健
+ * @date    2023.1.21 14:06
+ */
+export function createTooltip(option: iTooltipServiceOption, popup: iPopupService) {
+  const { effects } = createEffects();
+
+  const state = reactive({
+    isEnter: false,
+    isOverflow: false,
+  });
+
+  const getOption = (): iPopupUseOption => {
+    const { message, reference, ...leftTooltipOption } = option.tooltip();
+    return {
+      popperClass: getComponentCls('tooltip'),
+      id: popup.popupId,
+      reference: reference!,
+      dark: true,
+      placement: 'top',
+      animation: 'fade',
+      size: 'mini',
+      type: 'tooltip',
+      hideOnScroll: true,
+      hideOnClickReference: true,
+      trigger: 'hover',
+      minWidth: 68,
+      render: () => typeof message === "function" ? message() : message,
+      ...leftTooltipOption,
+    };
+  };
+
+  const referenceEnterHandler = (() => {
+    const staticState = {
+      reference: null as null | undefined | HTMLElement,
+    };
+    const handler = {
+      onMouseenter: () => {
+        state.isEnter = true;
+        if (option.overflow) {
+          if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
+            state.isOverflow = true;
+          } else {
+            state.isOverflow = false;
+          }
+        }
+      },
+      onMouseleave: () => {
+        state.isEnter = false;
+      },
+    };
+    const clear = () => {
+      /*关闭option对应的tooltip*/
+      tooltipHandler.close();
+      /*注销监听鼠标事件*/
+      if (!!staticState.reference) {
+        staticState.reference.removeEventListener('mouseenter', handler.onMouseenter);
+        staticState.reference.removeEventListener('mouseleave', handler.onMouseleave);
+        staticState.reference = null;
+      }
+    };
+    effects.push(
+      watch(
+        () => option.tooltip(),
+        ({ message, reference }) => {
+          if (!reference) {
+            clear();
+            return;
+          }
+          if (!message) {
+            if (!option.ignoreEmptyMessage) {
+              clear();
+              return;
+            }
+          } else {
+            if (option.overflow) {
+              nextTick().then(() => {
+                const { scrollWidth, offsetWidth } = reference;
+                state.isOverflow = scrollWidth > offsetWidth;
+              });
+            }
+          }
+          if (!!staticState.reference) {
+            if (staticState.reference !== reference) {
+              /*新的reference与老的不同，先清空之前的监听动作并且关闭tooltip，再重新初始化监听动作*/
+              clear();
+            } else {
+              /*新的reference与老的相同，只是message发生了变化，不做任何处理*/
+              return;
+            }
+          }
+          staticState.reference = reference;
+          staticState.reference.addEventListener('mouseenter', handler.onMouseenter);
+          staticState.reference.addEventListener('mouseleave', handler.onMouseleave);
+        },
+      )
+    );
+    effects.push(clear);
+    return { clear };
+  })();
+
+  const tooltipHandler = (() => {
+    effects.push(
+      watch(
+        () => option.tooltip().message,
+        val => {
+          popup.$popup.update(getOption());
+          const reference = option.tooltip().reference;
+          if (!!reference && val != null) {
+            if (!state.isEnter && (reference == document.activeElement || reference.contains(document.activeElement))) {
+              state.isEnter = true;
+            }
+          }
+        }
+      )
+    );
+    effects.push(
+      watch(
+        (): boolean => {
+          const { reference, message } = option.tooltip();
+          if (reference == null || message == null || (typeof message === "string" && !message.trim().length)) {
+            return false;
+          }
+          if (option.alwaysShow) {
+            return true;
+          }
+          if (!state.isEnter) {
+            return false;
+          }
+          if (option.overflow && !state.isOverflow) {
+            return false;
+          }
+          return true;
+        },
+        (flag) => {
+          if (!flag) {
+            close();
+          } else {
+            popup.$popup.show(getOption());
+          }
+        },
+      )
+    );
+    const close = () => popup.$popup.hide(popup.popupId);
+    effects.push(close);
+    return { close };
+  })();
+
+  const clear = () => {
+    effects.clear();
+    popup.dispose();
+  };
+
+  return { referenceEnterHandler, tooltipHandler, clear };
+}
+
+/**
+ * 第二种，在组件初始化的时候创建的tooltip
+ * 在组件setup过程中通过reactive函数创建的响应式状态，如果被其他组件渲染所依赖，当这个响应式变量发生变化时也会触发当前这个组件重新渲染
+ * 为了避免当前组件触发不必要的渲染，只能是将reactive创建变量的时机转移到setup执行之外，由此出现了createTooltip的使用方式
+ * @author  韦胜健
+ * @date    2023.1.21 14:07
+ */
+export function useTooltip(option: iTooltipServiceOption) {
+  const popup = usePopup();
+  const val = createTooltip(option, popup);
+  onBeforeUnmount(() => {
+    val.clear();
+    popup.dispose();
+  });
+  return val;
+}
+
+export interface iTooltipServiceOption {
+  alwaysShow?: boolean,
+  /*传递给tooltip的水星*/
+  tooltip: () => Omit<iPopupUseOption, 'id' | 'reference' | 'render'> & { reference: HTMLElement | null | undefined, message: any },
+  /*是否在文本溢出时才会显示消息*/
+  overflow?: boolean,
+  /*是否忽略空白消息，当没有消息的时候也监听reference的鼠标事件*/
+  ignoreEmptyMessage?: boolean,
+}