Nanotechnology Promises Much

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

    2.0.17 • Public • Published

    vuetify-dialog

    This module will help you work with vuetify dialogs without annoying templates

    Implementation of vuedl dialog helper with Vuetify.js framework

    This module will help you to work with modal dialogs in your project

    Coverage Status

    FOSSA Status

    Vuedl module documentation

    This module uses vuedl to automatically work with dialogs and DOM See docs here

    Setup

    Install the package from npm

    IMPORTANT: After version 0.4.0 css and js were split and therefore you have to import css manually

    Vuetify 2

    For Vuetify 2 please use the latest version of vuetify-dialog@2.X.X

    Demo with Vuetify 2

    Demo in CodeSandbox,
    Demo source

    npm install vuetify-dialog
    
    // need instance of vuetify, for example
    import vuetify from '@/plugins/vuetify'
    
    import VuetifyDialog from 'vuetify-dialog'
    import 'vuetify-dialog/dist/vuetify-dialog.css'
    
    Vue.use(VuetifyDialog, {
      context: {
        vuetify
      }
    })

    Vuetify 1

    For Vuetify 1 you need to use vuetify-dialog@0.4.0-beta.2

    Demo with Vuetify 1

    Demo with Vuetify 1 CodeSandbox,
    Demo source

    npm install vuetify-dialog@0.4.0-beta.2
    
    import VuetifyDialog from 'vuetify-dialog'
    import 'vuetify-dialog/dist/vuetify-dialog.css'
    Vue.use(VuetifyDialog)

    or use with extra configuration

    import VuetifyDialog from 'vuetify-dialog'
    import 'vuetify-dialog/dist/vuetify-dialog.css'
    Vue.use(VuetifyDialog, {
      context,
      property,
      confirm: {
        actions: {
          false: 'No',
          true: {
            text: 'Yes',
            color: 'primary'
          }
        },
        icon: false, // to disable icon just put false
        width: 500
      },
      warning: {},
      error: {},
      prompt: {}
    })
    • context - the context of your application, such as store, axios, router etc.
    • property - the property, which will integrate to Vue. Default is $dialog
    • confirm - confirm dialog params
    • warning - warning dialog params
    • error - error dialog params
    • prompt - prompt dialog params Where:
      • actions - dialog buttons config
      • icon - dialog icon in String, example 'warning'. Note, if you want to hide icon, just set parameter to false
      • width - dialog max width

    ♻️ Usage with Nuxt.js

    Add vuetify-dialog/nuxt to modules section of nuxt.config.js

    Module automatically add to dialog nuxt context data, such as router, route, i18n, $axios, etc

    {
      modules: [
        // Simple usage
        'vuetify-dialog/nuxt'
    
        // Optionally passing options in module configuration
        ['vuetify-dialog/nuxt', { property: '$dialog' }]
      ],
    
      // Optionally passing options in module top level configuration
      vuetifyDialog: {
        property: '$dialog'
        confirm: {}
        // ...
      }
    }

    If you using Typescript + Nuxt.js

    Add vuetify-dialog/types to the compilerOptions.types section of your project's tsconfig.json file:

    {
      "compilerOptions": {
        "types": [
          "vuetify-dialog/types"
        ]
      }
    }

    Simple confirm dialog

    const res = await this.$dialog.confirm({
      text: 'Do you really want to exit?',
      title: 'Warning'
    })

    Info dialog

    const res = await this.$dialog.info({
      text: 'File copied successfully',
      title: 'Info'
    })

    Warning dialog

    const res = await this.$dialog.warning({
      text: 'Do you really want to exit?',
      title: 'Warning'
    })

    Error dialog

    this.$dialog.error({
      text: 'Cannot delete this item',
      title: 'Error'
    })

    Prompt dialog

    let res = await this.$dialog.prompt({
      text: 'Your name',
      title: 'Please input your name',
    })

    Prompt dialog with password

    let res = await this.$dialog.prompt({
      title: 'Password balidation',
      text: 'Enter your password',
      rules: [(v) => v.length >= 6 || 'Password must be at least 6 characters long'], // vuetify's v-text-field rules prop
      textField: {
        // Any addtional props/attrs that will be binded to v-text-field component
        type: 'password',
      }
    })

    Programmatically close dialog

    If property waitForResult set to false, then functions will return dialog instance

    Actually waitForResult = true make two steps

    1. dialogInstance = $dialog.show(component) // Show dialog
    2. return dialogInstance.wait() // Return promise

    Therefore to perform programmatically close dialog you have to set waitForResult to false and work with dialogInstance directly

      const dialogInstance = await this.$dialog.warning({
        title: this.title,
        text: this.text,
        waitForResult: false
      });
      setTimeout(() => {
        dialogInstance.close()
      } , 3000)
    
      // then you can wait for user reaction
      const userChoice = await dialogInstance.wait()
      // after idle 3000 sec - userChoice will be undefined
      this.$dialog.notify.info(userChoice)

    Notifications

    The notification component is used to convey important information to the user. Notification support positioning, removal delay and callbacks. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

    Notification uses v-alert component

    Props:

    • text - the text fo your message
      • type: String
    • options:
      • type: Object
      • properties:
        • position: one of top-left, top-right, bottom-left, bootom-right
        • timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
        • actions
    this.$dialog.notify.info('Test notification', {
      position: 'top-right',
      timeout: 5000
    })

    Toasts

    The toast component is used to display a quick message to a user. Toasts support positioning, removal delay and callbacks. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

    Toast uses v-snackbar component

    Props:

    • text - the text fo your message
      • type: String
    • options:
      • type: Object
      • properties:
        • position: one of top-left, top-right, bottom-left, bootom-right
        • timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
        • actions: - see below
    this.$dialog.message.info('Test', {
      position: 'top-left'
    })

    Actions

    To all dialogs you can put your own buttons Props:

    • key - the text fo your message
      • type: String
    • options:
      • type: Object
      • properties:
        • position: one of top-left, top-right, bottom-left, bootom-right
        • timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
        • actions: - see below
    {
      ...
      actions: {
        false: 'No',
        true: 'Yes'
      }
    }
    // result will be true, false, or undefined
    {
      ...
      actions: ['No', 'Yes']
    }
    // result will be 'No', 'Yes', or undefined

    You can also send full button options

    {
      actions: [{
        text: 'Yes', color: 'blue', key: true
      }]
    }

    Install

    npm i vuetify-dialog

    DownloadsWeekly Downloads

    4,053

    Version

    2.0.17

    License

    MIT

    Unpacked Size

    210 kB

    Total Files

    31

    Last publish

    Collaborators

    • yariksav