feat(VSnackbarQueue): create new component (#19629)

closes #2384

Co-authored-by: John Leider <john@vuetifyjs.com>

packages/docs/components.d.ts

@@ -80,7 +80,6 @@ declare module 'vue' {
     AppSettingsPerksOptions: typeof import('./src/components/app/settings/PerksOptions.vue')['default']
     AppSettingsSettingsHeader: typeof import('./src/components/app/settings/SettingsHeader.vue')['default']
     AppSheet: typeof import('./src/components/app/Sheet.vue')['default']
-    AppSnackbarQueue: typeof import('./src/components/app/SnackbarQueue.vue')['default']
     AppTable: typeof import('./src/components/app/Table.vue')['default']
     AppTextField: typeof import('./src/components/app/TextField.vue')['default']
     AppTitle: typeof import('./src/components/app/Title.vue')['default']

packages/docs/src/data/nav.json

@@ -240,6 +240,10 @@
         "title": "number-inputs",
         "subfolder": "components"
       },
+      {
+        "title": "snackbar-queue",
+        "subfolder": "components"
+      },
       {
         "title": "sparklines",
         "subfolder": "components"

packages/docs/src/examples/v-snackbar-queue/usage.vue

@@ -0,0 +1,74 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div>
+      <v-text-field
+        v-model="text"
+        label="Queue a message"
+        hide-details
+        @keydown.enter="onClick"
+      >
+        <template v-slot:append-inner>
+          <v-btn
+            :disabled="!text"
+            append-icon="mdi-arrow-right"
+            text="Queue"
+            flat
+            slim
+            @click="onClick"
+          ></v-btn>
+        </template>
+      </v-text-field>
+
+      <v-snackbar-queue v-model="queue" :color="color" :timeout="timeout"></v-snackbar-queue>
+    </div>
+
+    <template v-slot:configuration>
+      <v-select
+        v-model="color"
+        :items="['primary', 'secondary', 'success', 'info', 'warning', 'error']"
+        label="Color"
+        clearable
+      ></v-select>
+
+      <v-number-input v-model="timeout" min="-1"></v-number-input>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-snackbar-queue'
+  const model = ref('default')
+  const options = []
+  const color = shallowRef()
+  const timeout = shallowRef(5000)
+  const queue = ref([])
+  const text = shallowRef('')
+
+  function onClick () {
+    queue.value.push({
+      text: text.value,
+      timeout: timeout.value,
+      color: color.value,
+    })
+  }
+
+  const props = computed(() => {
+    return {
+      color: color.value,
+      timeout: timeout.value !== 5000 ? timeout.value : undefined,
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<v-snackbar-queue${propsToString(props.value)}>${slots.value}</v-snackbar-queue>`
+  })
+</script>

packages/docs/src/layouts/default.vue

@@ -12,8 +12,6 @@
 
     <AppBackToTop />
 
-    <AppSnackbarQueue />
-
     <v-main>
       <slot>
         <v-container

packages/docs/src/layouts/home.vue

@@ -6,8 +6,6 @@
 
     <AppBarBar />
 
-    <AppSnackbarQueue />
-
     <v-main class="text-center font-weight-light">
       <router-view />
     </v-main>

packages/docs/src/layouts/user.vue

@@ -8,8 +8,6 @@
 
     <AppDrawerDrawer />
 
-    <AppSnackbarQueue />
-
     <v-main>
       <router-view v-slot="{ Component }">
         <v-fade-transition hide-on-leave>

packages/docs/src/pages/en/components/snackbar-queue.md

@@ -0,0 +1,38 @@
+---
+emphasized: true
+meta:
+  nav: Snackbar Queue
+  title: Snackbar Queue component
+  description: test
+  keywords: test
+related:
+  - /components/buttons/
+  - /components/snackbars/
+  - /components/defaults-providers/
+features:
+  github: /labs/VSnackbarQueue/
+  label: 'C: VSnackbarQueue'
+  report: true
+  spec: https://m2.material.io/components/snackbars
+---
+
+# Snackbar Queue
+
+The `v-snackbar-queue` component is used to queue up multiple snackbar messages to be displayed to the user. Snackbars support positioning, removal delay, and callbacks.
+
+<PageFeatures />
+
+## Usage
+
+<ExamplesUsage name="v-snackbar-queue" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-snackbar-queue](/api/v-snackbar-queue/) | Primary Component |
+| [v-snackbar](/api/v-snackbar/) | The actual Snackbar Component |
+
+<ApiInline hide-links />

packages/docs/src/stores/app.ts

@@ -7,12 +7,6 @@ export type Category = {
   color: string
 }
 
-export type Notification = {
-  message: string
-  timeout?: number
-  color?: string
-}
-
 export type RootState = {
   apiSearch: string
   drawer: boolean | null
@@ -21,7 +15,6 @@ export type RootState = {
   items: NavItem[]
   pages: string[]
   settings: boolean
-  notifications: Notification[]
   categories: Record<string, Category>
 }
 
@@ -44,7 +37,6 @@ export const useAppStore = defineStore({
     items: Array.from(data),
     pages: getPages(data as NavItem[]),
     settings: false,
-    notifications: [],
     categories: {
       api: {
         icon: 'mdi-flask-outline',
@@ -92,11 +84,6 @@ export const useAppStore = defineStore({
       },
     },
   } as RootState),
-  actions: {
-    snackbar (message: string, options: Partial<Notification> = {}) {
-      this.notifications.push({ message, ...options })
-    },
-  },
 })
 
 function getPage (item: NavItem, parent = ''): string[] {