From 633eb31afd6a118a7b6b5b3c70cbce409aafc334 Mon Sep 17 00:00:00 2001
From: rawilk <wiilk.randall@gmail.com>
Date: Sun, 30 Aug 2020 20:11:35 -0500
Subject: [PATCH] wip

---
 docs-build/js/advanced/advanced-1.vue      |   4 +-
 docs-build/js/advanced/advanced-2.vue      |  78 +++++++--------
 docs/demos/advanced.md                     | 110 ++++++++++++++++++++-
 docs/scripts/vue-context-advanced-demos.js |  75 +++++++-------
 4 files changed, 182 insertions(+), 85 deletions(-)

diff --git a/docs-build/js/advanced/advanced-1.vue b/docs-build/js/advanced/advanced-1.vue
index 41a9897..1eea886 100644
--- a/docs-build/js/advanced/advanced-1.vue
+++ b/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]
         };
diff --git a/docs-build/js/advanced/advanced-2.vue b/docs-build/js/advanced/advanced-2.vue
index 390f31b..ca9cbb9 100644
--- a/docs-build/js/advanced/advanced-2.vue
+++ b/docs-build/js/advanced/advanced-2.vue
@@ -17,58 +17,56 @@
         </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 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';
+import VueContext from 'vue-context';
+import 'vue-context/src/sass/vue-context.scss';
 
-    export default {
-        components: { VueContext },
+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: []
-            };
+    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);
         },
 
-        methods: {
-            colorIndex (hex) {
-                return this.selectedColors.findIndex(color => color.hex === hex);
-            },
+        hasColor(hex) {
+            return this.colorIndex(hex) > -1;
+        },
 
-            hasColor (hex) {
-                return this.colorIndex(hex) > -1;
-            },
+        toggle(color) {
+            const index = this.colorIndex(color.hex);
 
-            toggle (color) {
-                const index = this.colorIndex(color.hex);
-
-                if (index > -1) {
-                    this.$delete(this.selectedColors, index);
-                } else {
-                    this.selectedColors.push(color);
-                }
+            if (index > -1) {
+                this.$delete(this.selectedColors, index);
+            } else {
+                this.selectedColors.push(color);
             }
-        }
-    };
+        },
+    },
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/docs/demos/advanced.md b/docs/demos/advanced.md
index c663c4b..8fa8e9c 100644
--- a/docs/demos/advanced.md
+++ b/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>
diff --git a/docs/scripts/vue-context-advanced-demos.js b/docs/scripts/vue-context-advanced-demos.js
index 5c17bad..897135e 100644
--- a/docs/scripts/vue-context-advanced-demos.js
+++ b/docs/scripts/vue-context-advanced-demos.js
@@ -405,8 +405,6 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-//
-//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -2502,46 +2500,43 @@ var render = function() {
       _vm._v(" "),
       _c("vue-context", {
         ref: "menu",
-        scopedSlots: _vm._u(
-          [
-            {
-              key: "default",
-              fn: function(child) {
-                return child.data
-                  ? [
-                      _c("li", [
-                        _c(
-                          "a",
-                          {
-                            attrs: { href: "#" },
-                            on: {
-                              click: function($event) {
-                                $event.preventDefault()
-                                return _vm.toggle(child.data)
-                              }
+        scopedSlots: _vm._u([
+          {
+            key: "default",
+            fn: function(ref) {
+              var color = ref.data
+              return [
+                color
+                  ? _c("li", [
+                      _c(
+                        "a",
+                        {
+                          attrs: { href: "#" },
+                          on: {
+                            click: function($event) {
+                              $event.preventDefault()
+                              return _vm.toggle(color)
                             }
-                          },
-                          [
-                            _vm._v(
-                              "\n                    " +
-                                _vm._s(
-                                  _vm.hasColor(child.data.hex)
-                                    ? "Remove Color"
-                                    : "Select Color"
-                                ) +
-                                "\n                "
-                            )
-                          ]
-                        )
-                      ])
-                    ]
-                  : undefined
-              }
+                          }
+                        },
+                        [
+                          _vm._v(
+                            "\n                " +
+                              _vm._s(
+                                _vm.hasColor(color.hex)
+                                  ? "Remove Color"
+                                  : "Select Color"
+                              ) +
+                              "\n            "
+                          )
+                        ]
+                      )
+                    ])
+                  : _vm._e()
+              ]
             }
-          ],
-          null,
-          true
-        )
+          }
+        ])
       })
     ],
     1