nuxt-ui-tools 1.11.1 → 1.11.2

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/components/provider/form-overlay-host.vue

@@ -49,6 +49,7 @@ function resolveSchemaUi(schema) {
   >
     <FormRoot
       :form="overlay.form"
+      :runtime="overlay.runtime"
       shell="drawer"
       :show-close-button="drawerConfig?.showCloseButton !== false"
       :ui="formUi"
@@ -70,6 +71,7 @@ function resolveSchemaUi(schema) {
   >
     <FormRoot
       :form="overlay.form"
+      :runtime="overlay.runtime"
       shell="fullscreen"
       :show-close-button="fullscreenConfig?.showCloseButton !== false"
       :ui="formUi"
@@ -91,6 +93,7 @@ function resolveSchemaUi(schema) {
   >
     <FormRoot
       :form="overlay.form"
+      :runtime="overlay.runtime"
       shell="modal"
       :show-close-button="modalConfig?.showCloseButton !== false"
       :ui="formUi"

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

@@ -1,6 +1,7 @@
-import type { FormValue, FormObject, FormRendererController, FormRenderShell, FormUiConfig, FormValidationMode } from '../../types/index.js';
+import type { FormValue, FormObject, FormRendererController, FormRuntime, FormRenderShell, FormUiConfig, FormValidationMode } from '../../types/index.js';
 type __VLS_Props = {
     form?: FormRendererController;
+    runtime?: FormRuntime;
     schema?: FormValue;
     input?: FormObject;
     shell?: FormRenderShell;

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

@@ -20,6 +20,7 @@ import FormFieldRenderer from "../renderer/form-field-renderer.vue";
 import FormDirectionalTransition from "../utils/form-directional-transition.vue";
 const props = defineProps({
   form: { type: Object, required: false },
+  runtime: { type: Object, required: false },
   schema: { type: null, required: false },
   input: { type: null, required: false },
   shell: { type: String, required: false },
@@ -42,6 +43,7 @@ const {
   submit
 } = useFormRoot({
   form: () => props.form,
+  runtime: () => props.runtime,
   input: () => props.input,
   onCancelled: (value) => emit("cancel", value),
   onSubmitted: (value, result) => emit("submit", value, result),

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

@@ -1,6 +1,7 @@
-import type { FormValue, FormObject, FormRendererController, FormRenderShell, FormUiConfig, FormValidationMode } from '../../types/index.js';
+import type { FormValue, FormObject, FormRendererController, FormRuntime, FormRenderShell, FormUiConfig, FormValidationMode } from '../../types/index.js';
 type __VLS_Props = {
     form?: FormRendererController;
+    runtime?: FormRuntime;
     schema?: FormValue;
     input?: FormObject;
     shell?: FormRenderShell;

package/dist/runtime/form/composables/use-form-overlay-controller.d.ts

@@ -8,5 +8,6 @@ export declare function useFormOverlayController(instance: FormApiRuntimeInstanc
     handleSubmitted: (formData: FormObject, result: FormSubmitHandlerResult<FormValue>) => void;
     open: import("vue").Ref<boolean, boolean>;
     resolveAfterClose: () => void;
+    runtime: import("../types/index.js").FormRuntime;
     title: import("vue").ComputedRef<string | undefined>;
 };

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

@@ -3,6 +3,7 @@ import { getFormOverlayDescription, getFormOverlayTitle } from "../utils/overlay
 import { isRecord } from "../utils/path.js";
 import { useForm } from "./use-form.js";
 import { useFormApi } from "./use-form-api.js";
+import { useFormRuntime } from "./use-form-runtime.js";
 export function useFormOverlayController(instance) {
   const formApi = useFormApi();
   const form = useForm({
@@ -17,6 +18,13 @@ export function useFormOverlayController(instance) {
     () => getFormOverlayDescription(instance.schema) ?? getFormOverlayTitle(instance.schema) ?? "Form"
   );
   const dismissible = computed(() => !form.isSubmitting.value);
+  const runtime = useFormRuntime({
+    input: form.input,
+    schema: form.schema,
+    syncInput: form.syncInput,
+    validationMode: form.validationMode
+  });
+  form.bind(runtime);
   formApi.setController(instance.id, form);
   const runtimeControls = {
     close: requestCancel,
@@ -24,6 +32,7 @@ export function useFormOverlayController(instance) {
   };
   formApi.setRuntimeControls(instance.id, runtimeControls);
   onBeforeUnmount(() => {
+    form.unbind(runtime);
     formApi.removeController(instance.id, form);
     formApi.removeRuntimeControls(instance.id, runtimeControls);
   });
@@ -85,6 +94,7 @@ export function useFormOverlayController(instance) {
     handleSubmitted,
     open,
     resolveAfterClose,
+    runtime,
     title
   };
 }

package/dist/runtime/form/composables/use-form-root.d.ts

@@ -1,7 +1,9 @@
-import type { FormObject, FormRendererController, FormSubmitHandlerResult, FormUiConfig, FormValidationMode, FormValue } from '../types/index.js';
+import type { FormObject, FormRendererController, FormRuntime, FormSubmitHandlerResult, FormUiConfig, FormValidationMode, FormValue } from '../types/index.js';
 export interface UseFormRootParams {
     /** Controller from `useForm`. Its schema, input, and policies win over the direct ones. */
     form: () => FormRendererController | undefined;
+    /** Runtime owned by a parent. The root renders it and neither creates, binds nor disposes it. */
+    runtime?: () => FormRuntime | undefined;
     schema: () => FormValue;
     input: () => FormObject | undefined;
     syncInput: () => boolean | readonly string[] | undefined;
@@ -27,7 +29,7 @@ export declare function useFormRoot(params: UseFormRootParams): {
     };
     input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
     refreshContext: () => Promise<void>;
-    runtime: import("../types/index.js").FormRuntime;
+    runtime: FormRuntime;
     schema: import("vue").ComputedRef<{}>;
     submit: () => Promise<void>;
     validationMode: import("vue").ComputedRef<FormValidationMode>;

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

@@ -34,17 +34,20 @@ export function useFormRoot(params) {
   const validationMode = computed(
     () => params.form()?.validationMode.value ?? params.validate() ?? getSchemaValidationMode(schema.value)
   );
-  const runtime = useFormRuntime({ input, schema, syncInput, validationMode });
+  const ownedRuntime = params.runtime?.();
+  const runtime = ownedRuntime ?? useFormRuntime({ input, schema, syncInput, validationMode });
   provideFormRuntime(runtime);
-  watch(
-    params.form,
-    (controller, previousController) => {
-      previousController?.unbind(runtime);
-      controller?.bind(runtime);
-    },
-    { immediate: true }
-  );
-  onBeforeUnmount(() => params.form()?.unbind(runtime));
+  if (!ownedRuntime) {
+    watch(
+      params.form,
+      (controller, previousController) => {
+        previousController?.unbind(runtime);
+        controller?.bind(runtime);
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => params.form()?.unbind(runtime));
+  }
   onMounted(async () => {
     await nextTick();
     const target = getSchemaAutoFocus(schema.value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",