@threadlabs/looma 0.21.6 → 0.22.1

package/vue/UiEditorSlashMenu.vue

@@ -1,13 +1,85 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    anchorRect: {
+      type: {
+        kind: 'object',
+        fields: [
+          { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'right', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'bottom', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'x', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'y', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: true },
+          { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: true },
+        ],
+        open: false,
+      },
+      required: false,
+      target: { attribute: 'anchorrect' },
+      description: 'Where the slash was typed, in viewport coordinates.',
+    },
+    items: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [
+            { name: 'value', type: { kind: 'terminal', name: 'string' }, optional: true },
+            { name: 'title', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'description', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'icon', type: { kind: 'terminal', name: 'string' }, optional: false },
+          ],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'items' },
+      description:
+        'Integration-supplied commands. Authored Slash Menu Item children are the markup alternative.',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'Accessible name of the suggestion list, used unless an aria-label or aria-labelledby is authored.',
+      default: 'Insert block',
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the menu is open.',
+      default: false,
+    },
+    query: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'query' },
+      description: 'The text typed after the slash.',
+      default: '',
+    },
+    selectedIndex: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'selectedindex' },
+      description:
+        'The zero-based index of the highlighted item. The menu does not handle arrow keys itself: the editor sets this as the user moves, while hovering an item\n      highlights it and reports a highlight event.',
+      default: 0,
+    },
+  },
+}
 const props = defineProps({
   anchorRect: {
     type: null as unknown as PropType<
@@ -70,8 +142,6 @@ const checkedProps = computed(() => ({
     },
     false,
     'anchorRect',
-    undefined,
-    undefined,
   ),
   items: checkedProp<
     readonly ({
@@ -97,40 +167,30 @@ const checkedProps = computed(() => ({
     },
     false,
     'items',
-    undefined,
-    undefined,
   ),
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   query: checkedProp<string>(
     props['query'],
     { kind: 'terminal', name: 'string' },
     false,
     'query',
-    undefined,
-    undefined,
   ) as string,
   selectedIndex: checkedProp<number>(
     props['selectedIndex'],
     { kind: 'terminal', name: 'integer' },
     false,
     'selectedIndex',
-    undefined,
-    undefined,
   ) as number,
 }))
 void checkedProps.value
@@ -180,6 +240,14 @@ const emptyElement = useTemplateRef<HTMLElement>('empty')
 const visible = ref(false)
 const active = ref(0)
 const rows = ref<{ value: string; title: string; description: string; icon: string }[]>([])
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(visible.value == null || typeof visible.value === 'boolean')) return guardedPrevious
+  return guardedPrevious = !visible.value
+})
+provide('html-next:ui-editor-slash-menu:visible', visible)
+provide('html-next:ui-editor-slash-menu:active', active)
+provide('html-next:ui-editor-slash-menu:rows', rows)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -227,7 +295,8 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     data-component="ui-editor-slash-menu"
     role="listbox"
     v-bind="nativeAttrs($attrs)"
-    :hidden="!visible"
+    :hidden="guarded"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-anchor-rect="reflectedProp('anchorRect', 'anchor-rect', checkedProps.anchorRect, undefined, false)"
     :data-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"

package/vue/UiEditorSlashMenuGroup.vue

@@ -1,11 +1,22 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Names this group of related slash commands.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: '' },
 })
@@ -15,8 +26,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -80,6 +89,7 @@ if (
     data-component="ui-editor-slash-menu-group"
     role="presentation"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
     <div role="group" :aria-label="checkedProps.label ?? undefined">

package/vue/UiEditorSlashMenuItem.vue

@@ -1,12 +1,52 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    description: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'description' },
+      description: 'One line explaining the command.',
+      default: '',
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-disabled' },
+      description: 'Keeps the command visible but unavailable for selection.',
+      default: false,
+    },
+    icon: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description: 'A Lucide icon name for the leading symbol.',
+      default: '',
+    },
+    keywords: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-keywords' },
+      description: 'Additional space-separated search terms matched by the containing Slash Menu.',
+      default: '',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-value' },
+      description:
+        'Stable identifier reported by the containing Slash Menu when this command is chosen.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   description: { type: null as unknown as PropType<string | null>, default: '' },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -20,40 +60,30 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'description',
-    undefined,
-    undefined,
   ) as string,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   icon: checkedProp<string>(
     props['icon'],
     { kind: 'terminal', name: 'string' },
     false,
     'icon',
-    undefined,
-    undefined,
   ) as string,
   keywords: checkedProp<string>(
     props['keywords'],
     { kind: 'terminal', name: 'string' },
     false,
     'keywords',
-    undefined,
-    undefined,
   ) as string,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -119,6 +149,7 @@ if (
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
     :aria-disabled="checkedProps.disabled ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-description="reflectedProp('description', 'description', checkedProps.description, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-icon="reflectedProp('icon', 'icon', checkedProps.icon, undefined, false)"

package/vue/UiEditorTableContextMenu.d.ts

@@ -61,9 +61,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     open: boolean | null;
     actions: readonly ("align-center" | "align-left" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null;
     headerRow: boolean | null;
+    scope: "row" | "cell" | "column" | null;
     cellBackground: string | null;
     headerColumn: boolean | null;
-    scope: "row" | "cell" | "column" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorTableContextMenu.vue

@@ -1,13 +1,100 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, defineComponent, getCurrentInstance, h, ref, watchSyncEffect } from 'vue'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  provide,
+  ref,
+  watchSyncEffect,
+} from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    actions: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'constrained',
+          base: { kind: 'terminal', name: 'keyword' },
+          values: [
+            'align-left',
+            'align-center',
+            'align-right',
+            'background-none',
+            'background-gray',
+            'background-yellow',
+            'background-blue',
+            'background-green',
+            'background-red',
+            'add-row-before',
+            'add-row-after',
+            'add-column-before',
+            'add-column-after',
+            'toggle-header-row',
+            'toggle-header-column',
+            'move-row-up',
+            'move-row-down',
+            'move-column-left',
+            'move-column-right',
+            'clear-cells',
+            'merge-cells',
+            'split-cell',
+            'delete-row',
+            'delete-column',
+            'delete-table',
+          ],
+        },
+      },
+      required: false,
+      target: { attribute: 'actions' },
+      description: 'The complete set of commands the current selection permits.',
+    },
+    cellBackground: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'cellbackground' },
+      description: 'Identifies the background choice that is active for the current cell.',
+      default: '',
+    },
+    headerColumn: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'headercolumn' },
+      description: 'Whether the table\'s first column currently uses header cells.',
+      default: false,
+    },
+    headerRow: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'headerrow' },
+      description: 'Whether the table\'s first row currently uses header cells.',
+      default: false,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Shows the menu at the position owned by the editor integration.',
+      default: false,
+    },
+    scope: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'scope' },
+      description: 'Keeps structure actions relevant to a cell, row handle, or column handle.',
+      values: ['cell', 'row', 'column'],
+      default: 'cell',
+    },
+  },
+}
 const props = defineProps({
   actions: {
     type: null as unknown as PropType<
@@ -114,48 +201,36 @@ const checkedProps = computed(() => ({
     },
     false,
     'actions',
-    undefined,
-    undefined,
   ),
   cellBackground: checkedProp<string>(
     props['cellBackground'],
     { kind: 'terminal', name: 'string' },
     false,
     'cellBackground',
-    undefined,
-    undefined,
   ) as string,
   headerColumn: checkedProp<boolean>(
     props['headerColumn'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'headerColumn',
-    undefined,
-    undefined,
   ) as boolean,
   headerRow: checkedProp<boolean>(
     props['headerRow'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'headerRow',
-    undefined,
-    undefined,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   scope: checkedProp<'cell' | 'row' | 'column'>(
     props['scope'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'scope',
-    undefined,
-    ['cell', 'row', 'column'],
   ) as 'cell' | 'row' | 'column',
 }))
 void checkedProps.value
@@ -257,9 +332,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const swatches = ref<{ action: string; label: string; color: string; selected: boolean }[] | null>(
-  [],
-)
+const swatches = ref<{ action: string; label: string; color: string; selected: boolean }[]>([])
 const sections = ref<
   {
     heading: string
@@ -273,6 +346,8 @@ const sections = ref<
     }[]
   }[]
 >([])
+provide('html-next:ui-editor-table-context-menu:swatches', swatches)
+provide('html-next:ui-editor-table-context-menu:sections', sections)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -386,6 +461,7 @@ function uniqueKeys<T>(
     role="menu"
     v-bind="nativeAttrs($attrs)"
     :hidden="!checkedProps.open"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
     :data-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
     :data-header-column="reflectedProp('headerColumn', 'header-column', checkedProps.headerColumn, undefined, false)"
@@ -394,7 +470,7 @@ function uniqueKeys<T>(
     :data-scope="reflectedProp('scope', 'scope', checkedProps.scope, undefined, false)"
     ref="root"
   >
-    <div v-if="swatches?.length" class="section" role="none">
+    <div v-if="swatches.length" class="section" role="none">
       <div class="heading" role="presentation">Cell background</div>
       <div class="swatches" role="group" aria-label="Cell background">
         <KeyedBoundary><button

package/vue/UiEditorTableOverlay.vue

@@ -1,13 +1,95 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, defineComponent, getCurrentInstance, h, ref, watchSyncEffect } from 'vue'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  provide,
+  ref,
+  watchSyncEffect,
+} from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    geometry: {
+      type: {
+        kind: 'object',
+        fields: [{
+          name: 'rowBoundaries',
+          type: { kind: 'list', item: { kind: 'terminal', name: 'number' } },
+          optional: false,
+        }, {
+          name: 'columnBoundaries',
+          type: { kind: 'list', item: { kind: 'terminal', name: 'number' } },
+          optional: false,
+        }, {
+          name: 'activeCell',
+          type: {
+            kind: 'union',
+            members: [{
+              kind: 'object',
+              fields: [
+                { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'rowIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+                {
+                  name: 'columnIndex',
+                  type: { kind: 'terminal', name: 'integer' },
+                  optional: false,
+                },
+              ],
+              open: false,
+            }, { kind: 'terminal', name: 'null' }],
+          },
+          optional: false,
+        }, {
+          name: 'hoveredCell',
+          type: {
+            kind: 'union',
+            members: [{
+              kind: 'object',
+              fields: [
+                { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: false },
+                { name: 'rowIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+                {
+                  name: 'columnIndex',
+                  type: { kind: 'terminal', name: 'integer' },
+                  optional: false,
+                },
+              ],
+              open: false,
+            }, { kind: 'terminal', name: 'null' }],
+          },
+          optional: true,
+        }],
+        open: false,
+      },
+      required: false,
+      target: { attribute: 'geometry' },
+      description:
+        'The authoritative editor-measured table boundaries and active or hovered cell rectangles.',
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Shows the controls after the editor has supplied current geometry.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   geometry: {
     type: null as unknown as PropType<
@@ -111,16 +193,12 @@ const checkedProps = computed(() => ({
     },
     false,
     'geometry',
-    undefined,
-    undefined,
   ),
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -327,6 +405,11 @@ const guardedBinding5 = computed(() => {
   }
   return guardedBinding5Previous = active.value?.columnIndex
 })
+provide('html-next:ui-editor-table-overlay:rows', rows)
+provide('html-next:ui-editor-table-overlay:cols', cols)
+provide('html-next:ui-editor-table-overlay:hovered', hovered)
+provide('html-next:ui-editor-table-overlay:active', active)
+provide('html-next:ui-editor-table-overlay:activeKey', activeKey)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -458,6 +541,7 @@ function uniqueKeys<T>(
     aria-label="Table controls"
     v-bind="nativeAttrs($attrs)"
     :hidden="!checkedProps.open"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-geometry="reflectedProp('geometry', 'geometry', checkedProps.geometry, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"