FR: it would be useful to have a foreground colour in the object

[gregveres]

Right now the snackbars all use white as their foreground colour. I had been using my own copy of your tool from v2.1.2. I had customized it to read an "fg" field from the object and use that as the foreground colour for the text.

I decided I would try to upgrade to your lastest version and ditch my customized copy. The background colours I have chosen don't work well with white text. I think I can get around it by using a slot to render my own text, but it would be nice to not have to do that.

[gregveres]

I could do a pull request for it if you would accept it.

[gregveres]

I was hoping that I could implement this with the current component using the default slot, but I can't because the object isn't passed to the slot, only the message is passed to the slot, so it really does need a PR to get this type of functionality.

[Aymkdn]

Can you show me the excepted render? It would help me visualize what you want to achieve!

[gregveres]

Yes I can. Here is what my success snackbar looks like:

and here is what my error snackbar looks like:

The 'x' icon for the close I can already do with the slot for the action, although it will need to get the foreground colour as well.

[gregveres]

I took this colour scheme from the Vuetify docs site. You can see the error and warning alert styles on this page:
https://vuetifyjs.com/en/getting-started/installation/

[Aymkdn]

Thanks. I'll have a closer look tomorrow.

[gregveres]

I use the object prop and my objects have an fg field that contains the corresponding colour of green or red. If you are going to add this, take your pick of property name. I am not wedded to "fg".

[Aymkdn]

You can already do it with color and content-class:

<v-snackbars
        :messages.sync="messages"
        color="red lighten-5"
        content-class="error--text"
        bottom
        left
      >
        <template v-slot:action="{ close, message }">
          <v-btn text class="error--text" @click="close()">×</v-btn>
        </template>
      </v-snackbars>

[gregveres]

That only works if I wanted every single snackbar to be red. I have one queue of snackbars for the system. The application either puts a success message (green) or an error message (red) into the queue and then v-snackbars displays them on the screen for an appropriate amount of time (a longer period for an error).

The colour has to come from the message object itself, it can't be hard coded into the v-snackbars component.

[Aymkdn]

In that case you'll have to use objects with content-class. I've just published a new version (v3.2.5) that supports content-class in objects:

<v-snackbars :objects.sync="objects">
  <template v-slot:action="{ close, message, index }">
    <!-- use `class` to inherent and get the same text color -->
    <v-btn text :class="objects[index]['content-class']" @click="close()"
      >X</v-btn
    >
  </template>
</v-snackbars>

this.objects.push({
  message: "the message to display",
  bottom: true,
  left: true,
  color: "red lighten-5",
  "content-class": "red--text",
  timeout: 30000
});
this.objects.push({
  message: "another message",
  bottom: true,
  left: true,
  color: "green lighten-5",
  "content-class": "green--text",
  timeout: 30000
});

[Aymkdn]

(actually I've just found a bug that I'm fixing now… a new version will be released)

[gregveres]

Ok, I see you also pull content-class from each message object. Ok. I will just have to create a class with the colour I want for each message type.

[Aymkdn]

Version 3.2.6 is published!

[gregveres]

@Aymkdn I hate to ask, but content-class is not a valid javascript field name. I am using typescript which makes this a really hard object field to name. I can't create a typescript interface to define the shape of the messages object.

Can that be changed to "class". Hmm, class wont work either. That is a reserved keyword. Would you be able to rename it to contentClass? or just about anything without a '-' in it?

[Aymkdn]

content-class is what Vuetify is using…

OK, I renamed content-class to contentClass when using the objects type.

<v-snackbars :objects.sync="objects">
  <template v-slot:action="{ close, index }">
    <!-- use `class` to inherent and get the same text color -->
    <v-btn text :class="objects[index].contentClass" @click="close()">X</v-btn>
  </template>
</v-snackbars>

this.objects.push({
  message: "the message to display",
  bottom: true,
  left: true,
  color: "red lighten-5",
  contentClass: "red--text",
  timeout: 30000
});
this.objects.push({
  message: "another message",
  bottom: true,
  left: true,
  color: "green lighten-5",
  contentClass: "green--text",
  timeout: 30000
});

[gregveres]

I see the new release. Thank you very much! I have updated to the new version and it works great.