abstract component names: Toggle and Target

Author: Jeff

src/Dev.vue

@@ -1,21 +1,21 @@
 <template>
   <section class="d-flex justify-content-center align-items-center">
-    <dropdown class="dropdown" tag="nav">
+    <toggle class="dropdown" tag="nav">
       <button class="btn btn-primary">Drop it Down</button>
 
-      <dropdown-menu class="dropdown-menu show">
+      <target class="dropdown-menu show">
         <li class="dropdown-item">Whats up!</li>
-      </dropdown-menu>
-    </dropdown>
+      </target>
+    </toggle>
   </section>
 </template>
 
 <script>
-import Dropdown from './Dropdown';
-import DropdownMenu from './DropdownMenu';
+import Toggle from './components/Toggle';
+import Target from './components/Target';
 
 export default {
-  components: {Dropdown, DropdownMenu},
+  components: {Toggle, Target},
 };
 </script>
 

src/DropdownMenu.vue renamed to src/components/Target.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'dropdown-menu',
+  name: 'target',
   props: {
     tag: {
       type: String,
@@ -9,15 +9,15 @@ export default {
     display: {
       type: String,
       default: 'block',
-    }
+    },
   },
   data: () => ({
     active: false,
   }),
   render (h) {
     return h(this.tag, {
       style: {
-        display: this.active ? this.display : 'none',
+        display: this.active ? 'block' : 'none',
       },
     }, this.$slots.default);
   },

src/Dropdown.vue renamed to src/components/Toggle.vue

@@ -1,18 +1,18 @@
 <script>
 export default {
-  name: 'dropdown',
+  name: 'toggle',
   props: {
     tag: {
       type: String,
       default: 'div',
     },
   },
   data: () => ({
-    dropdown: null,
+    target: null,
   }),
   computed: {
     active () {
-      return this.dropdown ? this.dropdown.active : false;
+      return this.target ? this.target.active : false;
     },
   },
   watch: {
@@ -32,21 +32,17 @@ export default {
     }, this.$slots.default);
   },
   mounted () {
-    this.dropdown = this.$children.find(child => {
-      return child.$options.name === 'dropdown-menu';
+    this.target = this.$children.find(child => {
+      return child.$options.name === 'target';
     });
   },
   methods: {
-    toggle() {
-      return this.dropdown.toggle();
+    toggle () {
+      return this.target.toggle();
     },
     clickAway (event) {
-      if (!this.dropdown.active) {
-        return false;
-      }
-
       if (!event.composedPath().includes(this.$el)) {
-        this.dropdown.toggle(false);
+        this.target.toggle(false);
       }
     },
   },