@rxdrag/website-lib 0.0.9 → 0.0.11

package/index.ts

@@ -1,4 +1,4 @@
-// Do not write code directly here, instead use the `src` folder!
-// Then, use this file to export everything you want your user to access.
-
-export * from './src/index';
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+export * from './src/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -22,19 +22,19 @@
     "@types/react-dom": "^18.2.7",
     "astro": "^4.0.0",
     "eslint": "^7.32.0",
+    "gsap": "^3.12.7",
     "typescript": "^5",
-    "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/entify-hooks": "0.2.39",
-    "@rxdrag/eslint-config-custom": "0.2.11",
-    "@rxdrag/slate-preview": "1.2.54"
+    "@rxdrag/slate-preview": "1.2.55",
+    "@rxdrag/entify-hooks": "0.2.40",
+    "@rxdrag/eslint-config-custom": "0.2.12",
+    "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
     "clsx": "^2.1.0",
-    "motion": "^12.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@rxdrag/rxcms-models": "0.3.45",
-    "@rxdrag/website-lib-core": "0.0.7"
+    "@rxdrag/website-lib-core": "0.0.9",
+    "@rxdrag/rxcms-models": "0.3.46"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/components/AnimationNumber.astro

@@ -1,14 +1,10 @@
 ---
-import { AnimationOptions } from "motion";
+import {
+getAnimationNumberDataAttrs,
+  type AnimationNumberProps,
+} from "@rxdrag/website-lib-core";
 
-interface Props {
-  start?: number;
-  end?: number;
-  transition?: AnimationOptions;
-  class?: string;
-  sign?: "string";
-  once?: boolean;
-}
+interface Props extends AnimationNumberProps {}
 
 const {
   start = 0,
@@ -17,88 +13,31 @@ const {
   class: className,
   sign = "+",
   once = false,
+  type = "int",
+  fractionDigits = 1,
 } = Astro.props;
 
-const motionValue = {
+const attrs = getAnimationNumberDataAttrs({
   start,
   end,
   transition,
-};
+  type,
+  fractionDigits,
+  once,
+});
 ---
 
-<div
-  data-animation-number={JSON.stringify(motionValue)}
-  data-animation-number-once={once}
-  class:list={["flex items-center justify-center gap-2", className]}
->
+<div {...attrs} class={className}>
   <span class="motion-safe:animate-number">{start}</span>
-  {
-    sign && (
-      <span class="motion-safe:animate-sign" style="display: none;">
-        {sign}
-      </span>
-    )
-  }
+  {sign && <span class="motion-safe:animate-sign hidden">{sign}</span>}
 </div>
 
 <script>
-  import { onEverySwap, onPageLoaded } from "@rxdrag/website-lib-core";
-  import { animate, inView } from "motion";
+  import { pageLoader } from "@rxdrag/website-lib-core";
+  import { numberController } from "@rxdrag/website-lib-core";
 
-  function initAnimation() {
-    const elements = document.querySelectorAll("[data-animation-number]");
-    elements.forEach((element) => {
-      if (element instanceof HTMLElement) {
-        if (element.dataset.animationNumber) {
-          const data = JSON.parse(element.dataset.animationNumber);
-          // 确保 start 和 end 是数字类型
-          const startValue = Number(data.start);
-          const endValue = Number(data.end);
-          const transition = data.transition;
-          const once = element.dataset.animationNumberOnce === "true";
-
-          const numberElement = element.querySelector(
-            ".motion-safe\\:animate-number"
-          ) as HTMLElement;
-          const signElement = element.querySelector(
-            ".motion-safe\\:animate-sign"
-          ) as HTMLElement;
-
-          inView(numberElement, () => {
-            const aleadyRun =
-              numberElement.dataset.animationNumberRun === "true";
-            if (aleadyRun && once) {
-              return;
-            }
-            numberElement.dataset.animationNumberRun = "true";
-            animate(startValue, endValue, {
-              ...transition,
-              onUpdate: (latest) =>
-                (numberElement.innerHTML = Math.round(latest)?.toString()),
-              onComplete: () => {
-                if (signElement) {
-                  signElement.style.display = "inline";
-                }
-              },
-            });
-            return () => {
-              if (!once) {
-                numberElement.innerHTML = startValue.toString();
-                if (signElement) {
-                  signElement.style.display = "none";
-                }
-              }
-            };
-          });
-        }
-      }
-    });
-  }
-
-  onPageLoaded(() => {
-    initAnimation();
-  });
-  onEverySwap(() => {
-    initAnimation();
+  // 页面加载后重新初始化动画
+  pageLoader.onLoaded(() => {
+    numberController.mount();
   });
 </script>

package/src/components/Flip.astro

@@ -1,5 +1,5 @@
 ---
-import { HTMLElementsWithChildren } from "./MotionTypes";
+import { type HTMLElementsWithChildren } from "@rxdrag/website-lib-core";
 
 interface Props {
   flipKey?: string;
@@ -35,19 +35,9 @@ const flipProps = {
 </style>
 
 <script>
-  import { onEverySwap, onPageLoaded } from "@rxdrag/website-lib-core";
-  import { FlipController } from "./FlipLogic";
-
-  const initFlip = () => {
-    FlipController.getInstance().init();
-  };
-
+  import { flip, pageLoader } from "@rxdrag/website-lib-core";
   // 在页面加载和每次页面转场后都初始化Flip
-  onPageLoaded(() => {
-    initFlip();
-  });
-  
-  onEverySwap(() => {
-    initFlip();
+  pageLoader.onLoaded(() => {
+    flip.mount();
   });
 </script>

package/src/components/Link.astro

@@ -1,81 +1,47 @@
----
-import { LinkType, toHref } from "./LinkLogic";
-import { IMotionProps } from "./MotionTypes";
-import Motion from "./Motion.astro";
-
-// 定义a标签属性的接口
-interface AnchorAttributes {
-  target?: "_blank" | "_self" | "_parent" | "_top";
-  rel?: string;
-  download?: boolean | string;
-  ping?: string;
-  referrerpolicy?: string;
-  hreflang?: string;
-}
-
-interface Props extends IMotionProps, AnchorAttributes {
-  type?: LinkType | string;
-  to?: string;
-  class?: string;
-  //用于active类名的传递
-  activeWhen?: string | true;
-}
-
-const { type, to, class: className, activeWhen, ...props } = Astro.props;
-const href = toHref(type, to);
----
-
-<Motion
-  as="a"
-  data-actived-path={activeWhen}
-  href={href}
-  class={className}
-  {...props}
->
-  <slot />
-</Motion>
-
-<script>
-  import { onEverySwap, onPageLoaded } from "@rxdrag/website-lib-core";
-
-  const initLinks = () => {
-    // 获取当前URL的路径部分（去除域名）
-    const currentPath = window.location.pathname;
-
-    // 获取所有导航链接
-    const links = document.querySelectorAll<HTMLAnchorElement>(
-      "[data-actived-path]"
-    );
-
-    links.forEach((anchorLink) => {
-      // 从链接URL中提取路径部分
-      try {
-        const linkUrl = new URL(anchorLink.href);
-        const linkPath =
-          anchorLink.dataset.activedPath === "true"
-            ? linkUrl.pathname
-            : anchorLink.dataset.activedPath;
-
-        // 检查当前路径是否与链接路径匹配或是其子路径
-        if (
-          currentPath === linkPath ||
-          (linkPath !== "/" && linkPath && currentPath.startsWith(linkPath))
-        ) {
-          anchorLink.classList.add("actived");
-        } else {
-          anchorLink.classList.remove("actived");
-        }
-      } catch (e) {
-        // 处理无效URL的情况
-        console.warn("Invalid URL:", e, anchorLink);
-      }
-    });
-  };
-
-  onEverySwap(() => {
-    initLinks();
-  });
-  onPageLoaded(() => {
-    initLinks();
-  });
-</script>
+---
+import {
+  toHref,
+  type IMotionProps,
+  type LinkType,
+} from "@rxdrag/website-lib-core";
+import Motion from "./Motion.astro";
+
+// 定义a标签属性的接口
+interface AnchorAttributes {
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  rel?: string;
+  download?: boolean | string;
+  ping?: string;
+  referrerpolicy?: string;
+  hreflang?: string;
+}
+
+interface Props extends IMotionProps, AnchorAttributes {
+  type?: LinkType | string;
+  to?: string;
+  class?: string;
+  //用于active类名的传递
+  activeWhen?: string | true;
+}
+
+const { type, to, class: className, activeWhen, ...props } = Astro.props;
+const href = toHref(type || "", to || "");
+---
+
+<Motion
+  as="a"
+  data-actived-path={activeWhen}
+  href={href}
+  class={className}
+  {...props}
+>
+  <slot />
+</Motion>
+
+<script>
+  import { initLinks, pageLoader } from "@rxdrag/website-lib-core";
+
+  pageLoader.onLoaded(() => {
+    initLinks();
+  });
+</script>

package/src/components/Meta.astro

@@ -1,66 +1,64 @@
----
-import { PageMeta } from "@rxdrag/rxcms-models";
-
-interface Props {
-  content?: PageMeta;
-  title?: string;
-}
-
-const { content, title: propTitle } = Astro.props;
-
-// 从content中提取SEO相关属性
-const {
-  // SeoMeta属性
-  seoTitle,
-  seoKeywords,
-  seoDescription,
-  seoAuthor,
-  publisher,
-  seoRobots,
-  // OgMeta属性
-  ogTitle,
-  ogDescription,
-  ogUrl,
-  ogSiteName,
-  ogType,
-  xCard,
-  xSite,
-  xTitle,
-  xDescription,
-  xUrl,
-  // 其他属性
-  ogImage,
-} = content || {};
-
-const title = propTitle || seoTitle || "YiZhanFei";
-
-const canonicalURL = Astro.url.href;
-const imageUrl = ogImage?.file?.url || "";
----
-
-<title>{seoTitle || title}</title>
-<meta name="description" content={seoDescription} />
-<meta name="keywords" content={seoKeywords} />
-<meta name="author" content={seoAuthor} />
-<meta name="publisher" content={publisher} />
-<meta name="robots" content={seoRobots || "index, follow"} />
-<link rel="canonical" href={canonicalURL} />
-
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content={ogType || "website"} />
-<meta property="og:url" content={ogUrl || canonicalURL} />
-<meta property="og:title" content={ogTitle || title} />
-<meta property="og:description" content={ogDescription || seoDescription} />
-<meta property="og:image" content={imageUrl} />
-{ogSiteName && <meta property="og:site_name" content={ogSiteName} />}
-
-<!-- Twitter -->
-<meta property="twitter:card" content={xCard || "summary_large_image"} />
-<meta property="twitter:url" content={xUrl || ogUrl || canonicalURL} />
-<meta property="twitter:title" content={xTitle || ogTitle || title} />
-<meta
-  property="twitter:description"
-  content={xDescription || ogDescription || seoDescription}
-/>
-<meta property="twitter:image" content={imageUrl} />
-{xSite && <meta property="twitter:site" content={xSite} />}
+---
+import type { PageMeta } from "@rxdrag/rxcms-models";
+
+interface Props {
+  content?: PageMeta;
+  title?: string;
+}
+
+const { content, title: propTitle } = Astro.props;
+
+// 从content中提取SEO相关属性
+const {
+  // SeoMeta属性
+  seoTitle,
+  seoKeywords,
+  seoDescription,
+  seoAuthor,
+  publisher,
+  seoRobots,
+  // OgMeta属性
+  ogTitle,
+  ogDescription,
+  ogUrl,
+  ogSiteName,
+  ogType,
+  xCard,
+  xSite,
+  xUrl,
+  // 其他属性
+  ogImage,
+} = content || {};
+
+const title = propTitle || seoTitle || "YiZhanFei";
+
+const canonicalURL = Astro.url.href;
+const imageUrl = ogImage?.file?.url || "";
+---
+
+<title>{seoTitle || title}</title>
+<meta name="description" content={seoDescription} />
+<meta name="keywords" content={seoKeywords} />
+<meta name="author" content={seoAuthor} />
+<meta name="publisher" content={publisher} />
+<meta name="robots" content={seoRobots || "index, follow"} />
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={ogType || "website"} />
+<meta property="og:url" content={ogUrl || canonicalURL} />
+<meta property="og:title" content={ogTitle || title} />
+<meta property="og:description" content={ogDescription || seoDescription} />
+<meta property="og:image" content={imageUrl} />
+{ogSiteName && <meta property="og:site_name" content={ogSiteName} />}
+
+<!-- Twitter -->
+<meta property="twitter:card" content={xCard || "summary_large_image"} />
+<meta property="twitter:url" content={xUrl || ogUrl || canonicalURL} />
+<meta property="twitter:title" content={ogTitle || title} />
+<meta
+  property="twitter:description"
+  content={ogDescription || seoDescription}
+/>
+<meta property="twitter:image" content={imageUrl} />
+{xSite && <meta property="twitter:site" content={xSite} />}

package/src/components/Modal.astro

@@ -1,69 +1,14 @@
 ---
-import type { CSSProperties } from "react";
-import Popup from "./Popup.astro";
-import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
-import type { IMotionProps } from "./MotionTypes";
+import { getModalDataAttrs, type IMotionProps } 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.ModalContainer,
-};
+const dataAttrs = getModalDataAttrs(Astro.props.popupKey);
 ---
 
-<Popup {...roleProps} {...Astro.props}>
+<Motion {...dataAttrs} {...Astro.props}>
   <slot />
-</Popup>
-
-<script>
-  import {
-    initModal,
-    initModalCloser,
-    onEverySwap,
-    onPageLoaded,
-  } from "@rxdrag/website-lib-core";
-  import {
-    DATA_POPUP,
-    DATA_POPUP_ROLE,
-    PopupRole,
-  } from "@rxdrag/website-lib-core";
-
-  const initModals = () => {
-    // 获取所有的 Modal 实例
-    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.ModalTrigger) {
-          initModal(popupKey, popup as HTMLElement);
-        }
-      }
-      //获取所有 ModalCloser 实例，并处理点击事件
-      //TODO：未处理嵌套跟Modal外部关闭的情况
-      const closers = popup.querySelectorAll(
-        `[${DATA_POPUP_ROLE}="${PopupRole.ModalCloser}"]`
-      );
-
-      closers.forEach((closer) => {
-        // 使用initModalCloser函数处理关闭按钮事件
-        if (popupKey) {
-          initModalCloser(popupKey, closer as HTMLElement);
-        }
-      });
-    });
-  };
-
-  // 在页面加载和每次页面转场后都初始化Modal
-  onPageLoaded(() => {
-    initModals();
-  });
-
-  onEverySwap(() => {
-    initModals();
-  });
-</script>
+</Motion>

package/src/components/ModalCloser.astro

@@ -1,22 +1,19 @@
 ---
-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,
+  getModalCloserDataAttrs,
+} from "@rxdrag/website-lib-core";
+import { Motion } from "../..";
 
 interface Props extends IMotionProps {
   popupKey?: string;
-  class?: string;
-  style?: string | CSSProperties;
 }
 
-const roleProps = {
-  [DATA_POPUP_ROLE]: PopupRole.ModalCloser,
-};
+const dataAttrs = getModalCloserDataAttrs(Astro.props.popupKey);
 ---
 
-<Popup {...roleProps} {...Astro.props}>
+<Motion {...dataAttrs} {...Astro.props}>
   <slot />
-</Popup>
+</Motion>
 
 <script></script>

package/src/components/ModalPanel.astro

@@ -1,22 +1,19 @@
 ---
-import { CSSProperties } from "react";
-import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
-import Popup from "./Popup.astro";
-import { IMotionProps } from "./MotionTypes";
+import {
+  getModalPanelDataAttrs,
+  type IMotionProps,
+} 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.ModalPanel,
-};
+const dataAttrs = getModalPanelDataAttrs(Astro.props.popupKey);
 ---
 
-<Popup {...roleProps} {...Astro.props}>
+<Motion {...dataAttrs} {...Astro.props}>
   <slot />
-</Popup>
+</Motion>
 
 <script></script>

package/src/components/ModalTrigger.astro

@@ -1,30 +1,18 @@
 ---
-import { CSSProperties } from "react";
 import {
-  DATA_POPUP_CTA,
-  DATA_POPUP_ROLE,
-  PopupRole,
+  getModalTriggerDataAttrs,
+  type ModalTriggerProps,
 } from "@rxdrag/website-lib-core";
-import Popup from "./Popup.astro";
-import { HTMLElementsWithChildren, IMotionProps } from "./MotionTypes";
+import Motion from "./Motion.astro";
 
-interface Props extends IMotionProps {
-  popupKey: string;
-  callToAction?: string;
-  as?: HTMLElementsWithChildren;
-  class?: string;
-  style?: string | CSSProperties;
-}
+interface Props extends ModalTriggerProps {}
 
 const { callToAction, ...rest } = Astro.props;
-const roleProps = {
-  [DATA_POPUP_CTA]: callToAction,
-  [DATA_POPUP_ROLE]: PopupRole.ModalTrigger,
-};
+const dataAttrs = getModalTriggerDataAttrs(Astro.props.popupKey);
 ---
 
-<Popup {...roleProps} {...rest}>
+<Motion {...dataAttrs} {...rest}>
   <slot />
-</Popup>
+</Motion>
 
 <script></script>