mirror of
https://github.com/tenrok/vue-context.git
synced 2026-06-07 01:52:24 +03:00
3.4 updates (#16)
This commit is contained in:
Randall Wilk
@@ -2,6 +2,17 @@
|
||||
|
||||
All notable changes to this project will be documented here.
|
||||
|
||||
<a name="3.4.1"></a>
|
||||
## [3.4.1](https://github.com/rawilk/vue-context/releases/tag/3.4.1)
|
||||
|
||||
Released 2019-04-03
|
||||
|
||||
### Updates 3.4.1
|
||||
- **Scroll Listener:** Only attach the close scroll event listener when opened and immediately remove it when menu is closed
|
||||
to prevent it being called unnecessarily.
|
||||
- **Dependencies:** Removed Vue as a dependency as it never really was one since v3.0.0.
|
||||
- **Dependencies:** Ran `npm audit fix` to fix vulnerabilities found from dependencies.
|
||||
|
||||
<a name="3.4.0"></a>
|
||||
## [3.4.0](https://github.com/rawilk/vue-context/releases/tag/3.4.0)
|
||||
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
[](https://vuejs.org)
|
||||
|
||||
`vue-context` provides a simple yet flexible context menu for Vue. It is styled for the standard `<ul>` tag, but any menu template can be used.
|
||||
The only dependencies the menu has are Vue and vue-clickaway, so the majority of styling is up to you, and any of the package
|
||||
styles for the menu can easily be overridden.
|
||||
The menu is lightweight with its only dependency being `vue-clickaway`. The menu has some basic styles applied to it but they can be easily
|
||||
overridden by your own styles.
|
||||
<br><br>
|
||||
The menu disappears when you expect by utilizing `vue-clickaway` and it also optionally disappears when clicked on.
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
const { mix } = require('laravel-mix');
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
mix
|
||||
.setPublicPath('test/js/dist')
|
||||
.js('test/js/src/index.js', 'index.js')
|
||||
.js('test/js/src/test_issue_4.js', 'test_issue_4.js')
|
||||
.sourceMaps();
|
||||
@@ -1,4 +1,4 @@
|
||||
const { mix } = require('laravel-mix');
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
const inProduction = mix.inProduction();
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Generated
+3694
-4642
File diff suppressed because it is too large
Load Diff
+6
-4
@@ -26,13 +26,15 @@
|
||||
},
|
||||
"homepage": "https://github.com/rawilk/vue-context#readme",
|
||||
"dependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue-clickaway": "^2.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"@babel/preset-env": "^7.4.3",
|
||||
"cross-env": "^5.2.0",
|
||||
"laravel-mix": "^2.1.14",
|
||||
"node-sass": "^4.9.4"
|
||||
"laravel-mix": "^4.0.15",
|
||||
"node-sass": "^4.11.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
}
|
||||
}
|
||||
|
||||
+8
-6
@@ -61,12 +61,6 @@
|
||||
};
|
||||
},
|
||||
|
||||
mounted () {
|
||||
if (this.closeOnScroll) {
|
||||
this.addScrollEventListener();
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
if (this.closeOnScroll) {
|
||||
this.removeScrollEventListener();
|
||||
@@ -96,6 +90,10 @@
|
||||
this.data = null;
|
||||
this.show = false;
|
||||
|
||||
if (this.closeOnScroll) {
|
||||
this.removeScrollEventListener();
|
||||
}
|
||||
|
||||
if (emit) {
|
||||
this.$emit('close');
|
||||
}
|
||||
@@ -124,6 +122,10 @@
|
||||
this.positionMenu(event.clientY, event.clientX);
|
||||
this.$el.focus();
|
||||
|
||||
if (this.closeOnScroll) {
|
||||
this.addScrollEventListener();
|
||||
}
|
||||
|
||||
this.$emit('open', event, this.data, this.top, this.left);
|
||||
});
|
||||
},
|
||||
|
||||
Vendored
+115
-37
File diff suppressed because one or more lines are too long
Vendored
-126
File diff suppressed because one or more lines are too long
@@ -1,24 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import { VueContext } from '../../../dist/vue-context';
|
||||
|
||||
new Vue({
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
|
||||
data: {
|
||||
items: []
|
||||
},
|
||||
|
||||
mounted () {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
this.items.push(`Row ${i + 1}`);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick (data) {
|
||||
alert(data);
|
||||
},
|
||||
},
|
||||
}).$mount('#app');
|
||||
@@ -1,59 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vue Context Issue Test #4</title>
|
||||
|
||||
<style>
|
||||
#div1 {
|
||||
height: 50px;
|
||||
background: #ff0000;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1020;
|
||||
}
|
||||
|
||||
#div2 {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
#div2 table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#div2 table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="div1">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="div2">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr v-for="item in items" @contextmenu.prevent="$refs.menu.open($event, item)">
|
||||
<td v-text="item"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<vue-context ref="menu">
|
||||
<ul slot-scope="child" v-if="child.data">
|
||||
<li @click="onClick(child.data)">Do something with: {{ child.data }}</li>
|
||||
</ul>
|
||||
</vue-context>
|
||||
</div>
|
||||
|
||||
<script src="js/dist/test_issue_4.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user