nuxt-ui-tools 1.17.0 → 1.18.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -35,6 +35,7 @@ function getPublicComponents(runtimeDir, options) {
       "ColumnPanel",
       "SortMenu",
       "LayoutSwitch",
+      "ViewToggle",
       "Content",
       "ErrorState",
       "Table",

package/dist/runtime/form/components/page/form-page-navigation.d.vue.ts

@@ -1,11 +1,13 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
  * Navigation of a form page: one entry per visible section, following the section in view.
- * An entry shows whether its section is complete, invalid, or still to fill, marks optional
- * sections, and, with `controls.dirtyCheck`, a dot on modified sections. The footer sums up
- * the sections left to complete, or the modified ones with dirty checking.
+ * An entry shows whether its section is complete, to fix, to complete, or optional with nothing
+ * entered (a dashed circle and an "Optional" tag, never "to complete"), and, with
+ * `controls.dirtyCheck`, a dot on modified sections. The footer sums up the sections left to
+ * complete, which leaves out untouched optional ones, or the modified ones with dirty checking.
  *
  * From 768px of page width it is a pinned column; below, a row of chips that scrolls sideways.
+ * It renders nothing while the page has fewer visible sections than `navigation.minSections`.
  */
 type __VLS_Slots = {
     /** Replaces the heading, which comes from the schema `navigation.title`. */

package/dist/runtime/form/components/page/form-page-navigation.vue

@@ -73,6 +73,7 @@ function select(event, key) {
 
 <template>
   <nav
+    v-if="page.navigationVisible.value"
     :aria-labelledby="page.navigationTitle.value || $slots.title ? titleId : void 0"
     :aria-label="page.navigationTitle.value || $slots.title ? void 0 : t('form.page.navigation')"
     :style="{ '--nut-form-page-header': `${page.stickyOffset.value}px` }"
@@ -138,7 +139,7 @@ function select(event, key) {
                 aria-hidden="true"
                 :class="
   mergeFormUiClass(
-    'grid size-4 shrink-0 place-items-center rounded-full border-[1.5px] border-accented text-[10px] leading-none font-bold group-data-[active]:border-primary data-[state=complete]:border-(--ui-text-highlighted) data-[state=complete]:bg-(--ui-text-highlighted) data-[state=complete]:text-(--ui-bg) data-[state=invalid]:border-error data-[state=invalid]:bg-error data-[state=invalid]:text-inverted group-data-[active]:data-[state=complete]:border-primary group-data-[active]:data-[state=complete]:bg-primary group-data-[active]:data-[state=complete]:text-inverted',
+    'grid size-4 shrink-0 place-items-center rounded-full border-[1.5px] border-accented text-[10px] leading-none font-bold group-data-[active]:border-primary data-[state=optional]:border-dashed data-[state=complete]:border-(--ui-text-highlighted) data-[state=complete]:bg-(--ui-text-highlighted) data-[state=complete]:text-(--ui-bg) data-[state=invalid]:border-error data-[state=invalid]:bg-error data-[state=invalid]:text-inverted group-data-[active]:data-[state=complete]:border-primary group-data-[active]:data-[state=complete]:bg-primary group-data-[active]:data-[state=complete]:text-inverted',
     pageUi?.navigationIndicator
   )
 "
@@ -182,15 +183,17 @@ function select(event, key) {
                 data-form-page-dirty
               />
               <span
-                v-else-if="section.optional && section.status !== 'complete'"
+                v-else-if="section.status === 'optional'"
+                aria-hidden="true"
                 :class="
   mergeFormUiClass(
     'hidden shrink-0 text-[11px] font-normal text-dimmed @3xl/form-page:inline',
     pageUi?.navigationOptional
   )
 "
+                data-form-page-optional
               >
-                {{ t("form.page.optional") }}
+                {{ t("form.page.status.optional") }}
               </span>
             </a>
           </slot>

package/dist/runtime/form/components/page/form-page-navigation.vue.d.ts

@@ -1,11 +1,13 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
  * Navigation of a form page: one entry per visible section, following the section in view.
- * An entry shows whether its section is complete, invalid, or still to fill, marks optional
- * sections, and, with `controls.dirtyCheck`, a dot on modified sections. The footer sums up
- * the sections left to complete, or the modified ones with dirty checking.
+ * An entry shows whether its section is complete, to fix, to complete, or optional with nothing
+ * entered (a dashed circle and an "Optional" tag, never "to complete"), and, with
+ * `controls.dirtyCheck`, a dot on modified sections. The footer sums up the sections left to
+ * complete, which leaves out untouched optional ones, or the modified ones with dirty checking.
  *
  * From 768px of page width it is a pinned column; below, a row of chips that scrolls sideways.
+ * It renders nothing while the page has fewer visible sections than `navigation.minSections`.
  */
 type __VLS_Slots = {
     /** Replaces the heading, which comes from the schema `navigation.title`. */

package/dist/runtime/form/components/page/form-page-section.vue

@@ -50,7 +50,7 @@ onBeforeUnmount(() => unregister?.());
 }"
     :class="
   mergeFormUiClass(
-    'flex min-w-0 flex-col gap-[18px] rounded-xl border border-default bg-default px-5 pt-5 pb-6 transition-[border-color,box-shadow] duration-200 @3xl/form-page:px-6 @3xl/form-page:pt-[22px] data-[dirty]:border-primary data-[dirty]:ring-4 data-[dirty]:ring-primary/20 data-[dirty]:ring-inset',
+    `flex min-w-0 flex-col ${page.surfaceClasses.value.section}`,
     pageUi?.section
   )
 "
@@ -77,7 +77,7 @@ onBeforeUnmount(() => unregister?.());
         v-if="section.description"
         :class="
   mergeFormUiClass(
-    'order-last m-0 basis-full text-[13px] text-muted @3xl/form-page:order-none @3xl/form-page:basis-auto',
+    `m-0 text-[13px] text-muted ${page.surfaceClasses.value.sectionDescription}`,
     pageUi?.sectionDescription
   )
 "
@@ -85,11 +85,12 @@ onBeforeUnmount(() => unregister?.());
         {{ section.description }}
       </p>
       <UBadge
-        v-if="section.optional"
+        v-if="section.status === 'optional'"
         color="neutral"
         variant="soft"
-        :label="t('form.page.optional')"
-        :class="mergeFormUiClass('capitalize', pageUi?.sectionOptional)"
+        :label="t('form.page.status.optional')"
+        :class="pageUi?.sectionOptional"
+        data-form-page-optional
       />
       <div
         v-if="page.dirtyCheck.value || $slots.actions"

package/dist/runtime/form/components/page/form-page-sections.d.vue.ts

@@ -1,8 +1,9 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
- * Cards of a form page, one per visible section, each with its title, description, fields, and,
- * with `controls.dirtyCheck`, a ring and a reset button while it is modified. Skeleton cards
- * stand in while the schema context loads.
+ * Sections of a form page, one per visible section, each with its title, description, fields, and,
+ * with `controls.dirtyCheck`, a mark and a reset button while it is modified. They are cards, or
+ * plain blocks with the `page.surface` UI option. Skeletons stand in while the schema context
+ * loads.
  */
 type __VLS_Slots = {
     /** Extra buttons in a section header, before its reset button. */

package/dist/runtime/form/components/page/form-page-sections.vue

@@ -18,7 +18,12 @@ const { contextError, contextLoading, contextPending, refreshContext } = page.ro
 
 <template>
   <div
-    :class="mergeFormUiClass('flex min-w-0 flex-col gap-[18px]', pageUi?.sections)"
+    :class="
+  mergeFormUiClass(
+    `flex min-w-0 flex-col ${page.surfaceClasses.value.sections}`,
+    pageUi?.sections
+  )
+"
     data-form-page-sections
   >
     <UAlert
@@ -48,7 +53,7 @@ const { contextError, contextLoading, contextPending, refreshContext } = page.ro
         :key="section.key"
         :class="
   mergeFormUiClass(
-    'grid gap-4 rounded-xl border border-default bg-default px-6 pt-[22px] pb-6',
+    `grid gap-4 ${page.surfaceClasses.value.sectionSkeleton}`,
     pageUi?.sectionSkeleton
   )
 "

package/dist/runtime/form/components/page/form-page-sections.vue.d.ts

@@ -1,8 +1,9 @@
 import type { FormPageSectionState } from '../../types/index.js';
 /**
- * Cards of a form page, one per visible section, each with its title, description, fields, and,
- * with `controls.dirtyCheck`, a ring and a reset button while it is modified. Skeleton cards
- * stand in while the schema context loads.
+ * Sections of a form page, one per visible section, each with its title, description, fields, and,
+ * with `controls.dirtyCheck`, a mark and a reset button while it is modified. They are cards, or
+ * plain blocks with the `page.surface` UI option. Skeletons stand in while the schema context
+ * loads.
  */
 type __VLS_Slots = {
     /** Extra buttons in a section header, before its reset button. */

package/dist/runtime/form/components/page/form-page.d.vue.ts

@@ -2,6 +2,8 @@ import type { FormPageSectionState, FormRendererController, FormUiConfig, FormVa
 /**
  * A form laid out as a page: a header with the title and the actions, a navigation that follows
  * the section in view, and one card per section. Render a schema from `defineFormPageSchema`.
+ * The `page.surface` UI option draws the sections as `plain` blocks instead of cards, and the
+ * schema `navigation.minSections` leaves the navigation out of a page with few sections.
  *
  * The page scrolls on its own, so give it a height (`h-full` in a layout that sizes its main
  * area). Put parts in the default slot to compose another layout: `FormPageHeader`,

package/dist/runtime/form/components/page/form-page.vue

@@ -30,6 +30,10 @@ const root = useFormRoot({
 });
 const page = provideFormPage(useFormPage({ element: () => element.value, hash: () => hash, root }));
 const pageUi = computed(() => root.formUi.ui.value.page?.ui);
+const BODY_UI = {
+  beside: "grid gap-4 px-4 pt-4 pb-16 @3xl/form-page:grid-cols-[200px_minmax(0,1fr)] @3xl/form-page:items-start @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20 @5xl/form-page:grid-cols-[230px_minmax(0,760px)]",
+  single: "mx-auto grid w-full max-w-[816px] gap-4 px-4 pt-4 pb-16 @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20"
+};
 </script>
 
 <template>
@@ -37,8 +41,12 @@ const pageUi = computed(() => root.formUi.ui.value.page?.ui);
     ref="element"
     novalidate
     :class="
-  mergeFormUiClass('@container/form-page h-full min-w-0 overflow-y-auto bg-muted', pageUi?.root)
+  mergeFormUiClass(
+    `@container/form-page h-full min-w-0 overflow-y-auto ${page.surfaceClasses.value.root}`,
+    pageUi?.root
+  )
 "
+    :data-surface="page.surface.value"
     data-form-page
     @submit.prevent="root.submit"
   >
@@ -63,7 +71,7 @@ const pageUi = computed(() => root.formUi.ui.value.page?.ui);
       <div
         :class="
   mergeFormUiClass(
-    'grid gap-4 px-4 pt-4 pb-16 @3xl/form-page:grid-cols-[200px_minmax(0,1fr)] @3xl/form-page:items-start @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20 @5xl/form-page:grid-cols-[230px_minmax(0,760px)]',
+    page.navigationVisible.value ? BODY_UI.beside : BODY_UI.single,
     pageUi?.body
   )
 "

package/dist/runtime/form/components/page/form-page.vue.d.ts

@@ -2,6 +2,8 @@ import type { FormPageSectionState, FormRendererController, FormUiConfig, FormVa
 /**
  * A form laid out as a page: a header with the title and the actions, a navigation that follows
  * the section in view, and one card per section. Render a schema from `defineFormPageSchema`.
+ * The `page.surface` UI option draws the sections as `plain` blocks instead of cards, and the
+ * schema `navigation.minSections` leaves the navigation out of a page with few sections.
  *
  * The page scrolls on its own, so give it a height (`h-full` in a layout that sizes its main
  * area). Put parts in the default slot to compose another layout: `FormPageHeader`,

package/dist/runtime/form/components/renderer/form-field-renderer.vue

@@ -1,6 +1,7 @@
 <script setup>
 import UAlert from "@nuxt/ui/components/Alert.vue";
 import { computed, ref, useId, watchEffect } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { useFieldEffects } from "../../composables/use-field-effects";
 import {
   provideFormFieldBare,
@@ -67,6 +68,7 @@ const props = defineProps({
   controlAttrs: { type: null, required: false }
 });
 const form = useFormRuntimeContext();
+const { t } = useUiToolsLocale();
 const element = ref(null);
 const bare = computed(() => props.bare === true);
 const controlId = useId();
@@ -208,8 +210,8 @@ function resolveControlLabel(controlField) {
       color="neutral"
       variant="soft"
       icon="i-lucide-construction"
-      title="Unsupported field"
-      :description="`The ${field.type.value} field renderer is not implemented in this slice.`"
+      :title="t('form.fields.unsupported.title')"
+      :description="t('form.fields.unsupported.description', { type: field.type.value })"
     />
   </template>
 
@@ -225,8 +227,8 @@ function resolveControlLabel(controlField) {
       color="neutral"
       variant="soft"
       icon="i-lucide-construction"
-      title="Unsupported field"
-      :description="`The ${field.type.value} field renderer is not implemented in this slice.`"
+      :title="t('form.fields.unsupported.title')"
+      :description="t('form.fields.unsupported.description', { type: field.type.value })"
     />
   </div>
 </template>

package/dist/runtime/form/components/renderer/form-field-shell.d.vue.ts

@@ -9,12 +9,12 @@ declare var __VLS_1: {
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_61: {
+}, __VLS_67: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_75: {
+}, __VLS_81: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
@@ -23,9 +23,9 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_61) => any;
+    default?: (props: typeof __VLS_67) => any;
 } & {
-    default?: (props: typeof __VLS_75) => any;
+    default?: (props: typeof __VLS_81) => 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>;

package/dist/runtime/form/components/renderer/form-field-shell.vue

@@ -11,6 +11,7 @@ import { useFormFieldBare } from "../../composables/use-form-field-chrome";
 import { useFormRuntimeContext } from "../../composables/use-form-runtime";
 import { useFormUi } from "../../composables/use-form-ui";
 import { getSchemaDirtyCheck } from "../../utils/controls";
+import { resolveFieldDisabledReason } from "../../utils/disabled";
 import { createFormFieldInstance } from "../../utils/field-instance";
 import { isFunction, isNumber, isString } from "../../utils/predicate";
 import { resolveRequired } from "../../utils/state";
@@ -85,6 +86,9 @@ const help = computed(
   () => field.value.capability.has("hint") && "help" in props.field ? resolveFieldText(props.field.help, params.value) : void 0
 );
 const shellHelp = computed(() => props.inlineLabel ? void 0 : help.value);
+const disabledReason = computed(
+  () => field.value.capability.has("hint") ? resolveFieldDisabledReason(props.field, params.value) : void 0
+);
 const dirty = computed(
   () => "dirtyCheck" in props.field && (props.field.dirtyCheck === true || getSchemaDirtyCheck(form.schema.value)) && form.dirtyPaths.value.includes(props.path.join("."))
 );
@@ -130,7 +134,7 @@ function renderLabelExtra() {
     :description="shellDescription"
     :hint="shellLabelExtra === void 0 || shellLabelExtra === null ? shellHint : void 0"
     :error="error"
-    :help="shellHelp"
+    :help="shellHelp ?? disabledReason"
     :required="required"
     :size="formUi.controlSize.value"
     :orientation="orientation"
@@ -183,6 +187,26 @@ function renderLabelExtra() {
         <component :is="renderLabelExtra" />
       </span>
     </template>
+    <template v-if="disabledReason" #help>
+      <span v-if="shellHelp" class="block">{{ shellHelp }}</span>
+      <span
+        :class="
+  mergeFormUiClass(
+    'flex items-start gap-1.5',
+    shellHelp ? 'mt-1' : void 0,
+    fieldUi?.disabledReason
+  )
+"
+        data-form-disabled-reason=""
+      >
+        <UIcon
+          name="i-lucide-lock"
+          aria-hidden="true"
+          :class="mergeFormUiClass('mt-0.5 size-3.5 shrink-0', fieldUi?.disabledReasonIcon)"
+        />
+        <span>{{ disabledReason }}</span>
+      </span>
+    </template>
     <UCollapsible
       v-if="collapsible"
       v-model:open="open"
@@ -195,7 +219,7 @@ function renderLabelExtra() {
         :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
         :class="mergeFormUiClass('justify-self-start', fieldUi?.collapseTrigger)"
       >
-        {{ open ? "Collapse" : "Expand" }}
+        {{ open ? t("form.fields.shell.collapse") : t("form.fields.shell.expand") }}
       </UButton>
       <template #content>
         <div :class="mergeFormUiClass('flex items-start gap-2', fieldUi?.body)">
@@ -216,7 +240,7 @@ function renderLabelExtra() {
             color="neutral"
             variant="ghost"
             size="xs"
-            aria-label="Reset field"
+            :aria-label="t('form.fields.shell.reset')"
             :class="fieldUi?.reset"
             @click="resetField"
           />
@@ -239,7 +263,7 @@ function renderLabelExtra() {
         color="neutral"
         variant="ghost"
         size="xs"
-        aria-label="Reset field"
+        :aria-label="t('form.fields.shell.reset')"
         :class="fieldUi?.reset"
         @click="resetField"
       />

package/dist/runtime/form/components/renderer/form-field-shell.vue.d.ts

@@ -9,12 +9,12 @@ declare var __VLS_1: {
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_61: {
+}, __VLS_67: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
     required: any;
-}, __VLS_75: {
+}, __VLS_81: {
     label: string | undefined;
     description: string | undefined;
     hint: string | undefined;
@@ -23,9 +23,9 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_61) => any;
+    default?: (props: typeof __VLS_67) => any;
 } & {
-    default?: (props: typeof __VLS_75) => any;
+    default?: (props: typeof __VLS_81) => 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>;

package/dist/runtime/form/components/root/form.vue

@@ -143,7 +143,7 @@ defineExpose({
   validate: runtime.validate
 });
 function stepLabel(index) {
-  return runtime.steps.value[index]?.label ?? `Step ${index + 1}`;
+  return runtime.steps.value[index]?.label ?? t("form.steps.fallback", { number: index + 1 });
 }
 function getHeaderText(headerConfig, key) {
   if (!isRecord(headerConfig)) {
@@ -245,7 +245,7 @@ function getSchemaShowStepper(schema) {
           :size="formUi.controlSize.value"
           icon="i-lucide-x"
           :disabled="runtime.actionPending.value !== null"
-          aria-label="Close form"
+          :aria-label="t('form.actions.closeButton')"
           :class="formUi.ui.value.root?.ui?.close"
           @click="cancel"
         />

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

@@ -55,7 +55,7 @@ export declare function useFieldControl<TField extends FormField>(field: () => T
         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-page.d.ts

@@ -2,7 +2,8 @@ import type { FormPageSectionState } from '../types/index.js';
 import type { useFormRoot } from './use-form-root.js';
 /**
  * State shared by a form page and its parts: the visible sections and where each stands, the
- * section in view, the navigation summary, and the actions a part can take on a section.
+ * section in view, the navigation summary, whether the navigation shows, the surface the
+ * sections are drawn with, and the actions a part can take on a section.
  */
 export declare function useFormPage(params: {
     root: ReturnType<typeof useFormRoot>;
@@ -19,6 +20,7 @@ export declare function useFormPage(params: {
     }[]>;
     modified: import("vue").ComputedRef<number>;
     navigationTitle: import("vue").ComputedRef<string | undefined>;
+    navigationVisible: import("vue").ComputedRef<boolean>;
     register: (key: string, element: HTMLElement) => () => void;
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
@@ -42,6 +44,8 @@ export declare function useFormPage(params: {
     scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
     sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
     stickyOffset: import("vue").Ref<number, number>;
+    surface: import("vue").ComputedRef<import("../types/index.js").FormPageSurface>;
+    surfaceClasses: import("vue").ComputedRef<import("../utils/page-surface.js").FormPageSurfaceClasses>;
 };
 export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     active: import("vue").Ref<string | undefined, string | undefined>;
@@ -53,6 +57,7 @@ export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     }[]>;
     modified: import("vue").ComputedRef<number>;
     navigationTitle: import("vue").ComputedRef<string | undefined>;
+    navigationVisible: import("vue").ComputedRef<boolean>;
     register: (key: string, element: HTMLElement) => () => void;
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
@@ -76,6 +81,8 @@ export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
     scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
     sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
     stickyOffset: import("vue").Ref<number, number>;
+    surface: import("vue").ComputedRef<import("../types/index.js").FormPageSurface>;
+    surfaceClasses: import("vue").ComputedRef<import("../utils/page-surface.js").FormPageSurfaceClasses>;
 };
 /** The page a part renders in. Parts only work inside `FormPage`. */
 export declare function useFormPageContext(): {
@@ -88,6 +95,7 @@ export declare function useFormPageContext(): {
     }[]>;
     modified: import("vue").ComputedRef<number>;
     navigationTitle: import("vue").ComputedRef<string | undefined>;
+    navigationVisible: import("vue").ComputedRef<boolean>;
     register: (key: string, element: HTMLElement) => () => void;
     remaining: import("vue").ComputedRef<number>;
     resetSection: (key: string) => Promise<void>;
@@ -111,4 +119,6 @@ export declare function useFormPageContext(): {
     scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
     sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
     stickyOffset: import("vue").Ref<number, number>;
+    surface: import("vue").ComputedRef<import("../types/index.js").FormPageSurface>;
+    surfaceClasses: import("vue").ComputedRef<import("../utils/page-surface.js").FormPageSurfaceClasses>;
 };

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

@@ -1,11 +1,14 @@
 import { computed, inject, provide, ref } from "vue";
 import { getSchemaDirtyCheck } from "../utils/controls.js";
 import {
+  getFormPageNavigationMinSections,
   getFormPageNavigationTitle,
   getFormPageSections,
+  isFormPageSectionBlocking,
   isFormPageSectionVisible,
   resolveFormPageSectionState
 } from "../utils/page.js";
+import { getFormPageSurfaceClasses, resolveFormPageSurface } from "../utils/page-surface.js";
 import { cloneFormValue } from "../utils/path.js";
 import { useFormPageScroll } from "./use-form-page-scroll.js";
 export function useFormPage(params) {
@@ -36,11 +39,11 @@ export function useFormPage(params) {
   );
   const dirtyCheck = computed(() => getSchemaDirtyCheck(root.schema.value));
   const navigationTitle = computed(() => getFormPageNavigationTitle(root.schema.value));
-  const remaining = computed(
-    () => sections.value.filter(
-      (section) => section.optional ? section.missing > 0 || section.status === "invalid" : section.status !== "complete"
-    ).length
-  );
+  const navigationMinSections = computed(() => getFormPageNavigationMinSections(root.schema.value));
+  const navigationVisible = computed(() => sections.value.length >= navigationMinSections.value);
+  const surface = computed(() => resolveFormPageSurface(root.formUi.ui.value.page?.surface));
+  const surfaceClasses = computed(() => getFormPageSurfaceClasses(surface.value));
+  const remaining = computed(() => sections.value.filter(isFormPageSectionBlocking).length);
   const modified = computed(() => sections.value.filter((section) => section.dirty).length);
   const stickyOffset = ref(0);
   const scroll = useFormPageScroll({ hash: params.hash, root: params.element, sections });
@@ -62,13 +65,16 @@ export function useFormPage(params) {
     items,
     modified,
     navigationTitle,
+    navigationVisible,
     register: scroll.register,
     remaining,
     resetSection,
     root,
     scrollTo: scroll.scrollTo,
     sections,
-    stickyOffset
+    stickyOffset,
+    surface,
+    surfaceClasses
   };
 }
 const formPageKey = Symbol("nuxt-ui-tools-form-page");

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

@@ -221,7 +221,7 @@ export function useFormRuntime(params) {
       active: currentStepIndex.value === index,
       index,
       key: step.key ?? String(index + 1),
-      label: isFunction(step.title) ? String(step.title()) : String(step.title ?? step.key ?? `Step ${index + 1}`),
+      label: isFunction(step.title) ? String(step.title()) : String(step.title ?? step.key ?? t("form.steps.fallback", { number: index + 1 })),
       root: step.root
     }))
   );