├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── README.md
├── demos
    └── vue3
    │   ├── App.vue
    │   ├── components
    │       ├── Alert.vue
    │       ├── EditableTable.vue
    │       ├── Loader.vue
    │       ├── LoginModal.vue
    │       ├── PopupEdit.vue
    │       └── SimpleModal.vue
    │   ├── composables
    │       ├── useAlertMessage.ts
    │       └── useLoader.ts
    │   ├── examples
    │       ├── AlertExample.vue
    │       ├── BasicExample.vue
    │       ├── IntroductionPart.vue
    │       ├── LoaderExample.vue
    │       ├── PropsBehavior.vue
    │       └── TableExample.vue
    │   ├── main.ts
    │   └── shims-vue.d.ts
├── index.html
├── jest.config.js
├── package.json
├── pnpm-lock.yaml
├── src
    ├── DialogsWrapper.ts
    ├── createConfirmDialog.ts
    ├── index.ts
    ├── shims-vue.d.ts
    └── useDialogWrapper.ts
├── tests
    ├── components
    │   └── DialogComp.ts
    ├── unit
    │   └── test.spec.ts
    └── utils
    │   └── index.ts
├── tsconfig.json
└── vite.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     es2021: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended',
10 |     '@vue/prettier',
11 |     '@vue/prettier/@typescript-eslint',
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020,
15 |   },
16 |   rules: {
17 |     indent: ['error', 2],
18 |     'no-unused-vars': 'off',
19 |     '@typescript-eslint/no-unused-vars': 'off',
20 |     'no-console': 'off',
21 |     'no-debugger': 'off',
22 |   },
23 |   overrides: [
24 |     {
25 |       files: [
26 |         '**/__tests__/*.{j,t}s?(x)',
27 |         '**/tests/unit/**/*.spec.{j,t}s?(x)',
28 |       ],
29 |       env: {
30 |         jest: true,
31 |       },
32 |     },
33 |   ],
34 | }
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | pnpm-lock.yaml
 5 | 
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "intend": 2,
4 |   "semi": false,
5 |   "singleQuote": true,
6 |   "useTabs": false,
7 |   "endOfLine": "auto"
8 | }
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Roman Harmyder
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vuejs-confirm-dialog
  2 | 
  3 | Convert your dialogs to async functions and use them all over your project!
  4 | 
  5 | This plugin just makes it simple to create, reuse, promisify and build chains of modal dialogs in Vue.js. It provides just one function `createConfirmDialog` that does all the hard work for you.
  6 | 
  7 | > New documentation is ready! Try a new [site](https://vcd-docs.netlify.app) that contains all the docs of the project!
  8 | > [vcd-docs.netlify.app](https://vcd-docs.netlify.app)
  9 | 
 10 | ## About
 11 | 
 12 | How does it work? The idea is simple, this function -- `createConfirmDialog` gets a modal component and magically provides to it emits `confirm` and `cancel` and its props values. This function returns to you a dialog instance that controls the rendering of the modal component and reacts to user decisions. It reduces you to write all the boilerplate code over and over again and makes it simple to reuse your modals everywhere in your project.
 13 | 
 14 | You can work with dialogs like with promises or with hooks that the dialog instance generates for you.
 15 | 
 16 | ## Installation
 17 | 
 18 | in 3 steps
 19 | 
 20 | ### Step 0
 21 | 
 22 | Add the plugin to your `node_modules`
 23 | 
 24 | ```bash
 25 | npm i vuejs-confirm-dialog
 26 | ```
 27 | 
 28 | ### Step 1 (optional)
 29 | 
 30 | Install the plugin:
 31 | 
 32 | ```js
 33 | // main.js
 34 | import { createApp } from 'vue'
 35 | import App from './App.vue'
 36 | import * as ConfirmDialog from 'vuejs-confirm-dialog'
 37 | 
 38 | createApp(App).use(ConfirmDialog).mount('#app')
 39 | ```
 40 | 
 41 | ### Step 2
 42 | 
 43 | Add `DialogsWrapper` to `App.vue` template:
 44 | 
 45 | ```html
 46 | <!-- App.vue -->
 47 | <template>
 48 |   <div class="app">
 49 |   </div>
 50 | 
 51 |   <!-- put it in the template of your App.vue file to make dialogs work -->
 52 |   <!-- Don't need import the component, if you installed the plugin -->
 53 |   <DialogsWrapper />
 54 | </template>
 55 | 
 56 | <script setup>
 57 | // import wrapper manually, if you skiped step 1  
 58 | import { DialogsWrapper } from 'vuejs-confirm-dialog'
 59 | 
 60 | </script>
 61 | ```
 62 | 
 63 | 
 64 | And that's it. Now you can use it.
 65 | 
 66 | ## Usage
 67 | 
 68 | Build Modal Window. It must contain emits `confirm` and `cancel`. ~~It also must contain~~ ~~prop `show`~~. ~~Put `v-if="show"` in its template for conditional rendering~~(no longer need to).
 69 | 
 70 | ```html
 71 | <!-- ModalDialog.vue -->
 72 | <script setup>
 73 |   const emit = defineEmits(['confirm', 'cancel'])
 74 | </script>
 75 | 
 76 | <template>
 77 |   <div>
 78 |     <!-- The modal component body -->
 79 |     <button @click="emit('confirm')">Confirm</button>
 80 |     <button @click="emit('cancel')">Cancel</button>
 81 |   </div>
 82 | </template>
 83 | ```
 84 | 
 85 | Use this modal window wherever you want in your project:
 86 | 
 87 | ```html
 88 | <!-- App.vue -->
 89 | <script setup>
 90 | import ModalDialog from './ModalDialog.vue'
 91 | import { createConfirmDialog } from 'vuejs-confirm-dialog'
 92 | 
 93 | const { reveal, onConfirm, onCancel } = createConfirmDialog(ModalDialog)
 94 | 
 95 | reveal()
 96 | 
 97 | onConfirm(() => {
 98 |   console.log('Confirmed!')
 99 | })
100 | onCancel(() => {
101 |   console.log('Canceled!')
102 | })
103 | </script>
104 | ```
105 | 
106 | ### Two ways of usage
107 | 
108 | The plugin lets you decide how to use it. The first way is to use hooks:
109 | 
110 | - `onConfirm` - hook gets a callback that runs after the user confirmed the modal message
111 | - `onCancel` - run callback if the user decides to click cancel
112 | 
113 | The second way is promisify modal dialog. `reveal` the function returns a Promise, that resolves data and `isCanceled` boolean from the dialog after the user commits the action.
114 | 
115 | for example(not real):
116 | 
117 | ```html
118 | <script setup>
119 | import ModalDialog from './ModalDialog.vue'
120 | import { createConfirmDialog } from 'vuejs-confirm-dialog'
121 | 
122 | const dialog = createConfirmDialog(ModalDialog)
123 | 
124 | const confirmDelete = async () => {
125 |   const { data, isCanceled } = await dialog.reveal()
126 | 
127 |   if(isCanceled) return
128 |   
129 |   deleteYourData(data)
130 | }
131 | </script>
132 | ```
133 | 
134 | ## Passing data to/from the dialog
135 | 
136 | It will be not so useful if we will not have the option to pass data to and from а component.
137 | There are several ways to deal with it. First of all, you can pass data to the second argument of the `createConfirmDialog` function. Data must be an object with names of properties matching to props of the component you use as dialog. For example, if a component has a prop with the name `title` we have to pass this `{ title: 'Some Title' }`. So these will be the initial props that the dialog component will receive.
138 | 
139 | You can change props values during the calling `reveal` function by passing to its object with props data. So you can call the `reveal` function several times with different props. This is an excellent way to reuse the same dialog in different situations.
140 | 
141 | And finally, you can pass data to emit functions inside your modal dialog component: `confirm` and `cancel`. Hooks `onConfirm` and `onCancel` will receive this data. Also, it will be passed by Promise, so you can use the async/await syntax if you prefer.
142 | 
143 | The full example, that displays passing data, reusing, and modal chains:
144 | 
145 | ```html
146 | <script setup>
147 | import LoginDialog from './LoginDialog.vue'
148 | import InfoModal from './InfoModal.vue'
149 | import { createConfirmDialog } from 'vuejs-confirm-dialog'
150 | import { ref } from 'vue'
151 | 
152 | const loginDialog = createConfirmDialog(LoginDialog)
153 | const infoModal = createConfirmDialog(InfoModal, { title: 'Some Title' })
154 | 
155 | const user = ref(null)
156 | 
157 | const login = async () => {
158 |   const result = await infoModal.reveal({ title: 'Please log in to the system' })
159 | 
160 |   if(!result.isCanceled) {
161 |     const { data, isCanceled } = await loginDialog.reveal()
162 |     if(!isCanceled) {
163 |       user.value = data
164 | 
165 |       infoModal.reveal({ title: 'You have successfully logged in.' })
166 |     } else {
167 |       infoModal.reveal({ title: 'You were unable to log in and will not be able to access your data.' })
168 |     }
169 |   }
170 | }
171 | </script>
172 | ```
173 | 
174 | ## Props Behavior Options
175 | 
176 | Unfortunately, the way of passing props is not so clear to the developers. The problem occurs when you try to reuse a dialog instance already created with `createConfirmDialog`. See also the [issue](https://github.com/harmyderoman/vuejs-confirm-dialog/issues/21).
177 | 
178 | Let's consider this process step by step. Props values ​​are assigned three times, the first time is default props values, in the component, this plugin does not show up on them in any way. The second time occurs on creating an instance of the dialog, let's define these values ​​as initial props. The third time passing values ​​is possible when the user prompts the dialog using the `reveal` method. If you don't set the props behavior options, then each time you pass values, this data will be saved.
179 | 
180 | For example, if you have an alert component and you called it with the message "Authorization failed!", then next time if you don't pass a new message value, it will show this message again.
181 | 
182 | Perhaps it will be convenient if every time after closing the dialog, the values ​​of the props will be reset to the initial or even default values. For this functionality, props transfer settings have been added.
183 | 
184 | There are only two options:
185 | 
186 | - `chore` - if `true` will tell to function reset values after closing dialog
187 | - `keepInitial` - if `true` reset props values to initial values, otherwise to default values of the component
188 | 
189 | The simplest example:
190 | 
191 | ```javascript
192 |   const dialog = createConfirmDialog(
193 |     ModalComponent,
194 |     { message: 'Some message...' }, // Initial props values
195 |     { chore: true, keepInitial: true }
196 |   )
197 | ```
198 | ## Using inside Options API
199 | 
200 | If you prefer you can use it with Options API inside methods.
201 | 
202 | ```javascript
203 | import Dialog from './Dialog.vue'
204 | import { createConfirmDialog } from 'vuejs-confirm-dialog'
205 | 
206 | export default {
207 |   data(){
208 |     return {
209 |       isConfirmed: false
210 |     }
211 |   },
212 |   methods: {
213 |     showDialog(){
214 |       const dialog = createConfirmDialog(Dialog)
215 | 
216 |       dialog.onConfirm(() => {
217 |         this.isConfirmed = true
218 |       })
219 | 
220 |       dialog.reveal()
221 |     }
222 |   }
223 | }
224 | ```
225 | 
226 | For more info check this full Vue 3 [example](https://github.com/harmyderoman/vuejs-confirm-dialog/blob/main/demos/vue3).
227 | 
228 | ## Close dialogs programmable
229 | 
230 | Sometimes you need to close dialogs and don't want to wait for the user's action. For these purposes, dialog instance provides method `close`.
231 | 
232 | ```javascript
233 | import Alert from './Alert.vue'
234 | import { createConfirmDialog } from 'vuejs-confirm-dialog'
235 | 
236 | const dialog = createConfirmDialog(Alert)
237 | 
238 | dialog.reveal()
239 | 
240 | setTimeout(() => {
241 |   dialog.close()
242 | }, 3000)
243 | ```
244 | 
245 | It also doesn't trigger any hooks.
246 | 
247 | If you need to close all dialog just call `dialog.closeAll()`.
248 | 
249 | 
250 | ## Demo
251 | 
252 | Clone the project, install dependencies and run the following command to see the demo:
253 | 
254 | ```bash
255 | pnpm run demo
256 | ```
257 | 
258 | The demo is styled by beautiful [daisyUI](https://daisyui.com/).
259 | 
260 | ## Roadmap
261 | 
262 | *   [x] Make it work!
263 | 
264 | *   [x] Make it work without `show` a prop
265 | 
266 | *   [x] TSDoc
267 | 
268 | *   [x] Change testing tools to Vitest
269 | 
270 | *   [x] Improve tests
271 | 
272 | *   [x] Improve docs( reuse, passing props ...)
273 | 
274 | *   [x] More examples
275 | 
276 | ## Thanks
277 | 
278 | Inspired by [`Vueuse`](https://github.com/vueuse/vueuse) and [`vue-modal-dialogs`](https://github.com/hjkcai/vue-modal-dialogs). Thanks to all creators of these projects ❤️!
279 | 
280 | Keep calm and support :ukraine:!
281 | 


--------------------------------------------------------------------------------
/demos/vue3/App.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import IntroductionPart from './examples/IntroductionPart.vue'
  3 | import BasicExample from './examples/BasicExample.vue'
  4 | import LoaderExample from './examples/LoaderExample.vue'
  5 | import TableExample from './examples/TableExample.vue'
  6 | import AlertExample from './examples/AlertExample.vue'
  7 | import PropsBehavior from './examples/PropsBehavior.vue'
  8 | 
  9 | </script>
 10 | 
 11 | <template>
 12 |   <article class="main-container">
 13 |     <IntroductionPart />
 14 |     <BasicExample />
 15 |     <AlertExample />
 16 |     <LoaderExample />
 17 |     <TableExample />
 18 |     <PropsBehavior />
 19 |   </article>
 20 | 
 21 |   <!-- put it in the template of your App.vue file to make this library work -->
 22 |   <div class="alerts-container">
 23 |     <DialogsWrapper />
 24 |   </div>
 25 | </template>
 26 | 
 27 | <style>
 28 | @import 'https://cdn.jsdelivr.net/npm/daisyui@1.19.0/dist/full.css';
 29 | @import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css';
 30 | 
 31 | .alerts-container {
 32 |   position: fixed;
 33 |   display: flex;
 34 |   flex-direction: column;
 35 |   gap: 5px;
 36 |   top: 20px;
 37 |   right: 40px;
 38 |   width: 380px;
 39 | }
 40 | .main-container {
 41 |   padding: 15px 30px;
 42 |   max-width: 800px;
 43 |   margin: 0 auto;
 44 |   width: 100%;
 45 |   background-color: white;
 46 |   box-shadow: #f2f2f2;
 47 | }
 48 | h1, h2 {
 49 |   text-align: center;
 50 | }
 51 | 
 52 | body {
 53 |   background-color: #f2f2f2;
 54 |   height: 100%;
 55 |   font-size: 16px;
 56 | }
 57 | .article-title {
 58 |   font-size: 36px;
 59 |   text-transform: capitalize;
 60 |   font-weight: 500;
 61 |   margin: 15px 0px;
 62 | }
 63 | .card {
 64 |   border: 2px solid #f0f0f0;
 65 | }
 66 | .code-card {
 67 |   background-color: #2f2f2f;
 68 |   color: #80cbc4;
 69 | }
 70 | .html-code {
 71 |   background: none; 
 72 |   border: none; 
 73 |   resize: none; 
 74 |   outline: none; 
 75 |   width: 100%;
 76 |   overflow: hidden;
 77 | }
 78 | .widget {
 79 |     display: inline-block;
 80 |     overflow: hidden;
 81 |     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
 82 |     font-size: 0;
 83 |     line-height: 0;
 84 |     white-space: nowrap;
 85 | }
 86 | .inline-code {
 87 |   background-color: #e3e2e2;
 88 |   border-radius: 5px;
 89 |   padding: 3px 5px;
 90 | }
 91 | .input {
 92 |   font-size: 18px!important;
 93 | }
 94 | .divider {
 95 |   margin-bottom: 100px;
 96 |   margin-top: 40px;
 97 | }
 98 | .divider:after, .divider:before {
 99 |     background-color: #bbbbbb;
100 | }
101 | 
102 | .warning-block {
103 |   box-sizing: border-box;
104 |   border: 1px solid #ffc517;
105 |   margin: 28px 0;
106 |     padding: 20px 24px 25px 42px;
107 |     border-radius: 8px;
108 |     overflow-x: auto;
109 |     transition: color .5s,background-color .5s;
110 |     position: relative;
111 |     font-size: 14px;
112 |     line-height: 1.6;
113 |     font-weight: 500;
114 |     color: #0000008c;
115 |     background-color: #f9f9f9;
116 | }
117 | .warning-block:before {
118 |   content: "\26a0";
119 |     font-size: 17px;
120 |     top: 19px;
121 |     left: 16ppx;
122 | }
123 | 
124 | .warning-block_title {
125 |   display: inline-block;
126 |   margin-bottom: 8px;
127 |     font-size: 15px;
128 |     font-weight: 500;
129 |     color: var(--vt-c-text-1);
130 |     transition: color .5s;
131 | }
132 | 
133 | .label-text {
134 |   font-size: 1rem;
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/demos/vue3/components/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="alert shadow-lg alert-error">
 3 |     <div>
 4 |       <svg
 5 |         xmlns="http://www.w3.org/2000/svg"
 6 |         class="stroke-current flex-shrink-0 h-6 w-6 mr-2"
 7 |         fill="none"
 8 |         viewBox="0 0 24 24"
 9 |       >
10 |         <path
11 |           stroke-linecap="round"
12 |           stroke-linejoin="round"
13 |           stroke-width="2"
14 |           d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
15 |         />
16 |       </svg>
17 |       <span> {{ message }}</span>
18 |     </div>
19 |     <div>
20 |       <span class="close-btn" @click="emit('cancel')">&times;</span>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script setup>
26 | import { useDebounceFn } from '@vueuse/core'
27 | 
28 | defineProps({
29 |   message: {
30 |     type: String,
31 |     default: 'Error! Task failed successfully.',
32 |   },
33 | })
34 | 
35 | const emit = defineEmits(['cancel'])
36 | 
37 | // Remove alert after 2 sec
38 | const hideAlert = useDebounceFn(() => {
39 |   emit('cancel')
40 | }, 3000)
41 | hideAlert()
42 | </script>
43 | 
44 | <style>
45 | .close-btn {
46 |   margin-left: 15px;
47 |   font-weight: bold;
48 |   float: right;
49 |   font-size: 22px;
50 |   line-height: 20px;
51 |   cursor: pointer;
52 |   transition: 0.3s;
53 | }
54 | </style>
55 | 
56 | 


--------------------------------------------------------------------------------
/demos/vue3/components/EditableTable.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import PopupEdit from './PopupEdit.vue'
 4 | import { createConfirmDialog } from './../../../src/index'
 5 | 
 6 | const editValue = (
 7 |     val: string | number,
 8 |     rowId: string | number,
 9 |     key: string | number,
10 |     event: any
11 |   ) => {
12 | 
13 |   const popup = createConfirmDialog(PopupEdit)
14 |   popup.reveal({ value: val, event: event })
15 | 
16 |   popup.onConfirm((data) => {
17 |     table.value[rowId][key] = data
18 |   })
19 | }
20 | 
21 | const tableHead = ref({
22 |   id: '\\',
23 |   name: 'Name',
24 |   job: 'Job',
25 |   color: 'Favorite Color',
26 | })
27 | 
28 | const table = ref([
29 |   {
30 |     id: 1,
31 |     name: 'Cy Ganderton',
32 |     job: 'Quality Control Specialist',
33 |     color: 'Blue',
34 |   },
35 |   {
36 |     id: 2,
37 |     name: 'Hart Hagerty',
38 |     job: 'Desktop Support Technician',
39 |     color: 'Purple',
40 |   },
41 |   {
42 |     id: 3,
43 |     name: 'Brice Swyre',
44 |     job: 'Tax Accountant',
45 |     color: 'Red',
46 |   },
47 | ])
48 | </script>
49 | 
50 | <template>
51 |   <div class="overflow-x-auto">
52 |     <table class="table w-full">
53 |       <thead>
54 |         <tr>
55 |           <th v-for="(col, i) in tableHead" :key="i">{{ col }}</th>
56 |         </tr>
57 |       </thead>
58 |       <tbody>
59 |         <tr v-for="(row, i) in table" :key="i">
60 |           <th
61 |             v-for="(item, key, index) in row"
62 |             class="editable"
63 |             @click="(event) => editValue(item, i, key, event)"
64 |             :key="index"
65 |           >
66 |             {{ item }}
67 |           </th>
68 |         </tr>
69 |       </tbody>
70 |     </table>
71 |   </div>
72 | </template>
73 | 
74 | <style>
75 | .editable {
76 |   cursor: pointer;
77 | }
78 | .table th:first-child {
79 |   z-index: 0 !important;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/demos/vue3/components/Loader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="my-modal">
  3 |     <svg
  4 |       xmlns="http://www.w3.org/2000/svg"
  5 |       xmlns:xlink="http://www.w3.org/1999/xlink"
  6 |       style="margin: auto; background: rgba(255, 255, 255, 0); display: block"
  7 |       width="200px"
  8 |       height="200px"
  9 |       viewBox="0 0 100 100"
 10 |       preserveAspectRatio="xMidYMid"
 11 |     >
 12 |       <g transform="rotate(0 50 50)">
 13 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 14 |           <animate
 15 |             attributeName="opacity"
 16 |             values="1;0"
 17 |             keyTimes="0;1"
 18 |             dur="1s"
 19 |             begin="-0.9166666666666666s"
 20 |             repeatCount="indefinite"
 21 |           ></animate>
 22 |         </rect>
 23 |       </g>
 24 |       <g transform="rotate(30 50 50)">
 25 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 26 |           <animate
 27 |             attributeName="opacity"
 28 |             values="1;0"
 29 |             keyTimes="0;1"
 30 |             dur="1s"
 31 |             begin="-0.8333333333333334s"
 32 |             repeatCount="indefinite"
 33 |           ></animate>
 34 |         </rect>
 35 |       </g>
 36 |       <g transform="rotate(60 50 50)">
 37 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 38 |           <animate
 39 |             attributeName="opacity"
 40 |             values="1;0"
 41 |             keyTimes="0;1"
 42 |             dur="1s"
 43 |             begin="-0.75s"
 44 |             repeatCount="indefinite"
 45 |           ></animate>
 46 |         </rect>
 47 |       </g>
 48 |       <g transform="rotate(90 50 50)">
 49 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 50 |           <animate
 51 |             attributeName="opacity"
 52 |             values="1;0"
 53 |             keyTimes="0;1"
 54 |             dur="1s"
 55 |             begin="-0.6666666666666666s"
 56 |             repeatCount="indefinite"
 57 |           ></animate>
 58 |         </rect>
 59 |       </g>
 60 |       <g transform="rotate(120 50 50)">
 61 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 62 |           <animate
 63 |             attributeName="opacity"
 64 |             values="1;0"
 65 |             keyTimes="0;1"
 66 |             dur="1s"
 67 |             begin="-0.5833333333333334s"
 68 |             repeatCount="indefinite"
 69 |           ></animate>
 70 |         </rect>
 71 |       </g>
 72 |       <g transform="rotate(150 50 50)">
 73 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 74 |           <animate
 75 |             attributeName="opacity"
 76 |             values="1;0"
 77 |             keyTimes="0;1"
 78 |             dur="1s"
 79 |             begin="-0.5s"
 80 |             repeatCount="indefinite"
 81 |           ></animate>
 82 |         </rect>
 83 |       </g>
 84 |       <g transform="rotate(180 50 50)">
 85 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 86 |           <animate
 87 |             attributeName="opacity"
 88 |             values="1;0"
 89 |             keyTimes="0;1"
 90 |             dur="1s"
 91 |             begin="-0.4166666666666667s"
 92 |             repeatCount="indefinite"
 93 |           ></animate>
 94 |         </rect>
 95 |       </g>
 96 |       <g transform="rotate(210 50 50)">
 97 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
 98 |           <animate
 99 |             attributeName="opacity"
100 |             values="1;0"
101 |             keyTimes="0;1"
102 |             dur="1s"
103 |             begin="-0.3333333333333333s"
104 |             repeatCount="indefinite"
105 |           ></animate>
106 |         </rect>
107 |       </g>
108 |       <g transform="rotate(240 50 50)">
109 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
110 |           <animate
111 |             attributeName="opacity"
112 |             values="1;0"
113 |             keyTimes="0;1"
114 |             dur="1s"
115 |             begin="-0.25s"
116 |             repeatCount="indefinite"
117 |           ></animate>
118 |         </rect>
119 |       </g>
120 |       <g transform="rotate(270 50 50)">
121 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
122 |           <animate
123 |             attributeName="opacity"
124 |             values="1;0"
125 |             keyTimes="0;1"
126 |             dur="1s"
127 |             begin="-0.16666666666666666s"
128 |             repeatCount="indefinite"
129 |           ></animate>
130 |         </rect>
131 |       </g>
132 |       <g transform="rotate(300 50 50)">
133 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
134 |           <animate
135 |             attributeName="opacity"
136 |             values="1;0"
137 |             keyTimes="0;1"
138 |             dur="1s"
139 |             begin="-0.08333333333333333s"
140 |             repeatCount="indefinite"
141 |           ></animate>
142 |         </rect>
143 |       </g>
144 |       <g transform="rotate(330 50 50)">
145 |         <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#689cc5">
146 |           <animate
147 |             attributeName="opacity"
148 |             values="1;0"
149 |             keyTimes="0;1"
150 |             dur="1s"
151 |             begin="0s"
152 |             repeatCount="indefinite"
153 |           ></animate>
154 |         </rect>
155 |       </g>
156 |     </svg>
157 |   </div>
158 | </template>
159 | 
160 | <script setup lang="ts">
161 | import { onMounted } from 'vue'
162 | 
163 | const emit = defineEmits(['confirm', 'cancel'])
164 | 
165 | const { process } = defineProps({
166 |   process: {
167 |     type: Function,
168 |     required: true
169 |   },
170 | })
171 | 
172 | onMounted(async () => {
173 |   const data = await process()
174 |   emit('confirm', data)
175 | })
176 | </script>
177 | 


--------------------------------------------------------------------------------
/demos/vue3/components/LoginModal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 |   defineProps({
 3 |     title: {
 4 |       type: String,
 5 |       default: 'Please log in',
 6 |     },
 7 |   })
 8 |   const emit = defineEmits(['confirm', 'cancel']) // must emits
 9 |   </script>
10 |   
11 |   <template>
12 |     <form class="card shadow-xl flex flex-col gap-x-10px">
13 |       <h1>{{ title }}</h1>
14 |       <div class="form-control w-full max-w-xs">
15 |         <label class="label">
16 |           <span class="label-text">Nickname:</span>
17 |         </label>
18 |         <input
19 |           type="text"
20 |           placeholder="Type here"
21 |           class="input input-bordered input-accent w-full max-w-xs"
22 |         />
23 |         <label class="label">
24 |           <span class="label-text-alt error">Error</span>
25 |         </label>
26 |       </div>
27 |       <div class="form-control w-full max-w-xs">
28 |         <label class="label">
29 |           <span class="label-text">Email:</span>
30 |           <span class="label-text-alt">Alt label</span>
31 |         </label>
32 |         <input
33 |           type="text"
34 |           placeholder="Type here"
35 |           class="input input-bordered input-info w-full max-w-xs"
36 |         />
37 |         <label class="label">
38 |           <span class="label-text-alt">Alt label</span>
39 |           <span class="label-text-alt">Alt label</span>
40 |         </label>
41 |       </div>
42 |     </form>
43 |   </template>


--------------------------------------------------------------------------------
/demos/vue3/components/PopupEdit.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onMounted, ref, Ref} from 'vue'
 3 | 
 4 | const { value, event } = defineProps<{
 5 |     value:  string | number,
 6 |     event:  PointerEvent
 7 |   }>()
 8 | 
 9 | const model: Ref<string | number| null> = ref(null)
10 | 
11 | onMounted(() => {
12 |   model.value = value
13 | })
14 | 
15 | const emit = defineEmits(['confirm', 'cancel'])
16 | </script>
17 | 
18 | <template>
19 |   <div class="my-modal" @click.self="emit('cancel')">
20 |     <div
21 |       class="popup-box"
22 |       :style="{ top: event.clientY + 'px', left: event.clientX + 'px' }"
23 |     >
24 |       <div class="popup-action">
25 |         <input
26 |           type="text"
27 |           v-model="model"
28 |           placeholder="Type here"
29 |           class="input input-bordered w-full"
30 |         />
31 |         <button class="btn btn-primary" @click="emit('confirm', model)">
32 |           Save
33 |         </button>
34 |       </div>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <style>
40 | .popup-box {
41 |   position: absolute;
42 |   --tw-bg-opacity: 1;
43 |   background-color: hsla(var(--b1) / var(--tw-bg-opacity, 1));
44 |   padding: 15px 10px;
45 |   width: 300px;
46 |   transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
47 |     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
48 |     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
49 |   transition-property: background-color, border-color, color, fill, stroke,
50 |     opacity, box-shadow, transform;
51 |   transition-duration: 0.15s;
52 |   transition-duration: 0.2s;
53 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
54 |   border-radius: var(--rounded-box, 1rem);
55 |   box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
56 | }
57 | 
58 | .popup-action {
59 |   display: flex;
60 |   justify-content: flex-end;
61 | }
62 | 
63 | .table th:first-child {
64 |   z-index: 0;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/demos/vue3/components/SimpleModal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps({
 3 |   msg: {
 4 |     type: String,
 5 |     default: 'The default dialog message',
 6 |   },
 7 | })
 8 | 
 9 | const emit = defineEmits(['confirm', 'cancel']) // must emits
10 | </script>
11 | 
12 | <template>
13 |   <div class="my-modal"  @click.self="emit('cancel')">
14 |     <div class="modal-box">
15 |       <p>{{ msg }}</p>
16 |       <div class="modal-action">
17 |         <button class="btn btn-primary" @click="emit('confirm', true)">
18 |           Confirm
19 |         </button>
20 |         <button class="btn" @click="emit('cancel', false)">Cancel</button>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <style> 
27 | .my-modal {
28 |   display: flex;
29 |   align-items: center;
30 |   justify-content: center;
31 |   position: fixed;
32 |   top: 0;
33 |   right: 0;
34 |   bottom: 0;
35 |   left: 0;
36 |   background-color: #cecece89;
37 |   transition-property: background-color, border-color, color, fill, stroke,
38 |     opacity, box-shadow, transform;
39 |   transition-duration: 0.15s;
40 |   transition-duration: 0.2s;
41 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
42 |   z-index: 100;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/demos/vue3/composables/useAlertMessage.ts:
--------------------------------------------------------------------------------
 1 | import { createConfirmDialog } from './../../../src/createConfirmDialog';
 2 | import Alert from '../components/Alert.vue'
 3 | 
 4 | export const useAlertMessage = function(){
 5 | 
 6 |   return function (msg: any) {
 7 |     const { reveal } = createConfirmDialog(Alert, { message: msg})
 8 |     
 9 |     reveal()
10 |   }
11 | }


--------------------------------------------------------------------------------
/demos/vue3/composables/useLoader.ts:
--------------------------------------------------------------------------------
 1 | import Loader from './../components/Loader.vue'
 2 | import { createConfirmDialog } from './../../../src/index'
 3 | 
 4 | const loader = createConfirmDialog(Loader)
 5 | export const useLoader = (cb: () => any) => {
 6 | 
 7 |   const start = () => {
 8 |     loader.reveal({ process: cb })
 9 |   } 
10 | 
11 |   return {
12 |     start,
13 |     onLoaded: loader.onConfirm
14 |   }
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/demos/vue3/examples/AlertExample.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useAlertMessage } from './../composables/useAlertMessage'
 3 | import { ref } from 'vue'
 4 | 
 5 | const text = ref('Default Alert Message')
 6 | 
 7 | const showAlert = useAlertMessage()
 8 | </script>
 9 | 
10 | <template>
11 |   <h2 class="card-title">Alert Example and passing props</h2>
12 |   <p>
13 |     You can use this package to build your own alerts system. Also, you can pass
14 |     props to the dialog component. 
15 |     <a 
16 |       class="link link-primary" 
17 |       href="https://github.com/harmyderoman/vuejs-confirm-dialog/blob/main/demos/vue3/examples/AlertExample.vue">
18 |         Code.
19 |     </a>
20 |   </p>
21 | 
22 |   <div class="card shadow-xl mt-4 mb-4">
23 |     <div class="justify-end card-body">
24 |       <div class="form-control w-full max-w-xs mb-2">
25 |         <label class="label">Alert message: </label>
26 |         <input
27 |           type="text"
28 |           v-model="text"
29 |           class="input input-bordered input-error w-full max-w-xs"
30 |         />
31 |       </div>
32 | 
33 |       <button class="btn btn-error mt-2" @click="showAlert(text)">Show Alert</button>
34 |     </div>
35 |   </div>
36 | 
37 |   <div class="divider"></div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/demos/vue3/examples/BasicExample.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 |   import { createConfirmDialog } from './../../../src/index' // from 'vuejs-confirm-dialog' if using package
 3 |   import SimpleModal from './../components/SimpleModal.vue'
 4 |   import { ref } from 'vue'
 5 |   import { debouncedWatch } from '@vueuse/core';
 6 | 
 7 |   const defaultMessage = 'Open Dialog and confirm action'
 8 |   const message = ref(defaultMessage)
 9 |   const { reveal, onConfirm, onCancel } = createConfirmDialog(SimpleModal)
10 |   
11 |   // Callback inside this hook will be called if the user confirms the dialog 
12 |   onConfirm(() => {
13 |     message.value = 'Confirmed!'
14 |   })
15 |   // This will be called on canceling
16 |   onCancel(() => {
17 |     message.value = 'Canceled!'
18 |   })
19 |   // Reset message after 2000 ms
20 |   debouncedWatch(
21 |     message,
22 |     () => {
23 |       message.value = defaultMessage
24 |     },
25 |     { debounce: 2000 }
26 |   )
27 | </script>
28 | 
29 | <template>
30 |   <h2 class="card-title">Basic Example</h2>
31 |   <p>
32 |     This is the basic example of how to use this package:
33 |   </p>
34 | 
35 |   <div class="card shadow-xl mt-4 mb-4">
36 |       <div class="justify-end card-body">
37 |         <p class="card-title">Dialog status: 
38 |           <span class="text-error">{{ message }}</span>
39 |         </p>
40 |         <button class="btn btn-primary" @click="reveal()">Open Dialog</button>
41 |       </div>
42 |   </div>
43 | 
44 |   <p>This is how it is implemented in code:</p>
45 |   <p>
46 |     <a class="link link-primary" href="https://github.com/harmyderoman/vuejs-confirm-dialog/blob/main/demos/vue3/examples/BasicExample.vue">
47 |       Basic Example
48 |     </a>
49 |   </p>
50 | 
51 |   <div class="divider"></div>
52 | </template>


--------------------------------------------------------------------------------
/demos/vue3/examples/IntroductionPart.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import GithubButton from 'vue-github-button'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <h1 class="article-title">vuejs-confirm-dialog</h1>
 7 |   <div class="flex justify-center mb-4 gap-1">
 8 |     <github-button
 9 |       href="https://github.com/harmyderoman/vuejs-confirm-dialog/issues"
10 |       data-icon="octicon-issue-opened"
11 |       data-size="large"
12 |       data-show-count="true"
13 |       aria-label="Issue harmyderoman/vuejs-confirm-dialog on GitHub"
14 |     >
15 |       Issue
16 |     </github-button>
17 |     <github-button
18 |       href="https://github.com/harmyderoman/vuejs-confirm-dialog"
19 |       data-icon="octicon-star"
20 |       data-size="large"
21 |       data-show-count="true"
22 |       aria-label="Star harmyderoman/vuejs-confirm-dialog on GitHub"
23 |     >
24 |       Star
25 |     </github-button>
26 |   </div>
27 | 
28 |   <h2 class="card-title">Introduction</h2>
29 |   <p>
30 |     This <a class="link link-primary" href="https://github.com/harmyderoman/vuejs-confirm-dialog" target="_blank">package</a> just makes it simple to create, reuse, promisify, and build
31 |     chains of modal dialogs in Vue.js. For now, it provides just one function
32 |     <code class="inline-code">createConfirmDialog</code> that does all the hard work for you.
33 |   </p>
34 |   <div class="warning-block">
35 |     <p class="warning-block_title">Warning!</p>
36 |     <p>This package does not provide components for now. These examples are not production-ready components! Use it on your own risk!</p>
37 |   </div>
38 |   <div class="divider"></div>
39 | </template>
40 | 
41 | <style>
42 | 
43 | </style>
44 | 


--------------------------------------------------------------------------------
/demos/vue3/examples/LoaderExample.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useLoader } from './../composables/useLoader'
 3 | 
 4 | import { ref } from 'vue'
 5 | const defaultMessage = 'Data is not loaded'
 6 | const message = ref(defaultMessage)
 7 | 
 8 | const fetchData = () => {
 9 |   // Here go your API Call, I tested it with promise
10 |   return new Promise((resolve) => {
11 |     setTimeout(() => {
12 |       resolve('Loading data is finished!')
13 |     }, 2000)
14 |   })
15 | }
16 | 
17 | const loader = useLoader(fetchData)
18 | 
19 | loader.onLoaded((data) => {
20 |   message.value = data
21 | })
22 | </script>
23 | 
24 | <template>
25 |   <h2 class="card-title">Loader Example</h2>
26 |   <p>
27 |     Example of data loader:
28 |   </p>
29 | 
30 |   <div class="card shadow-xl mt-4 mb-4">
31 |       <div class="justify-end card-body">
32 |         <p class="card-title">Data status: 
33 |           <span class="text-info">{{ message }}</span>
34 |         </p>
35 |         <button class="btn btn-info" @click="loader.start()">Load Data</button>
36 |       </div>
37 |   </div>
38 |   <p>
39 |     <a 
40 |       class="link link-primary" 
41 |       href="https://github.com/harmyderoman/vuejs-confirm-dialog/blob/main/demos/vue3/examples/LoaderExample.vue">
42 |         Code of Example
43 |     </a>
44 |   </p>
45 | 
46 |   <div class="divider"></div>
47 | </template>


--------------------------------------------------------------------------------
/demos/vue3/examples/PropsBehavior.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { createConfirmDialog } from './../../../src/index' // from 'vuejs-confirm-dialog' if using package
  3 | import SimpleModal from './../components/SimpleModal.vue'
  4 | import { ref } from 'vue'
  5 | import { debouncedWatch } from '@vueuse/core'
  6 | 
  7 | const defaultMessage = 'Open Dialog and confirm action'
  8 | const message = ref(defaultMessage)
  9 | 
 10 | const chore = ref(false)
 11 | const keepInitial = ref(false)
 12 | const initMessage = ref('Initial message!')
 13 | 
 14 | let openDialog = ref((_?: any) => {
 15 |   message.value = 'Dialogue was not created!'
 16 | })
 17 | 
 18 | const createDialog = () => {
 19 |   const { reveal, onConfirm, onCancel } = createConfirmDialog(
 20 |     SimpleModal,
 21 |     { msg: initMessage.value },
 22 |     { chore: chore.value, keepInitial: keepInitial.value }
 23 |   )
 24 | 
 25 |   openDialog.value = reveal
 26 |   // Callback inside this hook will be called if the user confirms the dialog
 27 |   onConfirm(() => {
 28 |     message.value = 'Confirmed!'
 29 |   })
 30 | 
 31 |   // This will be called on canceling
 32 |   onCancel(() => {
 33 |     message.value = 'Canceled!'
 34 |   })
 35 | }
 36 | 
 37 | // Reset message after 2000 ms
 38 | debouncedWatch(
 39 |   message,
 40 |   () => {
 41 |     message.value = defaultMessage
 42 |   },
 43 |   { debounce: 2000 }
 44 | )
 45 | </script>
 46 | 
 47 | <template>
 48 |   <h2 class="card-title">Props Behavior Config Example</h2>
 49 |   <h3>Try different props configurations to see the difference</h3>
 50 |   <div>
 51 |     <div class="flex flex-row">
 52 |       <div class="form-control" style="width: fit-content;">
 53 |         <label class="label cursor-pointer flex flex-col items-start gap-2">
 54 |           <code>
 55 |             { chore:
 56 |             <i :style="{ color: chore ? 'hsl(var(--p))': 'hsl(var(--s))'}">
 57 |               <code>{{ chore }}</code>
 58 |             </i> ,
 59 |           </code>
 60 |           <input
 61 |             type="checkbox"
 62 |             class="toggle toggle-primary"
 63 |             v-model="chore"
 64 |           />
 65 |         </label>
 66 |       </div>
 67 |       <div class="form-control" style="width: fit-content;">
 68 |         <label class="label cursor-pointer flex flex-col items-start gap-2">
 69 |           <code>
 70 |             keepInitial:
 71 |             <i :style="{ color: keepInitial ? 'hsl(var(--p))': 'hsl(var(--s))'}">
 72 |               <code>{{ keepInitial }}</code>
 73 |             </i> }
 74 |           </code >
 75 |           <input
 76 |             type="checkbox"
 77 |             class="toggle toggle-accent"
 78 |             v-model="keepInitial"
 79 |           />
 80 |         </label>
 81 |       </div>
 82 |     </div>
 83 |       <div class="form-control w-full max-w-xs mb-2">
 84 |         <label class="label">Initial message: </label>
 85 |         <input
 86 |           type="text"
 87 |           v-model="initMessage"
 88 |           class="input input-bordered input-error w-full max-w-xs"
 89 |         />
 90 |       </div>
 91 | 
 92 |     <button class="btn btn-accent" @click="createDialog">Create Dialog</button>
 93 |   </div>
 94 | 
 95 |   <div class="card shadow-xl mt-4 mb-4">
 96 |     <div class="justify-end card-body">
 97 |       <p class="card-title">
 98 |         Dialog status:
 99 |         <span class="text-error">{{ message }}</span>
100 |       </p>
101 |       <button class="btn btn-primary" @click="openDialog({ msg: 'Test Message!' })">
102 |         Open Dialog with { msg: 'Test Message!' }
103 |       </button>
104 |       <p>Reuse:</p>
105 |       <button class="btn btn-warning" @click="openDialog()">
106 |         Open Dialog with no new attrs
107 |       </button>
108 |     </div>
109 |   </div>
110 | 
111 |   <div class="divider"></div>
112 | </template>
113 | 


--------------------------------------------------------------------------------
/demos/vue3/examples/TableExample.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 |   import EditableTable from './../components/EditableTable.vue'
 3 |   </script>
 4 |   
 5 |   <template>
 6 |     <h2 class="card-title">Edit Table with Popup</h2>
 7 |     <p>
 8 |       You can use this package to create and reuse popups. 
 9 |     </p>
10 |     <p>
11 |       To edit the values in the table, click on one of the cells.
12 |     </p>
13 |   
14 |     <div class="card shadow-xl mt-4 mb-4">
15 |       <div class="justify-end card-body">
16 |         <EditableTable />
17 |       </div>
18 |     </div>
19 |     <p>
20 |       <a 
21 |         class="link link-primary" 
22 |         href="https://github.com/harmyderoman/vuejs-confirm-dialog/blob/main/demos/vue3/components/EditableTable.vue">
23 |           Editable Table Example
24 |       </a>
25 |     </p>
26 |     <div class="divider"></div>
27 |   </template>


--------------------------------------------------------------------------------
/demos/vue3/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import * as ConfirmDialog from '../../src/index'
4 | 
5 | createApp(App).use(ConfirmDialog).mount('#app')
6 | 


--------------------------------------------------------------------------------
/demos/vue3/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <title>Confirm Dialog</title>
 8 |   </head>
 9 |   <body>
10 |     <noscript>
11 |       <strong
12 |         >We're sorry but 'Confirm Dialog' doesn't work
13 |         properly without JavaScript enabled. Please enable it to
14 |         continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |     <script type="module" src="./demos/vue3/main.ts"></script>
20 |   </body>
21 | </html>


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
3 |   transform: {
4 |     "^.+\\.vue$": "vue-jest",
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vuejs-confirm-dialog",
 3 | 	"version": "0.5.2",
 4 | 	"packageManager": "pnpm@7.12.2",
 5 | 	"main": "./dist/vuejs-confirm-dialog.umd.js",
 6 | 	"module": "./dist/vuejs-confirm-dialog.es.js",
 7 | 	"types": "./dist/index.d.ts",
 8 | 	"exports": {
 9 | 		".": {
10 | 			"import": "./dist/vuejs-confirm-dialog.es.js",
11 | 			"require": "./dist/vuejs-confirm-dialog.umd.js",
12 | 			"types": "./dist/index.d.ts"
13 | 		}
14 | 	},
15 | 	"files": [
16 | 		"dist/*"
17 | 	],
18 | 	"private": false,
19 | 	"author": {
20 | 		"name": "Roman Garmider"
21 | 	},
22 | 	"keywords": [
23 | 		"vue.js",
24 | 		"vue",
25 | 		"dialogs",
26 | 		"vue-use"
27 | 	],
28 | 	"license": "MIT",
29 | 	"scripts": {
30 | 		"demo": "vite --host",
31 | 		"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
32 | 		"build": "vite build && vue-tsc --emitDeclarationOnly",
33 | 		"test": "vitest"
34 | 	},
35 | 	"dependencies": {
36 | 		"@vueuse/core": "^7.7.1",
37 | 		"vue-demi": "0.13.11"
38 | 	},
39 | 	"peerDependencies": {
40 | 		"@vue/composition-api": "^1.0.0",
41 | 		"vue": "^2.0.0 || >=3.0.0"
42 | 	},
43 | 	"peerDependenciesMeta": {
44 | 		"@vue/composition-api": {
45 | 			"optional": true
46 | 		}
47 | 	},
48 | 	"devDependencies": {
49 | 		"@types/node": "^18.17.19",
50 | 		"@typescript-eslint/eslint-plugin": "^4.33.0",
51 | 		"@typescript-eslint/parser": "^4.33.0",
52 | 		"@vitejs/plugin-vue": "^1.10.2",
53 | 		"@vue/compiler-sfc": "^3.3.4",
54 | 		"@vue/eslint-config-prettier": "^6.0.0",
55 | 		"@vue/eslint-config-typescript": "^7.0.0",
56 | 		"@vue/test-utils": "^2.4.1",
57 | 		"eslint": "^8.50.0",
58 | 		"eslint-plugin-prettier": "^3.4.1",
59 | 		"eslint-plugin-vue": "^8.7.1",
60 | 		"happy-dom": "^2.55.0",
61 | 		"pnpm": "^7.33.6",
62 | 		"prettier": "^2.8.8",
63 | 		"sass": "^1.68.0",
64 | 		"typescript": "^4.9.5",
65 | 		"vite": "^2.9.16",
66 | 		"vite-plugin-vue2": "1.9.0",
67 | 		"vitest": "^0.23.4",
68 | 		"vue": "^3.3.4",
69 | 		"vue-github-button": "^3.1.0",
70 | 		"vue-tsc": "^0.31.4"
71 | 	},
72 | 	"pnpm": {
73 | 		"overrides": {
74 | 			"vue-demi": "0.13.11",
75 | 			"vite": "^2.8.6"
76 | 		}
77 | 	}
78 | }
79 | 


--------------------------------------------------------------------------------
/src/DialogsWrapper.ts:
--------------------------------------------------------------------------------
 1 | import { h } from 'vue'
 2 | import { useDialogWrapper } from './useDialogWrapper'
 3 | import { defineComponent } from 'vue-demi'
 4 | 
 5 | /**
 6 |  * `DialogsWrapper` - the component that contains all
 7 |  * modal dialogs of the app
 8 |  */
 9 | export default defineComponent({
10 |   name: 'DialogsWrapper',
11 |   setup() {
12 |     const { DialogsStore } = useDialogWrapper()
13 | 
14 |     return () => DialogsStore.map(dialogData => {
15 |       return h(dialogData.dialog, { 
16 |         is: dialogData.dialog,
17 |         onConfirm: dialogData.confirm,
18 |         onCancel: dialogData.cancel,
19 |         key: dialogData.id,
20 |         ...dialogData.props
21 |       })
22 |     })
23 |   }
24 | })


--------------------------------------------------------------------------------
/src/createConfirmDialog.ts:
--------------------------------------------------------------------------------
  1 | import { ref, watch, computed, Component, VNodeProps, AllowedComponentProps } from 'vue-demi'
  2 | import type { ComputedRef, DefineComponent, UnwrapRef } from 'vue-demi'
  3 | import { useDialogWrapper } from './useDialogWrapper'
  4 | import {
  5 |   EventHookOn,
  6 |   useConfirmDialog,
  7 |   UseConfirmDialogRevealResult,
  8 | } from '@vueuse/core'
  9 | 
 10 | export type ComponentProps<C extends Component> = C extends new (...args: any) => any
 11 |   ? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
 12 |   : never
 13 | 
 14 | type PropsBehaviorOptions = {
 15 |   chore: boolean,
 16 |   keepInitial: boolean
 17 | }
 18 | 
 19 | let lastDialogId = 0
 20 | 
 21 | function getDialogId() {
 22 |     return ++lastDialogId
 23 | }
 24 | 
 25 | /**
 26 |  * Function that makes simple to create, reuse, 
 27 |  * promisify and build chains of modal dialogs. 
 28 |  * 
 29 |  * @param dialog - a component that used for modal dialog
 30 |  * @param initialAttrs - new props data for dialog component, optional
 31 |  * @param options - props behavior settings, optional
 32 |  * @returns `{ reveal, isRevealed, onConfirm, onCancel, close, closeAll }` -
 33 |  * `reveal` - shows the component
 34 |  * `isRevealed` - return computed mark if the component is shown
 35 |  * `onConfirm` - hook that gets a callback for user's confirmation
 36 |  * `onCancel` - hook that gets a callback for user's canceling
 37 |  * `close` - close the dialog without triggering any hook and don't change `isRevealed`
 38 |  * `closeAll` - close all open dialogs
 39 |  */
 40 | export function createConfirmDialog
 41 |   <C extends DefineComponent<any, any, any,any,any,any,any,any>> (
 42 |   dialog: C,
 43 |   initialAttrs: ComponentProps<C> = {} as ComponentProps<C>,
 44 |   options: PropsBehaviorOptions = { chore: false, keepInitial: false }
 45 | ): {
 46 |   close: () => void
 47 | 
 48 |   closeAll: () => void
 49 | 
 50 |   reveal: (
 51 |     props?: ComponentProps<C>
 52 |   ) => Promise<UseConfirmDialogRevealResult<any, boolean>>
 53 | 
 54 |   isRevealed: ComputedRef<boolean>
 55 | 
 56 |   onConfirm: EventHookOn
 57 | 
 58 |   onCancel: EventHookOn
 59 | } {
 60 | 
 61 |   const setAttrs = (attrs: ComponentProps<C> | null) => {
 62 |     if(!attrs) {
 63 |       propsRef.value = {} as UnwrapRef<ComponentProps<C>>
 64 |       return
 65 |     }
 66 |     for (const prop in attrs) {
 67 |       // @ts-ignore
 68 |       propsRef.value[prop] = attrs[prop]
 69 |     }
 70 |    }
 71 | 
 72 |   const propsRef = ref({} as ComponentProps<C>)
 73 |   setAttrs(initialAttrs)
 74 |   const revealed = ref(false)
 75 | 
 76 |   const close = () => {
 77 |     revealed.value = false
 78 |     removeDialog(DIALOG_ID)
 79 |   }
 80 | 
 81 |   const { addDialog, removeDialog, removeAll, DialogsStore } = useDialogWrapper()
 82 | 
 83 |   const { 
 84 |     reveal,
 85 |     isRevealed, 
 86 |     onConfirm, 
 87 |     onReveal, 
 88 |     onCancel, 
 89 |     confirm, 
 90 |     cancel 
 91 |   } = useConfirmDialog()
 92 | 
 93 |   const DIALOG_ID = getDialogId()
 94 | 
 95 |   onReveal((props?: ComponentProps<C>) => {
 96 | 
 97 |     revealed.value = true
 98 |     if(props) setAttrs(props as ComponentProps<C>)
 99 | 
100 |     addDialog({
101 |       id: DIALOG_ID,
102 |       dialog,
103 |       isRevealed,
104 |       confirm,
105 |       cancel,
106 |       // @ts-ignore
107 |       props: propsRef.value,
108 |       close,
109 |       revealed
110 |     })
111 | 
112 |   })
113 | 
114 |   watch( isRevealed,
115 |     (value) => {
116 |     if(!value) {
117 | 
118 |       if(options.chore) {
119 |         setAttrs(options.keepInitial ? initialAttrs : null)
120 |       }
121 | 
122 |       removeDialog(DIALOG_ID)
123 |     }
124 |   })
125 | 
126 |   const closeAll = () =>{
127 |     DialogsStore.forEach(dialog => {
128 |       dialog.revealed.value = false
129 |     })
130 |     removeAll()
131 |   }
132 | 
133 |   return {
134 |     close,
135 |     closeAll,
136 |     reveal,
137 |     isRevealed: computed(() => isRevealed.value && revealed.value),
138 |     onConfirm,
139 |     onCancel,
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { createConfirmDialog } from './createConfirmDialog'
 2 | import DialogsWrapper from './DialogsWrapper'
 3 | 
 4 | import type { UseDialogWrapperReturn, DialogData } from './useDialogWrapper'
 5 | import type { ComponentProps } from './createConfirmDialog'
 6 | import { App } from 'vue-demi'
 7 | 
 8 | function install(app: App) {
 9 |   app.component('DialogsWrapper', DialogsWrapper)
10 | }
11 | 
12 | export { 
13 |   createConfirmDialog, 
14 |   DialogsWrapper, 
15 |   install, 
16 |   ComponentProps,
17 |   UseDialogWrapperReturn, 
18 |   DialogData 
19 | }
20 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue-demi'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/useDialogWrapper.ts:
--------------------------------------------------------------------------------
 1 | import { markRaw, Ref, reactive, DefineComponent } from 'vue-demi'
 2 | import { ComponentProps } from './index'
 3 | 
 4 | export type UseDialogWrapperReturn = {
 5 |   DialogsStore: DialogData<any>[]
 6 |   addDialog: (dialogData: DialogData<any>) => void,
 7 |   removeDialog: (id: number) => void,
 8 |   removeAll: () => void
 9 | }
10 | 
11 | export type DialogData<C extends DefineComponent<any,any,any,any,any,any>> = {
12 |   id: number
13 |   dialog: C
14 |   isRevealed: Ref<boolean>
15 |   confirm: (props?: ComponentProps<C>) => void
16 |   cancel: (props?: ComponentProps<C>) => void
17 |   props: ComponentProps<C>,
18 |   close: () => void,
19 |   revealed: Ref<boolean>
20 | }
21 | 
22 | const DialogsStore: DialogData<any>[] = reactive([])
23 | 
24 | export const useDialogWrapper = function (): UseDialogWrapperReturn {
25 | 
26 |   const addDialog = function (dialogData: DialogData<any>) {
27 |     DialogsStore.push(markRaw(dialogData))
28 |   }
29 | 
30 |   const removeDialog = function (id: number){
31 |     const index = DialogsStore.findIndex(dialog => dialog.id == id)
32 |       DialogsStore.splice( index, 1)
33 |   }
34 | 
35 |   const removeAll = function () {
36 |     DialogsStore.splice(0)
37 |   }
38 | 
39 |   return {
40 |     DialogsStore,
41 |     addDialog,
42 |     removeDialog,
43 |     removeAll
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/tests/components/DialogComp.ts:
--------------------------------------------------------------------------------
 1 | import { defineComponent, h } from "vue"
 2 | 
 3 | const DEFAULT_MESSAGE = "Default Message"
 4 | 
 5 |  const DialogComp = defineComponent({
 6 |   emits: ['confirm', 'cancel'],
 7 |   props: {
 8 |     message: {
 9 |       type: String,
10 |       default: DEFAULT_MESSAGE
11 |     }
12 |   },
13 |   render() {
14 |     return h('div')
15 |   }
16 | })
17 | 
18 | export default DialogComp


--------------------------------------------------------------------------------
/tests/unit/test.spec.ts:
--------------------------------------------------------------------------------
  1 | import { createConfirmDialog } from './../../src/index'
  2 | import { useDialogWrapper } from './../../src/useDialogWrapper'
  3 | import { useSetup } from '../utils'
  4 | import { Component, nextTick } from 'vue'
  5 | import { useConfirmDialog } from '@vueuse/core'
  6 | import { describe, it, expect } from 'vitest'
  7 | import { mount } from '@vue/test-utils'
  8 | import DialogComp from './../components/DialogComp'
  9 | import { ref } from 'vue'
 10 | import DialogsWrapper from './../../src/DialogsWrapper'
 11 | 
 12 | const INITIAL_MESSAGE = "Initial Message"
 13 | 
 14 | const clearDialogsStore = function () {
 15 |   const { DialogsStore } = useDialogWrapper()
 16 |   while (DialogsStore.length > 0) {
 17 |     DialogsStore.pop()
 18 |   }
 19 | }
 20 | 
 21 | describe('Props Behavior Options', () => {
 22 |   it('should accept prop options, and do nothing with all options set to false', async () => {
 23 | 
 24 |     // @ts-ignore
 25 |     const { reveal } = createConfirmDialog(DialogComp, 
 26 |       { message: INITIAL_MESSAGE}, 
 27 |       { chore: false, keepInitial: false }
 28 |     )
 29 | 
 30 |     const TEST_MESSAGE = 'test message'
 31 | 
 32 |     reveal({ message: TEST_MESSAGE })
 33 |     await nextTick()
 34 |     const { DialogsStore } = useDialogWrapper()
 35 | 
 36 |     expect(DialogsStore[0].isRevealed.value).toBe(true)
 37 |     expect(DialogsStore[0].props.message).toBe(TEST_MESSAGE)
 38 | 
 39 |     DialogsStore[0].confirm()
 40 |     await nextTick()
 41 |     reveal()
 42 |     await nextTick()
 43 | 
 44 |     expect(DialogsStore[0].isRevealed.value).toBe(true)
 45 |     expect(DialogsStore[0].props.message).toBe(TEST_MESSAGE)
 46 | 
 47 |     clearDialogsStore()
 48 |   })
 49 | 
 50 |   it(`should return to default props values of modal component, 
 51 |       if { chore: true, keepInitial: false }`, async () => {
 52 | 
 53 |     // @ts-ignore
 54 |     const { reveal, isRevealed } = createConfirmDialog(DialogComp, 
 55 |       { message: INITIAL_MESSAGE }, 
 56 |       { chore: true, keepInitial: false }
 57 |     )
 58 |     const INIT_PROP = 'test prop'
 59 |     reveal({ message: INIT_PROP })
 60 |     await nextTick()
 61 |     const { DialogsStore } = useDialogWrapper()
 62 |     expect(DialogsStore[0].props.message).toBe(INIT_PROP)
 63 | 
 64 |     DialogsStore[0].confirm()
 65 |     await nextTick()
 66 |     expect(isRevealed.value).toBe(false)
 67 |     reveal()
 68 |     await nextTick()
 69 |     expect(isRevealed.value).toBe(true)
 70 |     expect(DialogsStore[0].props.message).toBe(undefined)
 71 | 
 72 |     clearDialogsStore()
 73 |   })
 74 |   it(`should return to initial props values passed to create function, 
 75 |       if { chore: true, keepInitial: true }`, async () => {
 76 | 
 77 |     // @ts-ignore
 78 |     const { reveal, isRevealed } = createConfirmDialog(DialogComp, 
 79 |       { message: INITIAL_MESSAGE }, 
 80 |       { chore: true, keepInitial: true }
 81 |     )
 82 |     const INIT_PROP = 'test prop'
 83 |     reveal({ message: INIT_PROP })
 84 |     await nextTick()
 85 |     const { DialogsStore } = useDialogWrapper()
 86 |     expect(DialogsStore[0].props.message).toBe(INIT_PROP)
 87 | 
 88 |     DialogsStore[0].confirm()
 89 |     await nextTick()
 90 |     expect(isRevealed.value).toBe(false)
 91 |     reveal()
 92 |     await nextTick()
 93 |     expect(isRevealed.value).toBe(true)
 94 |     expect(DialogsStore[0].props.message).toBe(INITIAL_MESSAGE)
 95 | 
 96 |     clearDialogsStore()
 97 |   })
 98 | })
 99 | 
100 | describe('createConfirmDialog', () => {
101 |   it('should be defined', () => {
102 |     expect(createConfirmDialog).toBeDefined()
103 |   })
104 | 
105 |   it('should add Vue component to the DialogsStore', () => {
106 |     // @ts-ignore
107 |     const { reveal } = createConfirmDialog(DialogComp)
108 | 
109 |     reveal()
110 | 
111 |     const { DialogsStore } = useDialogWrapper()
112 |     expect(DialogsStore[0].dialog).toBe(DialogComp)
113 | 
114 |     clearDialogsStore()
115 |   })
116 | 
117 |   it('should set `isRevealed.value` to `true` after call the dialog', () => {
118 |     // @ts-ignore
119 |     const { reveal, isRevealed } = createConfirmDialog(DialogComp)
120 |     reveal()
121 | 
122 |     expect(isRevealed.value).toBe(true)
123 | 
124 |     clearDialogsStore()
125 |   })
126 | 
127 |   it('should set `isRevealed.value` to `false` after confirming or canceling the dialog', () => {
128 |     // @ts-ignore
129 |     const { reveal, isRevealed } = createConfirmDialog(DialogComp)
130 |     reveal()
131 | 
132 |     const { DialogsStore } = useDialogWrapper()
133 |     DialogsStore[0].confirm()
134 | 
135 |     expect(isRevealed.value).toBe(false)
136 | 
137 |     reveal()
138 |     DialogsStore[0].cancel()
139 | 
140 |     expect(isRevealed.value).toBe(false)
141 | 
142 |     clearDialogsStore()
143 |   })
144 | 
145 |   it('should call `onConfirm` and `onCancel` hooks', () => {
146 |     // @ts-ignore
147 |     const { reveal, onConfirm, onCancel } = createConfirmDialog(DialogComp)
148 | 
149 |     let isCalled = false
150 |     onConfirm(() => {
151 |       isCalled = true
152 |     })
153 |     onCancel(() => {
154 |       isCalled = true
155 |     })
156 | 
157 |     reveal()
158 |     const { DialogsStore } = useDialogWrapper()
159 |     DialogsStore[0].confirm()
160 | 
161 |     expect(isCalled).toBe(true)
162 | 
163 |     isCalled = false
164 |     DialogsStore[0].cancel()
165 |     expect(isCalled).toBe(true)
166 | 
167 |     clearDialogsStore()
168 |   })
169 | 
170 |   it('should pass props to component by the second argument', () => {
171 |     // @ts-ignore
172 |     const { reveal } = createConfirmDialog(DialogComp, { message: 'message' })
173 |     reveal()
174 | 
175 |     const { DialogsStore } = useDialogWrapper()
176 |     expect(DialogsStore[0].props.message).toBe('message')
177 | 
178 |     clearDialogsStore()
179 |   })
180 | 
181 |   it('should pass props to component by `reveal()` argument', () => {
182 |     // @ts-ignore
183 |     const { reveal } = createConfirmDialog(DialogComp)
184 |     reveal({ message: 'message' })
185 | 
186 |     const { DialogsStore } = useDialogWrapper()
187 |     expect(DialogsStore[0].props.message).toBe('message')
188 | 
189 |     clearDialogsStore()
190 |   })
191 | 
192 |   it('should return promise on reveil', async () => {
193 |     // @ts-ignore
194 |     const { reveal } = createConfirmDialog(DialogComp)
195 | 
196 |     let isCanceled: boolean | undefined
197 |     const { DialogsStore } = useDialogWrapper()
198 | 
199 |     reveal().then(result => {
200 |       isCanceled = result.isCanceled
201 |     })
202 | 
203 |     await nextTick()
204 | 
205 |     DialogsStore[0].confirm()
206 | 
207 |     await nextTick()
208 | 
209 | 
210 |     expect(isCanceled).toBe(false)
211 | 
212 |     isCanceled = undefined
213 |     reveal().then(result => {
214 |       isCanceled = result.isCanceled
215 |     })
216 | 
217 |     await nextTick()
218 |     DialogsStore[0].cancel()
219 |     await nextTick()
220 | 
221 |     expect(isCanceled).toBe(true)
222 | 
223 |     clearDialogsStore()
224 |   })
225 | 
226 |   it('should close dialog without triggering any hook', async () => {
227 |     // @ts-ignore
228 |     const dialog = createConfirmDialog(DialogComp)
229 |     let onConfirmTriggered = false
230 |     let onCancelTriggered = false
231 | 
232 |     dialog.onConfirm(() => {
233 |       onConfirmTriggered = true
234 |     })
235 | 
236 |     dialog.onCancel(() => {
237 |       onCancelTriggered = true
238 |     })
239 | 
240 |     dialog.reveal()
241 | 
242 |     expect(dialog.isRevealed.value).toBe(true)
243 | 
244 |     await nextTick()
245 | 
246 |     dialog.close()
247 | 
248 |     await nextTick()
249 | 
250 |     expect(dialog.isRevealed.value).toBe(false)
251 |     expect(onConfirmTriggered).toBe(false)
252 |     expect(onCancelTriggered).toBe(false)
253 | 
254 |     clearDialogsStore()
255 |   })
256 |   it('should close all dialogs', async () => {
257 |     // @ts-ignore
258 |     const dialog = createConfirmDialog(DialogComp)
259 |     // @ts-ignore
260 |     const dialog2 = createConfirmDialog(DialogComp)
261 | 
262 |     dialog.reveal()
263 |     dialog2.reveal()
264 | 
265 |     expect(dialog.isRevealed.value).toBe(true)
266 |     expect(dialog2.isRevealed.value).toBe(true)
267 | 
268 |     dialog.closeAll()
269 | 
270 | 
271 |     expect(dialog.isRevealed.value).toBe(false)
272 |     expect(dialog2.isRevealed.value).toBe(false)
273 | 
274 |     clearDialogsStore()
275 |   })
276 | 
277 | })
278 | 
279 | describe('DialogsWrapper.vue', () => {
280 |   it('should be defined', () => {
281 |     expect(DialogsWrapper).toBeDefined()
282 | 
283 |     clearDialogsStore()
284 |   })
285 | 
286 |   it('should mount component to the document', async () => {
287 |     const wrapper = mount(DialogsWrapper)
288 | 
289 |     const { addDialog } = useDialogWrapper()
290 |     const { isRevealed, confirm, cancel } = useConfirmDialog()
291 |     addDialog({
292 |       dialog: DialogComp,
293 |       isRevealed,
294 |       confirm,
295 |       cancel,
296 |       props: {},
297 |       id: 0,
298 |       close: function (): void {
299 |         throw new Error('Function not implemented.')
300 |       },
301 |       revealed: ref(false)
302 |     })
303 | 
304 |     await nextTick()
305 | 
306 |     const modal = wrapper.findComponent(DialogComp)
307 |     expect(modal.exists()).toBe(true)
308 | 
309 |     clearDialogsStore()
310 |   })
311 | 
312 | })
313 | 
314 | describe('useDialogWrapper', () => {
315 |   it('should be defined', () => {
316 |     expect(useDialogWrapper).toBeDefined()
317 |   })
318 | 
319 | 
320 |   it('should add Vue component to the DialogsStore', async () => {
321 |     const simpleComponent = {} as Component
322 |     const props = {}
323 | 
324 |     const wrapper = useSetup(() => {
325 |       const { DialogsStore, addDialog } = useDialogWrapper()
326 |       const { isRevealed, confirm, cancel } = useConfirmDialog()
327 |       addDialog({
328 |         dialog: simpleComponent,
329 |         isRevealed,
330 |         confirm,
331 |         cancel,
332 |         props,
333 |         id: 0,
334 |         close: function (): void {
335 |           throw new Error('Function not implemented.')
336 |         },
337 |         revealed: ref(false)
338 |       })
339 | 
340 |       return { DialogsStore }
341 |     })
342 | 
343 |     expect(wrapper.DialogsStore[0].dialog).toBe(simpleComponent)
344 | 
345 |     clearDialogsStore()
346 |   })
347 | })
348 | 


--------------------------------------------------------------------------------
/tests/utils/index.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 2 | import {
 3 |   defineComponent,
 4 |   createApp,
 5 |   h,
 6 |   provide,
 7 |   ref,
 8 |   InjectionKey,
 9 |   Ref,
10 | } from 'vue-demi'
11 | 
12 | type InstanceType<V> = V extends { new (...arg: any[]): infer X } ? X : never
13 | type VM<V> = InstanceType<V> & { unmount(): void }
14 | 
15 | export function mount<V>(Comp: V) {
16 |   const el = document.createElement('div')
17 |   const app = createApp(Comp)
18 | 
19 |   // @ts-ignore
20 |   const unmount = () => app.unmount(el)
21 |   const comp = app.mount(el) as any as VM<V>
22 |   comp.unmount = unmount
23 |   return comp
24 | }
25 | 
26 | export function useSetup<V>(setup: () => V) {
27 |   const Comp = defineComponent({
28 |     setup,
29 |     render() {
30 |       return h('div', [])
31 |     },
32 |   })
33 | 
34 |   return mount(Comp)
35 | }
36 | 
37 | export const Key: InjectionKey<Ref<number>> = Symbol('num')
38 | 
39 | export function useInjectedSetup<V>(setup: () => V) {
40 |   const Comp = defineComponent({
41 |     setup,
42 |     render() {
43 |       return h('div', [])
44 |     },
45 |   })
46 | 
47 |   const Provider = defineComponent({
48 |     components: Comp,
49 |     setup() {
50 |       provide(Key, ref(1))
51 |     },
52 |     render() {
53 |       return h('div', [])
54 |     },
55 |   })
56 | 
57 |   return mount(Provider)
58 | }
59 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": "./src",
14 |     "declaration": true,
15 |     "declarationDir": "./dist",
16 |     "typeRoots": ["src"],
17 |     "outDir": "./dist",
18 |     "rootDir": "./src",
19 |     "paths": {
20 |       "@/*": [
21 |         "src/*"
22 |       ]
23 |     },
24 |     "lib": [
25 |       "esnext",
26 |       "dom",
27 |       "dom.iterable",
28 |       "scripthost"
29 |     ]
30 |   },
31 |   "include": [
32 |     "src/**/*.ts",
33 |     "src/**/*.tsx",
34 |     "src/**/*.vue",
35 |     "src/**/*.d.ts",
36 |     "tests/**/*.ts",
37 |     "tests/**/*.tsx"
38 |   ],
39 |   "exclude": [
40 |     "node_modules",
41 |     "./tests"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | /// <reference types="vitest" />
 2 | /// <reference types="vitest/globals" />
 3 | /* eslint-disable no-undef */
 4 | /* eslint-disable @typescript-eslint/no-var-requires */
 5 | import { defineConfig } from 'vite'
 6 | 
 7 | // for Vue 3 use this:
 8 | import vue from '@vitejs/plugin-vue'
 9 | 
10 | // for Vue 2 use this:
11 | // import { createVuePlugin as vue } from 'vite-plugin-vue2'
12 | 
13 | const path = require('path')
14 | 
15 | // https://vitejs.dev/config/
16 | export default defineConfig({
17 |   plugins: [vue()],
18 |   resolve: {
19 |     alias: {
20 |       '@': path.resolve(__dirname, './src'),
21 |     },
22 |   },
23 |   optimizeDeps: {
24 |     include: [
25 |       'vue-demi'
26 |     ]
27 |   },
28 |   build: {
29 |     lib: {
30 |       entry: path.resolve(__dirname, 'src/index.ts'),
31 |       name: 'vuejs-confirm-dialog',
32 |       fileName: (format) => `vuejs-confirm-dialog.${format}.js`,
33 |     },
34 |     rollupOptions: {
35 |       external: ['vue'],
36 |       output: {
37 |         globals: {
38 |           vue: 'Vue',
39 |         },
40 |       },
41 |     },
42 |     commonjsOptions: {
43 |       include: [/vue-demi/, /node_modules/]
44 |     }
45 |   },
46 |   test: {
47 |     environment: 'happy-dom'
48 |   }
49 | })
50 | 


--------------------------------------------------------------------------------