Feature: Expose the CClickOutside component

[dombavetta]

Is your feature request related to a problem? Please describe.
The ClickOutside component used by others components such as Menu provides value when composing custom components. For example, I had to implement an autocomplete component with a results menu that dropped down and needed to utilize the click outside feature to close that menu when the user clicked away. As mentioned before, we have this available internally, I however had to write my own because it was not exposed.

Describe the solution you'd like
Simply expose the ClickOutside component to be used by the public.

Describe alternatives you've considered
This is currently implemented as a component that wraps other elements. I have implemented this in the past as a directive, this approach keeps the template a little cleaner by removing one level from the component hierarchy. I think offering both implementations would be beneficial. I can provide guidance or an example of a directive if needed.

[codebender828]

Hey @dombavetta thank you for opening this issue contribution. this is actually something I've been contemplating for a while now.

I used the CClickOutside component internally to build the menu components and some pop over components. it works well however I found it in the case where I needed to expose a list of elements inside the element I would like to watch it would break because it function as a renderless component that required only one child.

Furthermore the CClickOutside component was quite verbose in the template markup for a very simple task. So I decided to instead use a directive to achieve the same result but also keep the markup concise.

Personally, I would like to actually get rid of the CClickOutside component in preference for the v-click-outside directive because of the advantages that it comes with. I like the idea of exposing it to the user. 👍🏽 I was initially unsure about whether users would need something like this but now it seems more likely.

Do you have any thoughts about whether or not to keep the CClickOutside component and use the directive instead?

[dombavetta]

I didn't realize you already had a directive in there. Since that already exists I don't see a need to support both variants. Personally I would always opt to use a directive over the component.

Here's a thought though.. I haven't looked into how the chakra webpack loader works, would it be able to resolve directive usage and auto import the directive? If not then I see a small benefit by maintaining the component variant as it could be auto imported. Even then I don't imagine either of these would be heavily used though so I'm not sure the cost/value of maintaining both is worth it.

[codebender828]

To augment this thought, for the next version of Chakra UI Vue, we shall be exposing a useClickOutside hook to the user. We'll also register it as a global directive in the Vue application so users can enjoy this.