docs(VSnackbarQueue): add examples

Author: KaelWD

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

@@ -4,8 +4,9 @@
     :code="code"
     :name="name"
     :options="options"
+    :script="script"
   >
-    <div>
+    <div style="height: 188px">
       <v-text-field
         v-model="text"
         label="Queue a message"
@@ -24,6 +25,21 @@
         </template>
       </v-text-field>
 
+      <v-list density="compact" variant="tonal" nav>
+        <v-list-subheader>Queue:</v-list-subheader>
+        <v-fade-transition
+          v-for="message in queue"
+          :key="message"
+          appear
+        >
+          <v-list-item
+            :color="message.color"
+            :subtitle="message.timeout + 'ms'"
+            :title="message.text"
+          ></v-list-item>
+        </v-fade-transition>
+      </v-list>
+
       <v-snackbar-queue v-model="queue" :color="color" :timeout="timeout"></v-snackbar-queue>
     </div>
 
@@ -55,11 +71,13 @@
       timeout: timeout.value,
       color: color.value,
     })
+    text.value = ''
   }
 
   const props = computed(() => {
     return {
-      color: color.value,
+      'v-model': 'messages',
+      color: color.value ?? undefined,
       timeout: timeout.value !== 5000 ? timeout.value : undefined,
     }
   })
@@ -71,4 +89,15 @@
   const code = computed(() => {
     return `<v-snackbar-queue${propsToString(props.value)}>${slots.value}</v-snackbar-queue>`
   })
+
+  const script = computed(() => {
+    return `<script setup>
+  const text = ref('')
+  const messages = ref([])
+
+  function onClick () {
+    messages.value.push(text.value)
+  }
+<` + '/script>'
+  })
 </script>

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

@@ -10,22 +10,24 @@ related:
   - /components/snackbars/
   - /components/defaults-providers/
 features:
-  github: /labs/VSnackbarQueue/
+  github: /components/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.
+The `v-snackbar-queue` component is used to display a sequence of messages to the user.
 
 <PageFeatures />
 
 <DocIntroduced version="3.7.0" />
 
 ## Usage
 
+Messages are passed as an array of strings to `v-model`, when a message is displayed it will be removed from the start of the array.
+
 <ExamplesUsage name="v-snackbar-queue" />
 
 <PromotedEntry />
@@ -38,3 +40,62 @@ The `v-snackbar-queue` component is used to queue up multiple snackbar messages
 | [v-snackbar](/api/v-snackbar/) | The actual Snackbar Component |
 
 <ApiInline hide-links />
+
+## Examples
+
+### Additional props
+
+Snackbar props can be set either on the queue to apply to all messages:
+
+```html
+<v-snackbar-queue timeout="2000" color="error" />
+```
+
+Or individual messages as objects:
+
+```js
+queue.push({
+  text: text.value,
+  timeout: 2000,
+  color: 'error',
+})
+```
+
+### Global state
+
+You can use pinia or vuex to display messages from any component:
+
+```js { resource="stores/messages.js" }
+export const useMessagesStore = defineStore('messages', () => {
+  const queue = ref([])
+  function add (message) {
+    queue.push(message)
+  }
+
+  return { queue, add }
+})
+```
+
+```html { resource="App.vue" }
+<template>
+  <v-app>
+    <router-view></router-view>
+
+    <v-snackbar-queue v-model="messages.queue"></v-snackbar-queue>
+  </v-app>
+</template>
+
+<script setup>
+  const messages = useMessagesStore()
+</script>
+```
+
+```html { resource="pages/error.vue" }
+<script setup>
+  const messages = useMessagesStore()
+
+  function onError (err) {
+    messages.add({ text: err.message, color: 'error' })
+  }
+</script>
+```