nuxt-ui-tools 1.16.8 → 1.16.9

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.16.8",
+  "version": "1.16.9",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -86,6 +86,7 @@ const controlAttrs = computed(() => {
 provideFormFieldBare(bare);
 provideFormFieldControlAttrs(controlAttrs);
 const field = computed(() => createFormFieldInstance(props.field));
+const headless = computed(() => !field.value.capability.has("layout"));
 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));
@@ -200,7 +201,7 @@ function resolveControlLabel(controlField) {
 </script>
 
 <template>
-  <template v-if="visible && bare">
+  <template v-if="visible && (bare || headless)">
     <component :is="renderer" v-if="renderer" v-bind="rendererProps" />
     <UAlert
       v-else

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

@@ -9,6 +9,7 @@ import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useFormActions } from "../../composables/use-form-actions";
 import { useFormGridLayout } from "../../composables/use-form-layout";
 import { useFormRoot } from "../../composables/use-form-root";
+import { createFormFieldInstance } from "../../utils/field-instance";
 import { getFormHeader } from "../../utils/overlay";
 import { isRecord } from "../../utils/path";
 import { isFunction, isNumber, isString } from "../../utils/predicate";
@@ -69,6 +70,11 @@ watch(
 const displayedStep = computed(
   () => isSteppedSchema(schemaRef.value) ? getSchemaSteps(schemaRef.value)[displayedStepIndex.value] : void 0
 );
+const skeletonFields = computed(
+  () => runtime.currentFields.value.filter(
+    (field) => createFormFieldInstance(field).capability.has("layout")
+  )
+);
 const displayedFields = computed(
   () => isSteppedSchema(schemaRef.value) ? displayedStep.value?.fields ?? [] : getSchemaFields(schemaRef.value)
 );
@@ -295,7 +301,7 @@ function getSchemaShowStepper(schema) {
         :style="grid.style.value"
       >
         <div
-          v-for="field in runtime.currentFields.value"
+          v-for="field in skeletonFields"
           :key="field.key"
           :class="mergeFormUiClass('grid gap-2', formUi.ui.value.root?.ui?.skeletonField)"
         >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.16.8",
+  "version": "1.16.9",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",