Support custom class names structure

slidenerd commented 4 years ago

I'm submitting a ...

support request

What is the current behavior?

Dropdown does not work properly when attempting to style with Bulma

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

It is not a bug, more like a doubt. Bulma follows THIS exact structure for a dropdown. Your documentation styles support a custom autoCompelete prop as follows


        autoCompleteStyle : {
          vueSimpleSuggest: "position-relative",
          inputWrapper: "",
          defaultInput : "form-control",
          suggestions: "position-absolute list-group z-1000",
          suggestItem: "list-group-item"
        }

As per this, suggestItem would be equal to dropdown-item class
suggestions would take the dropdown-content class
Where/How do I put a dropdown-menu in between?

What is the expected behavior?

Dropdown menu can be styled as per Bulma s format

How are you importing Vue-simple-suggest?

As a Nuxt plugin

What is the motivation / use case for changing the behavior?

I bet many people use Bulma as a way to style components, could be helpful for all

Please tell us about your environment:

Nuxt JS 2.14.0 with SSR and JS as the programming language on OSX 10.13.6

Suggestions on how to fix

vue-simple-suggest(:styles="autoCompleteStyle" v-model="search" display-attribute='name' value-attribute='name' :list="users")
    input.input.is-small(type='search' placeholder='Search')
        .dropdown-menu
            div(slot="suggestion-item" slot-scope="{ suggestion, query }") {{suggestion.name}}

Your component does not support my .dropdown-menu divider which I tried to plug between, perhaps if you allow it, that would be a nice start?

kaskar2008 commented 4 years ago

Hello @slidenerd!

I love Bulma, it's light, flexible and handy. But forcing others to use Bulma's dropdown structure isn't the right way.

However, it is usefull to add some tweaks to the vue-simple-suggest to fit your needs. I see the problem and the solution might be to add className map as a prop to manually orchestrate over structure (only class names).

If this will do - don't you mind if I will reformat this issue to fit the target need?

slidenerd commented 4 years ago

thank you for replying, you are right, core lib should not be modified to add anything, is it possible to add a slot or something or let custom content inside the vue-simple-suggest be shown as it is, last i checked it was not, feel free to reformat the issue

kaskar2008 commented 3 years ago

Sorry, I totally forgot about this issue :( This will be added in 1.12 milestone

KazanExpress / vue-simple-suggest