UiModal, which event is emitted when close button or outside is clicked?

[EmilMoe]

In version 1.0.1: Which is the event that is fired when the close is triggered for an UiModal? It seems that these 2 have the same purpose (by reading the docs):

close
Emitted when the modal is hidden (i.e. when the close transition completes).Listen for it using @close.

hide
Emitted when the modal close transition completes.Listen for it using @hide.

In version 0.8.9 I think I used @close

[JosephusPaye]

Hi @EmilMoe,

close is emitted when the modal starts to close (e.g. when the isOpen is set to false). hide is emitted when the close transition ends and the modal is hidden.

The documentation is wrong here and will be fixed. Thanks for reporting.

[EmilMoe]

I think I misunderstand it still. Can I use @close to call a method that will change from true to false, which v-show is bound to? Because it seems to not working.

[EmilMoe]

Look at this code, when I click outside the modal or on the 'x' it doesn't disappear. Shouldn't it be a clear close?

        <ui-modal
                v-show="show"
                @close="show = false"
                @hide="show = false">
        </ui-modal>

[JosephusPaye]

Hi @EmilMoe,

Currently, the way the modal is opened/closed is by adding a ref to the modal and then calling the open() method on it.

It doesn't use v-show. The hide/close events are used for doing something after the modal is opened or closed.

Here's an example:

<div id="app">
    <ui-modal ref="exampleModal" title="Example Modal">Some text here.</ui-modal>
    <ui-button color="primary" @click="openModal">Open Modal</ui-button>
</div>

new Vue({
    el: '#app',
    methods: {
        openModal() {
            this.$refs.exampleModal.open();
        }
    }
});

See here for a working demo: https://codepen.io/JosephusPaye/pen/OxgrBZ?editors=1010

[JosephusPaye]

Will be switching to a v-if/v-show or v-model based control for v2.

[JosephusPaye]

Updated docs to explain difference between open/reveal and hide/hidden in https://github.com/JosephusPaye/Keen-UI/commit/10b27ac968f8cc0912abb36c5c710db7229d4e5d