{"id":13938018,"url":"https://github.com/javisperez/vuedals","last_synced_at":"2025-07-19T01:32:47.206Z","repository":{"id":17070971,"uuid":"80261438","full_name":"javisperez/vuedals","owner":"javisperez","description":"Vue modals with a single component","archived":false,"fork":false,"pushed_at":"2022-12-07T18:01:30.000Z","size":973,"stargazers_count":108,"open_issues_count":17,"forks_count":42,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-13T19:21:17.855Z","etag":null,"topics":["bus","modals","vue","vuejs","window"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javisperez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-28T02:12:14.000Z","updated_at":"2024-03-04T14:46:06.000Z","dependencies_parsed_at":"2023-01-11T19:30:38.484Z","dependency_job_id":null,"html_url":"https://github.com/javisperez/vuedals","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuedals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuedals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuedals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javisperez%2Fvuedals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javisperez","download_url":"https://codeload.github.com/javisperez/vuedals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bus","modals","vue","vuejs","window"],"created_at":"2024-08-07T23:04:10.439Z","updated_at":"2025-04-07T12:06:46.340Z","avatar_url":"https://github.com/javisperez.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["Libraries \u0026 Plugins","覆盖","UI Components","Overlay"],"readme":"# Vuedals\n\nVueJS (2.x) Plugin for multiple modals windows with a single component instance.\n\n## DEMO\n\n[View demo on jsFiddle](https://jsfiddle.net/ackqudv7/19/)\n\n### What is this?\n\nA plugin to open stocked modals windows, event based, with just one component in your DOM.\n\n### What do you mean with \"just one component\"?\n\ne.g. if you want to have 3 modals, you don't need to add the component 3 times, just one (preferably in the root of your app) and open as many modals as you want by using an Event Bus\n\n## Install\n\nInstall with npm:\n\n```js\nnpm install --save vuedals\n```\n\n## Example\n\n```js\nimport Vue from 'vue';\nimport {default as Vuedals, Component as Vuedal, Bus as VuedalsBus} from 'vuedals';\n\nVue.use(Vuedals);\n\nvar myComp = Vue.extend({\n    template: `\u003cdiv\u003e\n            \u003ch1\u003eHello World!\u003c/h1\u003e\n            \u003cbutton @click=\"showIt()\"\u003eShow me the money\u003c/button\u003e\n        \u003c/div\u003e`,\n\n    methods: {\n        showIt() {\n            VuedalsBus.$emit('new', {\n                name: 'showing-the-money',\n\n                component: {\n                    name: 'the-money',\n\n                    template: `\n                        \u003cdiv\u003e\n                            \u003ch1\u003eTHE MONEY!\u003c/h1\u003e\n                            \u003cp\u003eMoney, money, money, moooneeyyy $ $ $ $\u003c/p\u003e\n                        \u003c/div\u003e\n                    `\n                }\n            });\n        }\n    }\n});\n\nvar vm = new Vue({\n    el: '#app',\n\n    components: {\n        myComp,\n        Vuedal\n    },\n\n    template: `\u003cdiv\u003e\n        \u003cmy-comp\u003e\u003c/my-comp\u003e\n\n        \u003cvuedal\u003e\u003c/vuedal\u003e\n    \u003c/div\u003e`\n});\n```\n\n## Usage\n\n### Opening a new modal window\n\nYou can emit an event in your component:\n\n```js\nthis.$emit('vuedals:new', { option });\n```\n\nor a method:\n\n```js\nthis.$vuedals.new({ options });\n```\n\nor the Vuedals Event Bus:\n\n```js\nimport {Bus as Vuedals} from 'vuedals';\n\n...\n\nmethods: {\n    openNewModal() {\n        Vuedals.$emit('new', { options });\n    }\n}\n```\n\n### Closing a modal\n\nYou can emit an event in your component:\n\n```js\nthis.$emit('vuedals:close'[, data]);\n```\n\na method:\n\n```js\nthis.$vuedals.close([data]);\n```\n\nor the Vuedals Event Bus:\n\n```js\nimport {Bus as Vuedals} from 'vuedals';\n\n...\n\nmethods: {\n    openNewModal() {\n        Vuedals.$emit('close'[, data]);\n    }\n}\n```\n\n#### Closing an especific modal\n\nIf you need to close a specific modal index, you can pass it as an `$index` property of the data.\n\n```js\nthis.$vuedals.close({\n    $index: 3\n})\n```\n\n*$index* can be an integer or a function. In case $index is a function, the additional data and all the vuedals that is currently present is `index(data, this.vuedals)` passed as argument so that you can determine the index of the vudedal to close and return the index of it\n\n```js\nthis.$vuedals.close({\n    $index(data, vuedals) {\n        // this will always close the latest modal\n        return vuedals.length - 1;\n    }\n})\n```\n\n### Events\n\nDepending if you're creating the modal *from the component* or *from the Vuedals Event Bus*, these are the events (component / bus):\n\n##### vuedals:new / new\nOpen a new modal window, with the given options\n\n##### vuedals:close / close\nClose the most recently opened modal window, if data is given, will pass it to the `onClose` option.\n\n#### vuedals:opened / opened\nWhen a modal was open. Returns an object with:\n\n1. The index of the recently opened modal\n2. The options passed to that modal instance\n\n#### vuedals:closed / closed\nWhen a modal was closed. Returns an object with:\n\n1. The index of the closed modal\n2. The options passed to that modal instance\n3. The data given when `close` was called\n\n#### vuedals:destroyed / destroyed\nEmitted when the last modal instance is closed. *i.e. there's not more open modals left*\n\n1. The index of the closed modal\n2. The options passed to that modal instance\n3. The data given when `close` was called\n\n### Options\n\nWhen creating a new modal, you'll need to pass the given options:\n\n#### name\nA reference name of the modal. Use to define the css class of that modal\n\n*Default: null*\n\n#### component\nA Vue component to display inside the modal\n\n#### props\nA props object that will be passed to the component inside the modal.\n\nexample:\n\n```js\nimport {Bus as Vuedals} from 'vuedals';\n\n...\n\nmethods: {\n    openModal() {\n        this.$vuedals.open({\n            name: 'test-component',\n\n            // Pass these props to the component\n            props: {\n                firstname: 'John',\n                lastname: 'Doe'\n            },\n\n            component: {\n                name: 'show-john-doe',\n\n                // Expect these props values\n                props: ['firstname', 'lastname'],\n\n                template: `\n                    \u003cdiv\u003e\n                        Hi {{ firstname }} {{ lastname }}\n                    \u003c/div\u003e\n                `\n            }\n        });\n    }\n}\n```\n\n#### size\nThe size of the modal.\n\nPossible values are:\n- **xs**: 350px width\n- **sm**: 550px width\n- **md**: 650px width\n- **lg**: 850px width\n- **xl**: 1024px width\n\n*Default: md*\n\n#### dismissable\nShould the modal include an \"X\" to be closed?\n\n*Default: true*\n\n#### escapable\nCan this modal be closed by pression the *esc* key?\n\n*Default: false*\n\n#### closeOnBackdrop\nOptionally prevent closing when clicking on backdrop\n\n*Default: true*\n\n#### title\nTitle of the modal window\n\n*Default: ''*\n\n#### header\nAn object that will be used to generate a custom header\n\n*Default: null*\n\n```\nheader: {\n    component: 'header-component',\n    props: {\n        custom: 'Props'\n    }\n}\n```\n\n#### onClose\nCallback function to call when the modal is closed. Any given data is passed as a parameter for that callback. Example:\n\n```js\nthis.$vuedals.open({\n    name: 'test-component',\n\n    // Pass these props to the component\n    props: {\n        firstname: 'John',\n        lastname: 'Doe'\n    },\n\n    component: {\n        name: 'show-john-doe',\n\n        // Pass these props to the component\n        props: ['firstname', 'lastname'],\n\n        template: `\n            \u003cdiv\u003e\n                Hi {{ firstname }} {{ lastname }}\n            \u003c/div\u003e\n        `\n    },\n\n    onClose(data) {\n        console.log('Data received from the vuedal instance': data);\n    }\n});\n```\n\n#### onDismiss\nCallback function to call when the modal is closed.\n\nPlease notice that even `close` and `dismiss` both close the active modal instance (closes the modal) only the `close` event accepts data argument that can be passed to the callback, while `dismiss` just send the modal to close.\n\nThe callback may prevent the modal closing by returning `false`.\n\nExample:\n\n```js\nthis.$vuedals.open({\n    name: 'test-component',\n\n    // Pass these props to the component\n    props: {\n        firstname: 'John',\n        lastname: 'Doe'\n    },\n\n    component: {\n        name: 'show-john-doe',\n\n        // expect these props\n        props: ['firstname', 'lastname'],\n\n        template: `\n            \u003cdiv\u003e\n                Hi {{ firstname }} {{ lastname }}\n            \u003c/div\u003e\n        `\n    },\n\n    onDismiss() {\n        console.log('The user dismissed the modal');\n    }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavisperez%2Fvuedals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavisperez%2Fvuedals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavisperez%2Fvuedals/lists"}