@odyzeo/popup NPM

@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