nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,14 +1,27 @@
-import { debounceFilter, throttleFilter, watchWithFilter } from "@vueuse/core";
-import { computed, onMounted } from "vue";
+import { watchWithFilter } from "@vueuse/core";
+import { computed, onScopeDispose } from "vue";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
+import { isEqualFormValue } from "../utils/compare.js";
 import { createFormFieldInstance } from "../utils/field-instance.js";
-import { resolveFormText } from "../utils/text.js";
+import { cloneFormValue } from "../utils/path.js";
+import { isFunction, isNumber, isObject, isString } from "../utils/predicate.js";
 import { mergeFormUiClass } from "../utils/ui.js";
 import { useFieldOptions } from "./use-field-options.js";
 import { useFormFieldControlAttrs } from "./use-form-field-chrome.js";
 import { useFormRuntimeContext } from "./use-form-runtime.js";
 import { useFormUi } from "./use-form-ui.js";
-export function useFieldControl(field, path) {
+export function useResolvedFieldProps(field, path) {
+  const form = useFormRuntimeContext();
+  const params = computed(() => form.getFieldCallbackParams(path(), field()));
+  return computed(() => {
+    const current = field();
+    const value = "props" in current ? Object.getOwnPropertyDescriptor(current, "props")?.value : void 0;
+    const result = isFunction(value) ? value(params.value) : value;
+    const resolved = isObject(result) && result !== null && !Array.isArray(result) ? result : {};
+    return resolved;
+  });
+}
+export function useFieldControl(field, path, controlOptions = {}) {
   const form = useFormRuntimeContext();
   const formUi = useFormUi();
   const { t } = useUiToolsLocale();
@@ -16,35 +29,39 @@ export function useFieldControl(field, path) {
   const api = computed(() => form.getFieldApi(path(), field()));
   const params = computed(() => form.getFieldCallbackParams(path(), field()));
   const options = useFieldOptions({
-    field,
-    path,
     api,
     callbackParams: params,
-    register: form.registerFieldOptions,
-    refreshFieldOptions: form.refreshFieldOptions
+    field,
+    path,
+    refreshFieldOptions: form.refreshFieldOptions,
+    register: form.registerFieldOptions
+  });
+  const validationPending = computed(() => api.value.validation.pending());
+  const interactionOwner = computed(() => path().join("."));
+  const interactionOwnerClass = computed(
+    () => `nut-form-field-owner:${encodeURIComponent(interactionOwner.value)}`
+  );
+  const fieldProps = useResolvedFieldProps(field, path);
+  const resolvedProps = computed(() => {
+    const record = fieldProps.value;
+    return record;
   });
   const controlProps = computed(() => {
     const current = field();
     const fieldUi = formUi.ui.value.fields?.[current.type];
+    const bareClass = isString(fieldControlAttrs.value.class) ? fieldControlAttrs.value.class : void 0;
     const defaults = {
       ...fieldControlAttrs.value,
+      class: mergeFormUiClass(bareClass, fieldUi?.class),
       size: fieldUi?.size ?? formUi.controlSize.value,
-      class: fieldUi?.class,
-      ui: mergeControlUi(formUi.ui.value.control?.ui, fieldUi?.ui)
+      ui: mergeControlUi(fieldControlAttrs.value.ui, formUi.ui.value.control?.ui, fieldUi?.ui)
     };
-    if (!("props" in current)) return defaults;
-    const value = Object.getOwnPropertyDescriptor(current, "props")?.value;
-    if (typeof value === "function") {
-      const result = value(params.value);
-      const resolved2 = typeof result === "object" && result !== null && !Array.isArray(result) ? result : {};
-      return {
-        ...defaults,
-        ...resolved2,
-        class: mergeControlClass(fieldUi?.class, resolved2.class),
-        ui: mergeControlUi(formUi.ui.value.control?.ui, fieldUi?.ui, resolved2.ui)
-      };
-    }
-    const resolved = typeof value === "object" && value !== null && !Array.isArray(value) ? value : {};
+    const resolved = {};
+    for (const [key, value] of Object.entries(resolvedProps.value)) {
+      if (!controlOptions.omit?.includes(key)) {
+        resolved[key] = value;
+      }
+    }
     return {
       ...defaults,
       ...resolved,
@@ -59,106 +76,196 @@ export function useFieldControl(field, path) {
   const disabled = computed(() => {
     const current = field();
     const value = Object.getOwnPropertyDescriptor(current, "disabled")?.value;
-    const disabledByCallback = typeof value === "function" ? value(params.value) === true : false;
-    return disabledByCallback || options.disableOnLoading.value && options.loading.value;
+    const disabledByCallback = isFunction(value) ? value(params.value) === true : false;
+    return disabledByCallback || form.actionPending.value !== null || options.disableOnLoading.value && options.loading.value;
   });
   const placeholder = computed(() => {
     const current = field();
     const value = Object.getOwnPropertyDescriptor(current, "placeholder")?.value;
-    if (typeof value === "string" || typeof value === "number" || typeof value === "function") {
-      return resolveFormText(value) ?? t("form.fields.text.defaultPlaceholder");
+    if (isFunction(value)) {
+      const resolved = value(params.value);
+      return isString(resolved) || isNumber(resolved) ? String(resolved) : t("form.fields.text.defaultPlaceholder");
+    }
+    if (isString(value) || isNumber(value)) {
+      return String(value);
     }
     return t("form.fields.text.defaultPlaceholder");
   });
+  let lastValue = cloneFormValue(form.getValue(path()));
   watchWithFilter(
     () => form.getValue(path()),
-    async () => {
+    async (value) => {
+      if (isEqualFormValue(value, lastValue)) {
+        return;
+      }
+      lastValue = cloneFormValue(value);
       api.value.validation.clearError();
-      if (!createFormFieldInstance(field()).capability.has("validation")) return;
+      if (!createFormFieldInstance(field()).capability.has("validation")) {
+        return;
+      }
       const trigger = getValidationTrigger(field());
-      if (trigger === "submit") return;
-      if (trigger === "blur" && !form.isFieldTouched(path())) return;
-      if (trigger === "input") form.markFieldTouched(path());
+      if (trigger === "submit") {
+        return;
+      }
+      if (trigger === "blur" && !form.isFieldTouched(path())) {
+        return;
+      }
+      if (trigger === "input") {
+        form.markFieldTouched(path());
+      }
       await api.value.validation.validate();
     },
     { deep: true }
   );
-  watchWithFilter(
-    () => form.getValue(path()),
-    (value) => {
-      const effect = Object.getOwnPropertyDescriptor(field(), "watch")?.value;
-      if (typeof effect === "function") effect({ value, api: api.value });
-    },
-    {
-      ...resolveWatchOptions(field()),
-      eventFilter: resolveEffectFilter(field())
+  let blurBoundaryListening = false;
+  onScopeDispose(stopBlurBoundaryWatch);
+  function handleBlur(event) {
+    if (!canBlurValidate()) {
+      return;
     }
-  );
-  watchWithFilter(
-    () => params.value.deps,
-    () => {
-      const effect = Object.getOwnPropertyDescriptor(field(), "onDependencyChange")?.value;
-      if (typeof effect === "function") void effect(params.value);
-    },
-    { deep: true, eventFilter: resolveEffectFilter(field()) }
-  );
-  onMounted(() => {
-    const effect = Object.getOwnPropertyDescriptor(field(), "onRendered")?.value;
-    if (typeof effect === "function") void effect(params.value);
-  });
-  async function handleBlur() {
-    if (!createFormFieldInstance(field()).capability.has("validation")) return;
-    if (getValidationTrigger(field()) === "submit") return;
+    const relatedTarget = event instanceof FocusEvent ? event.relatedTarget : null;
+    if (isOwnedOverlayTarget(relatedTarget)) {
+      startBlurBoundaryWatch();
+      return;
+    }
+    if (isFieldRootTarget(relatedTarget)) {
+      return;
+    }
+    setTimeout(() => {
+      if (isFieldRootTarget(document.activeElement)) {
+        return;
+      }
+      if (isOwnedOverlayTarget(document.activeElement)) {
+        startBlurBoundaryWatch();
+        return;
+      }
+      if (document.activeElement === document.body && hasOwnedInteractionSurface()) {
+        startBlurBoundaryWatch();
+        return;
+      }
+      commitBlurValidation();
+    }, 0);
+  }
+  function canBlurValidate() {
+    if (!createFormFieldInstance(field()).capability.has("validation")) {
+      return false;
+    }
+    return getValidationTrigger(field()) !== "submit";
+  }
+  function commitBlurValidation() {
+    stopBlurBoundaryWatch();
+    if (!canBlurValidate()) {
+      return;
+    }
+    const trigger = getValidationTrigger(field());
     form.markFieldTouched(path());
-    await api.value.validation.validate();
+    if (trigger === "input") {
+      return;
+    }
+    void api.value.validation.validate();
+  }
+  function startBlurBoundaryWatch() {
+    if (blurBoundaryListening) {
+      return;
+    }
+    blurBoundaryListening = true;
+    document.addEventListener("focusin", handleBoundaryFocusIn, true);
+    document.addEventListener("pointerdown", handleBoundaryPointerDown, true);
+  }
+  function stopBlurBoundaryWatch() {
+    if (!blurBoundaryListening) {
+      return;
+    }
+    blurBoundaryListening = false;
+    document.removeEventListener("focusin", handleBoundaryFocusIn, true);
+    document.removeEventListener("pointerdown", handleBoundaryPointerDown, true);
+  }
+  function handleBoundaryFocusIn(event) {
+    if (isFieldRootTarget(event.target)) {
+      stopBlurBoundaryWatch();
+      return;
+    }
+    if (isOwnedOverlayTarget(event.target)) {
+      return;
+    }
+    commitBlurValidation();
+  }
+  function handleBoundaryPointerDown(event) {
+    if (isFieldRootTarget(event.target) || isOwnedOverlayTarget(event.target)) {
+      return;
+    }
+    setTimeout(commitBlurValidation, 0);
+  }
+  function isFieldRootTarget(target) {
+    if (!(target instanceof Node)) {
+      return false;
+    }
+    const owner = interactionOwner.value;
+    for (const element of document.querySelectorAll("[data-form-field]")) {
+      if (element.dataset.formField === owner && element.contains(target)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function isOwnedOverlayTarget(target) {
+    if (!(target instanceof Node)) {
+      return false;
+    }
+    for (const element of document.getElementsByClassName(interactionOwnerClass.value)) {
+      if (element.contains(target)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function hasOwnedInteractionSurface() {
+    return document.getElementsByClassName(interactionOwnerClass.value).length > 0;
   }
   return {
-    form,
     api,
-    params,
     controlProps,
+    controlSize,
     disabled,
+    fieldProps,
+    form,
     handleBlur,
+    interactionOwner,
+    interactionOwnerClass,
     options,
+    params,
     placeholder,
-    controlSize
+    validationPending
   };
 }
 function mergeControlUi(...configs) {
-  return configs.reduce((merged, config) => {
-    if (typeof config !== "object" || config === null || Array.isArray(config)) return merged;
-    return { ...merged, ...config };
-  }, {});
+  const merged = {};
+  for (const config of configs) {
+    if (!isObject(config) || config === null || Array.isArray(config)) {
+      continue;
+    }
+    for (const [slot, value] of Object.entries(config)) {
+      if (isString(value)) {
+        merged[slot] = value;
+      }
+    }
+  }
+  return merged;
 }
 function mergeControlClass(defaults, local) {
-  if (typeof local === "string") return mergeFormUiClass(defaults, local);
-  if (typeof local === "undefined") return defaults;
-  return [defaults, local];
+  return isString(local) ? mergeFormUiClass(defaults, local) : defaults;
 }
 function isFormControlSize(value) {
   return value === "xs" || value === "sm" || value === "md" || value === "lg" || value === "xl";
 }
-function resolveWatchOptions(field) {
-  const options = Object.getOwnPropertyDescriptor(field, "watchOptions")?.value;
-  if (typeof options !== "object" || options === null || Array.isArray(options)) return {};
-  return {
-    deep: options.deep === true,
-    immediate: options.immediate === true
-  };
-}
-function resolveEffectFilter(field) {
-  const effect = Object.getOwnPropertyDescriptor(field, "stateEffect")?.value;
-  if (typeof effect !== "object" || effect === null || Array.isArray(effect)) return void 0;
-  const duration = typeof effect.duration === "number" ? effect.duration : 0;
-  if (effect.type === "debounce") return debounceFilter(duration);
-  if (effect.type === "throttle") return throttleFilter(duration);
-  return void 0;
-}
 function getValidationTrigger(field) {
-  if (!createFormFieldInstance(field).capability.has("validation")) return "blur";
+  if (!createFormFieldInstance(field).capability.has("validation")) {
+    return "blur";
+  }
   const validation = Object.getOwnPropertyDescriptor(field, "validation")?.value;
-  if (typeof validation !== "object" || validation === null || Array.isArray(validation))
+  if (!isObject(validation) || validation === null || Array.isArray(validation)) {
     return "blur";
+  }
   const trigger = Object.getOwnPropertyDescriptor(validation, "trigger")?.value;
   return trigger === "input" || trigger === "submit" ? trigger : "blur";
 }

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

@@ -0,0 +1,2 @@
+import type { FormField } from '../types/index.js';
+export declare function useFieldEffects(field: () => FormField, path: () => readonly string[]): void;

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

@@ -0,0 +1,74 @@
+import { debounceFilter, throttleFilter, watchWithFilter } from "@vueuse/core";
+import { computed, onMounted } from "vue";
+import { isEqualFormValue } from "../utils/compare.js";
+import { cloneFormValue } from "../utils/path.js";
+import { isFunction, isNumber, isObject } from "../utils/predicate.js";
+import { useFormRuntimeContext } from "./use-form-runtime.js";
+const UNSET = Symbol("unset");
+export function useFieldEffects(field, path) {
+  const form = useFormRuntimeContext();
+  const api = computed(() => form.getFieldApi(path(), field()));
+  const params = computed(() => form.getFieldCallbackParams(path(), field()));
+  let lastValue = UNSET;
+  let lastDeps = UNSET;
+  watchWithFilter(
+    () => form.getValue(path()),
+    (value) => {
+      if (lastValue !== UNSET && isEqualFormValue(value, lastValue)) {
+        return;
+      }
+      lastValue = cloneFormValue(value);
+      const effect = Object.getOwnPropertyDescriptor(field(), "watch")?.value;
+      if (isFunction(effect)) {
+        form.trackEffect(effect({ api: api.value, value }));
+      }
+    },
+    {
+      ...resolveWatchOptions(field()),
+      eventFilter: resolveEffectFilter(field())
+    }
+  );
+  watchWithFilter(
+    () => params.value.deps,
+    (deps) => {
+      if (lastDeps !== UNSET && isEqualFormValue(deps, lastDeps)) {
+        return;
+      }
+      lastDeps = cloneFormValue(deps);
+      const effect = Object.getOwnPropertyDescriptor(field(), "onDependencyChange")?.value;
+      if (isFunction(effect)) {
+        form.trackEffect(effect(params.value));
+      }
+    },
+    { deep: true, eventFilter: resolveEffectFilter(field()) }
+  );
+  onMounted(() => {
+    const effect = Object.getOwnPropertyDescriptor(field(), "onRendered")?.value;
+    if (isFunction(effect)) {
+      form.trackEffect(effect(params.value));
+    }
+  });
+}
+function resolveWatchOptions(field) {
+  const options = Object.getOwnPropertyDescriptor(field, "watchOptions")?.value;
+  if (!isObject(options) || options === null || Array.isArray(options)) {
+    return {};
+  }
+  return {
+    deep: options.deep === true,
+    immediate: options.immediate === true
+  };
+}
+function resolveEffectFilter(field) {
+  const effect = Object.getOwnPropertyDescriptor(field, "stateEffect")?.value;
+  if (!isObject(effect) || effect === null || Array.isArray(effect)) {
+    return;
+  }
+  const duration = isNumber(effect.duration) ? effect.duration : 0;
+  if (effect.type === "debounce") {
+    return debounceFilter(duration);
+  }
+  if (effect.type === "throttle") {
+    return throttleFilter(duration);
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue';
-import type { FormField, FormFieldApi, FormFieldCallbackParams, FormRuntime } from '../types/index.js';
-import { type ResolvedFormOption } from '../utils/options.js';
+import type { FormValue, FormField, FormFieldApi, FormFieldCallbackParams, FormRuntime } from '../types/index.js';
+import type { ResolvedFormOption } from '../utils/options.js';
 export declare function useFieldOptions(params: {
     field: () => FormField;
     path: () => readonly string[];
@@ -9,18 +9,30 @@ export declare function useFieldOptions(params: {
     register: FormRuntime['registerFieldOptions'];
     refreshFieldOptions: FormRuntime['refreshFieldOptions'];
 }): {
-    items: ComputedRef<readonly ResolvedFormOption[]>;
-    pending: ComputedRef<boolean>;
-    fetching: ComputedRef<boolean>;
-    loading: ComputedRef<boolean>;
-    creating: ComputedRef<boolean>;
+    activate: () => void;
+    add: (option: FormValue) => ResolvedFormOption;
     creatable: ComputedRef<boolean>;
+    create: (label: string) => Promise<ResolvedFormOption | null>;
     createLabel: ComputedRef<string | undefined>;
-    error: ComputedRef<unknown>;
+    creating: ComputedRef<boolean>;
     disableOnLoading: ComputedRef<boolean>;
+    error: ComputedRef<unknown>;
+    fetching: ComputedRef<boolean>;
+    hasMore: ComputedRef<boolean>;
+    items: ComputedRef<readonly ResolvedFormOption[]>;
+    loadChildren: (option: ResolvedFormOption) => Promise<void>;
+    loadMore: () => Promise<void>;
+    loading: ComputedRef<boolean>;
+    loadingMore: ComputedRef<boolean>;
+    pending: ComputedRef<boolean>;
+    prefetchDistance: ComputedRef<number | "viewport">;
+    refresh: () => Promise<void>;
     refreshable: ComputedRef<boolean>;
+    remote: ComputedRef<boolean>;
+    retry: () => Promise<void>;
+    retryable: ComputedRef<boolean>;
+    search: ComputedRef<string>;
     selectCreatedOption: ComputedRef<boolean>;
-    refresh: () => Promise<void>;
-    add: (option: unknown) => ResolvedFormOption;
-    create: (label: string) => Promise<ResolvedFormOption | null>;
+    selectedItems: ComputedRef<readonly ResolvedFormOption[]>;
+    setSearch: (term: string) => void;
 };