feat(components): field group

Signed-off-by: ZTL-UwU <[email protected]>

components/content/Badge.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink :to="to" :target="target" class="mx-0.5">
     <UiBadge :variant="variant" :class="typeTwClass[type]">
-      <ContentSlot :use="$slots.default" unwrap="p" />
+      <ContentSlot unwrap="p" />
     </UiBadge>
   </NuxtLink>
 </template>

components/content/Card.vue

@@ -15,7 +15,7 @@
         </UiCardHeader>
         <UiCardContent v-if="content || $slots.content || $slots.default">
           <ContentSlot :use="$slots.content" unwrap="p" />
-          <ContentSlot :use="$slots.default" unwrap="p" />
+          <ContentSlot unwrap="p" />
         </UiCardContent>
         <UiCardFooter v-if="footer || $slots.footer">
           <ContentSlot :use="$slots.footer" unwrap="p" />

components/content/Field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="[&:not(:first-child)]:mt-4">
+  <div class="[&:not(:first-child)]:mt-4 [&:not(:first-child)]:pt-4">
     <div class="flex mb-2 space-x-2">
       <span class="font-bold text-md text-primary">
         {{ name }}
@@ -12,7 +12,7 @@
         {{ type }}
       </span>
     </div>
-    <span class="text-sm">
+    <span class="text-sm text-muted-foreground">
       <ContentSlot unwrap="p" />
       {{ description }}
     </span>

components/content/FieldGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="divide-y [&:not(:first-child)]:mt-6">
+    <slot />
+  </div>
+</template>

content/1.getting-started/3.writing/2.components.md

@@ -527,6 +527,52 @@ npm i -D @iconify-json/collection-name
   ```
 ::
 
+### Field Group
+
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field-group" target="_blank"}
+
+::code-group
+  ::preview{filename="Preview"}
+    ::field-group
+      ::field{name="validate (path?: string, opts: { silent?: boolean })" type="Promise<T>"}
+      Triggers form validation. Will raise any errors unless `opts.silent` is set to true.
+      ::
+      ::field{name="clear (path?: string)" type="void"}
+      Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+      ::
+      ::field{name="getErrors (path?: string)" type="FormError[]"}
+      Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+      ::
+      ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
+      Sets form errors for a given path. If no path is provided, overrides all errors.
+      ::
+      ::field{name="errors" type="Ref<FormError[]>"}
+      A reference to the array containing validation errors. Use this to access or manipulate the error information.
+      ::
+    ::
+  ::
+
+  ```md [Code]
+  ::field-group
+    ::field{name="validate (path?: string, opts: { silent?: boolean })" type="Promise<T>"}
+    Triggers form validation. Will raise any errors unless `opts.silent` is set to true.
+    ::
+    ::field{name="clear (path?: string)" type="void"}
+    Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+    ::
+    ::field{name="getErrors (path?: string)" type="FormError[]"}
+    Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+    ::
+    ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
+    Sets form errors for a given path. If no path is provided, overrides all errors.
+    ::
+    ::field{name="errors" type="Ref<FormError[]>"}
+    A reference to the array containing validation errors. Use this to access or manipulate the error information.
+    ::
+  ::
+  ```
+::
+
 ## Landing Page Components
 
 ### Hero