@rxdrag/website-lib 0.0.122 → 0.0.124

package/components/Motion.astro

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type WhileInViewPreset =
+  | "fade"
+  | "fade-up"
+  | "fade-down"
+  | "fade-left"
+  | "fade-right"
+  | "zoom-in"
+  | "zoom-out"
+  | "slide-up"
+  | "slide-down"
+  | "slide-left"
+  | "slide-right";
+
+type WhileInViewConfig = {
+  preset?: WhileInViewPreset;
+  once?: boolean;
+  duration?: number;
+  delay?: number;
+  easing?: string;
+  offset?: number;
+  anchorPlacement?: string;
+  anchor?: string;
+};
+
+interface Props extends HTMLAttributes<"div"> {
+  as?: string;
+  class?: string;
+  className?: string;
+  whileInView?: WhileInViewPreset | WhileInViewConfig;
+}
+
+const {
+  as = "div",
+  whileInView,
+  class: cls,
+  className,
+  ...rest
+} = Astro.props;
+
+const Tag = as as any;
+
+const config: WhileInViewConfig | undefined =
+  typeof whileInView === "string" ? { preset: whileInView } : whileInView;
+
+const dataAos = config?.preset;
+const dataAosOnce = config?.once;
+const dataAosDuration = config?.duration;
+const dataAosDelay = config?.delay;
+const dataAosEasing = config?.easing;
+const dataAosOffset = config?.offset;
+const dataAosAnchorPlacement = config?.anchorPlacement;
+const dataAosAnchor = config?.anchor;
+
+const aosAttrs = dataAos
+  ? {
+      "data-aos": dataAos,
+      "data-aos-once":
+        typeof dataAosOnce === "boolean" ? String(dataAosOnce) : undefined,
+      "data-aos-duration":
+        typeof dataAosDuration === "number" ? String(dataAosDuration) : undefined,
+      "data-aos-delay":
+        typeof dataAosDelay === "number" ? String(dataAosDelay) : undefined,
+      "data-aos-easing": dataAosEasing,
+      "data-aos-offset":
+        typeof dataAosOffset === "number" ? String(dataAosOffset) : undefined,
+      "data-aos-anchor-placement": dataAosAnchorPlacement,
+      "data-aos-anchor": dataAosAnchor,
+    }
+  : {};
+---
+
+<Tag class:list={[cls, className]} {...aosAttrs} {...rest}>
+  <slot />
+</Tag>

package/components/RichTextView.astro

@@ -1,12 +1,7 @@
 ---
-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 { mdxToTiptap, TiptapPreview } from "@rxdrag/tiptap-preview";
 import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
+import React from "react";
 
 interface Props {
   value?: string;
@@ -15,33 +10,19 @@ interface Props {
 }
 
 const { value = "", class: className, style } = Astro.props;
-const previews = { ...slatePreviews, [PRODUCT_KEY]: ProductCard };
-const nodes = mdxToSlate(value);
+const tiptapValue = mdxToTiptap(value);
+
+const ProductBlock = (props: { attrs?: Record<string, unknown> }) => {
+  return React.createElement(ProductCard as any, {
+    node: (props.attrs || {}) as any,
+  });
+};
+const customBlocks = {
+  [PRODUCT_KEY]: ProductBlock,
+  product: ProductBlock,
+};
 ---
 
 <div class={className} style={style}>
-  {
-    nodes?.map((node, index) => {
-      // 递归处理节点的函数
-      const renderNode = (node: any) => {
-        // 纯文本节点
-        if (typeof node.text !== 'undefined') {
-          return <LeafPreviewView node={node as TSlateLeaf} />;
-        }
-        
-        // 有子节点的元素
-        if (node.children && node.children.length > 0) {
-          return (
-            <ElementPreview node={node} previews={previews}>
-              {node.children.map((child: any) => renderNode(child))}
-            </ElementPreview>
-          );
-        }
-        
-        return null;
-      };
-      
-      return renderNode(node);
-    })
-  }
+  <TiptapPreview value={tiptapValue} customBlocks={customBlocks} />
 </div>

package/components/TabButton.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  class?: string;
+  className?: string;
+}
+
+const { class: className, className: className2, ...props } = Astro.props;
+---
+
+<button
+  class:list={["tab-btn", className, className2]}
+  data-tabs-btn="true"
+  {...props}
+>
+  <slot />
+</button>

package/components/TabPanel.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  class?: string;
+  active?: boolean | string;
+}
+
+const { class: className, active, ...props } = Astro.props;
+const isActive =
+  active === true ||
+  (typeof active === "string" && (active === "" || active === "true"));
+---
+
+<div
+  data-tabs-panel=""
+  class:list={["tab-content", className, isActive ? "block" : "hidden"]}
+  {...props}
+>
+  <slot />
+</div>

package/components/Tabs.astro

@@ -0,0 +1,147 @@
+---
+const rootId = crypto.randomUUID();
+
+interface Props {
+  class?: string;
+  className?: string;
+}
+
+const { class: className, className: className2, ...props } = Astro.props;
+---
+
+<div data-tabs-root id={rootId} class:list={[className, className2]} {...props}>
+  <slot />
+</div>
+
+<script is:inline define:vars={{ rootId }}>
+  const defaultIndex = 0;
+  const activeBtnClassName = "active";
+  const inactiveBtnClassName = "";
+  const showPanelClassName = "block";
+  const hidePanelClassName = "hidden";
+
+  const getState = () => {
+    const w = window;
+    const all = (w.__tabs__ ||= {});
+    return (all[rootId] ||= { cleanup: null });
+  };
+
+  const initTabs = () => {
+    const root = document.getElementById(rootId);
+    if (!root) return () => {};
+
+    const toClassList = (className) =>
+      String(className || "")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+
+    const activeBtnClasses = toClassList(activeBtnClassName);
+    const inactiveBtnClasses = toClassList(inactiveBtnClassName);
+    const showPanelClasses = toClassList(showPanelClassName);
+    const hidePanelClasses = toClassList(hidePanelClassName);
+
+    const tabBtns = root.querySelectorAll("[data-tabs-btn]");
+    const tabPanels = root.querySelectorAll("[data-tabs-panel]");
+
+    if (tabBtns.length === 0 || tabPanels.length === 0) {
+      return () => {};
+    }
+
+    const pairCount = Math.min(tabBtns.length, tabPanels.length);
+    for (let i = 0; i < pairCount; i++) {
+      const btn = tabBtns[i];
+      const panel = tabPanels[i];
+      const key = `${rootId}-${i}`;
+
+      const btnKey = btn.getAttribute("data-tabs-btn");
+      if (!btnKey) btn.setAttribute("data-tabs-btn", key);
+
+      const panelKey = panel.getAttribute("data-tabs-panel");
+      if (!panelKey) panel.setAttribute("data-tabs-panel", key);
+    }
+
+    const ac = new AbortController();
+    const { signal } = ac;
+
+    const setActiveBtnA11y = (btn, active) => {
+      btn.setAttribute("role", "tab");
+      btn.setAttribute("aria-selected", active ? "true" : "false");
+      btn.tabIndex = active ? 0 : -1;
+    };
+
+    const setActivePanelA11y = (panel, active) => {
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-hidden", active ? "false" : "true");
+    };
+
+    const activate = (btn) => {
+      const targetId = btn.getAttribute("data-tabs-btn");
+      if (!targetId) return;
+
+      tabBtns.forEach((b) => {
+        if (inactiveBtnClasses.length) b.classList.add(...inactiveBtnClasses);
+        if (activeBtnClasses.length) b.classList.remove(...activeBtnClasses);
+        setActiveBtnA11y(b, false);
+      });
+
+      tabPanels.forEach((p) => {
+        if (showPanelClasses.length) p.classList.remove(...showPanelClasses);
+        if (hidePanelClasses.length) p.classList.add(...hidePanelClasses);
+        setActivePanelA11y(p, false);
+      });
+
+      if (inactiveBtnClasses.length)
+        btn.classList.remove(...inactiveBtnClasses);
+      if (activeBtnClasses.length) btn.classList.add(...activeBtnClasses);
+      setActiveBtnA11y(btn, true);
+
+      let panel = root.querySelector(
+        `[data-tabs-panel="${CSS.escape(targetId)}"]`
+      );
+      if (!panel) {
+        const index = Array.from(tabBtns).indexOf(btn);
+        panel = tabPanels[index] || null;
+      }
+      if (panel) {
+        if (hidePanelClasses.length)
+          panel.classList.remove(...hidePanelClasses);
+        if (showPanelClasses.length) panel.classList.add(...showPanelClasses);
+        setActivePanelA11y(panel, true);
+      }
+    };
+
+    document.addEventListener(
+      "click",
+      (event) => {
+        const el = event.target;
+        const btn = el?.closest?.("[data-tabs-btn]");
+        if (!btn) return;
+        if (!root.contains(btn)) return;
+        activate(btn);
+      },
+      { signal }
+    );
+
+    const initBtn = tabBtns[defaultIndex] || tabBtns[0];
+    if (initBtn) activate(initBtn);
+
+    return () => ac.abort();
+  };
+
+  const boot = () => {
+    const state = getState();
+    state.cleanup?.();
+    state.cleanup = initTabs();
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot, { once: true });
+  } else {
+    boot();
+  }
+
+  document.addEventListener("astro:page-load", boot);
+  document.addEventListener("astro:after-swap", boot);
+  window.addEventListener("astro:before-swap", () => getState().cleanup?.());
+</script>

package/components/YearsSince.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  startYear?: number;
+  minYears?: number;
+  offset?: number;
+  suffix?: string;
+}
+
+const {
+  startYear = 2006,
+  minYears = 20,
+  offset = 0,
+  suffix = "+",
+} = Astro.props;
+
+const currentYear = new Date().getFullYear();
+const years = Math.max(minYears, currentYear - startYear + offset);
+---
+
+{years}{suffix}