@veritree/ui 0.19.2-16 → 0.19.2-18

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,34 +1,20 @@
 <template>
   <button
+    :id="id"
+    :class="classComputed"
+    :disabled="disabled"
     :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,
-    }"
     type="button"
-    @click.stop.prevent="onClick"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
+    @click.prevent="onClick"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
-    <span
-      :class="{
-        'Listbox-button__text': headless,
-        'text-left': !headless,
-      }"
-    >
+    <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
-    <span
-      :class="{
-        'Listbox-button__icon': headless,
-      }"
-    >
+    <span :class="[headless ? 'listbox-button__icon' : 'shrink-0']">
       <IconChevronDown
         class="transition-transform"
         :class="{ 'rotate-180': expanded }"
@@ -38,6 +24,7 @@
 </template>
 
 <script>
+import { formControlMixin } from '../../../mixins/form-control';
 import { IconChevronDown } from '@veritree/icons';
 
 export default {
@@ -45,29 +32,22 @@ export default {
 
   components: { IconChevronDown },
 
-  inject: ['apiListbox'],
+  mixins: [formControlMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  inject: ['apiListbox'],
 
   data() {
     return {
+      name: 'listbox-button',
       expanded: false,
       hasPopup: false,
+      id: null,
     };
   },
 
   computed: {
-    dark() {
-      return this.apiListbox().isDark;
-    },
-
-    content() {
-      return this.apiListbox().content;
+    componentContent() {
+      return this.apiListbox().componentContent;
     },
 
     items() {
@@ -84,85 +64,88 @@ export default {
   },
 
   mounted() {
+    this.id = `listbox-trigger-${this.apiListbox().id}`;
+
     const trigger = {
       el: this.$el,
+      cancel: this.cancel,
       focus: this.focus,
-      onClick: this.onClick,
-      contract: this.contract,
+      id: this.id,
     };
 
     this.apiListbox().registerTrigger(trigger);
   },
 
   methods: {
-    /**
-     * Shows content/menu if not already visible
-     */
-    showContent() {
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
+
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
+
       this.expanded = true;
-      this.content.show();
-    },
 
-    focus() {
-      this.$el.focus();
+      // 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);
     },
 
-    contract() {
-      if (!this.expanded) return;
+    cancel() {
+      if (!this.componentContent) {
+        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() {
-      if (!this.content) return;
-      this.expanded ? this.content.hide() : this.showContent();
+      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.content) return;
+    focus() {
+      this.$el.focus();
+    },
 
-      this.showContent();
+    showComponentContent() {
+      this.componentContent.show();
+    },
 
-      this.$nextTick(() => {
-        this.firstMenuItem.focus();
-      });
+    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.content) 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(() => {
-        this.lastMenuItem.focus();
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
+    // change it to a better name or move the methods inside to another function
     onKeyEsc() {
-      if (!this.content) return;
-
-      if (this.expanded) {
-        this.toggleExpanded();
-        this.content.hide();
-      }
+      this.cancel();
+      this.focus();
     },
   },
 };

package/src/components/Popover/VTPopover.vue

@@ -2,43 +2,41 @@
   <div
     :id="id"
     class="relative"
-    :aria-haspopup="content ? 'true' : null"
-    :aria-controls="content ? content.id : null"
+    :aria-haspopup="componentContent ? 'true' : null"
+    :aria-controls="componentContent ? componentContent.id : null"
   >
     <slot></slot>
   </div>
 </template>
 
 <script>
+import { floatingUiMixin } from '../../../mixins/floating-ui';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTPopover',
 
+  mixins: [floatingUiMixin],
+
   provide() {
     return {
       apiPopover: () => {
-        const { dark: isDark, headless: isHeadless, right: isRight } = this;
-        const { id, button, content } = this;
-
-        const registerButton = (button) => {
-          if (!button) return;
-          this.button = button;
+        const registerTrigger = (trigger) => {
+          if (!trigger) return;
+          this.componentTrigger = trigger;
         };
 
         const registerContent = (content) => {
           if (!content) return;
-          this.content = content;
+          this.componentContent = content;
         };
 
         return {
-          id,
-          isDark,
-          isHeadless,
-          isRight,
-          button,
-          content,
-          registerButton,
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          registerTrigger,
           registerContent,
         };
       },
@@ -50,22 +48,18 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      id: `popover-${genId()}`,
-      button: null,
-      content: null,
+      componentId: genId(),
     };
   },
+
+  computed: {
+    id() {
+      return `popover-${this.componentId}`;
+    },
+  },
 };
 </script>

package/src/components/Popover/VTPopoverContent.vue

@@ -1,82 +1,47 @@
 <template>
-  <transition
-    enter-active-class="duration-200 ease-out"
-    enter-from-class="translate-y-[15px] opacity-0"
-    enter-to-class="translate-y-0 opacity-100"
-    leave-active-class="duration-200 ease-in"
-    leave-from-class="translate-y-0 opacity-100"
-    leave-to-class="translate-y-[15px] opacity-0"
-    @after-leave="hide"
+  <FloatingUi
+    :visible="visible"
+    :id="id"
+    :headless="headless"
+    :class="{ 'popover-content': headless }"
+    :floating-ui-class="floatingUiClass"
   >
-    <div
-      v-show="visible"
-      :id="id"
-      :class="{
-        PopoverPanel: headless,
-        'absolute top-full mt-3 rounded-md shadow-300 ': !headless,
-        'bg-white': !dark,
-        'border-gray-700 bg-forest-default shadow-gray-700': dark,
-        'left-0': !right,
-        'right-0': right,
-      }"
-    >
-      <slot></slot>
-    </div>
-  </transition>
+    <slot></slot>
+  </FloatingUi>
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 
 export default {
   name: 'VTPopoverContent',
 
-  inject: ['apiPopover'],
+  mixins: [floatingUiContentMixin],
 
-  data() {
-    return {
-      id: `popover-panel-${genId()}`,
-      visible: false,
-    };
-  },
+  inject: ['apiPopover'],
 
   computed: {
-    dark() {
-      return this.apiPopover().isDark;
+    id() {
+      return `popover-content-${this.apiPopover().id}`;
     },
 
-    headless() {
-      return this.apiPopover().isHeadless;
+    component() {
+      return this.apiPopover().component;
     },
 
-    right() {
-      return this.apiPopover().isRight;
+    componentTrigger() {
+      return this.apiPopover().componentTrigger;
     },
   },
 
   mounted() {
-    this.apiPopover().registerContent(this);
-
-    // T-75 Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.visible && !this.$el.contains(e.target)) this.hide();
-    });
-  },
-
-  unmounted() {
-    // T-76 Create a directive or mixin for this
-    document.removeEventListener('click', this.hide());
-  },
-
-  methods: {
-    show() {
-      this.visible = true;
-    },
+    const content = {
+      id: this.id,
+      show: this.show,
+      hide: this.hide,
+    };
 
-    hide() {
-      this.visible = false;
-    },
+    this.apiPopover().registerContent(content);
   },
 };
 </script>

package/src/components/Popover/VTPopoverDivider.vue

@@ -3,8 +3,6 @@
     :class="{
       PopoverDivider: headless,
       'h-[1px]': !headless,
-      'bg-white': !dark,
-      'bg-fd-500': dark,
     }"
   ></div>
 </template>
@@ -13,15 +11,10 @@
 export default {
   name: 'VTPopoverDivider',
 
-  inject: ['apiPopover'],
-
-  computed: {
-    dark() {
-      return this.apiPopover().isDark;
-    },
-
-    headless() {
-      return this.apiPopover().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
   },
 };

package/src/components/Popover/VTPopoverItem.vue

@@ -1,13 +1,12 @@
 <template>
   <component
     :is="as"
-    :class="{
-      PopoverItem: headless,
-      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 no-underline':
-        !headless,
-      'text-fd-500': !dark,
-      'text-white hover:bg-fd-450': dark,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'popover-item'
+        : 'hover:bg-secondary-200/10 relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+    ]"
     @click="onClick"
   >
     <slot></slot>
@@ -21,14 +20,18 @@ export default {
   inject: ['apiPopover'],
 
   props: {
-    to: {
-      type: [String, Object],
-      default: null,
+    headless: {
+      type: Boolean,
+      default: false,
     },
     href: {
       type: String,
       default: null,
     },
+    to: {
+      type: [String, Object],
+      default: null,
+    },
   },
 
   computed: {

package/src/components/Popover/VTPopoverTrigger.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @keydown.esc.prevent="onEsc">
+  <div :id="id" @keydown.esc.prevent="onKeyEsc">
     <slot></slot>
   </div>
 </template>
@@ -10,46 +10,146 @@ export default {
 
   inject: ['apiPopover'],
 
+  data() {
+    return {
+      expanded: false,
+      hasPopup: false,
+      controls: null,
+      trigger: null,
+    };
+  },
+
   computed: {
-    content() {
-      return this.apiPopover().content;
+    id() {
+      return `popover-trigger-${this.apiPopover().id}`;
+    },
+
+    componentContent() {
+      return this.apiPopover().componentContent;
     },
   },
 
   mounted() {
-    this.apiPopover().registerButton(this);
+    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: {
     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) => {
-        if (this.expanded) {
-          this.onClick();
-          return;
-        }
-
-        // delay stop propagation to close other visible
-        // dropdowns and delay click event to control
-        // this dropdown visibility
-        setTimeout(() => e.stopImmediatePropagation(), 50);
-        setTimeout(() => this.onClick(), 100);
+        this.onClick(e);
       });
     },
 
-    onClick() {
-      if (this.content.visible) this.content.hide();
-      else this.content.show();
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
+
+      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() {
+      if (this.trigger) this.trigger.focus();
+    },
+
+    showComponentContent() {
+      this.componentContent.show();
+    },
+
+    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);
+      });
     },
 
-    onEsc() {
-      if (!this.content) return;
-      this.content.hide();
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };