@rxdrag/website-lib-core 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,10 +24,10 @@
     "@types/react-dom": "^18.2.7",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/entify-hooks": "0.2.40",
+    "@rxdrag/entify-hooks": "0.2.42",
+    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.55",
-    "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/eslint-config-custom": "0.2.12"
+    "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -35,7 +35,7 @@
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@rxdrag/rxcms-models": "0.3.46"
+    "@rxdrag/rxcms-models": "0.3.48"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/component-logic/collapse.ts

@@ -0,0 +1,61 @@
+import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "../controller";
+import { AnimationConfig, OpenableAnimationConfig } from "../motion";
+import { HTMLElementsWithChildren, IMotionProps } from "./motion";
+
+export type CollapseTriggerProps = IMotionProps & {
+  as?: HTMLElementsWithChildren;
+};
+
+export const defaultCollapsePanelOpen: AnimationConfig = {
+  fromTo: {
+    from: {
+      height: 0,
+      opacity: 0,
+    },
+    to: {
+      height: "auto",
+      opacity: 1,
+    },
+  },
+  duration: 0.6,
+  ease: "spring",
+};
+
+export const defaultCollapsePanelClose: AnimationConfig = {
+  fromTo: {
+    from: {
+      height: "auto",
+      opacity: 1,
+    },
+    to: {
+      height: 0,
+      opacity: 0,
+    },
+  },
+  duration: 0.25,
+  ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+};
+
+export const defaultCollapsePanelAnimation: OpenableAnimationConfig = {
+  open: defaultCollapsePanelOpen,
+  close: defaultCollapsePanelClose,
+};
+
+export function getCollapseDataAttrs(openableKey: string = crypto.randomUUID()) {
+  return {
+    [DATA_OPENABLE]: openableKey,
+    [DATA_OPENABLE_ROLE]: OpenAble.CollapseContainer,
+  };
+}
+
+export function getCollapseTriggerDataAttrs() {
+  return {
+    [DATA_OPENABLE_ROLE]: OpenAble.CollapseTrigger,
+  };
+}
+
+export function getCollapsePanelDataAttrs() {
+  return {
+    [DATA_OPENABLE_ROLE]: OpenAble.CollapsePanel,
+  };
+}

package/src/component-logic/index.ts

@@ -1,3 +1,4 @@
+export * from "./collapse";
 export * from "./motion";
 export * from "../controller/FlipController";
 export * from "./link";

package/src/component-logic/modal.ts

@@ -1,36 +1,36 @@
-import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "../controller";
+import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "../controller";
 import { HTMLElementsWithChildren, IMotionProps } from "./motion";
 
 export type ModalTriggerProps = IMotionProps & {
-  popupKey: string;
+  openableKey: string;
   callToAction?: string;
   as?: HTMLElementsWithChildren;
 };
 
-export function getModalDataAttrs(popupKey?: string) {
+export function getModalDataAttrs(openableKey?: string) {
   return {
-    [DATA_POPUP]: popupKey,
-    [DATA_POPUP_ROLE]: PopupRole.ModalContainer,
+    [DATA_OPENABLE]: openableKey,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalContainer,
   };
 }
 
-export function getModalCloserDataAttrs(popupKey?: string) {
+export function getModalCloserDataAttrs(openableKey?: string) {
   return {
-    [DATA_POPUP]: popupKey,
-    [DATA_POPUP_ROLE]: PopupRole.ModalCloser,
+    [DATA_OPENABLE]: openableKey,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalCloser,
   };
 }
 
-export function getModalPanelDataAttrs(popupKey?: string) {
+export function getModalPanelDataAttrs(openableKey?: string) {
   return {
-    [DATA_POPUP]: popupKey,
-    [DATA_POPUP_ROLE]: PopupRole.ModalPanel,
+    [DATA_OPENABLE]: openableKey,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalPanel,
   };
 }
 
-export function getModalTriggerDataAttrs(popupKey?: string) {
+export function getModalTriggerDataAttrs(openableKey?: string) {
   return {
-    [DATA_POPUP]: popupKey,
-    [DATA_POPUP_ROLE]: PopupRole.ModalTrigger,
+    [DATA_OPENABLE]: openableKey,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
   };
 }

package/src/component-logic/motion.ts

@@ -7,8 +7,8 @@ import {
   AnimationConfig,
   AosAnimationConfig,
   HoverAnimationConfig,
-  PopupAnimationConfig,
-  DATA_MOTION_POPUP,
+  OpenableAnimationConfig,
+  DATA_MOTION_OPENABLE,
   normalizePopupAnimation,
   normalizeAosAnimation,
 } from "../motion";
@@ -76,7 +76,7 @@ export interface IMotionProps {
   whileHover?: HoverAnimationConfig | string;
   whileInView?: AosAnimationConfig | string;
   whileTap?: AnimationConfig | string;
-  whilePopup?: PopupAnimationConfig | string;
+  whileOpenable?: OpenableAnimationConfig | string;
   whileSelection?: AnimationConfig | string;
   // 在flip的父元素中使用
   flipTransition?: AnimationConfig | string;
@@ -92,7 +92,7 @@ export interface MotionAttributes {
   [DATA_MOTION_HOVER]?: string;
   [DATA_MOTION_INVIEW]?: string;
   [DATA_MOTION_TAP]?: string;
-  [DATA_MOTION_POPUP]?: string;
+  [DATA_MOTION_OPENABLE]?: string;
   [DATA_MOTION_SELECTION]?: string;
   [DATA_MOTION_FLIP]?: string;
 }
@@ -103,7 +103,7 @@ export function getMotionProps(props: IMotionProps): MotionAttributes {
     whileHover,
     whileInView,
     whileTap,
-    whilePopup,
+    whileOpenable,
     whileSelection,
     flipTransition,
     class: className,
@@ -114,7 +114,7 @@ export function getMotionProps(props: IMotionProps): MotionAttributes {
   const normalizedWhileHover = normalizeAnimation(whileHover);
   const normalizedWhileInView = normalizeAosAnimation(whileInView);
   const normalizedWhileTap = normalizeAnimation(whileTap);
-  const normalizedWhilePopup = normalizePopupAnimation(whilePopup);
+  const normalizedWhilePopup = normalizePopupAnimation(whileOpenable);
   const normalizedWhileSelection = normalizeAnimation(whileSelection);
 
   const dataWhileHover = JSON.stringify(normalizedWhileHover);
@@ -126,7 +126,7 @@ export function getMotionProps(props: IMotionProps): MotionAttributes {
     [DATA_MOTION_HOVER]: dataWhileHover,
     [DATA_MOTION_INVIEW]: dataWhileInView,
     [DATA_MOTION_TAP]: dataWhileTap,
-    [DATA_MOTION_POPUP]: dataWhilePopup,
+    [DATA_MOTION_OPENABLE]: dataWhilePopup,
     [DATA_MOTION_SELECTION]: dataWhileSelection,
     [DATA_MOTION_FLIP]: JSON.stringify(flipTransition),
   };

package/src/component-logic/popover.ts

@@ -1,5 +1,5 @@
-import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "../controller";
-import { AnimationConfig, PopupAnimationConfig } from "../motion";
+import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "../controller";
+import { AnimationConfig, OpenableAnimationConfig } from "../motion";
 
 export const defaultPopoverPanelOpen: AnimationConfig = {
   fromTo: {
@@ -31,21 +31,21 @@ export const defaultPopoverPanelClose: AnimationConfig = {
   ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
 };
 
-export const defaultPopoverPanelAnimation: PopupAnimationConfig = {
+export const defaultPopoverPanelAnimation: OpenableAnimationConfig = {
   open: defaultPopoverPanelOpen,
   close: defaultPopoverPanelClose,
 };
 
-export function getPopoverDataAttrs(popupKey?: string) {
+export function getPopoverDataAttrs(openableKey?: string) {
   return {
-    [DATA_POPUP]: popupKey,
-    [DATA_POPUP_ROLE]: PopupRole.PopoverContainer,
+    [DATA_OPENABLE]: openableKey || crypto.randomUUID(),
+    [DATA_OPENABLE_ROLE]: OpenAble.PopoverContainer,
   };
 }
 
-export function getPopoverPanelDataAttrs(popupKey?: string) {
+export function getPopoverPanelDataAttrs(openableKey?: string) {
   return {
-    [DATA_POPUP]: popupKey || "",
-    [DATA_POPUP_ROLE]: PopupRole.PopoverPanel,
+    [DATA_OPENABLE]: openableKey || "",
+    [DATA_OPENABLE_ROLE]: OpenAble.PopoverPanel,
   };
 }

package/src/controller/CollapseController.ts

@@ -0,0 +1,130 @@
+import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "./consts";
+import { OpenableController } from "./OpenableController";
+
+export class CollapseController extends OpenableController {
+  private static instances: Record<string, CollapseController> = {};
+
+  private constructor(doc?: Document) {
+    super(doc);
+  }
+
+  public static getInstance(
+    key: string = "runtime",
+    doc?: Document
+  ): CollapseController {
+    if (!CollapseController.instances[key]) {
+      CollapseController.instances[key] = new CollapseController(doc);
+    } else if (doc) {
+      CollapseController.instances[key].setDoc(doc);
+    }
+    return CollapseController.instances[key];
+  }
+
+  /**
+   * 销毁指定 key 的实例
+   * @param key 实例的唯一标识
+   */
+  public static destroyInstance(key: string = "runtime"): void {
+    if (CollapseController.instances[key]) {
+      CollapseController.instances[key].destroy();
+      delete CollapseController.instances[key];
+    }
+  }
+
+  private setDoc(doc?: Document) {
+    this.doc = doc;
+  }
+
+  mount() {
+    super.mount();
+    const openables = this.doc?.querySelectorAll(`[${DATA_OPENABLE}]`);
+    openables?.forEach((openable) => {
+      const openableKey = openable.getAttribute(DATA_OPENABLE);
+
+      // 获取所有触发器
+      const allTriggers = openable?.querySelectorAll(
+        `[${DATA_OPENABLE_ROLE}="${OpenAble.CollapseTrigger}"]`
+      );
+
+      // 获取所有嵌套容器
+      const nestedContainers = openable?.querySelectorAll(
+        `[${DATA_OPENABLE_ROLE}="${OpenAble.PopoverContainer}"], 
+         [${DATA_OPENABLE_ROLE}="${OpenAble.ModalContainer}"], 
+         [${DATA_OPENABLE_ROLE}="${OpenAble.CollapseContainer}"]`
+      );
+
+      // 过滤出不在嵌套容器内的触发器
+      const filteredTriggers: Element[] = [];
+      allTriggers?.forEach((trigger) => {
+        let isInNestedContainer = false;
+
+        nestedContainers?.forEach((container) => {
+          if (container.contains(trigger) && container !== openable) {
+            isInNestedContainer = true;
+          }
+        });
+
+        if (!isInNestedContainer) {
+          filteredTriggers.push(trigger);
+        }
+      });
+
+      // 为过滤后的触发器添加事件处理
+      filteredTriggers.forEach((trigger) => {
+        if (openableKey) {
+          const unsub = this.initCollapseTrigger(
+            openableKey,
+            trigger as HTMLElement
+          );
+          this.unmountHandlers.push(unsub);
+        }
+      });
+    });
+  }
+  /**
+   * 初始化Modal的点击交互事件
+   * @param openableKey - 弹出层的唯一标识
+   * @param trigger - 触发器元素
+   * @returns 清理函数，用于移除事件监听器
+   */
+  public initCollapseTrigger(
+    openableKey: string,
+    trigger: HTMLElement
+  ): () => void {
+    if (!this.doc) return () => {};
+
+    try {
+      // 创建新的事件处理函数
+      const handleTriggerClick = () => {
+        const container = this.getOpenableContainer(openableKey);
+        if (container) {
+          if (container.classList.contains("open")) {
+            // 传递容器元素而不是触发器，确保正确移除open类
+            this.close(openableKey, container);
+          } else {
+            this.open(openableKey, trigger);
+          }
+        }
+      };
+
+      // 添加新的事件监听器
+      trigger.addEventListener("click", handleTriggerClick);
+
+      return () => {
+        trigger.removeEventListener("click", handleTriggerClick);
+      };
+    } catch (error) {
+      console.error(`初始化Modal事件失败: ${openableKey}`, error);
+      return () => {};
+    }
+  }
+
+  unmount(): void {
+    super.unmount();
+  }
+}
+
+export const collapse = CollapseController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);

package/src/controller/ModalController.ts

@@ -1,7 +1,7 @@
-import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "./consts";
-import { PopupController } from "./popup";
+import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "./consts";
+import { OpenableController } from "./OpenableController";
 
-export class ModalController extends PopupController {
+export class ModalController extends OpenableController {
   private static instances: Record<string, ModalController> = {};
 
   private constructor(doc?: Document) {
@@ -37,26 +37,26 @@ export class ModalController extends PopupController {
 
   mount() {
     super.mount();
-    const popups = this.doc?.querySelectorAll(`[${DATA_POPUP}]`);
+    const popups = this.doc?.querySelectorAll(`[${DATA_OPENABLE}]`);
     popups?.forEach((popup) => {
-      const popupKey = popup.getAttribute(DATA_POPUP);
+      const openableKey = popup.getAttribute(DATA_OPENABLE);
       //处理鼠标交互事件
-      if (popupKey && popup) {
-        if (popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.ModalTrigger) {
-          const unsub = this.initModalTrigger(popupKey, popup as HTMLElement);
+      if (openableKey && popup) {
+        if (popup.getAttribute(DATA_OPENABLE_ROLE) === OpenAble.ModalTrigger) {
+          const unsub = this.initModalTrigger(openableKey, popup as HTMLElement);
           this.unmountHandlers.push(unsub);
         }
       }
       //获取所有 ModalCloser 实例，并处理点击事件
       //TODO：未处理嵌套跟Modal外部关闭的情况
       const closers = popup?.querySelectorAll(
-        `[${DATA_POPUP_ROLE}="${PopupRole.ModalCloser}"]`
+        `[${DATA_OPENABLE_ROLE}="${OpenAble.ModalCloser}"]`
       );
 
       closers?.forEach((closer) => {
         // 使用initModalCloser函数处理关闭按钮事件
-        if (popupKey) {
-          const unsub = this.initModalCloser(popupKey, closer as HTMLElement);
+        if (openableKey) {
+          const unsub = this.initModalCloser(openableKey, closer as HTMLElement);
           this.unmountHandlers.push(unsub);
         }
       });
@@ -64,18 +64,18 @@ export class ModalController extends PopupController {
   }
   /**
    * 初始化Modal的点击交互事件
-   * @param popupKey - 弹出层的唯一标识
+   * @param openableKey - 弹出层的唯一标识
    * @param trigger - 触发器元素
    * @returns 清理函数，用于移除事件监听器
    */
-  public initModalTrigger(popupKey: string, trigger: HTMLElement): () => void {
+  public initModalTrigger(openableKey: string, trigger: HTMLElement): () => void {
     if (!this.doc) return () => {};
 
     try {
       // 创建新的事件处理函数
       const handleTriggerClick = () => {
         // 查找 Modal 容器
-        this.open(popupKey, trigger);
+        this.open(openableKey, trigger);
       };
 
       // 添加新的事件监听器
@@ -85,24 +85,24 @@ export class ModalController extends PopupController {
         trigger.removeEventListener("click", handleTriggerClick);
       };
     } catch (error) {
-      console.error(`初始化Modal事件失败: ${popupKey}`, error);
+      console.error(`初始化Modal事件失败: ${openableKey}`, error);
       return () => {};
     }
   }
 
   /**
    * 初始化Modal关闭按钮的点击交互事件
-   * @param popupKey - 弹出层的唯一标识
+   * @param openableKey - 弹出层的唯一标识
    * @param closer - 关闭按钮元素
    * @returns 清理函数，用于移除事件监听器
    */
-  public initModalCloser(popupKey: string, closer: HTMLElement): () => void {
+  public initModalCloser(openableKey: string, closer: HTMLElement): () => void {
     if (!this.doc) return () => {};
 
     try {
       // 创建新的事件处理函数
       const handleCloserClick = () => {
-        this.close(popupKey);
+        this.close(openableKey);
       };
 
       // 添加新的事件监听器
@@ -112,7 +112,7 @@ export class ModalController extends PopupController {
         closer.removeEventListener("click", handleCloserClick);
       };
     } catch (error) {
-      console.error(`初始化Modal关闭按钮事件失败: ${popupKey}`, error);
+      console.error(`初始化Modal关闭按钮事件失败: ${openableKey}`, error);
       return () => {};
     }
   }