Should someone stumble upon the same issue, this is how I finally did it using purely the framework:

    <div>
      <q-input v-model="newTag" label="New...">
        <template v-slot:before>
          <q-chip
            removable
            @remove="deleteTag(tag)"
            v-for="tag in displayedNote.tags">
            {{tag}}
          </q-chip>
        </template>
      </q-input>
    </div>

I believe that the problem may have been fixed by now, but just in case: there is a way to prefix all Tailwind classes (https://tailwindcss.com/docs/configuration#prefix). This removes the conflict without any hacking.

As part of my page (which is in an outermost q-layout), I also have a modal q-dialog that pops up at some conditions. The actual component is a q-card.

I would like to add to this card a fixed sticky bar at the bottom. I belive that the right way to do that is by using a q-page-sticky.

The problem: the message appears at the bottom of the whole browser page, not in the card.

For reference, the general (simplified) structure is

<template>
  <q-layout
    view="lHh Lpr lFf"
    >
    <q-page-container
      class="q-pa-md">

      (... content of the page with inputs, buttons etc. ...)

      <q-layout>
      <q-dialog (...)>
        <q-card>
          <q-card-section>
            (...)
          </q-card-section>
          <q-card-section>
            (...)
          </q-card-section>
        </q-card>

        <q-page-sticky position="bottom">
          the text I want to have at the bottom of the card
        </q-page-sticky>

      </q-dialog>
      </q-layout>

    </q-page-container>
  </q-layout>
</template>

I tried to move the q-page-sticky section within the q-card- same problem.

Is there a way to have it in the q-card?

Note: the height of the q-card is fixed.

Coming back to confirm that it works great this way. Thanks!

@dobbel said in Should I use :columns in a q-table when using slots?:

@wpq said in Should I use :columns in a q-table when using slots?:

should I still have a :columns entry in q-table

Yes because columns is used for the table header.

See this example:
https://quasar.dev/vue-components/table#Body-slots

Yes, I use body slots with :columns today. What I do not understand is why keeping the same information in both places. After all, I am building the table column after column anyway.

If this is a design solution then fine, I wanted to make sure that there is not a way to get rid of :columns and configure them in q-tr which I use anyway.

I use a q-table with

<template v-slot:body="props">

and then q-tr to build my columns.

Since everything is handled via q-tr, should I still have a :columns entry in q-table? I have a feeling that it is redundant in that case (?)

@metalsadman said in How to match a string to a color?:

you can make your own color brands programmatically

Yes, but in that case, I would need to programmatically ass CSS styles (because my colors are generated from the names of the tags)

@ilia said in How to match a string to a color?:

That’s what I would play with if you are talking about the dynamic numbers.

Thanks - but is there a way to use these numbers? (this is exactly what I was intending to do, just did not find where to actually plus the hex - all I found are the pre-configured colors)

I have tags (via q-badge) that I would like to automatically color, ideally in a predictable way.

Right now I have a fixed color for all the tags and their number will change dynamically. I have a vague idea about how to manage this non-predictably (somehow get the list of colors, shuffle it and while I am building my list of tags, pop a color and attach it to the definition).

I would love to have a way to give a HEX value to a tag (I found a way to do “string → hash → set of 3 hex values”), but it seems that this is not possible?

I have the following buttons:

   <q-btn
      color="blue"
      class="q-ma-sm"
      size="sm"
      v-for="tag in allTags"
      @click="tag.set=!tag.set"
    >
      {{tag}}
    </q-btn>

allTags is an Array with elements such as {tag: "hello", set: true}.

As expected, I get a row of buttons but clicking on them does not change the set property.

Is it possible to modify the value of a property while iterating this way?

I found it. The code is indeed what I used in my question, and the content of the row is in props.row