nuxt-ui-tools 0.1.0 → 0.1.2

package/dist/runtime/form/composables/use-field-options.js

@@ -1,9 +1,12 @@
 import { keepPreviousData, useQuery } from "@tanstack/vue-query";
-import { computed, onScopeDispose, ref, shallowRef, unref, watch } from "vue";
+import { computed, nextTick, onScopeDispose, ref, shallowRef, unref, watch } from "vue";
 import { createFormFieldInstance } from "../utils/field-instance.js";
 import {
+  formOptionKey,
+  mergeResolvedOptions,
   normalizeOptionItem,
-  normalizeOptionItems
+  normalizeOptionItems,
+  normalizeOptionSelection
 } from "../utils/options.js";
 import { isRecord, relativePathSegments } from "../utils/path.js";
 import { resolveFormText } from "../utils/text.js";
@@ -14,11 +17,15 @@ export function useFieldOptions(params) {
   const promiseFetching = ref(false);
   const promiseError = ref(null);
   const promiseRun = ref(0);
+  const refreshRun = ref(0);
+  const promiseResolution = shallowRef(null);
   const creating = ref(false);
-  const trackedOptionSource = computed(
-    () => resolveTrackedOptionSource(params.field(), params.callbackParams.value)
-  );
+  const trackedOptionSource = computed(() => {
+    void refreshRun.value;
+    return resolveTrackedOptionSource(params.field(), params.callbackParams.value);
+  });
   const resolvedSource = computed(() => trackedOptionSource.value.source);
+  const optionKeys = computed(() => resolveOptionKeys(params.field()));
   const contextResources = computed(() => {
     const ctx = params.callbackParams.value.ctx;
     if (!isRecord(ctx)) return [];
@@ -80,21 +87,26 @@ export function useFieldOptions(params) {
         promiseError.value = null;
         return;
       }
-      await resolvePromiseOptions(source);
+      const resolution = resolvePromiseOptions(source);
+      promiseResolution.value = resolution;
+      await resolution;
+      if (promiseResolution.value === resolution) promiseResolution.value = null;
     },
     { immediate: true }
   );
   const sourceItems = computed(() => {
     if (querySource.value) {
       const data = unref(optionQuery.data);
-      return normalizeOptionItems(Array.isArray(data) ? data : []);
+      return normalizeOptionItems(Array.isArray(data) ? data : [], optionKeys.value);
     }
-    return normalizeOptionItems(promiseOptions.value);
+    return normalizeOptionItems(promiseOptions.value, optionKeys.value);
   });
-  const items = computed(() => [
-    ...sourceItems.value,
-    ...createdOptions.value.map((option) => normalizeOptionItem(option))
-  ]);
+  const items = computed(
+    () => mergeResolvedOptions(
+      sourceItems.value,
+      normalizeOptionItems(createdOptions.value, optionKeys.value)
+    )
+  );
   const hasItems = computed(() => items.value.length > 0);
   const pending = computed(() => {
     if (contextPending.value && !hasItems.value) return true;
@@ -109,6 +121,7 @@ export function useFieldOptions(params) {
   const loading = computed(() => pending.value);
   const error = computed(() => {
     if (contextError.value !== null) return contextError.value;
+    if (trackedOptionSource.value.error !== null) return trackedOptionSource.value.error;
     if (querySource.value) return unref(optionQuery.error) ?? null;
     return promiseError.value;
   });
@@ -148,21 +161,26 @@ export function useFieldOptions(params) {
           previousOptions: previousOptions ?? []
         });
       }
-      clearInvalidValue(nextOptions);
     },
     { immediate: true }
   );
+  watch(items, (nextOptions) => clearInvalidValue(nextOptions), { immediate: true });
   async function refresh() {
-    const source = resolvedSource.value;
     await Promise.all(contextResources.value.map((resource) => resource.refresh()));
     if (querySource.value) {
       await optionQuery.refetch();
       return;
     }
-    if (isPromise(source)) await resolvePromiseOptions(source);
+    refreshRun.value += 1;
+    await nextTick();
+    await promiseResolution.value;
   }
   function add(option) {
+    const normalized = normalizeOptionItem(option, optionKeys.value);
+    if (items.value.some((item) => formOptionKey(item.value) === formOptionKey(normalized.value)))
+      return normalized;
     createdOptions.value = [...createdOptions.value, option];
+    return normalized;
   }
   async function create(label) {
     const createOption = optionConfig.value?.create;
@@ -176,30 +194,34 @@ export function useFieldOptions(params) {
         label
       });
       if (result === null || typeof result === "undefined") return null;
-      createdOptions.value = [...createdOptions.value, result];
+      const normalized = add(result);
+      if (selectCreatedOption.value) selectOption(normalized.value);
       await params.refreshFieldOptions(
         resolveRevalidatePaths(params.path(), createOption.revalidateFieldOptions ?? [])
       );
-      return normalizeOptionItem(result);
+      return normalized;
     } finally {
       creating.value = false;
     }
   }
+  function selectOption(value) {
+    if (Object.getOwnPropertyDescriptor(params.field(), "multiple")?.value !== true) {
+      params.api.value.value.set(value);
+      return;
+    }
+    const current = params.api.value.value.get();
+    const selected = Array.isArray(current) ? current.filter(isOptionValue) : [];
+    if (selected.some((item) => formOptionKey(item) === formOptionKey(value))) return;
+    params.api.value.value.set([...selected, value]);
+  }
   function clearInvalidValue(options) {
+    if (!optionConfig.value) return;
     if (pending.value) return;
     if (optionConfig.value?.clearOnInvalid === false) return;
     const current = params.api.value.value.get();
-    const validValues = options.map((option) => option.value);
-    if (Array.isArray(current)) {
-      const nextValue = current.filter(
-        (value) => isOptionValue(value) && validValues.includes(value)
-      );
-      if (nextValue.length !== current.length) params.api.value.value.set(nextValue);
-      return;
-    }
-    if (current === null || typeof current === "undefined") return;
-    if (isOptionValue(current) && validValues.includes(current)) return;
-    params.api.value.value.set(null);
+    const nextValue = normalizeOptionSelection(current, options);
+    if (!hasSelectionChanged(current, nextValue)) return;
+    params.api.value.value.set(nextValue);
   }
   async function resolvePromiseOptions(source) {
     const run = promiseRun.value + 1;
@@ -240,11 +262,28 @@ function resolveTrackedOptionSource(field, params) {
     ...params,
     ctx: trackContextAccess(params.ctx, contextKeys)
   };
+  try {
+    return {
+      source: resolveOptionSource(field, trackedParams),
+      contextKeys: [...contextKeys],
+      error: null
+    };
+  } catch (error) {
+    return { source: null, contextKeys: [...contextKeys], error };
+  }
+}
+function resolveOptionKeys(field) {
+  if (!createFormFieldInstance(field).type.isAny(["tree", "tree-select", "cascader"])) return {};
   return {
-    source: resolveOptionSource(field, trackedParams),
-    contextKeys: [...contextKeys]
+    value: resolveStringProperty(field, "valueKey"),
+    label: resolveStringProperty(field, "labelKey"),
+    children: resolveStringProperty(field, "childrenKey")
   };
 }
+function resolveStringProperty(value, key) {
+  const property = Object.getOwnPropertyDescriptor(value, key)?.value;
+  return typeof property === "string" ? property : void 0;
+}
 function trackContextAccess(ctx, contextKeys) {
   return new Proxy(ctx, {
     get(target, property, receiver) {
@@ -259,7 +298,7 @@ function isRuntimeQueryOptions(value) {
   return Array.isArray(queryKey);
 }
 function isPromise(value) {
-  return isRecord(value) && typeof Object.getOwnPropertyDescriptor(value, "then")?.value === "function";
+  return isRecord(value) && typeof value.then === "function";
 }
 function isAsyncResource(value) {
   if (!isRecord(value)) return false;
@@ -280,6 +319,11 @@ function resolveRevalidatePaths(path, revalidatePaths) {
     return revalidatePath;
   });
 }
+function hasSelectionChanged(current, next) {
+  if (!Array.isArray(current) || !Array.isArray(next)) return current !== next;
+  if (current.length !== next.length) return true;
+  return current.some((value, index) => value !== next[index]);
+}
 function isOptionValue(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
 }

package/dist/runtime/form/composables/use-form-field-chrome.d.ts

@@ -1,3 +1,6 @@
 import type { Ref } from 'vue';
+import type { FormObject } from '../types/index.js';
 export declare function provideFormFieldBare(bare: Readonly<Ref<boolean>>): void;
 export declare function useFormFieldBare(): Readonly<Ref<boolean, boolean>>;
+export declare function provideFormFieldControlAttrs(attrs: Readonly<Ref<FormObject>>): void;
+export declare function useFormFieldControlAttrs(): Readonly<Ref<import("../../shared/index.js").GenericObject, import("../../shared/index.js").GenericObject>>;

package/dist/runtime/form/composables/use-form-field-chrome.js

@@ -1,8 +1,17 @@
 import { inject, provide, shallowRef } from "vue";
 const formFieldBareKey = Symbol("form-field-bare");
+const formFieldControlAttrsKey = Symbol(
+  "form-field-control-attrs"
+);
 export function provideFormFieldBare(bare) {
   provide(formFieldBareKey, bare);
 }
 export function useFormFieldBare() {
   return inject(formFieldBareKey, shallowRef(false));
 }
+export function provideFormFieldControlAttrs(attrs) {
+  provide(formFieldControlAttrsKey, attrs);
+}
+export function useFormFieldControlAttrs() {
+  return inject(formFieldControlAttrsKey, shallowRef({}));
+}

package/dist/runtime/form/composables/use-form-runtime.js

@@ -2,7 +2,7 @@ import { computed, inject, provide, ref, watch } from "vue";
 import { createPublicFormApi } from "../utils/api.js";
 import { resolveFieldDependencies } from "../utils/dependencies.js";
 import { resolveFormLayoutConfig } from "../utils/layout.js";
-import { isRecord } from "../utils/path.js";
+import { isRecord, pathSegments } from "../utils/path.js";
 import {
   childParentPath,
   collectFormFieldPaths,
@@ -92,11 +92,21 @@ export function useFormRuntime(params) {
     getSchema: () => params.schema.value,
     getContext: () => context
   });
-  state.initialize();
+  let hasInitializedInput = typeof params.input?.value !== "undefined";
+  state.initialize(params.input?.value);
   if (params.input)
-    watch(params.input, (input) => state.syncInput(input, params.syncInput?.value ?? false), {
-      deep: true
-    });
+    watch(
+      params.input,
+      (input) => {
+        if (!hasInitializedInput && typeof input !== "undefined") {
+          hasInitializedInput = true;
+          state.initialize(input);
+          return;
+        }
+        state.syncInput(input, params.syncInput?.value ?? false);
+      },
+      { deep: true }
+    );
   watch(params.schema, (schema) => {
     currentStepIndex.value = 0;
     validation.clearError();
@@ -251,6 +261,8 @@ export function useFormRuntime(params) {
     ),
     validate,
     validateCurrentStep,
+    setError: (path, message) => validation.setError(pathSegments(path), message),
+    clearError: (path) => validation.clearError(path ? pathSegments(path) : void 0),
     focusRequest: focus.request,
     registerFieldElement: focus.registerField,
     focusField: focus.focusField,

package/dist/runtime/form/fields/array-list/component.vue

@@ -89,6 +89,9 @@ function applyVirtualFields(item, index) {
 function itemHeading(item, index) {
   return resolveFormText(props.field.headerTemplate?.(item, index, actionParams(index).deps)) ?? `${itemLabel.value} ${index + 1}`;
 }
+function selectTab(index) {
+  activeIndex.value = index;
+}
 function resolveAction(condition, index) {
   if (typeof condition === "boolean") return condition;
   if (typeof condition !== "function") return true;
@@ -237,7 +240,7 @@ function isFormObject(value) {
           :color="activeIndex === index ? 'primary' : 'neutral'"
           :variant="activeIndex === index ? 'solid' : 'ghost'"
           :class="mergeFormUiClass('shrink-0', formUi.ui.value.arrayList?.ui?.tab)"
-          @click="activeIndex = index"
+          @click="selectTab(index)"
         >
           {{ itemHeading(items[index] ?? {}, index) }}
         </UButton>

package/dist/runtime/form/fields/auto-complete/component.vue

@@ -2,12 +2,14 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UInputMenu from "@nuxt/ui/components/InputMenu.vue";
 import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
+const { t } = useUiToolsLocale();
 const { form, controlProps, disabled, handleBlur, options, placeholder } = useFieldControl(
   () => props.field,
   () => props.path
@@ -24,26 +26,29 @@ const model = computed({
 });
 const items = computed(() => [...options.items.value]);
 const createItem = computed(
-  () => options.creatable.value ? props.field.createItem ?? { position: "bottom", when: "empty" } : false
+  () => options.creatable.value && props.field.createItem ? props.field.createItem : false
 );
-const showFooterActions = computed(() => options.refreshable.value || options.creatable.value);
+const showExplicitCreate = computed(
+  () => options.creatable.value && !props.field.createItem
+);
+const showFooterActions = computed(() => options.refreshable.value || showExplicitCreate.value);
 const footerActionsClass = computed(
-  () => options.refreshable.value && options.creatable.value ? "sm:grid-cols-2" : "grid-cols-1"
+  () => options.refreshable.value && showExplicitCreate.value ? "sm:grid-cols-2" : "grid-cols-1"
+);
+const createActionLabel = computed(
+  () => options.createLabel.value ?? t("form.fields.options.create")
 );
-const createActionLabel = computed(() => options.createLabel.value ?? "Create option");
 async function handleCreate(label) {
-  const option = await options.create(label);
-  if (!option || !options.selectCreatedOption.value) return;
-  if (props.field.multiple) {
-    const current = Array.isArray(model.value) ? model.value.filter(isOptionValue) : [];
-    model.value = [...current, option.value];
-    return;
-  }
-  model.value = option.value;
+  await options.create(label);
 }
 async function handleCreateAction() {
   await handleCreate(searchTerm.value);
 }
+async function handleNativeCreate(label) {
+  const normalizedLabel = label.trim();
+  if (!normalizedLabel) return;
+  await handleCreate(normalizedLabel);
+}
 function isOptionValue(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
 }
@@ -65,11 +70,13 @@ function isOptionValue(value) {
       :loading="options.loading.value || options.creating.value"
       :clear="field.clearable === true"
       :create-item="createItem"
-      @create="handleCreate"
+      @create="handleNativeCreate"
       @blur="handleBlur"
     >
       <template #create-item-label="{ item }">
-        {{ options.creating.value ? "Creating..." : `Create "${item}"` }}
+        {{
+          options.creating.value ? t("form.fields.options.creating") : t("form.fields.options.createNamed", { label: item })
+        }}
       </template>
 
       <template #content-bottom>
@@ -88,10 +95,10 @@ function isOptionValue(value) {
             :loading="options.pending.value || options.fetching.value"
             @click.stop="options.refresh"
           >
-            Refresh
+            {{ t("form.fields.options.refresh") }}
           </UButton>
           <UButton
-            v-if="options.creatable.value"
+            v-if="showExplicitCreate"
             block
             size="xs"
             variant="ghost"

package/dist/runtime/form/fields/checkbox-card/component.vue

@@ -1,8 +1,9 @@
 <script setup>
-import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { formOptionKey } from "../../utils/options";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -11,22 +12,25 @@ const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
   () => props.field,
   () => props.path
 );
+const valueByKey = computed(
+  () => new Map(options.items.value.map((item) => [formOptionKey(item.value), item.value]))
+);
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return Array.isArray(value) ? value.filter(isOptionValue) : [];
+    return Array.isArray(value) ? value.filter(isOptionValue).map(formOptionKey) : [];
   },
-  set: (value) => form.setValue(props.path, value)
+  set: (value) => form.setValue(
+    props.path,
+    value.flatMap((key) => {
+      const optionValue = valueByKey.value.get(key);
+      return typeof optionValue === "undefined" ? [] : [optionValue];
+    })
+  )
 });
-const items = computed(() => [...options.items.value]);
-function toggleOption(value, checked) {
-  const current = model.value;
-  if (checked) {
-    model.value = current.includes(value) ? current : [...current, value];
-    return;
-  }
-  model.value = current.filter((item) => item !== value);
-}
+const items = computed(
+  () => options.items.value.map((item) => ({ ...item, value: formOptionKey(item.value) }))
+);
 function isOptionValue(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
 }
@@ -34,23 +38,18 @@ function isOptionValue(value) {
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <div
+    <UCheckboxGroup
+      v-model="model"
       v-bind="controlProps"
-      class="grid gap-2"
-      :class="field.orientation === 'horizontal' ? 'sm:flex sm:flex-wrap' : ''"
-    >
-      <UCheckbox
-        v-for="item in items"
-        :key="String(item.value)"
-        :model-value="model.includes(item.value)"
-        :label="item.label"
-        :description="item.description"
-        :disabled="disabled || item.disabled"
-        variant="card"
-        :indicator="field.indicator"
-        @update:model-value="toggleOption(item.value, $event === true)"
-        @blur="handleBlur"
-      />
-    </div>
+      :items="items"
+      value-key="value"
+      label-key="label"
+      description-key="description"
+      :orientation="field.orientation"
+      variant="card"
+      :indicator="field.indicator"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/checkbox-group/component.vue

@@ -1,8 +1,9 @@
 <script setup>
-import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { formOptionKey } from "../../utils/options";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -11,22 +12,25 @@ const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
   () => props.field,
   () => props.path
 );
+const valueByKey = computed(
+  () => new Map(options.items.value.map((item) => [formOptionKey(item.value), item.value]))
+);
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return Array.isArray(value) ? value.filter(isOptionValue) : [];
+    return Array.isArray(value) ? value.filter(isOptionValue).map(formOptionKey) : [];
   },
-  set: (value) => form.setValue(props.path, value)
+  set: (value) => form.setValue(
+    props.path,
+    value.flatMap((key) => {
+      const optionValue = valueByKey.value.get(key);
+      return typeof optionValue === "undefined" ? [] : [optionValue];
+    })
+  )
 });
-const items = computed(() => [...options.items.value]);
-function toggleOption(value, checked) {
-  const current = model.value;
-  if (checked) {
-    model.value = current.includes(value) ? current : [...current, value];
-    return;
-  }
-  model.value = current.filter((item) => item !== value);
-}
+const items = computed(
+  () => options.items.value.map((item) => ({ ...item, value: formOptionKey(item.value) }))
+);
 function isOptionValue(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
 }
@@ -34,23 +38,18 @@ function isOptionValue(value) {
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <div
+    <UCheckboxGroup
+      v-model="model"
       v-bind="controlProps"
-      class="grid gap-2"
-      :class="field.orientation === 'horizontal' ? 'sm:flex sm:flex-wrap' : ''"
-    >
-      <UCheckbox
-        v-for="item in items"
-        :key="String(item.value)"
-        :model-value="model.includes(item.value)"
-        :label="item.label"
-        :description="item.description"
-        :disabled="disabled || item.disabled"
-        :variant="field.variant === 'table' ? 'list' : field.variant ?? 'list'"
-        :indicator="field.indicator"
-        @update:model-value="toggleOption(item.value, $event === true)"
-        @blur="handleBlur"
-      />
-    </div>
+      :items="items"
+      value-key="value"
+      label-key="label"
+      description-key="description"
+      :orientation="field.orientation"
+      :variant="field.variant === 'table' ? 'list' : field.variant ?? 'list'"
+      :indicator="field.indicator"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/color-picker/component.vue

@@ -4,6 +4,7 @@ import UColorPicker from "@nuxt/ui/components/ColorPicker.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
 import UPopover from "@nuxt/ui/components/Popover.vue";
 import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { resolveFormText } from "../../utils/text";
@@ -11,6 +12,7 @@ const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
+const { t } = useUiToolsLocale();
 const { form, controlProps, disabled } = useFieldControl(
   () => props.field,
   () => props.path
@@ -53,7 +55,7 @@ function clearColor() {
           color="neutral"
           variant="outline"
           :disabled="disabled"
-          aria-label="Open color picker"
+          :aria-label="t('form.fields.color.open')"
         >
           <span
             class="size-5 rounded-sm border border-default"
@@ -85,7 +87,7 @@ function clearColor() {
                 variant="ghost"
                 size="xs"
                 :disabled="disabled"
-                aria-label="Clear color"
+                :aria-label="t('form.fields.color.clear')"
                 @mousedown.prevent
                 @click="clearColor"
               />

package/dist/runtime/form/fields/date-family/component.vue

@@ -1,13 +1,16 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
-import { computed } from "vue";
+import { computed, useId } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 const props = defineProps({
   field: { type: null, required: true },
   path: { type: Array, required: true }
 });
+const { t } = useUiToolsLocale();
+const rangeId = useId();
 const { form, controlProps, disabled, handleBlur, placeholder } = useFieldControl(
   () => props.field,
   () => props.path
@@ -66,24 +69,26 @@ async function clear() {
         <UInput
           v-model="startModel"
           v-bind="controlProps"
+          :id="`${rangeId}-start`"
           class="min-w-0 flex-1"
           :type="inputType"
           :min="min"
           :max="max"
           :disabled="disabled"
-          aria-label="Start"
+          :aria-label="t('form.fields.date.start')"
           @blur="handleBlur"
         />
         <span class="text-sm text-muted" aria-hidden="true">–</span>
         <UInput
           v-model="endModel"
           v-bind="controlProps"
+          :id="`${rangeId}-end`"
           class="min-w-0 flex-1"
           :type="inputType"
           :min="startModel || min"
           :max="max"
           :disabled="disabled"
-          aria-label="End"
+          :aria-label="t('form.fields.date.end')"
           @blur="handleBlur"
         />
       </template>
@@ -106,7 +111,7 @@ async function clear() {
         variant="ghost"
         size="xs"
         :disabled="disabled"
-        aria-label="Clear value"
+        :aria-label="t('form.fields.date.clear')"
         @click="clear"
       />
     </div>

package/dist/runtime/form/fields/hierarchy/SelectionCheckbox.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue: boolean | 'indeterminate';
+    label: string;
+    disabled?: boolean;
+    controlClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;