Naughty Praying Mantis
Publish your own packages to the world's most popular software ecosystem with npm Pro.Get started »

vue-slick-popover

0.1.2 • Public • Published

vue-slick-popover

Popover component using popper.js for Vue.js apps

Installation

npm install vue-slick-popover

Documentation

https://vue-slick-popover.netlify.com/docs

Demos

Simple usage

Dropdown menu

Temporary form

Onboarding

Usage

<template>
  <div id="app">
    <img ref="popoverReference" width="20%" src="./assets/logo.png" @click="openPopover">
    
    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Content</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>
import Vue from "vue"
import { VueSlickPopover, VueSlickPopoverContent } from "vue-slick-popover"
import "vue-slick-popover/dist/vue-slick-popover.css"
 
export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    },
    
    data() {
        return {
          isPopoverVisible: false,
          popoverOptions: {
            animation: "scale-fade",
            popoverReference: null,
            placement: "top",
            offset: "0,0"
          }
        }
      },
    
      mounted() {
        this.popoverOptions.popoverReference = this.$refs.popoverReference
      },
    
      methods: {
        closePopover() {
          this.isPopoverVisible = false
        },
    
        openPopover() {
          this.isPopoverVisible = true
        }
      }
}

Development

Launch visual tests

npm run watch

Build

Bundle the js and css of to the dist folder:

npm build

Publishing

The prepare hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first 
# It'll also commit it and create a tag 
npm version
# Push the bumped package and tags 
git push --follow-tags
# Ship it 🚀 
npm publish

License

MIT

Keywords

none

Install

npm i vue-slick-popover

DownloadsWeekly Downloads

15

Version

0.1.2

License

MIT

Unpacked Size

75 kB

Total Files

11

Last publish

Collaborators

  • avatar