feat(Empty): new component

docs/app/components/content/examples/empty/EmptySlotsExample.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { UserProps } from '@nuxt/ui'
+
+const members: UserProps[] = [
+  {
+    name: 'Daniel Roe',
+    description: 'danielroe',
+    to: 'https://github.com/danielroe',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/danielroe.png',
+      alt: 'danielroe'
+    }
+  },
+  {
+    name: 'Pooya Parsa',
+    description: 'pi0',
+    to: 'https://github.com/pi0',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/pi0.png',
+      alt: 'pi0'
+    }
+  },
+  {
+    name: 'Sébastien Chopin',
+    description: 'atinux',
+    to: 'https://github.com/atinux',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/atinux.png',
+      alt: 'atinux'
+    }
+  },
+  {
+    name: 'Benjamin Canac',
+    description: 'benjamincanac',
+    to: 'https://github.com/benjamincanac',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/benjamincanac.png',
+      alt: 'benjamincanac'
+    }
+  }
+]
+</script>
+
+<template>
+  <UEmpty
+    title="No team members"
+    description="Invite your team to collaborate on this project."
+    variant="naked"
+    :actions="[{
+      label: 'Invite members',
+      icon: 'i-lucide-user-plus',
+      color: 'neutral'
+    }]"
+  >
+    <template #leading>
+      <UAvatarGroup size="xl">
+        <UAvatar src="https://github.com/nuxt.png" alt="Nuxt" />
+        <UAvatar src="https://github.com/unjs.png" alt="Unjs" />
+      </UAvatarGroup>
+    </template>
+
+    <template #footer>
+      <USeparator class="my-4" />
+
+      <div class="grid grid-cols-2 gap-4">
+        <UPageCard
+          v-for="(member, index) in members"
+          :key="index"
+          :to="member.to"
+          :ui="{ container: 'sm:p-4' }"
+        >
+          <UUser
+            :avatar="member.avatar"
+            :name="member.name"
+            :description="member.description"
+            :ui="{ name: 'truncate' }"
+          />
+        </UPageCard>
+      </div>
+    </template>
+  </UEmpty>
+</template>

docs/content/docs/2.components/empty.md

@@ -0,0 +1,199 @@
+---
+title: Empty
+description: 'A component to display an empty state.'
+category: data
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Empty.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+::code-preview
+
+:::u-empty
+---
+icon: i-lucide-file
+title: No projects found
+description: It looks like you haven't added any projects. Create one to get started.
+actions:
+  - icon: i-lucide-plus
+    label: Create new
+  - icon: i-lucide-refresh-cw
+    label: Refresh
+    color: neutral
+    variant: subtle
+---
+:::
+
+::
+
+### Title
+
+Use the `title` prop to set the title of the empty state.
+
+::component-code
+---
+props:
+  title: No projects found
+---
+::
+
+### Description
+
+Use the `description` prop to set the description of the empty state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+props:
+  title: No projects found
+  description: It looks like you haven't added any projects. Create one to get started.
+---
+::
+
+### Icon
+
+Use the `icon` prop to set the icon of the empty state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - description
+props:
+  icon: i-lucide-file
+  title: No projects found
+  description: It looks like you haven't added any projects. Create one to get started.
+---
+::
+
+### Avatar
+
+Use the `avatar` prop to set the avatar of the empty state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - icon
+  - title
+  - description
+props:
+  avatar.src: 'https://github.com/nuxt.png'
+  title: No projects found
+  description: It looks like you haven't added any projects. Create one to get started.
+---
+::
+
+### Actions
+
+Use the `actions` prop to add some [Button](/docs/components/button) actions to the empty state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - icon
+  - title
+  - description
+  - actions
+props:
+  icon: i-lucide-file
+  title: No projects found
+  description: It looks like you haven't added any projects. Create one to get started.
+  actions:
+    - icon: i-lucide-plus
+      label: Create new
+    - icon: i-lucide-refresh-cw
+      label: Refresh
+      color: neutral
+      variant: subtle
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the empty state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - icon
+  - title
+  - description
+  - actions
+props:
+  variant: naked
+  icon: i-lucide-bell
+  title: No notifications
+  description: You're all caught up. New notifications will appear here.
+  actions:
+    - icon: i-lucide-refresh-cw
+      label: Refresh
+      color: neutral
+      variant: subtle
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the empty state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - icon
+  - title
+  - description
+  - actions
+props:
+  size: xl
+  icon: i-lucide-bell
+  title: No notifications
+  description: You're all caught up. New notifications will appear here.
+  actions:
+    - icon: i-lucide-refresh-cw
+      label: Refresh
+      color: neutral
+      variant: subtle
+---
+::
+
+## Examples
+
+### With slots
+
+Use the available slots to create a more complex empty state.
+
+::component-example
+---
+collapse: true
+name: 'empty-slots-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog

docs/content/docs/2.components/form.md

@@ -159,7 +159,7 @@ props:
 
 Use the `nested` prop to nest multiple Form components and link their validation functions. In this case, validating the parent form will automatically validate all the other forms inside it.
 
-Nested forms directly inherit their parent's state, so you don’t need to define a separate state for them. You can use the `name` prop to target a nested attribute within the parent's state.
+Nested forms directly inherit their parent's state, so you don't need to define a separate state for them. You can use the `name` prop to target a nested attribute within the parent's state.
 
 It can be used to dynamically add fields based on user's input:
 

playgrounds/nuxt/app/composables/useNavigation.ts

@@ -27,6 +27,7 @@ const components = [
   'context-menu',
   'drawer',
   'dropdown-menu',
+  'empty',
   'error',
   'field-group',
   'file-upload',

playgrounds/nuxt/app/pages/components/empty.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import theme from '#build/ui/empty'
+
+const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size)
+
+const attrs = reactive({
+  variant: [theme.defaultVariants.variant],
+  size: [theme.defaultVariants.size]
+})
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="attrs.variant" :items="variants" multiple placeholder="Variant" />
+    <USelect v-model="attrs.size" :items="sizes" multiple placeholder="Size" />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <UEmpty
+      title="No projects found"
+      description="It looks like you haven't added any projects. Create one to get started."
+      :actions="[{
+        icon: 'i-lucide-plus',
+        label: 'Create new'
+      }, {
+        icon: 'i-lucide-refresh-ccw',
+        label: 'Refresh',
+        color: 'neutral',
+        variant: 'subtle'
+      }]"
+      v-bind="props"
+    />
+  </Matrix>
+</template>