nuxt-ui-tools 1.23.0 → 1.25.0

package/dist/runtime/display/utils/tone.js

@@ -0,0 +1,38 @@
+const BUILTIN_TONES = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+];
+export function displayToneClass(tone) {
+  return `nut-display-tone-${tone}`;
+}
+export function isBuiltinTone(tone) {
+  return BUILTIN_TONES.some((builtin) => builtin === tone);
+}
+export const DISPLAY_SURFACE_CLASSES = {
+  bordered: "rounded-[var(--nut-display-radius)] border border-default",
+  elevated: "rounded-[var(--nut-display-radius)] bg-default shadow-[0_10px_28px_-14px_rgb(0_0_0/0.3)] ring ring-default",
+  muted: "rounded-[var(--nut-display-radius)] bg-elevated",
+  plain: ""
+};
+export const DISPLAY_SURFACE_PADDING = {
+  bordered: "p-4",
+  elevated: "p-4",
+  muted: "p-4",
+  plain: ""
+};
+const NAME_TONES = ["primary", "info", "success", "warning", "secondary", "error"];
+export function toneFromName(name) {
+  let hash = 0;
+  for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) % 2147483647;
+  return NAME_TONES[hash % NAME_TONES.length] ?? "primary";
+}
+export function initialsOf(name) {
+  const words = name.trim().split(/\s+/u).filter(Boolean);
+  const letters = words.length > 1 ? [words[0], words.at(-1)] : [words[0]];
+  return letters.map((word) => word?.[0] ?? "").join("").toUpperCase();
+}

package/dist/runtime/display/utils/urls.d.ts

@@ -0,0 +1,10 @@
+import type { DisplayUrl } from '../types/index.js';
+/** The address of a link, calling it when it is a function. */
+export declare function resolveDisplayUrl(source: DisplayUrl): Promise<DisplayUrl & string>;
+/**
+ * Opens a link in a new tab. A function's tab opens during the click, so popup blockers let it
+ * through, and follows the address once it resolves; it closes again if the address fails.
+ */
+export declare function openDisplayUrl(source: DisplayUrl): Promise<void>;
+/** Downloads a link under `name`, resolving it first when it is a function. */
+export declare function downloadDisplayUrl(source: DisplayUrl, name?: string): Promise<void>;

package/dist/runtime/display/utils/urls.js

@@ -0,0 +1,33 @@
+import { isString } from "../../shared/utils/predicate.js";
+export async function resolveDisplayUrl(source) {
+  return isString(source) ? source : await source();
+}
+export async function openDisplayUrl(source) {
+  if (isString(source)) {
+    window.open(source, "_blank", "noopener");
+    return;
+  }
+  const tab = window.open("about:blank", "_blank");
+  try {
+    const url = await source();
+    if (!tab) {
+      window.open(url, "_blank", "noopener");
+      return;
+    }
+    tab.opener = null;
+    tab.location.href = url;
+  } catch (error) {
+    tab?.close();
+    throw error;
+  }
+}
+export async function downloadDisplayUrl(source, name) {
+  const anchor = document.createElement("a");
+  anchor.href = await resolveDisplayUrl(source);
+  anchor.rel = "noopener";
+  anchor.target = "_blank";
+  if (name) anchor.download = name;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+}

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue

@@ -88,9 +88,11 @@ function retry() {
         v-else-if="source.status.value === 'error'"
         icon="i-lucide-triangle-alert"
         tone="error"
-        :title="t('filePreview.errors.sourceTitle')"
-        :description="t('filePreview.errors.sourceDescription')"
-        :detail="source.error.value?.message"
+        :title="source.failure.value?.title ?? t('filePreview.errors.sourceTitle')"
+        :description="
+  source.failure.value?.description ?? t('filePreview.errors.sourceDescription')
+"
+        :detail="source.failure.value?.description ? null : source.error.value?.message"
       >
         <UButton
           v-if="source.retryable.value"

package/dist/runtime/file-preview/composables/use-file-preview-source.d.ts

@@ -8,6 +8,13 @@ type FilePreviewSourceStatus = 'loading' | 'ready' | 'error';
 export declare function useFilePreviewSource(item: () => FilePreviewItem | null): {
     blob: import("vue").ComputedRef<Blob | null>;
     error: import("vue").ShallowRef<Error | null, Error | null>;
+    failure: import("vue").ShallowRef<{
+        description: string | undefined;
+        title: string | undefined;
+    } | null, {
+        description: string | undefined;
+        title: string | undefined;
+    } | null>;
     /** Whether `retry()` can fetch the source again, which only a source function can. */
     retryable: import("vue").ComputedRef<boolean>;
     retry: () => Promise<void>;

package/dist/runtime/file-preview/composables/use-file-preview-source.js

@@ -1,11 +1,13 @@
 import { useObjectUrl } from "@vueuse/core";
 import { computed, ref, shallowRef, watch } from "vue";
-import { isFunction, isString } from "../../shared/utils/predicate.js";
+import { isFunction, isObject, isString } from "../../shared/utils/predicate.js";
+import { explainFilePreviewFailure } from "../utils/errors.js";
 const resolved = /* @__PURE__ */ new WeakMap();
 export function useFilePreviewSource(item) {
   const value = shallowRef(null);
   const status = ref("loading");
   const error = shallowRef(null);
+  const failure = shallowRef(null);
   const blob = computed(() => value.value instanceof Blob ? value.value : null);
   const objectUrl = useObjectUrl(blob);
   const url = computed(() => isString(value.value) ? value.value : objectUrl.value ?? null);
@@ -13,6 +15,7 @@ export function useFilePreviewSource(item) {
   function settle(next) {
     value.value = next;
     error.value = null;
+    failure.value = null;
     status.value = "ready";
   }
   async function resolve(options) {
@@ -26,6 +29,7 @@ export function useFilePreviewSource(item) {
     if (known !== void 0) return settle(known);
     value.value = null;
     error.value = null;
+    failure.value = null;
     status.value = "loading";
     try {
       const next = await src();
@@ -35,6 +39,7 @@ export function useFilePreviewSource(item) {
     } catch (cause) {
       if (current !== attempt) return;
       error.value = cause instanceof Error ? cause : new Error(String(cause));
+      failure.value = cause instanceof Error || isObject(cause) ? explainFilePreviewFailure(cause) : null;
       status.value = "error";
     }
   }
@@ -42,6 +47,7 @@ export function useFilePreviewSource(item) {
   return {
     blob,
     error,
+    failure,
     /** Whether `retry()` can fetch the source again, which only a source function can. */
     retryable: computed(() => isFunction(item()?.file.src)),
     retry: () => resolve({ force: true }),

package/dist/runtime/file-preview/index.d.ts

@@ -1,5 +1,6 @@
 export { createFilePreviewApi, filePreviewApiKey, provideFilePreview, useFilePreview, } from './composables/use-file-preview-api.js';
 export { onFilePreviewKey, useFilePreviewShell } from './composables/use-file-preview-shell.js';
 export { FILE_PREVIEW_TEXT_LIMIT, useFilePreviewText } from './composables/use-file-preview-text.js';
+export { FilePreviewSourceError } from './utils/errors.js';
 export { builtInFilePreviewRenderers, defineFilePreviewRenderer, detectFilePreviewKind, matchFilePreview, } from './utils/renderers.js';
 export type * from './types';

package/dist/runtime/file-preview/index.js

@@ -6,6 +6,7 @@ export {
 } from "./composables/use-file-preview-api.js";
 export { onFilePreviewKey, useFilePreviewShell } from "./composables/use-file-preview-shell.js";
 export { FILE_PREVIEW_TEXT_LIMIT, useFilePreviewText } from "./composables/use-file-preview-text.js";
+export { FilePreviewSourceError } from "./utils/errors.js";
 export {
   builtInFilePreviewRenderers,
   defineFilePreviewRenderer,

package/dist/runtime/file-preview/types/file.d.ts

@@ -11,6 +11,15 @@ export type FilePreviewSourceValue = string | Blob;
  * URLs are requested on demand; it runs again when the user presses Retry after an error.
  */
 export type FilePreviewSource = FilePreviewSourceValue | (() => MaybePromise<FilePreviewSourceValue>);
+/**
+ * Why a source function failed, carried by the error it throws (for example a
+ * `FilePreviewSourceError`, or any error with these properties). The preview shows them in place
+ * of its generic copy and leaves out the raw error message.
+ */
+export interface FilePreviewSourceFailure {
+    title?: FilePreviewText;
+    description?: FilePreviewText;
+}
 export interface FilePreviewDetail {
     label: FilePreviewText;
     value: FilePreviewText;

package/dist/runtime/file-preview/utils/errors.d.ts

@@ -0,0 +1,30 @@
+import type { GenericObject } from '../../shared/types/utils.js';
+import type { FilePreviewSourceFailure, FilePreviewText } from '../types/index.js';
+/**
+ * Error a source function throws when the app knows why the file is unavailable. The preview shows
+ * its `title` and `description` in place of the generic ones, without the raw error message.
+ *
+ * @example
+ * ```ts
+ * src: async () => {
+ *   const response = await fetch(`/api/invoices/${id}/file`)
+ *   if (response.status === 404)
+ *     throw new FilePreviewSourceError({ description: 'The invoice file cannot be found.' })
+ *   return (await response.json()).url
+ * }
+ * ```
+ */
+export declare class FilePreviewSourceError extends Error implements FilePreviewSourceFailure {
+    readonly title?: FilePreviewText;
+    readonly description?: FilePreviewText;
+    constructor(options: {
+        title?: FilePreviewText;
+        description?: FilePreviewText;
+        message?: string;
+    });
+}
+/** The title and description a thrown source error carries, if any, resolved to text. */
+export declare function explainFilePreviewFailure(cause: Error | GenericObject): {
+    description: string | undefined;
+    title: string | undefined;
+} | null;

package/dist/runtime/file-preview/utils/errors.js

@@ -0,0 +1,26 @@
+import { isFunction, isString } from "../../shared/utils/predicate.js";
+export class FilePreviewSourceError extends Error {
+  title;
+  description;
+  constructor(options) {
+    super(
+      options.message ?? textOf(options.description) ?? textOf(options.title) ?? "File source failed"
+    );
+    this.name = "FilePreviewSourceError";
+    this.title = options.title;
+    this.description = options.description;
+  }
+}
+export function explainFilePreviewFailure(cause) {
+  const title = "title" in cause ? textOf(cause.title) : void 0;
+  const description = "description" in cause ? textOf(cause.description) : void 0;
+  return title === void 0 && description === void 0 ? null : { description, title };
+}
+function textOf(value) {
+  if (isString(value)) return value;
+  if (isFunction(value)) {
+    const text = value();
+    return isString(text) ? text : void 0;
+  }
+  return void 0;
+}

package/dist/runtime/form/components/utils/form-file-preview.vue

@@ -1,7 +1,7 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
-import { computed, onScopeDispose, watch } from "vue";
+import { computed, onScopeDispose, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { fileExtensionLabel, fileIconName, formatFileSize } from "../../../shared/utils/file";
 const props = defineProps({
@@ -25,6 +25,10 @@ const preview = computed(() => {
   return previewUrl;
 });
 const icon = computed(() => fileIconName(props.file.type));
+const previewFailed = ref(false);
+watch(preview, () => {
+  previewFailed.value = false;
+});
 const meta = computed(
   () => `${fileExtensionLabel(props.file)} \xB7 ${formatFileSize(props.file.size, code.value)}`
 );
@@ -50,8 +54,9 @@ onScopeDispose(() => {
     data-form-file=""
   >
     <img
-      v-if="preview"
+      v-if="preview && !previewFailed"
       :src="preview"
+      @error="previewFailed = true"
       :alt="file.name"
       class="size-10 shrink-0 rounded-md border border-default object-cover"
     />

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

@@ -37,6 +37,8 @@ export function useFormRoot(params) {
   const ownedRuntime = params.runtime?.();
   const runtime = ownedRuntime ?? useFormRuntime({ input, schema, syncInput, validationMode });
   provideFormRuntime(runtime);
+  runtime.bindCancel(() => cancel());
+  onBeforeUnmount(() => runtime.bindCancel(null));
   const confirm = useFormConfirm();
   let leaveConfirmed = false;
   watch(

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

@@ -1,4 +1,4 @@
-import { computed, inject, nextTick, provide, ref, watch } from "vue";
+import { computed, inject, nextTick, provide, ref, shallowRef, watch } from "vue";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import { createPublicFormApi } from "../utils/api.js";
 import { resolveFieldDependencies } from "../utils/dependencies.js";
@@ -44,6 +44,7 @@ export function useFormRuntime(params) {
   const currentStepIndex = ref(0);
   const navigationActionPending = ref(null);
   const effects = createEffectLifecycle();
+  const cancelHandler = shallowRef(null);
   const { t } = useUiToolsLocale();
   setContext(getSchemaContext(params.schema.value));
   function createFormNamespace(path, read) {
@@ -64,7 +65,8 @@ export function useFormRuntime(params) {
       setError: (target, message, options) => runtime.setError(resolve(target), message, options),
       state: () => read.state(),
       submit: () => runtime.submit(),
-      validate: () => runtime.validate()
+      validate: () => runtime.validate(),
+      close: () => cancelHandler.value?.() ?? Promise.resolve()
     };
   }
   function createApiFactory(read) {
@@ -449,6 +451,9 @@ export function useFormRuntime(params) {
       return result.success;
     },
     submitHandler,
+    bindCancel: (cancel) => {
+      cancelHandler.value = cancel;
+    },
     trackEffect: effects.track,
     validate,
     validateCurrentStep

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

@@ -134,6 +134,11 @@ export declare const formFieldKinds: readonly [{
     };
     readonly state: "stateless";
     readonly type: "info";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
 }, {
     readonly layout: {
         readonly item: true;

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

@@ -1,30 +1,62 @@
 <script setup>
-import UAlert from "@nuxt/ui/components/Alert.vue";
 import { computed } from "vue";
-import { useFieldControl } from "../../composables/use-field-control";
-import { invokeFormFunction, isNumber, isString } from "../../utils/predicate";
+import DisplayAlert from "../../../display/components/blocks/display-alert.vue";
+import DisplayBlock from "../../../display/components/display.vue";
+import DisplayLoadError from "../../../display/components/parts/display-load-error.vue";
+import DisplaySkeleton from "../../../display/components/parts/display-skeleton.vue";
+import { DISPLAY_SKELETON_LAYOUTS } from "../../../display/utils/registry";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { resolveFormDynamic } from "../../utils/dynamic";
 import { resolveFormText } from "../../utils/text";
+import { useInfoDisplay } from "./use-info-display";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
-const { fieldProps, params } = useFieldControl(
-  () => props.field,
-  () => props.path
-);
-const description = computed(() => {
-  const { content } = props.field;
-  const resolved = invokeFormFunction(content, [params.value]) ?? content;
-  return isString(resolved) || isNumber(resolved) ? String(resolved) : void 0;
+const form = useFormRuntimeContext();
+const params = computed(() => form.getFieldCallbackParams(props.path, props.field));
+const displayField = computed(() => props.field.display === void 0 ? void 0 : props.field);
+const display = useInfoDisplay({
+  callbackParams: params,
+  field: () => displayField.value,
+  path: () => props.path
+});
+const shelled = computed(() => {
+  const { description, help, hint, label } = props.field;
+  return [description, help, hint, label].some((value) => value !== void 0);
+});
+const Bare = (_, { slots }) => slots.default?.();
+const notice = computed(() => {
+  const field = props.field;
+  if (field.display !== void 0) return void 0;
+  const options = field.props === void 0 ? void 0 : resolveFormDynamic(field.props, params.value);
+  return {
+    appearance: options?.variant ?? "soft",
+    icon: options?.icon === false ? false : options?.icon ?? "i-lucide-info",
+    message: resolveFormDynamic(field.content, params.value),
+    title: resolveFormText(options?.title),
+    tone: options?.color ?? "neutral"
+  };
 });
 </script>
 
 <template>
-  <UAlert
-    :color="fieldProps.color ?? 'neutral'"
-    :variant="fieldProps.variant ?? 'soft'"
-    :icon="fieldProps.icon === false ? void 0 : fieldProps.icon ?? 'i-lucide-info'"
-    :title="resolveFormText(fieldProps.title)"
-    :description="description"
-  />
+  <component :is="shelled ? FormFieldShell : Bare" v-bind="shelled ? { field, path } : {}">
+    <template v-if="displayField">
+      <DisplaySkeleton
+        v-if="display.pending.value"
+        :layout="DISPLAY_SKELETON_LAYOUTS[displayField.display]"
+        :count="3"
+      />
+      <DisplayLoadError v-else-if="display.error.value !== null" @retry="display.retry" />
+      <DisplayBlock
+        v-else-if="display.props.value"
+        :display="displayField.display"
+        :props="display.props.value"
+        :preset="displayField.preset"
+      />
+    </template>
+    <DisplayAlert v-else-if="notice" v-bind="notice" />
+  </component>
 </template>

package/dist/runtime/form/fields/info/config.d.ts

@@ -4,4 +4,9 @@ export declare const infoFieldKind: {
     };
     readonly state: "stateless";
     readonly type: "info";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
 };

package/dist/runtime/form/fields/info/config.js

@@ -2,5 +2,6 @@ import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const infoFieldKind = defineFormFieldKind({
   layout: { item: true },
   state: "stateless",
-  type: "info"
+  type: "info",
+  ui: { description: true, hint: true, label: true }
 });

package/dist/runtime/form/fields/info/types.d.ts

@@ -1,12 +1,86 @@
-import type { FormFieldCallback } from '../../types/callbacks.js';
-import type { FormStatelessFieldBase } from '../../types/field-base.js';
-import type { FormRenderable, FormText } from '../../types/utils.js';
+import type { DisplayKind, DisplayPropsMap } from '../../../display/types/index.js';
+import type { FormFieldCallback, FormFieldCallbackParams } from '../../types/callbacks.js';
+import type { FormQueryOptions } from '../../types/context.js';
+import type { FormFieldDescription, FormFieldProps, FormStatelessFieldBase } from '../../types/field-base.js';
+import type { FormDynamic, FormRenderable, FormText } from '../../types/utils.js';
+/** Props of a notice field: its `content` drawn in an alert. */
 export interface FormInfoProps {
     title?: FormText;
     icon?: string | false;
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     variant?: 'solid' | 'outline' | 'soft' | 'subtle';
 }
-export interface FormInfoField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatelessFieldBase<'info', TContext, TDeps, FormInfoProps> {
+interface FormInfoFieldBase<TContext, TDeps> extends Omit<FormStatelessFieldBase<'info', TContext, TDeps>, 'props'> {
+    /** Raw dependency paths read before evaluating `props`, `content` and `condition`. */
+    dependencies?: readonly (string | readonly [string, string])[];
+    /**
+     * Draws the field inside the standard label wrapper, like an input, for a read-only value that
+     * belongs in the form grid. `description`, `hint` and `help` do the same.
+     */
+    label?: FormText;
+    description?: FormText | FormFieldDescription;
+    hint?: FormText;
+    help?: FormText;
+}
+/** A notice: `content` in an alert, styled by `props`. */
+export interface FormInfoNoticeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormInfoFieldBase<TContext, TDeps> {
+    display?: undefined;
+    preset?: undefined;
     content: FormRenderable | FormFieldCallback<FormRenderable, TContext, TDeps>;
+    props?: FormFieldProps<FormInfoProps, TContext, TDeps>;
 }
+/**
+ * Props of a display block, or a way to load them: a promise, or TanStack Query options whose
+ * data (after `select`) is the props, cached under their `queryKey`.
+ */
+export type FormInfoDisplaySource<TProps> = TProps | Promise<TProps> | FormQueryOptions<TProps>;
+/**
+ * A display block: `display` picks the kind and `props` configure it, statically or from the
+ * field's dependencies, so the block follows the form values. `props` may also load them: a
+ * callback returning a promise or query options runs again when a dependency changes, shows the
+ * block's skeleton until they arrive, drops a late answer to an older run, and shows a compact
+ * error with a retry button when loading fails.
+ *
+ * @example
+ * ```ts
+ * {
+ *   key: 'quote',
+ *   type: 'info',
+ *   display: 'breakdown',
+ *   dependencies: ['seats'],
+ *   props: ({ deps }) => ({
+ *     lines: [{ label: 'Licences', detail: `${deps.get<number>('seats')} × 96 €`, value: '…' }],
+ *     total: { label: 'Total', value: '…' },
+ *   }),
+ * }
+ *
+ * {
+ *   key: 'accountNote',
+ *   type: 'info',
+ *   display: 'text',
+ *   dependencies: ['accountId'],
+ *   props: ({ deps }) =>
+ *     queryOptions({
+ *       queryKey: ['accounts', deps.get('accountId'), 'note'],
+ *       queryFn: () => fetchAccountNote(deps.get('accountId')),
+ *       select: (note) => ({ appearance: 'quote', text: note.body, author: note.author }),
+ *     }),
+ * }
+ * ```
+ */
+export type FormInfoDisplayField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = {
+    [TKind in DisplayKind]: FormInfoFieldBase<TContext, TDeps> & {
+        display: TKind;
+        /** Name of a preset in `appConfig.nuxtUiTools.display.presets[display]`; `props` override it. */
+        preset?: string;
+        content?: undefined;
+        /**
+         * The block's props, or a callback receiving `{ ctx, deps, api }` that returns them, a promise
+         * of them, or query options. `api.form` sets values, submits, or closes the form, so a block
+         * action can act on it.
+         */
+        props: FormDynamic<FormInfoDisplaySource<DisplayPropsMap[TKind]>, FormFieldCallbackParams<TContext, TDeps>>;
+    };
+}[DisplayKind];
+export type FormInfoField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormInfoNoticeField<TContext, TDeps> | FormInfoDisplayField<TContext, TDeps>;
+export {};

package/dist/runtime/form/fields/info/use-info-display.d.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef } from 'vue';
+import type { DisplayKind, DisplayPropsMap } from '../../../display/types/index.js';
+import type { FormFieldCallbackParams } from '../../types/index.js';
+import type { FormInfoDisplayField } from './types.js';
+type DisplayProps = DisplayPropsMap[DisplayKind];
+/**
+ * Resolves the props of a display field: static, derived from its dependencies, or loaded through
+ * a promise or TanStack Query options. A promise from an older run never overwrites a newer one.
+ */
+export declare function useInfoDisplay(params: {
+    field: () => FormInfoDisplayField | undefined;
+    callbackParams: ComputedRef<FormFieldCallbackParams>;
+    path: () => readonly string[];
+}): {
+    error: ComputedRef<unknown>;
+    pending: ComputedRef<boolean>;
+    props: ComputedRef<DisplayProps | undefined>;
+    retry: () => void;
+};
+export {};

package/dist/runtime/form/fields/info/use-info-display.js

@@ -0,0 +1,82 @@
+import { useQuery } from "@tanstack/vue-query";
+import { computed, ref, shallowRef, unref, watch } from "vue";
+import { isPlainObject, isPromise } from "../../../shared/utils/predicate.js";
+import { resolveFormDynamic } from "../../utils/dynamic.js";
+import { isRecord } from "../../utils/path.js";
+export function useInfoDisplay(params) {
+  const attempt = ref(0);
+  const promiseRun = ref(0);
+  const promiseProps = shallowRef(void 0);
+  const promisePending = ref(false);
+  const promiseError = shallowRef(null);
+  const source = computed(() => {
+    void attempt.value;
+    const field = params.field();
+    return field ? resolveFormDynamic(
+      field.props,
+      params.callbackParams.value
+    ) : void 0;
+  });
+  const querySource = computed(() => isQueryOptions(source.value) ? source.value : null);
+  const query = useQuery(
+    computed(
+      () => querySource.value ?? {
+        enabled: false,
+        queryFn: async () => null,
+        queryKey: ["form-info", params.path().join("."), "disabled"]
+      }
+    )
+  );
+  watch(
+    source,
+    async (current) => {
+      if (!isPromise(current)) {
+        promiseRun.value += 1;
+        promisePending.value = false;
+        promiseError.value = null;
+        return;
+      }
+      const run = promiseRun.value + 1;
+      promiseRun.value = run;
+      promisePending.value = true;
+      promiseError.value = null;
+      try {
+        const result = await current;
+        if (promiseRun.value !== run) return;
+        promiseProps.value = isDisplayProps(result) ? result : void 0;
+      } catch (caughtError) {
+        if (promiseRun.value === run) promiseError.value = caughtError;
+      } finally {
+        if (promiseRun.value === run) promisePending.value = false;
+      }
+    },
+    { immediate: true }
+  );
+  const props = computed(() => {
+    const current = source.value;
+    if (querySource.value) {
+      const data = unref(query.data);
+      return isDisplayProps(data) ? data : void 0;
+    }
+    if (isPromise(current)) return promisePending.value ? void 0 : promiseProps.value;
+    return isDisplayProps(current) ? current : void 0;
+  });
+  const pending = computed(() => {
+    if (querySource.value) return unref(query.isPending) && unref(query.fetchStatus) !== "idle";
+    return promisePending.value;
+  });
+  const error = computed(
+    () => querySource.value ? unref(query.error) ?? null : promiseError.value
+  );
+  function retry() {
+    if (querySource.value) void query.refetch();
+    else attempt.value += 1;
+  }
+  return { error, pending, props, retry };
+}
+function isQueryOptions(value) {
+  return isRecord(value) && Array.isArray(Object.getOwnPropertyDescriptor(value, "queryKey")?.value);
+}
+function isDisplayProps(value) {
+  return isPlainObject(value) && !isQueryOptions(value);
+}