v-bottom-sheet has no events?

[rmirabelle]

Documentation for v-bottom-sheet shows no available events.

As such, it's unclear how to programmatically dismiss a bottom sheet when clicked outside. Surely, the v-model @input event isn't being thwarted to capture clicking outside the bottom sheet. If so, that's an absolutely horrifying API choice, as @input describes nearly the exact opposite of the behavior we're capturing (clicking outside).

v-menu and v-dialog support @click:outside, but v-bottom-sheet doesn't? Are all bottom sheets modal/undismissable by design? If so, I would argue they definitely shouldn't be. Clicking outside a bottom sheet should behave identically to clicking outside a menu or dialog.

To summarize:

1. How do you programmatically dismiss a v-bottom-sheet when clicked outside?
2. Can we expect to see v-bottom-sheet support @click:outside, like v-menu and v-dialog?

[close-issue-app[bot]]

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. For general questions, please join the Discord chat room. You can also check reddit or stackoverflow. Thank you.

[KaelWD]

v-menu and v-dialog support @click:outside

You shouldn't use that to detect if it's been closed though, they can be closed with the escape key too. VBottomSheet is literally just a dialog with some extra css, so it should support all the same events.

If so, that's an absolutely horrifying API choice

Older versions of Vue didn't have ComponentOptions.model, so if you wanted to use v-model on a component it had to use :value and @input

[rmirabelle]

Oh! I saw that the initial description of v-bottom-sheet says it's a modified v-dialog, but had no idea that was to be taken literally.

Since v-bottom-sheet IS a v-dialog, then it too, has events. I think it would be helpful to either see those events listed in its API, or at least have the events tab just contain a link to the 'parent' v-dialog API events tab. Alternatively, a clear indicator in the API section that v-bottom-sheet inherits v-dialog would be helpful.

Thanks for your help on this.

I've groaned previously about v-model support, but it bears repeating. Supporting or using v-model on non-input-based components (like dialogs and bottom sheets) should be considered a serious anti-pattern, as the event names (input and value) make reasoning about the behavior of non-input-based components extremely difficult, forcing developers to ask such nonsensical questions as:

• What's the value of this dialog? (What? Dialogs don't have values!)
• How should I handle when the user inputs a new value into this bottom sheet? (Huh? Bottom sheets don't receive input!)