Support for suggestions grouping

[bunomonteiro]

Does this component support grouping (similar to optgroup)?
I didn't see it in the doc.

The doc tells us about 'custom item', but I need to customize one level up (group of items)

[kaskar2008]

Hello @bunomonteiro.
Unfortunately this component doesn't support grouping yet, but this is quite interesting feature, so we will implement it soon.
@Raiondesu, need your opinion.
@bunomonteiro, feel free to contribute :)

[Raiondesu]

Yes, grouping is not technically supported currently, but it would be nice to have some way of extending the component's template to make such things possible.

This issue is definitely a next major version material.

[Raiondesu]

@bunomonteiro, on the second thought, you can currently achieve this with a following workaround:
Define the splitters for your groups in suggestions list:

[
  {
    id: 1,
    title: 'Group #1',
    splitter: true // This flag will allow us to determine that the current suggestion is a group splitter
  },
  {
    id: 2,
    title: 'some item from group 1'
  },
  {
    id: 3,
    title: 'another item from group 1'
  },
  {
    id: 4,
    title: 'Group #2 - the fancy one',
    splitter: true
  },
  {
    id: 5,
    title: 'WOOW, some item from group 2'
  },
  {
    id: 6,
    title: 'another item from group 2'
  }
]

And then, in your suggestion slot template you could define something like this:

<div slot="suggestion-item" slot-scope="{ suggestion }" :title="suggestion.title">
  <!-- @*event*.stop="null" handlers are needed to prevent the splitter from being selected -->
  <span v-if="suggestion.splitter"
    @click.stop="null"
    @keyup.stop="null"
    @mouseenter.stop="null"
    @mouseleave.stop="null"
    @keydown.stop="null"
    class="your-custom-splitter-class"
  >{{ suggestion.title }}</span>
  
  <span v-else>{{ suggestion.title }}</span>
</div>

This very hacky solution can help with imitating suggestions grouping.

The official documented support is coming in the next minor (or maybe major) version.

[bunomonteiro]

I got it!

Because of component (today) limitations it is necessary to use an array of flat objects. I see that.
But it would be more interesting if the component supported an array of complex objects. Of course, in the next version.
Like this:

[
  {
    _id: "as78d5as87das6",
    title: "Some Group Title",
    children: [
      {
        _id: "098asdf09asd78f",
        title: "Some child's title",
        value: "some_value",
      }, { ... }
    ]
  }, { ... } 
]

[Raiondesu]

@bunomonteiro, I'd like to correct your words a bit: not array of flat objects, but rather flat array of objects, because it's possible to provide dotted paths to display-attribute and value-attribute props:
display-attribute="info.general.title"

About defining future formats to support nesting...
I though of something like a nesting-attribute. It would be possible to achieve nesting for your example like this:

<vue-simple-suggest ref="vueSimpleSuggest" v-model="model"
  value-attribute="id"
  display-attribute="title"
  nesting-attribute="children"
></vue-simple-suggest>

@kaskar2008, what do you think?

[bunomonteiro]

hum...
Isn't an array of flat objects, but at the end works like it.

About your proposal for future format, sounded great to me.

<vue-simple-suggest ref="vueSimpleSuggest" v-model="model"
  value-attribute="id"
  display-attribute="title"
  children-attribute="children"
>
<div slot="suggestion-item">...</div>
<div slot="suggestion-child">...</div>
</vue-simple-suggest>

[Raiondesu]

@bunomonteiro, we rememeber.
:)

[sascha-wojewsky-IPD]

Grouping would be a great feature.
Do you have a release plan for it?

[kaskar2008]

@wojewsky Yes, ofc we have, but we still can't find a good and flexible solution for this case. Feel free to help us with it :)