nuxt-ui-tools 1.17.1 → 1.19.0

package/dist/runtime/form/components/utils/form-option-choice-label.vue.d.ts

@@ -0,0 +1,16 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Label of an option in a radio or checkbox list: the leading visual, the label, and the suffix at
+ * the end of the row. The description stays with the Nuxt UI group, under the row. An option with a
+ * `renderOption` function shows what it returns instead, and a plain option shows its label as it
+ * always did.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    selected?: boolean;
+    render?: (context: FormOptionRenderContext) => VNodeChild;
+};
+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;

package/dist/runtime/form/components/utils/form-option-display-value.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * The chosen option as the closed control of a select or auto-complete reads: what `renderValue`
+ * returns, or the label followed by the dimmed suffix. The leading visual belongs to the control's
+ * own leading slot.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+};
+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;

package/dist/runtime/form/components/utils/form-option-display-value.vue

@@ -0,0 +1,20 @@
+<script setup>
+import FormOptionRender from "./form-option-render";
+import FormOptionSuffix from "./form-option-suffix.vue";
+const props = defineProps({
+  option: { type: Object, required: true },
+  render: { type: Function, required: false }
+});
+function content() {
+  const { item } = props.option;
+  return item === void 0 ? null : props.render?.({ item, option: props.option });
+}
+</script>
+
+<template>
+  <FormOptionRender v-if="render" :content="content" />
+  <template v-else>
+    {{ option.label }}
+    <FormOptionSuffix :option="option" class="ms-1.5" />
+  </template>
+</template>

package/dist/runtime/form/components/utils/form-option-display-value.vue.d.ts

@@ -0,0 +1,14 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * The chosen option as the closed control of a select or auto-complete reads: what `renderValue`
+ * returns, or the label followed by the dimmed suffix. The leading visual belongs to the control's
+ * own leading slot.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+};
+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;

package/dist/runtime/form/components/utils/form-option-item-label.d.vue.ts

@@ -1,6 +1,13 @@
-import type { FormValue } from '../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { FormOptionRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Label of an option in a menu. The load-more row keeps its own loader, an option with a
+ * `renderOption` function shows what it returns, and any other option shows its label.
+ */
 type __VLS_Props = {
-    item: FormValue;
+    option: ResolvedFormOption;
+    selected?: boolean;
+    render?: (context: FormOptionRenderContext) => VNodeChild;
 };
 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;

package/dist/runtime/form/components/utils/form-option-item-label.vue

@@ -2,19 +2,23 @@
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { isLoadMoreOption } from "../../utils/options";
-import { isRecord } from "../../utils/path";
-import { isNumber, isString } from "../../utils/predicate";
+import FormOptionRender from "./form-option-render";
 const props = defineProps({
-  item: { type: null, required: true }
-});
-const loadMore = computed(() => isLoadMoreOption(props.item));
-const label = computed(() => {
-  if (isRecord(props.item)) {
-    const value = props.item.label;
-    return isString(value) || isNumber(value) ? String(value) : "";
-  }
-  return isString(props.item) || isNumber(props.item) ? String(props.item) : "";
+  option: { type: Object, required: true },
+  selected: { type: Boolean, required: false },
+  render: { type: Function, required: false }
 });
+const loadMore = computed(() => isLoadMoreOption(props.option));
+function content() {
+  const { item } = props.option;
+  if (item === void 0) return null;
+  return props.render?.({
+    disabled: props.option.disabled === true,
+    item,
+    option: props.option,
+    selected: props.selected === true
+  });
+}
 </script>
 
 <template>
@@ -24,7 +28,10 @@ const label = computed(() => {
     data-form-option-loading=""
   >
     <UIcon name="i-lucide-loader-circle" class="size-3.5 animate-spin" aria-hidden="true" />
-    {{ label }}
+    {{ option.label }}
+  </span>
+  <span v-else-if="render" class="block whitespace-normal" data-form-option-custom>
+    <FormOptionRender :content="content" />
   </span>
-  <template v-else>{{ label }}</template>
+  <template v-else>{{ option.label }}</template>
 </template>

package/dist/runtime/form/components/utils/form-option-item-label.vue.d.ts

@@ -1,6 +1,13 @@
-import type { FormValue } from '../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { FormOptionRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Label of an option in a menu. The load-more row keeps its own loader, an option with a
+ * `renderOption` function shows what it returns, and any other option shows its label.
+ */
 type __VLS_Props = {
-    item: FormValue;
+    option: ResolvedFormOption;
+    selected?: boolean;
+    render?: (context: FormOptionRenderContext) => VNodeChild;
 };
 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;

package/dist/runtime/form/components/utils/form-option-leading.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/**
+ * The one visual an option draws before its label: its icon, else its avatar, else its chip, the
+ * same order as Nuxt UI items. Draws nothing for an option that declares none, or for no option:
+ * a menu fills its leading slot with this component even when a `renderOption` function owns the
+ * content, because an empty slot would bring back the Nuxt UI icon.
+ */
+type __VLS_Props = {
+    option?: ResolvedFormOption;
+    /** Classes of the icon, so a control can match its own leading icon. */
+    iconClass?: string;
+    /** Nuxt UI avatar size; one the avatar does not know falls back to `xs`. */
+    avatarSize?: string;
+    /** Classes of the box the chip dot is centered in. */
+    chipClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    iconClass: string;
+    avatarSize: string;
+    chipClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/components/utils/form-option-leading.vue

@@ -0,0 +1,41 @@
+<script setup>
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UChip from "@nuxt/ui/components/Chip.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+const AVATAR_SIZES = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+const props = defineProps({
+  option: { type: Object, required: false },
+  iconClass: { type: String, required: false, default: "size-4 text-muted" },
+  avatarSize: { type: String, required: false, default: "xs" },
+  chipClass: { type: String, required: false, default: "size-4" }
+});
+const size = computed(() => AVATAR_SIZES.find((entry) => entry === props.avatarSize) ?? "xs");
+</script>
+
+<template>
+  <UIcon
+    v-if="option?.icon"
+    :name="option.icon"
+    :class="['shrink-0', iconClass]"
+    aria-hidden="true"
+    data-form-option-leading="icon"
+  />
+  <UAvatar
+    v-else-if="option?.avatar"
+    :src="option.avatar.src"
+    :alt="option.avatar.alt ?? option.label"
+    :text="option.avatar.text"
+    :size="size"
+    class="shrink-0"
+    data-form-option-leading="avatar"
+  />
+  <span
+    v-else-if="option?.chip"
+    :class="['grid shrink-0 place-items-center', chipClass]"
+    aria-hidden="true"
+    data-form-option-leading="chip"
+  >
+    <UChip standalone inset size="md" :color="option.chip.color" />
+  </span>
+</template>

package/dist/runtime/form/components/utils/form-option-leading.vue.d.ts

@@ -0,0 +1,23 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/**
+ * The one visual an option draws before its label: its icon, else its avatar, else its chip, the
+ * same order as Nuxt UI items. Draws nothing for an option that declares none, or for no option:
+ * a menu fills its leading slot with this component even when a `renderOption` function owns the
+ * content, because an empty slot would bring back the Nuxt UI icon.
+ */
+type __VLS_Props = {
+    option?: ResolvedFormOption;
+    /** Classes of the icon, so a control can match its own leading icon. */
+    iconClass?: string;
+    /** Nuxt UI avatar size; one the avatar does not know falls back to `xs`. */
+    avatarSize?: string;
+    /** Classes of the box the chip dot is centered in. */
+    chipClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    iconClass: string;
+    avatarSize: string;
+    chipClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/components/utils/form-option-render.d.ts

@@ -0,0 +1,11 @@
+import type { VNodeChild } from 'vue';
+/**
+ * Renders what a `renderOption` or `renderValue` function returned. The function is called inside
+ * this component's render, so the reactive state it reads re-renders only this option.
+ */
+declare const _default: import("vue").DefineSetupFnComponent<{
+    content: () => VNodeChild;
+}, {}, {}, {
+    content: () => VNodeChild;
+} & {}, import("vue").PublicProps>;
+export default _default;

package/dist/runtime/form/components/utils/form-option-render.js

@@ -0,0 +1,5 @@
+import { defineComponent } from "vue";
+export default defineComponent((props) => () => props.content(), {
+  name: "FormOptionRender",
+  props: ["content"]
+});

package/dist/runtime/form/components/utils/form-option-suffix.d.vue.ts

@@ -0,0 +1,8 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/** The secondary text at the end of an option, dimmed, with numbers that line up in a column. */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+};
+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;

package/dist/runtime/form/components/utils/form-option-suffix.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  option: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <span
+    v-if="option.suffix"
+    class="shrink-0 whitespace-nowrap text-dimmed tabular-nums"
+    data-form-option-suffix
+  >
+    {{ option.suffix }}
+  </span>
+</template>

package/dist/runtime/form/components/utils/form-option-suffix.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ResolvedFormOption } from '../../types/index.js';
+/** The secondary text at the end of an option, dimmed, with numbers that line up in a column. */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+};
+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;

package/dist/runtime/form/components/utils/form-option-value-overlay.d.vue.ts

@@ -0,0 +1,30 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Draws the chosen option of an auto-complete over the text of its input, while the field rests.
+ * The input holds plain text, so a `renderValue` result or a suffix after the label can only sit
+ * on top of it: the input keeps its own text (made transparent by the field while `active`), its
+ * selection and its focus, and the overlay copies the input's padding and type so the value starts
+ * where the text would. It ignores the pointer, and is hidden from assistive technology because
+ * the input already announces the label.
+ */
+type __VLS_Props = {
+    /** The chosen option, or none. */
+    option?: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** True while the overlay stands in for the text of the input. */
+    active: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/components/utils/form-option-value-overlay.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+import FormOptionDisplayValue from "./form-option-display-value.vue";
+const props = defineProps({
+  option: { type: Object, required: false },
+  render: { type: Function, required: false },
+  active: { type: Boolean, required: true }
+});
+const root = useTemplateRef("root");
+const inset = ref({});
+function measure() {
+  const input = root.value?.querySelector("input");
+  if (!input) return;
+  const style = getComputedStyle(input);
+  inset.value = {
+    fontSize: style.fontSize,
+    insetInlineEnd: style.paddingInlineEnd,
+    insetInlineStart: style.paddingInlineStart,
+    lineHeight: style.lineHeight
+  };
+}
+onMounted(measure);
+watch(
+  () => [props.option?.value, props.active],
+  () => nextTick(measure)
+);
+</script>
+
+<template>
+  <div ref="root" class="relative w-full min-w-0">
+    <slot />
+    <div
+      v-if="active && option"
+      class="pointer-events-none absolute inset-y-0 flex min-w-0 items-center overflow-hidden whitespace-nowrap text-highlighted"
+      :style="inset"
+      aria-hidden="true"
+      data-form-option-value-overlay
+    >
+      <span class="min-w-0 truncate">
+        <FormOptionDisplayValue :option="option" :render="render" />
+      </span>
+    </div>
+  </div>
+</template>

package/dist/runtime/form/components/utils/form-option-value-overlay.vue.d.ts

@@ -0,0 +1,30 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * Draws the chosen option of an auto-complete over the text of its input, while the field rests.
+ * The input holds plain text, so a `renderValue` result or a suffix after the label can only sit
+ * on top of it: the input keeps its own text (made transparent by the field while `active`), its
+ * selection and its focus, and the overlay copies the input's padding and type so the value starts
+ * where the text would. It ignores the pointer, and is hidden from assistive technology because
+ * the input already announces the label.
+ */
+type __VLS_Props = {
+    /** The chosen option, or none. */
+    option?: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** True while the overlay stands in for the text of the input. */
+    active: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/composables/use-choice-group-items.d.ts

@@ -0,0 +1,27 @@
+import type { FormControlUi, FormOptionRuntimeState, ResolvedFormOption } from '../types/index.js';
+/**
+ * Items for the Nuxt UI radio and checkbox groups of a field whose options carry more than a
+ * label. The group gets the plain parts of each option only: the leading visual, the suffix and a
+ * custom render are drawn in its label slot (`optionOf` finds the resolved option behind a slot
+ * item), and the description sits under the label, lined up with it. Nothing else of the option
+ * reaches the group, whose own `icon` is the check mark of a checkbox.
+ */
+export declare function useChoiceGroupItems<TValue extends string | ResolvedFormOption['value']>(params: {
+    /** True when a `renderOption` function owns the content of the options. */
+    custom: () => boolean;
+    options: FormOptionRuntimeState;
+    ui: () => FormControlUi | undefined;
+    /** The value the group knows an option by. */
+    valueOf: (option: ResolvedFormOption) => TValue;
+}): {
+    items: import("vue").ComputedRef<{
+        description: string | undefined;
+        disabled: boolean | undefined;
+        label: string;
+        ui: {
+            description: string;
+        } | undefined;
+        value: TValue;
+    }[]>;
+    optionOf: (key: string) => ResolvedFormOption;
+};

package/dist/runtime/form/composables/use-choice-group-items.js

@@ -0,0 +1,24 @@
+import { computed } from "vue";
+import { formOptionKey, resolveOptionDescriptionIndent } from "../utils/options.js";
+import { mergeFormUiClass } from "../utils/ui.js";
+export function useChoiceGroupItems(params) {
+  const optionByKey = computed(
+    () => new Map(params.options.items.value.map((option) => [formOptionKey(option.value), option]))
+  );
+  const items = computed(
+    () => params.options.items.value.map((option) => {
+      const indent = params.custom() ? void 0 : resolveOptionDescriptionIndent(option);
+      return {
+        description: params.custom() ? void 0 : option.description,
+        disabled: option.disabled,
+        label: option.label,
+        ui: indent ? { description: mergeFormUiClass(params.ui()?.description, indent) } : void 0,
+        value: params.valueOf(option)
+      };
+    })
+  );
+  function optionOf(key) {
+    return optionByKey.value.get(key) ?? { label: key, value: key };
+  }
+  return { items, optionOf };
+}

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

@@ -28,17 +28,17 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
     interactionOwnerClass: import("vue").ComputedRef<string>;
     options: {
         activate: () => void;
-        add: (option: FormValue) => import("../utils/options.js").ResolvedFormOption;
+        add: (option: FormValue) => import("../types/index.js").ResolvedFormOption;
         creatable: import("vue").ComputedRef<boolean>;
-        create: (label?: string) => Promise<import("../utils/options.js").ResolvedFormOption | null>;
+        create: (label?: string) => Promise<import("../types/index.js").ResolvedFormOption | null>;
         createLabel: import("vue").ComputedRef<string | undefined>;
         creating: import("vue").ComputedRef<boolean>;
         disableOnLoading: import("vue").ComputedRef<boolean>;
         error: import("vue").ComputedRef<unknown>;
         fetching: import("vue").ComputedRef<boolean>;
         hasMore: import("vue").ComputedRef<boolean>;
-        items: import("vue").ComputedRef<readonly import("../utils/options.js").ResolvedFormOption[]>;
-        loadChildren: (option: import("../utils/options.js").ResolvedFormOption) => Promise<void>;
+        items: import("vue").ComputedRef<readonly import("../types/index.js").ResolvedFormOption[]>;
+        loadChildren: (option: import("../types/index.js").ResolvedFormOption) => Promise<void>;
         loadMore: () => Promise<void>;
         loading: import("vue").ComputedRef<boolean>;
         loadingMore: import("vue").ComputedRef<boolean>;
@@ -51,11 +51,11 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
         retryable: import("vue").ComputedRef<boolean>;
         search: import("vue").ComputedRef<string>;
         selectCreatedOption: import("vue").ComputedRef<boolean>;
-        selectedItems: import("vue").ComputedRef<readonly import("../utils/options.js").ResolvedFormOption[]>;
+        selectedItems: import("vue").ComputedRef<readonly import("../types/index.js").ResolvedFormOption[]>;
         setSearch: (term: string) => void;
     };
     params: import("vue").ComputedRef<import("../types/index.js").FormFieldCallbackParams<{}, import("../types/index.js").FormDependencies, unknown, unknown>>;
-    placeholder: import("vue").ComputedRef<string>;
+    placeholder: import("vue").ComputedRef<string | undefined>;
     validationPending: import("vue").ComputedRef<boolean>;
 };
 export {};

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

@@ -1,10 +1,11 @@
 import { watchWithFilter } from "@vueuse/core";
 import { computed, onScopeDispose } from "vue";
-import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import { isEqualFormValue } from "../utils/compare.js";
+import { isFieldDisabledByCallback } from "../utils/disabled.js";
 import { createFormFieldInstance } from "../utils/field-instance.js";
 import { cloneFormValue } from "../utils/path.js";
-import { isFunction, isNumber, isObject, isString } from "../utils/predicate.js";
+import { isFunction, isObject, isString } from "../utils/predicate.js";
+import { resolveFieldText } from "../utils/text.js";
 import { mergeFormUiClass } from "../utils/ui.js";
 import { useFieldOptions } from "./use-field-options.js";
 import { useFormFieldControlAttrs } from "./use-form-field-chrome.js";
@@ -24,7 +25,6 @@ export function useResolvedFieldProps(field, path) {
 export function useFieldControl(field, path, controlOptions = {}) {
   const form = useFormRuntimeContext();
   const formUi = useFormUi();
-  const { t } = useUiToolsLocale();
   const fieldControlAttrs = useFormFieldControlAttrs();
   const api = computed(() => form.getFieldApi(path(), field()));
   const params = computed(() => form.getFieldCallbackParams(path(), field()));
@@ -73,24 +73,12 @@ export function useFieldControl(field, path, controlOptions = {}) {
     const value = controlProps.value.size;
     return isFormControlSize(value) ? value : formUi.controlSize.value;
   });
-  const disabled = computed(() => {
-    const current = field();
-    const value = Object.getOwnPropertyDescriptor(current, "disabled")?.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 (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");
-  });
+  const disabled = computed(
+    () => isFieldDisabledByCallback(field(), params.value) || form.actionPending.value !== null || options.disableOnLoading.value && options.loading.value
+  );
+  const placeholder = computed(
+    () => resolveFieldText(Object.getOwnPropertyDescriptor(field(), "placeholder")?.value, params.value)
+  );
   let lastValue = cloneFormValue(form.getValue(path()));
   watchWithFilter(
     () => form.getValue(path()),

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

@@ -6,7 +6,9 @@ import {
   mergeResolvedOptions,
   normalizeOptionItem,
   normalizeOptionItems,
-  normalizeOptionSelection
+  normalizeOptionSelection,
+  readOptionSource,
+  resolveOptionGroupKey
 } from "../utils/options.js";
 import { isRecord, relativePathSegments } from "../utils/path.js";
 import {
@@ -31,7 +33,10 @@ export function useFieldOptions(params) {
   const promiseResolution = shallowRef(null);
   const creating = ref(false);
   const remoteConfig = computed(() => resolveRemoteOptionConfig(params.field()));
-  const optionKeys = computed(() => resolveOptionKeys(params.field()));
+  const optionKeys = computed(() => ({
+    ...resolveOptionKeys(params.field()),
+    group: resolveOptionGroupKey(params.field())
+  }));
   const remote = useRemoteFieldOptions({
     api: params.api,
     callbackParams: params.callbackParams,
@@ -389,8 +394,7 @@ function resolveOptionSource(field, params) {
   if (!createFormFieldInstance(field).capability.has("options")) {
     return [];
   }
-  const options = Object.getOwnPropertyDescriptor(field, "options")?.value;
-  const source = isRecord(options) && "source" in options ? options.source : options;
+  const source = readOptionSource(field);
   return isFunction(source) ? source(params) : source;
 }
 function emptyTrackedOptionSource() {

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

@@ -30,9 +30,10 @@ export function useFormItemLayout(params) {
     ),
     normalizeFormGridColumnSpanStyle
   );
-  const style = computed(
-    () => span.value ?? normalizeFormGridColumnSpanStyle(String(FORM_LAYOUT_DEFAULTS.fieldSpan))
-  );
+  const style = computed(() => {
+    const spanStyle = span.value ?? normalizeFormGridColumnSpanStyle(String(FORM_LAYOUT_DEFAULTS.fieldSpan));
+    return params.layout()?.newRow ? `${spanStyle}; grid-column-start: 1` : spanStyle;
+  });
   return {
     span,
     style