@veritree/ui 0.21.1-1 → 0.21.1-3

package/package.json

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

package/src/components/Button/VTButton.vue

@@ -11,7 +11,7 @@
         ? 'button'
         : isIcon
         ? 'inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
-        : 'inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
+        : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
       // variant styles
       headless
         ? `button--${variant}`

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -32,10 +32,6 @@ export default {
       return `dropdown-menu-content-${this.api().id}`;
     },
 
-    dark() {
-      return this.api().isDark;
-    },
-
     headless() {
       return this.api().isHeadless;
     },
@@ -61,13 +57,13 @@ export default {
       e.stopPropagation();
 
       if (this.visible && !this.$el.contains(e.target)) {
-        this.componentTrigger.onClick();
+        this.componentTrigger.cancel();
       }
     });
   },
 
   destroyed() {
-    document.removeEventListener('click', this.componentTrigger.onClick);
+    document.removeEventListener('click', this.componentTrigger.cancel);
   },
 
   methods: {
@@ -88,8 +84,6 @@ export default {
       this.visible = false;
 
       this.$nextTick(() => {
-        this.componentTrigger.focus();
-        this.componentTrigger.hideExpanded();
         this.component.clearActive();
         this.$emit('hidden');
       });

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -87,10 +87,6 @@ export default {
     componentTrigger() {
       return this.api().componentTrigger;
     },
-
-    componentContent() {
-      return this.api().componentContent;
-    },
   },
 
   mounted() {
@@ -169,12 +165,11 @@ export default {
       this.items[goToIndex].focus();
     },
 
-    /**
-     * Hides content/menu and focus on trigger
-     */
     leaveMenu() {
-      if (this.componentContent) this.componentContent.hide();
-      if (this.componentTrigger) this.componentTrigger.focus();
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
     },
 
     onKeyEsc() {

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -4,8 +4,8 @@
     :aria-haspopup="hasPopup"
     :aria-expanded="expanded"
     :aria-controls="controls"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyesc"
   >
     <slot></slot>
@@ -49,14 +49,20 @@ export default {
     },
   },
 
+  watch: {
+    expanded() {
+      this.toggleAriaHasPopup();
+      if (this.expanded) {
+      }
+    },
+  },
+
   mounted() {
     const trigger = {
-      toggleExpanded: this.toggleExpanded,
-      hideExpanded: this.hideExpanded,
+      id: this.id,
       el: this.$el,
+      cancel: this.cancel,
       focus: this.focus,
-      id: this.id,
-      onClick: this.onClick,
     };
 
     this.api().registerTrigger(trigger);
@@ -90,128 +96,88 @@ export default {
       });
     },
 
-    /**
-     * Shows content/menu if not already visible
-     */
-    showContent() {
-      this.expanded = true;
-      this.componentContent.show();
-    },
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
 
-    /**
-     * Focus slot element if it exists and toggle expanded
-     */
-    focus() {
-      if (this.trigger) this.trigger.focus();
-    },
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
 
-    //
-    toggleExpanded() {
-      if (!this.expanded) return;
-      this.expanded = false;
-    },
+      this.expanded = true;
 
-    /**
-     * Sets aria expanded attribute/state to false
-     */
-    hideExpanded() {
-      this.expanded = false;
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
     },
 
-    /**
-     * Toggles aria popup/controls attribute/state
-     */
-    toggleHasPopup() {
-      if (!this.componentContent) return;
-
-      this.hasPopup = !this.hasPopup;
-
-      if (!this.hasPopup) {
-        this.controls = null;
+    cancel() {
+      if (!this.componentContent) {
         return;
       }
 
-      this.controls = this.componentContent.id;
+      this.expanded = false;
+
+      this.hideComponentContent();
     },
 
-    /**
-     * 1. Set aria expanded attribute/state to false
-     * 2. Close the menu
-     */
-    hide() {
-      this.hideExpanded();
+    focus() {
+      if (this.trigger) this.trigger.focus();
+    },
 
-      this.$nextTick(() => {
-        this.componentContent.hide();
-      });
+    showComponentContent() {
+      this.componentContent.show();
     },
 
-    /**
-     * On click, do the following:
-     *
-     * 1. Toggle aria expanded attribute/state
-     * 2. Open the menu if it's closed
-     * 3. Close the menu if it's open
-     */
-    onClick(e) {
-      if (!this.componentContent) return;
+    hideComponentContent() {
+      this.componentContent.hide();
+    },
 
+    toggleAriaHasPopup() {
       if (this.expanded) {
-        this.componentContent.hide();
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
+
         return;
       }
 
-      // delay stop propagation to close other visible
-      // dropdowns and delay click event to control
-      // this dropdown visibility
-      setTimeout(() => e.stopImmediatePropagation(), 50);
-      setTimeout(() => this.showContent(), 100);
+      this.hasPopup = null;
+      this.controls = null;
     },
 
-    /**
-     * On key arrow down, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the first menu item
-     * 2. if the menu is expanded, focus the first menu item
-     */
-    onKeyArrowDown() {
-      if (!this.componentContent) return;
-
-      this.showContent();
-
-      // settimeout here is delaying the focusing the element
-      // since it is not rendered yet. All items will only
-      // be available when the content is fully visible.
-      this.$nextTick(() => {
-        setTimeout(() => this.firstMenuItem.focus(), 150);
-      });
+    onClick(e) {
+      this.init(e);
     },
 
-    /**
-     * On key arrow up, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the last menu item
-     * 2. if the menu is expanded, focus the last menu item
-     */
-    onKeyArrowUp() {
-      if (!this.componentContent) return;
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
 
-      this.showContent();
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
 
       // settimeout here is delaying the focusing the element
       // since it is not rendered yet. All items will only
       // be available when the content is fully visible.
       this.$nextTick(() => {
-        setTimeout(() => this.lastMenuItem.focus(), 150);
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
-    onKeyesc() {
-      if (!this.componentContent) return;
-
-      if (this.expanded) {
-        this.componentContent.hide();
-      }
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };

package/src/components/Form/VTInput.vue

@@ -4,7 +4,7 @@
     :class="[
       headless
         ? 'form-control'
-        : 'border border-solid py-2 px-3 rounded text-inherit',
+        : 'border border-solid py-2 px-3 rounded text-inherit max-w-full',
       headless
         ? `form-control--${variant}`
         : isError
@@ -33,14 +33,14 @@ export default {
       type: [String, Number, Object, Array],
       default: null,
     },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
     headless: {
       type: Boolean,
       default: false,
     },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
   },
 
   computed: {

package/src/components/Listbox/VTListboxContent.vue

@@ -57,10 +57,6 @@ export default {
     componentTrigger() {
       return this.api().componentTrigger;
     },
-
-    search() {
-      return this.api().search;
-    },
   },
 
   mounted() {
@@ -82,36 +78,37 @@ export default {
       e.stopPropagation();
 
       if (this.visible && !this.$el.contains(e.target)) {
-        this.componentTrigger.onClick();
+        this.componentTrigger.cancel();
       }
     });
   },
 
   destroyed() {
     // T-162 Create a directive or mixin for this
-    document.removeEventListener('click', this.componentTrigger.onClick);
+    document.removeEventListener('click', this.componentTrigger.cancel);
   },
 
   methods: {
     show() {
-      if (this.visible) return;
+      if (this.visible) {
+        return;
+      }
 
       this.visible = true;
 
       this.$nextTick(() => {
         this.component.setActive();
-        if (this.search) this.search.el.focus();
       });
     },
 
     hide() {
-      if (!this.visible) return;
+      if (!this.visible) {
+        return;
+      }
 
       this.visible = false;
 
       this.$nextTick(() => {
-        this.componentTrigger.focus();
-        this.componentTrigger.toggleExpanded();
         this.component.clearActive();
       });
     },

package/src/components/Listbox/VTListboxItem.vue

@@ -196,7 +196,10 @@ export default {
      * Hides componentContent/menu and focus on componentTrigger
      */
     leaveMenu() {
-      if (this.componentContent) this.componentContent.hide();
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
     },
 
     onKeyEsc() {

package/src/components/Listbox/VTListboxSearch.vue

@@ -4,6 +4,7 @@
     :class="{ 'listbox-search': headless, 'form-control mb-1': !headless }"
     type="text"
     @input="onChange"
+    @click.stop
     @keydown.down.prevent="focusNextItem"
     @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
@@ -58,6 +59,7 @@ export default {
     };
 
     this.api().registerSearch(search);
+    this.$nextTick(() => setTimeout(() => this.$el.focus(), 150));
   },
 
   beforeDestroy() {

package/src/components/Listbox/VTListboxTrigger.vue

@@ -3,18 +3,20 @@
     :id="id"
     :aria-expanded="expanded"
     :aria-haspopup="hasPopup"
-    :class="{
-      'listbox-button': headless,
-      'flex w-full justify-between rounded-md border border-solid py-2 px-3':
-        !headless,
-      'border-gray-300 text-gray-500': !dark && !headless,
-      'border-white/70 text-white focus-visible:ring-2 focus-visible:ring-white':
-        dark && !headless,
-    }"
+    :class="[
+      headless
+        ? 'listbox-button'
+        : 'flex w-full justify-between border border-solid py-2 px-3 rounded text-inherit max-w-full',
+      headless
+        ? `listbox-button--${variant}`
+        : isError
+        ? 'border-error-300'
+        : 'border-gray-300',
+    ]"
     type="button"
     @click.prevent="onClick"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
     <span
@@ -49,10 +51,18 @@ export default {
   inject: ['api'],
 
   props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     headless: {
       type: Boolean,
       default: false,
     },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
   },
 
   data() {
@@ -67,8 +77,8 @@ export default {
       return `listbox-trigger-${this.api().id}`;
     },
 
-    dark() {
-      return this.api().isDark;
+    isError() {
+      return this.variant === 'error';
     },
 
     componentContent() {
@@ -90,101 +100,86 @@ export default {
 
   mounted() {
     const trigger = {
-      toggleExpanded: this.toggleExpanded,
       el: this.$el,
+      cancel: this.cancel,
       focus: this.focus,
       id: this.id,
-      onClick: this.onClick,
     };
 
     this.api().registerTrigger(trigger);
   },
 
   methods: {
-    /**
-     * Shows content/menu if not already visible
-     */
-    showContent() {
-      this.expanded = true;
-      this.componentContent.show();
-    },
-
-    focus() {
-      this.$el.focus();
-    },
-
-    toggleExpanded() {
-      if (!this.expanded) return;
-      this.expanded = false;
-    },
-
-    /**
-     * On click, do the following:
-     *
-     * 1. Toggle aria expanded attribute/state
-     * 2. Open the menu if it's closed
-     * 3. Close the menu if it's open
-     */
-    onClick(e) {
-      if (!this.componentContent) return;
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
 
       if (this.expanded) {
-        this.componentContent.hide();
+        this.cancel();
         return;
       }
 
+      this.expanded = true;
+
       // delay stop propagation to close other visible
       // dropdowns and delay click event to control
       // this dropdown visibility
       setTimeout(() => e.stopImmediatePropagation(), 50);
-      setTimeout(() => this.showContent(), 100);
+      setTimeout(() => this.showComponentContent(), 100);
+    },
+
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+
+      this.hideComponentContent();
     },
 
-    /**
-     * On key arrow down, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the first menu item
-     * 2. if the menu is expanded, focus the first menu item
-     */
-    onKeyArrowDown() {
-      if (!this.componentContent) return;
+    focus() {
+      this.$el.focus();
+    },
 
-      this.showContent();
+    showComponentContent() {
+      this.componentContent.show();
+    },
 
-      // settimeout here is delaying the focusing the element
-      // since it is not rendered yet. All items will only
-      // be available when the content is fully visible.
-      this.$nextTick(() => {
-        setTimeout(() => this.firstMenuItem.focus(), 150);
-      });
+    hideComponentContent() {
+      this.componentContent.hide();
     },
 
-    /**
-     * On key arrow up, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the last menu item
-     * 2. if the menu is expanded, focus the last menu item
-     */
-    onKeyArrowUp() {
-      if (!this.componentContent) return;
+    onClick(e) {
+      this.init(e);
+    },
 
-      this.showContent();
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
+
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
 
       // settimeout here is delaying the focusing the element
       // since it is not rendered yet. All items will only
       // be available when the content is fully visible.
       this.$nextTick(() => {
-        setTimeout(() => this.lastMenuItem.focus(), 150);
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
+    // change it to a better name or move the methods inside to another function
     onKeyEsc() {
-      if (!this.componentContent) return;
-
-      if (this.expanded) {
-        this.toggleExpanded();
-        this.componentContent.hide();
-      }
+      this.cancel();
+      this.focus();
     },
   },
 };