Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom class names structure #347

Open
slidenerd opened this issue Sep 2, 2020 · 3 comments
Open

Support custom class names structure #347

slidenerd opened this issue Sep 2, 2020 · 3 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@slidenerd
Copy link

slidenerd commented Sep 2, 2020

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 kaskar2008 added the enhancement New feature or request label Sep 10, 2020
@kaskar2008
Copy link
Member

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
Copy link
Author

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 kaskar2008 added this to the 1.11 milestone Jun 2, 2021
@kaskar2008 kaskar2008 self-assigned this Jun 2, 2021
@kaskar2008 kaskar2008 changed the title Support Bulma Dropdown Styling Format Support custom class names structure Jun 2, 2021
@kaskar2008 kaskar2008 modified the milestones: 1.11, 1.12 Jun 2, 2021
@kaskar2008
Copy link
Member

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

@kaskar2008 kaskar2008 reopened this Jun 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants