vue2-ppvr - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

		{
		"name": "vue2-ppvr",
		"version": "0.0.2",
		"version": "0.0.3",
		"description": "Vue.js 2+ popover component. Forked from https://github.com/euvl/vue-js-popover",
		@@ -5,0 +5,0 @@ "author": "semivori",

110

README.md

		@@ -1,29 +0,109 @@
		# vue2-ppvr
		[![npm version](https://badge.fury.io/js/vue2-ppvr.svg)](https://badge.fury.io/js/vue2-ppvr)

		This template should help get you started developing with Vue 3 in Vite.
		Forked from https://github.com/euvl/vue-js-popover, but with better dropdown and pointer positioning.

		## Recommended IDE Setup
		### Vue.js popover

		[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
		<p align="center">
		<img src="https://media.giphy.com/media/xUA7beKmTnr9fkbI6k/giphy.gif">
		</p>

		## Customize configuration
		[Original package live demo here](http://vue-js-dropdown.yev.io/)

		See [Vite Configuration Reference](https://vitejs.dev/config/).
		Install:

		## Project Setup
		```bash
		npm install vue2-ppvr --save
		```

		```sh
		npm install
		Import:

		```javascript
		import Vue from 'vue'
		import Popover from 'vue2-ppvr'

		Vue.use(Popover)
		```

		### Compile and Hot-Reload for Development
		Use:

		```sh
		npm run dev
		```vue
		<button v-popover:foo>Toggle popover</button>

		<popover name="foo">
		Hello
		</popover>
		```

		### Compile and Minify for Production
		Or:

		```sh
		npm run build
		```vue
		<button v-popover="{ name: 'foo' }">Toggle popover</button>
		```

		### Tooltip

		Plugin contains a simple wrapper for `Tooltip`. To use it you will have to:

		Set `tooltip` flag in your `main.js`:

		```javascript
		import VPopover from 'vue2-ppvr'
		Vue.use(VPopover, { tooltip: true })
		```

		Include `tooltip` component anywhere in the application:

		```vue
		<tooltip />
		```

		Assign message to any element:

		```vue
		<button v-popover:tooltip="'This is a string value'">My butt0n</button>
		```

		### Props

		\| Name \| Type \| Required \| Description \|
		\| ---------- \| ---------------------- \| -------- \| ------------------------------------------------------ \|
		\| name \| String \| + \| ... \|
		\| width \| Number \| - \| ... \|
		\| transition \| String \| - \| ... \|
		\| pointer \| Boolean \| - \| If set - will show a tiny tip \|
		\| event \| `"click"` \\| `"hover"` \| - \| Type of event that will trigger showing of the popover \|
		\| delay \| Number \| - \| Delay in milliseconds \|

		### Positioning

		You can use `.left`, `.right`, `.top`, `.bottom` modifiers to set the position of the popover.

		Example:

		```vue
		<button v-popover:info.right>Edit (show popover right)</button>

		<button v-popover.left="{ name: 'info' }">Edit</button>
		```

		### Styling

		Popover components have `data-popover="name"` argument that allows to apply styles to it.

		Example:

		```vue
		<popover name="foo" :pointer="false">Bar</popover>
		```

		```css
		[data-popover='foo'] {
		background: #444;
		color: #f9f9f9;

		font-size: 12px;
		line-height: 1.5;
		margin: 5px;
		}
		```

vue2-ppvr - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics