@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/Popover.astro

@@ -1,189 +1,189 @@
----
-interface ClassNames {
-  root?: string | string[];
-  trigger?: string | string[];
-  panel?: string | string[];
-}
-
-interface Props {
-  id: string;
-  classNames?: ClassNames;
-}
-
-const { id, classNames } = Astro.props;
-
-const normalize = (v?: string | string[]) => {
-  if (!v) return [];
-  return Array.isArray(v) ? v : [v];
-};
-
-const rootClassList = normalize(classNames?.root);
-const triggerClassList = normalize(classNames?.trigger);
-const panelClassList = normalize(classNames?.panel);
----
-
-<div class:list={rootClassList} data-popover={id} data-open="0">
-  <style>
-    [data-popover-panel] {
-      height: 0;
-      overflow: hidden;
-      will-change: height;
-    }
-
-    :global([data-popover-arrow]) {
-      display: inline-flex;
-      transform-origin: center;
-      transition: transform 200ms ease;
-    }
-
-    [data-popover][data-open="1"] :global([data-popover-arrow]) {
-      transform: rotate(180deg);
-    }
-  </style>
-
-  <button
-    type="button"
-    class:list={triggerClassList}
-    data-popover-trigger
-    aria-expanded="false"
-    aria-controls={`${id}-panel`}
-  >
-    <slot name="trigger" />
-  </button>
-
-  <div
-    id={`${id}-panel`}
-    data-popover-panel
-    class:list={panelClassList}
-    style="height:0px;overflow:hidden;"
-  >
-    <slot />
-  </div>
-</div>
-
-<script is:inline>
-  (() => {
-    const globalKey = "__popover_doc_bound__";
-    const w = window;
-    if (!w[globalKey]) w[globalKey] = { docBound: false };
-
-    const init = () => {
-      const roots = document.querySelectorAll("[data-popover]");
-      roots.forEach((root) => {
-        if (!(root instanceof HTMLElement)) return;
-        if (root.dataset.bound === "1") return;
-        root.dataset.bound = "1";
-
-      const panel = root.querySelector("[data-popover-panel]");
-      const trigger = root.querySelector("[data-popover-trigger]");
-      if (!(panel instanceof HTMLElement) || !(trigger instanceof HTMLElement)) {
-        console.log("Popover: trigger/panel not found");
-        return;
-      }
-
-      let open = false;
-      let hoverTimer;
-
-      const setExpanded = (v) => {
-        trigger.setAttribute("aria-expanded", v ? "true" : "false");
-        root.setAttribute("data-open", v ? "1" : "0");
-      };
-
-      const openPanel = () => {
-        if (open) return;
-        open = true;
-        setExpanded(true);
-        panel.style.transition = "height 600ms ease";
-        panel.style.height = "0px";
-        const h = panel.scrollHeight;
-        requestAnimationFrame(() => {
-          panel.style.height = h + "px";
-        });
-        const onEnd = () => {
-          if (open) {
-            panel.style.height = "auto";
-          }
-          panel.removeEventListener("transitionend", onEnd);
-        };
-        panel.addEventListener("transitionend", onEnd);
-      };
-
-      const closePanel = () => {
-        if (!open) return;
-        open = false;
-        setExpanded(false);
-        const h = panel.scrollHeight;
-        panel.style.transition = "height 250ms ease";
-        panel.style.height = h + "px";
-        requestAnimationFrame(() => {
-          panel.style.height = "0px";
-        });
-      };
-
-      root.__popoverClose = closePanel;
-
-      const toggle = () => {
-        if (open) closePanel();
-        else openPanel();
-      };
-
-      trigger.addEventListener("click", (e) => {
-        e.preventDefault();
-        toggle();
-      });
-
-      root.addEventListener("mouseenter", () => {
-        clearTimeout(hoverTimer);
-        hoverTimer = setTimeout(() => openPanel(), 60);
-      });
-
-      root.addEventListener("mouseleave", () => {
-        clearTimeout(hoverTimer);
-        hoverTimer = setTimeout(() => closePanel(), 120);
-      });
-    });
-
-      if (!w[globalKey].docBound) {
-        w[globalKey].docBound = true;
-
-      const closeAll = () => {
-        const opened = document.querySelectorAll('[data-popover][data-open="1"]');
-        opened.forEach((r) => {
-          if (!(r instanceof HTMLElement)) return;
-          if (typeof r.__popoverClose === "function") {
-            r.__popoverClose();
-            return;
-          }
-          const p = r.querySelector("[data-popover-panel]");
-          const trig = r.querySelector("[data-popover-trigger]");
-          if (!(p instanceof HTMLElement) || !(trig instanceof HTMLElement)) return;
-          trig.setAttribute("aria-expanded", "false");
-          r.setAttribute("data-open", "0");
-          const h = p.scrollHeight;
-          p.style.transition = "height 250ms ease";
-          p.style.height = h + "px";
-          requestAnimationFrame(() => {
-            p.style.height = "0px";
-          });
-        });
-      };
-
-      document.addEventListener("click", (e) => {
-        const t = e.target;
-        if (!(t instanceof Element)) return;
-        if (t.closest('[data-popover][data-open="1"]')) return;
-        closeAll();
-      });
-
-      document.addEventListener("keydown", (e) => {
-        if (e.key !== "Escape") return;
-        closeAll();
-      });
-      }
-    };
-
-    init();
-    document.addEventListener("astro:page-load", init);
-    document.addEventListener("astro:after-swap", init);
-  })();
-</script>
+---
+interface ClassNames {
+  root?: string | string[];
+  trigger?: string | string[];
+  panel?: string | string[];
+}
+
+interface Props {
+  id: string;
+  classNames?: ClassNames;
+}
+
+const { id, classNames } = Astro.props;
+
+const normalize = (v?: string | string[]) => {
+  if (!v) return [];
+  return Array.isArray(v) ? v : [v];
+};
+
+const rootClassList = normalize(classNames?.root);
+const triggerClassList = normalize(classNames?.trigger);
+const panelClassList = normalize(classNames?.panel);
+---
+
+<div class:list={rootClassList} data-popover={id} data-open="0">
+  <style>
+    [data-popover-panel] {
+      height: 0;
+      overflow: hidden;
+      will-change: height;
+    }
+
+    :global([data-popover-arrow]) {
+      display: inline-flex;
+      transform-origin: center;
+      transition: transform 200ms ease;
+    }
+
+    [data-popover][data-open="1"] :global([data-popover-arrow]) {
+      transform: rotate(180deg);
+    }
+  </style>
+
+  <button
+    type="button"
+    class:list={triggerClassList}
+    data-popover-trigger
+    aria-expanded="false"
+    aria-controls={`${id}-panel`}
+  >
+    <slot name="trigger" />
+  </button>
+
+  <div
+    id={`${id}-panel`}
+    data-popover-panel
+    class:list={panelClassList}
+    style="height:0px;overflow:hidden;"
+  >
+    <slot />
+  </div>
+</div>
+
+<script is:inline>
+  (() => {
+    const globalKey = "__popover_doc_bound__";
+    const w = window;
+    if (!w[globalKey]) w[globalKey] = { docBound: false };
+
+    const init = () => {
+      const roots = document.querySelectorAll("[data-popover]");
+      roots.forEach((root) => {
+        if (!(root instanceof HTMLElement)) return;
+        if (root.dataset.bound === "1") return;
+        root.dataset.bound = "1";
+
+      const panel = root.querySelector("[data-popover-panel]");
+      const trigger = root.querySelector("[data-popover-trigger]");
+      if (!(panel instanceof HTMLElement) || !(trigger instanceof HTMLElement)) {
+        console.log("Popover: trigger/panel not found");
+        return;
+      }
+
+      let open = false;
+      let hoverTimer;
+
+      const setExpanded = (v) => {
+        trigger.setAttribute("aria-expanded", v ? "true" : "false");
+        root.setAttribute("data-open", v ? "1" : "0");
+      };
+
+      const openPanel = () => {
+        if (open) return;
+        open = true;
+        setExpanded(true);
+        panel.style.transition = "height 600ms ease";
+        panel.style.height = "0px";
+        const h = panel.scrollHeight;
+        requestAnimationFrame(() => {
+          panel.style.height = h + "px";
+        });
+        const onEnd = () => {
+          if (open) {
+            panel.style.height = "auto";
+          }
+          panel.removeEventListener("transitionend", onEnd);
+        };
+        panel.addEventListener("transitionend", onEnd);
+      };
+
+      const closePanel = () => {
+        if (!open) return;
+        open = false;
+        setExpanded(false);
+        const h = panel.scrollHeight;
+        panel.style.transition = "height 250ms ease";
+        panel.style.height = h + "px";
+        requestAnimationFrame(() => {
+          panel.style.height = "0px";
+        });
+      };
+
+      root.__popoverClose = closePanel;
+
+      const toggle = () => {
+        if (open) closePanel();
+        else openPanel();
+      };
+
+      trigger.addEventListener("click", (e) => {
+        e.preventDefault();
+        toggle();
+      });
+
+      root.addEventListener("mouseenter", () => {
+        clearTimeout(hoverTimer);
+        hoverTimer = setTimeout(() => openPanel(), 60);
+      });
+
+      root.addEventListener("mouseleave", () => {
+        clearTimeout(hoverTimer);
+        hoverTimer = setTimeout(() => closePanel(), 120);
+      });
+    });
+
+      if (!w[globalKey].docBound) {
+        w[globalKey].docBound = true;
+
+      const closeAll = () => {
+        const opened = document.querySelectorAll('[data-popover][data-open="1"]');
+        opened.forEach((r) => {
+          if (!(r instanceof HTMLElement)) return;
+          if (typeof r.__popoverClose === "function") {
+            r.__popoverClose();
+            return;
+          }
+          const p = r.querySelector("[data-popover-panel]");
+          const trig = r.querySelector("[data-popover-trigger]");
+          if (!(p instanceof HTMLElement) || !(trig instanceof HTMLElement)) return;
+          trig.setAttribute("aria-expanded", "false");
+          r.setAttribute("data-open", "0");
+          const h = p.scrollHeight;
+          p.style.transition = "height 250ms ease";
+          p.style.height = h + "px";
+          requestAnimationFrame(() => {
+            p.style.height = "0px";
+          });
+        });
+      };
+
+      document.addEventListener("click", (e) => {
+        const t = e.target;
+        if (!(t instanceof Element)) return;
+        if (t.closest('[data-popover][data-open="1"]')) return;
+        closeAll();
+      });
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key !== "Escape") return;
+        closeAll();
+      });
+      }
+    };
+
+    init();
+    document.addEventListener("astro:page-load", init);
+    document.addEventListener("astro:after-swap", init);
+  })();
+</script>

package/components/RichTextView.astro

@@ -1,28 +1,28 @@
----
-import { mdxToTiptap, TiptapPreview } from "@rxdrag/tiptap-preview";
-import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
-import React from "react";
-
-interface Props {
-  value?: string;
-  class?: string;
-  style?: string | Record<string, string | number>;
-}
-
-const { value = "", class: className, style } = Astro.props;
-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}>
-  <TiptapPreview value={tiptapValue} customBlocks={customBlocks} />
-</div>
+---
+import { mdxToTiptap, TiptapPreview } from "@rxdrag/tiptap-preview";
+import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
+import React from "react";
+
+interface Props {
+  value?: string;
+  class?: string;
+  style?: string | Record<string, string | number>;
+}
+
+const { value = "", class: className, style } = Astro.props;
+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}>
+  <TiptapPreview value={tiptapValue} customBlocks={customBlocks} />
+</div>

package/components/Section.astro

@@ -1,44 +1,26 @@
----
-import type { HTMLAttributes } from "astro/types";
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-import BackgroundGroup from "./BackgroundGroup.astro";
-import Container from "./Container.astro";
-
-/**
- * 区块
- *
- * 规范：被冻结（Frozen）的设计器原子组件
- * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
- * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
- * - 默认包裹 Container 提供统一容器宽度；需要全宽内容时使用 disableContainer
- */
-
-interface Props extends HTMLAttributes<'section'> {
-  className?: string;
-  containerClassName?: string;
-  backgrounds?: BackgroundConfig[];
-  disableContainer?: boolean;
-}
-
-const {
-  className,
-  containerClassName,
-  backgrounds,
-  disableContainer,
-  class: originalClass,
-  ...rest
-} = Astro.props;
----
-
-<section class:list={["section-block", className, originalClass]} {...rest}>
-  <BackgroundGroup backgrounds={backgrounds} />
-  {
-    disableContainer ? (
-      <slot />
-    ) : (
-      <Container class:list={["w-full h-full", containerClassName]}>
-        <slot />
-      </Container>
-    )
-  }
-</section>
+---
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+/**
+ * 区块
+ *
+ * 规范：被冻结（Frozen）的设计器原子组件
+ * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
+ * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
+ * - 默认包裹 Container 提供统一容器宽度；需要全宽内容时使用 disableContainer
+ */
+
+interface Props extends HTMLAttributes<"section"> {
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, backgrounds, class: originalClass, ...rest } = Astro.props;
+---
+
+<section class:list={["section-block", className, originalClass]} {...rest}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</section>

package/components/TabButton.astro

@@ -1,16 +1,32 @@
----
-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>
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+interface Props {
+  class?: string;
+  className?: string;
+  active?: boolean | string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const {
+  class: className,
+  className: className2,
+  active,
+  backgrounds,
+  ...props
+} = Astro.props;
+const isActive =
+  active === true ||
+  (typeof active === "string" && (active === "" || active === "true"));
+---
+
+<button
+  class:list={["tab-btn relative", className, className2, isActive && "active"]}
+  data-tabs-btn="true"
+  data-tabs-role="button"
+  {...props}
+>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</button>

package/components/TabPanel.astro

@@ -1,19 +1,20 @@
----
-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>
+---
+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="true"
+  data-tabs-role="panel"
+  class:list={["tab-content", className, isActive ? "block" : "hidden"]}
+  {...props}
+>
+  <slot />
+</div>