@veritree/ui 0.22.2 → 0.23.0

package/mixins/floating-ui-content.js

@@ -10,16 +10,11 @@ export const floatingUiContentMixin = {
       type: Boolean,
       default: false,
     },
-    floatingUiClass: {
-      type: [String, Function],
-      default: null,
-    },
   },
 
   data() {
     return {
       el: null,
-      isMousemove: false,
       visible: false,
     };
   },
@@ -79,22 +74,6 @@ export const floatingUiContentMixin = {
       }
     },
 
-    // Mousemove instead of mouseover to support keyboard navigation.
-    // The problem with mouseover is that when scrolling (scrollIntoView),
-    // mouseover event gets triggered.
-    setMousemove() {
-      this.isMousemove = true;
-    },
-
-    unsetMousemove() {
-      this.isMousemove = false;
-    },
-
-    getMousemove() {
-      return this.isMousemove;
-    },
-
-    // 
     setActiveDescedant(id) {
       this.activeDescedant = id;
     },

package/mixins/floating-ui-item.js

@@ -19,10 +19,6 @@ export const floatingUiItemMixin = {
       return this.apiInjected().items;
     },
 
-    el() {
-      return this.$el;
-    },
-
     componentContent() {
       return this.apiInjected().componentContent;
     },
@@ -51,7 +47,7 @@ export const floatingUiItemMixin = {
             ? `${this.componentName}--selected`
             : null
           : this.selected
-          ? 'bg-secondary-200/10'
+          ? 'bg-gray-200'
           : null,
       ];
     },
@@ -62,20 +58,24 @@ export const floatingUiItemMixin = {
       index: null,
       selected: false,
       tabIndex: 0,
+      eventType: null,
     };
   },
 
   watch: {
     selected(newValue) {
-      if (!newValue || !this.componentContent) return;
+      if (!newValue || !this.componentContent) {
+        return;
+      }
 
       this.componentContent.setActiveDescedant(this.id);
 
-      const isMousemove = this.componentContent.getMousemove();
-
-      if (!isMousemove) {
-        this.el.scrollIntoView({ block: 'nearest' });
+      // do not scroll into view if it's a mouse event
+      if (this.eventType && this.eventType.includes('mouse')) {
+        return;
       }
+
+      this.$el.scrollIntoView({ block: 'nearest' });
     },
   },
 
@@ -91,30 +91,45 @@ export const floatingUiItemMixin = {
 
   methods: {
     init() {
+      this.index = this.items.length;
+
       const item = {
         id: this.id,
+        text: this.$slots.default[0].text,
         select: this.select,
         unselect: this.unselect,
+        isSelected: this.isSelected,
         focus: this.focus,
         onClick: this.onClick,
       };
-  
+
       this.apiInjected().registerItem(item);
-  
-      this.index = this.items.length - 1;
     },
 
+    /**
+     * mousemove and mouseleave events will be attached to
+     * the element here instead of using vue @mousemove
+     * and @mouseleave in the element since they did
+     * not worker properly
+     */
     addMouseEventListeners() {
-      this.el.addEventListener('mousemove', this.onMousemove);
-      this.el.addEventListener('mouseleave', this.onMouseleave);
+      this.$el.addEventListener('mousemove', this.onMousemove);
+      this.$el.addEventListener('mouseleave', this.onMouseleave);
     },
 
+    /**
+     * remove the mousemove and mouseleave added for
+     * avoiding memory leaks, if @mousemove and
+     * @mouseleave were in the element, this
+     * wound't be needed
+     */
     removeMouseEventListeners() {
-      this.el.removeEventListener('mousemove', this.onMousemove);
-      this.el.removeEventListener('mouseleave', this.onMouseleave);
+      this.$el.removeEventListener('mousemove', this.onMousemove);
+      this.$el.removeEventListener('mouseleave', this.onMouseleave);
     },
 
-    select() {
+    select(eventType) {
+      this.eventType = eventType;
       this.selected = true;
     },
 
@@ -122,59 +137,82 @@ export const floatingUiItemMixin = {
       this.selected = false;
     },
 
+    isSelected() {
+      return this.selected;
+    },
+
     focus() {
-      if (!this.el) return;
+      if (!this.$el) return;
 
       this.tabIndex = -1;
       this.selected = true;
-      this.el.focus();
+      this.$el.focus();
     },
 
     focusFirstItem() {
-      this.setFocusToItem(0);
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = 0;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     focusLastItem() {
-      this.setFocusToItem(this.items.length - 1);
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = this.items.length - 1;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     /**
-     * Focus the previous item in the menu.
-     * If is the first item, jump to the last item.
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
      */
-    focusPreviousItem() {
-      const isLast = this.index === this.items.length - 1;
-      const goToIndex = isLast ? 0 : this.index + 1;
+    focusNextItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const isLast = selectedIndex === this.items.length - 1;
+      const firstItemIndex = 0;
+      const nextItemIndex = selectedIndex + 1;
+      const newSelectedIndex = isLast ? firstItemIndex : nextItemIndex;
 
-      this.setFocusToItem(goToIndex);
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     /**
-     * Focus the next item in the menu.
-     * If is the last item, jump to the first item.
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
      */
-    focusNextItem() {
-      const isFirst = this.index === 0;
-      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
+    focusPreviousItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const isFirst = selectedIndex === 0;
+      const lastItemIndex = this.items.length - 1;
+      const previousItemIndex = selectedIndex - 1;
+      const newSelectedIndex = isFirst ? lastItemIndex : previousItemIndex;
 
-      this.setFocusToItem(goToIndex);
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     /**
-     * Focus item by remove its tabindex and calling
+     * Focus/select item by removing its tabindex and calling
      * focus to the element.
      *
-     * @param {Number, String} goToIndex
+     * @param {Number, String} selectedIndex
+     * @param {Number, String} newSelectedIndex
      */
-    setFocusToItem(goToIndex) {
+    setFocusToItem(selectedIndex, newSelectedIndex) {
       this.tabIndex = 0;
-      this.selected = false;
 
-      // set all selected to false
-      this.items.forEach((item) => item.unselect());
+      // before focusing, let's unselect selected
+      // item that were previously focused
+      if (selectedIndex >= 0) {
+        this.items[selectedIndex].unselect();
+      }
+
+      // focus new item
+      this.items[newSelectedIndex].focus();
+    },
 
-      // focus item
-      this.items[goToIndex].focus();
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
     },
 
     leaveMenu() {
@@ -189,7 +227,10 @@ export const floatingUiItemMixin = {
         return;
       }
 
-      this.value ? this.apiInjected().emit(this.value) : this.$emit('click');
+      this.value !== undefined
+        ? this.apiInjected().emit(this.value)
+        : this.$emit('click');
+
       this.$nextTick(() => this.leaveMenu());
     },
 
@@ -197,20 +238,25 @@ export const floatingUiItemMixin = {
       this.leaveMenu();
     },
 
-    onMousemove() {
+    onMousemove(event) {
       if (this.selected) {
         return;
       }
 
+      // unselect all items before selecting new item
       this.items.forEach((item) => item.unselect());
 
-      this.select();
-      this.componentContent.setMousemove();
+      /**
+       * Select item passing the event type to decide if
+       * scrolling will be disabled or not. It is
+       * expected that on mouse move event, the scroll
+       * doesn't happen automatically.
+       */
+      this.select(event.type);
     },
 
     onMouseleave() {
       this.unselect();
-      this.componentContent.unsetMousemove();
     },
   },
 };

package/mixins/floating-ui.js

@@ -1,13 +1,6 @@
 import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 
 export const floatingUiMixin = {
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom-start',
-    },
-  },
-
   data() {
     return {
       component: null,
@@ -40,22 +33,20 @@ export const floatingUiMixin = {
     },
 
     positionContentToTrigger() {
-      // console.log(window.innerWidth)
-
       const trigger = document.getElementById(this.componentTrigger.id);
       const content = document.getElementById(this.componentContent.id);
+      const minWidthLimit = Number(this.floatingUiMinWidth);
 
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
-          offset(6),
+          offset(5),
           flip(),
           shift({ padding: 5 }),
           size({
             apply({ rects }) {
-              // the min width to floating uis should be 200
-              // since less than that can look not as nice
-              const minWidthLimit = 200;
+              if (!minWidthLimit) return;
+
               const width = rects.reference.width;
               const minWidth = width < minWidthLimit ? minWidthLimit : width;
 

package/mixins/form-control-icon.js

@@ -1,9 +1,9 @@
-import { formControlMixin } from '../mixins/form-control';
+import { formControlMixin, formControlStyleMixin } from '../mixins/form-control';
 
 export const formControlIconMixin = {
   inheritAttrs: false,
 
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   data() {
     return {

package/mixins/form-control.js

@@ -45,11 +45,19 @@ export const formControlMixin = {
       );
     },
 
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};
+
+export const formControlStyleMixin = {
+  computed: {
     classComputed() {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 flex w-full max-w-full appearance-none items-center justify-between gap-3 rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200',
+          : 'leading-0 flex w-full max-w-full appearance-none items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200',
         // variant styles
         this.headless
           ? `${this.name}--${this.variant}`
@@ -64,9 +72,5 @@ export const formControlMixin = {
           : 'h-10',
       ];
     },
-
-    isError() {
-      return this.variant === 'error';
-    },
   },
 };

package/nuxt.js

@@ -14,6 +14,7 @@ const components = [
   'src/components/Popover',
   'src/components/ProgressBar',
   'src/components/Tabs',
+  'src/components/Tooltip',
 ]
 
 export default function () {

package/package.json

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

package/src/components/Button/VTButton.vue

@@ -3,7 +3,7 @@
   <component
     :is="tag"
     :to="to"
-    :href="href"
+    :href="href || to"
     :type="type"
     :disabled="isDisabled"
     :class="[
@@ -17,11 +17,11 @@
       headless
         ? `button--${variant}`
         : isPrimary
-        ? 'border-transparent bg-secondary-400 text-white hover:bg-secondary-500 active:bg-secondary-600 disabled:bg-gray-200 disabled:text-gray-400'
+        ? 'bg-secondary-400 hover:bg-secondary-500 focus:bg-secondary-600 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
         : isSecondary
-        ? 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
+        ? 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 hover:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
         : isTertiary
-        ? 'border-transparent text-secondary-400 hover:text-secondary-500 active:text-secondary-500 disabled:text-gray-400'
+        ? 'text-secondary-400 hover:text-secondary-500 focus:text-secondary-600 active:text-secondary-600 border-transparent disabled:text-gray-400'
         : isIcon
         ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
         : null,
@@ -43,7 +43,7 @@
     <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
     <span
       :class="[
-        headless ? null : 'inline-flex items-center gap-2 self-center mx-auto',
+        headless ? null : 'mx-auto inline-flex items-center gap-2 self-center',
         headless && busy ? 'button--busy' : busy ? 'invisible' : null,
       ]"
     >

package/src/components/Dialog/VTDialog.vue

@@ -3,10 +3,11 @@
     <div
       v-if="visible"
       :id="id"
-      :class="{
-        Dialog: headless,
-        'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
-      }"
+      :class="[
+        headless
+          ? 'dialog'
+          : 'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8',
+      ]"
       aria-modal="true"
       @click="onClick"
     >
@@ -28,11 +29,8 @@ export default {
 
   provide() {
     return {
-      api: () => {
-        const id = this.id;
+      apiDialog: () => {
         const componentId = this.componentId;
-        const isDark = this.dark;
-        const isHeadless = this.headless;
 
         const registerContent = (content) => {
           if (!content) return;
@@ -49,10 +47,7 @@ export default {
         const emit = () => this.emit();
 
         return {
-          id,
           componentId,
-          isDark,
-          isHeadless,
           hide,
           emit,
           registerContent,
@@ -75,10 +70,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {

package/src/components/Dialog/VTDialogClose.vue

@@ -2,48 +2,42 @@
   <VTButton
     variant="icon"
     :id="id"
-    :class="{
-      'Dialog-close': headless,
-    }"
-    :theme="theme"
+    :class="[headless ? 'dialog-close' : null]"
     @click.prevent="hide"
-    ><slot><IconClose class="h-5 w-5" /></slot
-  ></VTButton>
+  >
+    <slot>
+      <IconClose class="h-5 w-5" />
+    </slot>
+  </VTButton>
 </template>
 
 <script>
-import { IconClose } from "@veritree/icons";
-import VTButton from "../Button/VTButton.vue";
+import { IconClose } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
 
 export default {
-  name: "VTDialogClose",
+  name: 'VTDialogClose',
 
   components: { IconClose, VTButton },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
-  computed: {
-    id() {
-      return `dialog-close-${this.api().componentId}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    // temporary till button theme is implemented
-    theme() {
-      return this.dark ? "dark" : null;
+  computed: {
+    id() {
+      return `dialog-close-${this.apiDialog().componentId}`;
     },
   },
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDialog().hide();
     },
   },
 };

package/src/components/Dialog/VTDialogContent.vue

@@ -11,15 +11,13 @@
     <div
       v-show="visible"
       :id="id"
-      :class="{
-        'Dialog-content': headless,
-        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10 flex flex-col':
-          !headless,
-        'bg-white': !dark,
-        'bg-fd-600': dark,
-      }"
+      :class="[
+        headless
+          ? 'dialog-content'
+          : 'relative m-auto flex max-h-full max-w-full flex-col overflow-auto rounded bg-white p-6 focus:outline-none sm:p-10',
+      ]"
       tabindex="-1"
-      @keyup.esc="hide"
+      @keydown.esc.stop="hide"
     >
       <slot></slot>
     </div>
@@ -28,9 +26,16 @@
 
 <script>
 export default {
-  name: "VTDialogContent",
+  name: 'VTDialogContent',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -40,20 +45,12 @@ export default {
 
   computed: {
     id() {
-      return `dialog-content-${this.api().componentId}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return `dialog-content-${this.apiDialog().componentId}`;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDialog().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -69,7 +66,7 @@ export default {
     },
 
     hideDialog() {
-      this.api().emit();
+      this.apiDialog().emit();
     },
   },
 };

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,32 +1,21 @@
 <template>
-  <component
-    :is="as"
-    :class="{ 'Dialog-footer': headless, 'w-full': !headless }"
-  >
+  <component :is="as" :class="[headless ? 'dialog-footer' : 'w-full']">
     <slot></slot>
   </component>
 </template>
 
 <script>
 export default {
-  name: "VTDialogFooter",
-
-  inject: ["api"],
+  name: 'VTDialogFooter',
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "footer",
-    },
-  },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      default: 'footer',
     },
   },
 };