Skip to content

vs actions as (scoped) slots #685

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

Open
renatodeleao opened this issue Oct 18, 2018 · 1 comment
Open

vs actions as (scoped) slots #685

renatodeleao opened this issue Oct 18, 2018 · 1 comment
Assignees
Milestone

Comments

@renatodeleao
Copy link

Howdy, thanks for the time and effort to make this :) I (gladly) heard about the renderless mode planned for v3 💥 but while that doesn't come out, what do you think about passing elements to actions (clear and toggle icon) as slots?

At the moment we rely on .clear selector (with high specificity) to style the button and on css trickery to "design" the Chevron toggle. At some cases would be nice to pass custom elements/components such as buttons or icons (svg). I've did some playing at my fork and this might be simple to implement.

Let me know if still interesting for the current release, it would look something like this:

 <v-select placeholder="default" :options="options" :showClearButton="true">
   <MyButton
    slot="clear-button"
    slot-scope="{showClearButton, clearSelection}"
    @click="clearSelection"
    v-if="showClearButton"
  >clear</MyButton>

 <MyOwnChevronSvgIcon slot="open-indicator" data-vs-toggle />
</v-select>

Note the data-vs-toggle selector, since (as far as i my vue knowledge goes) we can't pass refs through slot scope.

<!-- source -->
...
<div class="vs__actions">
  <slot
    name="clear-button"
    :showClearButton="showClearButton"
    :clearSelection="clearSelection"
    :disabled="disabled"
  >
    <button
      v-show="showClearButton"
      :disabled="disabled"
      @click="clearSelection"
      type="button"
      class="clear"
      title="Clear selection"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </slot>

  <span
    v-if="!noDrop"
    ref="openIndicator"
    role="presentation"
    :class="{'open-indicator': !$slots['open-indicator'] || $slots['open-indicator'] === ''}"
  >
    <slot name="open-indicator" />
  </span>
</div>
 ...
/**
* Toggle the visibility of the dropdown menu.
* @param  {Event} e
* @return {void}
*/
toggleDropdown(e) {
  if (... || e.target.hasAttribute("data-vs-toggle") {
    
@alvarosabu
Copy link

I'm also very interesting in having more slots like for the actions and also for the vs__selected-options to show the selected value in a different way (Maybe icons, images etc)

@sagalbot sagalbot added this to the v3.0 milestone Feb 11, 2019
@sagalbot sagalbot self-assigned this Feb 11, 2019
@sagalbot sagalbot modified the milestones: v3.0, v3.3 Nov 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants