mirror of
https://github.com/tenrok/vue-context.git
synced 2026-05-17 05:49:36 +03:00
Clickaway (#12)
This commit is contained in:
Randall Wilk
@@ -1,5 +1,15 @@
|
||||
# Changelog
|
||||
|
||||
# 3.3.1 (Oct 23, 2018)
|
||||
|
||||
## Changed
|
||||
- Context menu now closes via [clickaway](https://github.com/simplesmiler/vue-clickaway)
|
||||
instead of blur event. Credit to [robjbrain](https://github.com/robjbrain)
|
||||
for pointing it out.
|
||||
|
||||
## Updated
|
||||
- Updated vue and other dev dependencies.
|
||||
|
||||
# 3.3.0 (Oct 15, 2018)
|
||||
|
||||
## Added
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Generated
+844
-3587
File diff suppressed because it is too large
Load Diff
+6
-5
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-context",
|
||||
"version": "3.3.0",
|
||||
"version": "3.3.1",
|
||||
"description": "A simple vue context menu component.",
|
||||
"main": "dist/vue-context.js",
|
||||
"scripts": {
|
||||
@@ -26,12 +26,13 @@
|
||||
},
|
||||
"homepage": "https://github.com/rawilk/vue-context#readme",
|
||||
"dependencies": {
|
||||
"vue": "^2.5.16"
|
||||
"vue": "^2.5.17",
|
||||
"vue-clickaway": "^2.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"cross-env": "^5.1.6",
|
||||
"laravel-mix": "^2.1.11",
|
||||
"node-sass": "^4.9.0"
|
||||
"cross-env": "^5.2.0",
|
||||
"laravel-mix": "^2.1.14",
|
||||
"node-sass": "^4.9.4"
|
||||
}
|
||||
}
|
||||
|
||||
+169
-165
@@ -1,81 +1,85 @@
|
||||
<template>
|
||||
<div class="v-context"
|
||||
v-show="show"
|
||||
:style="style"
|
||||
tabindex="-1"
|
||||
@blur="close"
|
||||
@click="onClick"
|
||||
@contextmenu.capture.prevent
|
||||
>
|
||||
<slot :data="data"></slot>
|
||||
</div>
|
||||
<div class="v-context"
|
||||
v-show="show"
|
||||
:style="style"
|
||||
tabindex="-1"
|
||||
v-on-clickaway="close"
|
||||
@click="onClick"
|
||||
@contextmenu.capture.prevent
|
||||
>
|
||||
<slot :data="data"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
/**
|
||||
* Close the menu on click.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
closeOnClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
|
||||
/**
|
||||
* Close the menu automatically on window scroll.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
closeOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
export default {
|
||||
mixins: [clickaway],
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Generate the CSS styles for positioning the context menu.
|
||||
*
|
||||
* @returns {object|null}
|
||||
*/
|
||||
style () {
|
||||
return this.show
|
||||
? { top: `${this.top}px`, left: `${this.left}px` }
|
||||
: null;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* Close the menu on click.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
closeOnClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
top: null,
|
||||
left: null,
|
||||
show: false,
|
||||
data: null
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Close the menu automatically on window scroll.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
closeOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
if (this.closeOnScroll) {
|
||||
this.addScrollEventListener();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* Generate the CSS styles for positioning the context menu.
|
||||
*
|
||||
* @returns {object|null}
|
||||
*/
|
||||
style () {
|
||||
return this.show
|
||||
? { top: `${this.top}px`, left: `${this.left}px` }
|
||||
: null;
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
if (this.closeOnScroll) {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
top: null,
|
||||
left: null,
|
||||
show: false,
|
||||
data: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Add scroll event listener to close context menu.
|
||||
*/
|
||||
addScrollEventListener () {
|
||||
window.addEventListener('scroll', this.close);
|
||||
},
|
||||
mounted () {
|
||||
if (this.closeOnScroll) {
|
||||
this.addScrollEventListener();
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
if (this.closeOnScroll) {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Add scroll event listener to close context menu.
|
||||
*/
|
||||
addScrollEventListener () {
|
||||
window.addEventListener('scroll', this.close);
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the context menu.
|
||||
@@ -93,119 +97,119 @@
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the menu if `closeOnClick` is set to true.
|
||||
*/
|
||||
onClick () {
|
||||
if (this.closeOnClick) {
|
||||
this.close(false);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Close the menu if `closeOnClick` is set to true.
|
||||
*/
|
||||
onClick () {
|
||||
if (this.closeOnClick) {
|
||||
this.close(false);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open the context menu.
|
||||
*
|
||||
* @param {MouseEvent} event
|
||||
* @param {array|object|string} data User provided data for the menu
|
||||
*/
|
||||
open (event, data) {
|
||||
this.data = data;
|
||||
this.show = true;
|
||||
/**
|
||||
* Open the context menu.
|
||||
*
|
||||
* @param {MouseEvent} event
|
||||
* @param {array|object|string} data User provided data for the menu
|
||||
*/
|
||||
open (event, data) {
|
||||
this.data = data;
|
||||
this.show = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.positionMenu(event.clientY, event.clientX);
|
||||
this.$el.focus();
|
||||
this.$nextTick(() => {
|
||||
this.positionMenu(event.clientY, event.clientX);
|
||||
this.$el.focus();
|
||||
|
||||
this.$emit('open', event, this.data, this.top, this.left);
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the context menu top and left positions.
|
||||
*
|
||||
* @param {number} top
|
||||
* @param {number} left
|
||||
*/
|
||||
positionMenu (top, left) {
|
||||
const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
|
||||
const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
|
||||
/**
|
||||
* Set the context menu top and left positions.
|
||||
*
|
||||
* @param {number} top
|
||||
* @param {number} left
|
||||
*/
|
||||
positionMenu (top, left) {
|
||||
const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
|
||||
const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
|
||||
|
||||
if (top > largestHeight) {
|
||||
top = largestHeight;
|
||||
}
|
||||
if (top > largestHeight) {
|
||||
top = largestHeight;
|
||||
}
|
||||
|
||||
if (left > largestWidth) {
|
||||
left = largestWidth;
|
||||
}
|
||||
if (left > largestWidth) {
|
||||
left = largestWidth;
|
||||
}
|
||||
|
||||
this.top = top;
|
||||
this.left = left;
|
||||
},
|
||||
this.top = top;
|
||||
this.left = left;
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove the scroll event listener to close the context menu.
|
||||
*/
|
||||
removeScrollEventListener () {
|
||||
window.removeEventListener('scroll', this.close);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Remove the scroll event listener to close the context menu.
|
||||
*/
|
||||
removeScrollEventListener () {
|
||||
window.removeEventListener('scroll', this.close);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* Add or remove the scroll event listener when the prop value changes.
|
||||
*
|
||||
* @param {boolean} value
|
||||
* @param {boolean} oldValue
|
||||
*/
|
||||
closeOnScroll (value, oldValue) {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
watch: {
|
||||
/**
|
||||
* Add or remove the scroll event listener when the prop value changes.
|
||||
*
|
||||
* @param {boolean} value
|
||||
* @param {boolean} oldValue
|
||||
*/
|
||||
closeOnScroll (value, oldValue) {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value) {
|
||||
this.addScrollEventListener();
|
||||
} else {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (value) {
|
||||
this.addScrollEventListener();
|
||||
} else {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$blue600: #1e88e5;
|
||||
$gray74: #bdbdbd;
|
||||
$gray93: #ededed;
|
||||
$gray98: #fafafa;
|
||||
$blue600: #1e88e5;
|
||||
$gray74: #bdbdbd;
|
||||
$gray93: #ededed;
|
||||
$gray98: #fafafa;
|
||||
|
||||
.v-context {
|
||||
background: $gray98;
|
||||
border: 1px solid $gray74;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
z-index: 99999;
|
||||
.v-context {
|
||||
background: $gray98;
|
||||
border: 1px solid $gray74;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
z-index: 99999;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 10px 35px;
|
||||
cursor: pointer;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 10px 35px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $blue600;
|
||||
color: $gray98;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $blue600;
|
||||
color: $gray98;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user