wip

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

@@ -62,12 +62,12 @@ export default {
     components: { VueContext },
 
     computed: {
-        showReset () {
+        showReset() {
             return this.items.length < items.length;
         },
     },
 
-    data () {
+    data() {
         return {
             items: [...items]
         };

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

@@ -17,48 +17,46 @@
         </h5>
         <code class="mb-3">{{ selectedColors }}</code>
 
-        <vue-context ref="menu">
+        <vue-context ref="menu" v-slot="{ data: color }">
-            <template slot-scope="child" v-if="child.data">
+            <li v-if="color">
-                <li>
+                <a href="#" @click.prevent="toggle(color)">
-                    <a href="#" @click.prevent="toggle(child.data)">
+                    {{ hasColor(color.hex) ? 'Remove Color' : 'Select Color' }}
-                        {{ hasColor(child.data.hex) ? 'Remove Color' : 'Select Color' }}
                 </a>
             </li>
-            </template>
         </vue-context>
     </div>
 </template>
 
 <script>
-    import VueContext from 'vue-context';
+import VueContext from 'vue-context';
-    import 'vue-context/src/sass/vue-context.scss';
+import 'vue-context/src/sass/vue-context.scss';
 
-    export default {
+export default {
     components: { VueContext },
 
-        data () {
+    data() {
         return {
             colors: [
                 { name: 'red', hex: '#f44336' },
                 { name: 'blue', hex: '#2196F3' },
                 { name: 'cyan', hex: '#00BCD4' },
                 { name: 'green', hex: '#4CAF50' },
-                    { name: 'orange', hex: '#FF9800' }
+                { name: 'orange', hex: '#FF9800' },
             ],
-                selectedColors: []
+            selectedColors: [],
         };
     },
 
     methods: {
-            colorIndex (hex) {
+        colorIndex(hex) {
             return this.selectedColors.findIndex(color => color.hex === hex);
         },
 
-            hasColor (hex) {
+        hasColor(hex) {
             return this.colorIndex(hex) > -1;
         },
 
-            toggle (color) {
+        toggle(color) {
             const index = this.colorIndex(color.hex);
 
             if (index > -1) {
@@ -66,9 +64,9 @@
             } else {
                 this.selectedColors.push(color);
             }
-            }
+        },
-        }
+    },
-    };
+};
 </script>
 
 <style lang="scss" scoped>

docs/demos/advanced.md

@@ -79,14 +79,14 @@ export default {
     components: { VueContext },
 
     computed: {
-        showReset () {
+        showReset() {
             return this.items.length < items.length;
         },
     },
 
-    data () {
+    data() {
         return {
-            items: [...items]
+            items: [...items],
         };
     },
 
@@ -107,4 +107,108 @@ export default {
 </script>
 ```
 
+[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-1.vue)
+
+## Demo 2
+
+<div id="advanced-2-app">
+    <div style="margin-bottom: 1rem;">
+        <advanced-2></advanced-2>
+    </div>
+</div>
+
+```html
+<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" v-slot="{ data: color }">
+            <li v-if="color">
+                <a href="#" @click.prevent="toggle(color)">
+                    {{ hasColor(color.hex) ? 'Remove Color' : 'Select Color' }}
+                </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 {
+            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>
+```
+
+[Demo Source](https://github.com/rawilk/vue-context/blob/master/docs-build/js/advanced/advanced-2.vue)
+
 <script src="../scripts/vue-context-advanced-demos.js"></script>

docs/scripts/vue-context-advanced-demos.js

@@ -405,8 +405,6 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-//
-//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -2502,14 +2500,14 @@ var render = function() {
       _vm._v(" "),
       _c("vue-context", {
         ref: "menu",
-        scopedSlots: _vm._u(
+        scopedSlots: _vm._u([
-          [
           {
             key: "default",
-              fn: function(child) {
+            fn: function(ref) {
-                return child.data
+              var color = ref.data
-                  ? [
+              return [
-                      _c("li", [
+                color
+                  ? _c("li", [
                       _c(
                         "a",
                         {
@@ -2517,7 +2515,7 @@ var render = function() {
                           on: {
                             click: function($event) {
                               $event.preventDefault()
-                                return _vm.toggle(child.data)
+                              return _vm.toggle(color)
                             }
                           }
                         },
@@ -2525,7 +2523,7 @@ var render = function() {
                           _vm._v(
                             "\n                " +
                               _vm._s(
-                                  _vm.hasColor(child.data.hex)
+                                _vm.hasColor(color.hex)
                                   ? "Remove Color"
                                   : "Select Color"
                               ) +
@@ -2534,14 +2532,11 @@ var render = function() {
                         ]
                       )
                     ])
+                  : _vm._e()
               ]
-                  : undefined
             }
           }
-          ],
+        ])
-          null,
-          true
-        )
       })
     ],
     1