nuxt-ui-tools 0.1.0 → 0.1.2

package/dist/module.d.mts

@@ -1,8 +1,12 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions as ModuleOptions$1 } from 'nuxt-viewport';
 import { FormUiConfig } from '../dist/runtime/form/types/index.js';
 import { DataListUiConfig } from '../dist/runtime/table/types/index.js';
 
 declare module '@nuxt/schema' {
+    interface NuxtOptions {
+        viewport: ModuleOptions$1 | false;
+    }
     interface AppConfigInput {
         nuxtUiTools?: {
             dataList?: DataListUiConfig;

package/dist/module.json

@@ -5,7 +5,7 @@
   "compatibility": {
     "nuxt": ">=4.4.0"
   },
-  "version": "0.1.0",
+  "version": "0.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,3 +1,5 @@
+import { createRequire } from 'node:module';
+import { join, dirname } from 'node:path';
 import { addComponent, addImports, logger, addTemplate, defineNuxtModule, createResolver, installModule } from '@nuxt/kit';
 import { breakpointsTailwind } from '@vueuse/core';
 
@@ -154,16 +156,9 @@ const viewportDefaults = {
   fallbackBreakpoint: "lg",
   feature: "minWidth"
 };
-const optimizeDepsInclude = [
-  "@tanstack/vue-query",
-  "@tanstack/vue-virtual",
-  "@vueuse/core",
-  "@internationalized/date",
-  "motion-v",
-  "tailwind-merge",
-  "vue-draggable-plus"
-];
 const publicRuntimeDomains = ["form", "i18n", "query-state", "shared", "table"];
+const require$1 = createRequire(import.meta.url);
+const cookieEsmPath = join(dirname(require$1.resolve("cookiejs/package.json")), "dist/cookie.esm.js");
 const module$1 = defineNuxtModule({
   defaults: {
     prefix: "Ui",
@@ -187,13 +182,31 @@ const module$1 = defineNuxtModule({
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    const consumerRequire = createRequire(join(nuxt.options.rootDir, "package.json"));
+    const nuxtUiComponentsDir = dirname(consumerRequire.resolve("@nuxt/ui/components/Button.vue"));
+    const nuxtUiRuntimeDir = dirname(nuxtUiComponentsDir);
+    const nuxtUiRequire = createRequire(join(nuxtUiRuntimeDir, "package.json"));
+    const internationalizedDateDir = dirname(
+      dirname(nuxtUiRequire.resolve("@internationalized/date"))
+    );
     for (const domain of publicRuntimeDomains)
       nuxt.options.alias[`#ui-tools/${domain}`] = resolve(`./runtime/${domain}`);
+    nuxt.options.alias["@nuxt/ui/components"] ??= nuxtUiComponentsDir;
+    nuxt.options.alias["@nuxt/ui/composables"] ??= join(nuxtUiRuntimeDir, "composables");
+    nuxt.options.alias["@nuxt/ui/runtime"] ??= nuxtUiRuntimeDir;
+    nuxt.options.alias["@internationalized/date"] ??= internationalizedDateDir;
+    nuxt.options.typescript.tsConfig ??= {};
+    nuxt.options.typescript.sharedTsConfig ??= {};
+    nuxt.options.typescript.nodeTsConfig ??= {};
+    setupJsxCompilerOptions(nuxt.options.typescript.tsConfig);
+    setupJsxCompilerOptions(nuxt.options.typescript.sharedTsConfig);
+    setupJsxCompilerOptions(nuxt.options.typescript.nodeTsConfig);
     nuxt.options.vite ??= {};
-    nuxt.options.vite.optimizeDeps ??= {};
-    nuxt.options.vite.optimizeDeps.include = mergeOptimizeDepsInclude(
-      nuxt.options.vite.optimizeDeps.include
-    );
+    nuxt.options.vite.resolve ??= {};
+    nuxt.options.vite.resolve.dedupe = [
+      .../* @__PURE__ */ new Set([...nuxt.options.vite.resolve.dedupe ?? [], "@nuxt/ui"])
+    ];
+    nuxt.options.alias.cookiejs ??= cookieEsmPath;
     const viewportOptions = normalizeViewportOptions(nuxt.options.viewport);
     nuxt.options.viewport = viewportOptions;
     await installModule("nuxt-viewport", viewportOptions);
@@ -221,8 +234,10 @@ function normalizeViewportOptions(viewportOptions) {
   if (viewportOptions === false) return mergeViewportOptions(void 0);
   return mergeViewportOptions(viewportOptions);
 }
-function mergeOptimizeDepsInclude(current) {
-  return [.../* @__PURE__ */ new Set([...current ?? [], ...optimizeDepsInclude])];
+function setupJsxCompilerOptions(config) {
+  config.compilerOptions ??= {};
+  config.compilerOptions.jsx = "preserve";
+  config.compilerOptions.jsxImportSource = "vue";
 }
 
 export { module$1 as default };

package/dist/runtime/form/components/actions/FormActions.d.vue.ts

@@ -5,10 +5,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;
-    submit: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
-    onSubmit?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/form/components/actions/FormActions.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   actions: { type: Array, required: true }
 });
 const formUi = useFormUi();
-const emit = defineEmits(["submit", "cancel"]);
+const emit = defineEmits(["cancel"]);
 const actionContext = computed(() => ({
   currentStep: props.runtime.currentStepIndex.value,
   api: createPublicFormApi(props.runtime),
@@ -30,10 +30,7 @@ const actionsRight = computed(
   () => visibleActions.value.filter((action) => resolveActionSlot(action) !== "left")
 );
 async function runAction(action) {
-  if (isBuiltInAction(action, "submit")) {
-    emit("submit");
-    return;
-  }
+  if (isBuiltInAction(action, "submit")) return;
   if (isBuiltInAction(action, "next")) {
     await props.runtime.nextStep();
     return;
@@ -93,7 +90,7 @@ function resolveActionVariant(action) {
 }
 function actionButtonClass(action) {
   return mergeFormUiClass(
-    resolveActionWidth(action) === "fill" ? "flex-1" : void 0,
+    resolveActionWidth(action) === "fill" ? "flex-1 justify-center" : void 0,
     formUi.ui.value.actions?.ui?.button,
     action.class
   );
@@ -127,7 +124,7 @@ function isBuiltInActionKey(value) {
       <UButton
         v-for="(action, index) in actionsLeft"
         :key="action.key ?? index"
-        type="button"
+        :type="isBuiltInAction(action, 'submit') ? 'submit' : 'button'"
         :to="resolveActionLink(action)"
         :label="resolveActionLabel(action)"
         :icon="action.icon === false ? void 0 : action.icon"
@@ -154,7 +151,7 @@ function isBuiltInActionKey(value) {
       <UButton
         v-for="(action, index) in actionsRight"
         :key="action.key ?? index"
-        type="button"
+        :type="isBuiltInAction(action, 'submit') ? 'submit' : 'button'"
         :to="resolveActionLink(action)"
         :label="resolveActionLabel(action)"
         :icon="action.icon === false ? void 0 : action.icon"

package/dist/runtime/form/components/actions/FormActions.vue.d.ts

@@ -5,10 +5,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;
-    submit: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
-    onSubmit?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/form/components/layout/DrawerLayout.vue

@@ -17,6 +17,10 @@ const contentStyle = computed(() => ({
   height: cssSize(props.config?.height),
   resize: props.config?.resizable ? ["top", "bottom"].includes(direction.value) ? "vertical" : "horizontal" : void 0
 }));
+const contentProps = computed(() => ({
+  disableOutsidePointerEvents: void 0,
+  style: contentStyle.value
+}));
 function cssSize(value) {
   return typeof value === "number" ? `${value}px` : value;
 }
@@ -29,7 +33,7 @@ function cssSize(value) {
     :description="description"
     :direction="direction"
     :dismissible="dismissible && config?.allowOutsideClick !== false"
-    :style="contentStyle"
+    :content="contentProps"
     :handle="false"
     :ui="{
   overlay: ui?.overlay,

package/dist/runtime/form/components/layout/ModalLayout.vue

@@ -15,6 +15,10 @@ const contentStyle = computed(() => ({
   maxWidth: cssSize(props.config?.maxWidth),
   maxHeight: cssSize(props.config?.maxHeight)
 }));
+const contentProps = computed(() => ({
+  disableOutsidePointerEvents: void 0,
+  style: contentStyle.value
+}));
 function cssSize(value) {
   return typeof value === "number" ? `${value}px` : value;
 }
@@ -26,7 +30,7 @@ function cssSize(value) {
     :title="title"
     :description="description"
     :dismissible="dismissible && config?.allowOutsideClick !== false"
-    :style="contentStyle"
+    :content="contentProps"
     :ui="{
   overlay: ui?.overlay,
   content: mergeFormUiClass(

package/dist/runtime/form/components/renderer/FormCompositeControl.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    attrs: import("../../../shared/index.js").GenericObject;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/components/renderer/FormCompositeControl.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import { computed } from "vue";
+const { id, ariaAttrs } = useFormField();
+const attrs = computed(() => ({
+  ...ariaAttrs.value ?? {},
+  id: id.value
+}));
+</script>
+
+<template>
+  <slot :attrs="attrs" />
+</template>

package/dist/runtime/form/components/renderer/FormCompositeControl.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    attrs: import("../../../shared/index.js").GenericObject;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/components/renderer/FormFieldRenderer.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     field: FormField;
     parentPath: readonly string[];
     bare?: boolean;
+    controlLabelledby?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/form/components/renderer/FormFieldRenderer.vue

@@ -1,7 +1,10 @@
 <script setup>
 import UAlert from "@nuxt/ui/components/Alert.vue";
-import { computed, ref, watchEffect } from "vue";
-import { provideFormFieldBare } from "../../composables/use-form-field-chrome";
+import { computed, ref, useId, watchEffect } from "vue";
+import {
+  provideFormFieldBare,
+  provideFormFieldControlAttrs
+} from "../../composables/use-form-field-chrome";
 import { useFormItemLayout } from "../../composables/use-form-layout";
 import {
   childParentPath,
@@ -48,15 +51,24 @@ import TimeField from "../../fields/time/component.vue";
 import UploadField from "../../fields/upload/component.vue";
 import { createFormFieldInstance } from "../../utils/field-instance";
 import { focusFormFieldElement } from "../../utils/focus";
+import { resolveFormText } from "../../utils/text";
 const props = defineProps({
   field: { type: null, required: true },
   parentPath: { type: Array, required: true },
-  bare: { type: Boolean, required: false }
+  bare: { type: Boolean, required: false },
+  controlLabelledby: { type: String, required: false }
 });
 const form = useFormRuntimeContext();
 const element = ref(null);
 const bare = computed(() => props.bare === true);
+const controlId = useId();
+const controlAttrs = computed(() => {
+  if (!bare.value) return {};
+  if (props.controlLabelledby) return { id: controlId, "aria-labelledby": props.controlLabelledby };
+  return { id: controlId, "aria-label": resolveControlLabel(props.field) };
+});
 provideFormFieldBare(bare);
+provideFormFieldControlAttrs(controlAttrs);
 const field = computed(() => createFormFieldInstance(props.field));
 const path = computed(() => fieldPath(props.parentPath, props.field));
 const childPath = computed(() => childParentPath(props.parentPath, props.field));
@@ -144,6 +156,10 @@ function resolveFieldLayout() {
 function isLayout(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+function resolveControlLabel(controlField) {
+  if ("label" in controlField) return resolveFormText(controlField.label) ?? controlField.key;
+  return controlField.key;
+}
 </script>
 
 <template>

package/dist/runtime/form/components/renderer/FormFieldRenderer.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     field: FormField;
     parentPath: readonly string[];
     bare?: boolean;
+    controlLabelledby?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/form/components/renderer/FormFieldShell.d.vue.ts

@@ -9,12 +9,12 @@ declare var __VLS_1: {
     description: string | undefined;
     hint: string | undefined;
     required: boolean;
-}, __VLS_23: {
+}, __VLS_29: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
     required: boolean;
-}, __VLS_32: {
+}, __VLS_38: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
@@ -23,9 +23,9 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_32) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/form/components/renderer/FormFieldShell.vue

@@ -28,9 +28,15 @@ const description = computed(
 const hint = computed(
   () => field.value.capability.has("hint") && "hint" in props.field ? resolveFormText(props.field.hint) : void 0
 );
+const labelExtra = computed(() => {
+  if (!field.value.capability.has("hint") || !("labelExtra" in props.field)) return void 0;
+  const value = props.field.labelExtra;
+  return typeof value === "function" ? value() : value;
+});
 const shellLabel = computed(() => props.inlineLabel ? void 0 : label.value);
 const shellDescription = computed(() => props.inlineLabel ? void 0 : description.value);
 const shellHint = computed(() => props.inlineLabel ? void 0 : hint.value);
+const shellLabelExtra = computed(() => props.inlineLabel ? void 0 : labelExtra.value);
 const error = computed(() => form.getFieldError(props.path));
 const required = computed(() => {
   if (!field.value.capability.has("validation")) return false;
@@ -67,6 +73,9 @@ const nuxtFieldUi = computed(() => ({
 function resetField() {
   form.getFieldApi(props.path, props.field).value.reset();
 }
+function renderLabelExtra() {
+  return shellLabelExtra.value;
+}
 </script>
 
 <template>
@@ -78,12 +87,17 @@ function resetField() {
     :name="path.join('.')"
     :label="shellLabel"
     :description="shellDescription"
-    :hint="shellHint"
+    :hint="shellLabelExtra === void 0 || shellLabelExtra === null ? shellHint : void 0"
     :error="error"
     :required="required"
     :size="formUi.controlSize.value"
     :ui="nuxtFieldUi"
   >
+    <template v-if="shellLabelExtra !== void 0 && shellLabelExtra !== null" #hint>
+      <span :class="fieldUi?.labelExtra">
+        <component :is="renderLabelExtra" />
+      </span>
+    </template>
     <UCollapsible
       v-if="collapsible"
       v-model:open="open"

package/dist/runtime/form/components/renderer/FormFieldShell.vue.d.ts

@@ -9,12 +9,12 @@ declare var __VLS_1: {
     description: string | undefined;
     hint: string | undefined;
     required: boolean;
-}, __VLS_23: {
+}, __VLS_29: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
     required: boolean;
-}, __VLS_32: {
+}, __VLS_38: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
@@ -23,9 +23,9 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_32) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/form/components/root/Form.d.vue.ts

@@ -26,17 +26,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     nextStep: () => Promise<boolean>;
     previousStep: () => Promise<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
     submit: (value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
         data?: unknown;
     }) => any;
+    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
     onSubmit?: ((value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
         data?: unknown;
     }) => any) | undefined;
+    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/form/components/root/Form.vue

@@ -4,7 +4,7 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
 import { useAppConfig } from "nuxt/app";
 import { computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { useRouter } from "vue-router";
 import { useFormActions } from "../../composables/use-form-actions";
 import { useFormGridLayout } from "../../composables/use-form-layout";
 import { provideFormRuntime, useFormRuntime } from "../../composables/use-form-runtime";
@@ -25,6 +25,7 @@ const props = defineProps({
   showCloseButton: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
+const router = useRouter();
 const emit = defineEmits(["submit", "cancel"]);
 const schemaRef = computed(() => props.form?.schema.value ?? props.schema ?? {});
 const appConfig = useAppConfig();
@@ -74,10 +75,11 @@ if (typeof window !== "undefined") {
   window.addEventListener("beforeunload", handleBeforeUnload);
   onBeforeUnmount(() => window.removeEventListener("beforeunload", handleBeforeUnload));
 }
-onBeforeRouteLeave(() => {
+const removeRouteGuard = router.beforeEach(() => {
   if (!shouldConfirmDirtyNavigation()) return true;
   return window.confirm(getDirtyNavigationMessage());
 });
+onBeforeUnmount(removeRouteGuard);
 const currentStep = computed(() => getSchemaSteps(schemaRef.value)[runtime.currentStepIndex.value]);
 const parentPath = computed(
   () => runtime.currentStepRoot.value ? [runtime.currentStepRoot.value] : []
@@ -304,7 +306,7 @@ async function focusFirstRenderedField() {
     </div>
 
     <footer :class="footerClass">
-      <FormActions :runtime="runtime" :actions="actions" @submit="submit" @cancel="cancel" />
+      <FormActions :runtime="runtime" :actions="actions" @cancel="cancel" />
     </footer>
   </form>
 </template>

package/dist/runtime/form/components/root/Form.vue.d.ts

@@ -26,17 +26,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     nextStep: () => Promise<boolean>;
     previousStep: () => Promise<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
     submit: (value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
         data?: unknown;
     }) => any;
+    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
     onSubmit?: ((value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
         data?: unknown;
     }) => any) | undefined;
+    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -23,7 +23,7 @@ export declare function useFieldControl(field: () => FormField, path: () => read
         refreshable: import("vue").ComputedRef<boolean>;
         selectCreatedOption: import("vue").ComputedRef<boolean>;
         refresh: () => Promise<void>;
-        add: (option: unknown) => void;
+        add: (option: unknown) => import("../utils/options.js").ResolvedFormOption;
         create: (label: string) => Promise<import("../utils/options.js").ResolvedFormOption | null>;
     };
     placeholder: import("vue").ComputedRef<string>;

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

@@ -5,12 +5,14 @@ import { createFormFieldInstance } from "../utils/field-instance.js";
 import { resolveFormText } from "../utils/text.js";
 import { mergeFormUiClass } from "../utils/ui.js";
 import { useFieldOptions } from "./use-field-options.js";
+import { useFormFieldControlAttrs } from "./use-form-field-chrome.js";
 import { useFormRuntimeContext } from "./use-form-runtime.js";
 import { useFormUi } from "./use-form-ui.js";
 export function useFieldControl(field, path) {
   const form = useFormRuntimeContext();
   const formUi = useFormUi();
   const { t } = useUiToolsLocale();
+  const fieldControlAttrs = useFormFieldControlAttrs();
   const api = computed(() => form.getFieldApi(path(), field()));
   const params = computed(() => form.getFieldCallbackParams(path(), field()));
   const options = useFieldOptions({
@@ -25,6 +27,7 @@ export function useFieldControl(field, path) {
     const current = field();
     const fieldUi = formUi.ui.value.fields?.[current.type];
     const defaults = {
+      ...fieldControlAttrs.value,
       size: fieldUi?.size ?? formUi.controlSize.value,
       class: fieldUi?.class,
       ui: mergeControlUi(formUi.ui.value.control?.ui, fieldUi?.ui)
@@ -70,6 +73,7 @@ export function useFieldControl(field, path) {
   watchWithFilter(
     () => form.getValue(path()),
     async () => {
+      api.value.validation.clearError();
       if (!createFormFieldInstance(field()).capability.has("validation")) return;
       const trigger = getValidationTrigger(field());
       if (trigger === "submit") return;

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

@@ -21,6 +21,6 @@ export declare function useFieldOptions(params: {
     refreshable: ComputedRef<boolean>;
     selectCreatedOption: ComputedRef<boolean>;
     refresh: () => Promise<void>;
-    add: (option: unknown) => void;
+    add: (option: unknown) => ResolvedFormOption;
     create: (label: string) => Promise<ResolvedFormOption | null>;
 };