Noteworthy Programs Map

    vuejs-confirm-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.5 • Public • Published

    vuejs-confirm-dialog

    This library just makes it simple to create, reuse, promisify and build chains of modal dialogs in Vue.js.

    Made with Composition API.

    Powered by vue-demi, so you can use it in Vue 2, but this required @vue/composition-api >= v1.1

    ⚠️ Warning! Work in progress. Don't use it in production! Breaking changes may occur!

    About

    This is a library for creating reusable dialogs. It takes your modal component and builds a structure for dialogs that wait for user confirmation. You can work with it like with promises or work with dialog hooks that the library generates for you.

    Installation

    in 3 steps

    Step 0

    Add the package to your node_modules

    npm i vuejs-confirm-dialog

    Step 1

    Install the plugin:

    // main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    import * as ConfirmDialog from 'vuejs-confirm-dialog'
    
    createApp(App).use(ConfirmDialog).mount('#app')

    Step 2

    Add DialodsWrapper to App.vue template:

    <!-- App.vue -->
    <template>
      <div class="app">
      </div>
    
      <!-- put it in the template of your App.vue file to make this library work -->
      <!-- Don't need import the component, if you installed the plugin -->
      <DialogsWrapper />
    </template>

    And that's it. Now you can use it.

    Usage

    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).

    <!-- ModalDialog.vue -->
    <script setup>
      const emit = defineEmits(['confirm', 'cancel'])
    </script>
    
    <template>
      <div>
        <!-- The modal component body -->
        <button @click="emit('confirm')">Confirm</button>
        <button @click="emit('cancel')">Cancel</button>
      </div>
    </template>

    Use this modal window wherever you want in your project:

    <!-- App.vue -->
    <script setup>
    import ModalDialog from './ModalDialog.vue'
    import { createConfirmDialog } from 'vuejs-confirm-dialog'
    
    const { reveal, onConfirm, onCancel } = createConfirmDialog(ModalDialog)
    
    reveal()
    
    onConfirm(() => {
      console.log('Confirmed!')
    })
    onCancel(() => {
      console.log('Canceled!')
    })
    </script>

    Two way of usage

    The library lets you decide how to use it. The first way is to use hooks: onConfirm - hook gets a callback that runs after the user confirmed the modal message onCancel - run callback if the user decides to click cancel

    The second way is promisify modal dialog. reveal function returns a Promise, that resolves data and isCanceled boolean from the dialog after the user commits the action.

    for example(not real):

    <script setup>
    import ModalDialog from './ModalDialog.vue'
    import { createConfirmDialog } from 'vuejs-confirm-dialog'
    
    const dialog = createConfirmDialog(ModalDialog)
    
    const confirmDelete = async () => {
      const { data, isCanceled } = await dialog.reveal()
    
      if(!isCanceled) deleteYourData(data)
    
      console.log(`You ${ isCanceled ? 'canceled' : 'confirmed' } deleting data.`)
    }
    </script>

    Passing data to/from the dialog

    It will be not so useful if we will not have an option to pass data to and from а component. 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 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 initial props that the dialog component will receive.

    You can change props values during calling reveal function by passing to it 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.

    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 async/await syntax if you prefer to.

    The full example, that displays passing data, reusing, and modal chains:

    <script setup>
    import LoginDialog from './LoginDialog.vue'
    import InfoModal from './InfoModal.vue'
    import { createConfirmDialog } from 'vuejs-confirm-dialog'
    import { ref } from 'vue'
    
    const loginDialog = createConfirmDialog(LoginDialog)
    const infoModal = createConfirmDialog(InfoModal, { title: 'Some Title' })
    
    const user = ref(null)
    
    const login = async () => {
      const result = await infoModal.reveal({ title: 'Please log in to the system' })
    
      if(!result.isCanceled) {
        const { data, isCanceled } = await loginDialog.reveal()
        if(!isCanceled) {
          user.value = data
    
          infoModal.reveal({ title: 'You have successfully logged in.' })
        } else {
          infoModal.reveal({ title: 'You were unable to log in and will not be able to access your data.' })
        }
      }
    }
    </script>

    Using with Options API

    If you prefer you can use it with Options API inside methods.

    import Dialog from './Dialog.vue'
    import { createConfirmDialog } from 'vuejs-confirm-dialog'
    import { ref } from 'vue'
    
    export default {
      data(){
        return {
          isConfirmed: false
        }
      },
      methods: {
        showDialog(){
          const dialog = createConfirmDialog(Dialog)
    
          dialog.onConfirm(() => {
            this.isConfirmed = true
          })
    
          dialog.reveal()
        }
      }
    }

    For more info check this full Vue 3 example.

    Demo

    Clone the project, install dependencies and run the following command to see the demo:

    pnpm run demo

    The demo is styled by beautiful daisyUI.

    Roadmap

    • [x] Make it work!

    • [x] Make it work without show prop

    • [x] TSDoc

    • [x] Change testing tools to Vitest

    • [x] Improove tests

    • [x] Improve docs( reuse, passing props ...)

    • [ ] More examples

    Thanks

    Inspired by Vueuse and vue-modal-dialogs. Thanks to all creators of these projects ❤️!

    Keep calm and support 🇺🇦!

    Install

    npm i vuejs-confirm-dialog

    DownloadsWeekly Downloads

    8

    Version

    0.3.5

    License

    MIT

    Unpacked Size

    26.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • harmyder