@rxdrag/website-lib 0.0.105 → 0.0.107

package/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/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/components/FooterShell.astro

@@ -0,0 +1,43 @@
+---
+import type {
+  AnimationConfig,
+  BackgroundConfig,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+import Container from "./Container.astro";
+
+/**
+ * 区块
+ */
+
+interface Props {
+  class?: string;
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AnimationConfig;
+  disableContainer?: boolean;
+}
+
+const {
+  className,
+  containerClassName,
+  backgrounds,
+  disableContainer,
+  class: originalClass,
+} = Astro.props;
+---
+
+<footer class:list={["footer-block relative", className, originalClass]}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  {
+    disableContainer ? (
+      <slot />
+    ) : (
+      <Container class:list={["w-full h-full", containerClassName]}>
+        <slot />
+      </Container>
+    )
+  }
+</footer>

package/components/Grid.astro

@@ -0,0 +1,26 @@
+---
+import type {
+  AnimationConfig,
+  BackgroundConfig,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+interface Props {
+  //布局方案名称，设计qi'yong
+  patternName?: string;
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AnimationConfig;
+}
+
+const { className, class: originalClass, backgrounds } = Astro.props;
+
+//布局容器
+---
+
+<div class:list={["relative grid gap-12", className, originalClass]}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</div>

package/components/GridCell.astro

@@ -0,0 +1,22 @@
+---
+import type {
+  AnimationConfig,
+  BackgroundConfig,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+interface Props {
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AnimationConfig;
+}
+
+const { className, class: originalClass, backgrounds } = Astro.props;
+---
+
+<div class:list={["w-full h-full flex flex-col", className, originalClass]}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</div>

package/components/HeaderShell.astro

@@ -0,0 +1,43 @@
+---
+import type {
+  AnimationConfig,
+  BackgroundConfig,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+import Container from "./Container.astro";
+
+/**
+ * 区块
+ */
+
+interface Props {
+  class?: string;
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AnimationConfig;
+  disableContainer?: boolean;
+}
+
+const {
+  className,
+  containerClassName,
+  backgrounds,
+  disableContainer,
+  class: originalClass,
+} = Astro.props;
+---
+
+<header class:list={["header-block", className, originalClass]}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  {
+    disableContainer ? (
+      <slot />
+    ) : (
+      <Container class:list={["w-full h-full", containerClassName]}>
+        <slot />
+      </Container>
+    )
+  }
+</header>

package/components/Icon.astro

@@ -0,0 +1,30 @@
+---
+import {
+  Icon as CoreIcon,
+  Entify,
+  type Locals,
+} from "@rxdrag/website-lib-core";
+
+interface Props {
+  className?: string;
+  icon?: string;
+  svg?: string;
+}
+const { env, imageSizes } = Astro.locals as Locals;
+const { className, icon, svg, ...rest } = Astro.props;
+
+const localIconName = icon?.startsWith("local:") ? icon?.split(":")[1] : null;
+
+const rx = Entify.getInstance(env, imageSizes);
+
+const svgIcon =
+  !!rx && localIconName ? await rx.getIcon(localIconName) : undefined;
+---
+
+<CoreIcon
+  className={className}
+  icon={localIconName ? undefined : icon}
+  svg={svgIcon?.code || svg}
+  {...rest}
+  client:only="react"
+/>

package/components/Image.astro

@@ -0,0 +1,18 @@
+---
+import { Entify, type ImageProps, type Locals } from "@rxdrag/website-lib-core";
+const { env, imageSizes } = Astro.locals as Locals;
+
+interface Props extends ImageProps {}
+
+const { mediaRef, fileField, resize, className, ...props } = Astro.props;
+
+const rx = Entify.getInstance(env, imageSizes);
+
+const media = rx ? await rx.getMedia(mediaRef, fileField, resize) : undefined;
+---
+
+<img
+  src={fileField ? media?.file?.[fileField] : media?.file?.original || ""}
+  class={className}
+  {...props}
+/>

package/components/Link.astro

@@ -0,0 +1,71 @@
+---
+import {
+  toHref,
+  type LinkType,
+} from "@rxdrag/website-lib-core";
+
+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 {
+  type,
+  to,
+  class: cls,
+  className,
+  activeWhen,
+  options,
+  ...props
+} = Astro.props;
+const href = toHref(type || "", to || "", options);
+const hrefObj = href ? { href } : {};
+---
+
+<a
+  data-actived-path={activeWhen}
+  {...hrefObj}
+  class:list={[cls, className]}
+  {...props}
+>
+  <slot />
+</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();
+      }
+
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    };
+
+    bindAstroLifecycle("website-lib:init-links", () => {
+      initLinks();
+    });
+  })();
+</script>