Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@sneppy/vue-pop

3.0.0-beta.5 • Public • Published

vue-pop

vue-pop is a Vue plugin that makes managing pop-ups and notifications a breeze.

This branch hosts a version of vue-pop compatible with Vue 3

If you are using Vue 2 you should install the older release, @sneppy/vue-pop@0.1.5

Contributors

Installation

vue-pop can be installed via npm:

$ npm i -S @sneppy/vue-pop

Basic usage

Create a new instance of Pop and tell Vue to use it:

import { createApp } from 'vue';
import Pop from './'
import App from './App.vue'
 
export let pop = new Pop
 
createApp(App)
    .use(pop)
    .mount('#app')
 

Place a <pop-view/> somewhere:

<template>
    <div id="App">
        <router-view/>
        <pop-view/>
    </div>
</template>

Next, import the Pop instance in some component, and use Pop.push() to push a popup window on the stack:

import { pop } from '@/main'
 
export default {
    name: 'SomeComp',
 
    setup() {
 
        const onClick = () => pop.push({
            comp: /* Component or async component */
        })
    }
}

You can pop the topmost popup anytime using Pop.pop().

Props can be passed down to the popup component like this:

pop.push({
    comp: Message,
    props: {
        title: 'Message title',
        text: 'Message text'
    }
})

You may also listen for events emitted by the component:

pop.push({
    comp: ConfirmDialog,
    props: {
        message: 'Are you sure you want to exit'
    },
    on: {
        'confirm': () => doStuff(),
        'cancel': () => pop.pop() // Close popup
    }
})

Note that the popup component is rendered as-is, which means that usually you will have to write some more HTML and CSS to make it look like an actual component.

vue-pop comes with a predefined wrapper, which you can enable by passing the component as a prop:

pop.push({
    props: {
        comp: ConfirmDialog,
        message: 'Are you sure you want to exit'
    },
    on: {
        'confirm': () => doStuff(),
        'cancel': () => pop.pop() // Close popup
    }
})

The wrapper component generates the following HTML:

<div class="pop-wrapper">
    <div class="pop-overlay"></div>
    <div class="pop-content">
        <Component/>
    </div>
</div>

You can style the wrapper using these classes.

Notifications

vue-pop also has an easy way to handle simple notifications. To enable notifications, create a new Notif instance right after creating the Pop instance:

let pop = new Pop
let notif = new Notif(pop)

You will also need to create a dedicated view somewhere:

 
<template>
    <div id="App">
        <router-view/>
        <pop-view/>
        <pop-view name="notif"/>
    </div>
</template>

The name attribute designate that view as the notification view.

The notif object has various methods that determine the type of notification:

method type
log or info log message
done or doneall success message
warn warning message
error error message

All methods are invoked with a plain string message as first parameter and a time duration (ms) as second parameter:

notif.done('Personal data updated', 3000)

The time duration may be undefined, in which case you will need to manually pop the notification with Notif.pop().

By default, notifications are displayed in a bar that fills the top of the screen. You can change the position of notifications with the attribute position on the notif <pop-view/>:

<pop-view name="notif" position="right bottom"/>

Any combination of the following keywords is accepted: left, center, right, fill and top, middle, bottom.

Note that you will also need to import the styles in src/style.

Multiple views

You can define multiple views, usually with different names. In order to address a certain view, you must provide its name in Pop.push() and Pop.pop():

<pop-view name="messages"/>
<pop-view name="other"/>
pop.push({
    comp: SomeComp
}, 'messages')
 
pop.pop('other')

The name is also passed as an attribute view-name and can be use to style the wrapper component of that view:

.pop-wrapper[view-name=messages] {
    ...
}

Install

npm i @sneppy/vue-pop

DownloadsWeekly Downloads

18

Version

3.0.0-beta.5

License

none

Unpacked Size

666 kB

Total Files

21

Last publish

Collaborators

  • avatar