docs(VSnackbarQueue): add page

packages/docs/src/data/nav.json

@@ -231,6 +231,10 @@
         "title": "floating-action-buttons",
         "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/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 />