[FEATURE] select with icons or dropdown that changes handler

[darkylmnx]

i came accross a use case where neither the select component nor the dropdown component solves it.

If you are on facebook, you probably came accross the following image

It gives you the ability to change the privacy of a post but also explains them.

Currently, a dropdown would be the way to go (as there is html inside the options), but here's the problem now, when you make your choice, the dropdown handler / trigger does not change value, therefore the user doesn't have feedback on what he choosed.

In this sens, the behaviour seems more like a select, but because of the html issue (icons and stuff) i can't use the select component.

Api proposal

Could you add on the drop down component a prop replace which would be a boolean, and if set, would replace & show the selected dropdown option instead of the handler / trigger.

[rafaberaldo]

Well, I left the trigger opened for that purpose. You can change the trigger based on the v-model of the dropdown.

[darkylmnx]

well i tried something like

and it doesn't seem to work, and btw, why don't you use a slot for html in option ? and use a label attr ? It makes code not really readable

[rafaberaldo]

Could you copy paste your code so I can test?

What you mean by html in option? Give more detailed stuff so I can help you better! Also are you using the last Buefy version? You didn't use the issue template...

[darkylmnx]

sorry, i didn't as it wasn't an issue but a feature request.

i'm using latest vue version and latest buefy version

This is what i'd like to acheive :

    <b-dropdown v-model="is_public">
        <button class="button is-flat" type="button" slot="trigger">
            <b-icon icon="globe" v-if="is_public"></b-icon>
            <b-icon icon="users" v-if="!is_public"></b-icon>
            <span v-if="is_public">{{ $t('hit_form.public_title') }}</span>
            <span v-if="!is_public">{{ $t('hit_form.private_title') }}</span>
        </button>

        <b-dropdown-option class="columns" :value="true">
          <div class="column">
            <b-icon icon="globe"></b-icon>
          </div>
          <div class="column">
            <h3>{{ $t('hit_form.public_title') }}</h3>
            <p>{{ $t('hit_form.public_text') }}</p>
          </div>
        </b-dropdown-option>
        <b-dropdown-option class="columns" :value="false">
          <div class="column">
            <b-icon icon="users"></b-icon>
          </div>
          <div class="column">
            <h3>{{ $t('hit_form.private_title') }}</h3>
            <p>{{ $t('hit_form.private_text') }}</p>
          </div>
        </b-dropdown-option>
      </b-dropdown>

but because you do'nt allow html in your b-dropdown-option, i can't do that. Using your label prob will make the code messy, as there's lot of html here + the translation function

[rafaberaldo]

OK, I've understood now what you want. I didn't allow html in slot for security reasons, but I'll figure it out.

Edit: But that is not exactly your original issue right? I'll take a look at that afterwards.

[darkylmnx]

Which security reasons ? Maybe I can help through a PR Le 26 mai 2017 17:14, "Rafael Beraldo" <notifications@github.com> a écrit : OK, I've understood now what you want. I didn't allow html in slot for security reasons, but I'll figure it out. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#74 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABXDtaC02fviFQmg-7EDkwHnGBa-MSUkks5r9uxBgaJpZM4NmvBw> .

[rafaberaldo]

Like receiving the data of the dropdown from a user-generated content.

Actually that doesn't make sense, LMFT.

[rafaberaldo]

Available in next patch:

Code is basically the same you provided:

<b-dropdown v-model="isPublic">
    <button class="button is-primary" type="button" slot="trigger">
        <template v-if="isPublic">
            <b-icon icon="public"></b-icon>
            <span>Public</span>
        </template>
        <template v-else>
            <b-icon icon="people"></b-icon>
            <span>Friends</span>
        </template>
        <b-icon icon="arrow_drop_down"></b-icon>
    </button>

    <b-dropdown-option :value="true">
        <div class="media">
            <b-icon class="media-left" icon="public"></b-icon>
            <div class="media-content">
                <h3>Public</h3>
                <small>Everyone can see</small>
            </div>
        </div>
    </b-dropdown-option>
    <b-dropdown-option :value="false">
        <div class="media">
            <b-icon class="media-left" icon="people"></b-icon>
            <div class="media-content">
                <h3>Friends</h3>
                <small>Only friends can see</small>
            </div>
        </div>
    </b-dropdown-option>
</b-dropdown>

[darkylmnx]

that's nice :)

[smokiebacon]

Great, what I was looking for. However, I can't seem to figure out how to make all the underlying text to show up in a snuggly box. Overflowing texts gets cut off, like so.

In mobile:

Any way to make overflowing text get contained?