feat(VEmptyState): add new component

closes #4610

packages/docs/src/data/nav.json

@@ -226,6 +226,10 @@
       {
         "title": "sparklines",
         "subfolder": "components"
+      },
+      {
+        "title": "empty-states",
+        "subfolder": "components"
       }
     ]
   },

packages/docs/src/examples/v-empty-state/usage.vue

@@ -0,0 +1,35 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <v-empty-state
+      v-bind="props"
+    ></v-empty-state>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-empty-state'
+  const model = ref('default')
+  const options = []
+
+  const props = computed(() => {
+    return {
+      title: 'Whoops, 404',
+      subtitle: 'Page not found',
+      text: 'The page you were looking for does not exist',
+      avatar: 'https://vuetifyjs.b-cdn.net/docs/images/logos/v.png'
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>

packages/docs/src/pages/en/components/empty-states.md

@@ -0,0 +1,36 @@
+---
+emphasized: true
+meta:
+  title: Empty states
+  description: The empty state component is used to indicate that a list is empty or that no search results were found.
+  keywords: empty state, no results, no data, no items, no content, no records, no information, no search results
+related:
+  - /components/buttons/
+  - /components/icons/
+  - /components/avatars/
+features:
+  report: true
+  spec: https://m2.material.io/design/communication/empty-states.html
+---
+
+# Empty states
+
+The `v-empty-state` component is used to indicate that a list is empty or that no search results were found.
+
+<PageFeatures />
+
+## Usage
+
+A basic empty state is composed of a title and a description. It can also include an icon and a button.
+
+<ExamplesUsage name="v-empty-state" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-empty-state](/api/v-empty-state/) | Primary Component |
+
+<ApiInline hide-links />

packages/vuetify/src/labs/VEmptyState/VEmptyState.sass

@@ -0,0 +1,20 @@
+@use './variables' as *
+
+.v-empty-state
+  min-height: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+
+.v-empty-state__title
+  font-size: $empty-state-title-font-size
+
+.v-empty-state__subtitle
+  font-size: $empty-state-subtitle-font-size
+
+.v-empty-state__text
+  font-size: $empty-state-text-font-size
+
+.v-empty-state__content
+  padding: $empty-state-content-padding

packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx

@@ -0,0 +1,124 @@
+// Styles
+import './VEmptyState.sass'
+
+// Components
+import { VAvatar } from '@/components/VAvatar'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { VIcon } from '@/components/VIcon'
+
+// Composables
+import { makeSizeProps } from '@/composables/size'
+import { makeComponentProps } from '@/composables/component'
+import { makeThemeProps, provideTheme } from '@/composables/theme'
+import { IconValue } from '@/composables/icons'
+
+// Utility
+import { genericComponent, propsFactory, useRender } from '@/util'
+import { useBackgroundColor } from '@/composables/color'
+import { toRef } from 'vue'
+
+// Types
+
+export type VEmptyStateSlots = {
+  default: void
+  media: void
+}
+
+export const makeVEmptyStateProps = propsFactory({
+  avatar: String,
+  color: String,
+  icon: IconValue,
+  title: String,
+  subtitle: String,
+  text: String,
+
+  ...makeComponentProps(),
+  ...makeSizeProps({ size: '25%' }),
+  ...makeThemeProps(),
+}, 'VEmptyState')
+
+export const VEmptyState = genericComponent<VEmptyStateSlots>()({
+  name: 'VEmptyState',
+
+  props: makeVEmptyStateProps(),
+
+  setup (props, { slots }) {
+    const { themeClasses } = provideTheme(props)
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
+
+    useRender(() => (
+      <div
+        class={[
+          'v-empty-state',
+          themeClasses.value,
+          backgroundColorClasses.value,
+          props.class,
+        ]}
+        style={[
+          backgroundColorStyles.value,
+          props.style,
+        ]}
+      >
+        { !slots.media ? (
+          <>
+            { props.avatar ? (
+              <VAvatar
+                key="avatar"
+                image={ props.avatar }
+                size={ props.size }
+                tile
+              />
+            ) : props.icon ? (
+              <VIcon
+                key="icon"
+                size={ props.size }
+                icon={ props.icon }
+              />
+            ) : undefined }
+          </>
+        ) : (
+          <VDefaultsProvider
+            key="media-defaults"
+            defaults={{
+              VAvatar: {
+                image: props.avatar,
+                icon: props.icon,
+              },
+            }}
+          >
+            { slots.media() }
+          </VDefaultsProvider>
+        )}
+
+
+        { props.title && (
+          <div key="title" class="v-empty-state__title">
+            { props.title }
+          </div>
+        )}
+
+        { props.subtitle && (
+          <div key="subtitle" class="v-empty-state__subtitle">
+            { props.subtitle }
+          </div>
+        )}
+
+        { props.text && (
+          <div key="text" class="v-empty-state__text">
+            { props.text }
+          </div>
+        )}
+
+        { slots.default && (
+          <div key="content" class="v-empty-state__content">
+            { slots.default() }
+          </div>
+        )}
+      </div>
+    ))
+
+    return {}
+  },
+})
+
+export type VEmptyState = InstanceType<typeof VEmptyState>

packages/vuetify/src/labs/VEmptyState/_variables.scss

@@ -0,0 +1,4 @@
+$empty-state-title-font-size: 4rem !default;
+$empty-state-subtitle-font-size: 2rem !default;
+$empty-state-text-font-size: .875rem !default;
+$empty-state-content-padding: 24px 0 !default;

packages/vuetify/src/labs/VEmptyState/index.ts

@@ -0,0 +1 @@
+export { VEmptyState } from './VEmptyState'

packages/vuetify/src/labs/components.ts

@@ -2,3 +2,4 @@ export * from './VConfirmEdit'
 export * from './VCalendar'
 export * from './VPicker'
 export * from './VSparkline'
+export * from './VEmptyState'