@rxdrag/website-lib 0.0.102 → 0.0.103

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "type": "module",
   "exports": {
-    ".": "./index.ts"
+    ".": "./index.ts",
+    "./components/*": "./src/components/*.astro"
   },
   "files": [
     "src",
@@ -18,6 +19,7 @@
   "devDependencies": {
     "@astrojs/react": "^3.0.0",
     "@babel/types": "^7.26.9",
+    "@types/aos": "^3.0.7",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "astro": "^4.0.0",
@@ -25,17 +27,18 @@
     "gsap": "^3.12.7",
     "typescript": "^5",
     "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/entify-hooks": "0.2.77",
+    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
+    "aos": "3.0.0-beta.6",
     "clsx": "^2.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/website-lib-core": "0.0.103"
+    "@rxdrag/website-lib-core": "0.0.104",
+    "@rxdrag/rxcms-models": "0.3.96"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/components/AnimationNumber.astro

@@ -1,15 +1,19 @@
 ---
-import {
-getAnimationNumberDataAttrs,
-  type AnimationNumberProps,
-} from "@rxdrag/website-lib-core";
-
-interface Props extends AnimationNumberProps {}
+interface Props {
+  start?: number;
+  end: number;
+  duration?: number;
+  class?: string;
+  sign?: string;
+  once?: boolean;
+  type?: "int" | "float";
+  fractionDigits?: number;
+}
 
 const {
   start = 0,
-  end = 100,
-  transition = { duration: 2 },
+  end,
+  duration = 1200,
   class: className,
   sign = "+",
   once = false,
@@ -17,45 +21,198 @@ const {
   fractionDigits = 1,
 } = Astro.props;
 
-const attrs = getAnimationNumberDataAttrs({
-  start,
-  end,
-  transition,
-  type,
-  fractionDigits,
-  once,
-});
+const id = crypto.randomUUID();
 ---
 
-<div {...attrs} class={className}>
-  <span class="motion-safe:animate-number">{start}</span>
-  {sign && <span class="motion-safe:animate-sign hidden">{sign}</span>}
-</div>
+<span
+  class={className}
+  data-light-number
+  data-id={id}
+  data-start={start}
+  data-end={end}
+  data-duration={duration}
+  data-once={once ? "1" : "0"}
+  data-type={type}
+  data-fraction-digits={fractionDigits}
+>
+  <span data-light-number-value>{start}</span>
+  {
+    sign && (
+      <span data-light-number-sign style="display:none">
+        {sign}
+      </span>
+    )
+  }
+</span>
+
+<script is:inline>
+  (() => {
+    const bindAstroLifecycle = (key, fn) => {
+      const w = window;
+      const bound = (w.__astro_lifecycle_bound__ ||= Object.create(null));
+      if (bound[key]) return;
+      bound[key] = true;
 
-<script>
-  import { pageLoader } from "@rxdrag/website-lib-core";
-  import { numberController } from "@rxdrag/website-lib-core";
+      const boot = () => fn();
 
-  // 页面加载后重新初始化动画
-  //TODO 第三方引入时， pageloader有bug
-  // pageLoader.onLoaded(() => {
-  //   numberController.mount();
-  // });
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
 
-  function mount() {
-    numberController.mount();
-  }
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    };
 
-  try {
-    if (typeof queueMicrotask === "function") {
-      queueMicrotask(mount);
-    } else {
-      requestAnimationFrame(() => mount());
-    }
-  } catch {
-    // ignore
-  }
+    const globalKey = "__light_number_state__";
+    const w = window;
+    const state = (w[globalKey] ||= {
+      docBound: false,
+      moBound: false,
+      scheduled: false,
+    });
+
+    const scheduleInit = () => {
+      if (state.scheduled) return;
+      state.scheduled = true;
+      requestAnimationFrame(() => {
+        state.scheduled = false;
+        init();
+      });
+    };
+
+    const init = () => {
+      const nodes = document.querySelectorAll("[data-light-number]");
+      nodes.forEach((root) => {
+        if (!(root instanceof HTMLElement)) return;
+        if (root.dataset.bound === "1") return;
+        root.dataset.bound = "1";
+
+      const valueEl = root.querySelector("[data-light-number-value]");
+      const signEl = root.querySelector("[data-light-number-sign]");
+      if (!(valueEl instanceof HTMLElement)) return;
+
+      const start = Number(root.dataset.start ?? "0");
+      const end = Number(root.dataset.end ?? "0");
+      const duration = Number(root.dataset.duration ?? "1200");
+      const once = root.dataset.once === "1";
+      const type = root.dataset.type === "float" ? "float" : "int";
+      const fractionDigits = Number(root.dataset.fractionDigits ?? "1");
+
+      let running = false;
+      let played = false;
+      let rafId = 0;
+
+      const format = (n) => {
+        if (type === "float") {
+          return n.toFixed(
+            Number.isFinite(fractionDigits) ? fractionDigits : 1
+          );
+        }
+        return String(Math.round(n));
+      };
+
+      const setValue = (n) => {
+        valueEl.textContent = format(n);
+      };
 
-  document.addEventListener("astro:page-load", mount);
-  document.addEventListener("astro:after-swap", mount);
-</script>
+      const showSign = () => {
+        if (signEl instanceof HTMLElement) {
+          signEl.style.display = "";
+        }
+      };
+
+      const animate = () => {
+        if (running) return;
+        if (once && played) return;
+
+        running = true;
+        played = true;
+        showSign();
+
+        const from = start;
+        const to = end;
+        const t0 = performance.now();
+
+        const step = (t) => {
+          const p = Math.min(1, (t - t0) / Math.max(16, duration));
+          const eased = 1 - Math.pow(1 - p, 3);
+          const v = from + (to - from) * eased;
+          setValue(v);
+          if (p < 1) {
+            rafId = requestAnimationFrame(step);
+          } else {
+            running = false;
+          }
+        };
+
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(step);
+      };
+
+      const isInViewport = () => {
+        const rect = root.getBoundingClientRect();
+        const vh = window.innerHeight || document.documentElement.clientHeight;
+        return rect.bottom > 0 && rect.top < vh;
+      };
+
+      if (typeof IntersectionObserver === "undefined") {
+        if (isInViewport()) animate();
+        else window.addEventListener("scroll", animate, { passive: true, once: true });
+        return;
+      }
+
+      const io = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) return;
+            animate();
+            if (once) io.disconnect();
+          });
+        },
+        { threshold: 0.25 }
+      );
+
+        io.observe(root);
+
+        if (isInViewport()) animate();
+      });
+    };
+
+    const boot = () => {
+      init();
+    };
+
+    bindAstroLifecycle("light-number:boot", boot);
+
+    if (!state.moBound) {
+      state.moBound = true;
+      const mo = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          if (!m.addedNodes || m.addedNodes.length === 0) continue;
+          for (const n of m.addedNodes) {
+            if (!(n instanceof Element)) continue;
+            if (n.matches && n.matches("[data-light-number]")) {
+              scheduleInit();
+              return;
+            }
+            if (n.querySelector && n.querySelector("[data-light-number]")) {
+              scheduleInit();
+              return;
+            }
+          }
+        }
+      });
+      if (document.body) {
+        mo.observe(document.body, { childList: true, subtree: true });
+      } else {
+        document.addEventListener(
+          "DOMContentLoaded",
+          () => mo.observe(document.body, { childList: true, subtree: true }),
+          { once: true }
+        );
+      }
+    }
+  })();
+</script>

package/src/components/Collapse.astro

@@ -1,20 +1,125 @@
 ---
-import {
-  getCollapseDataAttrs,
-  type IMotionProps,
-} from "@rxdrag/website-lib-core";
-
-import Motion from "./Motion.astro";
-
-interface Props extends IMotionProps {
-  openableKey?: string;
+interface Props {
+  class?: string;
+  triggerClass?: string;
+  panelClass?: string;
+  initialOpen?: boolean;
 }
 
-const { openableKey, ...rest } = Astro.props;
+const {
+  class: className,
+  triggerClass,
+  panelClass,
+  initialOpen = false,
+} = Astro.props;
 
-const dataAttrs = getCollapseDataAttrs(openableKey);
+const collapseId = crypto.randomUUID();
+const panelId = `collapse-panel-${collapseId}`;
+const rootId = `collapse-${collapseId}`;
 ---
 
-<Motion {...dataAttrs} {...rest}>
-  <slot />
-</Motion>
+<div
+  class:list={["n-collapse", className]}
+  id={rootId}
+  data-open={initialOpen ? "true" : "false"}
+>
+  <button
+    type="button"
+    class:list={["n-collapse__trigger", triggerClass]}
+    aria-expanded={initialOpen ? "true" : "false"}
+    aria-controls={panelId}
+  >
+    <slot name="trigger" />
+  </button>
+
+  <div
+    id={panelId}
+    class:list={["n-collapse__panel", panelClass]}
+    style={`height: ${initialOpen ? "auto" : "0px"};`}
+    aria-hidden={initialOpen ? "false" : "true"}
+  >
+    <slot />
+  </div>
+</div>
+
+<style>
+  .n-collapse__panel {
+    transition: height 0.35s ease;
+  }
+
+  .n-collapse__indicator {
+    transition: transform 0.25s ease;
+  }
+
+  .n-collapse[data-open="true"] .n-collapse__indicator {
+    transform: rotate(180deg);
+  }
+</style>
+
+<script is:inline>
+  // This component can appear multiple times per page.
+  // We install a single global initializer so it keeps working after Astro SPA navigation.
+  if (!window.__nCollapse) {
+    window.__nCollapse = {
+      initCollapseRoot(root) {
+        if (!root || root.dataset.nCollapseBound === "true") return;
+        root.dataset.nCollapseBound = "true";
+
+        const trigger = root.querySelector(":scope > .n-collapse__trigger");
+        const panel = root.querySelector(":scope > .n-collapse__panel");
+        if (!trigger || !panel) {
+          console.log("Collapse: trigger/panel not found", root);
+          return;
+        }
+
+        let open = root.dataset.open === "true";
+        if (open) {
+          panel.style.height = "auto";
+          trigger.setAttribute("aria-expanded", "true");
+          panel.setAttribute("aria-hidden", "false");
+        }
+
+        const setOpen = (next) => {
+          open = next;
+          root.dataset.open = open ? "true" : "false";
+          trigger.setAttribute("aria-expanded", open ? "true" : "false");
+          panel.setAttribute("aria-hidden", open ? "false" : "true");
+
+          if (open) {
+            panel.style.height = "auto";
+            const h = panel.scrollHeight;
+            panel.style.height = "0px";
+            panel.offsetHeight;
+            panel.style.height = h + "px";
+          } else {
+            const h = panel.scrollHeight;
+            panel.style.height = h + "px";
+            panel.offsetHeight;
+            panel.style.height = "0px";
+          }
+        };
+
+        const onTransitionEnd = (e) => {
+          if (e.target !== panel || e.propertyName !== "height") return;
+          if (open) panel.style.height = "auto";
+        };
+
+        trigger.addEventListener("click", () => setOpen(!open));
+        panel.addEventListener("transitionend", onTransitionEnd);
+      },
+      initAll() {
+        document.querySelectorAll(".n-collapse").forEach((el) => window.__nCollapse.initCollapseRoot(el));
+      },
+      listenersBound: false,
+    };
+  }
+
+  // Bind listeners once to support ClientRouter/ViewTransitions.
+  if (!window.__nCollapse.listenersBound) {
+    window.__nCollapse.listenersBound = true;
+    document.addEventListener("astro:page-load", () => window.__nCollapse.initAll());
+    document.addEventListener("astro:after-swap", () => window.__nCollapse.initAll());
+  }
+
+  window.__nCollapse.initAll();
+</script>

package/src/components/CollapseIndicator.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<span class:list={["n-collapse__indicator", "h-5", "w-5", "flex-none", "text-foreground", className]} aria-hidden="true">
+  <svg
+    aria-hidden="true"
+    fill="currentColor"
+    focusable="false"
+    height="1.25rem"
+    viewBox="0 0 24 24"
+    width="1.25rem"
+  >
+    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path>
+  </svg>
+</span>