@odyzeo/popup

Simple popup component plugin with global triggers and renderless logic.

Demo

Installation

Usage

import Popup from '@odyzeo/popup';

Vue.use(Popup, {
    parentSelector: '#see-props'
});

In your template:

<button
    type="button"
    @click.prevent="$popup.show('example')"
>
    Example
</button>

Anywhere else in your project:

<popup name="example">
    <template #default="{ close, ok }">
        <div class="placeholder">
            Some kind of content!
            <br><br>
            <button
                type="button"
                @click.prevent="ok"
            >
                Accept
            </button>
            <button
                type="button"
                @click.prevent="close"
            >
                Close
            </button>
        </div>
    </template>
</popup>

Props

Property name	Type	Default value	Description
name	string		Set global selector for your popup
type	string	fixed	Change behaviour inside document: fixed - prevents document scrolling, absolute - enable document scrolling
disable-esc	boolean	false	Disable closing popup on 'Esc' key
disable-off-click	boolean	false	Disable closing popup on click outside the popup
inline	boolean	false	Append popup inside its original parent
parentSelector	string	null	Apply styles and popup inside this element not the body. Useful when you scroll inside different element than body.
transition	string	fade	Change or remove opening and closing transitions. Available transitions: fade slide-top slide-right slide-bottom slide-left null - no transition You can even use your own transition name with styles. It will be transpiled to popup-transition--${transition}
menu	string	null	Will adjust popup inner container to behave as menu wrapper based on direction. Directions: top right bottom left
v-model	boolean	false	v-model property is always automatically synced with visible state and you can show/hide using v-model

Scope props

Event name	Description
close	Closes popup with emitting event 'close'
ok	Closes popup without emitting event 'close'

Events

Event	Arguments	Description
close	popupName - Name of closed popup	Event emitted when popup is closed
show	popupName - Name of opened popup	Event emitted when popup is opened

Import styles

<script>
import '@odyzeo/popup/dist/popup.css';

export default {
    name: 'App',
};
</script>

Methods

Methods can be invoked globally via plugin command:

Show specific popup

this.$popup.show('name');

Hide specific popup - when no param provided hide all current popups

this.$popup.hide('name');

Get currently opened popups names - returns Set

this.$popup.currentPopups

Check if popup is open

this.$popup.currentPopups.has('name')

Development

npm run serve

Publishing

# Assuming all tested, committed and works like a charm!
npm version {patch|minor|major} # See semantic version
npm run build-lib
npm run publish
git push
git push --tags # Add release on GitHub

TODO

• drag and drop
• tests