@rxdrag/website-lib 0.0.8 → 0.0.10

package/src/components/Motion.astro

@@ -1,333 +1,45 @@
----
-import {
-  DATA_MOTION_ANIMATE,
-  DATA_MOTION_CLOSE,
-  DATA_MOTION_HOVER,
-  DATA_MOTION_INVIEW,
-  DATA_MOTION_OPEN,
-  DATA_MOTION_SCROLL,
-  DATA_MOTION_TAP,
-} from "@rxdrag/website-lib-core";
-import { cssPropertyUnits } from "./MotionTypes";
-import type { HTMLElementsWithChildren, IMotionProps } from "./MotionTypes";
-import { DATA_MOTION_FLIP, DATA_MOTION_SELECTION } from "./TabsLogic";
-
-interface Props extends IMotionProps {
-  as?: HTMLElementsWithChildren;
-  class?: string;
-  style?: string | Record<string, string | number>;
-  [key: string]: any;
-}
-
-const {
-  as = "div",
-  animate,
-  whileHover,
-  whileInView,
-  whileTap,
-  whileScroll,
-  whileOpen,
-  whileClose,
-  whileSelection,
-  flipTransition,
-  class: className,
-  style,
-  ...rest
-} = Astro.props;
-
-const Element = as;
-const dataWhileHover = JSON.stringify(whileHover);
-const dataWhileInView = JSON.stringify(whileInView);
-const dataWhileTap = JSON.stringify(whileTap);
-const dataWhileScroll = JSON.stringify(whileScroll);
-const dataWhileOpen = JSON.stringify(whileOpen);
-const dataWhileClose = JSON.stringify(whileClose);
-const dataWhileSelection = JSON.stringify(whileSelection);
-const motions: Record<string, string> = {
-  [DATA_MOTION_ANIMATE]: JSON.stringify(animate),
-  [DATA_MOTION_HOVER]: dataWhileHover,
-  [DATA_MOTION_INVIEW]: dataWhileInView,
-  [DATA_MOTION_TAP]: dataWhileTap,
-  [DATA_MOTION_SCROLL]: dataWhileScroll,
-  [DATA_MOTION_OPEN]: dataWhileOpen,
-  [DATA_MOTION_CLOSE]: dataWhileClose,
-  [DATA_MOTION_SELECTION]: dataWhileSelection,
-  [DATA_MOTION_FLIP]: JSON.stringify(flipTransition),
-};
-
-const props = { ...motions, ...rest };
-const mergedStyle = { ...style };
-
-if (animate?.keyframes) {
-  // 从keyframes中提取初始值
-  const initialValues = Object.entries(animate.keyframes).reduce(
-    (acc, [key, value]) => {
-      // 如果值是数组，取第一个值作为初始值
-      const initialValue = Array.isArray(value) ? value[0] : value;
-
-      if (key in cssPropertyUnits) {
-        const unit = cssPropertyUnits[key as keyof typeof cssPropertyUnits];
-        if (unit === "transform") {
-          acc.transform = (acc.transform || "") as string;
-          acc.transform += ` translate${key.toUpperCase()}(${typeof initialValue === "number" ? `${initialValue}px` : initialValue})`;
-        } else if (typeof initialValue === "number") {
-          acc[key] = `${initialValue}${unit}`;
-        } else {
-          acc[key] = initialValue;
-        }
-      } else {
-        // 对于未定义的属性，保持原样
-        acc[key] = initialValue.toString();
-      }
-      return acc;
-    },
-    {} as Record<string, string>
-  );
-
-  Object.assign(mergedStyle, initialValues);
-}
-
-// 将 styleProp 的定义移到条件块外部，确保它始终被定义
-const styleProp =
-  Object.keys(mergedStyle).length > 0
-    ? {
-        style: mergedStyle,
-      }
-    : undefined;
----
-
-<Element class={className} {...props} {...styleProp}>
-  <slot />
-</Element>
-
-<script>
-  import { animate, inView } from "motion";
-
-  import {
-    DATA_MOTION_ANIMATE,
-    DATA_MOTION_CLOSE,
-    DATA_MOTION_INVIEW,
-    DATA_MOTION_OPEN,
-    DATA_MOTION_TAP,
-    onEverySwap,
-    onPageLoaded,
-    onSelected,
-    onUnSelected,
-  } from "@rxdrag/website-lib-core";
-  import type {
-    DualAnimation,
-    SelectionEvent,
-    SimpleAnimation,
-    ViewportAnimation,
-  } from "@rxdrag/website-lib-core";
-  import {
-    getPopupContainer,
-    normalizeSimpleAnimation,
-    normalizeDualAnimation,
-    onPopupOpen,
-  } from "@rxdrag/website-lib-core";
-  import { DATA_MOTION_SELECTION, DATA_TABS } from "./TabsLogic";
-
-  // 初始化动画
-  function initAnimation() {
-    // 查找所有带有 data-motion-animate 属性的元素
-    const elements = document.querySelectorAll(`[${DATA_MOTION_ANIMATE}]`);
-    elements.forEach((element) => {
-      if (element instanceof HTMLElement) {
-        if (element.dataset.motionAnimate) {
-          const animation = normalizeSimpleAnimation(
-            JSON.parse(element.dataset.motionAnimate) as
-              | SimpleAnimation
-              | undefined
-          );
-          if (animation?.keyframes) {
-            animate(element, animation.keyframes, animation.transition);
-          }
-        }
-      } else {
-        console.log("initAnimation: Not an HTMLElement somehow?");
-      }
-    });
-  }
-
-  function initPopups() {
-    onPopupOpen((event) => {
-      const openResponseElements = document.querySelectorAll(
-        `[${DATA_MOTION_OPEN}]`
-      );
-      const containerElement = getPopupContainer(event.key);
-
-      //响应open事件
-      openResponseElements.forEach((element) => {
-        if (
-          element instanceof HTMLElement &&
-          containerElement?.contains(element)
-        ) {
-          if (element.dataset.motionOpen) {
-            const animation = normalizeSimpleAnimation(
-              JSON.parse(element.dataset.motionOpen) as
-                | SimpleAnimation
-                | undefined
-            );
-            if (animation?.keyframes) {
-              animate(element, animation.keyframes, animation.transition);
-            }
-          }
-        }
-      });
-
-      return () => {
-        const closeResponseElements = document.querySelectorAll(
-          `[${DATA_MOTION_CLOSE}]`
-        );
-
-        //响应close事件
-        closeResponseElements.forEach((element) => {
-          if (element instanceof HTMLElement) {
-            if (
-              element.dataset.motionClose &&
-              containerElement?.contains(element)
-            ) {
-              const animation = normalizeSimpleAnimation(
-                JSON.parse(element.dataset.motionClose) as
-                  | SimpleAnimation
-                  | undefined
-              );
-              if (animation && animation.keyframes) {
-                animate(element, animation.keyframes, animation.transition);
-              }
-            }
-          } else {
-            console.log("===Not an HTMLElement somehow?");
-          }
-        });
-      };
-    });
-  }
-
-  // 初始化AOS(Animate On Scroll)动画
-  function initAos() {
-    //查找所有的data-motion-inview元素
-    const inviewElements = document.querySelectorAll(`[${DATA_MOTION_INVIEW}]`);
-    inviewElements.forEach((element) => {
-      if (element instanceof HTMLElement && element.dataset.motionInview) {
-        const animation = normalizeDualAnimation(
-          JSON.parse(element.dataset.motionInview) as
-            | ViewportAnimation
-            | undefined
-        ) as ViewportAnimation;
-
-        inView(element, (target) => {
-          const newElement = target as HTMLElement;
-          const needAction =
-            (!newElement.dataset.motionViewportEnter && animation.once) ||
-            !animation.once;
-
-          if (animation?.in?.keyframes && needAction) {
-            newElement.dataset.motionViewportEnter = "true";
-            animate(target, animation.in.keyframes, animation.in.transition);
-          }
-          // 返回清理函数
-          return () => {
-            // 如果需要在元素离开视图时执行某些操作
-            if (animation?.out?.keyframes && needAction && !animation.once) {
-              animate(
-                target,
-                animation.out.keyframes,
-                animation.out.transition
-              );
-            }
-          };
-        });
-      }
-    });
-  }
-
-  //TODO 初始化Taps
-  function initTaps() {
-    //查找所有的data-motion-tap元素
-    const tapElements = document.querySelectorAll(`[${DATA_MOTION_TAP}]`);
-  }
-
-  //初始化选项卡Selection动画
-  function initTabsMotion() {
-    onSelected((event: SelectionEvent) => {
-      //查找对应的data-motion-selection元素
-      const tabsElement = document.querySelector(`[${DATA_TABS}=${event.key}]`);
-
-      if (tabsElement instanceof HTMLElement) {
-        //该容器下，所有带有选中动画的元素
-        tabsElement
-          .querySelectorAll(`[${DATA_MOTION_SELECTION}]`)
-          .forEach((element) => {
-            const motions = (element as HTMLElement).dataset.motionSelection;
-            if (motions) {
-              const animation = normalizeDualAnimation(
-                JSON.parse(motions) as DualAnimation | undefined
-              );
-              if (animation?.in?.keyframes) {
-                animate(
-                  element,
-                  animation.in.keyframes,
-                  animation.in.transition
-                );
-              }
-            }
-          });
-      }
-    });
-
-    onUnSelected((event: SelectionEvent) => {
-      //查找对应的data-motion-selection元素
-      const tabsElement = document.querySelector(`[${DATA_TABS}=${event.key}]`);
-
-      if (tabsElement instanceof HTMLElement) {
-        //该容器下，所有带有选中动画的元素
-        tabsElement
-          .querySelectorAll(`[${DATA_MOTION_SELECTION}]`)
-          .forEach((element) => {
-            const motions = (element as HTMLElement).dataset.motionSelection;
-            if (motions) {
-              const animation = normalizeDualAnimation(
-                JSON.parse(motions) as DualAnimation | undefined
-              );
-              if (animation?.out?.keyframes) {
-                animate(
-                  element,
-                  animation.out.keyframes,
-                  animation.out.transition
-                );
-              }
-            }
-          });
-      }
-    });
-  }
-
-  const initMotion = () => {
-    initAnimation();
-    initPopups();
-    initAos();
-    initTaps();
-    initTabsMotion();
-  };
-
-  onEverySwap(() => {
-    initMotion();
-  });
-  onPageLoaded(() => {
-    initMotion();
-  });
-
-  // if (!(window as any).__motionInitialized) {
-  //   (window as any).__motionInitialized = true;
-  //   // 当DOM加载完成时初始化动画
-  //   document.addEventListener("astro:after-swap", () => {
-  //     initAnimation();
-  //     initPopups();
-  //     initAos();
-  //     initTaps();
-  //     initTabsMotion();
-  //   });
-  // }
-</script>
+---
+import {
+  getMotionProps,
+  type HTMLElementsWithChildren,
+  type IMotionProps,
+} from "@rxdrag/website-lib-core";
+
+interface Props extends IMotionProps {
+  as?: HTMLElementsWithChildren;
+  [key: string]: any;
+}
+
+const { as = "div", ...rest } = Astro.props;
+
+const Element = as;
+const { class: className, ...motionProps } = getMotionProps(rest);
+---
+
+<Element class={className} {...motionProps}>
+  <slot />
+</Element>
+
+<script>
+  import {
+    popover,
+    modal,
+    pageLoader,
+    animate,
+    aos,
+    tabs,
+  } from "@rxdrag/website-lib-core";
+
+  pageLoader.onLoaded(() => {
+    //初始化弹出层
+    popover.mount();
+    //初始化模态
+    modal.mount();
+    //初始化动画
+    animate.mount();
+    //初始化AOS
+    aos.mount();
+    //初始化标签页
+    tabs.mount();
+  });
+</script>

package/src/components/Popover.astro

@@ -1,57 +1,18 @@
----
-import { CSSProperties } from "react";
-import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
-import Popup from "./Popup.astro";
-import { IMotionProps } from "./MotionTypes";
-
-interface Props extends IMotionProps {
-  popupKey: string;
-  class?: string;
-  style?: string | CSSProperties;
-}
-
-const roleProps = {
-  [DATA_POPUP_ROLE]: PopupRole.PopoverContainer,
-};
----
-
-<Popup {...roleProps} {...Astro.props}>
-  <slot />
-</Popup>
-
-<script>
-  import {
-    initPopover,
-    onEverySwap,
-    onPageLoaded,
-  } from "@rxdrag/website-lib-core";
-  import {
-    DATA_POPUP,
-    DATA_POPUP_ROLE,
-    PopupRole,
-  } from "@rxdrag/website-lib-core";
-
-  const initPopoverActions = () => {
-    // 获取所有的 Popover 实例
-    const popups = document.querySelectorAll(`[${DATA_POPUP}]`);
-
-    popups.forEach((popup) => {
-      const popupKey = popup.getAttribute(DATA_POPUP);
-      //处理鼠标交互事件
-      if (popupKey && popup) {
-        if (
-          popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.PopoverContainer
-        ) {
-          initPopover(popupKey, popup as HTMLElement);
-        }
-      }
-    });
-  };
-
-  onPageLoaded(() => {
-    initPopoverActions();
-  });
-  onEverySwap(() => {
-    initPopoverActions();
-  });
-</script>
+---
+import {
+  getPopoverDataAttrs,
+  type IMotionProps,
+} from "@rxdrag/website-lib-core";
+
+import Motion from "./Motion.astro";
+
+interface Props extends IMotionProps {
+  popupKey: string;
+}
+
+const dataAttrs = getPopoverDataAttrs(Astro.props.popupKey);
+---
+
+<Motion {...dataAttrs} {...Astro.props}>
+  <slot />
+</Motion>

package/src/components/PopverPanel.astro

@@ -1,22 +1,20 @@
 ---
-import { CSSProperties } from "react";
-import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
-import Popup from "./Popup.astro";
-import { IMotionProps } from "./MotionTypes";
+import {
+  type IMotionProps,
+  defaultPopoverPanelAnimation,
+  getPopoverPanelDataAttrs,
+} from "@rxdrag/website-lib-core";
+import Motion from "./Motion.astro";
 
 interface Props extends IMotionProps {
   popupKey?: string;
-  class?: string;
-  style?: string | CSSProperties;
 }
 
-const roleProps = {
-  [DATA_POPUP_ROLE]: PopupRole.PopoverPanel,
-};
+const dataAttrs = getPopoverPanelDataAttrs(Astro.props.popupKey);
+
+const { whilePopup = defaultPopoverPanelAnimation, ...props } = Astro.props;
 ---
 
-<Popup {...roleProps} {...Astro.props}>
+<Motion whilePopup={whilePopup} {...dataAttrs} {...props}>
   <slot />
-</Popup>
-
-<script></script>
+</Motion>

package/src/components/RichTextView.astro

@@ -1,34 +1,34 @@
----
-import { mdxToSlate } from "@rxdrag/slate-preview";
-import {
-  LeafPreviewView,
-  slatePreviews,
-} from "@rxdrag/slate-preview";
-import type { TSlateLeaf } from "@rxdrag/slate-preview";
-import { ElementPreview } from "@rxdrag/slate-preview";
-import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
-
-interface Props {
-  value?: string;
-  class?: string;
-  style?: string | Record<string, string | number>;
-}
-
-const { value = "", class: className, style } = Astro.props;
-const previews = { ...slatePreviews, [PRODUCT_KEY]: ProductCard };
-const nodes = mdxToSlate(value);
----
-
-<div class={className} style={style}>
-  {
-    nodes?.map((node, index) => {
-      return (
-        <ElementPreview node={node} previews={previews}>
-          {node.children?.map((child) => {
-            return <LeafPreviewView node={child as TSlateLeaf} />;
-          })}
-        </ElementPreview>
-      );
-    })
-  }
-</div>
+---
+import { mdxToSlate } from "@rxdrag/slate-preview";
+import {
+  LeafPreviewView,
+  slatePreviews,
+} from "@rxdrag/slate-preview";
+import type { TSlateLeaf } from "@rxdrag/slate-preview";
+import { ElementPreview } from "@rxdrag/slate-preview";
+import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
+
+interface Props {
+  value?: string;
+  class?: string;
+  style?: string | Record<string, string | number>;
+}
+
+const { value = "", class: className, style } = Astro.props;
+const previews = { ...slatePreviews, [PRODUCT_KEY]: ProductCard };
+const nodes = mdxToSlate(value);
+---
+
+<div class={className} style={style}>
+  {
+    nodes?.map((node, index) => {
+      return (
+        <ElementPreview node={node} previews={previews}>
+          {node.children?.map((child) => {
+            return <LeafPreviewView node={child as TSlateLeaf} />;
+          })}
+        </ElementPreview>
+      );
+    })
+  }
+</div>

package/src/components/SlotContent.astro

@@ -0,0 +1,4 @@
+---
+---
+
+<slot />