vue-js-popover
Advanced tools
Comparing version
@@ -145,3 +145,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
exports.default = { | ||
name: 'Dropdown', | ||
name: 'Popover', | ||
props: { | ||
@@ -178,3 +178,3 @@ name: { | ||
className: function className() { | ||
return ['vue-dropdown', this.pointer && this.positionClass]; | ||
return ['vue-popover', this.pointer && this.positionClass]; | ||
}, | ||
@@ -283,9 +283,4 @@ style: function style() { | ||
install: function install(Vue) { | ||
Vue.component('Dropdown', _Component2.default); | ||
Vue.component('Popover', _Component2.default); | ||
Vue.prototype.$dropdown = { | ||
show: function show() {}, | ||
hide: function hide() {} | ||
}; | ||
document.addEventListener('resize', function (event) { | ||
@@ -295,3 +290,3 @@ _bus.events.$emit('hide', { srcEvent: event }); | ||
Vue.directive('dropdown', { | ||
Vue.directive('popover', { | ||
inserted: function inserted(target, binding, vnode) { | ||
@@ -329,3 +324,3 @@ var name = binding.arg; | ||
// module | ||
exports.push([module.i, ".vue-dropdown{display:block;position:absolute;background:#fff;box-shadow:0 4px 20px 0 rgba(52,73,94,.2);padding:5px;border-radius:5px;z-index:998}.vue-dropdown:before{display:block;position:absolute;width:0;height:0;content:\"\"}.vue-dropdown.dropdown-position-bottom:before{border-bottom:10px solid #fff;top:-10px;filter:drop-shadow(0 -2px 2px rgba(52,73,94,.1))}.vue-dropdown.dropdown-position-bottom:before,.vue-dropdown.dropdown-position-top:before{border-left:10px solid transparent;border-right:10px solid transparent;left:calc(50% - 10px)}.vue-dropdown.dropdown-position-top:before{border-top:10px solid #fff;bottom:-10px;filter:drop-shadow(0 2px 2px rgba(52,73,94,.1))}.vue-dropdown.dropdown-position-left:before{border-left:10px solid #fff;right:-10px;filter:drop-shadow(2px 0 2px rgba(52,73,94,.1))}.vue-dropdown.dropdown-position-left:before,.vue-dropdown.dropdown-position-right:before{border-top:10px solid transparent;border-bottom:10px solid transparent;top:calc(50% - 10px)}.vue-dropdown.dropdown-position-right:before{border-right:10px solid #fff;left:-10px;filter:drop-shadow(-2px 0 2px rgba(52,73,94,.1))}", ""]); | ||
exports.push([module.i, ".vue-popover{display:block;position:absolute;background:#fff;box-shadow:0 4px 20px 0 rgba(52,73,94,.2);padding:5px;border-radius:5px;z-index:998}.vue-popover:before{display:block;position:absolute;width:0;height:0;content:\"\"}.vue-popover.dropdown-position-bottom:before{border-bottom:10px solid #fff;top:-10px;filter:drop-shadow(0 -2px 2px rgba(52,73,94,.1))}.vue-popover.dropdown-position-bottom:before,.vue-popover.dropdown-position-top:before{border-left:10px solid transparent;border-right:10px solid transparent;left:calc(50% - 10px)}.vue-popover.dropdown-position-top:before{border-top:10px solid #fff;bottom:-10px;filter:drop-shadow(0 2px 2px rgba(52,73,94,.1))}.vue-popover.dropdown-position-left:before{border-left:10px solid #fff;right:-10px;filter:drop-shadow(2px 0 2px rgba(52,73,94,.1))}.vue-popover.dropdown-position-left:before,.vue-popover.dropdown-position-right:before{border-top:10px solid transparent;border-bottom:10px solid transparent;top:calc(50% - 10px)}.vue-popover.dropdown-position-right:before{border-right:10px solid #fff;left:-10px;filter:drop-shadow(-2px 0 2px rgba(52,73,94,.1))}", ""]); | ||
@@ -332,0 +327,0 @@ // exports |
{ | ||
"name": "vue-js-popover", | ||
"description": "Vue.js 2+ popover component", | ||
"version": "1.0.2", | ||
"version": "1.0.3", | ||
"author": "euvl <yev.vlasenko@gmail.com>", | ||
@@ -6,0 +6,0 @@ "private": false, |
@@ -1,5 +0,7 @@ | ||
### Vue.js 2.0+ dropdown | ||
### Vue.js 2.0+ popover | ||
[](https://badge.fury.io/js/vue-js-dropdown) | ||
#### Renames from `vue-js-popover` as a number of people said that the name is misleading. | ||
[](https://badge.fury.io/js/vue-js-popover) | ||
<p align="center"> | ||
@@ -13,3 +15,3 @@ <img src="https://media.giphy.com/media/3ohzdLUN7wlswXpFwQ/giphy.gif"> | ||
```bash | ||
npm install vue-js-dropdown --save | ||
npm install vue-js-popover --save | ||
``` | ||
@@ -19,13 +21,13 @@ Import: | ||
import Vue from 'vue' | ||
import Dropdown from 'vue-js-dropdown' | ||
import Popover from 'vue-js-popover' | ||
Vue.use(Dropdown) | ||
Vue.use(Popover) | ||
``` | ||
Use: | ||
```vue | ||
<button v-dropdown:foo>Toggle dropdown</button> | ||
<button v-popover:foo>Toggle popover</button> | ||
<dropdown name="foo"> | ||
<popover name="foo"> | ||
Hello 🎉 | ||
</dropdown> | ||
</popover> | ||
``` | ||
@@ -35,3 +37,3 @@ | ||
You can use `.left`, `.right`, `.top`, `.bottom` modifiers to set the position of the dropdown. | ||
You can use `.left`, `.right`, `.top`, `.bottom` modifiers to set the position of the popover. | ||
@@ -41,3 +43,3 @@ Example: | ||
```vue | ||
<button v-dropdown:foo.left>Toggle dropdown (left)</button> | ||
<button v-popover:foo.left>Toggle popover (left)</button> | ||
``` |
@@ -1,2 +0,2 @@ | ||
import Dropdown from './Component.vue' | ||
import Component from './Component.vue' | ||
import { events } from './bus' | ||
@@ -13,13 +13,4 @@ | ||
install (Vue) { | ||
Vue.component('Dropdown', Dropdown) | ||
Vue.component('Popover', Component) | ||
Vue.prototype.$dropdown = { | ||
show () { | ||
}, | ||
hide () { | ||
} | ||
} | ||
document.addEventListener('resize', (event) => { | ||
@@ -29,3 +20,3 @@ events.$emit('hide', { srcEvent: event }) | ||
Vue.directive('dropdown', { | ||
Vue.directive('popover', { | ||
inserted: function (target, binding, vnode) { | ||
@@ -32,0 +23,0 @@ let name = binding.arg |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
42
5%59230
-0.62%718
-1.37%