@tnotesjs/ui 0.4.1 → 0.4.2

package/dist/swiper/hydrate.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Client-side tab activation for `.tn-swiper` shells emitted by the SSG
+ * markdown pipeline (empty `.tn-swiper-tabs`, all slides in the wrapper).
+ * Desk also uses this after building slide DOM so both hosts share one path.
+ */
+declare function applySwiperTabsPadding(tabs: HTMLElement, hasNav: boolean): void;
+declare function createSwiperTabNav(handlers: {
+    onPrev: () => void;
+    onNext: () => void;
+}): {
+    prev: HTMLButtonElement;
+    line: HTMLSpanElement;
+    next: HTMLButtonElement;
+};
+declare function wrapSlideIndex(index: number, length: number, delta: -1 | 1): number;
+declare const SWIPER_EMPTY_TEXT = "empty swiper";
+/** 没有图片幻灯片时的壳。Desk 与站点用同一段结构。 */
+declare function emptySwiperMarkup(): string;
+/**
+ * Hydrate every `.tn-swiper` under `root` (or `document`). Idempotent:
+ * already-hydrated roots are skipped via `data-tn-swiper-ready`.
+ * When `root` itself is a `.tn-swiper`, it is included.
+ */
+declare function hydrateTnSwipers(root?: ParentNode): number;
+
+export { SWIPER_EMPTY_TEXT, applySwiperTabsPadding, createSwiperTabNav, emptySwiperMarkup, hydrateTnSwipers, wrapSlideIndex };

package/dist/swiper/hydrate.js

@@ -0,0 +1,126 @@
+// src/swiper/hydrate.ts
+function applySwiperTabsPadding(tabs, hasNav) {
+  tabs.style.padding = hasNav ? "0 0.8rem 0 3rem" : "0 0.8rem";
+}
+function createSwiperTabNav(handlers) {
+  const prev = document.createElement("button");
+  prev.type = "button";
+  prev.className = "tn-tab-nav tn-tab-prev";
+  prev.textContent = "<";
+  prev.title = "\u4E0A\u4E00\u9875";
+  prev.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handlers.onPrev();
+  });
+  const line = document.createElement("span");
+  line.className = "tn-tab-nav tab-tab-line";
+  line.textContent = "/";
+  const next = document.createElement("button");
+  next.type = "button";
+  next.className = "tn-tab-nav tn-tab-next";
+  next.textContent = ">";
+  next.title = "\u4E0B\u4E00\u9875";
+  next.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handlers.onNext();
+  });
+  return { prev, line, next };
+}
+function wrapSlideIndex(index, length, delta) {
+  if (length <= 0) return 0;
+  return (index + delta + length) % length;
+}
+var SWIPER_EMPTY_TEXT = "empty swiper";
+function emptySwiperMarkup() {
+  return `<div class="tn-swiper is-empty"><div class="swiper-container"><p class="tn-swiper-empty">${SWIPER_EMPTY_TEXT}</p></div></div>`;
+}
+var READY = "tnSwiperReady";
+function hydrateTnSwipers(root = document) {
+  const hosts = [];
+  if (root instanceof HTMLElement && root.classList.contains("tn-swiper")) {
+    hosts.push(root);
+  }
+  hosts.push(...root.querySelectorAll(".tn-swiper"));
+  let count = 0;
+  const seen = /* @__PURE__ */ new Set();
+  for (const host of hosts) {
+    if (seen.has(host)) continue;
+    seen.add(host);
+    if (host.dataset[READY] === "true") continue;
+    if (hydrateOne(host)) {
+      host.dataset[READY] = "true";
+      count += 1;
+    }
+  }
+  return count;
+}
+function hydrateOne(host) {
+  if (host.classList.contains("is-empty")) return true;
+  const tabs = host.querySelector(".tn-swiper-tabs");
+  const wrapper = host.querySelector(".swiper-wrapper");
+  if (!wrapper) return false;
+  const slides = [...wrapper.querySelectorAll(":scope > .swiper-slide")];
+  if (slides.length === 0) {
+    return true;
+  }
+  let tabsEl = tabs;
+  if (!tabsEl) {
+    tabsEl = document.createElement("div");
+    tabsEl.className = "tn-swiper-tabs";
+    host.prepend(tabsEl);
+  }
+  const useTabs = slides.length > 1;
+  tabsEl.replaceChildren();
+  applySwiperTabsPadding(tabsEl, useTabs);
+  const tabButtons = [];
+  const activate = (index) => {
+    tabButtons.forEach(
+      (button, buttonIndex) => button.classList.toggle("active", buttonIndex === index)
+    );
+    slides.forEach((slide, slideIndex) => {
+      const on = slideIndex === index;
+      slide.classList.toggle("is-active", on);
+      slide.hidden = !on;
+    });
+  };
+  const activeIndex = () => {
+    const found = tabButtons.findIndex((button) => button.classList.contains("active"));
+    return found >= 0 ? found : 0;
+  };
+  if (useTabs) {
+    const nav = createSwiperTabNav({
+      onPrev: () => activate(wrapSlideIndex(activeIndex(), slides.length, -1)),
+      onNext: () => activate(wrapSlideIndex(activeIndex(), slides.length, 1))
+    });
+    tabsEl.append(nav.prev, nav.line);
+    slides.forEach((slide, index) => {
+      const title = slide.dataset.title?.trim() || slide.querySelector("img")?.getAttribute("alt")?.trim() || "img";
+      slide.dataset.title = title;
+      const tab = document.createElement("button");
+      tab.type = "button";
+      tab.className = "tn-tab";
+      tab.textContent = title;
+      tab.addEventListener("click", () => activate(index));
+      tabButtons.push(tab);
+      tabsEl.append(tab);
+    });
+    tabsEl.append(nav.next);
+    if (tabsEl.parentElement !== host || host.firstElementChild !== tabsEl) {
+      host.prepend(tabsEl);
+    }
+  } else {
+    tabsEl.remove();
+  }
+  activate(0);
+  return true;
+}
+export {
+  SWIPER_EMPTY_TEXT,
+  applySwiperTabsPadding,
+  createSwiperTabNav,
+  emptySwiperMarkup,
+  hydrateTnSwipers,
+  wrapSlideIndex
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -33,6 +33,7 @@
     "./styles/swiper.css": "./src/styles/swiper.css",
     "./swiper": {
       "types": "./src/swiper/hydrate.ts",
+      "node": "./dist/swiper/hydrate.js",
       "import": "./src/swiper/hydrate.ts",
       "default": "./src/swiper/hydrate.ts"
     },
@@ -126,7 +127,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/code/highlight.ts src/components/Footprints/parse.ts src/components/Mindmap/markdown.ts src/markdown/image.ts --format esm --dts --out-dir dist --clean",
+    "build": "tsup src/code/highlight.ts src/components/Footprints/parse.ts src/components/Mindmap/markdown.ts src/markdown/image.ts src/swiper/hydrate.ts --format esm --dts --out-dir dist --clean",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
     "lint": "eslint . --max-warnings=0",