Add option-label and option-value to QOptionGroup

[jaalders]

Hi there,

I know that technically you can get around the issue of a multi-select option group with with a 'multiple' option added to a , but if you are trying to use your options param has to be tightly coupled to label value like so

options: [
{
  label: 'Option 1',
  value: 'op1'
},

If I wanted to use an interface for the options array, I will not be able to use it due to the conflict on the options param from Quasar.

Take this example:

// use generics to allow for on the fly naming aka: value/label
export interface IMenuDietaryOptions {
  [key: string]: number | string;
}

// no error here
const dietaryOptions: IMenuDietaryOptions[] = [
  { value: 1, label: 'Dairy Free' },
  { value: 2, label: 'Gluten Free' },
  { value: 3, label: 'Keto' },
  { value: 4, label: 'Nut Free' },
  { value: 5, label: 'Paleo' },
  { value: 6, label: 'Vegan' },
  { value: 7, label: 'Vegetarian' },
];

  <q-option-group
    v-model="menuItem.dietaryOptions"
    :options="dietaryOptions"
    color="primary"
  />

The :options section has the following error

  Type 'IMenuDietaryOptions[]' is not assignable to type '{ [props: string]: any; label: string; value: any; disable?: boolean | undefined; }[]'.ts(2322)
  index.d.ts(7168, 3): The expected type comes from property 'options' which is declared here on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & QOptionGroupProps & Record<string, unknown>'

Perhaps I am just missing something, and by all means if that is the case, please guide me, but if we were to allow map-options and emit-value to we could specify our label and value pair and we could keep our type safety

[yusufkandemir]

You need to use the correct type, or don't enforce a type at all(e.g. let TS infer the type).

import { QOptionGroupProps } from 'quasar';

const dietaryOptions: QOptionGroupProps['options'] = [
  { value: 1, label: 'Dairy Free' },
  { value: 2, label: 'Gluten Free' },
  { value: 3, label: 'Keto' },
  { value: 4, label: 'Nut Free' },
  { value: 5, label: 'Paleo' },
  { value: 6, label: 'Vegan' },
  { value: 7, label: 'Vegetarian' },
];
// or just
const dietaryOptions = [
  // ...
];

[yusufkandemir]

Your TS problem was somewhat clear, but your other request is still unclear. With the only thing I could understand, I said QOptionGroup already works like map-options+emit-value behavior of QSelect. So, you should further clarify what you have now and what you want, it's not even clear what is the type of menuItem.dietaryOptions and what you want it to be.

[jaalders]

<q-select> allows you to map both value and label which is great, because if you have your own interface you can specify your label and value from what is in that custom interface, and doesn't require a import from Quasar. However, with <q-option-group> you're limited to the label/value naming constraints. If I wanted to use my own custom interface for <q-option-group> I wouldn't be able to do so.

[yusufkandemir]

Still hard to understand how it's related to map-options+emit-value. But, I have a guess. You want to have the equivalent of option-label and option-value to be added to QOptionGroup. So you could do:

<q-option-group
  ...
  :options="options"
  option-label="name"
  option-value="type"
/>

<script setup>
const options = [
  { name: 'Gluten Free', type: 1 }
];
</script>

instead of

<q-option-group
  ...
  :options="options"
/>

<script setup>
const myOptions = [
  { name: 'Gluten Free', type: 1 }
];

const options = myOptions.map(({ name, type }) => ({
  label: name,
  value: type
}));
</script>

is this what you what?

[jaalders]

This is correct

[RVXD]

Yes, please, can this be added? It is confusing that the q-select does have 'option-label' and 'option-value' and q-option-group does not have this. If implemented, switching between either dropdown or option group would be a lot easier.

[rstoenescu]

Just pushed: feat+perf(QOptionsGroup): new props -> option-value, option-label & option-disable #16874
Will be available in Quasar v2.17.0

[jaalders]

Took a little bit to get there, but glad to see it get added! 👍