@veritree/ui 0.21.1-8 → 0.22.0

package/.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "quoteProps": "preserve"
 }

package/index.js

@@ -21,6 +21,9 @@ import VTPopoverItem from "./src/components/Popover/VTPopoverItem.vue";
 import VTPopoverTrigger from "./src/components/Popover/VTPopoverTrigger.vue";
 import VTFormFeedback from "./src/components/Form/VTFormFeedback.vue";
 import VTFormGroup from "./src/components/Form/VTFormGroup.vue";
+import VTInput from "./src/components/Form/VTInput.vue";
+import VTInputIcon from "./src/components/Form/VTInputIcon.vue";
+import VTInputPassword from "./src/components/Form/VTInputPassword.vue";
 import VTListbox from "./src/components/Listbox/VTListbox.vue";
 import VTListboxContent from "./src/components/Listbox/VTListboxContent.vue";
 import VTListboxItem from "./src/components/Listbox/VTListboxItem.vue";
@@ -29,7 +32,6 @@ import VTListboxList from "./src/components/Listbox/VTListboxList.vue";
 import VTListboxSearch from "./src/components/Listbox/VTListboxSearch.vue";
 import VTListboxTrigger from "./src/components/Listbox/VTListboxTrigger.vue";
 import VTSpinner from "./src/components/Spinner/VTSpinner.vue";
-import VTInput from "./src/components/Input/VTInput.vue";
 import VTInputDate from "./src/components/Input/VTInputDate.vue";
 import VTInputFile from "./src/components/Input/VTInputFile.vue";
 import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
@@ -96,6 +98,8 @@ export {
   VTListboxTrigger,
   VTButton,
   VTInput,
+  VTInputIcon,
+  VTInputPassword,
   VTInputDate,
   VTInputFile,
   VTInputUpload,

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,216 @@
+export const floatingUiItemMixin = {
+  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-icon.js

@@ -0,0 +1,53 @@
+import { formControlMixin } from '../mixins/form-control';
+
+export const formControlIconMixin = {
+  inheritAttrs: false,
+
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'input',
+    };
+  },
+
+  computed: {
+    isLeft() {
+      return this.iconPlacement === 'left';
+    },
+
+    isRight() {
+      return this.iconPlacement === 'right';
+    },
+
+    classComputedWrapper() {
+      return [
+        this.headless ? 'form-control-wrapper' : 'relative',
+        // placement styles
+        this.headless
+          ? `form-control-icon--${this.placement}`
+          : this.isLeft
+          ? '[&_input]:pl-9'
+          : this.isRight
+          ? '[&_input]:pr-9'
+          : null,
+      ];
+    },
+
+    classComputedWrapperIcon() {
+      return [
+        this.headless
+          ? 'form-control-wrapper__icon'
+          : `absolute top-0 bottom-0 flex w-9 justify-center items-center text-gray-400`,
+        // placement styles
+        this.headless
+          ? null
+          : this.isLeft
+          ? 'left-0'
+          : this.isRight
+          ? 'right-0'
+          : null,
+      ];
+    },
+  },
+};

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-8",
+  "version": "0.22.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -15,5 +15,9 @@
     "@linusborg/vue-simple-portal": "^0.1.5",
     "@veritree/icons": "^0.39.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwindcss": "^3.2.4"
+  }
 }

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);