@veritree/ui 0.20.1 → 0.21.1-0

package/src/components/Form/VTFormFeedback.vue

@@ -1,7 +1,27 @@
 <template>
-  <div class="form-feedback" :class="classes">
-    <component :is="icon" v-if="showIcon" />
-    <span class="text-gray-500"><slot></slot></span>
+  <div
+    :class="[
+      headless ? 'form-feedback' : 'flex gap-2 mt-1 items-baseline',
+      // variant styles
+      headless ? `form-feedback--{$variant}` : null,
+    ]"
+  >
+    <component
+      v-if="showIcon"
+      :is="icon"
+      :class="[
+        headless ? 'form-feedback__icon' : 'relative top-1 shrink-0 h-4 w-4',
+        // variant styles
+        headless
+          ? `form-feedback__icon--{$variant}`
+          : isError
+          ? 'text-error-500'
+          : null,
+      ]"
+    />
+    <span :class="[headless ? 'form-feedback--text' : 'text-gray-500 text-sm']">
+      <slot />
+    </span>
   </div>
 </template>
 
@@ -17,32 +37,23 @@ export default {
   },
 
   props: {
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
     hideIcon: {
       type: Boolean,
       default: false,
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: [String, Object],
+      default: '',
+    },
   },
 
   computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-feedback--${this.variant}`] = true;
-      }
-
-      return classes;
+    isError() {
+      return this.variant === 'error';
     },
 
     icon() {

package/src/components/Form/VTInput.vue

@@ -0,0 +1,52 @@
+<template>
+  <input
+    v-bind="$attrs"
+    :class="[
+      headless
+        ? 'form-control'
+        : 'border border-solid py-2 px-3 rounded text-inherit',
+      headless
+        ? `form-control--${variant}`
+        : isError
+        ? 'border-error-300'
+        : 'border-gray-300',
+    ]"
+    :value="value"
+    @input="$emit('input', $event.target.value)"
+    @blur="$emit('blur')"
+  />
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number, Object, Array],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};
+</script>

package/src/components/Listbox/VTListbox.vue

@@ -1,29 +1,31 @@
 <template>
-  <div :class="{ Listbox: headless, relative: !headless, 'z-20': active }">
+  <div :class="{ listbox: headless }">
     <slot></slot>
   </div>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { floatingUiMixin } from '../../../mixins/floating-ui';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListbox",
+  name: 'VTListbox',
+
+  mixins: [floatingUiMixin],
 
   provide() {
     return {
       api: () => {
-        const { dark: isDark, right: isRight } = this;
-        const { id, listbox, trigger, content, search, list, items } = this;
+        const { dark: isDark } = this;
 
         const registerTrigger = (trigger) => {
           if (!trigger) return;
-          this.trigger = trigger;
+          this.componentTrigger = trigger;
         };
 
         const registerContent = (content) => {
           if (!content) return;
-          this.content = content;
+          this.componentContent = content;
         };
 
         const registerSearch = (search) => {
@@ -47,20 +49,19 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit("input", value);
-          this.$emit("change", value);
+          this.$emit('input', value);
+          this.$emit('change', value);
         };
 
         return {
-          id,
+          id: this.componentId,
           isDark,
-          isRight,
-          listbox,
-          trigger,
-          search,
-          content,
-          list,
-          items,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          list: this.list,
+          items: this.items,
+          search: this.search,
           registerTrigger,
           registerContent,
           registerSearch,
@@ -94,31 +95,16 @@ export default {
 
   data() {
     return {
-      id: `listbox-${genId()}`,
-      listbox: null,
-      trigger: null,
-      content: null,
+      componentId: genId(),
       search: null,
       list: null,
       items: [],
-      active: false,
-    };
-  },
-
-  mounted() {
-    this.listbox = {
-      setActive: this.setActive,
-      clearActive: this.clearActive,
     };
   },
 
-  methods: {
-    setActive() {
-      this.active = true;
-    },
-
-    clearActive() {
-      this.active = null;
+  computed: {
+    id() {
+      return `listbox-${this.componentId}`;
     },
   },
 };

package/src/components/Listbox/VTListboxContent.vue

@@ -1,43 +1,27 @@
 <template>
-  <transition
-    enter-active-class="duration-200 ease-out"
-    enter-class="translate-y-[15px] opacity-0"
-    enter-to-class="translate-y-0 opacity-100"
-    leave-active-class="duration-200 ease-in"
-    leave-class="translate-y-0 opacity-100"
-    leave-to-class="translate-y-[15px] opacity-0"
-    @after-leave="hide"
+  <FloatingUi
+    :visible="visible"
+    :id="id"
+    :aria-activedescendant="activeDescedant"
+    :headless="headless"
+    :class="{ 'listbox-content': headless }"
+    role="listbox"
   >
-    <div
-      v-if="visible"
-      :id="id"
-      :aria-activedescendant="activeDescedant"
-      :class="{
-        MenuList: headless,
-        'absolute z-10 grid w-full min-w-[222px] overflow-hidden rounded-md py-2 px-3':
-          !headless,
-        'border-gray-100 bg-white shadow-300': !dark && !headless,
-        'bg-forest-default border border-solid border-gray-700 shadow-gray-700':
-          dark && !headless,
-        'left-0': !right && !headless,
-        'right-0': right && !headless,
-        'top-full mt-3': isTop && !headless,
-        'bottom-full mb-3': isBottom && !headless,
-      }"
-      role="listbox"
-    >
-      <slot></slot>
-    </div>
-  </transition>
+    <slot></slot>
+  </FloatingUi>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import FloatingUi from '../Utils/FloatingUi.vue';
 
 export default {
-  name: "VTListboxContent",
+  name: 'VTListboxContent',
 
-  inject: ["api"],
+  components: {
+    FloatingUi,
+  },
+
+  inject: ['api'],
 
   props: {
     headless: {
@@ -56,41 +40,27 @@ export default {
 
   data() {
     return {
-      id: `listboxcontent-${genId()}`,
       activeDescedant: null,
       visible: false,
     };
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    right() {
-      return this.api().isRight;
+    id() {
+      return `listbox-content-${this.api().id}`;
     },
 
-    listbox() {
-      return this.api().listbox;
+    component() {
+      return this.api().component;
     },
 
-    trigger() {
-      return this.api().trigger;
+    componentTrigger() {
+      return this.api().componentTrigger;
     },
 
     search() {
       return this.api().search;
     },
-
-    // directions
-    isTop() {
-      return this.top && !this.bottom;
-    },
-
-    isBottom() {
-      return this.bottom;
-    },
   },
 
   mounted() {
@@ -103,16 +73,23 @@ export default {
 
     this.api().registerContent(content);
 
-    // TODO: Create a directive or mixin for this
-    document.addEventListener("click", (e) => {
+    // T-107 Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
+      if (!e) {
+        return;
+      }
+
       e.stopPropagation();
-      if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
+
+      if (this.visible && !this.$el.contains(e.target)) {
+        this.componentTrigger.onClick();
+      }
     });
   },
 
   destroyed() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener("click", this.trigger.onClick());
+    // T-162 Create a directive or mixin for this
+    document.removeEventListener('click', this.componentTrigger.onClick);
   },
 
   methods: {
@@ -122,8 +99,7 @@ export default {
       this.visible = true;
 
       this.$nextTick(() => {
-        this.listbox.setActive();
-
+        this.component.setActive();
         if (this.search) this.search.el.focus();
       });
     },
@@ -134,12 +110,9 @@ export default {
       this.visible = false;
 
       this.$nextTick(() => {
-        this.trigger.focus();
-
-        setTimeout(() => {
-          this.listbox.clearActive();
-          this.trigger.contract();
-        }, 100);
+        this.componentTrigger.focus();
+        this.componentTrigger.toggleExpanded();
+        this.component.clearActive();
       });
     },
 

package/src/components/Listbox/VTListboxItem.vue

@@ -29,13 +29,13 @@
 </template>
 
 <script>
-import { scrollElementIntoView } from "../../utils/components";
-import { genId } from "../../utils/ids";
+import { scrollElementIntoView } from '../../utils/components';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListboxItem",
+  name: 'VTListboxItem',
 
-  inject: ["api"],
+  inject: ['api'],
 
   props: {
     headless: {
@@ -74,12 +74,12 @@ export default {
       return this.$el;
     },
 
-    trigger() {
-      return this.api().trigger;
+    componentTrigger() {
+      return this.api().componentTrigger;
     },
 
-    content() {
-      return this.api().content;
+    componentContent() {
+      return this.api().componentContent;
     },
 
     list() {
@@ -95,8 +95,8 @@ export default {
     selected(newValue) {
       if (!newValue || !this.list) return;
 
-      if (this.content) {
-        this.content.setActiveDescedant(this.id);
+      if (this.componentContent) {
+        this.componentContent.setActiveDescedant(this.id);
       }
 
       const isMousemove = this.list.getMousemove();
@@ -193,10 +193,10 @@ export default {
     },
 
     /**
-     * Hides content/menu and focus on trigger
+     * Hides componentContent/menu and focus on componentTrigger
      */
     leaveMenu() {
-      if (this.content) this.content.hide();
+      if (this.componentContent) this.componentContent.hide();
     },
 
     onKeyEsc() {

package/src/components/Listbox/VTListboxSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <input
     v-model="search"
-    :class="{ ListboxList: headless, 'form-control mb-1': !headless }"
+    :class="{ 'listbox-search': headless, 'form-control mb-1': !headless }"
     type="text"
     @input="onChange"
     @keydown.down.prevent="focusNextItem"
@@ -35,12 +35,8 @@ export default {
   },
 
   computed: {
-    content() {
-      return this.api().content;
-    },
-
-    trigger() {
-      return this.api().trigger;
+    componentContent() {
+      return this.api().componentContent;
     },
 
     list() {
@@ -131,7 +127,7 @@ export default {
     },
 
     hide() {
-      if (this.content) this.content.hide();
+      if (this.componentContent) this.componentContent.hide();
     },
   },
 };

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,9 +1,10 @@
 <template>
   <button
+    :id="id"
     :aria-expanded="expanded"
     :aria-haspopup="hasPopup"
     :class="{
-      'Listbox-button': headless,
+      '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,
@@ -11,14 +12,14 @@
         dark && !headless,
     }"
     type="button"
-    @click.stop.prevent="onClick"
+    @click.prevent="onClick"
     @keydown.down.prevent="onKeyArrowDown"
     @keydown.up.prevent="onKeyArrowUp"
     @keydown.esc.stop="onKeyEsc"
   >
     <span
       :class="{
-        'Listbox-button__text': headless,
+        'listbox-button__text': headless,
         'text-left': !headless,
       }"
     >
@@ -26,7 +27,7 @@
     </span>
     <span
       :class="{
-        'Listbox-button__icon': headless,
+        'listbox-button__icon': headless,
       }"
     >
       <IconChevronDown
@@ -62,12 +63,16 @@ export default {
   },
 
   computed: {
+    id() {
+      return `listbox-trigger-${this.api().id}`;
+    },
+
     dark() {
       return this.api().isDark;
     },
 
-    content() {
-      return this.api().content;
+    componentContent() {
+      return this.api().componentContent;
     },
 
     items() {
@@ -85,10 +90,11 @@ export default {
 
   mounted() {
     const trigger = {
+      toggleExpanded: this.toggleExpanded,
       el: this.$el,
       focus: this.focus,
+      id: this.id,
       onClick: this.onClick,
-      contract: this.contract,
     };
 
     this.api().registerTrigger(trigger);
@@ -100,14 +106,14 @@ export default {
      */
     showContent() {
       this.expanded = true;
-      this.content.show();
+      this.componentContent.show();
     },
 
     focus() {
       this.$el.focus();
     },
 
-    contract() {
+    toggleExpanded() {
       if (!this.expanded) return;
       this.expanded = false;
     },
@@ -119,9 +125,19 @@ export default {
      * 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();
+    onClick(e) {
+      if (!this.componentContent) return;
+
+      if (this.expanded) {
+        this.componentContent.hide();
+        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);
     },
 
     /**
@@ -131,12 +147,15 @@ export default {
      * 2. if the menu is expanded, focus the first menu item
      */
     onKeyArrowDown() {
-      if (!this.content) return;
+      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(() => {
-        this.firstMenuItem.focus();
+        setTimeout(() => this.firstMenuItem.focus(), 150);
       });
     },
 
@@ -147,21 +166,24 @@ export default {
      * 2. if the menu is expanded, focus the last menu item
      */
     onKeyArrowUp() {
-      if (!this.content) return;
+      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(() => {
-        this.lastMenuItem.focus();
+        setTimeout(() => this.lastMenuItem.focus(), 150);
       });
     },
 
     onKeyEsc() {
-      if (!this.content) return;
+      if (!this.componentContent) return;
 
       if (this.expanded) {
         this.toggleExpanded();
-        this.content.hide();
+        this.componentContent.hide();
       }
     },
   },