@veritree/ui 0.21.1-0 → 0.21.1-10

package/src/components/Popover/VTPopoverTrigger.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" @keydown.esc.prevent="onEsc">
+  <div :id="id" @keydown.esc.prevent="onKeyEsc">
     <slot></slot>
   </div>
 </template>
@@ -8,52 +8,149 @@
 export default {
   name: 'VTPopoverTrigger',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
+
+  data() {
+    return {
+      expanded: false,
+      hasPopup: false,
+      controls: null,
+      trigger: null,
+    };
+  },
 
   computed: {
     id() {
-      return `popover-trigger-${this.api().id}`;
+      return `popover-trigger-${this.apiPopover().id}`;
     },
 
     componentContent() {
-      return this.api().componentContent;
+      return this.apiPopover().componentContent;
     },
   },
 
   mounted() {
-    this.api().registerTrigger(this);
-    this.handleSlotTrigger();
+    const trigger = {
+      id: this.id,
+      el: this.$el,
+      cancel: this.cancel,
+      focus: this.focus,
+    };
+
+    this.apiPopover().registerTrigger(trigger);
+
+    this.setTrigger();
+    this.addTriggerEvents();
+  },
+
+  destroyed() {
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
-    handleSlotTrigger() {
-      const slot = this.$slots.default;
-      const trigger = slot[0].elm;
+    setTrigger() {
+      this.trigger = this.$el.querySelector(':first-child');
+    },
+
+    /**
+     * Add event listener to slot element
+     *
+     * The click event has to be added to the slot child element
+     * since we are not setting the onclick on the component
+     * itself.
+     *
+     * Slot must have only one child element. It avoids
+     * errors related to adding the event listener.
+     */
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', (e) => {
+        this.onClick(e);
+      });
+    },
 
-      if (slot.length > 1) {
-        console.error('VTPopoverButton only accepts one item in its slot');
+    init(e) {
+      if (!this.componentContent) {
         return;
       }
 
-      trigger.addEventListener('click', (e) => {
-        this.onClick();
-        e.stopPropagation();
-      });
+      if (this.expanded) {
+        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.showComponentContent(), 100);
+    },
+
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+
+      this.hideComponentContent();
     },
 
     focus() {
-      this.$el.focus();
+      if (this.trigger) this.trigger.focus();
     },
 
-    onClick() {
-      if (this.componentContent.visible) this.componentContent.hide();
-      else this.componentContent.show();
+    showComponentContent() {
+      this.componentContent.show();
     },
 
-    onEsc() {
-      if (!this.componentContent) return;
+    hideComponentContent() {
       this.componentContent.hide();
     },
+
+    toggleAriaHasPopup() {
+      if (this.expanded) {
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
+
+        return;
+      }
+
+      this.hasPopup = null;
+      this.controls = null;
+    },
+
+    onClick(e) {
+      this.init(e);
+    },
+
+    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[listItemPosition].focus(), 100);
+      });
+    },
+
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
+    },
   },
 };
 </script>

package/src/components/Utils/FloatingUi.vue

@@ -15,7 +15,8 @@
         :class="[
           headless
             ? null
-            : 'absolute z-50 grid min-w-[222px] overflow-hidden rounded-md py-2 px-3 border-gray-100 bg-white shadow-300',
+            : 'absolute z-50 grid overflow-x-hidden rounded-md py-2 px-3 border-gray-100 bg-white shadow-300',
+          floatingUiClass ? floatingUiClass : null,
         ]"
       >
         <slot></slot>
@@ -45,6 +46,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    floatingUiClass: {
+      type: [String, Function],
+      default: null,
+    },
   },
 
   methods: {

package/src/utils/components.js

@@ -1,18 +0,0 @@
-/**
- *
- * @param {HTMLElement} el
- * @param {HTMLElement} parent
- */
- export const scrollElementIntoView = (el, parent) => {
-  // this works better than scrollIntoView
-  if (parent.scrollHeight <= parent.clientHeight) return;
-
-  const scrollBottom = parent.clientHeight + parent.scrollTop;
-  const elBottom = el.offsetTop + el.offsetHeight;
-
-  if (elBottom > scrollBottom) {
-    parent.scrollTop = elBottom - parent.clientHeight;
-  } else if (el.offsetTop < parent.scrollTop) {
-    parent.scrollTop = el.offsetTop;
-  }
-};