feat(components): field

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

components/content/CodeGroup.vue

@@ -35,7 +35,7 @@ function render() {
 
   return h(
     UiCard,
-    [
+    () => [
       h(
         CodeGroupHeader,
         {

components/content/Field.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="[&:not(:first-child)]:mt-4">
+    <div class="flex mb-2 space-x-2">
+      <span class="font-bold text-md text-primary">
+        {{ name }}
+      </span>
+      <span v-if="required" class="self-center font-mono text-sm text-muted-foreground">
+        required
+      </span>
+      <span class="flex-1" />
+      <span class="self-center font-mono text-sm text-muted-foreground">
+        {{ type }}
+      </span>
+    </div>
+    <span class="text-sm">
+      <ContentSlot unwrap="p" />
+      {{ description }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  name: string;
+  type?: string;
+  required?: boolean;
+  description?: string;
+}>();
+</script>

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

@@ -510,6 +510,23 @@ npm i -D @iconify-json/collection-name
   ```
 ::
 
+### Field
+
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field" target="_blank"}
+
+::code-group
+  ::preview{filename="Preview"}
+    ::field{name="Field" type="string" required}
+    The `description` can be set as prop or in the default slot with full **markdown** support.
+    ::
+  ::
+  ```md [Code]
+  ::field{name="Field" type="string" required}
+  The `description` can be set as prop or in the default slot with full **markdown** support.
+  ::
+  ```
+::
+
 ## Landing Page Components
 
 ### Hero