@rxdrag/website-lib 0.0.141 → 0.0.144

package/components/BaseHeader.astro

@@ -19,7 +19,7 @@ interface Props extends HTMLAttributes<"header"> {
 const { className, backgrounds, class: originalClass, ...rest } = Astro.props;
 ---
 
-<header class:list={["header-block", className, originalClass]} {...rest}>
+<header class:list={["header", className, originalClass]} {...rest}>
   <BackgroundGroup backgrounds={backgrounds} />
   <slot />
 </header>

package/components/Container.astro

@@ -1,6 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 import BaseBlock from "./BaseBlock.astro";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
 
 /**
  * 容器
@@ -13,9 +15,10 @@ import BaseBlock from "./BaseBlock.astro";
 interface Props extends HTMLAttributes<"div"> {
   //布局
   className?: string;
+  backgrounds?: BackgroundConfig[];
 }
 
-const { className, class: classAttr, ...rest } = Astro.props;
+const { className, class: classAttr, backgrounds, ...rest } = Astro.props;
 ---
 
 <BaseBlock
@@ -24,5 +27,6 @@ const { className, class: classAttr, ...rest } = Astro.props;
   class={classAttr}
   {...rest}
 >
+  <BackgroundGroup backgrounds={backgrounds} />
   <slot />
 </BaseBlock>

package/components/HeroCarousel.astro

@@ -0,0 +1,204 @@
+---
+import Section from "./Section.astro";
+import clsx from "clsx";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+interface Props {
+  class?: string;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Section
+  className={clsx(
+    "w-full h-[300px] sm:h-[400px] md:h-screen flex flex-col mt-0 bg-black relative overflow-hidden z-10 py-0",
+    className,
+  )}
+  disableContainer
+  {...rest}
+>
+  <div class="hero-carousel w-full h-full relative" data-hero-carousel>
+    <div class="swiper h-full relative">
+      <div class="swiper-wrapper h-full">
+        <slot />
+      </div>
+      <slot name="navigation" />
+      <slot name="pagination" />
+    </div>
+  </div>
+</Section>
+
+<script>
+  type SwiperRootEl = HTMLElement & { __swiperInstance?: any };
+  type SwiperType = typeof import("swiper").default;
+  type SwiperModulesType = typeof import("swiper/modules");
+
+  type BootWindow = Window & {
+    __heroCarouselBootstrapped?: boolean;
+  };
+
+  const destroyRoot = (root: SwiperRootEl) => {
+    const existing = root.__swiperInstance;
+    if (existing && typeof existing.destroy === "function") {
+      existing.destroy(true, true);
+      root.__swiperInstance = null;
+    }
+    root.dataset.heroCarouselInited = "";
+  };
+
+  const loadSwiperResources = async () => {
+    const [{ default: Swiper }, { Autoplay, Navigation, Pagination }] =
+      await Promise.all([import("swiper"), import("swiper/modules")]);
+    return { Swiper, Autoplay, Navigation, Pagination };
+  };
+
+  let swiperCache: {
+    Swiper: SwiperType;
+    Autoplay: SwiperModulesType["Autoplay"];
+    Navigation: SwiperModulesType["Navigation"];
+    Pagination: SwiperModulesType["Pagination"];
+  } | null = null;
+
+  const getSwiperModules = async () => {
+    if (!swiperCache) {
+      swiperCache = await loadSwiperResources();
+    }
+    return swiperCache;
+  };
+
+  const initRoot = async (root: SwiperRootEl) => {
+    if (root.dataset.heroCarouselInited === "1") {
+      return;
+    }
+
+    const el = root.querySelector(".swiper") as HTMLElement | null;
+    if (!el) return;
+
+    const paginationEl = root.querySelector(
+      ".swiper-pagination",
+    ) as HTMLElement | null;
+    const prevEl = root.querySelector(
+      ".swiper-button-prev",
+    ) as HTMLElement | null;
+    const nextEl = root.querySelector(
+      ".swiper-button-next",
+    ) as HTMLElement | null;
+
+    const wantPagination = !!paginationEl;
+    const wantNavigation = !!prevEl && !!nextEl;
+
+    destroyRoot(root);
+
+    const { Swiper, Autoplay, Navigation, Pagination } =
+      await getSwiperModules();
+
+    const modules = [Autoplay] as any[];
+    if (wantPagination) {
+      modules.push(Pagination);
+    }
+    if (wantNavigation) {
+      modules.push(Navigation);
+    }
+
+    const instance = new Swiper(el, {
+      modules,
+      slidesPerView: 1,
+      spaceBetween: 0,
+      rewind: true,
+      observer: true,
+      observeParents: true,
+      autoplay: {
+        delay: 3500,
+        disableOnInteraction: false,
+        pauseOnMouseEnter: false,
+      },
+      ...(wantPagination && paginationEl
+        ? {
+            pagination: {
+              el: paginationEl,
+              clickable: true,
+              type: "bullets",
+              bulletActiveClass: "swiper-pagination-bullet-active",
+            },
+          }
+        : {}),
+      ...(wantNavigation && prevEl && nextEl
+        ? {
+            navigation: {
+              prevEl,
+              nextEl,
+            },
+          }
+        : {}),
+    });
+
+    try {
+      instance.autoplay?.start?.();
+    } catch {}
+
+    root.__swiperInstance = instance;
+    root.dataset.heroCarouselInited = "1";
+  };
+
+  const initAll = async () => {
+    const roots = document.querySelectorAll(
+      "[data-hero-carousel]",
+    ) as NodeListOf<SwiperRootEl>;
+    if (roots.length === 0) return;
+    await Promise.all(Array.from(roots).map((root) => initRoot(root)));
+  };
+
+  const destroyAll = () => {
+    const roots = document.querySelectorAll(
+      "[data-hero-carousel]",
+    ) as NodeListOf<SwiperRootEl>;
+    roots.forEach((root) => destroyRoot(root));
+  };
+
+  const ensureAutoplayAll = () => {
+    const roots = document.querySelectorAll(
+      "[data-hero-carousel]",
+    ) as NodeListOf<SwiperRootEl>;
+    roots.forEach((root) => {
+      const inst = root.__swiperInstance;
+      try {
+        inst?.autoplay?.start?.();
+      } catch {}
+    });
+  };
+
+  const boot = async () => {
+    try {
+      await initAll();
+    } catch (e) {
+      console.log("HeroCarousel init error:", e);
+    }
+  };
+
+  const w = window as BootWindow;
+  if (!w.__heroCarouselBootstrapped) {
+    w.__heroCarouselBootstrapped = true;
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", boot);
+    } else {
+      boot();
+    }
+
+    document.addEventListener("astro:page-load", boot);
+    document.addEventListener("astro:after-swap", () => {
+      boot();
+      ensureAutoplayAll();
+    });
+    window.addEventListener("astro:before-swap", destroyAll);
+
+    document.addEventListener("visibilitychange", () => {
+      if (!document.hidden) {
+        ensureAutoplayAll();
+      }
+    });
+  }
+</script>

package/components/HeroCarouselPanel.astro

@@ -0,0 +1,24 @@
+---
+import Box from "./Box.astro";
+import Container from "./Container.astro";
+import clsx from "clsx";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface Props {
+  class?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { class: className, backgrounds } = Astro.props;
+---
+
+<div class={clsx("swiper-slide h-full")}>
+  <Box
+    class={clsx("w-full h-full flex flex-col justify-center")}
+    backgrounds={backgrounds}
+  >
+    <Container class={className}>
+      <slot />
+    </Container>
+  </Box>
+</div>

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.141",
+  "version": "0.0.144",
   "type": "module",
   "exports": {
     ".": "./index.ts",
+    "./components/HeroCarousel.astro": "./components/HeroCarousel.astro",
+    "./components/HeroCarouselPanel.astro": "./components/HeroCarouselPanel.astro",
     "./components/*.astro": "./components/*.astro"
   },
   "files": [
@@ -25,12 +27,13 @@
     "astro": "^5.16.6",
     "eslint": "^9.39.2",
     "gsap": "^3.12.7",
+    "swiper": "^12.0.3",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.13",
-    "@rxdrag/tiptap-preview": "0.0.3",
+    "@rxdrag/entify-hooks": "0.2.79",
     "@rxdrag/rxcms-models": "0.3.106",
+    "@rxdrag/eslint-config-custom": "0.2.13",
     "@rxdrag/tsconfig": "0.2.1",
-    "@rxdrag/entify-hooks": "0.2.79"
+    "@rxdrag/tiptap-preview": "0.0.3"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",
@@ -39,10 +42,11 @@
     "react-dom": "^19.1.0",
     "vanilla-cookieconsent": "3.1.0",
     "@rxdrag/rxcms-models": "0.3.106",
-    "@rxdrag/website-lib-core": "0.0.124"
+    "@rxdrag/website-lib-core": "0.0.125"
   },
   "peerDependencies": {
-    "astro": "^5.16.6"
+    "astro": "^5.16.6",
+    "swiper": "^12.0.3"
   },
   "scripts": {
     "lint": "eslint . --ext .ts,tsx",