@veritree/ui 0.21.1-7 → 0.21.1-9

package/mixins/floating-ui-content.js

@@ -18,8 +18,9 @@ export const floatingUiContentMixin = {
 
   data() {
     return {
-      visible: false,
       el: null,
+      isMousemove: false,
+      visible: false,
     };
   },
 
@@ -77,5 +78,25 @@ export const floatingUiContentMixin = {
         this.componentTrigger.cancel();
       }
     },
+
+    // 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

@@ -0,0 +1,222 @@
+import FloatingUiItem from '../src/components/Utils/FloatingUiItem.vue';
+
+export const floatingUiItemMixin = {
+  components: {
+    FloatingUiItem,
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `${this.componentName}-${this.apiInjected().id}-${this.index}`;
+    },
+
+    items() {
+      return this.apiInjected().items;
+    },
+
+    el() {
+      return this.$el;
+    },
+
+    componentContent() {
+      return this.apiInjected().componentContent;
+    },
+
+    componentTrigger() {
+      return this.apiInjected().componentTrigger;
+    },
+
+    classComputed() {
+      return [
+        // default styles
+        this.headless
+          ? `${this.componentName}`
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+        // disabled state styles
+        this.headless
+          ? this.disabled
+            ? `${this.componentName}--disabled`
+            : null
+          : this.disabled
+          ? 'pointer-events-none opacity-75'
+          : null,
+        // selected state styles
+        this.headless
+          ? this.selected
+            ? `${this.componentName}--selected`
+            : null
+          : this.selected
+          ? 'bg-secondary-200/10'
+          : null,
+      ];
+    },
+  },
+
+  data() {
+    return {
+      index: null,
+      selected: false,
+      tabIndex: 0,
+    };
+  },
+
+  watch: {
+    selected(newValue) {
+      if (!newValue || !this.componentContent) return;
+
+      this.componentContent.setActiveDescedant(this.id);
+
+      const isMousemove = this.componentContent.getMousemove();
+
+      if (!isMousemove) {
+        this.el.scrollIntoView({ block: 'nearest' });
+      }
+    },
+  },
+
+  mounted() {
+    this.init();
+    this.addMouseEventListeners();
+  },
+
+  beforeDestroy() {
+    this.apiInjected().unregisterItem(this.id);
+    this.removeMouseEventListeners();
+  },
+
+  methods: {
+    init() {
+      const item = {
+        id: this.id,
+        select: this.select,
+        unselect: this.unselect,
+        focus: this.focus,
+        onClick: this.onClick,
+      };
+  
+      this.apiInjected().registerItem(item);
+  
+      this.index = this.items.length - 1;
+    },
+
+    addMouseEventListeners() {
+      this.el.addEventListener('mousemove', this.onMousemove);
+      this.el.addEventListener('mouseleave', this.onMouseleave);
+    },
+
+    removeMouseEventListeners() {
+      this.el.removeEventListener('mousemove', this.onMousemove);
+      this.el.removeEventListener('mouseleave', this.onMouseleave);
+    },
+
+    select() {
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
+    focus() {
+      if (!this.el) return;
+
+      this.tabIndex = -1;
+      this.selected = true;
+      this.el.focus();
+    },
+
+    focusFirstItem() {
+      this.setFocusToItem(0);
+    },
+
+    focusLastItem() {
+      this.setFocusToItem(this.items.length - 1);
+    },
+
+    /**
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
+     */
+    focusPreviousItem() {
+      const isLast = this.index === this.items.length - 1;
+      const goToIndex = isLast ? 0 : this.index + 1;
+
+      this.setFocusToItem(goToIndex);
+    },
+
+    /**
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
+     */
+    focusNextItem() {
+      const isFirst = this.index === 0;
+      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
+
+      this.setFocusToItem(goToIndex);
+    },
+
+    /**
+     * Focus item by remove its tabindex and calling
+     * focus to the element.
+     *
+     * @param {Number, String} goToIndex
+     */
+    setFocusToItem(goToIndex) {
+      this.tabIndex = 0;
+      this.selected = false;
+
+      // set all selected to false
+      this.items.forEach((item) => item.unselect());
+
+      // focus item
+      this.items[goToIndex].focus();
+    },
+
+    leaveMenu() {
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
+    },
+
+    onClick() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.value ? this.apiInjected().emit(this.value) : this.$emit('click');
+      this.$nextTick(() => this.leaveMenu());
+    },
+
+    onKeyEsc() {
+      this.leaveMenu();
+    },
+
+    onMousemove() {
+      if (this.selected) {
+        return;
+      }
+
+      this.items.forEach((item) => item.unselect());
+
+      this.select();
+      this.componentContent.setMousemove();
+    },
+
+    onMouseleave() {
+      this.unselect();
+      this.componentContent.unsetMousemove();
+    },
+  },
+};

package/mixins/floating-ui.js

@@ -4,8 +4,8 @@ export const floatingUiMixin = {
   props: {
     placement: {
       type: String,
-      default: 'bottom-start'
-    }
+      default: 'bottom-start',
+    },
   },
 
   data() {
@@ -14,7 +14,7 @@ export const floatingUiMixin = {
       componentTrigger: null,
       componentContent: null,
       active: false,
-    }
+    };
   },
 
   watch: {
@@ -40,11 +40,11 @@ export const floatingUiMixin = {
     },
 
     positionContentToTrigger() {
+      // console.log(window.innerWidth)
+
       const trigger = document.getElementById(this.componentTrigger.id);
       const content = document.getElementById(this.componentContent.id);
 
-      // console.log(this.placement);
-
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
@@ -53,8 +53,14 @@ export const floatingUiMixin = {
           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;
+              const width = rects.reference.width;
+              const minWidth = width < minWidthLimit ? minWidthLimit : width;
+
               Object.assign(content.style, {
-                minWidth: `${rects.reference.width}px`,
+                minWidth: `${minWidth}px`,
               });
             },
           }),
@@ -66,5 +72,5 @@ export const floatingUiMixin = {
         });
       });
     },
-  }
-}
+  },
+};

package/mixins/form-control.js

@@ -0,0 +1,72 @@
+export const formControlMixin = {
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number, Object, Array],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+  },
+
+  computed: {
+    listeners() {
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: (event) => {
+            // if (this.lazy) return;
+            this.$emit('input', event.target.value);
+          },
+          blur: (event) => {
+            this.$emit('blur', event);
+          },
+        }
+      );
+    },
+
+    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',
+        // variant styles
+        this.headless
+          ? `${this.name}--${this.variant}`
+          : this.isError
+          ? 'border-error-300'
+          : 'border-gray-300',
+        // height styles
+        this.headless
+          ? null
+          : this.name === 'textarea'
+          ? 'min-h-10' // limit it because input type number height can be different from other input types
+          : 'h-10',
+      ];
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};

package/package.json

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

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -16,8 +16,6 @@ export default {
   provide() {
     return {
       apiDropdownMenu: () => {
-        const { dark: isDark, headless: isHeadless } = this;
-
         const registerTrigger = (trigger) => {
           if (!trigger) return;
           this.componentTrigger = trigger;
@@ -33,8 +31,9 @@ export default {
           this.items.push(item);
         };
 
-        const unregisterItems = () => {
-          this.items = [];
+        const unregisterItem = (id) => {
+          const index = this.items.findIndex((item) => item.id === id);
+          this.items.splice(index, 1);
         };
 
         return {
@@ -46,7 +45,7 @@ export default {
           registerTrigger,
           registerContent,
           registerItem,
-          unregisterItems,
+          unregisterItem,
         };
       },
     };

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -39,6 +39,10 @@ export default {
       id: this.id,
       hide: this.hide,
       show: this.show,
+      getMousemove: this.getMousemove,
+      setMousemove: this.setMousemove,
+      unsetMousemove: this.unsetMousemove,
+      setActiveDescedant: this.setActiveDescedant,
     };
 
     this.apiDropdownMenu().registerContent(content);

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,30 +3,10 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="[
-      // default styles
-      headless
-        ? 'dropdown-menu-item'
-        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
-      // disabled state styles
-      headless
-        ? disabled
-          ? 'listbox-item--disabled'
-          : null
-        : disabled
-        ? 'pointer-events-none opacity-75'
-        : null,
-      // selected state styles
-      headless
-        ? selected
-          ? 'lisbox-item--selected'
-          : null
-        : selected
-        ? 'bg-secondary-200/10'
-        : null,
-    ]"
-    :tabindex="tabIndex"
+    :class="classComputed"
     :aria-disabled="disabled"
+    :tabindex="tabIndex"
+    class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
     @keydown.down.prevent="focusPreviousItem"
@@ -42,11 +22,13 @@
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTDropdownMenuItem',
 
+  mixins: [floatingUiItemMixin],
+
   inject: ['apiDropdownMenu'],
 
   props: {
@@ -58,139 +40,19 @@ export default {
       type: String,
       default: null,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      index: null,
-      selected: false,
-      tabIndex: 0,
+      apiInjected: this.apiDropdownMenu,
+      componentName: 'dropdown-menu-item',
     };
   },
 
   computed: {
-    id() {
-      return `dropdown-menu-item-${this.apiDropdownMenu().id}-${genId()}`;
-    },
-
     as() {
       return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
-
-    items() {
-      return this.apiDropdownMenu().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    componentTrigger() {
-      return this.apiDropdownMenu().componentTrigger;
-    },
-  },
-
-  mounted() {
-    const item = {
-      select: this.select,
-      unselect: this.unselect,
-      focus: this.focus,
-    };
-
-    this.apiDropdownMenu().registerItem(item);
-
-    this.index = this.items.length - 1;
-  },
-
-  methods: {
-    select() {
-      this.selected = true;
-    },
-
-    unselect() {
-      this.selected = false;
-    },
-
-    focus() {
-      if (!this.el) return;
-
-      this.tabIndex = -1;
-      this.selected = true;
-      this.el.focus();
-    },
-
-    focusFirstItem() {
-      this.setFocusToItem(0);
-    },
-
-    focusLastItem() {
-      this.setFocusToItem(this.items.length - 1);
-    },
-
-    /**
-     * Focus the previous item in the menu.
-     * If is the first item, jump to the last item.
-     */
-    focusPreviousItem() {
-      const isLast = this.index === this.items.length - 1;
-      const goToIndex = isLast ? 0 : this.index + 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus the next item in the menu.
-     * If is the last item, jump to the first item.
-     */
-    focusNextItem() {
-      const isFirst = this.index === 0;
-      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus item by remove its tabindex and calling
-     * focus to the element.
-     *
-     * @param {Number, String} goToIndex
-     */
-    setFocusToItem(goToIndex) {
-      this.tabIndex = 0;
-      this.selected = false;
-
-      // set all selected to false
-      this.items.forEach((item) => item.unselect());
-
-      // focus item
-      this.items[goToIndex].focus();
-    },
-
-    leaveMenu() {
-      if (this.componentTrigger) {
-        this.componentTrigger.cancel();
-        this.componentTrigger.focus();
-      }
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    onClick() {
-      if (this.disabled) return;
-
-      this.$emit('click');
-      this.$nextTick(() => this.leaveMenu());
-    },
   },
 };
 </script>

package/src/components/Form/VTInput.vue

@@ -1,52 +1,40 @@
 <template>
   <input
-    v-bind="$attrs"
-    :class="[
-      headless
-        ? 'form-control'
-        : 'border border-solid py-2 px-3 rounded text-inherit max-w-full',
-      headless
-        ? `form-control--${variant}`
-        : isError
-        ? 'border-error-300'
-        : 'border-gray-300',
-    ]"
+    :class="classComputed"
     :value="value"
-    @input="$emit('input', $event.target.value)"
-    @blur="$emit('blur')"
+    :disabled="disabled"
+    v-on="listeners"
   />
 </template>
 
 <script>
-export default {
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
+import { formControlMixin } from '../../../mixins/form-control';
 
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
-  },
+export default {
+  mixins: [formControlMixin],
 
-  computed: {
-    isError() {
-      return this.variant === 'error';
-    },
+  data() {
+    return {
+      name: 'input',
+    };
   },
 };
 </script>
+
+<style scoped>
+input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  opacity: 0;
+}
+
+input[type='number'] {
+  appearance: textfield;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+}
+</style>