Skip to content

feat(modal): make default slot a scoped slot #3095

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

Closed
wants to merge 1 commit into from
Closed

feat(modal): make default slot a scoped slot #3095

wants to merge 1 commit into from

Conversation

dsanders11
Copy link
Contributor

Description of Pull Request:

This is a minor but useful change to make the default slot (modal body) into a scoped slot. As per the blog post for the Vue 2.6 release, in the future all slots will be scoped slots anyway:

In 3.0, there will no longer be the distinction between scoped vs. non-scoped slots

In this PR the only scoped prop that I exposed was visible, which is whether the modal is visible or not. This is very useful because it makes it so you can easily mount/unmount modal content on visibility. This removes the need to worry about reseting components when a modal is opened again, which can be annoying when composing the content of components, some of which may not have an easy way to reset their state. From the blog post, there's also a small performance improvement using scoped slots, so that comes along for free as well.

Example of how this works with the scoped slot:

<b-modal>
  <template slot-scope="{ visible }">
    <MyComponent v-if="visible" />
  </template>
</b-modal>

This ensures MyComponent is unmounted and mounted any time the modal is shown, resulting in fresh state, which is my desired outcome.

PR checklist:

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Enhancement to an existing feature
  • ARIA accessibility
  • Documentation update
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact:

The PR fulfills these requirements:

  • It's submitted to the dev branch, not the master branch
  • When resolving a specific issue, it's referenced in the PR's title (i.e.
    fixes #xxxx[,#xxxx], where "xxxx" is the issue number)
  • The PR should address only one issue or feature. If adding multiple features or fixing a bug
    and adding a new feature, break them into separate PRs if at all possible.
  • PR titles should following the
    Conventional Commits naming convention (i.e.
    "fix(alert): not alerting during SSR render", "docs(badge): Updated pill examples, fix typos",
    "chore: fix typo in docs", etc). This is very important, as the CHANGELOG is generated
    from these messages.

If new features/enhancement/fixes are added or changed:

  • Includes documentation updates (including updating the component's package.json for slot and
    event changes)
  • New/updated tests are included and passing (if required)
  • Existing test suites are passing
  • The changes have not impacted the functionality of other components or directives
  • ARIA Accessibility has been taken into consideration (does it affect screen reader users or
    keyboard only users? clickable items should be in the tab index, etc)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a
    suggestion issue first and wait for approval before working on it)

@tmorehouse
Copy link
Member

thanks for the PR, but this is already happening in PR #3056

@tmorehouse
Copy link
Member

tmorehouse commented Apr 14, 2019

If people are using an older version of Vue, this will fail as the default slot may not be available as a scoped slot. We have a mixin that will pick either the scoped or un-scoped version of a named slot (depending on what is available, checking for the scoped slot first), making it compatible with Vue 2.5.x as well as Vue 2.6.x and above.

@tmorehouse
Copy link
Member

I've just added the visible scope variable to PR #3056 (which only exposed modal control methods originally).

So closing this in favour of PR #3056

@tmorehouse tmorehouse closed this Apr 14, 2019
@tmorehouse
Copy link
Member

You can take a peek at the other PR live at https://deploy-preview-3056--bootstrap-vue.netlify.com/docs/components/modal/

@dsanders11
Copy link
Contributor Author

@tmorehouse, sounds good. I only looked under issues before opening so I didn't see that there was already a PR addressing this need. Looking forward to that PR being merged. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants