nuxt-ui-tools 1.16.4 → 1.16.6

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.16.4",
+  "version": "1.16.6",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/components/provider/form-provider.d.vue.ts

@@ -1,8 +1,13 @@
+import type { FormConfirmHandler } from '../../types/index.js';
+type __VLS_Props = {
+    /** Asks before discarding work, such as leaving a dirty form. Defaults to the native dialog. */
+    confirm?: FormConfirmHandler;
+};
 declare var __VLS_1: {};
 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_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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,8 +1,13 @@
 <script setup>
 import { provideFormApi } from "../../composables/use-form-api";
+import { nativeConfirm, provideFormConfirm } from "../../composables/use-form-confirm";
 import FormOverlayHost from "./form-overlay-host.vue";
+const props = defineProps({
+  confirm: { type: Function, required: false }
+});
 const formApi = provideFormApi();
 const { formInstances } = formApi;
+provideFormConfirm((request) => props.confirm ? props.confirm(request) : nativeConfirm(request));
 </script>
 
 <template>

package/dist/runtime/form/components/provider/form-provider.vue.d.ts

@@ -1,8 +1,13 @@
+import type { FormConfirmHandler } from '../../types/index.js';
+type __VLS_Props = {
+    /** Asks before discarding work, such as leaving a dirty form. Defaults to the native dialog. */
+    confirm?: FormConfirmHandler;
+};
 declare var __VLS_1: {};
 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_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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,5 @@
+import type { FormConfirmHandler, FormConfirmRequest } from '../types/index.js';
+export declare function provideFormConfirm(handler: FormConfirmHandler): void;
+/** Asks the app's confirm handler, or the native dialog when no provider supplies one. */
+export declare function useFormConfirm(): (request: FormConfirmRequest) => Promise<boolean>;
+export declare function nativeConfirm(request: FormConfirmRequest): boolean;

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

@@ -0,0 +1,14 @@
+import { inject, provide } from "vue";
+const formConfirmKey = Symbol("nuxt-ui-tools-form-confirm");
+export function provideFormConfirm(handler) {
+  provide(formConfirmKey, handler);
+}
+export function useFormConfirm() {
+  const handler = inject(formConfirmKey, nativeConfirm);
+  return async function confirm(request) {
+    return await handler(request) === true;
+  };
+}
+export function nativeConfirm(request) {
+  return window.confirm(request.message);
+}

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

@@ -11,7 +11,7 @@ export declare function useFormPage(params: {
     hash: () => boolean;
 }): {
     active: import("vue").Ref<string | undefined, string | undefined>;
-    cancel: () => void;
+    cancel: () => Promise<void>;
     dirtyCheck: import("vue").ComputedRef<boolean>;
     items: import("vue").ComputedRef<{
         entry: import("../types/index.js").FormPageSectionEntry;
@@ -23,7 +23,7 @@ export declare function useFormPage(params: {
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
     root: {
-        cancel: () => void;
+        cancel: () => Promise<void>;
         contextError: import("vue").ComputedRef<string | undefined>;
         contextLoading: import("vue").ComputedRef<boolean>;
         contextPending: import("vue").ComputedRef<boolean>;
@@ -45,7 +45,7 @@ export declare function useFormPage(params: {
 };
 export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     active: import("vue").Ref<string | undefined, string | undefined>;
-    cancel: () => void;
+    cancel: () => Promise<void>;
     dirtyCheck: import("vue").ComputedRef<boolean>;
     items: import("vue").ComputedRef<{
         entry: import("../types/index.js").FormPageSectionEntry;
@@ -57,7 +57,7 @@ export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
     root: {
-        cancel: () => void;
+        cancel: () => Promise<void>;
         contextError: import("vue").ComputedRef<string | undefined>;
         contextLoading: import("vue").ComputedRef<boolean>;
         contextPending: import("vue").ComputedRef<boolean>;
@@ -80,7 +80,7 @@ export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
 /** The page a part renders in. Parts only work inside `FormPage`. */
 export declare function useFormPageContext(): {
     active: import("vue").Ref<string | undefined, string | undefined>;
-    cancel: () => void;
+    cancel: () => Promise<void>;
     dirtyCheck: import("vue").ComputedRef<boolean>;
     items: import("vue").ComputedRef<{
         entry: import("../types/index.js").FormPageSectionEntry;
@@ -92,7 +92,7 @@ export declare function useFormPageContext(): {
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
     root: {
-        cancel: () => void;
+        cancel: () => Promise<void>;
         contextError: import("vue").ComputedRef<string | undefined>;
         contextLoading: import("vue").ComputedRef<boolean>;
         contextPending: import("vue").ComputedRef<boolean>;

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

@@ -18,7 +18,7 @@ export interface UseFormRootParams {
  * and owns submit and cancel. `<NutForm>` and `FormPage` both render from it.
  */
 export declare function useFormRoot(params: UseFormRootParams): {
-    cancel: () => void;
+    cancel: () => Promise<void>;
     contextError: import("vue").ComputedRef<string | undefined>;
     contextLoading: import("vue").ComputedRef<boolean>;
     contextPending: import("vue").ComputedRef<boolean>;

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

@@ -14,9 +14,9 @@ import { isString, isUndefined, stringArray } from "../utils/predicate.js";
 import { collectFormFieldsPaths } from "../utils/state.js";
 import { resolveFormText } from "../utils/text.js";
 import { mergeFormUi, resolveAppFormUi } from "../utils/ui.js";
+import { useFormConfirm } from "./use-form-confirm.js";
 import { provideFormRuntime, useFormRuntime } from "./use-form-runtime.js";
 import { provideFormUi } from "./use-form-ui.js";
-const DEFAULT_DIRTY_NAVIGATION_MESSAGE = "You have unsaved changes. Close this form?";
 export function useFormRoot(params) {
   const router = useRouter();
   const { t } = useUiToolsLocale();
@@ -37,6 +37,14 @@ export function useFormRoot(params) {
   const ownedRuntime = params.runtime?.();
   const runtime = ownedRuntime ?? useFormRuntime({ input, schema, syncInput, validationMode });
   provideFormRuntime(runtime);
+  const confirm = useFormConfirm();
+  let leaveConfirmed = false;
+  watch(
+    () => runtime.dirtyPaths.value,
+    () => {
+      leaveConfirmed = false;
+    }
+  );
   if (!ownedRuntime) {
     watch(
       params.form,
@@ -74,10 +82,10 @@ export function useFormRoot(params) {
     if (runtime.actionPending.value === "submit" || isSameDocument(to, from)) {
       return true;
     }
-    if (!shouldConfirmDirtyNavigation()) {
+    if (leaveConfirmed || !shouldConfirmDirtyNavigation()) {
       return true;
     }
-    return window.confirm(getDirtyNavigationMessage());
+    return confirmLeave();
   });
   onBeforeUnmount(removeRouteGuard);
   const contextPending = computed(
@@ -117,12 +125,19 @@ export function useFormRoot(params) {
       params.onSubmitted(runtime.output.value, result);
     }
   }
-  function cancel() {
-    if (shouldConfirmDirtyNavigation() && !window.confirm(getDirtyNavigationMessage())) {
+  async function cancel() {
+    if (!leaveConfirmed && shouldConfirmDirtyNavigation() && !await confirmLeave()) {
       return;
     }
     params.onCancelled(runtime.output.value);
   }
+  async function confirmLeave() {
+    leaveConfirmed = await confirm({
+      kind: "unsaved-changes",
+      message: getDirtyNavigationMessage()
+    });
+    return leaveConfirmed;
+  }
   function shouldConfirmDirtyNavigation() {
     if (!runtime.isDirty.value) {
       return false;
@@ -142,10 +157,10 @@ export function useFormRoot(params) {
   function getDirtyNavigationMessage() {
     const config = getSchemaDirtyNavigation(schema.value);
     if (!isRecord(config)) {
-      return DEFAULT_DIRTY_NAVIGATION_MESSAGE;
+      return t("form.confirm.unsavedChanges");
     }
     const message = Object.getOwnPropertyDescriptor(config, "message")?.value;
-    return resolveFormText(message) ?? DEFAULT_DIRTY_NAVIGATION_MESSAGE;
+    return resolveFormText(message) ?? t("form.confirm.unsavedChanges");
   }
   async function focusFirstField() {
     const parentPath = runtime.currentStepRoot.value ? [runtime.currentStepRoot.value] : [];

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

@@ -87,8 +87,8 @@ function toggle(index) {
 function addItem() {
   expand(array.addItem());
 }
-function removeItem(index) {
-  if (!array.removeItem(index)) {
+async function removeItem(index) {
+  if (!await array.removeItem(index)) {
     return;
   }
   expanded.value = expanded.value.filter((candidate) => candidate !== index).map((candidate) => candidate > index ? candidate - 1 : candidate);

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

@@ -75,13 +75,13 @@ function addItem() {
   tabTransitionDirection.value = "forward";
   activeIndex.value = array.addItem();
 }
-function removeItem(index) {
+async function removeItem(index) {
   const currentActiveIndex = activeIndex.value;
   const hasNextItem = index + 1 < items.value.length;
   if (currentActiveIndex === index) {
     tabTransitionDirection.value = hasNextItem ? "forward" : "backward";
   }
-  if (!array.removeItem(index)) {
+  if (!await array.removeItem(index)) {
     return;
   }
   if (currentActiveIndex < index) {

package/dist/runtime/form/fields/array-list/use-array-items.d.ts

@@ -41,7 +41,7 @@ export declare function useFormArrayItems(field: () => FormArrayItemsField, path
     itemPath: (index: number) => string[];
     itemRenderKey: (item: FormObject, index: number) => string;
     items: import("vue").ComputedRef<readonly import("../../../shared/index.js").GenericObject[]>;
-    removeItem: (index: number) => boolean;
+    removeItem: (index: number) => Promise<boolean>;
     removeItemLabel: (item: FormObject, index: number) => string;
     resolveAction: (action: FormArrayAction | undefined, index: number) => (import("./types.js").FormArrayActionCondition<{}, {}> | undefined) & boolean;
     runCustomAction: (index: number, actionIndex: number) => Promise<void>;

package/dist/runtime/form/fields/array-list/use-array-items.js

@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale.js";
 import { useResolvedFieldProps } from "../../composables/use-field-control.js";
+import { useFormConfirm } from "../../composables/use-form-confirm.js";
 import { useFormRuntimeContext } from "../../composables/use-form-runtime.js";
 import { useFormUi } from "../../composables/use-form-ui.js";
 import { syncFormArrayItems } from "../../utils/array.js";
@@ -18,6 +19,7 @@ export function useFormArrayItems(field, path) {
   const formUi = useFormUi();
   const fieldProps = useResolvedFieldProps(field, path);
   const { t } = useUiToolsLocale();
+  const confirm = useFormConfirm();
   const itemKeys = /* @__PURE__ */ new WeakMap();
   let nextItemKey = 0;
   const items = computed(() => {
@@ -69,16 +71,16 @@ export function useFormArrayItems(field, path) {
     updateItems([...items.value, createItem(index, variantKey)]);
     return index;
   }
-  function confirmRemoval() {
+  async function confirmRemoval() {
     const current = field();
     if (!current.confirmDelete) {
       return true;
     }
     const message = resolveFormBoundaryText(current.confirmDelete) ?? t("form.fields.array.confirmDelete");
-    return window.confirm(message);
+    return confirm({ kind: "remove-item", message });
   }
-  function removeItem(index) {
-    if (!confirmRemoval()) {
+  async function removeItem(index) {
+    if (!await confirmRemoval()) {
       return false;
     }
     updateItems(items.value.filter((_, itemIndex) => itemIndex !== index));

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

@@ -6,6 +6,7 @@ import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { useFormConfirm } from "../../composables/use-form-confirm";
 import { useFormUi } from "../../composables/use-form-ui";
 import { formOptionKey, normalizeOptionItem, resolveOptionSource } from "../../utils/options";
 import { isRecord } from "../../utils/path";
@@ -34,6 +35,7 @@ const VueDraggable = defineAsyncComponent(async () => {
 });
 const formUi = useFormUi();
 const { t } = useUiToolsLocale();
+const confirm = useFormConfirm();
 const ui = computed(() => formUi.ui.value.arrayPrimitive?.ui);
 const values = computed(() => {
   const value = form.getValue(props.path);
@@ -159,10 +161,10 @@ async function addItem() {
   await nextTick();
   await form.focusField(itemPath(index));
 }
-function removeItem(index) {
+async function removeItem(index) {
   if (!isPending(index) && props.field.confirmDelete !== false) {
     const message = resolveFormBoundaryText(props.field.confirmDelete) ?? t("form.fields.array.confirmDelete");
-    if (!window.confirm(message)) {
+    if (!await confirm({ kind: "remove-item", message })) {
       return;
     }
   }

package/dist/runtime/form/fields/select/component.vue

@@ -31,6 +31,7 @@ const {
   { omit: ["createItem", "max", "searchable", "clearable"] }
 );
 const searchTerm = ref("");
+const open = ref(false);
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
@@ -76,8 +77,9 @@ watch(searchTerm, (term) => {
     options.setSearch(term);
   }
 });
-function handleOpen(open) {
-  if (open) {
+function handleOpen(next) {
+  open.value = next;
+  if (next) {
     options.activate();
   }
 }
@@ -85,7 +87,11 @@ async function handleCreate(label) {
   await options.create(label);
 }
 async function handleCreateAction() {
-  await options.create(searchTerm.value.trim() || void 0);
+  const label = searchTerm.value.trim() || void 0;
+  if (!fieldProps.value.multiple) {
+    open.value = false;
+  }
+  await options.create(label);
 }
 async function handleNativeCreate(label) {
   const normalizedLabel = label.trim();
@@ -107,6 +113,7 @@ function isOptionValue(value) {
     v-if="bare"
     v-model="model"
     v-model:search-term="searchTerm"
+    :open="open"
     v-bind="controlProps"
     class="w-full"
     value-key="value"
@@ -152,6 +159,7 @@ function isOptionValue(value) {
     <USelectMenu
       v-model="model"
       v-model:search-term="searchTerm"
+      :open="open"
       v-bind="controlProps"
       class="w-full"
       value-key="value"

package/dist/runtime/form/types/confirm.d.ts

@@ -0,0 +1,9 @@
+/** A question the form asks before discarding work. */
+export interface FormConfirmRequest {
+    /** `unsaved-changes` before leaving a dirty form; `remove-item` before removing an array item. */
+    kind: 'unsaved-changes' | 'remove-item';
+    /** Localized message: the schema's text or the engine default. */
+    message: string;
+}
+/** App-provided confirmation, such as a modal. Resolves `true` to go ahead. */
+export type FormConfirmHandler = (request: FormConfirmRequest) => boolean | Promise<boolean>;

package/dist/runtime/form/types/index.d.ts

@@ -1,6 +1,7 @@
 export type * from './api';
 export type * from './actions';
 export type * from './callbacks';
+export type * from './confirm';
 export type * from './context';
 export type * from './controller';
 export type * from './dependencies';

package/dist/runtime/i18n/locales/en.js

@@ -193,6 +193,9 @@ export default defineUiToolsLocale({
       untitled: "Untitled file"
     },
     form: {
+      confirm: {
+        unsavedChanges: "You have unsaved changes. Discard them?"
+      },
       actions: {
         cancelButton: "Cancel",
         nextButton: "Next",

package/dist/runtime/i18n/locales/fr.js

@@ -193,6 +193,9 @@ export default defineUiToolsLocale({
       untitled: "Fichier sans nom"
     },
     form: {
+      confirm: {
+        unsavedChanges: "Vous avez des modifications non enregistr\xE9es. Les abandonner ?"
+      },
       actions: {
         cancelButton: "Annuler",
         nextButton: "Suivant",

package/dist/runtime/i18n/types.d.ts

@@ -411,6 +411,10 @@ export interface UiToolsSpreadsheetMessages {
     };
 }
 export interface UiToolsFormMessages {
+    /** Confirmations asked before discarding work. */
+    confirm: {
+        unsavedChanges: string;
+    };
     actions: {
         nextButton: string;
         prevButton: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.16.4",
+  "version": "1.16.6",
   "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",