@rxdrag/website-lib 0.0.152 → 0.0.153

package/README.md

@@ -1,2 +1,2 @@
-@rxdrag/website-lib
-含 astro 组件，不能在 React 中使用
+@rxdrag/website-lib
+含 astro 组件，不能在 React 中使用

package/components/AnimationNumber.astro

@@ -1,218 +1,218 @@
----
-interface Props {
-  start?: number;
-  end: number;
-  duration?: number;
-  class?: string;
-  sign?: string;
-  once?: boolean;
-  type?: "int" | "float";
-  fractionDigits?: number;
-}
-
-const {
-  start = 0,
-  end,
-  duration = 1200,
-  class: className,
-  sign = "+",
-  once = false,
-  type = "int",
-  fractionDigits = 1,
-} = Astro.props;
-
-const id = crypto.randomUUID();
----
-
-<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;
-
-      const boot = () => fn();
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-
-      document.addEventListener("astro:page-load", boot);
-      document.addEventListener("astro:after-swap", boot);
-    };
-
-    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);
-      };
-
-      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 }
-        );
-      }
-    }
-  })();
+---
+interface Props {
+  start?: number;
+  end: number;
+  duration?: number;
+  class?: string;
+  sign?: string;
+  once?: boolean;
+  type?: "int" | "float";
+  fractionDigits?: number;
+}
+
+const {
+  start = 0,
+  end,
+  duration = 1200,
+  class: className,
+  sign = "+",
+  once = false,
+  type = "int",
+  fractionDigits = 1,
+} = Astro.props;
+
+const id = crypto.randomUUID();
+---
+
+<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;
+
+      const boot = () => fn();
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    };
+
+    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);
+      };
+
+      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>