@threadlabs/looma 0.30.1 → 0.30.3

package/vue/UiEditorBlockActions.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -9,7 +9,18 @@ import {
   useComponentHost,
   useReflectedProp,
 } from './host'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiMenu from './UiMenu.vue'
 import UiMenuItem from './UiMenuItem.vue'
 
@@ -36,29 +47,45 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  for: { type: null as unknown as PropType<string | null>, default: '' },
-  placement: {
-    type: null as unknown as PropType<'bottom-start' | 'top-start' | null>,
-    default: 'bottom-start',
-  },
+  for: { type: null as unknown as PropType<string | null> },
+  placement: { type: null as unknown as PropType<'bottom-start' | 'top-start' | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = { for: '', placement: 'bottom-start' }
-const checkedProps = computed(() => ({
-  for: checkedProp<string>(
-    props['for'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'for',
-    acceptedProps,
-  ) as string,
-  placement: checkedProp<'bottom-start' | 'top-start'>(
-    props['placement'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'placement',
-    acceptedProps,
-  ) as 'bottom-start' | 'top-start',
-}))
+const inputTracking = vuePropInputs(
+  acceptedProps,
+  { for: '', placement: 'bottom-start' },
+  (name, value, source, values) => {
+    switch (name) {
+      case 'for':
+        return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+      case 'placement':
+        return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+      default:
+        return { ok: false }
+    }
+  },
+  () => {
+    void checkedProps.value
+  },
+)
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    for: propInputs.value<string | null>('for', props['for'], props[BINDING_INPUTS_PROP]) as string,
+    placement: propInputs.value<'bottom-start' | 'top-start' | null>(
+      'placement',
+      props['placement'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'bottom-start' | 'top-start',
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -93,6 +120,8 @@ useComponentHost(() => import('../components/ui-editor-block-actions/ui-editor-b
     definition: './components/ui-editor-block-actions/ui-editor-block-actions.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -119,6 +148,12 @@ useComponentHost(() => import('../components/ui-editor-block-actions/ui-editor-b
       aria-label="Block actions"
       :for="checkedProps.for"
       :placement="checkedProps.placement"
+      v-bind="{
+        [BINDING_INPUTS_PROP]: {
+          for: () => ({ value: checkedProps.for, status: inputStatus('for', true) }),
+          placement: () => ({ value: checkedProps.placement, status: inputStatus('placement', true) }),
+        },
+      }"
     ><UiMenuItem value="insert-below">Insert paragraph below</UiMenuItem>{{ ' ' }}<UiMenuItem
         value="duplicate"
       >Duplicate block</UiMenuItem>{{ ' ' }}<UiMenuItem value="delete"

package/vue/UiEditorChipEditor.d.ts

@@ -1,12 +1,14 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     color: {
         type: PropType<"neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null>;
-        default: string;
     };
     label: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     done: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
@@ -21,11 +23,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     color: {
         type: PropType<"neutral" | "blue" | "green" | "yellow" | "red" | "purple" | null>;
-        default: string;
     };
     label: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onDone?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
@@ -37,9 +40,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }>) => any) | undefined;
     "onUpdate:color"?: ((value: string) => any) | undefined;
     "onUpdate:label"?: ((value: string) => any) | undefined;
-}>, {
-    label: string | null;
-    color: "blue" | "green" | "purple" | "red" | "yellow" | "neutral" | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorChipEditor.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -9,7 +9,18 @@ import {
   useComponentHost,
   useReflectedProp,
 } from './host'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiInput from './UiInput.vue'
 import UiRadioGroup from './UiRadioGroup.vue'
 import UiStack from './UiStack.vue'
@@ -41,27 +52,49 @@ const props = defineProps({
     type: null as unknown as PropType<
       'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | null
     >,
-    default: 'neutral',
   },
-  label: { type: null as unknown as PropType<string | null>, default: '' },
+  label: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = { color: 'neutral', label: '' }
-const checkedProps = computed(() => ({
-  color: checkedProp<'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple'>(
-    props['color'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'color',
-    acceptedProps,
-  ) as 'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple',
-  label: checkedProp<string>(
-    props['label'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'label',
-    acceptedProps,
-  ) as string,
-}))
+const inputTracking = vuePropInputs(
+  acceptedProps,
+  { color: 'neutral', label: '' },
+  (name, value, source, values) => {
+    switch (name) {
+      case 'color':
+        return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+      case 'label':
+        return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+      default:
+        return { ok: false }
+    }
+  },
+  () => {
+    void checkedProps.value
+  },
+)
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    color: propInputs.value<'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | null>(
+      'color',
+      props['color'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'neutral' | 'blue' | 'green' | 'yellow' | 'red' | 'purple',
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -119,6 +152,8 @@ useComponentHost(() => import('../components/ui-editor-chip-editor/ui-editor-chi
     definition: './components/ui-editor-chip-editor/ui-editor-chip-editor.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -149,10 +184,20 @@ useComponentHost(() => import('../components/ui-editor-chip-editor/ui-editor-chi
         placeholder="Set a label"
         aria-label="Chip text"
         :value="checkedProps.label"
+        v-bind="{
+          [BINDING_INPUTS_PROP]: {
+            value: () => ({ value: checkedProps.label, status: inputStatus('label', true) }),
+          },
+        }"
       />{{ ' ' }}<UiRadioGroup
         label="Chip color"
         label-visibility="sr-only"
         :value="checkedProps.color"
+        v-bind="{
+          [BINDING_INPUTS_PROP]: {
+            value: () => ({ value: checkedProps.color, status: inputStatus('color', true) }),
+          },
+        }"
       ><UiSwatch tone="neutral" />{{ ' ' }}<UiSwatch tone="blue" />{{ ' ' }}<UiSwatch
           tone="green"
         />{{ ' ' }}<UiSwatch tone="yellow" />{{ ' ' }}<UiSwatch tone="red" />{{ ' ' }}<UiSwatch

package/vue/UiEditorCodeLanguage.d.ts

@@ -1,15 +1,17 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     languages: {
         type: PropType<readonly ({
             readonly value: string;
             readonly label: string;
         })[] | null>;
-        default: null;
     };
     value: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string) => any;
@@ -22,23 +24,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             readonly value: string;
             readonly label: string;
         })[] | null>;
-        default: null;
     };
     value: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     "onUpdate:value"?: ((value: string) => any) | undefined;
     onLanguage?: ((event: CustomEvent<{
         readonly value: string;
     }>) => any) | undefined;
-}>, {
-    value: string | null;
-    languages: readonly {
-        readonly value: string;
-        readonly label: string;
-    }[] | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorCodeLanguage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -11,7 +11,18 @@ import {
   useComponentHost,
   useReflectedProp,
 } from './host'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiCombobox from './UiCombobox.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -50,38 +61,63 @@ const props = defineProps({
     type: null as unknown as PropType<
       readonly ({ readonly value: string; readonly label: string })[] | null
     >,
-    default: null,
   },
-  value: { type: null as unknown as PropType<string | null>, default: 'auto' },
+  value: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = { languages: null, value: 'auto' }
-const checkedProps = computed(() => ({
-  languages: checkedProp<readonly ({ readonly value: string; readonly label: string })[]>(
-    props['languages'],
-    {
-      kind: 'list',
-      item: {
-        kind: 'object',
-        fields: [{ name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false }, {
-          name: 'label',
-          type: { kind: 'terminal', name: 'string' },
-          optional: false,
-        }],
-        open: false,
-      },
-    },
-    false,
-    'languages',
-    acceptedProps,
-  ),
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    acceptedProps,
-  ) as string,
-}))
+const inputTracking = vuePropInputs(
+  acceptedProps,
+  { value: 'auto' },
+  (name, value, source, values) => {
+    switch (name) {
+      case 'languages':
+        return checkPropInput(
+          value,
+          {
+            kind: 'list',
+            item: {
+              kind: 'object',
+              fields: [{
+                name: 'value',
+                type: { kind: 'terminal', name: 'string' },
+                optional: false,
+              }, { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false }],
+              open: false,
+            },
+          },
+          true,
+          true,
+        )
+      case 'value':
+        return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+      default:
+        return { ok: false }
+    }
+  },
+  () => {
+    void checkedProps.value
+  },
+)
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    languages: propInputs.value<
+      readonly ({ readonly value: string; readonly label: string })[] | null
+    >('languages', props['languages'], props[BINDING_INPUTS_PROP]),
+    value: propInputs.value<string | null>(
+      'value',
+      props['value'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -116,6 +152,8 @@ useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-c
     definition: './components/ui-editor-code-language/ui-editor-code-language.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -145,6 +183,11 @@ useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-c
       :disclosure="true"
       filter="label"
       :value="checkedProps.value"
+      v-bind="{
+        [BINDING_INPUTS_PROP]: {
+          value: () => ({ value: checkedProps.value, status: inputStatus('value', true) }),
+        },
+      }"
     ><KeyedBoundary><option
           v-for="language in uniqueKeys(checkedProps.languages ?? [], (language, index, loop) => language.value)"
           :key="language.value"

package/vue/UiEditorImageToolbar.d.ts

@@ -1,16 +1,17 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     alt: {
         type: PropType<string | null>;
-        default: string;
     };
     placement: {
         type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
-        default: string;
     };
     target: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
@@ -25,15 +26,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     alt: {
         type: PropType<string | null>;
-        default: string;
     };
     placement: {
         type: PropType<"block" | "center" | "wrap-left" | "wrap-right" | null>;
-        default: string;
     };
     target: {
         type: PropType<string | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onDelete?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
@@ -45,10 +46,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onDescribe?: ((event: CustomEvent<{
         readonly alt: string;
     }>) => any) | undefined;
-}>, {
-    alt: string | null;
-    target: string | null;
-    placement: "center" | "block" | "wrap-left" | "wrap-right" | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;