kouts / vue-modal Goto Github PK

View Code? Open in Web Editor NEW

128.0 4.0 16.0 4.1 MB

A customizable, stackable, and lightweight modal component for Vue.

Home Page: https://vue-modal-demo.netlify.app/

License: MIT License

Vue 40.79% JavaScript 38.19% HTML 16.92% Shell 0.34% SCSS 3.76%

vue modal popup dialog a11y vue-modal stackable drawer sidebar sidebar-menu

vue-modal's Introduction

vue-modal

A customizable, stackable, and lightweight modal component for Vue.

🔥 HEADS UP! You're currently looking at vue-modal branch for Vue.js 2.
If you're looking for a Vue.js 3 compatible version of vue-modal, please check out the next branch.

vue-modal is designed with web applications in mind and tries to stick as much as possible to the accessibility best practices set in the WAI-ARIA Dialog (Modal) section of W3C.

Features at a glance

Lightweight, minified gzipped version is < 4kb
Opens and closes with a data variable using v-model
Includes sensible default styling but it's also highly customizable via user CSS classes and styles
Override modal title and content via slots
Modal intro and outro effects using CSS animation classes
Exposes Component events - close, before-open, opening, after-open, before-close, closing, after-close
Scrollable when its contents exceed screen height
Closeable by clicking on the upper right "x", the overlay or the esc key
Stackable - Multiple modal windows on top of each other
Ability to set initial focus on an element when the modal window opens, just set the autofocus attribute on an element inside the modal
Focus management traps keyboard focus - tabbed navigation inside the modal window
Ability to have unclosable modal windows
Render on demand or stay always in DOM with "live" mode
Modals appended to <body> by default, ability to append to a custom element

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera
IE11*, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

⚠️ * For IE11 Compatibility an Object.assign polyfill is required.

Click here for documentation and examples https://vue-modal-demo.netlify.app/

Development

In order to start development:

npm i
npm run watch

vue-modal's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology massimiliano76 arvinhsieh cynthiaomovoiye figurosity kbondarchuk s2001wincrown joeth bboy114crew aminkammoun mirekdlugosz anilfelix ed-ward1993 vicenterusso narsis77 muhm21cn

vue-modal's Issues

Add drawer examples

Add examples in the documentation showing drawer/panel extendability.

$listeners and $attrs error in console

Hi, nice package it looks great!

When using i did come across some issues in the console, everything still seems to be working fine. The errors appear once the modal is shown

[Vue warn]: $listeners is readonly.

found in

---> <VueSimplePortal>
       <VueModal>
         <AddProductWithoutOptions> at resources/js/frontend/components/AddProductWithoutOptions.vue
           <Root>

[Vue warn]: $attrs is readonly.

found in

---> <VueSimplePortal>
       <VueModal>
         <AddProductWithoutOptions> at resources/js/frontend/components/AddProductWithoutOptions.vue
           <Root>

I'm importing the package using webpack (laravel mix)

import VueModal from '@kouts/vue-modal';
Vue.component('Modal', VueModal);

const app = new Vue({
    el: '#app',
});

<button class="btn btn-primary" @click="modal = !modal">Open modal</button>

<modal v-model="modal">

</modal>

Add examples for styling

Add examples in the documentation showing styling customization of the modal.

Disable click outside

Hello

I have just stumbled upon your component and am curious if a prop exists to prevent the closing of dialog when clicking outside the window? I don't see a prop for this, thus reason for asking?

Does the enableClose control this by chance?

Defining z-index (assuming)

Hello

I am using this project for many of our application modals and all is working great (thank you)

I have run into a situation where I need to show a modal on top of another, but when the second dialog is displayed, it is actually "under" (see screenshot) the previous dialog and cant seem to figure out where to address the issue

I am assuming it can be solved with z-index (I am not very keen with CSS).

Do you have any advise as to where I could set the z-index of the second modal so it is always on top of the other modal dialogs.

show blank

"vue": "^2.6.11",

Is there any support for server side rendering

Hello and thanks for the great work.

I am using the extension in a nuxt app but it does not render when building. So I was wondering if there is a way to support server side rendering?

thank you

Dialog window size?

Hello

How would I go about setting the width and height of the dialog?

All seems to be working as I would expect, but the actual size of the dialog is pretty big (mostly the width).

How would one go about controlling the width?

remove autofocus

Hi,
How can I remove the autofocus or a selector to enable/disable?

afterOpen()
// this.handleFocus(this.$refs['vm-wrapper'])

Also, is it a way to create a modal from javascript like awesome-notifications library?

thank you

n.default.extend

Uncaught TypeError: n.default.extend is not a function.

I'am using Vue 3.

Modal contents exceed modal width

What would cause this UI artifact? It is a pretty simple dialog so far as I can gather. I have tried adjusting various classes, etc. which are exposed as props, but nothing helps

How do you style .vm-content?

the main content div has a class of .vm-content which applies some padding. I want to change the padding values.

I can't see how to do that.

Any help much appreciated.

Add tests

Add cypress tests for all modal functionality.

How to pass Id from button to Modal

Hello, First is First Package is great. Thanks for your work. In my project I was using your package I was trying to pass an ID from button to Modal where I'm loading child component to display the dynamic content. I have tried to pass showModal(ID) but it is giving an error. so here is my snippet:

Getting error when I try to pass an ID in showModal
<button @click="showModal(ID)=true"> {{titles}} </button>
<Modal v-model="showModal" :title="modalTitle"> <child-modal ID="ID"></child-modal> </Modal>

Can you help me with how to achieve this in my case. Thanks in advance.

Add examples for animations

Adde examples in the documentation showing customization of the animation transitions using CSS animation libraries.

v-model does not work with JS expression

If I use v-model with a Boolean variable, everything works fine:
v-model="isOpen"

But If I use a JavaScript expression. Things fall apart:
v-model="modalToOpenId === 'teamMemberX'"

I I put that same JavaScript expression in a computed and use that as the v-model variable, it works again.
I have never seen this not working anywhere before, so I have no idea what is going on with it.

kouts / vue-modal Goto Github PK

vue-modal's Introduction

vue-modal

Features at a glance

Browsers support

Development

vue-modal's People

Contributors

Stargazers

Watchers

Forkers

vue-modal's Issues

Recommend Projects

Recommend Topics

Recommend Org