@threadlabs/looma 0.5.0 → 0.5.2

package/vue/UiEditorInsertTableGrid.vue

@@ -1,210 +1,269 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import * as controllerModule from "../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
-    let list = Array.isArray(items) ? items.slice() : [];
-    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
-    if (sort.length > 0) {
-      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
-        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
-        : item;
-      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-      list.sort((a, b) => {
-        for (const key of sort) {
-          const descending = key.startsWith("-");
-          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-          if (order !== 0) return descending ? -order : order;
-        }
-        return 0;
-      });
-    }
-    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watchEffect,
+} from 'vue'
+import * as controllerModule from '../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    headerRow?: boolean
+    maxCols?: number
+    maxRows?: number
+    open?: boolean
+  }>(),
+  {
+    headerRow: false,
+    maxCols: 8,
+    maxRows: 8,
+    open: false,
   },
-};
-
-const props = withDefaults(defineProps<{
-  headerRow?: boolean | null;
-  maxCols?: number | null;
-  maxRows?: number | null;
-  open?: boolean | null;
-}>(), {
-  headerRow: false,
-  maxCols: 8,
-  maxRows: 8,
-  open: false,
-});
+)
 const emit = defineEmits<{
-  "insert": [detail: { readonly rows: number; readonly cols: number; readonly withHeaderRow: boolean }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_cells = ref<any>([]);
-const state_rows = ref<any>(8);
-const state_cols = ref<any>(8);
-const state_hint = ref<any>("");
-const state_withHeaderRow = ref<any>(false);
+  insert: [
+    detail: { readonly rows: number; readonly cols: number; readonly withHeaderRow: boolean },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const headerElement = useTemplateRef<HTMLElement>('header')
+const insertElement = useTemplateRef<HTMLElement>('insert')
+const cells = ref<{ key: string; row: number; col: number; label: string; selected: boolean }[]>([])
+const rows = ref(8)
+const cols = ref(8)
+const hint = ref('')
+const withHeaderRow = ref(false)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"insert":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    insert: { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "insert": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger((detail as Record<string, unknown>)["rows"]) && Number.isInteger((detail as Record<string, unknown>)["cols"]) && typeof (detail as Record<string, unknown>)["withHeaderRow"] === "boolean" && Object.keys(detail as object).every((key) => ["rows","cols","withHeaderRow"].includes(key))),
-  };
+    insert: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && Number.isInteger((detail as Record<string, unknown>)['rows'])
+      && Number.isInteger((detail as Record<string, unknown>)['cols'])
+      && typeof (detail as Record<string, unknown>)['withHeaderRow'] === 'boolean'
+      && Object.keys(detail as object).every((key) =>
+        ['rows', 'cols', 'withHeaderRow'].includes(key)
+      ),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "cells") return state_cells.value;
-  if (name === "rows") return state_rows.value;
-  if (name === "cols") return state_cols.value;
-  if (name === "hint") return state_hint.value;
-  if (name === "withHeaderRow") return state_withHeaderRow.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'cells') return cells.value
+  if (name === 'rows') return rows.value
+  if (name === 'cols') return cols.value
+  if (name === 'hint') return hint.value
+  if (name === 'withHeaderRow') return withHeaderRow.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "cells") { state_cells.value = value; return true; }
-  if (name === "rows") { state_rows.value = value; return true; }
-  if (name === "cols") { state_cols.value = value; return true; }
-  if (name === "hint") { state_hint.value = value; return true; }
-  if (name === "withHeaderRow") { state_withHeaderRow.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'cells') {
+    cells.value = value as never
+    return true
+  }
+  if (name === 'rows') {
+    rows.value = value as never
+    return true
+  }
+  if (name === 'cols') {
+    cols.value = value as never
+    return true
+  }
+  if (name === 'hint') {
+    hint.value = value as never
+    return true
+  }
+  if (name === 'withHeaderRow') {
+    withHeaderRow.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {
+    get header(): Element {
+      return headerElement.value as Element
+    },
+    get insert(): Element {
+      return insertElement.value as Element
+    },
+  } as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <div data-component="ui-editor-insert-table-grid" v-bind="$attrs" :hidden="hn.attr(!hn.t(props.open))" ref="root"><p class="hint">{{ hn.text(state_hint) }}</p><div class="grid" role="group" aria-label="Table dimensions" :style="{ '--ui-editor-table-grid-rows': hn.text(state_rows), '--ui-editor-table-grid-cols': hn.text(state_cols) }"><template v-for="(cell, index) in hn.shape(state_cells, undefined, [], undefined)" :key="(cell)?.key"><button type="button" class="cell" :data-row="hn.attr((cell)?.row)" :data-col="hn.attr((cell)?.col)" :aria-label="hn.enumerated((cell)?.label)" :aria-pressed="hn.enumerated((cell)?.selected)" :class="{ 'selected': hn.t((cell)?.selected) }"></button></template></div><label class="header"><input type="checkbox" :checked.prop="(state_withHeaderRow) as any" :ref="(element) => { refs['header'] = element as Element }"> Header row</label><button type="button" class="insert" :ref="(element) => { refs['insert'] = element as Element }">Insert table</button></div>
+  <div data-component="ui-editor-insert-table-grid" v-bind="$attrs" :hidden="!open" ref="root">
+    <p class="hint">{{ hint }}</p>
+    <div
+      class="grid"
+      role="group"
+      aria-label="Table dimensions"
+      :style="{ '--ui-editor-table-grid-rows': rows, '--ui-editor-table-grid-cols': cols }"
+    >
+      <button
+        v-for="cell in cells"
+        :key="cell.key"
+        type="button"
+        class="cell"
+        :data-row="cell.row"
+        :data-col="cell.col"
+        :aria-label="cell.label"
+        :aria-pressed="cell.selected"
+        :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>
 
 <style scoped>
 [data-component~="ui-editor-insert-table-grid"] {
-      padding: var(--ui-space-3, 12px);
-      background: var(--ui-surface, #fff);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-md, 6px);
-      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-    }
+  padding: var(--ui-space-3, 12px);
+  background: var(--ui-surface, #fff);
+  border: 1px solid var(--ui-border, #e5e7eb);
+  border-radius: var(--ui-radius-md, 6px);
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+}
 
-    .hint {
-      margin: 0 0 var(--ui-space-2, 8px);
-      font-size: var(--ui-text-sm, 0.875rem);
-      color: var(--ui-text-muted, #6b7280);
-    }
+.hint {
+  margin: 0 0 var(--ui-space-2, 8px);
+  font-size: var(--ui-text-sm, 0.875rem);
+  color: var(--ui-text-muted, #6b7280);
+}
 
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
-      grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
-      gap: 2px;
-      margin-bottom: var(--ui-space-2, 8px);
-    }
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
+  grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+  gap: 2px;
+  margin-bottom: var(--ui-space-2, 8px);
+}
 
-    .cell {
-      width: 1.25rem;
-      height: 1.25rem;
-      padding: 0;
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: 2px;
-      background: var(--ui-surface, #fff);
-      cursor: pointer;
-    }
+.cell {
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 1px solid var(--ui-border, #e5e7eb);
+  border-radius: 2px;
+  background: var(--ui-surface, #fff);
+  cursor: pointer;
+}
 
-    .cell.selected {
-      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-      border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-    }
+.cell.selected {
+  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+  border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+}
 
-    .header {
-      display: block;
-      margin-bottom: var(--ui-space-2, 8px);
-      font-size: var(--ui-text-sm, 0.875rem);
-      cursor: pointer;
-    }
+.header {
+  display: block;
+  margin-bottom: var(--ui-space-2, 8px);
+  font-size: var(--ui-text-sm, 0.875rem);
+  cursor: pointer;
+}
 
-    [data-component~="ui-editor-insert-table-grid"] .insert {
-      width: 100%;
-      padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-      border: 1px solid var(--ui-border, #e5e7eb);
-      border-radius: var(--ui-radius-sm, 4px);
-      background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-      color: var(--ui-accent-contrast, #fff);
-      font-size: var(--ui-text-sm, 0.875rem);
-      cursor: pointer;
-    }
+[data-component~="ui-editor-insert-table-grid"] .insert {
+  width: 100%;
+  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+  border: 1px solid var(--ui-border, #e5e7eb);
+  border-radius: var(--ui-radius-sm, 4px);
+  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+  color: var(--ui-accent-contrast, #fff);
+  font-size: var(--ui-text-sm, 0.875rem);
+  cursor: pointer;
+}
 
-    [data-component~="ui-editor-insert-table-grid"] .insert:hover {
-      filter: brightness(1.05);
-    }
+[data-component~="ui-editor-insert-table-grid"] .insert:hover {
+  filter: brightness(1.05);
+}
 
-    [data-component~="ui-editor-insert-table-grid"][hidden] {
-      display: none;
-    }
+[data-component~="ui-editor-insert-table-grid"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiEditorMentionMenu.d.ts

@@ -14,11 +14,11 @@ type __VLS_Props = {
         readonly label: string;
         readonly detail?: string;
         readonly initials?: string;
-    })[] | null;
-    loading?: boolean | null;
-    open?: boolean | null;
-    query?: string | null;
-    selectedIndex?: number | null;
+    })[];
+    loading?: boolean;
+    open?: boolean;
+    query?: string;
+    selectedIndex?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
@@ -35,10 +35,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         readonly index: number;
     }) => any) | undefined;
 }>, {
-    open: boolean | null;
-    query: string | null;
-    loading: boolean | null;
-    selectedIndex: number | null;
+    open: boolean;
+    query: string;
+    loading: boolean;
+    selectedIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;