@tnotesjs/ui 0.1.4 → 0.2.0

package/src/styles/tokens.css

@@ -24,10 +24,9 @@
   --tn-c-default-soft: #e8e8e9;
   --tn-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
   --tn-font-sans:
-    "Punctuation SC", Inter, ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --tn-font-mono:
-    "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+    'Punctuation SC', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --tn-font-mono: 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
   --tn-prose-size: 16px;
   --tn-prose-line-height: 28px;
   --tn-heading-weight: 600;
@@ -46,8 +45,8 @@
   color-scheme: light;
 }
 
-:root.dark:not([data-theme="light"]),
-:root[data-theme="dark"] {
+:root.dark:not([data-theme='light']),
+:root[data-theme='dark'] {
   --tn-c-brand-strong: #a8b1ff;
   --tn-c-text: #dfdfd6;
   --tn-c-text-2: #98989f;

package/src/swiper/hydrate.test.ts

@@ -1,11 +1,11 @@
 // @vitest-environment happy-dom
 
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest'
 
-import { hydrateTnSwipers } from "./hydrate";
+import { hydrateTnSwipers } from './hydrate'
 
 function swiperShell(titles: string[]): HTMLElement {
-  const root = document.createElement("div");
+  const root = document.createElement('div')
   root.innerHTML = `
     <div class="tn-swiper">
       <div class="tn-swiper-tabs"></div>
@@ -14,52 +14,48 @@ function swiperShell(titles: string[]): HTMLElement {
           ${titles
             .map(
               (title) =>
-                `<div class="swiper-slide" data-title="${title}"><img alt="${title}" src="/${title}.svg"></div>`,
+                `<div class="swiper-slide" data-title="${title}"><img alt="${title}" src="/${title}.svg"></div>`
             )
-            .join("")}
+            .join('')}
         </div>
       </div>
     </div>
-  `;
-  document.body.append(root);
-  return root;
+  `
+  document.body.append(root)
+  return root
 }
 
-describe("hydrateTnSwipers", () => {
-  it("builds tabs and shows only the active slide", () => {
-    const root = swiperShell(["A", "B", "C"]);
-    expect(hydrateTnSwipers(root)).toBe(1);
+describe('hydrateTnSwipers', () => {
+  it('builds tabs and shows only the active slide', () => {
+    const root = swiperShell(['A', 'B', 'C'])
+    expect(hydrateTnSwipers(root)).toBe(1)
 
-    const host = root.querySelector(".tn-swiper")!;
-    const tabs = [...host.querySelectorAll(".tn-tab")].map(
-      (tab) => tab.textContent,
-    );
-    expect(tabs).toEqual(["A", "B", "C"]);
-    expect(host.querySelectorAll(".tn-tab-nav")).toHaveLength(3); // < / >
+    const host = root.querySelector('.tn-swiper')!
+    const tabs = [...host.querySelectorAll('.tn-tab')].map((tab) => tab.textContent)
+    expect(tabs).toEqual(['A', 'B', 'C'])
+    expect(host.querySelectorAll('.tn-tab-nav')).toHaveLength(3) // < / >
 
-    const slides = [...host.querySelectorAll(".swiper-slide")] as HTMLElement[];
-    expect(slides[0]!.classList.contains("is-active")).toBe(true);
-    expect(slides[0]!.hidden).toBe(false);
-    expect(slides[1]!.hidden).toBe(true);
-    expect(slides[2]!.hidden).toBe(true);
+    const slides = [...host.querySelectorAll('.swiper-slide')] as HTMLElement[]
+    expect(slides[0]!.classList.contains('is-active')).toBe(true)
+    expect(slides[0]!.hidden).toBe(false)
+    expect(slides[1]!.hidden).toBe(true)
+    expect(slides[2]!.hidden).toBe(true)
 
-    ;(host.querySelectorAll(".tn-tab")[1] as HTMLButtonElement).click();
-    expect(slides[0]!.hidden).toBe(true);
-    expect(slides[1]!.hidden).toBe(false);
-    expect(slides[1]!.classList.contains("is-active")).toBe(true);
+    ;(host.querySelectorAll('.tn-tab')[1] as HTMLButtonElement).click()
+    expect(slides[0]!.hidden).toBe(true)
+    expect(slides[1]!.hidden).toBe(false)
+    expect(slides[1]!.classList.contains('is-active')).toBe(true)
 
     // Idempotent
-    expect(hydrateTnSwipers(root)).toBe(0);
-    root.remove();
-  });
-
-  it("omits the tab bar for a single slide", () => {
-    const root = swiperShell(["solo"]);
-    hydrateTnSwipers(root);
-    expect(root.querySelector(".tn-swiper-tabs")).toBeNull();
-    expect(root.querySelector(".swiper-slide")!.classList.contains("is-active")).toBe(
-      true,
-    );
-    root.remove();
-  });
-});
+    expect(hydrateTnSwipers(root)).toBe(0)
+    root.remove()
+  })
+
+  it('omits the tab bar for a single slide', () => {
+    const root = swiperShell(['solo'])
+    hydrateTnSwipers(root)
+    expect(root.querySelector('.tn-swiper-tabs')).toBeNull()
+    expect(root.querySelector('.swiper-slide')!.classList.contains('is-active')).toBe(true)
+    root.remove()
+  })
+})

package/src/swiper/hydrate.ts

@@ -5,56 +5,49 @@
  */
 
 export function applySwiperTabsPadding(tabs: HTMLElement, hasNav: boolean): void {
-  tabs.style.padding = hasNav ? "0 0.8rem 0 3rem" : "0 0.8rem";
+  tabs.style.padding = hasNav ? '0 0.8rem 0 3rem' : '0 0.8rem'
 }
 
-export function createSwiperTabNav(handlers: {
-  onPrev: () => void;
-  onNext: () => void;
-}): {
-  prev: HTMLButtonElement;
-  line: HTMLSpanElement;
-  next: HTMLButtonElement;
+export function createSwiperTabNav(handlers: { onPrev: () => void; onNext: () => void }): {
+  prev: HTMLButtonElement
+  line: HTMLSpanElement
+  next: HTMLButtonElement
 } {
-  const prev = document.createElement("button");
-  prev.type = "button";
-  prev.className = "tn-tab-nav tn-tab-prev";
-  prev.textContent = "<";
-  prev.title = "上一页";
-  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 = "下一页";
-  next.addEventListener("click", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    handlers.onNext();
-  });
-
-  return { prev, line, next };
+  const prev = document.createElement('button')
+  prev.type = 'button'
+  prev.className = 'tn-tab-nav tn-tab-prev'
+  prev.textContent = '<'
+  prev.title = '上一页'
+  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 = '下一页'
+  next.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    handlers.onNext()
+  })
+
+  return { prev, line, next }
 }
 
-export function wrapSlideIndex(
-  index: number,
-  length: number,
-  delta: -1 | 1,
-): number {
-  if (length <= 0) return 0;
-  return (index + delta + length) % length;
+export function wrapSlideIndex(index: number, length: number, delta: -1 | 1): number {
+  if (length <= 0) return 0
+  return (index + delta + length) % length
 }
 
-const READY = "tnSwiperReady";
+const READY = 'tnSwiperReady'
 
 /**
  * Hydrate every `.tn-swiper` under `root` (or `document`). Idempotent:
@@ -62,103 +55,99 @@ const READY = "tnSwiperReady";
  * When `root` itself is a `.tn-swiper`, it is included.
  */
 export function hydrateTnSwipers(root: ParentNode = document): number {
-  const hosts: HTMLElement[] = [];
-  if (root instanceof HTMLElement && root.classList.contains("tn-swiper")) {
-    hosts.push(root);
+  const hosts: HTMLElement[] = []
+  if (root instanceof HTMLElement && root.classList.contains('tn-swiper')) {
+    hosts.push(root)
   }
-  hosts.push(...root.querySelectorAll<HTMLElement>(".tn-swiper"));
+  hosts.push(...root.querySelectorAll<HTMLElement>('.tn-swiper'))
 
-  let count = 0;
-  const seen = new Set<HTMLElement>();
+  let count = 0
+  const seen = new Set<HTMLElement>()
   for (const host of hosts) {
-    if (seen.has(host)) continue;
-    seen.add(host);
-    if (host.dataset[READY] === "true") continue;
+    if (seen.has(host)) continue
+    seen.add(host)
+    if (host.dataset[READY] === 'true') continue
     if (hydrateOne(host)) {
-      host.dataset[READY] = "true";
-      count += 1;
+      host.dataset[READY] = 'true'
+      count += 1
     }
   }
-  return count;
+  return count
 }
 
 function hydrateOne(host: HTMLElement): boolean {
-  const tabs = host.querySelector<HTMLElement>(".tn-swiper-tabs");
-  const wrapper = host.querySelector<HTMLElement>(".swiper-wrapper");
-  if (!wrapper) return false;
+  const tabs = host.querySelector<HTMLElement>('.tn-swiper-tabs')
+  const wrapper = host.querySelector<HTMLElement>('.swiper-wrapper')
+  if (!wrapper) return false
 
-  const slides = [
-    ...wrapper.querySelectorAll<HTMLElement>(":scope > .swiper-slide"),
-  ];
+  const slides = [...wrapper.querySelectorAll<HTMLElement>(':scope > .swiper-slide')]
   if (slides.length === 0) {
     // Empty shell — still mark ready so we don't loop.
-    return true;
+    return true
   }
 
   // Ensure tabs host exists (site always emits it; Desk may omit for 1 slide).
-  let tabsEl = tabs;
+  let tabsEl = tabs
   if (!tabsEl) {
-    tabsEl = document.createElement("div");
-    tabsEl.className = "tn-swiper-tabs";
-    host.prepend(tabsEl);
+    tabsEl = document.createElement('div')
+    tabsEl.className = 'tn-swiper-tabs'
+    host.prepend(tabsEl)
   }
 
-  const useTabs = slides.length > 1;
-  tabsEl.replaceChildren();
-  applySwiperTabsPadding(tabsEl, useTabs);
+  const useTabs = slides.length > 1
+  tabsEl.replaceChildren()
+  applySwiperTabsPadding(tabsEl, useTabs)
 
-  const tabButtons: HTMLButtonElement[] = [];
+  const tabButtons: HTMLButtonElement[] = []
 
   const activate = (index: number): void => {
     tabButtons.forEach((button, buttonIndex) =>
-      button.classList.toggle("active", buttonIndex === index),
-    );
+      button.classList.toggle('active', buttonIndex === index)
+    )
     slides.forEach((slide, slideIndex) => {
-      const on = slideIndex === index;
-      slide.classList.toggle("is-active", on);
-      slide.hidden = !on;
-    });
-  };
+      const on = slideIndex === index
+      slide.classList.toggle('is-active', on)
+      slide.hidden = !on
+    })
+  }
 
   const activeIndex = (): number => {
-    const found = tabButtons.findIndex((button) =>
-      button.classList.contains("active"),
-    );
-    return found >= 0 ? found : 0;
-  };
+    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);
+      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);
+        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)
     // Multi-slide: tabs stay above the container.
     if (tabsEl.parentElement !== host || host.firstElementChild !== tabsEl) {
-      host.prepend(tabsEl);
+      host.prepend(tabsEl)
     }
   } else {
     // Single slide: drop empty tab bar (Desk parity).
-    tabsEl.remove();
+    tabsEl.remove()
   }
 
-  activate(0);
-  return true;
+  activate(0)
+  return true
 }