How can I customize Quasar's QSelect to show text and outline in bold, when a selection is made

Question

I'm trying to customize Quasar's QSelect with multiple selection (https://quasar.dev/vue-components/select#The-display-value), to show text and outline in bold, when a selection is made.

I was inspired by this site (https://www.zalando.dk/herretoej/_beige.gra.sort/) and how they use multi select to highlight when a selection is made e.g. "Farve".

I wanted to do something similar using QSelect and "display-value" from API documentation (https://quasar.dev/vue-components/select#QSelect-API).

My example: https://jsfiddle.net/orbit/351f27ua/30/

My example: https://jsfiddle.net/orbit/351f27ua/30/

Basically I am trying to make the select have bold text e.g. "Items (2)" when 2 items has been selected and preferably show a thick border - as shown on (https://www.zalando.dk/herretoej/_beige.gra.sort/)

Any idea on how to achieve this using Quasar?

Answer 1

you can customize it using styles and with a conditional class

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      itemOptions: ['Item 1', 'Item 2', 'Item 3'],
      items: [],
      displayValue: ''
    }
  },
  methods: {
    addValue: function (item) {
        this.items.push(item);

      this.displayValue = `Items (${this.items.length})`;
    },
    removeValue: function (item) {
        const index = this.items.findIndex(x => x.value == item.value);

            this.items.splice(index, 1);

      this.displayValue = this.items.length !== 0 ? `Items (${this.items.length})` : '';
    }
    }
})

.custom_selected {
  border: 2px solid #000000;
}

.custom_selected .q-field__label,
.custom_selected .q-field__native {
  color: #000000;
  font-weight: bolder!important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="q-app" class="q-ma-md">
  <div class="q-mb-xl">
    Custom QSelect - needs to show bold text when one or more items are selected and a thick border
  </div>
  
  <q-select
      filled
      v-model="items"
      multiple
      :options="itemOptions"
      :label="items.length < 1 ? 'Items' : undefined"
      :display-value="displayValue"
      style="width: 150px;"
      @add="addValue"
      @remove="removeValue"
      :class="{'custom_selected': items.length>0}">
  </q-select>

</div>