@veritree/ui 0.19.2-20 → 0.19.2-22

package/mixins/floating-ui-content.js

@@ -10,22 +10,17 @@ export const floatingUiContentMixin = {
       type: Boolean,
       default: false,
     },
-    floatingUiClass: {
-      type: [String, Function],
-      default: null,
-    },
   },
 
   data() {
     return {
       el: null,
-      isMousemove: false,
       visible: false,
     };
   },
 
   mounted() {
-    document.addEventListener('click', (e) => this.onDocumentClick(e));
+    document.addEventListener('click', this.onDocumentClick);
   },
 
   destroyed() {
@@ -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;
     },
@@ -36,7 +32,7 @@ export const floatingUiItemMixin = {
         // default styles
         this.headless
           ? `${this.componentName}`
-          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
         // disabled state styles
         this.headless
           ? this.disabled
@@ -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' });
     },
   },
 
@@ -95,8 +95,10 @@ export const floatingUiItemMixin = {
 
       const item = {
         id: this.id,
+        text: '',
         select: this.select,
         unselect: this.unselect,
+        isSelected: this.isSelected,
         focus: this.focus,
         onClick: this.onClick,
       };
@@ -104,17 +106,30 @@ export const floatingUiItemMixin = {
       this.apiInjected().registerItem(item);
     },
 
+    /**
+     * 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,84 @@ 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
+      if (this.items[newSelectedIndex]) {
+        this.items[newSelectedIndex].focus();
+      }
+    },
 
-      // focus item
-      this.items[goToIndex].focus();
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
     },
 
     leaveMenu() {
@@ -200,20 +240,27 @@ export const floatingUiItemMixin = {
       this.leaveMenu();
     },
 
-    onMousemove() {
+    onMousemove(event) {
       if (this.selected) {
         return;
       }
 
-      this.items.forEach((item) => item.unselect());
+      // unselect all items before selecting new one
+      for (const item of this.items) {
+        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,
@@ -42,18 +35,18 @@ export const floatingUiMixin = {
     positionContentToTrigger() {
       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;
 
@@ -71,4 +64,4 @@ export const floatingUiMixin = {
       });
     },
   },
-};
+};

package/package.json

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

package/src/components/Alert/VTAlert.vue

@@ -1,11 +1,9 @@
 <template>
   <div
-    v-if="show"
+    v-if="modelValue"
     :class="[
       // default styles
-      headless
-        ? 'alert'
-        : 'flex items-start gap-3 rounded border border-solid p-3',
+      headless ? 'alert' : 'flex items-start gap-3 rounded border border-solid',
       // variant styles
       headless
         ? `alert--${variant}`
@@ -16,6 +14,14 @@
         : isWarning
         ? 'border-warning-300 bg-warning-200 text-warning-700'
         : null,
+      // sizes styles
+      headless
+        ? `alert--${size}`
+        : isLarge
+        ? 'p-3'
+        : isSmall
+        ? 'py-1 px-2 text-sm'
+        : null,
     ]"
     role="alert"
   >
@@ -23,9 +29,15 @@
     <button
       v-if="dismissable"
       :class="[
-        !headless
-          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
-          : 'alert-close',
+        // default styles
+        headless ? 'alert-close' : 'ml-auto  h-4 w-4 shrink-0 text-current',
+        headless
+          ? `alert-close--${variant}`
+          : isLarge
+          ? 'mt-1'
+          : isSmall
+          ? 'mt-0.5'
+          : null,
       ]"
       @click="hide"
     >
@@ -35,14 +47,30 @@
 </template>
 
 <script>
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+
 export default {
   name: 'VTAlert',
 
+  components: {
+    IconClose,
+  },
+
+  data() {
+    return {
+      modelValueLocal: true,
+    };
+  },
+
   props: {
     variant: {
       type: String,
       default: 'success',
     },
+    size: {
+      type: String,
+      default: 'large',
+    },
     headless: {
       type: Boolean,
       default: false,
@@ -51,12 +79,10 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-
-  data() {
-    return {
-      show: true,
-    };
+    modelValue: {
+      type: Boolean,
+      default: null,
+    },
   },
 
   computed: {
@@ -71,12 +97,27 @@ export default {
     isWarning() {
       return this.variant === 'warning';
     },
+
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
+    },
+
+    isVisible() {
+      return this.modelValue !== null ? this.modelValue : this.modelValueLocal;
+    },
   },
 
   methods: {
     hide() {
+      this.modelValue !== null
+        ? this.$emit('update:modelValue', false)
+        : (this.modelValueLocal = false);
+
       this.$emit('dismiss');
-      this.show = false;
     },
   },
 };

package/src/components/Dialog/VTDialog.vue

@@ -3,10 +3,11 @@
     <div
       v-if="modelValue"
       :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 ${classes}`
+      "
       aria-modal="true"
       v-bind="$attrs"
       @click="onClick"
@@ -27,10 +28,7 @@ export default {
   provide() {
     return {
       apiDialog: () => {
-        const id = this.id;
         const componentId = this.componentId;
-        const isDark = this.dark;
-        const isHeadless = this.headless;
 
         const registerContent = (content) => {
           if (!content) return;
@@ -46,15 +44,15 @@ export default {
 
         const emit = () => this.emit();
 
+        const full = this.full;
+
         return {
-          id,
           componentId,
-          isDark,
-          isHeadless,
           hide,
           emit,
           registerContent,
           registerOverlay,
+          full,
         };
       },
     };
@@ -69,7 +67,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
+    full: {
       type: Boolean,
       default: false,
     },
@@ -88,6 +86,10 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },

package/src/components/Dialog/VTDialogClose.vue

@@ -2,13 +2,13 @@
   <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-4 w-4" />
+    </slot>
+  </VTButton>
 </template>
 
 <script>
@@ -22,23 +22,17 @@ export default {
 
   inject: ['apiDialog'],
 
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   computed: {
     id() {
       return `dialog-close-${this.apiDialog().componentId}`;
     },
-
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-
-    // temporary till button theme is implemented
-    theme() {
-      return this.dark ? 'dark' : null;
-    },
   },
 
   methods: {

package/src/components/Dialog/VTDialogContent.vue

@@ -1,25 +1,23 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-from-class="translate-y-[50px] opacity-0"
+    enter-class="translate-y-[50px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-300 ease-out"
-    leave-from-class="translate-y-0 opacity-100"
+    leave-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[50px] opacity-0"
     @after-leave="hideDialog"
   >
     <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 flex-col overflow-auto rounded bg-white p-4 focus:outline-none lg:p-6 ${classes}`
+      "
       tabindex="-1"
-      @keyup.esc="hide"
+      @keydown.esc.stop="hide"
     >
       <slot></slot>
     </div>
@@ -32,6 +30,13 @@ export default {
 
   inject: ['apiDialog'],
 
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       visible: false,
@@ -43,12 +48,12 @@ export default {
       return `dialog-content-${this.apiDialog().componentId}`;
     },
 
-    dark() {
-      return this.apiDialog().isDark;
+    classes() {
+      return this.full ? 'h-screen w-screen' : 'max-h-full max-w-full';
     },
 
-    headless() {
-      return this.apiDialog().isHeadless;
+    full() {
+      return this.apiDialog().full;
     },
   },
 

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,7 +1,11 @@
 <template>
   <component
     :is="as"
-    :class="{ 'Dialog-footer': headless, 'w-full': !headless }"
+    :class="[
+      headless
+        ? 'dialog-footer'
+        : '-mx-4 -mb-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mb-6 md:p-6',
+    ]"
   >
     <slot></slot>
   </component>
@@ -10,24 +14,15 @@
 <script>
 export default {
   name: 'VTDialogFooter',
-
-  inject: ['apiDialog'],
-
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
       default: 'footer',
     },
   },
-
-  computed: {
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-  },
 };
 </script>