@rxdrag/website-lib 0.0.102 → 0.0.103

package/src/components/Dialog.astro

@@ -0,0 +1,374 @@
+---
+interface Props {
+  dialogId: string;
+  dialogClass?: string | string[];
+  backdropClass?: string | string[];
+  closeSelector?: string;
+  closeAnimMs?: number;
+  forceFallback?: boolean;
+  preset?: "center" | "top";
+  openAnimMs?: number;
+  translateY?: number;
+  backdropOpacity?: number;
+  backdropBlurPx?: number;
+  topOffsetPx?: number;
+  baseTransform?: string;
+  left?: string;
+  right?: string;
+  top?: string;
+  bottom?: string;
+  openTransform?: string;
+  enterTransform?: string;
+  exitTransform?: string;
+}
+
+const {
+  dialogId,
+  dialogClass = "",
+  backdropClass = "",
+  closeSelector = "[data-dialog-close]",
+  closeAnimMs = 240,
+  forceFallback = false,
+  preset = "center",
+  openAnimMs = 320,
+  translateY = 64,
+  backdropOpacity = 0.35,
+  backdropBlurPx = 0,
+  topOffsetPx = 0,
+  baseTransform,
+  left,
+  right,
+  top,
+  bottom,
+  openTransform,
+  enterTransform,
+  exitTransform,
+} = Astro.props;
+
+const backdropClassString = Array.isArray(backdropClass)
+  ? backdropClass.join(" ")
+  : backdropClass;
+
+const resolvedBaseTransform =
+  baseTransform ||
+  (preset === "center" ? "translate(-50%,-50%)" : "translateX(-50%)");
+
+const resolvedLeft = left ?? (preset === "center" || preset === "top" ? "50%" : "auto");
+const resolvedRight = right ?? "auto";
+const resolvedTop = top ?? (preset === "center" ? "50%" : "0");
+const resolvedBottom = bottom ?? "auto";
+
+const resolvedOpenTransform = openTransform || resolvedBaseTransform;
+const resolvedEnterTransform =
+  enterTransform || `${resolvedOpenTransform} translateY(${translateY}px)`;
+const resolvedExitTransform =
+  exitTransform || `${resolvedOpenTransform} translateY(${translateY}px)`;
+---
+
+<style is:global>
+  dialog[data-generic-dialog] {
+    margin: 0;
+    outline: none;
+    position: fixed;
+    left: var(--dialog-left);
+    right: var(--dialog-right);
+    top: var(--dialog-top);
+    bottom: var(--dialog-bottom);
+    transform: var(--dialog-open-transform);
+  }
+
+  @keyframes genericDialogIn {
+    from {
+      opacity: 0;
+      transform: var(--dialog-enter-transform);
+    }
+    to {
+      opacity: 1;
+      transform: var(--dialog-open-transform);
+    }
+  }
+
+  @keyframes genericDialogOut {
+    from {
+      opacity: 1;
+      transform: var(--dialog-open-transform);
+    }
+    to {
+      opacity: 0;
+      transform: var(--dialog-exit-transform);
+    }
+  }
+
+  @keyframes genericBackdropIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes genericBackdropOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  dialog[data-generic-dialog][open] {
+    animation: genericDialogIn var(--dialog-open-ms) ease-out;
+    transform-origin: top center;
+  }
+
+  dialog[data-generic-dialog][data-dialog-state="closing"] {
+    animation: genericDialogOut var(--dialog-close-ms) ease-in;
+    animation-fill-mode: forwards;
+    transform-origin: top center;
+  }
+
+  dialog[data-generic-dialog]::backdrop {
+    background: rgba(0, 0, 0, var(--dialog-backdrop-opacity));
+    backdrop-filter: blur(var(--dialog-backdrop-blur));
+    animation: genericBackdropIn var(--dialog-open-ms) ease-out;
+  }
+
+  dialog[data-generic-dialog][data-dialog-state="closing"]::backdrop {
+    animation: genericBackdropOut var(--dialog-close-ms) ease-in;
+  }
+
+  dialog[data-generic-dialog] + .backdrop {
+    animation: genericBackdropIn var(--dialog-open-ms) ease-out;
+  }
+
+  dialog[data-generic-dialog] + .backdrop[data-dialog-state="closing"] {
+    animation: genericBackdropOut var(--dialog-close-ms) ease-in;
+  }
+</style>
+
+<dialog
+  id={dialogId}
+  data-generic-dialog
+  data-openable-key={dialogId}
+  data-dialog-preset={preset}
+  tabindex="-1"
+  class:list={[dialogClass]}
+  style={preset === "center"
+    ? `--dialog-left:${resolvedLeft};--dialog-right:${resolvedRight};--dialog-top:${resolvedTop};--dialog-bottom:${resolvedBottom};--dialog-open-transform:${resolvedOpenTransform};--dialog-enter-transform:${resolvedEnterTransform};--dialog-exit-transform:${resolvedExitTransform};--dialog-open-ms:${openAnimMs}ms;--dialog-close-ms:${closeAnimMs}ms;--dialog-ty:${translateY}px;--dialog-backdrop-opacity:${backdropOpacity};--dialog-backdrop-blur:${backdropBlurPx}px;`
+    : `--dialog-left:${resolvedLeft};--dialog-right:${resolvedRight};--dialog-top:${resolvedTop};--dialog-bottom:${resolvedBottom};--dialog-open-transform:${resolvedOpenTransform};--dialog-enter-transform:${resolvedEnterTransform};--dialog-exit-transform:${resolvedExitTransform};--dialog-open-ms:${openAnimMs}ms;--dialog-close-ms:${closeAnimMs}ms;--dialog-ty:${translateY}px;--dialog-backdrop-opacity:${backdropOpacity};--dialog-backdrop-blur:${backdropBlurPx}px;margin-top:${topOffsetPx}px;`}
+>
+  <slot />
+</dialog>
+
+<script
+  is:inline
+  define:vars={{
+    openableKey: dialogId,
+    closeSelector,
+    closeAnimMs,
+    forceFallback,
+    backdropClassString,
+    openAnimMs,
+    backdropOpacity,
+    backdropBlurPx,
+  }}
+>
+  (() => {
+    const globalKey = "__generic_dialog_open_bound__";
+    const w = window;
+    if (!w[globalKey]) w[globalKey] = new Set();
+
+    const logPrefix = `[Dialog:${openableKey}]`;
+
+    const backdropClass = backdropClassString || "";
+
+    const isDialogEl = (el) => {
+      if (!(el instanceof HTMLElement)) return false;
+      return el.tagName.toLowerCase() === "dialog";
+    };
+
+    const getDialog = () => {
+      const el = document.getElementById(openableKey);
+      if (!isDialogEl(el)) {
+        console.log(logPrefix, "getDialog: dialog not found", openableKey);
+        return null;
+      }
+      return el;
+    };
+
+    const isOpen = (dialog) => {
+      return dialog.open === true || dialog.hasAttribute("open");
+    };
+
+    const ensureBackdrop = (dialog) => {
+      if (dialog.nextElementSibling?.classList?.contains("backdrop")) return;
+      const backdrop = document.createElement("div");
+      backdrop.className = backdropClass
+        ? `backdrop ${backdropClass}`
+        : "backdrop";
+      backdrop.removeAttribute("data-dialog-state");
+      backdrop.style.background = `rgba(0, 0, 0, ${backdropOpacity})`;
+      backdrop.style.backdropFilter = backdropBlurPx
+        ? `blur(${backdropBlurPx}px)`
+        : "";
+      backdrop.style.animation = `genericBackdropIn ${openAnimMs}ms ease-out`;
+      console.log(logPrefix, "ensureBackdrop: create", {
+        backdropClass,
+        backdropOpacity,
+        backdropBlurPx,
+        openAnimMs,
+      });
+      backdrop.addEventListener("click", () =>
+        requestClose(dialog, "backdrop")
+      );
+      dialog.insertAdjacentElement("afterend", backdrop);
+    };
+
+    const getBackdrop = (dialog) => {
+      const next = dialog.nextElementSibling;
+      if (next && next.classList?.contains("backdrop")) return next;
+      return null;
+    };
+
+    const removeBackdrop = (dialog) => {
+      const next = dialog.nextElementSibling;
+      if (next && next.classList?.contains("backdrop")) {
+        console.log(logPrefix, "removeBackdrop");
+        next.remove();
+      }
+    };
+
+    const closeNow = (dialog) => {
+      console.log(logPrefix, "closeNow");
+      if (typeof dialog.close === "function") {
+        dialog.close();
+      } else {
+        dialog.removeAttribute("open");
+      }
+      removeBackdrop(dialog);
+      document.removeEventListener("keydown", dialog.__genericDialogEscHandler);
+      dialog.__genericDialogEscHandler = undefined;
+    };
+
+    const requestClose = (dialog, reason = "unknown") => {
+      console.log(logPrefix, "requestClose", {
+        reason,
+        open: isOpen(dialog),
+        state: dialog.getAttribute("data-dialog-state"),
+      });
+      if (!isOpen(dialog)) return;
+      if (dialog.getAttribute("data-dialog-state") === "closing") return;
+      dialog.setAttribute("data-dialog-state", "closing");
+      const backdrop = getBackdrop(dialog);
+      backdrop?.setAttribute?.("data-dialog-state", "closing");
+      if (backdrop) {
+        backdrop.style.animation = `genericBackdropOut ${closeAnimMs}ms ease-in`;
+      }
+      window.setTimeout(() => {
+        dialog.removeAttribute("data-dialog-state");
+        closeNow(dialog);
+      }, closeAnimMs);
+    };
+
+    const ensureDialogBound = (dialog) => {
+      if (dialog.dataset.genericDialogBound) return;
+      dialog.dataset.genericDialogBound = "1";
+
+      console.log(logPrefix, "ensureDialogBound", {
+        closeSelector,
+      });
+
+      dialog.addEventListener("click", (e) => {
+        if (e.target === dialog) requestClose(dialog, "dialog_blank_area");
+      });
+
+      if (typeof dialog.addEventListener === "function") {
+        dialog.addEventListener("cancel", (e) => {
+          e.preventDefault();
+          requestClose(dialog, "cancel");
+        });
+      }
+
+      dialog
+        .querySelector(closeSelector)
+        ?.addEventListener("click", () =>
+          requestClose(dialog, "close_selector")
+        );
+    };
+
+    const open = () => {
+      const dialog = getDialog();
+      if (!dialog) return;
+      ensureDialogBound(dialog);
+      if (isOpen(dialog)) return;
+
+      try {
+        console.log(logPrefix, "open: start", {
+          forceFallback,
+          __force_dialog_fallback__: window.__force_dialog_fallback__,
+          hasShowModal: typeof dialog.showModal === "function",
+        });
+        const { scrollX, scrollY } = window;
+        dialog.removeAttribute("data-dialog-state");
+
+        const effectiveForceFallback =
+          forceFallback === true || window.__force_dialog_fallback__ === true;
+
+        if (!effectiveForceFallback && typeof dialog.showModal === "function") {
+          console.log(logPrefix, "open: native showModal");
+          dialog.showModal();
+        } else {
+          console.log(logPrefix, "open: fallback open attr + backdrop + esc");
+          ensureBackdrop(dialog);
+          dialog.setAttribute("open", "");
+          dialog.__genericDialogEscHandler = (e) => {
+            if (e.key === "Escape") requestClose(dialog, "esc");
+          };
+          document.addEventListener(
+            "keydown",
+            dialog.__genericDialogEscHandler
+          );
+        }
+
+        requestAnimationFrame(() => {
+          window.scrollTo(scrollX, scrollY);
+          try {
+            dialog.focus({ preventScroll: true });
+          } catch {
+            dialog.focus();
+          }
+          console.log(logPrefix, "open: focus done");
+        });
+      } catch (err) {
+        console.log(logPrefix, "open failed", err);
+      }
+    };
+
+    const init = () => {
+      console.log(logPrefix, "init", {
+        alreadyBound: w[globalKey].has(openableKey),
+      });
+      if (!w[globalKey].has(openableKey)) {
+        w[globalKey].add(openableKey);
+        document.addEventListener("click", (e) => {
+          const target = e.target;
+          if (!(target instanceof Element)) return;
+          const opener = target.closest(`[data-modal-open="${openableKey}"]`);
+          if (!opener) return;
+          const cta = opener.getAttribute("data-call-to-action") || "";
+          window.lastCta = cta;
+          console.log(logPrefix, "opener click -> open", {
+            cta,
+            openerTag: opener.tagName,
+          });
+          open();
+        });
+      }
+    };
+
+    init();
+    document.addEventListener("astro:page-load", init);
+    document.addEventListener("astro:after-swap", init);
+  })();
+</script>

package/src/components/DialogTrigger.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  dialogId: string;
+  callToAction?: string;
+  class?: string;
+  className?: string;
+}
+
+const {
+  dialogId,
+  callToAction,
+  class: _class,
+  className,
+  ...rest
+} = Astro.props;
+---
+
+<button
+  type="button"
+  data-modal-open={dialogId}
+  data-call-to-action={callToAction}
+  class:list={[className, _class]}
+  {...rest}
+>
+  <slot />
+</button>

package/src/components/Link.astro

@@ -1,32 +1,23 @@
 ---
 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;
-  options?: {
-    productsSlug?: string;
-    postsSlug?: string;
-  };
-}
 
-interface Props extends IMotionProps, AnchorAttributes {
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {
   type?: LinkType | string;
   to?: string | undefined;
   class?: string;
   className?: string;
   //用于active类名的传递
   activeWhen?: string | true;
+
+  options?: {
+    productsSlug?: string;
+    postsSlug?: string;
+  };
 }
 
 const {
@@ -42,20 +33,39 @@ const href = toHref(type || "", to || "", options);
 const hrefObj = href ? { href } : {};
 ---
 
-<Motion
-  as={"a"}
+<a
   data-actived-path={activeWhen}
   {...hrefObj}
   class:list={[cls, className]}
   {...props}
 >
   <slot />
-</Motion>
+</a>
+
+<script is:inline>
+  import { initLinks } from "@rxdrag/website-lib-core";
+
+  (() => {
+    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();
+      }
 
-<script>
-  import { initLinks, pageLoader } from "@rxdrag/website-lib-core";
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    };
 
-  pageLoader.onLoaded(() => {
-    initLinks();
-  });
+    bindAstroLifecycle("website-lib:init-links", () => {
+      initLinks();
+    });
+  })();
 </script>

package/src/components/Popover.astro

@@ -1,20 +1,187 @@
 ---
-import {
-  getPopoverDataAttrs,
-  type IMotionProps,
-} from "@rxdrag/website-lib-core";
-
-import Motion from "./Motion.astro";
+interface ClassNames {
+  root?: string | string[];
+  trigger?: string | string[];
+  panel?: string | string[];
+}
 
-interface Props extends IMotionProps {
-  openableKey?: string;
+interface Props {
+  id: string;
+  classNames?: ClassNames;
 }
 
-const { openableKey, ...rest } = Astro.props;
+const { id, classNames } = Astro.props;
+
+const normalize = (v?: string | string[]) => {
+  if (!v) return [];
+  return Array.isArray(v) ? v : [v];
+};
 
-const dataAttrs = getPopoverDataAttrs(openableKey);
+const rootClassList = normalize(classNames?.root);
+const triggerClassList = normalize(classNames?.trigger);
+const panelClassList = normalize(classNames?.panel);
 ---
 
-<Motion {...dataAttrs} {...rest}>
-  <slot />
-</Motion>
+<div class:list={rootClassList} data-popover={id} data-open="0">
+  <style>
+    [data-popover-panel] {
+      height: 0;
+      overflow: hidden;
+      will-change: height;
+    }
+
+    [data-popover-arrow] {
+      transition: transform 200ms ease;
+    }
+
+    [data-popover][data-open="1"] [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>