nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -9,7 +9,17 @@ import {
   normalizeOptionSelection
 } from "../utils/options.js";
 import { isRecord, relativePathSegments } from "../utils/path.js";
+import {
+  isBoolean,
+  isFunction,
+  isNumber,
+  isObject,
+  isPromise,
+  isString,
+  isUndefined
+} from "../utils/predicate.js";
 import { resolveFormText } from "../utils/text.js";
+import { useRemoteFieldOptions } from "./use-remote-field-options.js";
 export function useFieldOptions(params) {
   const promiseOptions = shallowRef([]);
   const createdOptions = shallowRef([]);
@@ -20,26 +30,35 @@ export function useFieldOptions(params) {
   const refreshRun = ref(0);
   const promiseResolution = shallowRef(null);
   const creating = ref(false);
+  const remoteConfig = computed(() => resolveRemoteOptionConfig(params.field()));
+  const optionKeys = computed(() => resolveOptionKeys(params.field()));
+  const remote = useRemoteFieldOptions({
+    api: params.api,
+    callbackParams: params.callbackParams,
+    config: remoteConfig,
+    multiple: () => Object.getOwnPropertyDescriptor(params.field(), "multiple")?.value === true,
+    optionKeys
+  });
   const trackedOptionSource = computed(() => {
     void refreshRun.value;
+    if (remoteConfig.value) {
+      return emptyTrackedOptionSource();
+    }
     return resolveTrackedOptionSource(params.field(), params.callbackParams.value);
   });
   const resolvedSource = computed(() => trackedOptionSource.value.source);
-  const optionKeys = computed(() => resolveOptionKeys(params.field()));
   const contextResources = computed(() => {
-    const ctx = params.callbackParams.value.ctx;
-    if (!isRecord(ctx)) return [];
+    const { ctx } = params.callbackParams.value;
+    if (!isRecord(ctx)) {
+      return [];
+    }
     return trackedOptionSource.value.contextKeys.map((key) => Object.getOwnPropertyDescriptor(ctx, key)?.value).filter(isAsyncResource);
   });
   const contextPending = computed(
-    () => contextResources.value.some(
-      (resource) => resource.pending && typeof resource.value === "undefined"
-    )
+    () => contextResources.value.some((resource) => resource.pending && isUndefined(resource.value))
   );
   const contextFetching = computed(
-    () => contextResources.value.some(
-      (resource) => resource.fetching && typeof resource.value !== "undefined"
-    )
+    () => contextResources.value.some((resource) => resource.fetching && !isUndefined(resource.value))
   );
   const contextError = computed(
     () => contextResources.value.find((resource) => resource.error !== null)?.error ?? null
@@ -52,12 +71,13 @@ export function useFieldOptions(params) {
   const optionQuery = useQuery(
     computed(() => {
       const source = querySource.value;
-      if (!source)
+      if (!source) {
         return {
-          queryKey: ["form-options", params.path().join("."), "disabled"],
+          enabled: false,
           queryFn: async () => [],
-          enabled: false
+          queryKey: ["form-options", params.path().join("."), "disabled"]
         };
+      }
       return {
         placeholderData: keepPreviousData,
         ...source
@@ -90,11 +110,16 @@ export function useFieldOptions(params) {
       const resolution = resolvePromiseOptions(source);
       promiseResolution.value = resolution;
       await resolution;
-      if (promiseResolution.value === resolution) promiseResolution.value = null;
+      if (promiseResolution.value === resolution) {
+        promiseResolution.value = null;
+      }
     },
     { immediate: true }
   );
   const sourceItems = computed(() => {
+    if (remoteConfig.value) {
+      return remote.items.value;
+    }
     if (querySource.value) {
       const data = unref(optionQuery.data);
       return normalizeOptionItems(Array.isArray(data) ? data : [], optionKeys.value);
@@ -108,21 +133,53 @@ export function useFieldOptions(params) {
     )
   );
   const hasItems = computed(() => items.value.length > 0);
+  const selectedItems = computed(() => {
+    if (remoteConfig.value) {
+      return remote.selectedItems.value;
+    }
+    const current = params.api.value.value.get();
+    const selected = Array.isArray(current) ? current.filter(isOptionValue) : [current];
+    const keys = new Set(selected.filter(isOptionValue).map(formOptionKey));
+    return items.value.filter((item) => keys.has(formOptionKey(item.value)));
+  });
   const pending = computed(() => {
-    if (contextPending.value && !hasItems.value) return true;
-    if (querySource.value) return unref(optionQuery.isPending) && !hasItems.value;
+    if (remoteConfig.value) {
+      return remote.pending.value;
+    }
+    if (contextPending.value && !hasItems.value) {
+      return true;
+    }
+    if (querySource.value) {
+      return unref(optionQuery.isPending) && !hasItems.value;
+    }
     return promisePending.value && !hasItems.value;
   });
   const fetching = computed(() => {
-    if (contextFetching.value && hasItems.value) return true;
-    if (querySource.value) return unref(optionQuery.isFetching) && hasItems.value;
+    if (remoteConfig.value) {
+      return remote.fetching.value;
+    }
+    if (contextFetching.value && hasItems.value) {
+      return true;
+    }
+    if (querySource.value) {
+      return unref(optionQuery.isFetching) && hasItems.value;
+    }
     return promiseFetching.value && hasItems.value;
   });
   const loading = computed(() => pending.value);
   const error = computed(() => {
-    if (contextError.value !== null) return contextError.value;
-    if (trackedOptionSource.value.error !== null) return trackedOptionSource.value.error;
-    if (querySource.value) return unref(optionQuery.error) ?? null;
+    if (remoteConfig.value) {
+      return remote.error.value;
+    }
+    if (contextError.value !== null) {
+      return contextError.value;
+    }
+    if (trackedOptionSource.value.error !== null) {
+      return trackedOptionSource.value.error;
+    }
+    if (querySource.value) {
+      return unref(optionQuery.error) ?? null;
+    }
     return promiseError.value;
   });
   const refreshable = computed(() => optionConfig.value?.allowOptionsRefresh === true);
@@ -135,20 +192,32 @@ export function useFieldOptions(params) {
     () => optionConfig.value?.create?.selectOnCreation !== false
   );
   const state = {
-    items,
-    pending,
-    fetching,
-    loading,
-    creating: computed(() => creating.value),
+    activate: remote.activate,
+    add,
     creatable,
+    create,
     createLabel,
-    error,
+    creating: computed(() => creating.value),
     disableOnLoading,
+    error,
+    fetching,
+    hasMore: remote.hasMore,
+    items,
+    loadChildren: remote.loadChildren,
+    loadMore: remote.loadMore,
+    loading,
+    loadingMore: remote.loadingMore,
+    pending,
+    prefetchDistance: remote.prefetchDistance,
+    refresh,
     refreshable,
+    remote: remote.remote,
+    retry: remote.retry,
+    retryable: remote.retryable,
+    search: remote.search,
     selectCreatedOption,
-    refresh,
-    add,
-    create
+    selectedItems,
+    setSearch: remote.setSearch
   };
   const unregister = params.register(params.path(), state);
   onScopeDispose(unregister);
@@ -166,6 +235,10 @@ export function useFieldOptions(params) {
   );
   watch(items, (nextOptions) => clearInvalidValue(nextOptions), { immediate: true });
   async function refresh() {
+    if (remoteConfig.value) {
+      await remote.refresh();
+      return;
+    }
     await Promise.all(contextResources.value.map((resource) => resource.refresh()));
     if (querySource.value) {
       await optionQuery.refetch();
@@ -177,25 +250,38 @@ export function useFieldOptions(params) {
   }
   function add(option) {
     const normalized = normalizeOptionItem(option, optionKeys.value);
-    if (items.value.some((item) => formOptionKey(item.value) === formOptionKey(normalized.value)))
+    if (items.value.some((item) => formOptionKey(item.value) === formOptionKey(normalized.value))) {
       return normalized;
+    }
     createdOptions.value = [...createdOptions.value, option];
     return normalized;
   }
   async function create(label) {
+    const normalizedLabel = label.trim();
+    if (!normalizedLabel || creating.value) {
+      return null;
+    }
     const createOption = optionConfig.value?.create;
-    if (!isRecord(createOption)) return null;
+    if (!isRecord(createOption)) {
+      return null;
+    }
     const handler = Object.getOwnPropertyDescriptor(createOption, "handler")?.value;
-    if (typeof handler !== "function") return null;
+    if (!isFunction(handler)) {
+      return null;
+    }
     creating.value = true;
     try {
       const result = await handler({
         ...params.callbackParams.value,
-        label
+        label: normalizedLabel
       });
-      if (result === null || typeof result === "undefined") return null;
+      if (result === null || isUndefined(result)) {
+        return null;
+      }
       const normalized = add(result);
-      if (selectCreatedOption.value) selectOption(normalized.value);
+      if (selectCreatedOption.value) {
+        selectOption(normalized.value);
+      }
       await params.refreshFieldOptions(
         resolveRevalidatePaths(params.path(), createOption.revalidateFieldOptions ?? [])
       );
@@ -211,16 +297,26 @@ export function useFieldOptions(params) {
     }
     const current = params.api.value.value.get();
     const selected = Array.isArray(current) ? current.filter(isOptionValue) : [];
-    if (selected.some((item) => formOptionKey(item) === formOptionKey(value))) return;
+    if (selected.some((item) => formOptionKey(item) === formOptionKey(value))) {
+      return;
+    }
     params.api.value.value.set([...selected, value]);
   }
   function clearInvalidValue(options) {
-    if (!optionConfig.value) return;
-    if (pending.value) return;
-    if (optionConfig.value?.clearOnInvalid === false) return;
+    if (!optionConfig.value || remoteConfig.value) {
+      return;
+    }
+    if (pending.value) {
+      return;
+    }
+    if (optionConfig.value?.clearOnInvalid === false) {
+      return;
+    }
     const current = params.api.value.value.get();
     const nextValue = normalizeOptionSelection(current, options);
-    if (!hasSelectionChanged(current, nextValue)) return;
+    if (!hasSelectionChanged(current, nextValue)) {
+      return;
+    }
     params.api.value.value.set(nextValue);
   }
   async function resolvePromiseOptions(source) {
@@ -230,11 +326,15 @@ export function useFieldOptions(params) {
     promiseFetching.value = promiseOptions.value.length > 0;
     try {
       const result = await source;
-      if (promiseRun.value !== run) return;
+      if (promiseRun.value !== run) {
+        return;
+      }
       promiseOptions.value = Array.isArray(result) ? result : [];
       promiseError.value = null;
     } catch (caughtError) {
-      if (promiseRun.value !== run) return;
+      if (promiseRun.value !== run) {
+        return;
+      }
       promiseError.value = caughtError;
     } finally {
       if (promiseRun.value === run) {
@@ -245,16 +345,33 @@ export function useFieldOptions(params) {
   }
   return state;
 }
+function resolveRemoteOptionConfig(field) {
+  if (!createFormFieldInstance(field).capability.has("options")) {
+    return null;
+  }
+  const options = Object.getOwnPropertyDescriptor(field, "options")?.value;
+  return isRemoteOptionConfig(options) ? options : null;
+}
+function isRemoteOptionConfig(value) {
+  return isRecord(value) && value.mode === "remote" && isFunction(Object.getOwnPropertyDescriptor(value, "source")?.value) && isRecord(value.pagination);
+}
 function resolveOptionConfig(field) {
-  if (!createFormFieldInstance(field).capability.has("options")) return void 0;
+  if (!createFormFieldInstance(field).capability.has("options")) {
+    return void 0;
+  }
   const options = Object.getOwnPropertyDescriptor(field, "options")?.value;
   return isFormOptionConfig(options) ? options : void 0;
 }
 function resolveOptionSource(field, params) {
-  if (!createFormFieldInstance(field).capability.has("options")) return [];
+  if (!createFormFieldInstance(field).capability.has("options")) {
+    return [];
+  }
   const options = Object.getOwnPropertyDescriptor(field, "options")?.value;
   const source = isRecord(options) && "source" in options ? options.source : options;
-  return typeof source === "function" ? source(params) : source;
+  return isFunction(source) ? source(params) : source;
+}
+function emptyTrackedOptionSource() {
+  return { contextKeys: [], error: null, source: [] };
 }
 function resolveTrackedOptionSource(field, params) {
   const contextKeys = /* @__PURE__ */ new Set();
@@ -264,66 +381,81 @@ function resolveTrackedOptionSource(field, params) {
   };
   try {
     return {
-      source: resolveOptionSource(field, trackedParams),
       contextKeys: [...contextKeys],
-      error: null
+      error: null,
+      source: resolveOptionSource(field, trackedParams)
     };
   } catch (error) {
-    return { source: null, contextKeys: [...contextKeys], error };
+    return { contextKeys: [...contextKeys], error, source: null };
   }
 }
 function resolveOptionKeys(field) {
-  if (!createFormFieldInstance(field).type.isAny(["tree", "tree-select", "cascader"])) return {};
+  if (!createFormFieldInstance(field).type.isAny(["tree", "tree-select", "cascader"])) {
+    return {};
+  }
   return {
-    value: resolveStringProperty(field, "valueKey"),
+    children: resolveStringProperty(field, "childrenKey"),
     label: resolveStringProperty(field, "labelKey"),
-    children: resolveStringProperty(field, "childrenKey")
+    value: resolveStringProperty(field, "valueKey")
   };
 }
 function resolveStringProperty(value, key) {
+  if (!isObject(value)) {
+    return;
+  }
   const property = Object.getOwnPropertyDescriptor(value, key)?.value;
-  return typeof property === "string" ? property : void 0;
+  return isString(property) ? property : void 0;
 }
 function trackContextAccess(ctx, contextKeys) {
   return new Proxy(ctx, {
-    get(target, property, receiver) {
-      if (typeof property === "string") contextKeys.add(property);
-      return Reflect.get(target, property, receiver);
+    get(target, property) {
+      if (isString(property)) {
+        contextKeys.add(property);
+      }
+      return Object.getOwnPropertyDescriptor(target, property)?.value;
     }
   });
 }
 function isRuntimeQueryOptions(value) {
-  if (!isRecord(value)) return false;
+  if (!isRecord(value)) {
+    return false;
+  }
   const queryKey = Object.getOwnPropertyDescriptor(value, "queryKey")?.value;
   return Array.isArray(queryKey);
 }
-function isPromise(value) {
-  return isRecord(value) && typeof value.then === "function";
-}
 function isAsyncResource(value) {
-  if (!isRecord(value)) return false;
-  return "pending" in value && "fetching" in value && "refresh" in value && typeof value.refresh === "function";
+  if (!isRecord(value)) {
+    return false;
+  }
+  return "pending" in value && "fetching" in value && "refresh" in value && isFunction(value.refresh);
 }
 function isFormOptionConfig(value) {
   return isRecord(value) && "source" in value;
 }
 function hasCreateHandler(value) {
-  if (!isRecord(value)) return false;
-  return typeof Object.getOwnPropertyDescriptor(value, "handler")?.value === "function";
+  if (!isRecord(value)) {
+    return false;
+  }
+  return isFunction(Object.getOwnPropertyDescriptor(value, "handler")?.value);
 }
 function resolveRevalidatePaths(path, revalidatePaths) {
   const parentPath = path.slice(0, -1);
   return revalidatePaths.map((revalidatePath) => {
-    if (revalidatePath.startsWith("$parent"))
+    if (revalidatePath.startsWith("$parent")) {
       return relativePathSegments(parentPath, revalidatePath);
+    }
     return revalidatePath;
   });
 }
 function hasSelectionChanged(current, next) {
-  if (!Array.isArray(current) || !Array.isArray(next)) return current !== next;
-  if (current.length !== next.length) return true;
+  if (!Array.isArray(current) || !Array.isArray(next)) {
+    return current !== next;
+  }
+  if (current.length !== next.length) {
+    return true;
+  }
   return current.some((value, index) => value !== next[index]);
 }
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }

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

@@ -5,9 +5,12 @@ export function useFormActions(params) {
   const { t } = useUiToolsLocale();
   return computed(() => {
     const configuredActions = getCurrentStepActions(params.runtime) ?? getSchemaActions(params.runtime.schema.value);
-    if (configuredActions)
+    if (configuredActions) {
       return configuredActions.map((action) => normalizeFormAction(action, params, t));
-    if (!params.runtime.isStepped.value) return [getBaseFormAction("submit", params, t)];
+    }
+    if (!params.runtime.isStepped.value) {
+      return [getBaseFormAction("submit", params, t)];
+    }
     return [
       getBaseFormAction("previous", params, t),
       getBaseFormAction("next", params, t),
@@ -16,67 +19,89 @@ export function useFormActions(params) {
   });
 }
 function normalizeFormAction(action, params, t) {
-  if (!isBaseFormAction(action)) return action;
+  if (!isBaseFormAction(action)) {
+    return action;
+  }
   return {
     ...getBaseFormAction(action.key, params, t),
     ...action
   };
 }
 function getBaseFormAction(key, params, t) {
-  const slot = params.shell.value !== "inline" ? "right" : "left";
-  if (key === "submit")
+  const slot = params.shell.value === "inline" ? "left" : "right";
+  if (key === "submit") {
     return {
+      condition: (context) => context.isMultiStep ? context.isLastStep : true,
       key,
       label: () => t("form.actions.submitButton"),
-      condition: (context) => context.isMultiStep ? context.isLastStep : true,
+      slot,
       type: "primary",
-      width: "fill md:fit",
-      slot
+      width: "fill md:fit"
     };
-  if (key === "next")
+  }
+  if (key === "next") {
     return {
+      condition: (context) => !context.isLastStep,
       key,
       label: () => t("form.actions.nextButton"),
-      condition: (context) => !context.isLastStep,
+      slot,
       type: "primary",
-      width: "fill md:fit",
-      slot
+      width: "fill md:fit"
     };
-  if (key === "previous")
+  }
+  if (key === "previous") {
     return {
+      color: "neutral",
+      disabled: (context) => context.isFirstStep,
       key,
       label: () => t("form.actions.prevButton"),
-      disabled: (context) => context.isFirstStep,
-      width: "fill md:fit",
-      slot
+      slot,
+      variant: "outline",
+      width: "fill md:fit"
     };
-  if (key === "reset")
+  }
+  if (key === "reset") {
     return {
+      color: "neutral",
       key,
       label: () => t("form.actions.resetButton"),
-      width: "fill md:fit",
-      slot
+      slot,
+      variant: "outline",
+      width: "fill md:fit"
     };
+  }
   return {
+    color: "neutral",
     key,
     label: () => t("form.actions.cancelButton"),
-    width: "fill md:fit",
-    slot
+    slot,
+    variant: "outline",
+    width: "fill md:fit"
   };
 }
 function getSchemaActions(schema) {
-  if (!isRecord(schema)) return void 0;
+  if (!isRecord(schema)) {
+    return;
+  }
   const actions = Object.getOwnPropertyDescriptor(schema, "actions")?.value;
   return isFormActionList(actions) ? actions : void 0;
 }
 function getCurrentStepActions(runtime) {
-  if (!runtime.isStepped.value) return void 0;
+  if (!runtime.isStepped.value) {
+    return;
+  }
   const schema = runtime.schema.value;
-  if (!isRecord(schema)) return void 0;
+  if (!isRecord(schema)) {
+    return;
+  }
   const steps = Object.getOwnPropertyDescriptor(schema, "steps")?.value;
-  if (!Array.isArray(steps)) return void 0;
+  if (!Array.isArray(steps)) {
+    return;
+  }
   const step = steps[runtime.currentStepIndex.value];
-  if (!isRecord(step)) return void 0;
+  if (!isRecord(step)) {
+    return;
+  }
   const actions = Object.getOwnPropertyDescriptor(step, "actions")?.value;
   return isFormActionList(actions) ? actions : void 0;
 }