wip

docs-build/js/advanced/advanced-1.vue

@@ -0,0 +1,90 @@
+<template>
+    <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($event, { name: item, index })"
+                    >
+                        <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>
+
+        <div class="my-4 text-right" v-show="showReset">
+            <button type="button"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150"
+                    @click="reset"
+            >
+                Reset Demo
+            </button>
+        </div>
+
+        <vue-context ref="menu" v-slot="{ data }">
+            <template v-if="data">
+                <li>
+                    <a @click.prevent="alertName(data.name)">
+                        Alert name
+                    </a>
+                </li>
+                <li>
+                    <a @click.prevent="remove(data.index)">
+                        Delete "{{ data.name }}"
+                    </a>
+                </li>
+            </template>
+        </vue-context>
+    </div>
+</template>
+
+<script>
+import VueContext from 'vue-context';
+import 'vue-context/src/sass/vue-context.scss';
+
+const items = [
+    'Cras justo odio',
+    'Dapibus ac facilisis in',
+    'Morbi leo risus',
+    'Porta ac consectetur ac',
+    'Vestibulum at eros'
+];
+
+export default {
+    components: { VueContext },
+
+    computed: {
+        showReset () {
+            return this.items.length < items.length;
+        },
+    },
+
+    data () {
+        return {
+            items: [...items]
+        };
+    },
+
+    methods: {
+        alertName(name) {
+            alert(`You clicked on "${name}"!`);
+        },
+
+        remove(index) {
+            this.$delete(this.items, index);
+        },
+
+        reset() {
+            this.items = [...items];
+        },
+    },
+};
+</script>

docs-build/js/advanced/advanced-2.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="mt-5">
+        <div class="flex flex-wrap">
+            <div class="color-box"
+                 :class="{ selected: hasColor(color.hex) }"
+                 v-for="(color, index) in colors"
+                 :key="index"
+                 :style="{ 'background-color': color.hex }"
+                 @contextmenu.prevent="$refs.menu.open($event, color)"
+            >
+                &nbsp;
+            </div>
+        </div>
+
+        <h5 class="my-4">
+            Selected colors:
+        </h5>
+        <code class="mb-3">{{ selectedColors }}</code>
+
+        <vue-context ref="menu">
+            <template slot-scope="child" v-if="child.data">
+                <li>
+                    <a href="#" @click.prevent="toggle(child.data)">
+                        {{ hasColor(child.data.hex) ? 'Remove Color' : 'Select Color' }}
+                    </a>
+                </li>
+            </template>
+        </vue-context>
+    </div>
+</template>
+
+<script>
+    import VueContext from 'vue-context';
+    import 'vue-context/src/sass/vue-context.scss';
+
+    export default {
+        components: { VueContext },
+
+        data () {
+            return {
+                colors: [
+                    { name: 'red', hex: '#f44336' },
+                    { name: 'blue', hex: '#2196F3' },
+                    { name: 'cyan', hex: '#00BCD4' },
+                    { name: 'green', hex: '#4CAF50' },
+                    { name: 'orange', hex: '#FF9800' }
+                ],
+                selectedColors: []
+            };
+        },
+
+        methods: {
+            colorIndex (hex) {
+                return this.selectedColors.findIndex(color => color.hex === hex);
+            },
+
+            hasColor (hex) {
+                return this.colorIndex(hex) > -1;
+            },
+
+            toggle (color) {
+                const index = this.colorIndex(color.hex);
+
+                if (index > -1) {
+                    this.$delete(this.selectedColors, index);
+                } else {
+                    this.selectedColors.push(color);
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .color-box {
+        width: 100px;
+        height: 100px;
+        margin-right: 10px;
+        border-radius: 4px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        opacity: .6;
+
+        &.selected {
+            opacity: 1;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+</style>

docs-build/js/advanced/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Advanced1 from './advanced-1';
+import Advanced2 from './advanced-2';
+
+// Need a separate vue app for each of these so we can render the markdown properly.
+new Vue({
+    components: {
+        Advanced1,
+    },
+}).$mount('#advanced-1-app');
+
+new Vue({
+    components: {
+        Advanced2,
+    },
+}).$mount('#advanced-2-app');