nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,2 +1,2 @@
-import type { FormController, UseFormParams } from '../types/index.js';
-export declare function useForm<const TSchema, TSubmitData = unknown>(params: UseFormParams<TSchema, TSubmitData>): FormController<TSchema, TSubmitData>;
+import type { FormValue, FormController, UseFormParams } from '../types/index.js';
+export declare function useForm<const TSchema, TSubmitData = FormValue>(params: UseFormParams<TSchema, TSubmitData>): FormController<TSchema, TSubmitData>;

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

@@ -1,14 +1,15 @@
 import { computed, shallowRef, toValue } from "vue";
 import { isRecord } from "../utils/path.js";
+import { isBoolean, isUndefined, stringArray } from "../utils/predicate.js";
 export function useForm(params) {
   const runtime = shallowRef(null);
   const schema = computed(() => toValue(params.schema));
   const input = computed(() => params.input ? toValue(params.input) : void 0);
   const syncInput = computed(
-    () => typeof params.syncInput !== "undefined" ? toValue(params.syncInput) : getSchemaSyncInput(schema.value)
+    () => isUndefined(params.syncInput) ? getSchemaSyncInput(schema.value) : toValue(params.syncInput)
   );
   const validationMode = computed(
-    () => typeof params.validate !== "undefined" ? toValue(params.validate) : getSchemaValidationMode(schema.value)
+    () => isUndefined(params.validate) ? getSchemaValidationMode(schema.value) : toValue(params.validate)
   );
   const isBound = computed(() => runtime.value !== null);
   const context = computed(() => runtime.value?.context ?? {});
@@ -33,7 +34,9 @@ export function useForm(params) {
   const canGoNext = computed(() => runtime.value?.canGoNext.value ?? false);
   async function submitHandler(externalSubmitHandler) {
     const current = runtime.value;
-    if (!current) return { success: false };
+    if (!current) {
+      return { success: false };
+    }
     return await current.submitHandler(externalSubmitHandler ?? params.onSubmit);
   }
   async function submit(externalSubmitHandler) {
@@ -58,8 +61,8 @@ export function useForm(params) {
   function clearErrors() {
     runtime.value?.clearErrors();
   }
-  function reset() {
-    runtime.value?.reset();
+  async function reset() {
+    await runtime.value?.reset();
   }
   async function nextStep() {
     return await runtime.value?.nextStep() ?? false;
@@ -74,29 +77,31 @@ export function useForm(params) {
     runtime.value = nextRuntime;
   }
   function unbind(previousRuntime) {
-    if (runtime.value === previousRuntime) runtime.value = null;
+    if (runtime.value === previousRuntime) {
+      runtime.value = null;
+    }
   }
   const state = {
+    get: (path) => runtime.value?.getValue(path),
     internal,
     output,
-    get: (path) => runtime.value?.getValue(path),
-    set: (path, value) => runtime.value?.setValue(path, value),
-    reset
+    reset,
+    set: (path, value) => runtime.value?.setValue(path, value)
   };
   const meta = {
+    dirtyPaths,
     isBound,
-    isDirty,
-    dirtyPaths
+    isDirty
   };
   const validation = {
+    clear: clearErrors,
     errors,
+    focusFirstInvalid,
+    getError,
     hasErrors,
     isValid,
     validate,
-    validateCurrentStep,
-    focusFirstInvalid,
-    getError,
-    clear: clearErrors
+    validateCurrentStep
   };
   const submission = {
     actionPending,
@@ -105,52 +110,54 @@ export function useForm(params) {
     submitHandler
   };
   const navigation = {
-    currentStepIndex,
+    canGoNext,
+    canGoPrevious,
     currentStep,
-    steps,
-    isStepped,
+    currentStepIndex,
+    goTo: goToStep,
     isFirstStep,
     isLastStep,
-    canGoPrevious,
-    canGoNext,
+    isStepped,
     next: nextStep,
     previous: previousStep,
-    goTo: goToStep
+    steps
   };
   return {
-    schema,
-    input,
-    syncInput,
-    validationMode,
+    actionPending,
+    bind,
     context,
-    state,
-    meta,
-    validation,
-    submission,
-    navigation,
-    internal,
-    output,
-    errors,
     dirtyPaths,
+    errors,
+    focus,
+    input,
+    internal,
     isDirty,
-    actionPending,
     isSubmitting,
-    validate,
-    focus,
-    submit,
-    submitHandler,
-    reset,
+    meta,
+    navigation,
     nextStep,
+    output,
     previousStep,
-    bind,
-    unbind
+    reset,
+    schema,
+    state,
+    submission,
+    submit,
+    submitHandler,
+    syncInput,
+    unbind,
+    validate,
+    validation,
+    validationMode
   };
 }
 function getSchemaSyncInput(schema) {
   const controls = getSchemaControls(schema);
   const value = controls ? Object.getOwnPropertyDescriptor(controls, "syncInput")?.value : void 0;
-  if (typeof value === "boolean") return value;
-  return Array.isArray(value) ? value.filter((path) => typeof path === "string") : false;
+  if (isBoolean(value)) {
+    return value;
+  }
+  return stringArray(value);
 }
 function getSchemaValidationMode(schema) {
   const controls = getSchemaControls(schema);
@@ -158,7 +165,9 @@ function getSchemaValidationMode(schema) {
   return value === false || value === "required" || value === "rules" ? value : true;
 }
 function getSchemaControls(schema) {
-  if (!isRecord(schema)) return void 0;
+  if (!isRecord(schema)) {
+    return;
+  }
   const controls = Object.getOwnPropertyDescriptor(schema, "controls")?.value;
   return isRecord(controls) ? controls : void 0;
 }

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

@@ -0,0 +1,29 @@
+import type { ComputedRef } from 'vue';
+import type { FormValue, FormFieldApi, FormFieldCallbackParams, FormRemoteOptionConfig } from '../types/index.js';
+import type { FormOptionKeys, ResolvedFormOption } from '../utils/options.js';
+export interface UseRemoteFieldOptionsParams {
+    config: ComputedRef<FormRemoteOptionConfig<FormValue> | null>;
+    api: ComputedRef<FormFieldApi>;
+    callbackParams: ComputedRef<FormFieldCallbackParams>;
+    optionKeys: ComputedRef<FormOptionKeys>;
+    multiple: () => boolean;
+}
+export declare function useRemoteFieldOptions(params: UseRemoteFieldOptionsParams): {
+    activate: () => void;
+    error: ComputedRef<unknown>;
+    fetching: ComputedRef<boolean>;
+    hasMore: ComputedRef<boolean>;
+    items: ComputedRef<readonly ResolvedFormOption[]>;
+    loadChildren: (option: ResolvedFormOption) => Promise<void>;
+    loadMore: () => Promise<void>;
+    loadingMore: ComputedRef<boolean>;
+    pending: ComputedRef<boolean>;
+    prefetchDistance: ComputedRef<number | "viewport">;
+    refresh: () => Promise<void>;
+    remote: ComputedRef<boolean>;
+    retry: () => Promise<void>;
+    retryable: ComputedRef<boolean>;
+    search: ComputedRef<string>;
+    selectedItems: ComputedRef<readonly ResolvedFormOption[]>;
+    setSearch: (term: string) => void;
+};

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

@@ -0,0 +1,468 @@
+import { useQueryClient } from "@tanstack/vue-query";
+import { debounceFilter, watchWithFilter } from "@vueuse/core";
+import { computed, ref, shallowRef, watch } from "vue";
+import { formOptionKey, mergeResolvedOptions, normalizeOptionItems } from "../utils/options.js";
+import { isRecord } from "../utils/path.js";
+import {
+  isBoolean,
+  isFunction,
+  isNumber,
+  isPromise,
+  isString,
+  isUndefined
+} from "../utils/predicate.js";
+const DEFAULT_SEARCH_DEBOUNCE = 250;
+export function useRemoteFieldOptions(params) {
+  const queryClient = resolveQueryClient();
+  const loaded = shallowRef([]);
+  const retained = shallowRef([]);
+  const rawOptions = /* @__PURE__ */ new Map();
+  const searchInput = ref("");
+  const search = ref("");
+  const pageIndex = ref(1);
+  const cursor = ref(null);
+  const nextCursor = ref(null);
+  const hasMore = ref(false);
+  const active = ref(false);
+  const generation = ref(0);
+  const selectionGeneration = ref(0);
+  const selectedRun = ref(0);
+  const sourceFetching = ref(false);
+  const loadingMore = ref(false);
+  const selectedFetching = ref(false);
+  const sourceError = shallowRef(null);
+  const selectedError = shallowRef(null);
+  const failedPage = shallowRef(null);
+  const childRequests = /* @__PURE__ */ new Map();
+  const enabled = computed(() => params.config.value !== null);
+  const pageSize = computed(() => Math.max(1, params.config.value?.pagination.size ?? 25));
+  const paginationType = computed(() => params.config.value?.pagination.type ?? "page");
+  const prefetchDistance = computed(
+    () => params.config.value?.pagination.prefetchDistance ?? "viewport"
+  );
+  const minLength = computed(() => Math.max(0, params.config.value?.search?.minLength ?? 0));
+  const canFetch = computed(
+    () => search.value.length === 0 || search.value.length >= minLength.value
+  );
+  const selectedValues = computed(() => {
+    const value = params.api.value.value.get();
+    if (Array.isArray(value)) {
+      return value.filter(isOptionValue);
+    }
+    return isOptionValue(value) ? [value] : [];
+  });
+  const selectedItems = computed(() => {
+    const keys = new Set(selectedValues.value.map(formOptionKey));
+    return mergeResolvedOptions(
+      flatten(retained.value).filter((option) => keys.has(formOptionKey(option.value))),
+      flatten(loaded.value).filter((option) => keys.has(formOptionKey(option.value)))
+    );
+  });
+  const items = computed(
+    () => mergeResolvedOptions(selectedItems.value, loaded.value)
+  );
+  const missingSelected = computed(() => {
+    const known = new Set(
+      [...flatten(retained.value), ...flatten(loaded.value)].map(
+        (option) => formOptionKey(option.value)
+      )
+    );
+    return selectedValues.value.filter((value) => !known.has(formOptionKey(value)));
+  });
+  const pending = computed(
+    () => enabled.value && active.value && canFetch.value && sourceFetching.value && loaded.value.length === 0 && sourceError.value === null
+  );
+  const fetching = computed(
+    () => enabled.value && (sourceFetching.value || selectedFetching.value)
+  );
+  const errorValue = computed(
+    () => enabled.value ? sourceError.value ?? selectedError.value : null
+  );
+  const retryable = computed(
+    () => enabled.value && !fetching.value && errorValue.value !== null
+  );
+  function resolveSelectedRequest(values) {
+    const config = params.config.value;
+    if (!config?.resolveSelected) {
+      return null;
+    }
+    return config.resolveSelected({ ...params.callbackParams.value, values });
+  }
+  async function resolveRemoteResult(source) {
+    if (isPromise(source)) {
+      return await source;
+    }
+    if (!isRuntimeQueryOptions(source)) {
+      return source;
+    }
+    if (!queryClient) {
+      throw new Error("Remote option sources returning query options need a TanStack QueryClient");
+    }
+    const { select, ...fetchOptions } = source;
+    const data = await queryClient.fetchQuery(fetchOptions);
+    return isFunction(select) ? select(data) : data;
+  }
+  function parsePage(result) {
+    if (!isRecord(result) || !Array.isArray(result.options)) {
+      throw new TypeError("Remote option sources must resolve to an object with an options array");
+    }
+    const options = normalizeOptionItems(result.options, params.optionKeys.value);
+    for (const [index, option] of options.entries()) {
+      rawOptions.set(formOptionKey(option.value), result.options[index]);
+    }
+    if (paginationType.value === "cursor") {
+      const next = result.nextCursor;
+      if (next !== null && !isString(next)) {
+        throw new TypeError("Cursor remote options must resolve with nextCursor");
+      }
+      return { hasMore: next !== null, nextCursor: isString(next) ? next : null, options };
+    }
+    if (!isBoolean(result.hasMore)) {
+      throw new TypeError("Paged remote options must resolve with hasMore");
+    }
+    return { hasMore: result.hasMore, nextCursor: null, options };
+  }
+  function retainSelected(candidates) {
+    const keys = new Set(selectedValues.value.map(formOptionKey));
+    retained.value = mergeResolvedOptions(
+      retained.value.filter((option) => containsAny(option, keys)),
+      candidates.filter((option) => containsAny(option, keys))
+    );
+  }
+  async function loadPage(page) {
+    const config = params.config.value;
+    if (!config) {
+      return;
+    }
+    const currentGeneration = generation.value;
+    const isFirstPage = page.index === 1 && page.cursor === null;
+    sourceFetching.value = true;
+    try {
+      const result = await resolveRemoteResult(
+        config.source({
+          ...params.callbackParams.value,
+          page: { cursor: page.cursor, index: page.index, size: pageSize.value },
+          search: search.value
+        })
+      );
+      if (currentGeneration !== generation.value) {
+        return;
+      }
+      const parsed = parsePage(result);
+      loaded.value = isFirstPage ? parsed.options : mergeResolvedOptions(loaded.value, parsed.options);
+      retainSelected(parsed.options);
+      hasMore.value = parsed.hasMore;
+      nextCursor.value = parsed.nextCursor;
+      pageIndex.value = page.index;
+      cursor.value = page.cursor;
+      sourceError.value = null;
+      failedPage.value = null;
+    } catch (error) {
+      if (currentGeneration !== generation.value) {
+        return;
+      }
+      sourceError.value = error;
+      failedPage.value = page;
+    } finally {
+      if (currentGeneration === generation.value) {
+        sourceFetching.value = false;
+      }
+    }
+  }
+  function reload(options) {
+    generation.value += 1;
+    sourceFetching.value = false;
+    loadingMore.value = false;
+    sourceError.value = null;
+    failedPage.value = null;
+    pageIndex.value = 1;
+    cursor.value = null;
+    nextCursor.value = null;
+    hasMore.value = false;
+    if (options.clearSearch) {
+      searchInput.value = "";
+      search.value = "";
+    }
+    if (!active.value || !canFetch.value) {
+      loaded.value = [];
+      return Promise.resolve();
+    }
+    return loadPage({ cursor: null, index: 1 });
+  }
+  function activate() {
+    if (!enabled.value || active.value) {
+      return;
+    }
+    active.value = true;
+    void reload({ clearSearch: false });
+  }
+  function setSearch(term) {
+    if (!enabled.value) {
+      return;
+    }
+    activate();
+    searchInput.value = term;
+  }
+  async function loadMore() {
+    if (!enabled.value || loadingMore.value || sourceFetching.value) {
+      return;
+    }
+    if (failedPage.value) {
+      loadingMore.value = true;
+      try {
+        await loadPage(failedPage.value);
+      } finally {
+        loadingMore.value = false;
+      }
+      return;
+    }
+    if (!hasMore.value) {
+      return;
+    }
+    loadingMore.value = true;
+    try {
+      await loadPage(
+        paginationType.value === "cursor" ? { cursor: nextCursor.value, index: pageIndex.value + 1 } : { cursor: null, index: pageIndex.value + 1 }
+      );
+    } finally {
+      loadingMore.value = false;
+    }
+  }
+  async function hydrateSelected(options) {
+    const values = options.reconcile ? selectedValues.value : missingSelected.value;
+    if (!values.length) {
+      return;
+    }
+    const request = resolveSelectedRequest(values);
+    if (request === null) {
+      return;
+    }
+    selectedRun.value += 1;
+    const run = selectedRun.value;
+    const domain = selectionGeneration.value;
+    selectedFetching.value = true;
+    try {
+      const result = await resolveRemoteResult(request);
+      if (run !== selectedRun.value || domain !== selectionGeneration.value) {
+        return;
+      }
+      const resolved = normalizeOptionItems(
+        Array.isArray(result) ? result : [],
+        params.optionKeys.value
+      );
+      for (const [index, option] of resolved.entries()) {
+        rawOptions.set(formOptionKey(option.value), Array.isArray(result) ? result[index] : option);
+      }
+      const keys = new Set(values.map(formOptionKey));
+      retained.value = mergeResolvedOptions(
+        retained.value.filter((option) => !containsAny(option, keys)),
+        resolved
+      );
+      selectedError.value = null;
+      if (options.reconcile && params.config.value?.clearOnInvalid === true) {
+        reconcileSelection(resolved);
+      }
+    } catch (error) {
+      if (run === selectedRun.value && domain === selectionGeneration.value) {
+        selectedError.value = error;
+      }
+    } finally {
+      if (run === selectedRun.value) {
+        selectedFetching.value = false;
+      }
+    }
+  }
+  function reconcileSelection(resolved) {
+    const valid = new Set(flatten(resolved).map((option) => formOptionKey(option.value)));
+    const current = params.api.value.value.get();
+    if (Array.isArray(current)) {
+      const next = current.filter(
+        (value) => isOptionValue(value) && valid.has(formOptionKey(value))
+      );
+      if (next.length !== current.length) {
+        params.api.value.value.set(next);
+      }
+      return;
+    }
+    if (isOptionValue(current) && !valid.has(formOptionKey(current))) {
+      params.api.value.value.set(params.multiple() ? [] : null);
+    }
+  }
+  async function loadChildren(option) {
+    const config = params.config.value;
+    if (!config) {
+      return;
+    }
+    const key = formOptionKey(option.value);
+    const running = childRequests.get(key);
+    if (running) {
+      return running;
+    }
+    const domain = selectionGeneration.value;
+    const request = loadChildrenPage(config, option, key, domain);
+    childRequests.set(key, request);
+    try {
+      await request;
+    } finally {
+      childRequests.delete(key);
+    }
+  }
+  async function loadChildrenPage(config, option, key, domain) {
+    try {
+      const result = await resolveRemoteResult(
+        config.source({
+          ...params.callbackParams.value,
+          page: { cursor: null, index: 1, size: pageSize.value },
+          parent: rawOptions.get(key) ?? option,
+          search: ""
+        })
+      );
+      if (domain !== selectionGeneration.value) {
+        return;
+      }
+      const parsed = parsePage(result);
+      loaded.value = replaceChildren(loaded.value, key, parsed.options);
+      retained.value = replaceChildren(retained.value, key, parsed.options);
+      retainSelected(loaded.value);
+      sourceError.value = null;
+    } catch (error) {
+      if (domain === selectionGeneration.value) {
+        sourceError.value = error;
+      }
+    }
+  }
+  async function refresh() {
+    if (!enabled.value) {
+      return;
+    }
+    const tasks = [];
+    if (active.value) {
+      tasks.push(reload({ clearSearch: false }));
+    }
+    if (selectedValues.value.length) {
+      tasks.push(hydrateSelected({ reconcile: false }));
+    }
+    await Promise.all(tasks);
+  }
+  async function retry() {
+    if (!enabled.value) {
+      return;
+    }
+    const tasks = [];
+    if (sourceError.value !== null) {
+      tasks.push(failedPage.value ? loadMore() : reload({ clearSearch: false }));
+    }
+    if (selectedError.value !== null) {
+      tasks.push(hydrateSelected({ reconcile: false }));
+    }
+    await Promise.all(tasks);
+  }
+  watchWithFilter(
+    searchInput,
+    (term) => {
+      const next = term.trim();
+      if (next === search.value) {
+        return;
+      }
+      search.value = next;
+      void reload({ clearSearch: false });
+    },
+    {
+      eventFilter: debounceFilter(
+        () => params.config.value?.search?.debounce ?? DEFAULT_SEARCH_DEBOUNCE
+      )
+    }
+  );
+  watch(
+    selectedValues,
+    (values) => {
+      if (!enabled.value) {
+        return;
+      }
+      if (!values.length) {
+        retained.value = [];
+        selectedError.value = null;
+        return;
+      }
+      retainSelected([]);
+      if (missingSelected.value.length) {
+        void hydrateSelected({ reconcile: false });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => {
+      const config = params.config.value;
+      const { deps } = params.callbackParams.value;
+      if (!config?.refreshOn?.length || !isRecord(deps)) {
+        return [];
+      }
+      return config.refreshOn.map((alias) => deps[alias]);
+    },
+    (next, previous) => {
+      if (isUndefined(previous) || sameValues(next, previous)) {
+        return;
+      }
+      selectionGeneration.value += 1;
+      void reload({ clearSearch: true });
+      void hydrateSelected({ reconcile: true });
+    },
+    { deep: true }
+  );
+  return {
+    activate,
+    error: errorValue,
+    fetching,
+    hasMore: computed(() => enabled.value && hasMore.value),
+    items,
+    loadChildren,
+    loadMore,
+    loadingMore: computed(() => loadingMore.value),
+    pending,
+    prefetchDistance,
+    refresh,
+    remote: enabled,
+    retry,
+    retryable,
+    search: computed(() => searchInput.value),
+    selectedItems,
+    setSearch
+  };
+}
+function resolveQueryClient() {
+  try {
+    return useQueryClient();
+  } catch {
+    return null;
+  }
+}
+function isRuntimeQueryOptions(value) {
+  return isRecord(value) && Array.isArray(Object.getOwnPropertyDescriptor(value, "queryKey")?.value);
+}
+function isOptionValue(value) {
+  return isString(value) || isNumber(value) || isBoolean(value);
+}
+function flatten(options) {
+  return options.flatMap((option) => [option, ...flatten(option.children ?? [])]);
+}
+function containsAny(option, keys) {
+  if (keys.has(formOptionKey(option.value))) {
+    return true;
+  }
+  return (option.children ?? []).some((child) => containsAny(child, keys));
+}
+function replaceChildren(options, key, children) {
+  return options.map((option) => {
+    if (formOptionKey(option.value) === key) {
+      return { ...option, children };
+    }
+    if (!option.children) {
+      return option;
+    }
+    return { ...option, children: replaceChildren(option.children, key, children) };
+  });
+}
+function sameValues(next, previous) {
+  return next.length === previous.length && next.every((value, index) => JSON.stringify(value) === JSON.stringify(previous[index]));
+}

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

@@ -0,0 +1,8 @@
+import type { FormArrayCollapseField } from './types.js';
+type __VLS_Props = {
+    field: FormArrayCollapseField;
+    path: readonly 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;
+export default _default;