@threadlabs/looma 0.14.8 → 0.15.0

package/vue/UiEditorMentionMenu.d.ts

@@ -15,30 +15,52 @@ type __VLS_Props = {
         readonly detail?: string;
         readonly initials?: string;
     })[];
+    label?: string;
     loading?: boolean;
+    loadingLabel?: string;
     open?: boolean;
     query?: string;
     selectedIndex?: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    empty?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
         readonly index: number;
+        readonly value: string;
     }) => any;
     highlight: (detail: {
         readonly index: number;
+        readonly value: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((detail: {
         readonly index: number;
+        readonly value: string;
     }) => any) | undefined;
     onHighlight?: ((detail: {
         readonly index: number;
+        readonly value: string;
     }) => any) | undefined;
 }>, {
+    label: string;
     open: boolean;
-    query: string;
     loading: boolean;
+    query: string;
+    loadingLabel: string;
     selectedIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorMentionMenu.vue

@@ -1,6 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-editor-mention-menu/ui-editor-mention-menu.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -25,24 +25,29 @@ const props = withDefaults(
         readonly detail?: string
         readonly initials?: string
       })[]
+    label?: string
     loading?: boolean
+    loadingLabel?: string
     open?: boolean
     query?: string
     selectedIndex?: number
   }>(),
   {
+    label: 'Mentions',
     loading: false,
+    loadingLabel: 'Searching…',
     open: false,
     query: '',
     selectedIndex: 0,
   },
 )
 const emit = defineEmits<{
-  highlight: [detail: { readonly index: number }]
-  select: [detail: { readonly index: number }]
+  highlight: [detail: { readonly index: number; readonly value: string }]
+  select: [detail: { readonly index: number; readonly value: string }]
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const emptyElement = useTemplateRef<HTMLElement>('empty')
 const visible = ref(false)
 const rows = ref<{ id: string; label: string; detail?: string; initials: string }[]>([])
 const searching = ref(false)
@@ -52,7 +57,8 @@ const prefix = ref('ui-editor-mention-menu')
 const isHighlightDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['index'])
-  && Object.keys(detail as object).every((key) => ['index'].includes(key))
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['index', 'value'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     highlight: isHighlightDetail,
@@ -64,6 +70,7 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
+  refs: { empty: emptyElement },
   state: { visible, rows, searching, active, prefix },
 })
 </script>
@@ -72,17 +79,13 @@ useComponentHost(controllerModule.default, {
   <div
     data-component="ui-editor-mention-menu"
     role="listbox"
-    aria-label="Mention a person"
     v-bind="$attrs"
     :aria-busy="loading"
     :hidden="!visible"
     ref="root"
   >
-    <div class="header">
-      <span>People</span>
-      <span class="hint">Type after @ to search</span>
-    </div>
-    <div v-if="searching" class="loading" role="status">Searching…</div>
+    <div class="header"><slot name="header" /></div>
+    <div v-if="searching" class="loading" role="status">{{ loadingLabel }}</div>
     <ul v-if="!searching" class="list" role="presentation">
       <li
         v-for="(row, index) in rows"
@@ -92,13 +95,16 @@ useComponentHost(controllerModule.default, {
         :id="`${prefix}-option-${index}`"
         :aria-selected="index === active"
         :data-index="index"
+        :data-value="row.id"
         :class="{ active: index === active }"
       >
         <span class="avatar" aria-hidden="true">{{ row.initials }}</span>
         <span class="body"><span class="label">{{ row.label }}</span>
           <span v-if="row.detail" class="detail">{{ row.detail }}</span></span>
       </li>
+      <slot />
     </ul>
+    <div class="empty" ref="empty"><slot name="empty" /></div>
   </div>
 </template>
 
@@ -129,6 +135,16 @@ useComponentHost(controllerModule.default, {
   font-weight: var(--ui-font-semibold);
 }
 
+.header:not(:has(> *)), .empty:not(:has(> *)) {
+  display: none;
+}
+
+.empty {
+  padding: var(--ui-space-3);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+
 .hint {
   overflow: hidden;
   color: var(--ui-text-muted);
@@ -189,7 +205,7 @@ useComponentHost(controllerModule.default, {
   flex: 0 0 auto;
   color: var(--ui-accent-active, var(--ui-accent-solid));
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }

package/vue/UiEditorMentionMenuItem.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    detail?: string;
+    initials?: string;
+    value?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    detail: string;
+    initials: string;
+    value: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorMentionMenuItem.js

@@ -0,0 +1,2 @@
+import { t as UiEditorMentionMenuItem_default } from "./chunks/UiEditorMentionMenuItem.js";
+export { UiEditorMentionMenuItem_default as default };

package/vue/UiEditorMentionMenuItem.vue

@@ -0,0 +1,88 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    detail?: string
+    initials?: string
+    value?: string
+  }>(),
+  {
+    detail: '',
+    initials: '',
+    value: '',
+  },
+)
+</script>
+
+<template>
+  <li
+    data-component="ui-editor-mention-menu-item"
+    role="option"
+    tabindex="-1"
+    v-bind="$attrs"
+    :data-value="value"
+  >
+    <span class="avatar" aria-hidden="true"><slot name="start">{{ initials }}</slot></span>
+    <span class="body"><span class="label"><slot /></span>
+      <span v-if="detail" class="detail">{{ detail }}</span></span>
+  </li>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-mention-menu-item"] {
+  display: flex;
+  align-items: center;
+  min-block-size: 44px;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  gap: var(--ui-space-3);
+  cursor: pointer;
+  list-style: none;
+}
+
+[data-component~="ui-editor-mention-menu-item"][aria-selected="true"] {
+  background: var(--ui-accent-subtle);
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 32px;
+  block-size: 32px;
+  flex: 0 0 auto;
+  color: var(--ui-accent-active);
+  background: var(--ui-accent-soft);
+  border-radius: var(--ui-radius-round);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
+}
+
+.body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+}
+
+.label, .detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label {
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+}
+
+.detail {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+}
+
+[data-component~="ui-editor-mention-menu-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiEditorSlashMenu.d.ts

@@ -10,32 +10,55 @@ type __VLS_Props = {
         readonly height?: number;
     } | null;
     items?: readonly ({
+        readonly value?: string;
         readonly title: string;
         readonly description: string;
         readonly icon: string;
     })[];
+    label?: string;
     open?: boolean;
     query?: string;
     selectedIndex?: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    empty?: (props: typeof __VLS_10) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
         readonly index: number;
+        readonly value: string;
     }) => any;
     highlight: (detail: {
         readonly index: number;
+        readonly value: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((detail: {
         readonly index: number;
+        readonly value: string;
     }) => any) | undefined;
     onHighlight?: ((detail: {
         readonly index: number;
+        readonly value: string;
     }) => any) | undefined;
 }>, {
+    label: string;
     open: boolean;
     query: string;
     selectedIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorSlashMenu.vue

@@ -1,6 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-editor-slash-menu/ui-editor-slash-menu.js'
 import { createDispatch, useComponentHost } from './host'
 import UiIcon from './UiIcon.vue'
@@ -20,30 +20,40 @@ const props = withDefaults(
       readonly height?: number
     } | null
     items?:
-      readonly ({ readonly title: string; readonly description: string; readonly icon: string })[]
+      readonly ({
+        readonly value?: string
+        readonly title: string
+        readonly description: string
+        readonly icon: string
+      })[]
+    label?: string
     open?: boolean
     query?: string
     selectedIndex?: number
   }>(),
   {
+    label: 'Insert block',
     open: false,
     query: '',
     selectedIndex: 0,
   },
 )
 const emit = defineEmits<{
-  highlight: [detail: { readonly index: number }]
-  select: [detail: { readonly index: number }]
+  highlight: [detail: { readonly index: number; readonly value: string }]
+  select: [detail: { readonly index: number; readonly value: string }]
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const emptyElement = useTemplateRef<HTMLElement>('empty')
 const visible = ref(false)
 const active = ref(0)
+const rows = ref<{ value: string; title: string; description: string; icon: string }[]>([])
 
 const isHighlightDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && Number.isInteger((detail as Record<string, unknown>)['index'])
-  && Object.keys(detail as object).every((key) => ['index'].includes(key))
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['index', 'value'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     highlight: isHighlightDetail,
@@ -55,7 +65,8 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  state: { visible, active },
+  refs: { empty: emptyElement },
+  state: { visible, active, rows },
 })
 </script>
 
@@ -63,33 +74,30 @@ useComponentHost(controllerModule.default, {
   <div
     data-component="ui-editor-slash-menu"
     role="listbox"
-    aria-label="Insert block"
     v-bind="$attrs"
     :hidden="!visible"
     ref="root"
   >
-    <div class="header" aria-hidden="true">
-      <span class="header-label">Insert</span>
-      <span v-if="query" class="header-query">{{ query }}</span>
-    </div>
+    <div class="header"><slot name="header" /></div>
     <ul class="list" role="presentation">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in rows"
         :key="index"
         class="item"
         role="option"
         :aria-selected="index === active"
         :data-index="index"
+        :data-value="item.value"
         :class="{ active: index === active }"
       >
         <span class="icon" aria-hidden="true"><UiIcon :name="item.icon" /></span>
         <span class="body"><span class="title">{{ item.title }}</span>
           <span class="description">{{ item.description }}</span></span>
       </li>
+      <slot />
     </ul>
-    <div class="footer" aria-hidden="true">
-      <kbd>↑↓</kbd> navigate · <kbd>↵</kbd> insert · <kbd>Esc</kbd> close
-    </div>
+    <div class="empty" ref="empty"><slot name="empty" /></div>
+    <div class="footer"><slot name="footer" /></div>
   </div>
 </template>
 
@@ -128,23 +136,22 @@ useComponentHost(controllerModule.default, {
   letter-spacing: 0.05em;
 }
 
+.header:not(:has(> *)), .footer:not(:has(> *)), .empty:not(:has(> *)) {
+  display: none;
+}
+
+.empty {
+  padding: var(--ui-space-3);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+
 @media (max-width: 767px) {
   .header {
     display: flex;
   }
 }
 
-.header-query {
-  background: var(--ui-surface-hover);
-  border-radius: var(--ui-radius-sm);
-  padding: 0.1em 0.4em;
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-accent);
-  text-transform: none;
-  letter-spacing: 0;
-}
-
 .list {
   list-style: none;
   margin: 0;
@@ -249,19 +256,12 @@ useComponentHost(controllerModule.default, {
 }
 
 .footer {
-  display: none;
   padding: var(--ui-space-2) var(--ui-space-3);
   border-top: 1px solid var(--ui-border);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
 }
 
-@media (min-width: 768px) {
-  .footer {
-    display: block;
-  }
-}
-
 [data-component~="ui-editor-slash-menu"] kbd {
   display: inline-flex;
   align-items: center;

package/vue/UiEditorSlashMenuGroup.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorSlashMenuGroup.js

@@ -0,0 +1,2 @@
+import { t as UiEditorSlashMenuGroup_default } from "./chunks/UiEditorSlashMenuGroup.js";
+export { UiEditorSlashMenuGroup_default as default };

package/vue/UiEditorSlashMenuGroup.vue

@@ -0,0 +1,43 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    label?: string
+  }>(),
+  {
+    label: '',
+  },
+)
+</script>
+
+<template>
+  <li data-component="ui-editor-slash-menu-group" role="presentation" v-bind="$attrs">
+    <div role="group" :aria-label="label">
+      <div class="heading">{{ label }}</div>
+      <ul role="presentation"><slot /></ul>
+    </div>
+  </li>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-slash-menu-group"] {
+  display: block;
+  list-style: none;
+}
+.heading {
+  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
+}
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+[data-component~="ui-editor-slash-menu-group"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiEditorSlashMenuItem.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    description?: string;
+    disabled?: boolean;
+    icon?: string;
+    keywords?: string;
+    value?: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    value: string;
+    disabled: boolean;
+    icon: string;
+    description: string;
+    keywords: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorSlashMenuItem.js

@@ -0,0 +1,2 @@
+import { t as UiEditorSlashMenuItem_default } from "./chunks/UiEditorSlashMenuItem.js";
+export { UiEditorSlashMenuItem_default as default };