mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-11 21:52:23 +03:00
Code Activity

wip

Browse Source
This commit is contained in:
rawilk
2020-08-30 21:41:51 -05:00
parent 6fb8ed1357
commit 389f0c9d7d
15 changed files with 281 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-build/cleanup.js
+4 -31
View File
@@ -17,18 +17,16 @@ fs.rmdirSync(__dirname + '/dist', { recursive: true });
console.log('All extra files cleaned up!');
// Add "ids" to the files for cache busting, and also update the script references in the docs
// const docFiles = [
// __dirname + '/../docs/demos/basic.md',
// __dirname + '/../docs/demos/advanced.md',
// ];
const docFiles = {
basic: __dirname + '/../docs/demos/basic.md',
advanced: __dirname + '/../docs/demos/advanced.md',
props: __dirname + '/../docs/demos/props.md',
}
const scripts = {
basic: __dirname + '/../docs/scripts/vue-context-basic-demos.js',
advanced: __dirname + '/../docs/scripts/vue-context-advanced-demos.js',
props: __dirname + '/../docs/scripts/vue-context-props-demos.js',
};
const renameFile = path => {
@@ -67,28 +65,3 @@ Object.keys(scripts).forEach(key => {
});
return;
fs.readdir(__dirname + '/../docs/scripts', (err, files) => {
if (err) {
return;
}
files.forEach(file => {
const id = Date.now();
const oldPath = __dirname + '/../docs/scripts/' + file;
const parts = file.split('.');
const newPath = __dirname + '/../docs/scripts/' + parts[0] + `.${id}.` + parts[1];
fs.renameSync(oldPath, newPath);
docFiles.forEach(doc => {
const content = fs.readFileSync(doc, 'utf-8');
const regex = new RegExp("<script[\s\S]*?>[\s\S]*?<\/script>", 'gi');
console.log(content.replace(regex, '<foo>'));
});
});
});
docs-build/js/basic-usage.vue → docs-build/js/basic/basic-usage.vue
+21 -21
View File
@@ -36,28 +36,28 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
onClick(text) {
alert(`You clicked on: "${text}"`);
},
methods: {
onClick (text) {
alert(`You clicked on: "${text}"`);
}
}
};
},
};
</script>
docs-build/js/basic/index.js
+8
View File
@@ -0,0 +1,8 @@
import Vue from 'vue';
import BasicUsage from './basic-usage';
new Vue({
components: {
BasicUsage,
},
}).$mount('#basic-app');
docs-build/js/close-on-click.vue → docs-build/js/props/close-on-click.vue
+19 -21
View File
@@ -14,7 +14,7 @@
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
@@ -23,9 +23,7 @@
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
@@ -46,23 +44,23 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
closeOnClick: false,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
}
};
data() {
return {
closeOnClick: false,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
],
};
},
};
</script>
docs-build/js/close-on-scroll.vue → docs-build/js/props/close-on-scroll.vue
+19 -21
View File
@@ -14,7 +14,7 @@
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
@@ -23,9 +23,7 @@
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6"
:class="{ 'pt-0': index === 0, 'pb-0': index + 1 === items.length }"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
@@ -46,23 +44,23 @@
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
closeOnScroll: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
}
};
data() {
return {
closeOnScroll: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
};
},
};
</script>
docs-build/js/index.js → docs-build/js/props/index.js
+7 -4
View File
@@ -1,13 +1,16 @@
import Vue from 'vue';
import BasicUsage from './basic-usage';
import CloseOnClick from './close-on-click';
import CloseOnScroll from './close-on-scroll';
// Need a separate vue app for each of these so we can render the markdown properly.
new Vue({
components: {
BasicUsage,
CloseOnClick,
},
}).$mount('#close-on-click-app');
new Vue({
components: {
CloseOnScroll,
},
}).$mount('#app');
}).$mount('#close-on-scroll-app');
docs-build/webpack.mix.js
+7 -4
View File
@@ -1,12 +1,15 @@
const mix = require('laravel-mix');
const fs = require('fs');
const scriptsPath = __dirname + '/../docs/scripts';
// Cleanup the old scripts, since we'll be re-hashing them.
fs.rmdirSync(__dirname + '/../docs/scripts', { recursive: true });
fs.rmdirSync(scriptsPath, { recursive: true });
mix
.js('js/index.js', 'dist/vue-context-demos.js')
.js('js/basic/index.js', 'dist/vue-context-basic-demos.js')
.js('js/advanced/index.js', 'dist/vue-context-advanced-demos.js')
.js('js/props/index.js', 'dist/vue-context-props-demos.js')
.copy('dist/vue-context-demos.js', __dirname + '/../docs/scripts')
.copy('dist/vue-context-advanced-demos.js', __dirname + '/../docs/scripts');
.copy('dist/vue-context-basic-demos.js', scriptsPath)
.copy('dist/vue-context-advanced-demos.js', scriptsPath)
.copy('dist/vue-context-props-demos.js', scriptsPath);
docs/demos/advanced.md
+1 -1
View File
@@ -304,4 +304,4 @@ export default {
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/nested-menus.vue)
<script src="../scripts/vue-context-advanced-demos.1598840580885.js"></script>
<script src="../scripts/vue-context-advanced-demos.1598841649510.js"></script>
docs/demos/basic.md
+23 -23
View File
@@ -6,7 +6,7 @@ sort: 1
{.tip}
> Right click on each item to open the context menu.
<div id="app" style="margin-bottom: 1rem;">
<div id="basic-app" style="margin-bottom: 1rem;">
<basic-usage></basic-usage>
</div>
@@ -52,31 +52,31 @@ sort: 1
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
export default {
components: { VueContext },
data () {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
]
};
data() {
return {
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
]
};
},
methods: {
onClick(text) {
alert(`You clicked on: "${text}"`);
},
methods: {
onClick (text) {
alert(`You clicked on: "${text}"`);
}
}
};
},
};
</script>
```
<script src="../scripts/vue-context-demos.js"></script>
<script src="../scripts/vue-context-basic-demos.1598841649507.js"></script>
docs/demos/props.md
+166
View File
@@ -0,0 +1,166 @@
---
title: Props Demo
sort: 3
---
## Close on click
When `closeOnClick` is set to `false`, the context menu will not automatically close when clicked on.
You can toggle this feature on and off in this demo by using the checkbox below.
<div id="close-on-click-app" style="margin-bottom: 1rem;">
<close-on-click></close-on-click>
</div>
```html
<template>
<div class="mt-4">
<div class="mb-4">
<div class="flex items-center">
<input id="toggle-close"
type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
v-model="closeOnClick"
>
<label for="toggle-close" class="ml-2 block text-sm leading-5 text-gray-900">
Close on Click
</label>
</div>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu" :close-on-click="closeOnClick">
<li>
<a>
{{ closeOnClick ? 'I will close on click' : 'I will stay open on click' }}
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
closeOnClick: false,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros',
],
};
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/props/close-on-click.vue)
## Close on scroll
If `closeOnScroll` is set to `true`, the context menu will close automatically when the window is scrolled.
You can toggle this feature on and off in this demo by using the checkbox below.
<div id="close-on-scroll-app">
<close-on-scroll></close-on-scroll>
</div>
```html
<template>
<div class="mt-4">
<div class="mb-4">
<div class="flex items-center">
<input id="toggle-scroll"
type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
v-model="closeOnScroll"
>
<label for="toggle-scroll" class="ml-2 block text-sm leading-5 text-gray-900">
Close on Scroll
</label>
</div>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="demo">
<li>
<a href="#"
class="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
:class="{ 'border-t border-gray-200': index > 0 }"
v-for="(item, index) in items"
:key="index"
@contextmenu.prevent="$refs.menu.open"
>
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div class="text-sm leading-5 font-medium text-gray-600 truncate" v-text="item"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<vue-context ref="menu" :close-on-scroll="closeOnScroll">
<li>
<a>
{{ closeOnScroll ? 'I will hide when the window is scrolled' : 'I will stay visible when the window is scrolled' }}
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss';
export default {
components: { VueContext },
data() {
return {
closeOnScroll: true,
items: [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
'Vestibulum at eros'
],
};
},
};
</script>
```
[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/props/close-on-scroll.vue)
<script src="../scripts/vue-context-props-demos.1598841649513.js"></script>
docs/scripts/vue-context-advanced-demos.1598840580885.js
-2
View File
File diff suppressed because one or more lines are too long
docs/scripts/vue-context-advanced-demos.1598841649510.js
+2
View File
File diff suppressed because one or more lines are too long
docs/scripts/vue-context-basic-demos.1598841649507.js
+2
View File
File diff suppressed because one or more lines are too long
docs/scripts/vue-context-demos.js
-2
View File
File diff suppressed because one or more lines are too long
docs/scripts/vue-context-props-demos.1598841649513.js
+2
View File
File diff suppressed because one or more lines are too long