@threadlabs/looma 0.30.2 → 0.30.3

package/vue/UiEditorLinkForm.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, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -15,7 +15,22 @@ import {
   useReflectedProp,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  evaluateInput,
+  type InputBindings,
+  inputComputed,
+  inputDefault,
+  inputRead,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiCheckbox from './UiCheckbox.vue'
 import UiFormField from './UiFormField.vue'
 import UiIcon from './UiIcon.vue'
@@ -133,23 +148,28 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  error: { type: null as unknown as PropType<string | null>, default: '' },
-  existing: { type: null as unknown as PropType<boolean | null>, default: false },
-  mode: { type: null as unknown as PropType<'url' | 'target' | null>, default: 'url' },
-  newTab: { type: null as unknown as PropType<boolean | null>, default: false },
-  placeholder: { type: null as unknown as PropType<string | null>, default: 'https://example.com' },
+  error: { type: null as unknown as PropType<string | null> },
+  existing: { type: null as unknown as PropType<boolean | null> },
+  mode: { type: null as unknown as PropType<'url' | 'target' | null> },
+  newTab: { type: null as unknown as PropType<boolean | null> },
+  placeholder: { type: null as unknown as PropType<string | null> },
   results: {
     type: null as unknown as PropType<
-      readonly ({ readonly id: string; readonly label: string; readonly detail?: string })[] | null
+      | readonly ({
+        readonly id: string
+        readonly label: string
+        readonly detail?: string | null
+      })[]
+      | null
     >,
-    default: null,
   },
-  searchable: { type: null as unknown as PropType<boolean | null>, default: false },
-  selected: { type: null as unknown as PropType<string | null>, default: '' },
-  status: { type: null as unknown as PropType<string | null>, default: '' },
-  text: { type: null as unknown as PropType<string | null>, default: '' },
-  textEditable: { type: null as unknown as PropType<boolean | null>, default: false },
-  value: { type: null as unknown as PropType<string | null>, default: '' },
+  searchable: { type: null as unknown as PropType<boolean | null> },
+  selected: { type: null as unknown as PropType<string | null> },
+  status: { type: null as unknown as PropType<string | null> },
+  text: { type: null as unknown as PropType<string | null> },
+  textEditable: { type: null as unknown as PropType<boolean | null> },
+  value: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   error: '',
@@ -165,105 +185,140 @@ const acceptedProps: Record<string, unknown> = {
   textEditable: false,
   value: '',
 }
-const checkedProps = computed(() => ({
-  error: checkedProp<string>(
-    props['error'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'error',
-    acceptedProps,
-  ) as string,
-  existing: checkedProp<boolean>(
-    props['existing'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'existing',
-    acceptedProps,
-  ) as boolean,
-  mode: checkedProp<'url' | 'target'>(
-    props['mode'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'mode',
-    acceptedProps,
-  ) as 'url' | 'target',
-  newTab: checkedProp<boolean>(
-    props['newTab'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'newTab',
-    acceptedProps,
-  ) as boolean,
-  placeholder: checkedProp<string>(
-    props['placeholder'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'placeholder',
-    acceptedProps,
-  ) as string,
-  results: checkedProp<
-    readonly ({ readonly id: string; readonly label: string; readonly detail?: string })[]
-  >(
-    props['results'],
-    {
-      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 }],
-        open: false,
-      },
-    },
-    false,
-    'results',
-    acceptedProps,
-  ),
-  searchable: checkedProp<boolean>(
-    props['searchable'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'searchable',
-    acceptedProps,
-  ) as boolean,
-  selected: checkedProp<string>(
-    props['selected'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'selected',
-    acceptedProps,
-  ) as string,
-  status: checkedProp<string>(
-    props['status'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'status',
-    acceptedProps,
-  ) as string,
-  text: checkedProp<string>(
-    props['text'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'text',
-    acceptedProps,
-  ) as string,
-  textEditable: checkedProp<boolean>(
-    props['textEditable'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'textEditable',
-    acceptedProps,
-  ) as boolean,
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    acceptedProps,
-  ) as string,
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  error: '',
+  existing: false,
+  mode: 'url',
+  newTab: false,
+  placeholder: 'https://example.com',
+  searchable: false,
+  selected: '',
+  status: '',
+  text: '',
+  textEditable: false,
+  value: '',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'error':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'existing':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'mode':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'newTab':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'placeholder':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'results':
+      return checkPropInput(
+        value,
+        {
+          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 }],
+            open: false,
+          },
+        },
+        true,
+        true,
+      )
+    case 'searchable':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'selected':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'status':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'text':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'textEditable':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, 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 ({
+    error: propInputs.value<string | null>(
+      'error',
+      props['error'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    existing: propInputs.value<boolean | null>(
+      'existing',
+      props['existing'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    mode: propInputs.value<'url' | 'target' | null>(
+      'mode',
+      props['mode'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'url' | 'target',
+    newTab: propInputs.value<boolean | null>(
+      'newTab',
+      props['newTab'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    placeholder: propInputs.value<string | null>(
+      'placeholder',
+      props['placeholder'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    results: propInputs.value<
+      | readonly ({
+        readonly id: string
+        readonly label: string
+        readonly detail?: string | null
+      })[]
+      | null
+    >('results', props['results'], props[BINDING_INPUTS_PROP]),
+    searchable: propInputs.value<boolean | null>(
+      'searchable',
+      props['searchable'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    selected: propInputs.value<string | null>(
+      'selected',
+      props['selected'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    status: propInputs.value<string | null>(
+      'status',
+      props['status'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    text: propInputs.value<string | null>(
+      'text',
+      props['text'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    textEditable: propInputs.value<boolean | null>(
+      'textEditable',
+      props['textEditable'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    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
@@ -286,35 +341,47 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 const base = ref('ui-editor-link-form')
 let headingPrevious: any = null
-const heading = cycleCheckedComputed(() => {
-  const next: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'Edit link', false: 'Add link' },
-      concat(checkedProps.value.existing),
-    )
-  if (next === Symbol.for('html-next.invalid-result')) {
-    return headingPrevious
-  }
-  return headingPrevious = next
-})
+const heading: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () => {
+    return ((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'Edit link', false: 'Add link' },
+        concat(inputRead(checkedProps.value.existing, propInputs.status('existing'))),
+      ) as any
+  },
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+  next =>
+    (next as unknown) === Symbol.for('html-next.invalid-result')
+      ? headingPrevious
+      : (headingPrevious = next),
+)
 let fieldLabelPrevious: any = null
-const fieldLabel = cycleCheckedComputed(() => {
-  const next: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'Link destination', false: 'URL' },
-      concat(checkedProps.value.searchable),
-    )
-  if (next === Symbol.for('html-next.invalid-result')) {
-    return fieldLabelPrevious
-  }
-  return fieldLabelPrevious = next
-})
+const fieldLabel: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () => {
+    return ((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'Link destination', false: 'URL' },
+        concat(inputRead(checkedProps.value.searchable, propInputs.status('searchable'))),
+      ) as any
+  },
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+  next =>
+    (next as unknown) === Symbol.for('html-next.invalid-result')
+      ? fieldLabelPrevious
+      : (fieldLabelPrevious = next),
+)
 let guardedPrevious: any = null
 const guarded = computed(() => {
   const candidate: any = concat(base.value, '-destination')
@@ -323,17 +390,8 @@ const guarded = computed(() => {
 })
 let guardedBindingPrevious: any = null
 const guardedBinding = computed(() => {
-  const candidate: any = ((objectValue: any, indexValue: any) =>
-    objectValue === Symbol.for('html-next.invalid-result')
-      || indexValue === Symbol.for('html-next.invalid-result')
-      ? Symbol.for('html-next.invalid-result')
-      : objectValue[indexValue])(
-      { true: 'search', false: 'link' },
-      concat(checkedProps.value.mode === 'target'),
-    )
-  if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBindingPrevious
-  }
+  const candidate: any = concat(base.value, '-destination')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBindingPrevious
   return guardedBindingPrevious = candidate
 })
 let guardedBinding2Previous: any = null
@@ -344,7 +402,7 @@ const guardedBinding2 = computed(() => {
 })
 let guardedBinding3Previous: any = null
 const guardedBinding3 = computed(() => {
-  const candidate: any = concat(base.value, '-destination')
+  const candidate: any = concat(base.value, '-text')
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
   return guardedBinding3Previous = candidate
 })
@@ -354,12 +412,6 @@ const guardedBinding4 = computed(() => {
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding4Previous
   return guardedBinding4Previous = candidate
 })
-let guardedBinding5Previous: any = null
-const guardedBinding5 = computed(() => {
-  const candidate: any = concat(base.value, '-text')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
-  return guardedBinding5Previous = candidate
-})
 provide('html-next:ui-editor-link-form:base', base)
 checkHydratedRoot('form', 'ui-editor-link-form')
 
@@ -409,11 +461,14 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
       ({ base: { kind: 'terminal', name: 'string' } } as Record<string, any>)[name],
       keys,
     ),
+  initials: { base: 'ui-editor-link-form' },
   controllerSource: {
     specifier: '../components/ui-editor-link-form/ui-editor-link-form.js',
     definition: './components/ui-editor-link-form/ui-editor-link-form.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
@@ -439,6 +494,7 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { base },
   computed: { heading, fieldLabel },
+  availability: { heading: () => heading.status(), fieldLabel: () => fieldLabel.status() },
 })
 </script>
 
@@ -462,89 +518,141 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
     :data-ui-editor-link-form-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     ref="root"
   >
-    <UiStack gap="s"><UiText as="h3" size="sm" weight="semibold">{{ text(heading) }}</UiText>{{
-        ' '
-      }}<UiStack gap="s"><UiFormField :invalid="checkedProps.error !== ''"><UiInputGroup
-            v-if="checkedProps.searchable"
-            prefix-kind="icon"
-          ><UiInput
-              data-link-destination=""
-              data-link-search=""
-              type="text"
-              role="searchbox"
-              autocomplete="off"
-              :id="guardedBinding2"
-              :placeholder="checkedProps.placeholder"
-              :value="checkedProps.value"
-            />
-            <template #prefix><UiIcon slot="prefix" :name="guardedBinding" /></template>
-            <template #action><UiIconButton
-                v-if="checkedProps.value !== ''"
-                slot="action"
-                label="Clear search"
-                variant="ghost"
+    <UiStack gap="s"><UiText as="h3" size="sm" weight="semibold">{{
+        text(heading.get())
+      }}</UiText>{{ ' ' }}<UiStack gap="s"><template
+          v-for="boundInput in [evaluateInput(
+            () => (inputRead(checkedProps.error, inputStatus('error', true)) !== '') as any,
+            READY_INPUT,
+          )]"
+        ><UiFormField
+            :invalid="boundInput.value"
+            v-bind="{ [BINDING_INPUTS_PROP]: { invalid: () => boundInput } }"
+          ><UiInputGroup v-if="checkedProps.searchable" prefix-kind="icon"><UiInput
+                data-link-destination=""
+                data-link-search=""
+                type="text"
+                role="searchbox"
+                autocomplete="off"
+                :id="guardedBinding"
+                :placeholder="checkedProps.placeholder"
+                :value="checkedProps.value"
+                v-bind="{
+                  [BINDING_INPUTS_PROP]: {
+                    value: () => ({ value: checkedProps.value, status: inputStatus('value', true) }),
+                  },
+                }"
+              />
+              <template #prefix><template
+                  v-for="boundInputSnapshot in [evaluateInput(
+                    () =>
+                      (((objectValue: any, indexValue: any) =>
+                        objectValue === Symbol.for('html-next.invalid-result')
+                          || indexValue === Symbol.for('html-next.invalid-result')
+                          ? Symbol.for('html-next.invalid-result')
+                          : objectValue[indexValue])(
+                          { true: 'search', false: 'link' },
+                          concat(inputRead(checkedProps.mode, inputStatus('mode', true)) === 'target'),
+                        )) as any,
+                    READY_INPUT,
+                  )]"
+                ><UiIcon
+                    slot="prefix"
+                    :name="boundInputSnapshot.value"
+                    v-bind="{ [BINDING_INPUTS_PROP]: { name: () => boundInputSnapshot } }"
+                  /></template></template>
+              <template #action><UiIconButton
+                  v-if="checkedProps.value !== ''"
+                  slot="action"
+                  label="Clear search"
+                  variant="ghost"
+                  size="sm"
+                  data-link-clear=""
+                ><UiIcon name="x" /></UiIconButton></template></UiInputGroup>{{ ' ' }}<template
+              v-if="!checkedProps.searchable"
+            >{{ ' ' }}<UiInput
+                data-link-destination=""
+                type="text"
+                inputmode="url"
                 size="sm"
-                data-link-clear=""
-              ><UiIcon name="x" /></UiIconButton></template></UiInputGroup>{{ ' ' }}<template
-            v-if="!checkedProps.searchable"
-          >{{ ' ' }}<UiInput
-              data-link-destination=""
-              type="text"
-              inputmode="url"
-              size="sm"
-              :id="guardedBinding3"
-              :placeholder="checkedProps.placeholder"
-              :value="checkedProps.value"
-            />{{ ' ' }}</template>
-          <template #label><label slot="label" :for="guarded">{{
-              text(fieldLabel)
-            }}</label></template></UiFormField>{{ ' ' }}<UiScrollArea
+                :id="guardedBinding2"
+                :placeholder="checkedProps.placeholder"
+                :value="checkedProps.value"
+                v-bind="{
+                  [BINDING_INPUTS_PROP]: {
+                    value: () => ({ value: checkedProps.value, status: inputStatus('value', true) }),
+                  },
+                }"
+              />{{ ' ' }}</template>
+            <template #label><label slot="label" :for="guarded">{{
+                text(fieldLabel.get())
+              }}</label></template></UiFormField></template>{{ ' ' }}<UiScrollArea
           v-if="checkedProps.mode === 'target'"
           size="sm"
           aria-label="Destination search results"
         ><UiText v-if="checkedProps.status !== ''" size="sm" tone="secondary" role="status">{{
             checkedProps.status
-          }}</UiText>{{ ' ' }}<KeyedBoundary><UiSearchResultRow
+          }}</UiText>{{ ' ' }}<KeyedBoundary><template
               v-for="result in uniqueKeys(checkedProps.results ?? [], (result, index, loop) => result.id)"
               :key="result.id"
-              density="compact"
-              data-link-result=""
-              :selected="result.id === checkedProps.selected"
-              :data-link-id="result.id"
-            ><template #leading><UiIcon slot="leading" name="file-text" /></template>
-              <template #title><UiText
-                  slot="title"
-                  as="strong"
-                  size="sm"
-                  weight="medium"
-                  :truncate="true"
-                  :title="result.label"
-                >{{ result.label }}</UiText></template>
-              <template #meta><UiText
-                  v-if="result.detail"
-                  slot="meta"
-                  as="span"
-                  size="xs"
-                  tone="secondary"
-                  :truncate="true"
-                  :title="result.detail"
-                >{{ result.detail }}</UiText></template>
-              <template #trailing><UiIcon
-                  v-if="result.id === checkedProps.selected"
-                  slot="trailing"
-                  name="check"
-                /></template></UiSearchResultRow></KeyedBoundary></UiScrollArea>{{ ' ' }}<template
-          v-if="checkedProps.mode === 'url'"
-        >{{ ' ' }}<UiCheckbox size="sm" data-link-new-tab="" :checked="checkedProps.newTab"
+            ><template
+                v-for="boundInputSnapshot2 in [evaluateInput(
+                  () => (result.id === inputRead(checkedProps.selected, inputStatus('selected', true))) as any,
+                  READY_INPUT,
+                )]"
+              ><UiSearchResultRow
+                  density="compact"
+                  data-link-result=""
+                  :selected="boundInputSnapshot2.value"
+                  :data-link-id="result.id"
+                  v-bind="{ [BINDING_INPUTS_PROP]: { selected: () => boundInputSnapshot2 } }"
+                ><template #leading><UiIcon slot="leading" name="file-text" /></template>
+                  <template #title><UiText
+                      slot="title"
+                      as="strong"
+                      size="sm"
+                      weight="medium"
+                      :truncate="true"
+                      :title="result.label"
+                    >{{ result.label }}</UiText></template>
+                  <template #meta><UiText
+                      v-if="result.detail"
+                      slot="meta"
+                      as="span"
+                      size="xs"
+                      tone="secondary"
+                      :truncate="true"
+                      :title="result.detail"
+                    >{{ result.detail }}</UiText></template>
+                  <template #trailing><UiIcon
+                      v-if="result.id === checkedProps.selected"
+                      slot="trailing"
+                      name="check"
+                    /></template></UiSearchResultRow></template></template></KeyedBoundary></UiScrollArea>{{
+          ' '
+        }}<template v-if="checkedProps.mode === 'url'">{{ ' ' }}<UiCheckbox
+            size="sm"
+            data-link-new-tab=""
+            :checked="checkedProps.newTab"
+            v-bind="{
+              [BINDING_INPUTS_PROP]: {
+                checked: () => ({ value: checkedProps.newTab, status: inputStatus('newTab', true) }),
+              },
+            }"
           >Open in new tab</UiCheckbox>{{ ' ' }}</template></UiStack>{{ ' ' }}<template
         v-if="checkedProps.textEditable"
       >{{ ' ' }}<UiFormField><UiInput
             data-link-text=""
             size="sm"
-            :id="guardedBinding5"
+            :id="guardedBinding4"
             :value="checkedProps.text"
+            v-bind="{
+              [BINDING_INPUTS_PROP]: {
+                value: () => ({ value: checkedProps.text, status: inputStatus('text', true) }),
+              },
+            }"
           />
-          <template #label><label slot="label" :for="guardedBinding4"
+          <template #label><label slot="label" :for="guardedBinding3"
             >Text</label></template></UiFormField>{{ ' ' }}</template>{{ ' ' }}<UiText
         v-if="checkedProps.error !== ''"
         size="sm"