Groups?

[gr8bit]

Hi all,

one feature the vue-select-package was (and is!) missing is the possibility to have option groups (similar to the html select). Anyone thought about this yet?

Feature wishlist:

• "Group options" (=the option that is a group "headline") selectable or not selectable and with own option value
• Nested groups on 1+ levels
• Individual "group option" and options in group rendering (slots?) per level

Cheers! :)

[valh1996]

+1 I am really looking for that! I can't find any alternative components on Vue3...

[soc221b]

@gr8bit @valh1996 Sorry for not getting back to you sooner.

In order to support as many as possible use cases (e.g, nested groups) and keep it flexible as well, it would be great if there have a prop group-by which is used to determine whether an option is group.

When click on a group option, all of its values (the value must be an Array) will be selected.

1. Group options, use disabled (for now) to prevent select on group.

const options = ref([
  { value: ['i', 'love', 'vue'], group: true }, // click on this group option will select all options, and deselect all options if those options are already selected.
  { value: 'i' },
  { value: 'love' },
  { value: 'vue' },
])

2. Nested group options can be:

const options = ref([
  { value: ['1-1-1', '1-1-2', '1-2-1', '1-2-2'], group: true },
  { value: ['1-1-1', '1-1-2'], group: true },
  { value: '1-1-1' },
  { value: '1-1-2' },
  { value: ['1-2-1', '1-2-2'], group: true },
  { value: '1-2-1' },
  { value: '1-2-2' },
])

3. There is no needed to add another slot, just use the dropdown-item slot to achieve this:

const options = ref([
  { value: ['i', 'love', 'vue'], group: true, level: 1 }, // you can add any info to option, it could help you to determine the level is or else.
  { value: 'i' },
  { value: 'love' },
  { value: 'vue' },
])

I have added some test cases for this blueprint too, please see this test file.

Thank you for your time.

[gr8bit]

@iendeavor very cool! One thought though: what about disabling a group of elements...?

Maybe disabled: true on the group could disable all of its values while disabled: ['i', 'love'] could be used as an alternative syntax to only disable certain elements of the group.
But how could we handle nested groups? We could simply disable groups if all of their elements were disabled. If there's a top level group which disables all the entries of two "inner" groups as in your example, these would then also be disabled, implicitly.

[soc221b]

Maybe there should add group-disabled-by prop?

[gr8bit]

I think the normal disabled-by/disabled mechanism should suffice for the groups as well.

[soc221b]

Yes, you are right 👍 , I will keep this in mind, but I have to go to sleep now 😄 .

[gr8bit]

Well deserved! 😄

[soc221b]

It is released 😄 .