nuxt-ui-tools 1.2.0 → 1.4.0

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

@@ -0,0 +1,24 @@
+/**
+ * Header of a form page: the schema `header` (eyebrow, title, description), an unsaved-changes
+ * badge while a form with `controls.dirtyCheck` is modified, and the page actions. It stays
+ * pinned while the page scrolls on wide layouts, and sections scroll to just below it.
+ */
+type __VLS_Slots = {
+    /** Before the heading, e.g. an avatar of the record. */
+    leading?: () => unknown;
+    eyebrow?: () => unknown;
+    title?: () => unknown;
+    /** Replaces the description, keeping the unsaved-changes badge after it. */
+    description?: () => unknown;
+    /** Replaces the page actions. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/page/form-page-header.vue

@@ -0,0 +1,99 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import { useResizeObserver } from "@vueuse/core";
+import { computed, onBeforeUnmount, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFormPageContext } from "../../composables/use-form-page";
+import { useFormUi } from "../../composables/use-form-ui";
+import { getFormHeader } from "../../utils/overlay";
+import { isRecord } from "../../utils/path";
+import { resolveFormBoundaryText } from "../../utils/text";
+import { mergeFormUiClass } from "../../utils/ui";
+import FormPageActions from "./form-page-actions.vue";
+defineSlots();
+const page = useFormPageContext();
+const formUi = useFormUi();
+const { t } = useUiToolsLocale();
+const pageUi = computed(() => formUi.ui.value.page?.ui);
+const header = computed(() => getFormHeader(page.root.schema.value));
+const eyebrow = computed(() => headerText(header.value, "eyebrow"));
+const title = computed(() => headerText(header.value, "title"));
+const description = computed(() => headerText(header.value, "description"));
+const unsaved = computed(() => page.dirtyCheck.value && page.root.runtime.isDirty.value);
+const element = useTemplateRef("element");
+useResizeObserver(element, () => {
+  const node = element.value;
+  page.stickyOffset.value = node && getComputedStyle(node).position === "sticky" ? node.offsetHeight : 0;
+});
+onBeforeUnmount(() => {
+  page.stickyOffset.value = 0;
+});
+function headerText(config, key) {
+  return isRecord(config) ? resolveFormBoundaryText(config[key]) : void 0;
+}
+</script>
+
+<template>
+  <header
+    ref="element"
+    :class="
+  mergeFormUiClass(
+    'z-10 flex flex-col gap-3 border-b border-default bg-default px-4 py-4 @3xl/form-page:sticky @3xl/form-page:top-0 @3xl/form-page:flex-row @3xl/form-page:items-center @3xl/form-page:justify-between @3xl/form-page:gap-5 @3xl/form-page:px-7 @3xl/form-page:pt-[18px] @3xl/form-page:pb-4',
+    pageUi?.header
+  )
+"
+    data-form-page-header
+  >
+    <div :class="mergeFormUiClass('flex min-w-0 items-center gap-3.5', pageUi?.headerContent)">
+      <slot name="leading" />
+      <div :class="mergeFormUiClass('grid min-w-0 gap-1.5', pageUi?.heading)">
+        <p
+          v-if="eyebrow || $slots.eyebrow"
+          :class="
+  mergeFormUiClass(
+    'text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase',
+    pageUi?.eyebrow
+  )
+"
+        >
+          <slot name="eyebrow">{{ eyebrow }}</slot>
+        </p>
+        <h1
+          v-if="title || $slots.title"
+          :class="
+  mergeFormUiClass(
+    'm-0 truncate text-[22px] leading-[1.1] font-semibold tracking-[-0.025em] text-highlighted @3xl/form-page:text-[28px]',
+    pageUi?.title
+  )
+"
+        >
+          <slot name="title">{{ title }}</slot>
+        </h1>
+        <div
+          v-if="description || unsaved || $slots.description"
+          :class="
+  mergeFormUiClass(
+    'flex flex-wrap items-center gap-2.5 text-[13.5px] text-muted',
+    pageUi?.meta
+  )
+"
+        >
+          <slot name="description">
+            <span v-if="description">{{ description }}</span>
+          </slot>
+          <UBadge
+            v-if="unsaved"
+            color="warning"
+            variant="soft"
+            :label="t('form.page.unsavedChanges')"
+            :class="pageUi?.unsaved"
+            data-form-page-unsaved
+          />
+        </div>
+      </div>
+    </div>
+    <slot name="actions">
+      <FormPageActions />
+    </slot>
+  </header>
+</template>

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

@@ -0,0 +1,24 @@
+/**
+ * Header of a form page: the schema `header` (eyebrow, title, description), an unsaved-changes
+ * badge while a form with `controls.dirtyCheck` is modified, and the page actions. It stays
+ * pinned while the page scrolls on wide layouts, and sections scroll to just below it.
+ */
+type __VLS_Slots = {
+    /** Before the heading, e.g. an avatar of the record. */
+    leading?: () => unknown;
+    eyebrow?: () => unknown;
+    title?: () => unknown;
+    /** Replaces the description, keeping the unsaved-changes badge after it. */
+    description?: () => unknown;
+    /** Replaces the page actions. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/page/form-page-navigation.d.vue.ts

@@ -0,0 +1,34 @@
+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.
+ *
+ * From 768px of page width it is a pinned column; below, a row of chips that scrolls sideways.
+ */
+type __VLS_Slots = {
+    /** Replaces the heading, which comes from the schema `navigation.title`. */
+    title?: () => unknown;
+    /** Replaces an entry. Call `select` to scroll to the section. */
+    item?: (props: {
+        section: FormPageSectionState;
+        active: boolean;
+        select: () => void;
+    }) => unknown;
+    /** Replaces the summary under the entries. */
+    footer?: (props: {
+        sections: readonly FormPageSectionState[];
+        remaining: number;
+        modified: number;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/page/form-page-navigation.vue

@@ -0,0 +1,229 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, nextTick, useId, useTemplateRef, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFormPageContext } from "../../composables/use-form-page";
+import { useFormUi } from "../../composables/use-form-ui";
+import { mergeFormUiClass } from "../../utils/ui";
+defineSlots();
+const CHIP_ROW_INSET = 16;
+const page = useFormPageContext();
+const formUi = useFormUi();
+const { code, t } = useUiToolsLocale();
+const pageUi = computed(() => formUi.ui.value.page?.ui);
+const titleId = useId();
+const plurals = computed(() => new Intl.PluralRules(code.value));
+const summary = computed(() => {
+  if (page.dirtyCheck.value) {
+    const count2 = page.modified.value;
+    if (!count2) {
+      return { text: t("form.page.unmodified") };
+    }
+    return sentence(count2, isOne(count2) ? "form.page.modifiedOne" : "form.page.modifiedOther");
+  }
+  const count = page.remaining.value;
+  return count ? sentence(count, "form.page.remaining") : { text: t("form.page.complete") };
+});
+function isOne(count) {
+  return plurals.value.select(count) === "one";
+}
+function sentence(count, message) {
+  const [before = "", after = ""] = t(message).split("{count}");
+  const phrase = t(isOne(count) ? "form.page.sectionsOne" : "form.page.sectionsOther", { count });
+  return { after, before, phrase };
+}
+function dirtyShown(section) {
+  return page.dirtyCheck.value && section.dirty;
+}
+function statusLabel(section) {
+  const status = t(`form.page.status.${section.status}`);
+  return dirtyShown(section) ? `${status}, ${t("form.page.unsavedChanges")}` : status;
+}
+const list = useTemplateRef("list");
+watch(
+  () => page.active.value,
+  async (key) => {
+    await nextTick();
+    const row = list.value;
+    if (!row || !key || row.scrollWidth <= row.clientWidth) {
+      return;
+    }
+    const entry = [...row.children].find(
+      (child) => child.getAttribute("data-form-page-entry") === key
+    );
+    if (!entry) {
+      return;
+    }
+    const box = row.getBoundingClientRect();
+    const rect = entry.getBoundingClientRect();
+    const overflow = rect.left < box.left ? rect.left - box.left : Math.max(0, rect.right - box.right);
+    if (overflow) {
+      row.scrollBy?.({ behavior: "smooth", left: overflow + Math.sign(overflow) * CHIP_ROW_INSET });
+    }
+  }
+);
+function select(event, key) {
+  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  page.scrollTo(key, { focus: true });
+}
+</script>
+
+<template>
+  <nav
+    :aria-labelledby="page.navigationTitle.value || $slots.title ? titleId : void 0"
+    :aria-label="page.navigationTitle.value || $slots.title ? void 0 : t('form.page.navigation')"
+    :class="
+  mergeFormUiClass(
+    'flex min-w-0 flex-col gap-3.5 @3xl/form-page:sticky @3xl/form-page:top-[calc(var(--nut-form-page-header,0px)+var(--nut-form-page-gap,24px))]',
+    pageUi?.navigation
+  )
+"
+    data-form-page-navigation
+  >
+    <div :class="mergeFormUiClass('flex min-w-0 flex-col gap-2', pageUi?.navigationGroup)">
+      <p
+        v-if="page.navigationTitle.value || $slots.title"
+        :id="titleId"
+        :class="
+  mergeFormUiClass(
+    'hidden px-2.5 text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase @3xl/form-page:block',
+    pageUi?.navigationTitle
+  )
+"
+      >
+        <slot name="title">{{ page.navigationTitle.value }}</slot>
+      </p>
+      <ul
+        ref="list"
+        role="list"
+        :class="
+  mergeFormUiClass(
+    'm-0 flex list-none gap-1.5 overflow-x-auto p-0 [scrollbar-width:none] @3xl/form-page:flex-col @3xl/form-page:gap-0.5 @3xl/form-page:overflow-visible',
+    pageUi?.navigationList
+  )
+"
+      >
+        <li
+          v-for="section in page.sections.value"
+          :key="section.key"
+          :data-form-page-entry="section.key"
+          :class="mergeFormUiClass('shrink-0 @3xl/form-page:shrink', pageUi?.navigationEntry)"
+        >
+          <slot
+            name="item"
+            :section
+            :active="section.key === page.active.value"
+            :select="() => page.scrollTo(section.key, { focus: true })"
+          >
+            <a
+              :href="`#${section.key}`"
+              :aria-current="section.key === page.active.value ? 'location' : void 0"
+              :data-active="section.key === page.active.value || void 0"
+              :data-state="section.status"
+              :data-dirty="dirtyShown(section) || void 0"
+              :class="
+  mergeFormUiClass(
+    'group flex h-8 min-w-0 items-center gap-2 rounded-md border border-default bg-default px-2.5 text-[12.5px] font-medium text-muted no-underline transition-colors hover:text-highlighted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary data-[active]:border-primary data-[active]:bg-primary/10 data-[active]:text-highlighted @3xl/form-page:h-9 @3xl/form-page:gap-2.5 @3xl/form-page:rounded-[7px] @3xl/form-page:border-transparent @3xl/form-page:bg-transparent @3xl/form-page:text-[13.5px] @3xl/form-page:hover:bg-elevated @3xl/form-page:data-[active]:border-transparent @3xl/form-page:data-[active]:bg-default @3xl/form-page:data-[active]:font-semibold @3xl/form-page:data-[active]:shadow-[inset_2px_0_0_var(--ui-primary)]',
+    pageUi?.navigationItem
+  )
+"
+              @click="select($event, section.key)"
+            >
+              <span
+                :data-state="section.status"
+                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',
+    pageUi?.navigationIndicator
+  )
+"
+              >
+                <UIcon
+                  v-if="section.status === 'complete'"
+                  name="i-lucide-check"
+                  :class="mergeFormUiClass('size-2.5', pageUi?.navigationIndicatorIcon)"
+                />
+                <template v-else-if="section.status === 'invalid'">!</template>
+                <span
+                  v-else
+                  :class="
+  mergeFormUiClass(
+    'hidden size-1.5 rounded-full bg-primary group-data-[active]:block',
+    pageUi?.navigationIndicatorMarker
+  )
+"
+                />
+              </span>
+              <span
+                :class="
+  mergeFormUiClass(
+    'whitespace-nowrap @3xl/form-page:min-w-0 @3xl/form-page:flex-1 @3xl/form-page:truncate',
+    pageUi?.navigationLabel
+  )
+"
+              >
+                {{ section.label }}
+              </span>
+              <span class="sr-only">{{ statusLabel(section) }}</span>
+              <span
+                v-if="dirtyShown(section)"
+                aria-hidden="true"
+                :class="
+  mergeFormUiClass(
+    'size-1.5 shrink-0 rounded-full bg-primary',
+    pageUi?.navigationDirty
+  )
+"
+                data-form-page-dirty
+              />
+              <span
+                v-else-if="section.optional && section.status !== 'complete'"
+                :class="
+  mergeFormUiClass(
+    'hidden shrink-0 text-[11px] font-normal text-dimmed @3xl/form-page:inline',
+    pageUi?.navigationOptional
+  )
+"
+              >
+                {{ t("form.page.optional") }}
+              </span>
+            </a>
+          </slot>
+        </li>
+      </ul>
+    </div>
+    <div :class="mergeFormUiClass('hidden px-2.5 @3xl/form-page:block', pageUi?.navigationFooter)">
+      <div
+        :class="
+  mergeFormUiClass(
+    'border-t border-muted pt-3.5 text-[12.5px] leading-normal text-muted',
+    pageUi?.navigationSummary
+  )
+"
+        data-form-page-summary
+      >
+        <slot
+          name="footer"
+          :sections="page.sections.value"
+          :remaining="page.remaining.value"
+          :modified="page.modified.value"
+        >
+          <template v-if="'phrase' in summary">
+            {{ summary.before
+            }}<b
+              :class="
+  mergeFormUiClass('font-semibold text-highlighted', pageUi?.navigationSummaryCount)
+"
+              >{{ summary.phrase }}</b
+            >{{ summary.after }}
+          </template>
+          <template v-else>{{ summary.text }}</template>
+        </slot>
+      </div>
+    </div>
+  </nav>
+</template>

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

@@ -0,0 +1,34 @@
+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.
+ *
+ * From 768px of page width it is a pinned column; below, a row of chips that scrolls sideways.
+ */
+type __VLS_Slots = {
+    /** Replaces the heading, which comes from the schema `navigation.title`. */
+    title?: () => unknown;
+    /** Replaces an entry. Call `select` to scroll to the section. */
+    item?: (props: {
+        section: FormPageSectionState;
+        active: boolean;
+        select: () => void;
+    }) => unknown;
+    /** Replaces the summary under the entries. */
+    footer?: (props: {
+        sections: readonly FormPageSectionState[];
+        remaining: number;
+        modified: number;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/page/form-page-section.d.vue.ts

@@ -0,0 +1,19 @@
+import type { FormPageSectionEntry, FormPageSectionState } from '../../types/index.js';
+type __VLS_Props = {
+    entry: FormPageSectionEntry;
+    section: FormPageSectionState;
+};
+type __VLS_Slots = {
+    actions?: (props: {
+        section: FormPageSectionState;
+    }) => unknown;
+};
+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/page/form-page-section.vue

@@ -0,0 +1,114 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed, onBeforeUnmount, onMounted, useId, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFormGridLayout } from "../../composables/use-form-layout";
+import { useFormPageContext } from "../../composables/use-form-page";
+import { provideFormRuntime } from "../../composables/use-form-runtime";
+import { useFormUi } from "../../composables/use-form-ui";
+import { resolveFormLayoutConfig } from "../../utils/layout";
+import { mergeFormUiClass } from "../../utils/ui";
+import FormFieldRenderer from "../renderer/form-field-renderer.vue";
+const props = defineProps({
+  entry: { type: Object, required: true },
+  section: { type: Object, required: true }
+});
+defineSlots();
+const page = useFormPageContext();
+const formUi = useFormUi();
+const { t } = useUiToolsLocale();
+const { runtime } = page.root;
+const pageUi = computed(() => formUi.ui.value.page?.ui);
+const titleId = useId();
+const dirty = computed(() => page.dirtyCheck.value && props.section.dirty);
+const layout = computed(
+  () => resolveFormLayoutConfig(runtime.currentLayout.value, props.entry.section.layout)
+);
+provideFormRuntime({ ...runtime, currentLayout: layout });
+const grid = useFormGridLayout({ layout });
+const element = useTemplateRef("element");
+let unregister;
+onMounted(() => {
+  if (element.value) {
+    unregister = page.register(props.section.key, element.value);
+  }
+});
+onBeforeUnmount(() => unregister?.());
+</script>
+
+<template>
+  <section
+    :id="section.key"
+    ref="element"
+    :aria-labelledby="titleId"
+    :data-form-page-section="section.key"
+    :data-state="section.status"
+    :data-dirty="dirty || void 0"
+    :class="
+  mergeFormUiClass(
+    'flex min-w-0 scroll-mt-[calc(var(--nut-form-page-header,0px)+var(--nut-form-page-gap,24px))] 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',
+    pageUi?.section
+  )
+"
+  >
+    <header
+      :class="
+  mergeFormUiClass('flex flex-wrap items-center gap-x-3 gap-y-1', pageUi?.sectionHeader)
+"
+    >
+      <h2
+        :id="titleId"
+        tabindex="-1"
+        :class="
+  mergeFormUiClass(
+    'm-0 text-lg font-semibold tracking-[-0.015em] text-highlighted focus:outline-none',
+    pageUi?.sectionTitle
+  )
+"
+        data-form-page-section-title
+      >
+        {{ section.label }}
+      </h2>
+      <p
+        v-if="section.description"
+        :class="mergeFormUiClass('m-0 text-[13px] text-muted', pageUi?.sectionDescription)"
+      >
+        {{ section.description }}
+      </p>
+      <UBadge
+        v-if="section.optional"
+        color="neutral"
+        variant="soft"
+        :label="t('form.page.optional')"
+        :class="mergeFormUiClass('capitalize', pageUi?.sectionOptional)"
+      />
+      <div
+        v-if="dirty || $slots.actions"
+        :class="mergeFormUiClass('ms-auto flex items-center gap-2', pageUi?.sectionActions)"
+      >
+        <slot name="actions" :section />
+        <UButton
+          v-if="dirty"
+          type="button"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          icon="i-lucide-rotate-ccw"
+          :label="t('form.page.resetSection')"
+          :class="pageUi?.sectionReset"
+          data-form-page-reset
+          @click="page.resetSection(section.key)"
+        />
+      </div>
+    </header>
+    <div :class="mergeFormUiClass('min-w-0', pageUi?.sectionBody)" :style="grid.style.value">
+      <FormFieldRenderer
+        v-for="field in entry.section.fields"
+        :key="field.key"
+        :field="field"
+        :parent-path="[]"
+      />
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,19 @@
+import type { FormPageSectionEntry, FormPageSectionState } from '../../types/index.js';
+type __VLS_Props = {
+    entry: FormPageSectionEntry;
+    section: FormPageSectionState;
+};
+type __VLS_Slots = {
+    actions?: (props: {
+        section: FormPageSectionState;
+    }) => unknown;
+};
+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/page/form-page-sections.d.vue.ts

@@ -0,0 +1,21 @@
+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.
+ */
+type __VLS_Slots = {
+    /** Extra buttons in a section header, before its reset button. */
+    actions?: (props: {
+        section: FormPageSectionState;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+    };
+};