@veritree/ui 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Dialog/VTDialog.vue

@@ -133,7 +133,7 @@ export default {
      * @param {object} event
      */
     onClick(ev) {
-      if (!ev || ev.target.id !== this.overlay.id) return;
+      if (!ev || ev.target.id !== this.overlay?.id) return;
       this.hide();
     },
   },

package/src/components/Drawer/VTDrawer.vue

@@ -121,7 +121,7 @@ export default {
      * @param {object} event
      */
     onClick(ev) {
-      if (!ev || ev.target.id !== this.overlay.id) return;
+      if (!ev || ev.target.id !== this.overlay?.id) return;
       this.hide();
     },
   },

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -27,12 +27,12 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDropdownMenuContent",
+  name: 'VTDropdownMenuContent',
 
-  inject: ["api"],
+  inject: ['api'],
 
   data() {
     return {
@@ -67,7 +67,7 @@ export default {
     });
 
     // TODO: Create a directive or mixin for this
-    document.addEventListener("click", (e) => {
+    document.addEventListener('click', (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
     });
@@ -75,17 +75,18 @@ export default {
 
   destroyed() {
     // TODO: Create a directive or mixin for this
-    document.removeEventListener("click", this.trigger.onClick());
+    document.removeEventListener('click', this.trigger.onClick());
   },
 
   methods: {
     show() {
       this.visible = true;
+      this.$emit('shown');
     },
 
     hide() {
       this.visible = false;
-      this.$emit("hidden");
+      this.$emit('hidden');
       this.api().unregisterItems();
     },
   },

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -14,7 +14,7 @@
     :tabindex="tabIndex"
     :aria-disabled="disabled"
     role="menuitem"
-    @click.stop="onClick"
+    @click.stop.prevent="onClick"
     @keydown.down.prevent="focusPreviousItem"
     @keydown.up.prevent="focusNextItem"
     @keydown.home.prevent="focusFirstItem"
@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDropdownMenuItem",
+  name: 'VTDropdownMenuItem',
 
-  inject: ["api"],
+  inject: ['api'],
 
   props: {
     to: {
@@ -68,7 +68,7 @@ export default {
     },
 
     as() {
-      return this.href ? "a" : this.to ? "NuxtLink" : "button";
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
 
     items() {
@@ -163,7 +163,7 @@ export default {
     onClick() {
       if (this.disabled) return;
 
-      this.$emit("click");
+      this.$emit('click');
       this.$nextTick(() => this.leaveMenu());
     },
   },

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -112,6 +112,13 @@ export default {
       this.expanded = !this.expanded;
     },
 
+    /**
+     * Sets aria expanded attribute/state to false
+     */
+    hideExpanded() {
+      this.expanded = false;
+    },
+
     /**
      * Toggles aria popup/controls attribute/state
      */
@@ -146,6 +153,18 @@ export default {
       });
     },
 
+    /**
+     * 1. Set aria expanded attribute/state to false
+     * 2. Close the menu
+     */
+    hide() {
+      this.hideExpanded();
+
+      this.$nextTick(() => {
+        this.content.hide();
+      });
+    },
+
     /**
      * On key arrow down, do the following:
      *