@tnotesjs/ui 0.1.4 → 0.2.0

package/src/components/Mindmap/editor/CanvasContextMenu.vue

@@ -2,28 +2,31 @@
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { isApplePlatform, primaryShortcut } from './platform'
 
-const props = withDefaults(defineProps<{
-  position: { left: number; top: number }
-  multiple?: boolean
-  canInsertSibling?: boolean
-  canInsertParent?: boolean
-  canCut?: boolean
-  canDuplicate?: boolean
-  canDeleteOnly?: boolean
-  canDeleteTree?: boolean
-  canToggleSiblings?: boolean
-  canFocus?: boolean
-}>(), {
-  multiple: false,
-  canInsertSibling: true,
-  canInsertParent: true,
-  canCut: true,
-  canDuplicate: true,
-  canDeleteOnly: true,
-  canDeleteTree: true,
-  canToggleSiblings: true,
-  canFocus: true,
-})
+const props = withDefaults(
+  defineProps<{
+    position: { left: number; top: number }
+    multiple?: boolean
+    canInsertSibling?: boolean
+    canInsertParent?: boolean
+    canCut?: boolean
+    canDuplicate?: boolean
+    canDeleteOnly?: boolean
+    canDeleteTree?: boolean
+    canToggleSiblings?: boolean
+    canFocus?: boolean
+  }>(),
+  {
+    multiple: false,
+    canInsertSibling: true,
+    canInsertParent: true,
+    canCut: true,
+    canDuplicate: true,
+    canDeleteOnly: true,
+    canDeleteTree: true,
+    canToggleSiblings: true,
+    canFocus: true
+  }
+)
 
 const emit = defineEmits<{
   close: []
@@ -48,10 +51,10 @@ const style = computed(() => {
   const viewportHeight = typeof window === 'undefined' ? 900 : window.innerHeight
   return {
     left: `${Math.max(8, Math.min(props.position.left, viewportWidth - width - 8))}px`,
-    top: `${Math.max(8, Math.min(props.position.top, viewportHeight - estimatedHeight - 8))}px`,
+    top: `${Math.max(8, Math.min(props.position.top, viewportHeight - estimatedHeight - 8))}px`
   }
 })
-const shiftTab = computed(() => isApplePlatform() ? '⇧Tab' : 'Shift+Tab')
+const shiftTab = computed(() => (isApplePlatform() ? '⇧Tab' : 'Shift+Tab'))
 
 type MenuAction =
   | 'close'
@@ -93,28 +96,85 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="menu" class="canvas-context-menu" :style="style" role="menu" :aria-label="multiple ? '多主题右键菜单' : '主题右键菜单'" @contextmenu.prevent>
-      <template v-if="!multiple">
-        <button type="button" role="menuitem" :disabled="!canInsertSibling" @click="act('insertSibling')"><span>插入同级主题</span><kbd>Enter</kbd></button>
-        <button type="button" role="menuitem" @click="act('insertChild')"><span>插入下级主题</span><kbd>Tab</kbd></button>
-        <button type="button" role="menuitem" :disabled="!canInsertParent" @click="act('insertParent')"><span>插入上级主题</span><kbd>{{ shiftTab }}</kbd></button>
-        <span class="context-divider" />
-      </template>
+  <div
+    ref="menu"
+    class="canvas-context-menu"
+    :style="style"
+    role="menu"
+    :aria-label="multiple ? '多主题右键菜单' : '主题右键菜单'"
+    @contextmenu.prevent
+  >
+    <template v-if="!multiple">
+      <button
+        type="button"
+        role="menuitem"
+        :disabled="!canInsertSibling"
+        @click="act('insertSibling')"
+      >
+        <span>插入同级主题</span><kbd>Enter</kbd>
+      </button>
+      <button type="button" role="menuitem" @click="act('insertChild')">
+        <span>插入下级主题</span><kbd>Tab</kbd>
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        :disabled="!canInsertParent"
+        @click="act('insertParent')"
+      >
+        <span>插入上级主题</span><kbd>{{ shiftTab }}</kbd>
+      </button>
+      <span class="context-divider" />
+    </template>
 
-      <button type="button" role="menuitem" @click="act('copy')"><span>复制</span><kbd>{{ primaryShortcut('C') }}</kbd></button>
-      <button type="button" role="menuitem" :disabled="!canCut" @click="act('cut')"><span>剪切</span><kbd>{{ primaryShortcut('X') }}</kbd></button>
+    <button type="button" role="menuitem" @click="act('copy')">
+      <span>复制</span><kbd>{{ primaryShortcut('C') }}</kbd>
+    </button>
+    <button type="button" role="menuitem" :disabled="!canCut" @click="act('cut')">
+      <span>剪切</span><kbd>{{ primaryShortcut('X') }}</kbd>
+    </button>
 
-      <template v-if="!multiple">
-        <button type="button" role="menuitem" @click="act('paste')"><span>粘贴</span><kbd>{{ primaryShortcut('V') }}</kbd></button>
-        <button type="button" role="menuitem" :disabled="!canDuplicate" @click="act('duplicate')"><span>创建副本</span><kbd>{{ primaryShortcut('D') }}</kbd></button>
-        <button type="button" role="menuitem" :disabled="!canDeleteOnly" @click="act('deleteOnly')"><span>仅删除当前主题</span></button>
-      </template>
+    <template v-if="!multiple">
+      <button type="button" role="menuitem" @click="act('paste')">
+        <span>粘贴</span><kbd>{{ primaryShortcut('V') }}</kbd>
+      </button>
+      <button type="button" role="menuitem" :disabled="!canDuplicate" @click="act('duplicate')">
+        <span>创建副本</span><kbd>{{ primaryShortcut('D') }}</kbd>
+      </button>
+      <button type="button" role="menuitem" :disabled="!canDeleteOnly" @click="act('deleteOnly')">
+        <span>仅删除当前主题</span>
+      </button>
+    </template>
 
-      <button type="button" role="menuitem" class="danger" :disabled="!canDeleteTree" @click="act('deleteTree')"><span>{{ multiple ? '删除所选主题及下级主题' : '删除当前主题及下级主题' }}</span><kbd>Delete</kbd></button>
-      <span class="context-divider" />
-      <button type="button" role="menuitem" :disabled="!canToggleSiblings" @click="act('toggleSiblings')"><span>展开/折叠同级主题</span><kbd>{{ primaryShortcut('.', { shift: true }) }}</kbd></button>
-      <button v-if="!multiple" type="button" role="menuitem" :disabled="!canFocus" @click="act('focus')"><span>进入此主题</span><kbd>{{ primaryShortcut(']') }}</kbd></button>
-    </div>
+    <button
+      type="button"
+      role="menuitem"
+      class="danger"
+      :disabled="!canDeleteTree"
+      @click="act('deleteTree')"
+    >
+      <span>{{ multiple ? '删除所选主题及下级主题' : '删除当前主题及下级主题' }}</span
+      ><kbd>Delete</kbd>
+    </button>
+    <span class="context-divider" />
+    <button
+      type="button"
+      role="menuitem"
+      :disabled="!canToggleSiblings"
+      @click="act('toggleSiblings')"
+    >
+      <span>展开/折叠同级主题</span><kbd>{{ primaryShortcut('.', { shift: true }) }}</kbd>
+    </button>
+    <button
+      v-if="!multiple"
+      type="button"
+      role="menuitem"
+      :disabled="!canFocus"
+      @click="act('focus')"
+    >
+      <span>进入此主题</span><kbd>{{ primaryShortcut(']') }}</kbd>
+    </button>
+  </div>
 </template>
 
 <style scoped>
@@ -130,7 +190,7 @@ onBeforeUnmount(() => {
   border-radius: 10px;
   background: color-mix(in srgb, var(--mm-panel-bg) 96%, #3e424a 4%);
   color: var(--mm-text);
-  box-shadow: 0 14px 42px rgb(0 0 0 / .28);
+  box-shadow: 0 14px 42px rgb(0 0 0 / 0.28);
 }
 .canvas-context-menu button {
   display: flex;
@@ -149,9 +209,26 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 .canvas-context-menu button:hover:not(:disabled),
-.canvas-context-menu button:focus-visible { background: var(--mm-hover); outline: none; }
-.canvas-context-menu button:disabled { cursor: default; opacity: .38; }
-.canvas-context-menu button.danger { color: #e25a62; }
-.canvas-context-menu kbd { flex: none; color: var(--mm-text-dim); font: inherit; font-size: 12px; }
-.context-divider { height: 1px; margin: 6px 2px; background: var(--mm-border); }
+.canvas-context-menu button:focus-visible {
+  background: var(--mm-hover);
+  outline: none;
+}
+.canvas-context-menu button:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+.canvas-context-menu button.danger {
+  color: #e25a62;
+}
+.canvas-context-menu kbd {
+  flex: none;
+  color: var(--mm-text-dim);
+  font: inherit;
+  font-size: 12px;
+}
+.context-divider {
+  height: 1px;
+  margin: 6px 2px;
+  background: var(--mm-border);
+}
 </style>

package/src/components/Mindmap/editor/LinkPopover.vue

@@ -2,11 +2,14 @@
 import { nextTick, ref, watch } from 'vue'
 import AppIcon from './AppIcon.vue'
 
-const props = withDefaults(defineProps<{
-  url: string
-  position: { left: number; top: number }
-  startEditing?: boolean
-}>(), { startEditing: false })
+const props = withDefaults(
+  defineProps<{
+    url: string
+    position: { left: number; top: number }
+    startEditing?: boolean
+  }>(),
+  { startEditing: false }
+)
 const emit = defineEmits<{ save: [url: string]; remove: []; keep: []; leave: []; close: [] }>()
 const draft = ref(props.url)
 const editing = ref(props.startEditing)
@@ -40,22 +43,59 @@ function beginEdit() {
   })
 }
 
-function focusInput() { beginEdit() }
+function focusInput() {
+  beginEdit()
+}
 defineExpose({ focusInput })
 </script>
 
 <template>
   <div
-      class="link-popover"
-      :style="{ left: `${position.left}px`, top: `${position.top}px` }"
-      @mouseenter="emit('keep')"
-      @mouseleave="emit('leave')"
+    class="link-popover"
+    :style="{ left: `${position.left}px`, top: `${position.top}px` }"
+    @mouseenter="emit('keep')"
+    @mouseleave="emit('leave')"
+  >
+    <input
+      ref="input"
+      v-model="draft"
+      class="link-input"
+      :class="{ readonly: !editing }"
+      :readonly="!editing"
+      aria-label="链接地址"
+      @dblclick="beginEdit"
+      @keydown="onKeydown"
+    />
+    <button
+      v-if="editing"
+      type="button"
+      class="link-action primary"
+      title="更新链接 (Enter)"
+      aria-label="更新链接"
+      @click="submit"
+    >
+      更新
+    </button>
+    <button
+      v-else
+      type="button"
+      class="icon-action"
+      title="编辑链接地址"
+      aria-label="编辑链接地址"
+      @click="beginEdit"
+    >
+      <AppIcon name="edit" :size="18" />
+    </button>
+    <button
+      type="button"
+      class="icon-action"
+      title="移除链接，保留文案"
+      aria-label="移除链接"
+      @click="emit('remove')"
     >
-      <input ref="input" v-model="draft" class="link-input" :class="{ readonly: !editing }" :readonly="!editing" aria-label="链接地址" @dblclick="beginEdit" @keydown="onKeydown" />
-      <button v-if="editing" type="button" class="link-action primary" title="更新链接 (Enter)" aria-label="更新链接" @click="submit">更新</button>
-      <button v-else type="button" class="icon-action" title="编辑链接地址" aria-label="编辑链接地址" @click="beginEdit"><AppIcon name="edit" :size="18" /></button>
-      <button type="button" class="icon-action" title="移除链接，保留文案" aria-label="移除链接" @click="emit('remove')"><AppIcon name="removeLink" :size="18" /></button>
-    </div>
+      <AppIcon name="removeLink" :size="18" />
+    </button>
+  </div>
 </template>
 
 <style scoped>
@@ -70,14 +110,52 @@ defineExpose({ focusInput })
   border: 1px solid var(--mm-border);
   border-radius: 9px;
   background: var(--mm-panel-bg);
-  box-shadow: 0 10px 28px rgb(0 0 0 / .2);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.2);
   transform: translateX(-50%);
 }
-.link-input { flex: 1; min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--mm-border); border-radius: 6px; outline: 0; background: var(--mm-canvas-bg); color: var(--mm-text); font-size: 13px; }
-.link-input:focus { border-color: var(--mm-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-accent) 20%, transparent); }
-.link-input.readonly { border-color: transparent; color: var(--mm-text-dim); cursor: default; }
-.link-action, .icon-action { height: 32px; border: 0; border-radius: 6px; cursor: pointer; }
-.link-action { padding: 0 11px; background: var(--mm-accent); color: white; }
-.icon-action { display: inline-flex; width: 32px; align-items: center; justify-content: center; background: transparent; color: var(--mm-text-dim); }
-.icon-action:hover { background: var(--mm-hover); color: var(--mm-text); }
+.link-input {
+  flex: 1;
+  min-width: 0;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid var(--mm-border);
+  border-radius: 6px;
+  outline: 0;
+  background: var(--mm-canvas-bg);
+  color: var(--mm-text);
+  font-size: 13px;
+}
+.link-input:focus {
+  border-color: var(--mm-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-accent) 20%, transparent);
+}
+.link-input.readonly {
+  border-color: transparent;
+  color: var(--mm-text-dim);
+  cursor: default;
+}
+.link-action,
+.icon-action {
+  height: 32px;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.link-action {
+  padding: 0 11px;
+  background: var(--mm-accent);
+  color: white;
+}
+.icon-action {
+  display: inline-flex;
+  width: 32px;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--mm-text-dim);
+}
+.icon-action:hover {
+  background: var(--mm-hover);
+  color: var(--mm-text);
+}
 </style>

package/src/components/Mindmap/editor/MarkdownView.vue

@@ -2,9 +2,12 @@
 import { onBeforeUnmount, ref, watch } from 'vue'
 import type { MarkdownDiagnostic } from '@tnotesjs/mindmap-core'
 
-const props = withDefaults(defineProps<{ modelValue: string; diagnostics?: readonly MarkdownDiagnostic[] }>(), {
-  diagnostics: () => [],
-})
+const props = withDefaults(
+  defineProps<{ modelValue: string; diagnostics?: readonly MarkdownDiagnostic[] }>(),
+  {
+    diagnostics: () => []
+  }
+)
 const emit = defineEmits<{
   'update:modelValue': [value: string]
   pasteImage: [blob: Blob, selectionStart: number, selectionEnd: number]
@@ -20,7 +23,7 @@ watch(
   (md) => {
     // 正在输入时不打断用户，输入停顿后由其它视图变更回流
     if (!typing) draft.value = md
-  },
+  }
 )
 
 function onInput(e: Event) {

package/src/components/Mindmap/editor/MindmapView.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { CanvasEditor, serializeSubtree } from '@tnotesjs/mindmap-core'
-import type { CanvasContextRequest, CanvasLinkHover, InlineFormat, MindmapNode, MindmapSession } from '@tnotesjs/mindmap-core'
+import type {
+  CanvasContextRequest,
+  CanvasLinkHover,
+  InlineFormat,
+  MindmapNode,
+  MindmapSession
+} from '@tnotesjs/mindmap-core'
 import CanvasContextMenu from './CanvasContextMenu.vue'
 import LinkPopover from './LinkPopover.vue'
 import SelectionToolbar from './SelectionToolbar.vue'
@@ -74,7 +80,9 @@ function applyNodeFormat(format: InlineFormat) {
 }
 
 function selectedMarkdown() {
-  return selectedRoots().map((node) => serializeSubtree(node)).join('\n')
+  return selectedRoots()
+    .map((node) => serializeSubtree(node))
+    .join('\n')
 }
 
 async function copySelected(event?: ClipboardEvent | null) {
@@ -166,7 +174,7 @@ onMounted(() => {
     onPasteSelection: (event) => {
       void pasteAtSelection(undefined, event)
     },
-    onPasteText: pasteTextAt,
+    onPasteText: pasteTextAt
   })
   emit('ready', editor)
   // 切回脑图视图：居中当前选中节点（无选中则保持 zoomToFit）