@rxdrag/website-lib-core 0.0.103 → 0.0.105

package/src/component-logic/popover.ts

@@ -1,51 +0,0 @@
-import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "../controller";
-import { AnimationConfig, OpenableAnimationConfig } from "../motion";
-
-export const defaultPopoverPanelOpen: AnimationConfig = {
-  fromTo: {
-    from: {
-      height: 0,
-      opacity: 0,
-    },
-    to: {
-      height: "auto",
-      opacity: 1,
-    },
-  },
-  duration: 0.6,
-  ease: "spring",
-};
-
-export const defaultPopoverPanelClose: 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 defaultPopoverPanelAnimation: OpenableAnimationConfig = {
-  open: defaultPopoverPanelOpen,
-  close: defaultPopoverPanelClose,
-};
-
-export function getPopoverDataAttrs(openableKey?: string) {
-  return {
-    [DATA_OPENABLE]: openableKey || crypto.randomUUID(),
-    [DATA_OPENABLE_ROLE]: OpenAble.PopoverContainer,
-  };
-}
-
-export function getPopoverPanelDataAttrs(openableKey?: string) {
-  return {
-    [DATA_OPENABLE]: openableKey || "",
-    [DATA_OPENABLE_ROLE]: OpenAble.PopoverPanel,
-  };
-}

package/src/component-logic/tabs.ts

@@ -1,10 +0,0 @@
-export const DATA_TABS = "data-tabs";
-export const DATA_TABS_HEADER = "data-tabs-header";
-export const DATA_TABS_PANEL = "data-tabs-panel";
-export const DATA_TABS_TAB = "data-tabs-tab";
-export const DATA_TABS_BODY = "data-tabs-body";
-//当前选中的选项卡
-export const DATA_TABS_SELECTION = "data-tabs-selection";
-//选中动画,存动画数据
-export const DATA_MOTION_SELECTION = "data-motion-selection";
-export const DATA_MOTION_FLIP = "data-motion-flip";

package/src/controller/AnimateController.ts

@@ -1,138 +0,0 @@
-import { AnimationConfig, DATA_MOTION } from "../motion";
-import { applyAnimation } from "./applyAnimation";
-import { applyInitialState } from "./applyInitialState";
-
-export class AnimateController {
-  private static instance: Record<string, AnimateController> = {};
-  private animations: gsap.core.Tween[] = [];
-  private unmountHandlers: Array<() => void> = [];
-  private registeredElements: WeakSet<Element> = new WeakSet();
-
-  /**
-   * 私有构造函数，防止外部直接创建实例
-   * @param clientDoc - 可选的Document对象，在SSR环境中可能为undefined
-   */
-  private constructor(private clientDoc?: Document) {}
-
-  /**
-   * 获取单例实例
-   * @param key - 实例的唯一标识，默认为"default"
-   * @param clientDoc - 可选的Document对象
-   * @returns AnimateController 实例
-   */
-  public static getInstance(
-    key: string = "runtime",
-    clientDoc?: Document
-  ): AnimateController {
-    if (!AnimateController.instance[key]) {
-      // 在服务器端渲染时，document 不存在，传入 undefined
-      const doc =
-        clientDoc || (typeof document !== "undefined" ? document : undefined);
-      AnimateController.instance[key] = new AnimateController(doc);
-    }
-    // 这个代码很有必要，需要替换掉旧doc，因为react不确定刷新的问题
-    if (clientDoc) {
-      AnimateController.instance[key].destroy();
-      AnimateController.instance[key].setClientDoc(clientDoc);
-    }
-    return AnimateController.instance[key];
-  }
-
-  /**
-   * 销毁指定的实例
-   * @param key - 实例的唯一标识
-   */
-  public static destroyInstance(key: string = "runtime"): void {
-    if (AnimateController.instance[key]) {
-      AnimateController.instance[key].destroy();
-      delete AnimateController.instance[key];
-    }
-  }
-
-  /**
-   * 重置所有实例（主要用于测试）
-   */
-  public static resetAll(): void {
-    Object.keys(AnimateController.instance).forEach((key) => {
-      AnimateController.instance[key].destroy();
-    });
-    AnimateController.instance = {};
-  }
-
-  /**
-   * 设置客户端文档对象
-   * @param clientDoc - Document对象
-   */
-  public setClientDoc(clientDoc: Document): void {
-    this.clientDoc = clientDoc;
-  }
-
-  /**
-   * 挂载动画控制器，初始化所有动画
-   * @param clientDoc - 可选的Document对象，如果未提供则使用构造函数中的文档
-   */
-  public mount(clientDoc?: Document): void {
-    const doc = clientDoc || this.clientDoc;
-    if (!doc) return;
-
-    // 查找所有带有 data-motion 属性的元素
-    const elements = doc.querySelectorAll(`[${DATA_MOTION}]`);
-    // 初始化新的动画
-    elements.forEach((element) => {
-      // 检查元素是否已经被注册过
-      if (this.registeredElements.has(element)) {
-        return; // 如果已经注册过，则跳过
-      }
-
-      if (
-        doc.defaultView &&
-        element instanceof doc.defaultView.HTMLElement &&
-        element.dataset.motion
-      ) {
-        try {
-          const animation = JSON.parse(element.dataset.motion) as
-            | AnimationConfig
-            | undefined;
-          if (animation) {
-            if (animation.initial) {
-              applyInitialState(element, animation.initial);
-            }
-            // 执行动画
-            const tween = applyAnimation(element, animation);
-            if (tween) {
-              this.animations.push(tween);
-              // 将元素添加到已注册集合中
-              this.registeredElements.add(element);
-            }
-          }
-        } catch (error) {
-          console.error("解析动画配置失败", error);
-        }
-      }
-    });
-  }
-
-  /**
-   * 销毁动画控制器，清理所有动画和事件监听器
-   */
-  public destroy(): void {
-    // 停止所有动画
-    this.animations.forEach((tween) => {
-      tween.kill();
-    });
-    this.animations = [];
-
-    // 执行所有卸载处理函数
-    this.unmountHandlers.forEach((handler) => handler());
-    this.unmountHandlers = [];
-
-    // 创建新的 WeakSet 来清理已注册元素的跟踪
-    this.registeredElements = new WeakSet();
-  }
-}
-
-// 导出默认实例，方便直接使用
-export const animate = AnimateController.getInstance(
-  "runtime",
-  typeof document !== "undefined" ? document : undefined
-);

package/src/controller/AosController.ts

@@ -1,240 +0,0 @@
-import { merge } from "lodash-es";
-import {
-  AnimationConfig,
-  AosAnimationConfig,
-  DATA_MOTION_INVIEW,
-} from "../motion";
-import { applyAnimation } from "./applyAnimation";
-
-export class AosController {
-  private static instances: Record<string, AosController> = {};
-  private doc?: Document;
-  private unmountHandlers: Array<() => void> = [];
-  private intersectionObserver?: IntersectionObserver;
-
-  private constructor(doc?: Document) {
-    this.doc = doc;
-  }
-
-  /**
-   * 获取 AosController 实例
-   * @param key 实例的唯一标识，默认为 "runtime"
-   * @param doc 文档对象
-   * @returns AosController 实例
-   */
-  public static getInstance(
-    key: string = "runtime",
-    doc?: Document
-  ): AosController {
-    if (!AosController.instances[key]) {
-      AosController.instances[key] = new AosController(doc);
-    } else if (doc) {
-      AosController.instances[key].setDoc(doc);
-    }
-    return AosController.instances[key];
-  }
-
-  /**
-   * 销毁指定 key 的实例
-   * @param key 实例的唯一标识
-   */
-  public static destroyInstance(key: string = "runtime"): void {
-    if (AosController.instances[key]) {
-      AosController.instances[key].destroy();
-      delete AosController.instances[key];
-    }
-  }
-
-  /**
-   * 重置所有实例
-   */
-  public static resetAll(): void {
-    Object.keys(AosController.instances).forEach((key) => {
-      AosController.destroyInstance(key);
-    });
-  }
-
-  /**
-   * 设置文档对象
-   * @param doc 文档对象
-   */
-  private setDoc(doc?: Document) {
-    this.doc = doc;
-  }
-
-  /**
-   * 挂载 AOS 动画控制器
-   * @param clientDoc 文档对象，默认为 document
-   */
-  public mount(): void {
-    // 如果没有可用的文档对象，则直接返回
-    if (!this.doc) return;
-
-    // 清理之前的观察器和处理函数
-    this.destroy();
-
-    // 创建 IntersectionObserver 用于检测元素进入视口
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const element = entry.target as HTMLElement;
-            this.handleElementEnterViewport(element);
-          } else {
-            const element = entry.target as HTMLElement;
-            this.handleElementLeaveViewport(element);
-          }
-        });
-      },
-      {
-        threshold: 0.1, // 元素10%可见时触发
-        root: null, // 使用视口作为根
-      }
-    );
-
-    // 查找所有的data-motion-inview元素
-    const inviewElements = this.doc.querySelectorAll(`[${DATA_MOTION_INVIEW}]`);
-
-    inviewElements.forEach((element) => {
-      if (
-        this.doc?.defaultView &&
-        element instanceof this.doc.defaultView.HTMLElement &&
-        element.dataset.motionInview
-      ) {
-        try {
-          // 初始化元素样式
-          this.initElementStyle(element as HTMLElement);
-
-          // 添加到观察器
-          this.intersectionObserver?.observe(element);
-
-          // 添加清理函数
-          this.unmountHandlers.push(() => {
-            this.intersectionObserver?.unobserve(element);
-          });
-        } catch (error) {
-          console.error("初始化元素AOS动画时出错:", element, error);
-        }
-      }
-    });
-  }
-
-  /**
-   * 初始化元素样式
-   * @param element 要初始化的元素
-   */
-  private initElementStyle(element: HTMLElement): void {
-    try {
-      const inViewAnimation = element.dataset.motionInview
-        ? (JSON.parse(element.dataset.motionInview) as
-            | AosAnimationConfig
-            | undefined)
-        : undefined;
-
-      if (!inViewAnimation) return;
-
-      // 如果设置了once属性，初始化时可能需要设置元素透明度为0
-      if (
-        inViewAnimation.once &&
-        inViewAnimation.enter &&
-        !element.dataset.motionViewportEnter
-      ) {
-        // 如果是淡入动画，初始透明度可能需要设置为0
-        if (!element.style.opacity && inViewAnimation.enter.opacity === 1) {
-          element.style.opacity = "0";
-        }
-      }
-    } catch (error) {
-      console.error("初始化元素样式时出错:", element, error);
-    }
-  }
-
-  /**
-   * 处理元素进入视口
-   * @param element 进入视口的元素
-   */
-  private handleElementEnterViewport(element: HTMLElement): void {
-    try {
-      const animation = element.dataset.motion
-        ? (JSON.parse(element.dataset.motion) as AnimationConfig | undefined)
-        : undefined;
-      const inViewAnimation = element.dataset.motionInview
-        ? (JSON.parse(element.dataset.motionInview) as
-            | AosAnimationConfig
-            | undefined)
-        : undefined;
-
-      if (!inViewAnimation) return;
-
-      const needAction =
-        (!element.dataset.motionViewportEnter && inViewAnimation.once) ||
-        !inViewAnimation.once;
-
-      if (inViewAnimation.enter && needAction) {
-        element.dataset.motionViewportEnter = "true";
-        applyAnimation(element, merge(animation, inViewAnimation.enter), {
-          ensureVisibleOnComplete: inViewAnimation.once,
-        });
-
-        // 如果是一次性动画，不再观察
-        if (inViewAnimation.once) {
-          this.intersectionObserver?.unobserve(element);
-        }
-      }
-    } catch (error) {
-      console.error("处理元素进入视口时出错:", element, error);
-    }
-  }
-
-  /**
-   * 处理元素离开视口
-   * @param element 离开视口的元素
-   */
-  private handleElementLeaveViewport(element: HTMLElement): void {
-    try {
-      const animation = element.dataset.motion
-        ? (JSON.parse(element.dataset.motion) as AnimationConfig | undefined)
-        : undefined;
-      const inViewAnimation = element.dataset.motionInview
-        ? (JSON.parse(element.dataset.motionInview) as
-            | AosAnimationConfig
-            | undefined)
-        : undefined;
-
-      if (!inViewAnimation || inViewAnimation.once) return;
-
-      if (inViewAnimation.exit) {
-        applyAnimation(element, merge(animation, inViewAnimation.exit));
-      }
-    } catch (error) {
-      console.error("处理元素离开视口时出错:", element, error);
-    }
-  }
-
-  /**
-   * 销毁 AOS 动画控制器
-   */
-  public destroy(): void {
-    // 断开所有观察
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = undefined;
-    }
-
-    // 执行所有卸载处理函数
-    this.unmountHandlers.forEach((handler) => {
-      try {
-        handler();
-      } catch (error) {
-        console.error("执行卸载处理函数失败", error);
-      }
-    });
-    this.unmountHandlers = [];
-  }
-}
-
-// 导出默认实例，方便直接使用
-export const aos = AosController.getInstance(
-  "runtime",
-  typeof document !== "undefined" ? document : undefined
-);

package/src/controller/CollapseController.ts

@@ -1,130 +0,0 @@
-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
-);