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.
a11y-vue-dialog
Advanced tools
Readme
vue@2
and vue@3
🚧Detailed documentation and additional info is available at documentation site
npm i a11y-vue-dialog
# or
yarn add a11y-dialog
A renderless/headless component provides all the functionality required to build a proper Dialog
, but gives zero f*cks about your styles. As such you have full control over it and have to DYI. Here's a basic example on how to do it:
<!-- AppBaseDialog.vue -->
<template>
<a11y-dialog
v-bind="$attrs"
v-on="$listeners"
v-slot:default="{ rootRef, dialogRef, titleRef, closeRef }"
>
<div v-bind="rootRef.prop">
<!-- Bindings do the accessibility attributes for you -->
<div v-bind="dialogRef.props" v-on="dialogRef.listeners">
<h1 v-bind="titleRef.props">{{ title }}</h1>
<button v-bind="closeRef.props" v-on="closeRef.listeners">
</div>
</div>
...
<slot />
</a11y-dialog>
</template>
<script>
import { A11yDialog } from 'a11y-dialog'
export default {
name: 'AppBaseDialog',
components: { A11yDialog },
props: {
title: {
type: String,
required: true
}
}
}
</script>
<!-- At any View.vue, after import AppBaseDialog -->
<template>
<div id="page">
<button @click="isDialogOpen = true">
<app-base-dialog
title="Hello world"
:open="isDialogOpen"
@close="openMyModal = false"
@confirm="handSubmit"
>
My markup, my rules.
</app-base-dialog>
</div>
</template>
Voilá, checkout a working example on CodeSandbox.
Detailed documentation and additional info is available at documentation site
A playground is used to test the component locally. It uses vue/cli
instant prototyping feature, so the downside is that you have to install it globally.
yarn install
yarn play
Thanks to all this packages for inspiration and guidance.
portal-vue|vue-simple-portal
from @LinusBorg which makes escaping overflow traps easy peasya11y-dialog
(vanilla) from @KittyGiraudel
to lead the path that ended herevue-a11y-dialog
(wrapper around ^) from @morkro
for the motivation to build a pure vue alternative to it.MIT © Renato de Leão
FAQs
An accessible dialog component made for Vue
The npm package a11y-vue-dialog receives a total of 137 weekly downloads. As such, a11y-vue-dialog popularity was classified as not popular.
We found that a11y-vue-dialog demonstrated a healthy version release cadence and project activity because the last version was released less than 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.