feat-request: Add grouping option

[neawbie]

It would be great if you could group snackbars of the same type/message/etc, instead of having them show one by one.

Here is an example:

Screen.Recording.2021-08-05.at.10.58.54.mov

This was taken from: https://quasar.dev/quasar-plugins/notify#grouping

You could send a new prop group that is boolean, to make the snackbars stack(default: false).

[Aymeric]

Sorry but I won't implement it.

You could update the message by checking if a message is already available, and then increase the number. A very basic example: https://codesandbox.io/s/v-snackbars-with-increase-badge-s8uzn?file=/src/App.vue

You could make it prettier by using some badges in place of the "close" button, or whatever will look better.

[neawbie]

Thanks to your example and with slight modification to the code, I was able to implement it with badges.

Screen.Recording.2021-08-10.at.12.43.20.mov

I will leave the modified code below for others to see.

<template>
  <v-app>
    <v-main class="text-center">
      <v-btn dark color="red" class="mt-6" @click="showMessage('red')">Click Me</v-btn>
      <v-btn dark color="blue" class="mt-6" @click="showMessage('blue')">Click Me</v-btn>

      <v-snackbars :objects.sync="objects" bottom left></v-snackbars>
    </v-main>
  </v-app>
</template>

<script>
import VSnackbars from "v-snackbars";

export default {
  name: "App",
  components: {
    "v-snackbars": VSnackbars,
  },
  data: () => ({
    objects: [],
  }),
  methods: {
    showMessage(toast) {
      const payload = {
        id: toast,
        timeout: 5000,
        color: toast,
      };
      let idx = this.objects.findIndex((obj) => obj.id === payload.id);
      if (idx > -1) {
        payload.count = this.objects[idx].count + 1;
        payload.message = `This snackbar has ${payload.count} message${
          payload.count > 1 ? "s" : ""
        }.`;
        this.objects.splice(idx, 1, payload);
      } else {
        payload.count = 1;
        payload.message = "This snackbar has 1 message.";
        this.objects.push(payload);
      }
    },
  },
};
</script>

To add the badge you just have to wrap <slot name="action" /> with badge component, found inside v-snackbars.

<v-badge
  :content="snackbar.count > 99 ? '99+' : snackbar.count"
  :value="snackbar.count"
  color="green"
  overlap
  :offset-x="snackbar.count > 9 ? snackbar.count > 99 ? '20px' : '10px' : '5px'"
  offset-y="5px">
  <slot
    name="action"
    :close="() => removeMessage(snackbar.key, true)"
    :id="snackbar.key"
    :index="idx"
    :message="snackbar.message">
    <v-btn text @click="removeMessage(snackbar.key, true)">close</v-btn>
  </slot>
</v-badge>