@threadlabs/looma 0.14.7 → 0.15.0

package/vue/UiEditable.vue

@@ -9,18 +9,28 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(
   defineProps<{
     actions?: boolean
+    cancelLabel?: string
     disabled?: boolean
     edit?: boolean
     hint?: string
     label?: string
+    maxLength?: number
+    placeholder?: string
+    required?: boolean
+    saveLabel?: string
     value?: string
   }>(),
   {
     actions: false,
+    cancelLabel: 'Cancel',
     disabled: false,
     edit: false,
     hint: '',
     label: 'Edit value',
+    maxLength: 0,
+    placeholder: '',
+    required: false,
+    saveLabel: 'Save',
     value: '',
   },
 )
@@ -132,13 +142,15 @@ useComponentHost(controllerModule.default, {
         type="text"
         :value.prop="draft"
         :aria-label="label"
+        :placeholder="placeholder"
+        :required="required"
         :disabled="disabled || !internalEdit"
         ref="input"
       >
     </div>
     <div v-if="actions" class="actions">
-      <button class="save" type="button">Save</button>
-      <button class="cancel" type="button">Cancel</button>
+      <button class="save" type="button">{{ saveLabel }}</button>
+      <button class="cancel" type="button">{{ cancelLabel }}</button>
     </div>
   </div>
 </template>

package/vue/UiEditorInsertTableGrid.vue

@@ -27,9 +27,11 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const gridElement = useTemplateRef<HTMLElement>('grid')
 const headerElement = useTemplateRef<HTMLElement>('header')
-const insertElement = useTemplateRef<HTMLElement>('insert')
-const cells = ref<{ key: string; row: number; col: number; label: string; selected: boolean }[]>([])
+const cells = ref<
+  { key: string; row: number; col: number; label: string; selected: boolean; tabIndex: number }[]
+>([])
 const rows = ref(8)
 const cols = ref(8)
 const hint = ref('')
@@ -51,7 +53,7 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  refs: { header: headerElement, insert: insertElement },
+  refs: { grid: gridElement, header: headerElement },
   state: { cells, rows, cols, hint, withHeaderRow },
 })
 </script>
@@ -64,6 +66,7 @@ useComponentHost(controllerModule.default, {
       role="group"
       aria-label="Table dimensions"
       :style="{ '--_rows': rows, '--_cols': cols }"
+      ref="grid"
     >
       <button
         v-for="cell in cells"
@@ -74,13 +77,13 @@ useComponentHost(controllerModule.default, {
         :data-col="cell.col"
         :aria-label="cell.label"
         :aria-pressed="cell.selected"
+        :tabindex="cell.tabIndex"
         :class="{ selected: cell.selected }"
       >
       </button>
     </div>
     <label class="header"><input type="checkbox" :checked.prop="withHeaderRow" ref="header"> Header
       row</label>
-    <button type="button" class="insert" ref="insert">Insert table</button>
   </div>
 </template>
 
@@ -105,6 +108,32 @@ useComponentHost(controllerModule.default, {
   grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
   gap: 2px;
   margin-bottom: var(--ui-space-2);
+  max-inline-size: 100%;
+  overflow: auto;
+  --_ui-scroll-fade-direction: to right;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self inline);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+
+[data-component~="ui-editor-insert-table-grid"]:dir(rtl) .grid {
+  --_ui-scroll-fade-direction: to left;
 }
 
 .cell {
@@ -122,6 +151,11 @@ useComponentHost(controllerModule.default, {
   border-color: var(--ui-accent-solid, var(--ui-accent));
 }
 
+.cell:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+
 .header {
   display: block;
   margin-bottom: var(--ui-space-2);
@@ -129,19 +163,22 @@ useComponentHost(controllerModule.default, {
   cursor: pointer;
 }
 
-[data-component~="ui-editor-insert-table-grid"] .insert {
-  width: 100%;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-accent-solid, var(--ui-accent));
-  color: var(--ui-accent-contrast);
-  font-size: var(--ui-font-size-sm);
-  cursor: pointer;
+@media (pointer: coarse) {
+  .grid {
+    grid-template-columns: repeat(var(--_cols, 8), 44px);
+    grid-template-rows: repeat(var(--_rows, 8), 44px);
+  }
+
+  .cell {
+    width: 44px;
+    height: 44px;
+  }
 }
 
-[data-component~="ui-editor-insert-table-grid"] .insert:hover {
-  filter: brightness(1.05);
+@media (forced-colors: active) {
+  .cell:focus-visible {
+    outline-color: Highlight;
+  }
 }
 
 [data-component~="ui-editor-insert-table-grid"][hidden] {

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;