Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-material-modal-dialog
Advanced tools
Readme
In Vue Material, components showing
a dialog have to contain an MdDialog
,
or a component based on MdDialog
. This couples the modal dialog to the surrounding component
and creates a separate dialog instance/comment placeholder for each occurrence, eventually
multiplied by v-for
.
This repository provides a component, MdModalDialog
, that avoids this situation.
It acts as a substitute for Vue Material's MdDialog
, offering the following additional features:
MdModalDialog
s are completely decoupled from other componentsimport
ed but not to be placed in the <template>
of other componentsMdModalDialog
supports the same props and events as MdDialog
MdModalDialog
s from anywhere in your app (e.g. from a Vuex action),
not only from component methodsMdModalDialog
instanceA simple online example is available here (example source code).
As a module:
$ npm install vue-material-modal-dialog
or
$ yarn add vue-material-modal-dialog
Included as <script>
:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-material-modal-dialog/dist/components.css">
<script src="https://cdn.jsdelivr.net/npm/vue-material-modal-dialog/dist/components.min.js"></script>
MdModalDialog
componentimport MdModalDialog from 'vue-material-modal-dialog'
import 'vue-material-modal-dialog/dist/md-modal-dialog.css'
...
// This must come after Vue.use(VueMaterial):
Vue.use(MdModalDialog)
MdModalDialog
provides these functions:
vm.$modal.show(dialog, [props])
, Vue.$modal.show(dialog, [props])
{Vue component} dialog
{Object} [props]
Shows a dialog component in pristine state, can pass props
to the dialog instance; does not
preserve the dialog state across show()
calls.
Returns a Promise
that can be fulfilled by vm.$modal.submit()
and
rejected by vm.$modal.cancel()
. Either function closes the dialog.
vm.$modal.submit([result])
, Vue.$modal.submit([result])
{Any} [result]
Closes the dialog and fulfills the Promise
; can return a result
.
vm.$modal.cancel([reason])
, Vue.$modal.cancel([reason])
{Any} [reason]
Closes the dialog and rejects the Promise
; can return a reason
for rejection.
Just use MdModalDialog
in the same way as you would use MdDialog
(without md-active
),
for example for an input dialog:
<template>
<md-modal-dialog>
<md-dialog-title>Guess a number</md-dialog-title>
<md-dialog-content>
<md-field>
<label>A number</label>
<md-input type="number" v-model="number" />
</md-field>
</md-dialog-content>
<md-dialog-actions>
<md-button @click="$modal.submit(number)">Submit</md-button>
<md-button @click="$modal.cancel()">Cancel</md-button>
</md-dialog-actions>
</md-modal-dialog>
</template>
<script>
export default {
name: 'GuessDialog',
...
}
</script>
Showing GuessDialog
and receiving the guessed number in some other component:
vm.$modal
.show(GuessDialog)
.then(number => {
// Do something with "number"
})
.catch(reason => {
// In order to avoid runtime warnings, a catch clause
// is required even if "reason" is ignored
})
}
Since MdModalDialog
s are not placed like regular components, no props
can be passed to them.
However, using v-slot
, we can pass properties to such a dialog every time it is shown.
Let us extend the example with a configurable upper limit max
for the guessed number:
<template>
<md-modal-dialog v-slot="{ max }">
<md-dialog-title>Guess a number up to {{ max }}</md-dialog-title>
<md-dialog-content>
<md-field>
<label>A number</label>
<md-input type="number" v-model="number" :max="max" />
</md-field>
</md-dialog-content>
...
</template>
...
Showing GuessDialog
and passing a max
value:
vm.$modal
.show(GuessDialog, { max: 42 })
.then(...)
.catch(...)
In the methods
of the modal dialog component, such properties can be accessed through
the object vm.$modal.slotProps
.
ESC
and outside clicksESC
,then this is one possible approach:
<template>
<md-modal-dialog
@md-clicked-outside="$modal.cancel('byClick')"
@keydown.esc="$modal.cancel('byEsc')">
...
<md-button @click="$modal.cancel('byButton')">Cancel</md-button>
...
</md-modal-dialog>
</template>
Software: MIT
Documentation: CC-BY-SA 4.0
FAQs
A reusable modal dialog for Vue Material
The npm package vue-material-modal-dialog receives a total of 95 weekly downloads. As such, vue-material-modal-dialog popularity was classified as not popular.
We found that vue-material-modal-dialog 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.