@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