An example.
\r\n\r\n\r\n\r\n```\r\n\r\n```js\r\n// Second method: Anywhere\r\nexport default {\r\n methods: {\r\n open() {\r\n this.$x5.openModal('example', null, { title: 'Example Modal' })\r\n },\r\n },\r\n}\r\n```\r\n\r\n| Option | Type | Default | Description |\r\n| :---------- | :------: | :--------: | :---------------------------------------------------------------- |\r\n| buttons | String | 'OK' | Buttons to show (`ok`, `okcancel`, `cancel`) |\r\n| cancelText | String | Cancel | Cancel button label |\r\n| cancelValue | Any | `false` | Promise return value on cancel |\r\n| keepOpen | Boolean | `false` | Stops the modal closing on OK or Cancel (requires manual closing) |\r\n| name | String | -- | **Required** Unique name for this modal |\r\n| noPadding | Boolean | -- | Sets content padding to zero |\r\n| okText | String | OK | OK button label |\r\n| okValue | Any | `true` | Promise return value on OK |\r\n| onCancel | Function | `() => {}` | Function to be called when the cancel button is pressed \\* |\r\n| onClose | Function | `() => {}` | Function to be called when the modal is closed \\* |\r\n| onOK | Function | `() => {}` | Function to be called when the ok button is pressed \\* |\r\n| permanent | Boolean | `false` | Only allow closing the window via provided buttons |\r\n| title | String | null | Modal header title (leave empty for no header) |\r\n| valid | Boolean | `true` | OK (submit button) is enabled |\r\n| width | Number | `500` | Maximum window width |\r\n\r\n_\\* If these methods return `false` it will interrupt the closing process. This is helpful when there are async functions that may have a result that is relevant to the open modal._\r\n\r\n## Additional Features / Notes\r\n\r\n- If only using a cancel button, the `cancelText` will default to \"Close\" rather than \"Cancel\"\r\n- Using `$x5.openModal` returns a promise and is resolved with the customizable `okValue` or `cancelValue` props\r\n- `$x5.closeModal()` [without a name] will close the active modal\r\n- `$x5.closeModals()` will close all open modals without the `keepOpen` flag\r\n- If using **vue-router**, changing the route will close each open modal without the `keepOpen` flag\r\n\r\n### Included Dialog Modals\r\n\r\nTo help with style consistency, `alert`, `confirm`, and `prompt` dialog modals have been included.\r\n\r\n_They are very simple modals and are not meant to enhance the browser's in-built functions - just make similarly styled modal versions of them._\r\n\r\n- `Alert` dialog called via `$x5.alert('Text', 'Title')`.\r\n- `Confirm` dialog called via `$x5.confirm('Text', 'Title')` and returns `true` (Yes) or `false` (No).\r\n- `Prompt` dialog called via `$x5.prompt('Text', 'Title')` and returns the value entered (OK) or `false` (Cancel).\r\n\r\n### Data Prop\r\n\r\nData can be passed to your modal when it is opened using the second parameter in the `x5.openModal(name, data, options)` method.\r\n\r\nAnything set there will be accessible to your modal component via the prop `data`. This is not restricted to any type and can be anything.\r\n\r\n```js\r\n// Anywhere\r\nexport default {\r\n methods: {\r\n open() {\r\n this.$x5.openModal('example', 'Example data')\r\n },\r\n },\r\n}\r\n```\r\n\r\n```html\r\n\r\n{{ data }}
\r\n\r\n\r\n\r\n```\r\n\r\n### Edit an open Modal\r\n\r\nSimilarly to the `setModal` event, you can also edit the options of an open modal using either `$emit('editModal', options)` from within the modal component, or from somewhere else using the 3rd parameter of the method `$x5.editModal(modalName, data, options)`.\r\n\r\nNote: You can also change the data prop using `$x5.editModal(modalName, data, options)`.\r\n\r\n```html\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n```js\r\n// Anywhere\r\nexport default {\r\n methods: {\r\n loading() {\r\n this.$x5.editModal('example', { title: 'Edited Title' })\r\n },\r\n },\r\n}\r\n```\r\n\r\n