![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
vuedl
Advanced tools
Readme
This module will help you to work with modal dialogs in your project
Inspire of Nuxt.js logic, vuedl also has asyncData
, fetch
, layout
and middleware
handlers
NOTE: Module is in initial development. Anything may change at any time.
Install the package from npm
npm install vuedl
import vuedl from 'vuedl'
Vue.use(vuedl, {
context,
property
})
Where
-- context
: is object with context of your application, such as i18n, store, router, etc
-- property
: is name of Vue property, for access, default is $dialog
After instalation, instance of dialog manager will be available in Vue.prototype.$dialog, or inside Vue instances this.$dialog
import MyDialog from './MyDialog'
const dialog = await this.$dialog.show(MyDialog, params, options)
dialog
will be instance of DialogManager
Register global dialog component, then it will be available in any vue module
Vue.prototype.$dialog.component('myDialog', MyDialog)
Then you can use it in any code
this.$dialog.myDialog(params, options)
const result = await this.$dialog.showAndWait(MyDialog, params)
or
const dialog = await this.$dialog.show(MyDialog, params)
const result = dialog.wait()
result
will be object of user inputs, or clicked button, depending on what will be sent in dialog component by the:
this.$emit('submit', inputs)
vuedl can use layout templates for wrapping dialogs For registering your own layouts template use
Vue.prototype.$dialog.layout('default', MyLayout)
Example of the layout template
<v-dialog v-model="isActive" :max-width="width">
<slot/>
</v-dialog>
vuedl module will put in layout component mixin with params:
-- width
: Number - max width of component
-- isActive
: Boolean - is dialog active
-- show
: Function
-- close
: Function
If dialog showed without layout, this mixin will integrate to dialog instance
After this dialog component must have parameter
{
layout: 'default'
...
}
Sometimes you just want to fetch data and pre-render it on the server without using a store. asyncData
is called every time before loading the dialog component. This method receives [the context] as the first argument, you can use it to fetch some data and v-dialog will merge it with the component data.
You do NOT have access of the component instance through
this
insideasyncData
because it is called before initiating the component
v-dialog offers you different ways to use asyncData
. Choose the one you're the most familiar with:
fetch
is use for calling store methods, and not impact to instance data
Promise
. Vuedl will wait for the promise to be resolved before rendering the component.callback(err, data)
export default {
asyncData ({ params }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
}
}
export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
export default {
asyncData ({ params }, callback) {
axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
callback(null, { title: res.data.title })
})
}
}
The result from asyncData will be merged with data. You can display the data inside your template like you're used to doing:
<template>
<h1>{{ title }}</h1>
</template>
When dialog component has an asyncData
or fetch
functions, it will show overlay before calling this methods. Overlay will block main window and show loading cursor.
If you want to register your own overlays template
Vue.prototype.$dialog.overlay('default', MyOverlay)
vuedl has implementations of confirm, alert warning, error or prompt dialog
this.$dialog.confirm('Do you really want to exit?').then(res => {
})
const res = await this.$dialog.warning('Do you really want to exit?')
...
const res = await this.$dialog.error('Do you really want to exit?')
let res = await this.$dialog.confirm('Do you really want to exit?', {title: 'Warning'})
if (res) {
...
}
res will be true or false
You can format your message with arbitrary HTML - make sure you don't include any user-provided content here:
this.$dialog.confirm('Please do not do this.<br>Do you really want to exit?'}).then(res => {
})
For registering own Confirm template
Vue.prototype.$dialog.component('Confirm', MyConfirmDialog)
For registering own Prompt template
Vue.prototype.$dialog.component('Prompt', MyPromptDialog)
FAQs
Vue dialog helper
The npm package vuedl receives a total of 439 weekly downloads. As such, vuedl popularity was classified as not popular.
We found that vuedl demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.