@tnotesjs/ui 0.1.5 → 0.2.1

package/src/components/ImagePreview/ImagePreview.vue

@@ -1,185 +1,162 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const props = withDefaults(defineProps<{ selector?: string }>(), {
-  selector: ".tn-prose img, .vp-doc img",
-});
-const visible = ref(false);
-const images = ref<string[]>([]);
-const index = ref(0);
-const scale = ref(1);
-const x = ref(0);
-const y = ref(0);
-const dragging = ref(false);
-const overlay = ref<HTMLElement>();
-let pointerStart = { x: 0, y: 0, baseX: 0, baseY: 0 };
-let swiperDownX = 0;
-let previousOverflow = "";
-let previousFocus: HTMLElement | null = null;
+  selector: '.tn-prose img, .vp-doc img'
+})
+const visible = ref(false)
+const images = ref<string[]>([])
+const index = ref(0)
+const scale = ref(1)
+const x = ref(0)
+const y = ref(0)
+const dragging = ref(false)
+const overlay = ref<HTMLElement>()
+let pointerStart = { x: 0, y: 0, baseX: 0, baseY: 0 }
+let swiperDownX = 0
+let previousOverflow = ''
+let previousFocus: HTMLElement | null = null
 
-const source = computed(() => images.value[index.value] || "");
-const transform = computed(
-  () => `translate(${x.value}px, ${y.value}px) scale(${scale.value})`,
-);
+const source = computed(() => images.value[index.value] || '')
+const transform = computed(() => `translate(${x.value}px, ${y.value}px) scale(${scale.value})`)
 
 function eligible(image: HTMLImageElement): boolean {
-  if (
-    image.dataset.preview === "false" ||
-    image.closest(".tn-preview-ignore, button")
-  )
-    return false;
-  return !(
-    image.naturalWidth > 0 &&
-    image.naturalWidth < 50 &&
-    image.naturalHeight < 50
-  );
+  if (image.dataset.preview === 'false' || image.closest('.tn-preview-ignore, button')) return false
+  return !(image.naturalWidth > 0 && image.naturalWidth < 50 && image.naturalHeight < 50)
 }
 
 function reset(): void {
-  scale.value = 1;
-  x.value = 0;
-  y.value = 0;
+  scale.value = 1
+  x.value = 0
+  y.value = 0
 }
 
 function open(image: HTMLImageElement): void {
-  const candidates = [
-    ...document.querySelectorAll<HTMLImageElement>(props.selector),
-  ].filter(eligible);
-  images.value = candidates
-    .map((item) => item.currentSrc || item.src)
-    .filter(Boolean);
-  const selected = image.currentSrc || image.src;
-  const selectedIndex = images.value.indexOf(selected);
-  index.value = selectedIndex < 0 ? 0 : selectedIndex;
-  if (selectedIndex < 0 && selected) images.value = [selected];
-  if (images.value.length === 0) return;
-  reset();
-  previousFocus =
-    document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null;
-  previousOverflow = document.documentElement.style.overflow;
-  document.documentElement.style.overflow = "hidden";
-  visible.value = true;
-  void nextTick(() => overlay.value?.focus({ preventScroll: true }));
+  const candidates = [...document.querySelectorAll<HTMLImageElement>(props.selector)].filter(
+    eligible
+  )
+  images.value = candidates.map((item) => item.currentSrc || item.src).filter(Boolean)
+  const selected = image.currentSrc || image.src
+  const selectedIndex = images.value.indexOf(selected)
+  index.value = selectedIndex < 0 ? 0 : selectedIndex
+  if (selectedIndex < 0 && selected) images.value = [selected]
+  if (images.value.length === 0) return
+  reset()
+  previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
+  previousOverflow = document.documentElement.style.overflow
+  document.documentElement.style.overflow = 'hidden'
+  visible.value = true
+  void nextTick(() => overlay.value?.focus({ preventScroll: true }))
 }
 
 function close(): void {
-  visible.value = false;
-  document.documentElement.style.overflow = previousOverflow;
-  previousFocus?.focus({ preventScroll: true });
+  visible.value = false
+  document.documentElement.style.overflow = previousOverflow
+  previousFocus?.focus({ preventScroll: true })
 }
 
 function move(step: number): void {
-  if (images.value.length < 2) return;
-  index.value =
-    (index.value + step + images.value.length) % images.value.length;
-  reset();
+  if (images.value.length < 2) return
+  index.value = (index.value + step + images.value.length) % images.value.length
+  reset()
 }
 
 function zoom(factor: number): void {
-  scale.value = Math.min(6, Math.max(0.2, scale.value * factor));
+  scale.value = Math.min(6, Math.max(0.2, scale.value * factor))
 }
 
 function resolvePreviewImage(target: EventTarget | null): HTMLImageElement | null {
-  if (target instanceof HTMLImageElement) return target;
+  if (target instanceof HTMLImageElement) return target
   if (target instanceof Element) {
-    return target.closest<HTMLImageElement>("img");
+    return target.closest<HTMLImageElement>('img')
   }
-  return null;
+  return null
 }
 
 function onDocumentClick(event: MouseEvent): void {
-  if (visible.value) return;
-  const image = resolvePreviewImage(event.target);
-  if (!image || !image.matches(props.selector) || !eligible(image)) return;
-  if (
-    image.closest(".swiper-container") &&
-    Math.abs(event.clientX - swiperDownX) > 5
-  )
-    return;
-  if (image.closest("a")) {
-    event.preventDefault();
-    event.stopPropagation();
+  if (visible.value) return
+  const image = resolvePreviewImage(event.target)
+  if (!image || !image.matches(props.selector) || !eligible(image)) return
+  if (image.closest('.swiper-container') && Math.abs(event.clientX - swiperDownX) > 5) return
+  if (image.closest('a')) {
+    event.preventDefault()
+    event.stopPropagation()
   }
-  open(image);
+  open(image)
 }
 
 function onPreviewRequest(event: Event): void {
-  const detail = (event as CustomEvent<HTMLImageElement | { src?: string }>).detail;
+  const detail = (event as CustomEvent<HTMLImageElement | { src?: string }>).detail
   if (detail instanceof HTMLImageElement) {
-    open(detail);
-    return;
+    open(detail)
+    return
   }
-  const src = detail && typeof detail.src === "string" ? detail.src : "";
-  if (!src) return;
-  images.value = [src];
-  index.value = 0;
-  reset();
-  previousFocus =
-    document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null;
-  previousOverflow = document.documentElement.style.overflow;
-  document.documentElement.style.overflow = "hidden";
-  visible.value = true;
-  void nextTick(() => overlay.value?.focus({ preventScroll: true }));
+  const src = detail && typeof detail.src === 'string' ? detail.src : ''
+  if (!src) return
+  images.value = [src]
+  index.value = 0
+  reset()
+  previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
+  previousOverflow = document.documentElement.style.overflow
+  document.documentElement.style.overflow = 'hidden'
+  visible.value = true
+  void nextTick(() => overlay.value?.focus({ preventScroll: true }))
 }
 
 function onKeydown(event: KeyboardEvent): void {
-  if (!visible.value) return;
-  if (event.key === "Escape") close();
-  else if (event.key === "ArrowLeft") move(-1);
-  else if (event.key === "ArrowRight") move(1);
-  else if (event.key === "ArrowUp" || event.key === "+") zoom(1.1);
-  else if (event.key === "ArrowDown" || event.key === "-") zoom(1 / 1.1);
-  else return;
-  event.preventDefault();
+  if (!visible.value) return
+  if (event.key === 'Escape') close()
+  else if (event.key === 'ArrowLeft') move(-1)
+  else if (event.key === 'ArrowRight') move(1)
+  else if (event.key === 'ArrowUp' || event.key === '+') zoom(1.1)
+  else if (event.key === 'ArrowDown' || event.key === '-') zoom(1 / 1.1)
+  else return
+  event.preventDefault()
 }
 
 function onPointerDown(event: PointerEvent): void {
-  dragging.value = true;
+  dragging.value = true
   pointerStart = {
     x: event.clientX,
     y: event.clientY,
     baseX: x.value,
-    baseY: y.value,
-  };
-  window.addEventListener("pointermove", onPointerMove);
-  window.addEventListener("pointerup", onPointerUp, { once: true });
+    baseY: y.value
+  }
+  window.addEventListener('pointermove', onPointerMove)
+  window.addEventListener('pointerup', onPointerUp, { once: true })
 }
 
 function onPointerMove(event: PointerEvent): void {
-  if (!dragging.value) return;
-  x.value = pointerStart.baseX + event.clientX - pointerStart.x;
-  y.value = pointerStart.baseY + event.clientY - pointerStart.y;
+  if (!dragging.value) return
+  x.value = pointerStart.baseX + event.clientX - pointerStart.x
+  y.value = pointerStart.baseY + event.clientY - pointerStart.y
 }
 
 function onPointerUp(): void {
-  dragging.value = false;
-  window.removeEventListener("pointermove", onPointerMove);
+  dragging.value = false
+  window.removeEventListener('pointermove', onPointerMove)
 }
 
 function onGlobalPointerDown(event: PointerEvent): void {
-  swiperDownX = event.clientX;
+  swiperDownX = event.clientX
 }
 
 onMounted(() => {
-  document.addEventListener("click", onDocumentClick, true);
-  document.addEventListener("tn:preview-image", onPreviewRequest);
-  document.addEventListener("keydown", onKeydown);
-  document.addEventListener("pointerdown", onGlobalPointerDown, true);
-});
+  document.addEventListener('click', onDocumentClick, true)
+  document.addEventListener('tn:preview-image', onPreviewRequest)
+  document.addEventListener('keydown', onKeydown)
+  document.addEventListener('pointerdown', onGlobalPointerDown, true)
+})
 
 onBeforeUnmount(() => {
-  document.removeEventListener("click", onDocumentClick, true);
-  document.removeEventListener("tn:preview-image", onPreviewRequest);
-  document.removeEventListener("keydown", onKeydown);
-  document.removeEventListener("pointerdown", onGlobalPointerDown, true);
-  window.removeEventListener("pointermove", onPointerMove);
-  window.removeEventListener("pointerup", onPointerUp);
-  if (visible.value) document.documentElement.style.overflow = previousOverflow;
-});
+  document.removeEventListener('click', onDocumentClick, true)
+  document.removeEventListener('tn:preview-image', onPreviewRequest)
+  document.removeEventListener('keydown', onKeydown)
+  document.removeEventListener('pointerdown', onGlobalPointerDown, true)
+  window.removeEventListener('pointermove', onPointerMove)
+  window.removeEventListener('pointerup', onPointerUp)
+  if (visible.value) document.documentElement.style.overflow = previousOverflow
+})
 </script>
 
 <template>
@@ -214,9 +191,7 @@ onBeforeUnmount(() => {
         ›
       </button>
       <div class="tn-image-preview__tools">
-        <button type="button" aria-label="缩小" @click="zoom(1 / 1.1)">
-          −
-        </button>
+        <button type="button" aria-label="缩小" @click="zoom(1 / 1.1)">−</button>
         <button type="button" aria-label="还原" @click="reset">↺</button>
         <button type="button" aria-label="放大" @click="zoom(1.1)">＋</button>
         <button type="button" aria-label="关闭" @click="close">×</button>

package/src/components/Mermaid/Mermaid.vue

@@ -19,12 +19,7 @@
         :aria-pressed="centered ? 'true' : 'false'"
         @click="toggleCenter"
       >
-        <img
-          :src="centered ? iconCenterOn : iconCenterOff"
-          alt=""
-          width="16"
-          height="16"
-        />
+        <img :src="centered ? iconCenterOn : iconCenterOff" alt="" width="16" height="16" />
       </button>
       <button
         v-if="enableFullscreen"
@@ -65,7 +60,11 @@
         ref="diagramRef"
         class="tn-mermaid__diagram"
         :class="{ 'is-centered': centered, 'is-obscured': empty || !!error }"
-        :style="diagramTransform ? { transform: diagramTransform, transformOrigin: 'top left' } : undefined"
+        :style="
+          diagramTransform
+            ? { transform: diagramTransform, transformOrigin: 'top left' }
+            : undefined
+        "
         @wheel="handleWheel"
       />
       <div v-if="loading" class="tn-mermaid__loading tn-mermaid__status">
@@ -152,7 +151,7 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  /** URI-encoded source from VitePress fence (`graph="…"`). */
+  /** URI-encoded source from SSG fence (`graph="…"`). */
   graph: {
     type: String,
     default: ''
@@ -241,9 +240,7 @@ function detectDark() {
 
 const COPY_RESET_DELAY = 1000
 const copyState = ref('idle')
-const copyIcon = computed(() =>
-  copyState.value === 'copied' ? iconCheck : iconClipboard
-)
+const copyIcon = computed(() => (copyState.value === 'copied' ? iconCheck : iconClipboard))
 const copyTitle = computed(() => {
   if (copyState.value === 'copied') return '已复制'
   if (copyState.value === 'failed') return '复制失败'
@@ -369,7 +366,7 @@ async function toggleFullscreen() {
   fullscreenMode = 'css'
   isFullscreen.value = true
 
-  // Best-effort native fullscreen for browser / VitePress (non-blocking).
+  // Best-effort native fullscreen (non-blocking).
   if (!document.fullscreenEnabled || typeof root.requestFullscreen !== 'function') return
   if (/Electron/i.test(navigator.userAgent)) return
   try {

package/src/components/Mindmap/FocusBreadcrumbs.vue

@@ -46,7 +46,7 @@ const openSiblings = computed(() => openNode.value?.parent?.children ?? [])
 const menuStyle = computed(() => ({
   left: `${menuPosition.value.left}px`,
   top: `${menuPosition.value.top}px`,
-  width: `${MENU_WIDTH}px`,
+  width: `${MENU_WIDTH}px`
 }))
 
 function hasSiblingMenu(node: MindmapNode): boolean {
@@ -68,12 +68,16 @@ function updateMenuPosition() {
   const rect = trigger.getBoundingClientRect()
   const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
   const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
-  const left = Math.max(VIEWPORT_GAP, Math.min(rect.left, viewportWidth - MENU_WIDTH - VIEWPORT_GAP))
+  const left = Math.max(
+    VIEWPORT_GAP,
+    Math.min(rect.left, viewportWidth - MENU_WIDTH - VIEWPORT_GAP)
+  )
   const estimatedHeight = Math.min(360, Math.max(44, openSiblings.value.length * 40 + 12))
   const below = rect.bottom + 6
-  const top = below + estimatedHeight <= viewportHeight - VIEWPORT_GAP
-    ? below
-    : Math.max(VIEWPORT_GAP, rect.top - estimatedHeight - 6)
+  const top =
+    below + estimatedHeight <= viewportHeight - VIEWPORT_GAP
+      ? below
+      : Math.max(VIEWPORT_GAP, rect.top - estimatedHeight - 6)
   menuPosition.value = { left, top }
 }
 
@@ -85,11 +89,8 @@ function focusMenuItem(where: 'first' | 'last' | 'current') {
   const items = menuItems()
   if (items.length === 0) return
   const currentIndex = items.findIndex((item) => item.getAttribute('aria-checked') === 'true')
-  const index = where === 'first'
-    ? 0
-    : where === 'last'
-      ? items.length - 1
-      : Math.max(0, currentIndex)
+  const index =
+    where === 'first' ? 0 : where === 'last' ? items.length - 1 : Math.max(0, currentIndex)
   items[index]?.focus()
 }
 
@@ -123,7 +124,7 @@ function requestKeyboardMenu(
   node: MindmapNode,
   depth: number,
   event: KeyboardEvent,
-  where: 'first' | 'last' | 'current',
+  where: 'first' | 'last' | 'current'
 ) {
   if (!hasSiblingMenu(node)) return
   event.preventDefault()
@@ -189,7 +190,8 @@ function onMenuKeydown(event: KeyboardEvent) {
   const current = items.indexOf(document.activeElement as HTMLButtonElement)
   let next: number
   if (event.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length
-  else if (event.key === 'ArrowUp') next = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length
+  else if (event.key === 'ArrowUp')
+    next = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length
   else if (event.key === 'Home') next = 0
   else if (event.key === 'End') next = items.length - 1
   else if (event.key === 'Escape') {
@@ -223,13 +225,17 @@ function onViewportChange() {
   if (openMenu.value) updateMenuPosition()
 }
 
-watch(focusPath, () => {
-  closeMenu()
-  nextTick(() => {
-    const current = scroller.value?.querySelector<HTMLElement>('[aria-current="page"]')
-    current?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })
-  })
-}, { immediate: true, flush: 'post' })
+watch(
+  focusPath,
+  () => {
+    closeMenu()
+    nextTick(() => {
+      const current = scroller.value?.querySelector<HTMLElement>('[aria-current="page"]')
+      current?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })
+    })
+  },
+  { immediate: true, flush: 'post' }
+)
 
 onMounted(() => {
   document.addEventListener('pointerdown', onDocumentPointerDown)
@@ -249,12 +255,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <nav
-    v-if="focusPath.length > 0"
-    ref="root"
-    class="focus-breadcrumbs"
-    aria-label="主题导航"
-  >
+  <nav v-if="focusPath.length > 0" ref="root" class="focus-breadcrumbs" aria-label="主题导航">
     <div ref="scroller" class="focus-breadcrumbs-scroller">
       <div class="focus-breadcrumbs-track">
         <button
@@ -276,7 +277,9 @@ onBeforeUnmount(() => {
             :aria-current="depth === focusPath.length - 1 ? 'page' : undefined"
             :aria-haspopup="hasSiblingMenu(node) ? 'menu' : undefined"
             :aria-expanded="hasSiblingMenu(node) ? openMenu?.nodeId === node.id : undefined"
-            :aria-controls="hasSiblingMenu(node) && openMenu?.nodeId === node.id ? menuId : undefined"
+            :aria-controls="
+              hasSiblingMenu(node) && openMenu?.nodeId === node.id ? menuId : undefined
+            "
             :title="node.content.text"
             @click="navigateAncestor(node, depth)"
             @mouseenter="requestHoverMenu(node, depth, $event)"
@@ -364,7 +367,7 @@ onBeforeUnmount(() => {
 
 .focus-crumb:hover,
 .focus-crumb:focus-visible,
-.focus-crumb[aria-expanded="true"] {
+.focus-crumb[aria-expanded='true'] {
   background: var(--tn-c-default-soft);
   outline: none;
 }
@@ -390,7 +393,7 @@ onBeforeUnmount(() => {
   border: 1px solid var(--tn-c-divider);
   border-radius: 10px;
   background: var(--tn-c-bg-elv, var(--tn-c-bg));
-  box-shadow: var(--tn-shadow-2, 0 14px 38px rgb(0 0 0 / .24));
+  box-shadow: var(--tn-shadow-2, 0 14px 38px rgb(0 0 0 / 0.24));
   color: var(--tn-c-text);
 }
 

package/src/components/Mindmap/InlineRuns.ts

@@ -4,22 +4,31 @@ import { defineComponent, h } from 'vue'
 export default defineComponent({
   name: 'MindmapInlineRuns',
   props: {
-    raw: { type: String, default: '' },
+    raw: { type: String, default: '' }
   },
   setup(props) {
-    return () => h('span', { class: 'mindmap-inline-runs' }, parseInlineSegments(props.raw).map((segment) => {
-      const classes = Object.entries(segment.marks)
-        .filter(([, enabled]) => enabled)
-        .map(([name]) => `is-${name}`)
-      if (segment.link) {
-        return h('a', {
-          class: ['mindmap-inline-run', 'is-link', ...classes],
-          href: segment.link.url,
-          target: '_blank',
-          rel: 'noopener noreferrer',
-        }, segment.text)
-      }
-      return h('span', { class: ['mindmap-inline-run', ...classes] }, segment.text)
-    }))
-  },
+    return () =>
+      h(
+        'span',
+        { class: 'mindmap-inline-runs' },
+        parseInlineSegments(props.raw).map((segment) => {
+          const classes = Object.entries(segment.marks)
+            .filter(([, enabled]) => enabled)
+            .map(([name]) => `is-${name}`)
+          if (segment.link) {
+            return h(
+              'a',
+              {
+                class: ['mindmap-inline-run', 'is-link', ...classes],
+                href: segment.link.url,
+                target: '_blank',
+                rel: 'noopener noreferrer'
+              },
+              segment.text
+            )
+          }
+          return h('span', { class: ['mindmap-inline-run', ...classes] }, segment.text)
+        })
+      )
+  }
 })