v-dialogs

v-dialogs

A simple style useful dialog component collection for Vue3

• Alert Interactive dialog boxes, for notifications that require explicit feedback from the user
• Modal Modal container dialog, It is displayed at the center of the screen
• Drawer Another modal container dialog, It is displayed at the edge of the screen, and it is the better choice for quickly viewing details
• Message Silent message notification, displayed in the vertical center area of ​​the screen
• Toast Silent message notification, displayed in the corner of the screen
• Mask A screen mask that blocks user actions

If you are using vue 2.x version, please use v-dialogs 2.x version instead

Examples and Documentation

Documentation and examples please visit below sites

• Github pages

Features

• Simple style, makes it easier to apply in more UI
• Provides 6 types of dialogs: Modal, Drawer, Alert, Message, Mask and Toast
• Functional form of use
• Modal and Drawer provide DialogModalBox and DialogDrawerBox component form
• Alert, Message and Toast types provides message type quick access function
• Built-in 4 languages: Chinese, English, Japanese and Portuguese
• Globally instance(not recommended)

Installation

# npm
npm i v-dialogs
# yarn
yarn add v-dialogs
# pnpm
pnpm add v-dialogs

API

type MessageContent = string | VNode
type ComponentResult = VNode | Component
type ComponentContent = ComponentResult | (() => ComponentResult)

function DialogAlert(message?: MessageContent, callback?: Function, options?: AlertOptions): Function
function DialogMessage(message?: MessageContent, callback?: Function, options?: MessageOptions): Function
function DialogToast(message?: MessageContent, callback?: Function, options?: ToastOptions): Function
function DialogMask(message?: MessageContent, callback?: Function, options?: MaskOptions): Function
function DialogModal(component: ComponentContent, options?: ModalOptions): Function
function DialogDrawer(component: ComponentContent, options?: DrawerOptions): Function

Usage

Confirm and Message

import { DialogAlert, DialogMessage } from 'v-dialogs'

function deleteUser (userId) {
  DialogAlert('Deleted data cannot be recovered, are you sure?', () => {
    executeDeleteUser(userId).then(() => {
      DialogMessage('Delete complete.', { messageType: 'success' })
    })
  }, { messageType: 'confirm' })
}

Modal dialog

import { DialogModal, DialogAlert } from 'v-dialogs'
import UserProfile from './UserProfile.vue'

DialogModal(UserProfile, {
  width: 900,
  height: 600,
  title: 'User Profile',
  params: {
    userId: 1,
    userName: 'Terry Zeng'
  },
  callback: data => {
    DialogAlert(`Received message: ${data}`)
  }
})

Component form

<template>
  <div>
    <DialogDrawerBox v-model:visible="visible" >
      <UserProfile />
    </DialogDrawerBox>

    <button
      type="button"
      @click="openDialog"
    >Open Drawer</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DialogDrawerBox } from 'v-dialogs'

import UserProfile from './UserProfile.vue'

const visible = ref(false)

function openDialog () {
  visible.value = true
}
</script>

Fetch data

import { DialogMask, DialogMessage, DialogAlert } from 'v-dialogs'

function loadDataList () {
  const destroy = DialogMask()

  fetchData()
    .then(data => {
      list.value = data.list
      // Dismiss mask overlay
      destroy()
      DialogMessage('Data loaded successfully', { messageType: 'success' })
    })
    .catch(() => {
      DialogAlert('Data Load Failure', { messageType: 'error' })
    })
}

Message type quick access

Alert, Message and Toast types provides message type quick access function

import {
  DialogMessage
  DialogMessageSuccess
} from 'v-dialogs'

DialogMessageSuccess('Saved successfully!')
// Equivalent to
DialogMessage('Saved successfully!', { messageType: 'success' })

Globally instance

v-dialogs also provides a globally instance to open dialogs, you can use it in any component

The default instance name is $dlg

import { createApp } from 'vue'
import dialogs from 'v-dialogs'
import App from 'App.vue'

createApp(App).use(dialogs).mount('#app')

The global instance are only supported as a feature and are not recommended for use

Option API

export default {
  mounted () {
    this.$dlg.message('Saved successfully!')
  }
}

Composition API

import { getCurrentInstance } from 'vue'

// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg
const $dlg = getCurrentInstance().proxy.$dlg

$dlg.message('Saved successfully!')

Changelog

3.0.0 (2024-07-06)

Features

Public content

• Added Message、Drawer dialog types
• Added header prop to set the display of the header, title prop is only used to set the header text content
• Alert、Message、Toast dialog types added message type quick access function
• Added shake prop to set whether to apply the shaking animation reminder for area operations outside the dialog
• The default language change to English
• closeTime rename to duration

Alert

• Added colorfulShadow prop to specify whether to display the corresponding color shadow for warning、error and success message types

Mask

• Added pill prop to set whether to apply pill style to content panel
• Added icon prop to set whether display loading icon
• Added panel prop to set whether to display the content panel. If it is turned off, the content will be displayed directly on the mask
• Added appendTo prop to specify the target area to be covered by the mask

Toast

• Added offset prop set the distance between the dialog box and the edge of the screen
• position rename to placement, and removed two center placement options

Modal

• Added DialogModalBox component form of use