nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -1,5 +1,6 @@
 import { computed, inject, provide, ref } from "vue";
 import { isRecord } from "../utils/path.js";
+import { isFunction, isString } from "../utils/predicate.js";
 const formApiKey = Symbol("nuxt-ui-tools-form-api");
 export function provideFormApi() {
   const api = createFormApi();
@@ -8,7 +9,9 @@ export function provideFormApi() {
 }
 export function useFormApi() {
   const api = inject(formApiKey);
-  if (!api) throw new Error("Form API is not provided. Wrap your app with <NutFormProvider>.");
+  if (!api) {
+    throw new Error("Form API is not provided. Wrap your app with <NutFormProvider>.");
+  }
   return api;
 }
 function createFormApi() {
@@ -21,19 +24,19 @@ function createFormApi() {
     const id = options.id ?? createInstanceId();
     return new Promise((resolve) => {
       const instance = {
+        cancel: (formData) => {
+          removeInstance(id);
+          resolve({ formData, isCompleted: false });
+        },
+        complete: (formData, submitData) => {
+          removeInstance(id);
+          resolve({ formData, isCompleted: true, submitData });
+        },
         id,
-        schema,
         input: options.input,
         mode: options.mode,
         onSubmit: options.onSubmit,
-        complete: (formData, submitData) => {
-          removeInstance(id);
-          resolve({ isCompleted: true, formData, submitData });
-        },
-        cancel: (formData) => {
-          removeInstance(id);
-          resolve({ isCompleted: false, formData });
-        }
+        schema
       };
       formInstances.value = [...formInstances.value, instance];
     });
@@ -48,7 +51,9 @@ function createFormApi() {
   }
   function closeForm(idOrFormKey) {
     const instance = getForm(idOrFormKey);
-    if (!instance) return false;
+    if (!instance) {
+      return false;
+    }
     const controls = runtimeControls.get(instance.id);
     if (controls) {
       controls.close();
@@ -60,9 +65,13 @@ function createFormApi() {
   }
   async function submitForm(idOrFormKey) {
     const instance = getForm(idOrFormKey);
-    if (!instance) return false;
+    if (!instance) {
+      return false;
+    }
     const controls = runtimeControls.get(instance.id);
-    if (controls) return await controls.submit();
+    if (controls) {
+      return await controls.submit();
+    }
     const controller = controllers.get(instance.id);
     return await controller?.submit() ?? false;
   }
@@ -84,13 +93,17 @@ function createFormApi() {
     return controllers.get(id) ?? null;
   }
   function removeController(id, controller) {
-    if (controllers.get(id) === controller) controllers.delete(id);
+    if (controllers.get(id) === controller) {
+      controllers.delete(id);
+    }
   }
   function setRuntimeControls(id, controls) {
     runtimeControls.set(id, controls);
   }
   function removeRuntimeControls(id, controls) {
-    if (runtimeControls.get(id) === controls) runtimeControls.delete(id);
+    if (runtimeControls.get(id) === controls) {
+      runtimeControls.delete(id);
+    }
   }
   function removeInstance(id) {
     formInstances.value = formInstances.value.filter((instance) => instance.id !== id);
@@ -102,24 +115,24 @@ function createFormApi() {
     return `form_${nextInstanceIndex}`;
   }
   return {
-    formInstances: computed(() => formInstances.value),
-    createForm,
-    getForm,
-    isOpen,
     closeForm,
-    submitForm,
+    createForm,
     destroyAll,
+    formInstances: computed(() => formInstances.value),
     getController,
-    setController,
+    getForm,
+    isOpen,
     removeController,
+    removeRuntimeControls,
+    setController,
     setRuntimeControls,
-    removeRuntimeControls
+    submitForm
   };
 }
 function resolveCreateOptions(inputOrOptions) {
   if (isCreateOptions(inputOrOptions)) {
     return {
-      id: typeof inputOrOptions.id === "string" ? inputOrOptions.id : void 0,
+      id: isString(inputOrOptions.id) ? inputOrOptions.id : void 0,
       input: isRecord(inputOrOptions.input) ? inputOrOptions.input : void 0,
       mode: resolveDisplayMode(inputOrOptions.mode),
       onSubmit: isSubmitHandler(inputOrOptions.onSubmit) ? inputOrOptions.onSubmit : void 0
@@ -134,19 +147,23 @@ function isCreateOptions(value) {
   return isRecord(value) && ("input" in value || "mode" in value || "onSubmit" in value || "id" in value && ("input" in value || "mode" in value || "onSubmit" in value));
 }
 function resolveDisplayMode(value) {
-  if (isDisplayModeInput(value)) return value;
+  if (isDisplayModeInput(value)) {
+    return value;
+  }
   return "modal";
 }
 function isDisplayModeInput(value) {
-  return typeof value === "string" || typeof value === "function";
+  return isString(value) || isFunction(value);
 }
 function isSubmitHandler(value) {
-  return typeof value === "function";
+  return isFunction(value);
 }
 function getSchemaFormKey(schema) {
-  if (!isRecord(schema)) return void 0;
+  if (!isRecord(schema)) {
+    return;
+  }
   const formKey = Object.getOwnPropertyDescriptor(schema, "formKey")?.value;
-  return typeof formKey === "string" ? formKey : void 0;
+  return isString(formKey) ? formKey : void 0;
 }
 function resolveControllerOutput(controller) {
   const output = controller?.output.value;

package/dist/runtime/form/composables/use-form-context-resources.d.ts

@@ -1,7 +1,7 @@
 import type { GenericObject } from '../../shared/types/utils.js';
-import type { FormRuntimeContext } from '../types/index.js';
+import type { FormValue, FormRuntimeContext } from '../types/index.js';
 export declare function useFormContextResources(): {
     context: FormRuntimeContext;
     setContext: (definition: GenericObject | undefined) => void;
 };
-export declare function getSchemaContext(schema: unknown): GenericObject | undefined;
+export declare function getSchemaContext(schema: FormValue): any;

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

@@ -1,12 +1,17 @@
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
 import { computed, reactive } from "vue";
 import { isRecord } from "../utils/path.js";
+import { isFunction, isPromise, isUndefined } from "../utils/predicate.js";
 export function useFormContextResources() {
   const context = reactive({});
   const queryClient = useQueryClient();
   function setContext(definition) {
-    for (const key of Object.keys(context)) delete context[key];
-    if (!definition) return;
+    for (const key of Object.keys(context)) {
+      delete context[key];
+    }
+    if (!definition) {
+      return;
+    }
     for (const key of Object.keys(definition)) {
       const source = Object.getOwnPropertyDescriptor(definition, key)?.value;
       context[key] = createResource(source, queryClient);
@@ -18,7 +23,9 @@ export function useFormContextResources() {
   };
 }
 export function getSchemaContext(schema) {
-  if (!isRecord(schema)) return void 0;
+  if (!isRecord(schema)) {
+    return;
+  }
   const context = Object.getOwnPropertyDescriptor(schema, "context")?.value;
   return isRecord(context) ? context : void 0;
 }
@@ -26,18 +33,18 @@ function createResource(source, queryClient) {
   const raw = resolveResourceSource(source);
   if (isPromise(raw)) {
     const resource = {
-      value: void 0,
       error: null,
-      pending: true,
       fetching: false,
       loading: true,
+      pending: true,
       refresh: async () => {
-      }
+      },
+      value: void 0
     };
     resource.refresh = async () => {
       const nextSource = resolveResourceSource(source);
-      resource.pending = typeof resource.value === "undefined";
-      resource.fetching = typeof resource.value !== "undefined";
+      resource.pending = isUndefined(resource.value);
+      resource.fetching = !isUndefined(resource.value);
       resource.loading = resource.pending;
       try {
         resource.value = await nextSource;
@@ -60,36 +67,40 @@ function createResource(source, queryClient) {
     });
     const query = useQuery(() => {
       const nextSource = querySource.value;
-      if (!nextSource)
+      if (!nextSource) {
         return {
-          queryKey: ["form-context", "disabled"],
-          queryFn: async () => void 0,
-          enabled: false
+          enabled: false,
+          queryFn: async () => {
+          },
+          queryKey: ["form-context", "disabled"]
         };
+      }
       return nextSource;
     });
     const resource = {
-      get value() {
-        return query.data.value;
-      },
-      set value(value) {
-        const nextSource = querySource.value;
-        if (nextSource) queryClient.setQueryData(nextSource.queryKey, value);
-      },
       get error() {
         return query.error.value ?? null;
       },
-      get pending() {
-        return query.isPending.value;
-      },
       get fetching() {
         return query.isFetching.value && !query.isPending.value;
       },
       get loading() {
         return query.isPending.value;
       },
+      get pending() {
+        return query.isPending.value;
+      },
       refresh: async () => {
         await query.refetch();
+      },
+      get value() {
+        return query.data.value;
+      },
+      set value(value) {
+        const nextSource = querySource.value;
+        if (nextSource) {
+          queryClient.setQueryData(nextSource.queryKey, value);
+        }
       }
     };
     return resource;
@@ -97,13 +108,12 @@ function createResource(source, queryClient) {
   return { value: raw };
 }
 function resolveResourceSource(source) {
-  return typeof source === "function" ? source() : source;
-}
-function isPromise(value) {
-  return isRecord(value) && typeof value.then === "function";
+  return isFunction(source) ? source() : source;
 }
 function isQueryLike(value) {
-  if (!isRecord(value)) return false;
+  if (!isRecord(value)) {
+    return false;
+  }
   const queryKey = Object.getOwnPropertyDescriptor(value, "queryKey")?.value;
   return Array.isArray(queryKey);
 }

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

@@ -2,6 +2,9 @@ import type { FormFocusRequest, FormValidationError } from '../types/index.js';
 export declare function useFormFocus(params: {
     getErrors: () => readonly FormValidationError[];
 }): {
+    focusField: (path: string | readonly string[]) => Promise<boolean>;
+    focusFirstInvalid: (errors?: readonly FormValidationError[]) => Promise<boolean>;
+    registerField: (path: string | readonly string[], element: HTMLElement) => () => void;
     request: import("vue").Ref<{
         path: string;
         sequence: number;
@@ -9,7 +12,4 @@ export declare function useFormFocus(params: {
         path: string;
         sequence: number;
     } | null>;
-    registerField: (path: string | readonly string[], element: HTMLElement) => () => void;
-    focusField: (path: string | readonly string[]) => Promise<boolean>;
-    focusFirstInvalid: (errors?: readonly FormValidationError[]) => Promise<boolean>;
 };

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

@@ -13,35 +13,46 @@ export function useFormFocus(params) {
     const key = normalizeFormFocusPath(path);
     fieldElements.set(key, element);
     return () => {
-      if (fieldElements.get(key) === element) fieldElements.delete(key);
+      if (fieldElements.get(key) === element) {
+        fieldElements.delete(key);
+      }
     };
   }
   async function focusField(path) {
     await nextTick();
     const key = normalizeFormFocusPath(path);
-    request.value = { path: key, sequence: ++sequence };
+    sequence += 1;
+    request.value = { path: key, sequence };
     await nextTick();
     const focused = await focusFormFieldElement(fieldElements.get(key) ?? null) || await focusFormField(path);
-    if (focused) return true;
+    if (focused) {
+      return true;
+    }
+    if (!import.meta.client) {
+      return false;
+    }
     await waitForFocusRequest();
     const element = fieldElements.get(key);
     return Boolean(document.activeElement && element?.contains(document.activeElement));
   }
-  async function focusFirstInvalid(errors = params.getErrors()) {
+  async function focusFirstInvalid(errors) {
     await nextTick();
-    for (const error of errors) {
+    const resolvedErrors = errors ?? params.getErrors();
+    for (const error of resolvedErrors) {
       const focused = await focusField(error.path);
-      if (focused) return true;
+      if (focused) {
+        return true;
+      }
     }
-    return focusFirstInvalidFormField(errors);
+    return focusFirstInvalidFormField(resolvedErrors);
   }
   return {
-    request,
-    registerField,
     focusField,
-    focusFirstInvalid
+    focusFirstInvalid,
+    registerField,
+    request
   };
 }
 function waitForFocusRequest() {
-  return new Promise((resolve) => window.setTimeout(resolve, 160));
+  return new Promise((resolve) => setTimeout(resolve, 160));
 }

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { FormContainerLayout, FormItemLayout, FormLayoutConfig } from '../types/index.js';
 export declare function useFormGridLayout(params: {
     layout: ComputedRef<FormLayoutConfig>;

package/dist/runtime/form/composables/use-form-option-registry.d.ts

@@ -1,7 +1,7 @@
 import type { FormOptionRuntimeState } from '../types/index.js';
 export declare function useFormOptionRegistry(): {
-    register: (path: readonly string[], state: FormOptionRuntimeState) => () => void;
     get: (path: readonly string[]) => FormOptionRuntimeState;
     refresh: (path: string | readonly string[]) => Promise<void>;
     refreshMany: (paths: readonly (string | readonly string[])[]) => Promise<void>;
+    register: (path: readonly string[], state: FormOptionRuntimeState) => () => void;
 };

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

@@ -1,4 +1,6 @@
-import { computed, shallowReactive } from "vue";
+import { computed, ref, shallowReactive } from "vue";
+import { isString } from "../utils/predicate.js";
+const emptyLabel = ref();
 export function useFormOptionRegistry() {
   const states = shallowReactive({});
   const emptyState = createEmptyOptionState();
@@ -6,7 +8,9 @@ export function useFormOptionRegistry() {
     const key = optionStateKey(path);
     states[key] = state;
     return () => {
-      if (states[key] === state) delete states[key];
+      if (states[key] === state) {
+        delete states[key];
+      }
     };
   }
   function get(path) {
@@ -19,35 +23,49 @@ export function useFormOptionRegistry() {
     await Promise.all(paths.map((path) => refresh(path)));
   }
   return {
-    register,
     get,
     refresh,
-    refreshMany
+    refreshMany,
+    register
   };
 }
 function createEmptyOptionState() {
   return {
-    items: computed(() => []),
-    pending: computed(() => false),
-    fetching: computed(() => false),
-    loading: computed(() => false),
-    creating: computed(() => false),
+    activate: () => {
+    },
+    add: () => {
+    },
     creatable: computed(() => false),
-    createLabel: computed(() => void 0),
-    error: computed(() => null),
+    create: async () => null,
+    createLabel: computed(() => emptyLabel.value),
+    creating: computed(() => false),
     disableOnLoading: computed(() => false),
-    refreshable: computed(() => false),
-    selectCreatedOption: computed(() => true),
+    error: computed(() => null),
+    fetching: computed(() => false),
+    hasMore: computed(() => false),
+    items: computed(() => []),
+    loadChildren: () => Promise.resolve(),
+    loadMore: () => Promise.resolve(),
+    loading: computed(() => false),
+    loadingMore: computed(() => false),
+    pending: computed(() => false),
+    prefetchDistance: computed(() => "viewport"),
     refresh: async () => {
     },
-    add: () => {
-    },
-    create: async () => null
+    refreshable: computed(() => false),
+    remote: computed(() => false),
+    retry: () => Promise.resolve(),
+    retryable: computed(() => false),
+    search: computed(() => ""),
+    selectCreatedOption: computed(() => true),
+    selectedItems: computed(() => []),
+    setSearch: () => {
+    }
   };
 }
 function optionStateKey(path) {
   return path.join(".");
 }
 function optionPathSegments(path) {
-  return typeof path === "string" ? path.split(".").filter(Boolean) : path;
+  return isString(path) ? path.split(".").filter(Boolean) : path;
 }

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

@@ -1,12 +1,12 @@
-import type { FormApiRuntimeInstance, FormObject, FormSubmitHandlerResult } from '../types/index.js';
+import type { FormValue, FormApiRuntimeInstance, FormObject, FormSubmitHandlerResult } from '../types/index.js';
 export declare function useFormOverlayController(instance: FormApiRuntimeInstance): {
-    form: import("../types/index.js").FormController<unknown, unknown>;
-    open: import("vue").Ref<boolean, boolean>;
-    title: import("vue").ComputedRef<string | undefined>;
     description: import("vue").ComputedRef<string>;
     dismissible: import("vue").ComputedRef<boolean>;
-    handleOpenUpdate: (value: boolean) => void;
-    handleSubmitted: (formData: FormObject, result: FormSubmitHandlerResult<unknown>) => void;
+    form: import("../types/index.js").FormController<unknown, unknown>;
     handleCancelled: () => void;
+    handleOpenUpdate: (value: boolean) => void;
+    handleSubmitted: (formData: FormObject, result: FormSubmitHandlerResult<FormValue>) => void;
+    open: import("vue").Ref<boolean, boolean>;
     resolveAfterClose: () => void;
+    title: import("vue").ComputedRef<string | undefined>;
 };

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

@@ -6,9 +6,9 @@ import { useFormApi } from "./use-form-api.js";
 export function useFormOverlayController(instance) {
   const formApi = useFormApi();
   const form = useForm({
-    schema: computed(() => instance.schema),
     input: computed(() => instance.input),
-    onSubmit: instance.onSubmit
+    onSubmit: instance.onSubmit,
+    schema: computed(() => instance.schema)
   });
   const open = ref(true);
   const pendingResolution = ref(null);
@@ -35,7 +35,9 @@ export function useFormOverlayController(instance) {
   }
   async function submitOverlay() {
     const result = await form.submitHandler();
-    if (!result.success) return false;
+    if (!result.success) {
+      return false;
+    }
     requestComplete(resolveCurrentOutput(), result.data);
     return true;
   }
@@ -47,19 +49,23 @@ export function useFormOverlayController(instance) {
     requestCancel();
   }
   function requestComplete(formData, submitData) {
-    closeWithResolution({ type: "complete", formData, submitData });
+    closeWithResolution({ formData, submitData, type: "complete" });
   }
   function requestCancel() {
-    closeWithResolution({ type: "cancel", formData: resolveCurrentOutput() });
+    closeWithResolution({ formData: resolveCurrentOutput(), type: "cancel" });
   }
   function closeWithResolution(resolution) {
-    if (pendingResolution.value) return;
+    if (pendingResolution.value) {
+      return;
+    }
     pendingResolution.value = resolution;
     open.value = false;
   }
   function resolveAfterClose() {
     const resolution = pendingResolution.value;
-    if (!resolution) return;
+    if (!resolution) {
+      return;
+    }
     pendingResolution.value = null;
     if (resolution.type === "complete") {
       instance.complete(resolution.formData, resolution.submitData);
@@ -71,14 +77,14 @@ export function useFormOverlayController(instance) {
     return isRecord(form.output.value) ? form.output.value : {};
   }
   return {
-    form,
-    open,
-    title,
     description,
     dismissible,
+    form,
+    handleCancelled,
     handleOpenUpdate,
     handleSubmitted,
-    handleCancelled,
-    resolveAfterClose
+    open,
+    resolveAfterClose,
+    title
   };
 }

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

@@ -1,6 +1,5 @@
 import type { FormRuntime, UseFormRuntimeParams } from '../types/index.js';
-import { childParentPath, fieldPath } from '../utils/state.js';
+export { childParentPath, fieldPath } from '../utils/state.js';
 export declare function provideFormRuntime(runtime: FormRuntime): void;
 export declare function useFormRuntimeContext(): FormRuntime;
 export declare function useFormRuntime(params: UseFormRuntimeParams): FormRuntime;
-export { childParentPath, fieldPath };