@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiEditorInsertTableGrid.vue

@@ -1,29 +1,18 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  useTemplateRef,
-  watchSyncEffect,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import { vBindControl } from './control'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  isInteger,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -107,64 +96,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const KeyedFailure = defineComponent({
-  props: { error: { type: null, required: true } },
-  setup(props) {
-    return () => {
-      throw props.error
-    }
-  },
-})
-const KeyedBoundary = defineComponent({
-  setup(_props, { slots }) {
-    let last: VNode[] = []
-    return () => {
-      try {
-        last = slots.default?.() ?? []
-        return last
-      } catch (error) {
-        if (
-          !(error instanceof Error)
-          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
-        ) throw error
-        if (typeof window === 'undefined') throw error
-        return [...last, h(KeyedFailure, { error })]
-      }
-    }
-  },
-})
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   insert: [
@@ -184,71 +116,12 @@ const rows = ref(8)
 const cols = ref(8)
 const hint = ref('')
 const withHeaderRow = ref(false)
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      hint.value == null || typeof hint.value === 'string',
-      '$hint:hint',
-      './components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html: HR007: Reference hint does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = hint.value
-})
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      rows.value == null || Number.isInteger(rows.value),
-      '$rows:rows',
-      './components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html: HR007: Reference rows does not satisfy its declared type.',
-    ))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = rows.value
-})
-let guardedBinding2Previous: any
-const guardedBinding2 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      cols.value == null || Number.isInteger(cols.value),
-      '$cols:cols',
-      './components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html: HR007: Reference cols does not satisfy its declared type.',
-    ))
-  ) return guardedBinding2Previous
-  return guardedBinding2Previous = cols.value
-})
-let guardedBinding3Previous: any
-const guardedBinding3 = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      withHeaderRow.value == null || typeof withHeaderRow.value === 'boolean',
-      '$withHeaderRow:withHeaderRow',
-      './components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html: HR007: Reference withHeaderRow does not satisfy its declared type.',
-    ))
-  ) return guardedBinding3Previous
-  return guardedBinding3Previous = withHeaderRow.value
-})
 provide('html-next:ui-editor-insert-table-grid:cells', cells)
 provide('html-next:ui-editor-insert-table-grid:rows', rows)
 provide('html-next:ui-editor-insert-table-grid:cols', cols)
 provide('html-next:ui-editor-insert-table-grid:hint', hint)
 provide('html-next:ui-editor-insert-table-grid:withHeaderRow', withHeaderRow)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-editor-insert-table-grid> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-insert-table-grid> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editor-insert-table-grid')
 
 const isInsertDetail = (
   detail: unknown,
@@ -313,44 +186,11 @@ useComponentHost(
     state: { cells, rows, cols, hint, withHeaderRow },
   },
 )
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function uniqueKeys<T>(
-  items: readonly T[],
-  keyOf: (
-    item: T,
-    index: number,
-    loop: { index: number; first: boolean; last: boolean; count: number },
-  ) => unknown,
-): readonly T[] {
-  const seen = new Set<unknown>()
-  for (let index = 0; index < items.length; index += 1) {
-    const key = keyOf(items[index]!, index, {
-      index,
-      first: index === 0,
-      last: index === items.length - 1,
-      count: items.length,
-    })
-    if (seen.has(key)) {
-      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
-      throw Object.assign(new Error(`HR004: ${message}`), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({ code: 'HR004', message }),
-      })
-    }
-    seen.add(key)
-  }
-  return items
-}
 </script>
 
 <template>
   <div
-    data-component="ui-editor-insert-table-grid"
+    class="ui-editor-insert-table-grid"
     v-bind="nativeAttrs($attrs)"
     :hidden="!checkedProps.open"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -360,12 +200,12 @@ function uniqueKeys<T>(
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
-    <p class="hint">{{ guarded }}</p>
+    <p class="hint">{{ hint }}</p>
     <div
       class="grid"
       role="group"
       aria-label="Table dimensions"
-      :style="{ '--_rows': guardedBinding, '--_cols': guardedBinding2 }"
+      :style="{ '--_rows': rows, '--_cols': cols }"
       ref="gridElement"
     >
       <KeyedBoundary><button
@@ -397,100 +237,92 @@ function uniqueKeys<T>(
 </template>
 
 <style scoped>
-[data-component~="ui-editor-insert-table-grid"] {
-  padding: var(--ui-space-3);
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-md);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-}
-
-.hint {
-  margin: 0 0 var(--ui-space-2);
-  font-size: var(--ui-font-size-sm);
-  color: var(--ui-text-muted);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
-  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 {
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: var(--ui-border-width) solid var(--ui-control-border);
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-surface);
-  cursor: pointer;
-}
-
-.cell.selected {
-  background: var(--ui-accent-solid, var(--ui-accent));
-  border-color: var(--ui-accent-solid, var(--ui-accent));
-}
-
-.cell:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: calc(-1 * var(--ui-focus-width));
-}
-
-.header {
-  display: block;
-  margin-bottom: var(--ui-space-2);
-  font-size: var(--ui-font-size-sm);
-  cursor: pointer;
-}
-
-@media (pointer: coarse) {
+@scope (.ui-editor-insert-table-grid) {
+  :scope:where(:scope) {
+    padding: var(--ui-space-3);
+    background: var(--ui-surface);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-md);
+    box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  }
+  .hint {
+    margin: 0 0 var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-muted);
+  }
   .grid {
-    grid-template-columns: repeat(var(--_cols, 8), 44px);
-    grid-template-rows: repeat(var(--_rows, 8), 44px);
+    display: grid;
+    grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
+    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%;
+  }
+  :scope:dir(rtl) .grid {
+    --_ui-scroll-fade-direction: to left;
   }
-
   .cell {
-    width: 44px;
-    height: 44px;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-radius-sm);
+    background: var(--ui-surface);
+    cursor: pointer;
+  }
+  .cell.selected {
+    background: var(--ui-accent-solid, var(--ui-accent));
+    border-color: var(--ui-accent-solid, var(--ui-accent));
   }
-}
-
-@media (forced-colors: active) {
   .cell:focus-visible {
-    outline-color: Highlight;
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
   }
-}
+  .header {
+    display: block;
+    margin-bottom: var(--ui-space-2);
+    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);
+    }
 
-[data-component~="ui-editor-insert-table-grid"][hidden] {
-  display: none;
+    .cell {
+      width: 44px;
+      height: 44px;
+    }
+  }
+  @media (forced-colors: active) {
+    .cell:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiEditorMentionMenu.d.ts

@@ -1,7 +1,13 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+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<import("vue").ExtractPropTypes<{
     anchorRect: {
         type: PropType<{
             readonly left?: number;
@@ -115,14 +121,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     }>) => any) | undefined;
 }>, {
     label: string | null;
-    open: boolean | null;
-    loading: boolean | null;
     items: readonly {
         readonly id: string;
         readonly label: string;
         readonly detail?: string;
         readonly initials?: string;
     }[] | null;
+    open: boolean | null;
+    loading: boolean | null;
     query: string | null;
     anchorRect: {
         readonly left?: number;
@@ -136,13 +142,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     } | null;
     loadingLabel: string | null;
     selectedIndex: number | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    header?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-} & {
-    empty?: (props: {}) => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;