@threadlabs/looma 0.21.6 → 0.22.1

package/vue/UiEditable.vue

@@ -1,13 +1,97 @@
-<!-- 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 { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    actions: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'actions' },
+      description:
+        'Show explicit Save and Cancel buttons while editing. Without them, Enter or leaving the field saves and Escape cancels.',
+      default: false,
+    },
+    cancelLabel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'cancellabel' },
+      description: 'Visible text for the Cancel action.',
+      default: 'Cancel',
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Prevents entering or changing edit mode.',
+      default: false,
+    },
+    edit: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'edit' },
+      description: 'Whether edit mode is active initially or when set externally.',
+      default: false,
+    },
+    hint: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'hint' },
+      description:
+        'Optional text shown beside the value to signal it is editable (for example "Edit").',
+      default: '',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name for the editor.',
+      default: 'Edit value',
+    },
+    maxLength: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'maxlength' },
+      description: 'Maximum draft length; 0 leaves the length unrestricted.',
+      default: 0,
+    },
+    placeholder: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'placeholder' },
+      description: 'Hint shown in the text input while the draft is empty.',
+      default: '',
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description: 'Prevent an empty draft from being saved.',
+      default: false,
+    },
+    saveLabel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'savelabel' },
+      description: 'Visible text for the Save action.',
+      default: 'Save',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The displayed value, and the text the editor starts from. It is not a form field: nothing is submitted with a form, so a form that needs the value copies\n      it from the change event into a field of its own.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   actions: { type: null as unknown as PropType<boolean | null>, default: false },
   cancelLabel: { type: null as unknown as PropType<string | null>, default: 'Cancel' },
@@ -27,88 +111,66 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'actions',
-    undefined,
-    undefined,
   ) as boolean,
   cancelLabel: checkedProp<string>(
     props['cancelLabel'],
     { kind: 'terminal', name: 'string' },
     false,
     'cancelLabel',
-    undefined,
-    undefined,
   ) as string,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   edit: checkedProp<boolean>(
     props['edit'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'edit',
-    undefined,
-    undefined,
   ) as boolean,
   hint: checkedProp<string>(
     props['hint'],
     { kind: 'terminal', name: 'string' },
     false,
     'hint',
-    undefined,
-    undefined,
   ) as string,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   maxLength: checkedProp<number>(
     props['maxLength'],
     { kind: 'terminal', name: 'number' },
     false,
     'maxLength',
-    undefined,
-    undefined,
   ) as number,
   placeholder: checkedProp<string>(
     props['placeholder'],
     { kind: 'terminal', name: 'string' },
     false,
     'placeholder',
-    undefined,
-    undefined,
   ) as string,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
   saveLabel: checkedProp<string>(
     props['saveLabel'],
     { kind: 'terminal', name: 'string' },
     false,
     'saveLabel',
-    undefined,
-    undefined,
   ) as string,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -188,6 +250,23 @@ const inputElement = useTemplateRef<HTMLElement>('input')
 const internalEdit = ref(false)
 const internalValue = ref('')
 const draft = ref('')
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(internalValue.value == null || typeof internalValue.value === 'string')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = internalValue.value
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (!(internalEdit.value == null || typeof internalEdit.value === 'boolean')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = checkedProps.value.disabled || !internalEdit.value
+})
+provide('html-next:ui-editable:internalEdit', internalEdit)
+provide('html-next:ui-editable:internalValue', internalValue)
+provide('html-next:ui-editable:draft', draft)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -269,6 +348,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   <div
     data-component="ui-editable"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
     :data-cancel-label="reflectedProp('cancelLabel', 'cancel-label', checkedProps.cancelLabel, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
@@ -290,7 +370,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         :disabled="checkedProps.disabled ?? undefined"
         ref="preview"
       >
-        <span class="text">{{ internalValue }}</span>
+        <span class="text">{{ guarded }}</span>
         <span v-if="checkedProps.hint" class="hint" aria-hidden="true">{{
           checkedProps.hint
         }}</span>
@@ -302,7 +382,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         :aria-label="checkedProps.label ?? undefined"
         :placeholder="checkedProps.placeholder ?? undefined"
         :required="checkedProps.required ?? undefined"
-        :disabled="checkedProps.disabled || !internalEdit"
+        :disabled="guardedBinding"
         ref="input"
       >
     </div>

package/vue/UiEditorInsertTableGrid.vue

@@ -1,10 +1,11 @@
-<!-- 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,
+  provide,
   ref,
   useTemplateRef,
   watchSyncEffect,
@@ -12,10 +13,42 @@ import {
 import type { PropType, VNode } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    headerRow: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'headerrow' },
+      description: 'Whether table insertion initially includes a header row.',
+      default: false,
+    },
+    maxCols: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'maxcols' },
+      description: 'The most columns the grid offers (at most 10).',
+      default: 8,
+    },
+    maxRows: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'maxrows' },
+      description: 'The most rows the grid offers (at most 10).',
+      default: 8,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the grid is shown.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   headerRow: { type: null as unknown as PropType<boolean | null>, default: false },
   maxCols: { type: null as unknown as PropType<number | null>, default: 8 },
@@ -28,32 +61,24 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'headerRow',
-    undefined,
-    undefined,
   ) as boolean,
   maxCols: checkedProp<number>(
     props['maxCols'],
     { kind: 'terminal', name: 'integer' },
     false,
     'maxCols',
-    undefined,
-    undefined,
   ) as number,
   maxRows: checkedProp<number>(
     props['maxRows'],
     { kind: 'terminal', name: 'integer' },
     false,
     'maxRows',
-    undefined,
-    undefined,
   ) as number,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -137,6 +162,16 @@ const rows = ref(8)
 const cols = ref(8)
 const hint = ref('')
 const withHeaderRow = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(hint.value == null || typeof hint.value === 'string')) return guardedPrevious
+  return guardedPrevious = hint.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
@@ -220,13 +255,14 @@ function uniqueKeys<T>(
     data-component="ui-editor-insert-table-grid"
     v-bind="nativeAttrs($attrs)"
     :hidden="!checkedProps.open"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
     :data-max-cols="reflectedProp('maxCols', 'max-cols', checkedProps.maxCols, undefined, false)"
     :data-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
-    <p class="hint">{{ hint }}</p>
+    <p class="hint">{{ guarded }}</p>
     <div
       class="grid"
       role="group"

package/vue/UiEditorMentionMenu.vue

@@ -1,12 +1,96 @@
-<!-- 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'
 
 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 @ was typed, in viewport coordinates.',
+    },
+    items: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [
+            { name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'detail', type: { kind: 'terminal', name: 'string' }, optional: true },
+            { name: 'initials', type: { kind: 'terminal', name: 'string' }, optional: true },
+          ],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'items' },
+      description: 'The people the menu offers.',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description: 'Accessible name of the suggestion list.',
+      default: 'Mentions',
+    },
+    loading: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-busy' },
+      description: 'Whether a search is in progress.',
+      default: false,
+    },
+    loadingLabel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'loadinglabel' },
+      description: 'Status text shown while loading an empty result list.',
+      default: 'Searching…',
+    },
+    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 @.',
+      default: '',
+    },
+    selectedIndex: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'selectedindex' },
+      description:
+        'The zero-based index of the highlighted person, capped at the last one shown, and announced through aria-activedescendant. The menu does not handle arrow\n      keys itself: the editor sets this as the user moves, while hovering a person highlights them and reports a highlight event.',
+      default: 0,
+    },
+  },
+}
 const props = defineProps({
   anchorRect: {
     type: null as unknown as PropType<
@@ -71,8 +155,6 @@ const checkedProps = computed(() => ({
     },
     false,
     'anchorRect',
-    undefined,
-    undefined,
   ),
   items: checkedProp<
     readonly ({
@@ -98,56 +180,42 @@ const checkedProps = computed(() => ({
     },
     false,
     'items',
-    undefined,
-    undefined,
   ),
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   loading: checkedProp<boolean>(
     props['loading'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'loading',
-    undefined,
-    undefined,
   ) as boolean,
   loadingLabel: checkedProp<string>(
     props['loadingLabel'],
     { kind: 'terminal', name: 'string' },
     false,
     'loadingLabel',
-    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
@@ -199,6 +267,16 @@ const rows = ref<{ id: string; label: string; detail?: string; initials: string
 const searching = ref(false)
 const active = ref(0)
 const prefix = ref('ui-editor-mention-menu')
+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-mention-menu:visible', visible)
+provide('html-next:ui-editor-mention-menu:rows', rows)
+provide('html-next:ui-editor-mention-menu:searching', searching)
+provide('html-next:ui-editor-mention-menu:active', active)
+provide('html-next:ui-editor-mention-menu:prefix', prefix)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -247,7 +325,8 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     role="listbox"
     v-bind="nativeAttrs($attrs)"
     :aria-busy="checkedProps.loading ?? undefined"
-    :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/UiEditorMentionMenuItem.vue

@@ -1,11 +1,37 @@
-<!-- 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: {
+    detail: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'detail' },
+      description: 'Secondary text, such as a team or role.',
+      default: '',
+    },
+    initials: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'initials' },
+      description: 'Text fallback for the start slot when no avatar is supplied.',
+      default: '',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-value' },
+      description:
+        'Stable identifier reported by the containing Mention Menu when this person is chosen.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   detail: { type: null as unknown as PropType<string | null>, default: '' },
   initials: { type: null as unknown as PropType<string | null>, default: '' },
@@ -17,24 +43,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'detail',
-    undefined,
-    undefined,
   ) as string,
   initials: checkedProp<string>(
     props['initials'],
     { kind: 'terminal', name: 'string' },
     false,
     'initials',
-    undefined,
-    undefined,
   ) as string,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -99,6 +119,7 @@ if (
     role="option"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-detail="reflectedProp('detail', 'detail', checkedProps.detail, undefined, false)"
     :data-initials="reflectedProp('initials', 'initials', checkedProps.initials, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"