nuxt-ui-tools 0.1.0

package/dist/runtime/form/components/layout/FullscreenLayout.vue

@@ -0,0 +1,36 @@
+<script setup>
+import UModal from "@nuxt/ui/components/Modal.vue";
+import { mergeFormUiClass } from "../../utils/ui";
+defineProps({
+  config: { type: Object, required: false },
+  open: { type: Boolean, required: true },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  dismissible: { type: Boolean, required: true },
+  ui: { type: Object, required: false }
+});
+defineEmits(["update:open", "after-close"]);
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    :title="title"
+    :description="description"
+    fullscreen
+    :dismissible="dismissible && config?.allowOutsideClick !== false"
+    :ui="{
+  overlay: ui?.overlay,
+  content: mergeFormUiClass(
+    'h-dvh overflow-hidden p-0 sm:max-w-none sm:rounded-none',
+    ui?.content
+  )
+}"
+    @update:open="$emit('update:open', $event)"
+    @after:leave="$emit('after-close')"
+  >
+    <template #content>
+      <slot />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/form/components/layout/FullscreenLayout.vue.d.ts

@@ -0,0 +1,20 @@
+import type { FormFullscreenLayoutProps } from '../../types/index.js';
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormFullscreenLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "after-close": () => any;
+}, string, import("vue").PublicProps, Readonly<FormFullscreenLayoutProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/layout/ModalLayout.d.vue.ts

@@ -0,0 +1,20 @@
+import type { FormModalLayoutProps } from '../../types/index.js';
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormModalLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "after-close": () => any;
+}, string, import("vue").PublicProps, Readonly<FormModalLayoutProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/layout/ModalLayout.vue

@@ -0,0 +1,44 @@
+<script setup>
+import UModal from "@nuxt/ui/components/Modal.vue";
+import { computed } from "vue";
+import { mergeFormUiClass } from "../../utils/ui";
+const props = defineProps({
+  config: { type: Object, required: false },
+  open: { type: Boolean, required: true },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  dismissible: { type: Boolean, required: true },
+  ui: { type: Object, required: false }
+});
+defineEmits(["update:open", "after-close"]);
+const contentStyle = computed(() => ({
+  maxWidth: cssSize(props.config?.maxWidth),
+  maxHeight: cssSize(props.config?.maxHeight)
+}));
+function cssSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    :title="title"
+    :description="description"
+    :dismissible="dismissible && config?.allowOutsideClick !== false"
+    :style="contentStyle"
+    :ui="{
+  overlay: ui?.overlay,
+  content: mergeFormUiClass(
+    'flex max-h-[85dvh] min-h-0 overflow-hidden border border-default p-0 sm:max-w-4xl',
+    ui?.content
+  )
+}"
+    @update:open="$emit('update:open', $event)"
+    @after:leave="$emit('after-close')"
+  >
+    <template #content>
+      <slot />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/form/components/layout/ModalLayout.vue.d.ts

@@ -0,0 +1,20 @@
+import type { FormModalLayoutProps } from '../../types/index.js';
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormModalLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "after-close": () => any;
+}, string, import("vue").PublicProps, Readonly<FormModalLayoutProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/provider/FormOverlayHost.d.vue.ts

@@ -0,0 +1,7 @@
+import type { FormApiRuntimeInstance } from '../../types/index.js';
+type __VLS_Props = {
+    instance: FormApiRuntimeInstance;
+};
+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/provider/FormOverlayHost.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { useAppConfig } from "nuxt/app";
+import { computed } from "vue";
+import { useFormOverlayController } from "../../composables/use-form-overlay-controller";
+import { useFormOverlayLayout } from "../../composables/use-form-overlay-layout";
+import {
+  getFormDrawerConfig,
+  getFormFullscreenConfig,
+  getFormModalConfig
+} from "../../utils/overlay";
+import { isRecord } from "../../utils/path";
+import { mergeFormUi, resolveAppFormUi } from "../../utils/ui";
+import DrawerLayout from "../layout/DrawerLayout.vue";
+import FullscreenLayout from "../layout/FullscreenLayout.vue";
+import ModalLayout from "../layout/ModalLayout.vue";
+import FormRoot from "../root/Form.vue";
+const props = defineProps({
+  instance: { type: Object, required: true }
+});
+const appConfig = useAppConfig();
+const formUi = computed(
+  () => mergeFormUi(resolveAppFormUi(appConfig), resolveSchemaUi(props.instance.schema))
+);
+const overlay = useFormOverlayController(props.instance);
+const layout = useFormOverlayLayout(props.instance);
+const drawerConfig = getFormDrawerConfig(props.instance.schema);
+const fullscreenConfig = getFormFullscreenConfig(props.instance.schema);
+const modalConfig = getFormModalConfig(props.instance.schema);
+function resolveSchemaUi(schema) {
+  if (!isRecord(schema)) return void 0;
+  const value = Object.getOwnPropertyDescriptor(schema, "ui")?.value;
+  return isRecord(value) ? value : void 0;
+}
+</script>
+
+<template>
+  <DrawerLayout
+    v-if="layout.isDrawer.value"
+    :open="overlay.open.value"
+    :title="overlay.title.value"
+    :description="overlay.description.value"
+    :dismissible="overlay.dismissible.value"
+    :config="drawerConfig"
+    :ui="formUi.drawer?.ui"
+    @update:open="overlay.handleOpenUpdate"
+    @after-close="overlay.resolveAfterClose"
+  >
+    <FormRoot
+      :form="overlay.form"
+      shell="drawer"
+      :show-close-button="drawerConfig?.showCloseButton !== false"
+      :ui="formUi"
+      @submit="overlay.handleSubmitted"
+      @cancel="overlay.handleCancelled"
+    />
+  </DrawerLayout>
+
+  <FullscreenLayout
+    v-else-if="layout.isFullscreen.value"
+    :open="overlay.open.value"
+    :title="overlay.title.value"
+    :description="overlay.description.value"
+    :dismissible="overlay.dismissible.value"
+    :config="fullscreenConfig"
+    :ui="formUi.fullscreen?.ui"
+    @update:open="overlay.handleOpenUpdate"
+    @after-close="overlay.resolveAfterClose"
+  >
+    <FormRoot
+      :form="overlay.form"
+      shell="fullscreen"
+      :show-close-button="fullscreenConfig?.showCloseButton !== false"
+      :ui="formUi"
+      @submit="overlay.handleSubmitted"
+      @cancel="overlay.handleCancelled"
+    />
+  </FullscreenLayout>
+
+  <ModalLayout
+    v-else
+    :open="overlay.open.value"
+    :title="overlay.title.value"
+    :description="overlay.description.value"
+    :dismissible="overlay.dismissible.value"
+    :config="modalConfig"
+    :ui="formUi.modal?.ui"
+    @update:open="overlay.handleOpenUpdate"
+    @after-close="overlay.resolveAfterClose"
+  >
+    <FormRoot
+      :form="overlay.form"
+      shell="modal"
+      :show-close-button="modalConfig?.showCloseButton !== false"
+      :ui="formUi"
+      @submit="overlay.handleSubmitted"
+      @cancel="overlay.handleCancelled"
+    />
+  </ModalLayout>
+</template>

package/dist/runtime/form/components/provider/FormOverlayHost.vue.d.ts

@@ -0,0 +1,7 @@
+import type { FormApiRuntimeInstance } from '../../types/index.js';
+type __VLS_Props = {
+    instance: FormApiRuntimeInstance;
+};
+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/provider/FormProvider.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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/provider/FormProvider.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { provideFormApi } from "../../composables/use-form-api";
+import FormOverlayHost from "./FormOverlayHost.vue";
+const formApi = provideFormApi();
+const formInstances = formApi.formInstances;
+</script>
+
+<template>
+  <slot />
+
+  <FormOverlayHost v-for="instance in formInstances" :key="instance.id" :instance="instance" />
+</template>

package/dist/runtime/form/components/provider/FormProvider.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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/renderer/FormFieldRenderer.d.vue.ts

@@ -0,0 +1,9 @@
+import type { FormField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormField;
+    parentPath: readonly string[];
+    bare?: boolean;
+};
+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/renderer/FormFieldRenderer.vue

@@ -0,0 +1,166 @@
+<script setup>
+import UAlert from "@nuxt/ui/components/Alert.vue";
+import { computed, ref, watchEffect } from "vue";
+import { provideFormFieldBare } from "../../composables/use-form-field-chrome";
+import { useFormItemLayout } from "../../composables/use-form-layout";
+import {
+  childParentPath,
+  fieldPath,
+  useFormRuntimeContext
+} from "../../composables/use-form-runtime";
+import ArrayListField from "../../fields/array-list/component.vue";
+import ArrayTableField from "../../fields/array-table/component.vue";
+import AutoCompleteField from "../../fields/auto-complete/component.vue";
+import ButtonField from "../../fields/button/component.vue";
+import CardField from "../../fields/card/component.vue";
+import CheckboxCardField from "../../fields/checkbox-card/component.vue";
+import CheckboxGroupField from "../../fields/checkbox-group/component.vue";
+import CheckboxField from "../../fields/checkbox/component.vue";
+import ColorPickerField from "../../fields/color-picker/component.vue";
+import ColumnField from "../../fields/column/component.vue";
+import CustomComponentField from "../../fields/custom-component/component.vue";
+import DateFamilyField from "../../fields/date-family/component.vue";
+import DateField from "../../fields/date/component.vue";
+import DividerField from "../../fields/divider/component.vue";
+import FileField from "../../fields/file/component.vue";
+import GroupField from "../../fields/group/component.vue";
+import HiddenField from "../../fields/hidden/component.vue";
+import HierarchyField from "../../fields/hierarchy/component.vue";
+import InfoField from "../../fields/info/component.vue";
+import InputGroupField from "../../fields/input-group/component.vue";
+import MatrixField from "../../fields/matrix/component.vue";
+import NumberField from "../../fields/number/component.vue";
+import ObjectField from "../../fields/object/component.vue";
+import OneTimeCodeField from "../../fields/one-time-code/component.vue";
+import PasswordField from "../../fields/password/component.vue";
+import PhoneNumberField from "../../fields/phone-number/component.vue";
+import RadioCardField from "../../fields/radio-card/component.vue";
+import RadioField from "../../fields/radio/component.vue";
+import RatingField from "../../fields/rating/component.vue";
+import SelectField from "../../fields/select/component.vue";
+import SliderField from "../../fields/slider/component.vue";
+import SwitchGroupField from "../../fields/switch-group/component.vue";
+import SwitchField from "../../fields/switch/component.vue";
+import TagField from "../../fields/tag/component.vue";
+import TextField from "../../fields/text/component.vue";
+import TextareaField from "../../fields/textarea/component.vue";
+import TimeField from "../../fields/time/component.vue";
+import UploadField from "../../fields/upload/component.vue";
+import { createFormFieldInstance } from "../../utils/field-instance";
+import { focusFormFieldElement } from "../../utils/focus";
+const props = defineProps({
+  field: { type: null, required: true },
+  parentPath: { type: Array, required: true },
+  bare: { type: Boolean, required: false }
+});
+const form = useFormRuntimeContext();
+const element = ref(null);
+const bare = computed(() => props.bare === true);
+provideFormFieldBare(bare);
+const field = computed(() => createFormFieldInstance(props.field));
+const path = computed(() => fieldPath(props.parentPath, props.field));
+const childPath = computed(() => childParentPath(props.parentPath, props.field));
+const visible = computed(() => form.shouldRender(props.field, path.value));
+const renderer = computed(() => fieldRenderers.get(field.value.type.value) ?? null);
+const rendererProps = computed(() => {
+  const baseProps = {
+    field: props.field,
+    path: path.value
+  };
+  if (!field.value.type.isAny(["input-group", "group", "object", "card", "column"]))
+    return baseProps;
+  return {
+    ...baseProps,
+    parentPath: childPath.value
+  };
+});
+const itemLayout = useFormItemLayout({
+  layout: resolveFieldLayout,
+  formLayout: form.currentLayout
+});
+watchEffect((onCleanup) => {
+  if (!element.value) return;
+  onCleanup(form.registerFieldElement(path.value, element.value));
+});
+watchEffect(async () => {
+  const request = form.focusRequest.value;
+  if (!request || request.path !== path.value.join(".") || !element.value) return;
+  await focusFormFieldElement(element.value);
+});
+const fieldRenderers = /* @__PURE__ */ new Map([
+  ["text", TextField],
+  ["password", PasswordField],
+  ["textarea", TextareaField],
+  ["number", NumberField],
+  ["auto-complete", AutoCompleteField],
+  ["checkbox", CheckboxField],
+  ["switch", SwitchField],
+  ["switch-group", SwitchGroupField],
+  ["select", SelectField],
+  ["checkbox-group", CheckboxGroupField],
+  ["checkbox-card", CheckboxCardField],
+  ["radio", RadioField],
+  ["radio-card", RadioCardField],
+  ["date", DateField],
+  ["datetime", DateFamilyField],
+  ["daterange", DateFamilyField],
+  ["monthrange", DateFamilyField],
+  ["datetimerange", DateFamilyField],
+  ["month", DateFamilyField],
+  ["year", DateFamilyField],
+  ["time", TimeField],
+  ["tree-select", HierarchyField],
+  ["cascader", HierarchyField],
+  ["tree", HierarchyField],
+  ["phone-number", PhoneNumberField],
+  ["hidden", HiddenField],
+  ["info", InfoField],
+  ["divider", DividerField],
+  ["input-group", InputGroupField],
+  ["group", GroupField],
+  ["object", ObjectField],
+  ["matrix", MatrixField],
+  ["custom-component", CustomComponentField],
+  ["file", FileField],
+  ["upload", UploadField],
+  ["array-list", ArrayListField],
+  ["array-table", ArrayTableField],
+  ["array-tabs", ArrayListField],
+  ["array-variant", ArrayListField],
+  ["slider", SliderField],
+  ["color-picker", ColorPickerField],
+  ["one-time-code", OneTimeCodeField],
+  ["rating", RatingField],
+  ["tag", TagField],
+  ["button", ButtonField],
+  ["card", CardField],
+  ["column", ColumnField]
+]);
+function resolveFieldLayout() {
+  if (!field.value.capability.has("itemLayout")) return void 0;
+  const layout = Object.getOwnPropertyDescriptor(props.field, "layout")?.value;
+  return isLayout(layout) ? layout : void 0;
+}
+function isLayout(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    ref="element"
+    :data-form-field="path.join('.')"
+    :style="bare ? { display: 'contents' } : itemLayout.style.value"
+  >
+    <component :is="renderer" v-if="renderer" v-bind="rendererProps" />
+    <UAlert
+      v-else
+      color="neutral"
+      variant="soft"
+      icon="i-lucide-construction"
+      title="Unsupported field"
+      :description="`The ${field.type.value} field renderer is not implemented in this slice.`"
+    />
+  </div>
+</template>

package/dist/runtime/form/components/renderer/FormFieldRenderer.vue.d.ts

@@ -0,0 +1,9 @@
+import type { FormField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormField;
+    parentPath: readonly string[];
+    bare?: boolean;
+};
+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/renderer/FormFieldShell.d.vue.ts

@@ -0,0 +1,38 @@
+import type { FormField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormField;
+    path: readonly string[];
+    inlineLabel?: boolean;
+};
+declare var __VLS_1: {
+    label: string | undefined;
+    description: string | undefined;
+    hint: string | undefined;
+    required: boolean;
+}, __VLS_23: {
+    label: string | undefined;
+    description: string | undefined;
+    hint: string | undefined;
+    required: boolean;
+}, __VLS_32: {
+    label: string | undefined;
+    description: string | undefined;
+    hint: string | undefined;
+    required: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_23) => any;
+} & {
+    default?: (props: typeof __VLS_32) => 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/renderer/FormFieldShell.vue

@@ -0,0 +1,135 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UCollapsible from "@nuxt/ui/components/Collapsible.vue";
+import UFormField from "@nuxt/ui/components/FormField.vue";
+import { computed, ref } from "vue";
+import { useFormFieldBare } from "../../composables/use-form-field-chrome";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { useFormUi } from "../../composables/use-form-ui";
+import { createFormFieldInstance } from "../../utils/field-instance";
+import { isRecord } from "../../utils/path";
+import { resolveFormText } from "../../utils/text";
+import { mergeFormUiClass } from "../../utils/ui";
+const props = defineProps({
+  field: { type: null, required: true },
+  path: { type: Array, required: true },
+  inlineLabel: { type: Boolean, required: false }
+});
+const form = useFormRuntimeContext();
+const formUi = useFormUi();
+const bare = useFormFieldBare();
+const field = computed(() => createFormFieldInstance(props.field));
+const label = computed(
+  () => field.value.capability.has("label") && "label" in props.field ? resolveFormText(props.field.label) : void 0
+);
+const description = computed(
+  () => field.value.capability.has("description") && "description" in props.field ? resolveFormText(props.field.description) : void 0
+);
+const hint = computed(
+  () => field.value.capability.has("hint") && "hint" in props.field ? resolveFormText(props.field.hint) : void 0
+);
+const shellLabel = computed(() => props.inlineLabel ? void 0 : label.value);
+const shellDescription = computed(() => props.inlineLabel ? void 0 : description.value);
+const shellHint = computed(() => props.inlineLabel ? void 0 : hint.value);
+const error = computed(() => form.getFieldError(props.path));
+const required = computed(() => {
+  if (!field.value.capability.has("validation")) return false;
+  const validation = Object.getOwnPropertyDescriptor(props.field, "validation")?.value;
+  if (typeof validation !== "object" || validation === null || Array.isArray(validation))
+    return false;
+  const value = Object.getOwnPropertyDescriptor(validation, "required")?.value;
+  if (typeof value === "function")
+    return value(form.getFieldCallbackParams(props.path, props.field)) === true;
+  return typeof value === "boolean" ? value : false;
+});
+const dirty = computed(
+  () => "dirtyCheck" in props.field && (props.field.dirtyCheck === true || schemaDirtyCheck()) && form.dirtyPaths.value.includes(props.path.join("."))
+);
+function schemaDirtyCheck() {
+  const schema = form.schema.value;
+  if (!isRecord(schema) || !isRecord(schema.controls)) return false;
+  return schema.controls.dirtyCheck === true;
+}
+const open = ref(!("collapsed" in props.field && props.field.collapsed === true));
+const collapsible = computed(() => "collapsible" in props.field && props.field.collapsible === true);
+const fieldUi = computed(() => formUi.ui.value.field?.ui);
+const nuxtFieldUi = computed(() => ({
+  root: fieldUi.value?.root,
+  wrapper: fieldUi.value?.wrapper,
+  labelWrapper: fieldUi.value?.labelWrapper,
+  label: fieldUi.value?.label,
+  container: fieldUi.value?.container,
+  description: fieldUi.value?.description,
+  error: fieldUi.value?.error,
+  hint: fieldUi.value?.hint,
+  help: fieldUi.value?.help
+}));
+function resetField() {
+  form.getFieldApi(props.path, props.field).value.reset();
+}
+</script>
+
+<template>
+  <template v-if="bare">
+    <slot :label="label" :description="description" :hint="hint" :required="required" />
+  </template>
+  <UFormField
+    v-else
+    :name="path.join('.')"
+    :label="shellLabel"
+    :description="shellDescription"
+    :hint="shellHint"
+    :error="error"
+    :required="required"
+    :size="formUi.controlSize.value"
+    :ui="nuxtFieldUi"
+  >
+    <UCollapsible
+      v-if="collapsible"
+      v-model:open="open"
+      :class="mergeFormUiClass('grid gap-2', fieldUi?.collapsible)"
+    >
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+        :class="mergeFormUiClass('justify-self-start', fieldUi?.collapseTrigger)"
+      >
+        {{ open ? "Collapse" : "Expand" }}
+      </UButton>
+      <template #content>
+        <div :class="mergeFormUiClass('flex items-start gap-2', fieldUi?.body)">
+          <div :class="mergeFormUiClass('min-w-0 flex-1', fieldUi?.content)">
+            <slot :label="label" :description="description" :hint="hint" :required="required" />
+          </div>
+          <UButton
+            v-if="dirty"
+            icon="i-lucide-rotate-ccw"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            aria-label="Reset field"
+            :class="fieldUi?.reset"
+            @click="resetField"
+          />
+        </div>
+      </template>
+    </UCollapsible>
+    <div v-else :class="mergeFormUiClass('flex items-start gap-2', fieldUi?.body)">
+      <div :class="mergeFormUiClass('min-w-0 flex-1', fieldUi?.content)">
+        <slot :label="label" :description="description" :hint="hint" :required="required" />
+      </div>
+      <UButton
+        v-if="dirty"
+        icon="i-lucide-rotate-ccw"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        aria-label="Reset field"
+        :class="fieldUi?.reset"
+        @click="resetField"
+      />
+    </div>
+  </UFormField>
+</template>