feat(NcModal): Allow to configure if the modal is closed when clicked outside

[susnux]

☑️ Resolves

Currently the modal is closed if canClose is true and the user clicked outside the modal on the backdrop. This can now be configured with the closeOnClickOutside property (defaults to true for backwards compatibility).

This is especially helpful for implementing the dialogs.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[marcoambrosini]

Great addition :)

Code looks good but I'm testing this in the docs and adding close-on-click-outside="false" doesn't work. Am I missing something?

[susnux]

Great addition :)

Code looks good but I'm testing this in the docs and adding close-on-click-outside="false" doesn't work. Am I missing something?

No :close-on-click-outside="false" should be enough:
See here, clicking close always work, clicking outside only works in the first example.

voko.mp4

[ShGKme]

In a standard form of passing props Vue enforces HTML standard aka:

<input /> <!-- enabled-->
<input disabled /> <!-- disabled -->

But boolean props with default true requires to always use longhand form over HTML Standard:

<NcModal /> <!-- closes on click -->
<NcModal close-on-click-outside /> <!-- also closes on click, passing bool prop does nothing -->
<NcModal :close-on-click-outside="false" /> <!-- changes behavior, doesn't close on click -->
<NcModal close-on-click-outside="false" /> <!-- casts string "false" to true and closes on click -->

because of that it is usually recommended to make bool props with false default value:

<!-- With default false boolean prop -->
<NcModal /> <!-- closes on click -->
<NcModal ignore-click-outside /> <!-- changes behavior, doesn't close on click -->

• https://eslint.vuejs.org/rules/prefer-true-attribute-shorthand.html
• https://eslint.vuejs.org/rules/no-boolean-default.html

[susnux]

Thank you :)
I know but did not wanted to make this a breaking change by changing the default behavior and a negated property seems to be confusing.
Maybe we can risk another breaking change?