https://github.com/jfusco/vue-popover

Reusable popover component for Vue
https://github.com/jfusco/vue-popover

dropdown isparta istanbul jasmine karma popover popoverbox sinon vue vue-component vuejs vuejs2

Last synced: 3 days ago
JSON representation

Reusable popover component for Vue

• Host: GitHub
• URL: https://github.com/jfusco/vue-popover
• Owner: JFusco
• License: mit
• Created: 2017-03-09T13:02:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-17T12:45:37.000Z (over 5 years ago)
• Last Synced: 2024-04-25T16:21:33.159Z (5 months ago)
• Topics: dropdown, isparta, istanbul, jasmine, karma, popover, popoverbox, sinon, vue, vue-component, vuejs, vuejs2
• Language: JavaScript
• Homepage: https://jfusco.github.io/vue-popover
• Size: 936 KB
• Stars: 22
• Watchers: 1
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-popover

[![Build Status][build-image]][build-url]

[![peerDependency Status][peer-dep-image]][peer-dep-url]

[![devDependency Status][dev-dep-image]][dev-dep-url]

[![MIT][mit-image]][mit-url]

[![npm][npm-version-image]][npm-url]

> Reusable popover component for Vue. This is purely functional, it's a completely "naked" and blank canvas component. There are no styles for this component except a z-index, which you can override.

## Demo ##

https://jfusco.github.io/vue-popover

## Getting Started ##

#### Installation

From the root of your project.

```sh

npm install vue-popover --save

```

## Usage

Simple implementation of popover. See [options available](#options) below.

```js

	


		

			


				


					
npmjs.com

					
github.com

				

			

		

	


	import popover from 'popover'

	export default {

		components: {

			popover

		}

	}

```



#### Options

* **[`name`](#name)**

* **[`popover:open`](#popoverOpen)**

* **[`popover:close`](#popoverClose)**

* **[`slots`](#slots)**

* **[`closeOnContentClick`](#closeOnContentClick)**

* **[`slim`](#slim)**



##### name ~ required

The `string` to be used for a unique ID for the component instance, also used to set aria attributes

```js

	


		

	


```



##### popover:open ~ optional

An `function` triggered any time the instance of the popover is opened

```js

	


		

	


	import popover from 'popover'

	export default {

		components: {

			popover

		},

		methods: {

			onPopoverOpen(){

				console.log('popover open')

			}

		}

	}

```



##### popover:close ~ optional

An `function` triggered any time the instance of the popover is closed

```js

	


		

	


	import popover from 'popover'

	export default {

		components: {

			popover

		},

		methods: {

			onPopoverClose(){

				console.log('popover close')

			}

		}

	}

```



##### available slots

* `face` - Set custom face for the popover

* `content` - Set custom content for the popover

```js

	


		

			


				popover face

			


			


				
Some custom content for popover

			

		

	


```



##### closeOnContentClick ~ optional

Set to `false` if you don't want the popover to close if you click its contents. Useful if the popover contains elements you interact with (e.g. buttons and textboxes). This defaults to `true` when not set.

```js

	


		

			


				popover face

			


			


				Some button

				

			

		

	


```



##### slim ~ optional

Defaults to `false`, if enabled, it means the "face" slot is required and

the rendered component will be wrapper-less, there will be no further elements

around the "face" slot. To do this the `onPopoverToggle` method is passed to

the slot (with `slim` the slot becomes scoped).

*Important: the content slot will render inside the root element of the face slot.

As the content slot still has a wrapper and will appear absolutely positioned, the

face slot will probably need to be positioned, `relative` will work well for most

use cases.*

```js

	


		

			

				slim popover

			


				
Some custom content for popover

			

		

	


```

## Styling

#### Installation

Import the main SCSS file in to your application SCSS files

​```scss

@import "node_modules/vue-popover/src/component/scss/styles.scss";

```

There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.

**Any overriden variables needs to go above the `@import` statement to take effect**

​```scss

//-- Global UI

$popover-z-index

```

If you don't care to override variables and just want to override actual styles you may choose to import the minified compiled version of the css instead

```scss

@import "node_modules/vue-popover/dist/styles.css";

```

## Tests ##

```

npm test

```

[build-image]: https://travis-ci.org/JFusco/vue-popover.svg?branch=master

[build-url]: https://travis-ci.org/JFusco/vue-popover

[mit-image]: https://img.shields.io/npm/l/vue-popover.svg?style=flat-square

[mit-url]: https://github.com/JFusco/vue-popover/blob/master/LICENSE

[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000

[npm-url]: https://www.npmjs.com/package/vue-popover

[dev-dep-image]: https://david-dm.org/JFusco/vue-popover/dev-status.svg

[dev-dep-url]: https://david-dm.org/JFusco/vue-popover?type=dev

[peer-dep-image]: https://david-dm.org/JFusco/vue-popover/peer-status.svg

[peer-dep-url]: https://david-dm.org/JFusco/vue-popover?type=peer