@veritree/ui 0.22.3 → 0.23.0

package/src/components/Dialog/VTDialogHeader.vue

@@ -2,10 +2,11 @@
   <component
     :is="as"
     :id="id"
-    :class="{
-      'Dialog-header': headless,
-      'mb-8 flex justify-between gap-x-3 items-center w-full': !headless,
-    }"
+    :class="[
+      headless
+        ? 'dialog-header'
+        : 'mb-8 flex w-full items-center justify-between gap-x-3',
+    ]"
   >
     <slot></slot>
   </component>
@@ -13,28 +14,24 @@
 
 <script>
 export default {
-  name: "VTDialogHeader",
+  name: 'VTDialogHeader',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-header`;
+      return `dialog-header-${this.apiDialog().componentId}`;
     },
   },
 
@@ -45,10 +42,10 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-labelledby", this.id);
+        dialog.setAttribute('aria-labelledby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogMain.vue

@@ -2,10 +2,7 @@
   <component
     :is="as"
     :id="id"
-    :class="{
-      'Dialog-body': headless,
-      'flex-1 w-full h-full overflow-y-auto': !headless,
-    }"
+    :class="[headless ? 'dialog-body' : 'h-full w-full flex-1 overflow-y-auto']"
   >
     <slot></slot>
   </component>
@@ -13,28 +10,24 @@
 
 <script>
 export default {
-  name: "VTDialogMain",
+  name: 'VTDialogMain',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "main",
+      default: 'main',
     },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-desc`;
+      return `dialog-main-${this.apiDialog().componentId}`;
     },
   },
 
@@ -45,10 +38,10 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-describedby", this.id);
+        dialog.setAttribute('aria-describedby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogOverlay.vue

@@ -3,25 +3,29 @@
     <div
       v-if="visible"
       :id="id"
-      :class="{
-        'Dialog-overlay': headless,
-        'fixed inset-0 bg-fd-450/80': !headless,
-      }"
-    ></div>
+      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+    />
   </FadeInOut>
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
-  name: "VTDialogOverlay",
+  name: 'VTDialogOverlay',
 
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -31,21 +35,13 @@ export default {
 
   computed: {
     id() {
-      return `dialog-overlay-${this.api().componentId}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDialog().registerOverlay(this);
   },
 
   methods: {

package/src/components/Dialog/VTDialogTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     :id="id"
-    :class="{ 'Dialog-header': headless, 'text-2xl font-semibold': !headless }"
+    :class="[headless ? 'dialog-header' : 'text-2xl font-semibold']"
   >
     <slot></slot
   ></span>
@@ -9,17 +9,20 @@
 
 <script>
 export default {
-  name: "VTDialogTitle",
+  name: 'VTDialogTitle',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
-  computed: {
-    headless() {
-      return this.api().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
+  },
 
+  computed: {
     id() {
-      return `${this.api().id}-title`;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 };

package/src/components/Drawer/VTDrawerContent.vue

@@ -22,7 +22,7 @@
         'bottom-0': position === 'bottom',
       }"
       tabindex="-1"
-      @keyup.esc="hide"
+      @keydown.esc.stop="hide"
     >
       <slot></slot>
     </div>

package/src/components/Drawer/VTDrawerFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="{ 'Dialog-footer': headless }">
+  <component :is="as" :class="{ 'dialog-footer': headless }">
     <slot></slot>
   </component>
 </template>

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -56,12 +56,31 @@ export default {
       type: Boolean,
       default: false,
     },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
   },
 
   data() {
     return {
       componentId: genId(),
       items: [],
+      /**
+       * Explaining the need for the floatingUiMinWidth data
+       *
+       * The floating ui is a result of two items:
+       *
+       * 1. Trigger: the action button
+       * 2. Content: the popper/wrapper that appears after triggering the action button
+       *
+       * By default, the content will match the triggers width.
+       * The problem with this is that the trigger width
+       * might be too small causing the content to not fit
+       * what is inside it properly. So, to avoid this,
+       * a min width is needed.
+       */
+      floatingUiMinWidth: 200,
     };
   },
 

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,10 +1,10 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'dropdown-menu-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    :portal-class="$vnode.data.staticClass"
+    component="dropdown"
   >
     <slot></slot>
   </FloatingUi>
@@ -16,6 +16,8 @@ import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 export default {
   name: 'VTDropdownMenuContent',
 
+  inheritAttrs: false,
+
   mixins: [floatingUiContentMixin],
 
   inject: ['apiDropdownMenu'],
@@ -39,9 +41,6 @@ export default {
       id: this.id,
       hide: this.hide,
       show: this.show,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -9,8 +9,8 @@
     class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
-    @keydown.down.prevent="focusPreviousItem"
-    @keydown.up.prevent="focusNextItem"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
     @keydown.end.prevent="focusLastItem"
     @keydown.esc.prevent="onKeyEsc"

package/src/components/Form/VTFormFeedback.vue

@@ -1,25 +1,25 @@
 <template>
   <div
     :class="[
-      headless ? 'form-feedback' : 'flex gap-2 mt-1 items-baseline',
+      headless ? 'form-feedback' : 'mt-1 flex items-baseline gap-2',
       // variant styles
-      headless ? `form-feedback--{$variant}` : null,
+      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',
+        headless ? 'form-feedback__icon' : 'relative top-1 h-4 w-4 shrink-0',
         // variant styles
         headless
-          ? `form-feedback__icon--{$variant}`
+          ? `form-feedback__icon--${variant}`
           : isError
           ? 'text-error-500'
           : null,
       ]"
     />
-    <span :class="[headless ? 'form-feedback--text' : 'text-gray-500 text-sm']">
+    <span :class="[headless ? 'form-feedback--text' : 'text-sm text-gray-500']">
       <slot />
     </span>
   </div>

package/src/components/Form/VTInput.vue

@@ -8,10 +8,13 @@
 </template>
 
 <script>
-import { formControlMixin } from '../../../mixins/form-control';
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 
 export default {
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   data() {
     return {

package/src/components/Form/VTTextarea.vue

@@ -8,10 +8,13 @@
 </template>
 
 <script>
-import { formControlMixin } from '../../../mixins/form-control';
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 
 export default {
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   data() {
     return {

package/src/components/Listbox/VTListbox.vue

@@ -28,14 +28,9 @@ export default {
 
         const registerSearch = (search) => {
           if (!search) return;
-          this.search = search;
+          this.componentSearch = search;
         };
 
-        // const registerList = (list) => {
-        //   if (!list) return;
-        //   this.list = list;
-        // };
-
         const registerItem = (item) => {
           if (!item) return;
           this.items.push(item);
@@ -46,6 +41,16 @@ export default {
           this.items.splice(index, 1);
         };
 
+        const pushSearch = (key) => {
+          key === 'Backspace' && this.search.length
+            ? (this.search = this.search.slice(0, -1))
+            : (this.search += key);
+        };
+
+        const clearSearch = () => {
+          this.search = '';
+        };
+
         const emit = (value) => {
           this.$emit('input', value);
           this.$emit('change', value);
@@ -56,14 +61,17 @@ export default {
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,
+          componentSearch: this.componentSearch,
           items: this.items,
           search: this.search,
+          selectedValue: this.value,
           registerTrigger,
           registerContent,
           registerSearch,
-          // registerList,
           registerItem,
           unregisterItem,
+          pushSearch,
+          clearSearch,
           emit,
         };
       },
@@ -79,9 +87,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
+    placement: {
+      type: String,
+      default: 'bottom-start',
     },
     right: {
       type: Boolean,
@@ -92,8 +100,24 @@ export default {
   data() {
     return {
       componentId: genId(),
-      search: null,
+      componentSearch: null,
+      search: '',
       items: [],
+      /**
+       * Explaining the need for the floatingUiMinWidth data
+       *
+       * The floating ui is a result of two items:
+       *
+       * 1. Trigger: the action button
+       * 2. Content: the popper/wrapper that appears after triggering the action button
+       *
+       * By default, the content will match the triggers width.
+       * The problem with this is that the trigger width
+       * might be too small causing the content to not fit
+       * what is inside it properly. So, to avoid this,
+       * a min width is needed.
+       */
+      floatingUiMinWidth: 200,
     };
   },
 

package/src/components/Listbox/VTListboxContent.vue

@@ -1,11 +1,11 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
-    :aria-activedescendant="activeDescedant"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'listbox-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    :aria-activedescendant="activeDescedant"
+    :portal-class="$vnode.data.staticClass"
+    component="listbox"
     role="listbox"
   >
     <slot></slot>
@@ -47,9 +47,6 @@ export default {
       id: this.id,
       show: this.show,
       hide: this.hide,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 

package/src/components/Listbox/VTListboxItem.vue

@@ -5,30 +5,37 @@
     :aria-disabled="disabled"
     :aria-selected="String(selected)"
     :tabindex="tabIndex"
-    role="option"
+    :role="'option'"
     @click.stop="onClick"
-    @keydown.down.prevent="focusPreviousItem"
-    @keydown.up.prevent="focusNextItem"
+    @keydown.prevent="onKeydown"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
     @keydown.end.prevent="focusLastItem"
     @keydown.esc.stop="onKeyEsc"
     @keydown.enter.prevent="onClick"
-    @mousemove="onMousemove"
-    @mouseout="onMouseleave"
     @keydown.tab.prevent
   >
     <slot></slot>
+    <span v-if="wasSelected" class="ml-auto">
+      <IconCheckOutline class="text-secondary-200 h-5 w-5" />
+    </span>
   </li>
 </template>
 
 <script>
+import { IconCheckOutline } from '@veritree/icons';
 import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
+let keydownSearchTimeout = null;
+
 export default {
   name: 'VTListboxItem',
 
   mixins: [floatingUiItemMixin],
 
+  components: { IconCheckOutline },
+
   inject: ['apiListbox'],
 
   props: {
@@ -40,14 +47,118 @@ export default {
 
   data() {
     return {
+      // apiInjected is used in the mixin floating-ui-item
       apiInjected: this.apiListbox,
       componentName: 'listbox-item',
     };
   },
 
   computed: {
+    componentContent() {
+      return this.apiInjected().componentContent;
+    },
+
+    hasComponentSearch() {
+      return this.apiListbox().componentSearch !== null;
+    },
+
     search() {
-      return this.apiInjected().search;
+      return this.apiListbox().search;
+    },
+
+    /**
+     * The difference between selected (in the mixin) and
+     * wasSelected is that selected is more related to
+     * the aria-selected while wasSelected is the
+     * real selected option for the listbox
+     */
+    wasSelected() {
+      return (
+        JSON.stringify(this.value) ===
+        JSON.stringify(this.apiListbox().selectedValue)
+      );
+    },
+  },
+
+  mounted() {
+    if (this.wasSelected) {
+      /**
+       * There are some conflicts between the portal and the interaction
+       * with the element. It's unclear why it happens but if no delay,
+       * the floating ui content, that is placed in the body by the
+       * vue portal plugin, will not appear close to the trigger.
+       *
+       * Kind hacky but no time do find real solution.
+       */
+      setTimeout(() => {
+        this.hasComponentSearch ? this.select() : this.focus();
+      }, 1);
+    }
+  },
+
+  methods: {
+    /**
+     * This event is mainly for the search since other keydown
+     * events are handled with vue v-on (@) directive
+     *
+     * @param {Object} event
+     */
+    onKeydown(e) {
+      const isLetter = e.code.includes('Key');
+      const isNumber = e.code.includes('Numpad') || e.code.includes('Digit');
+      const isBackspace = e.code === 'Backspace';
+      const isSpace = e.code === 'Space';
+
+      if (isLetter || isNumber || isBackspace || isSpace) {
+        this.doSearch(e);
+      }
+    },
+
+    /**
+     * Searches and focus the options that matches the
+     * value typed when the item is selected.
+     *
+     * @param {Object} event
+     */
+    doSearch(e) {
+      clearTimeout(keydownSearchTimeout);
+
+      /**
+       * Add letter or number to search data in component
+       * root, so it is available for all children
+       */
+      this.apiListbox().pushSearch(e.key);
+
+      /**
+       * Let's get the item selected index at the moment the search
+       * starts to later unselect it if necessary
+       */
+      const itemSelectedIndex = this.getItemSelectedIndex();
+
+      /**
+       * As we have now the search data with value, let's go
+       * through all items and check if the search matches
+       * with any of the items to get its index value
+       */
+      const newItemSelectedIndex = this.items.findIndex((item) =>
+        item.text.toLowerCase().includes(this.search.toLowerCase())
+      );
+
+      /**
+       * Focus the item that matches the search, and if no match
+       * we will just remove the selected state from item
+       */
+      newItemSelectedIndex >= 0
+        ? this.setFocusToItem(itemSelectedIndex, newItemSelectedIndex)
+        : this.unselect();
+
+      /**
+       * Clear the search data value after some time
+       * to allow other searches to be performed
+       */
+      keydownSearchTimeout = setTimeout(() => {
+        this.apiListbox().clearSearch();
+      }, 1000);
     },
   },
 };