@odyzeo/popup

@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

Scope props

Events

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