@veritree/ui 0.19.2-2 → 0.19.2-21

package/mixins/floating-ui-content.js

@@ -0,0 +1,81 @@
+import FloatingUi from '../src/components/Utils/FloatingUi.vue';
+
+export const floatingUiContentMixin = {
+  components: {
+    FloatingUi,
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      el: null,
+      visible: false,
+    };
+  },
+
+  mounted() {
+    document.addEventListener('click', this.onDocumentClick);
+  },
+
+  destroyed() {
+    document.removeEventListener('click', this.onDocumentClick);
+  },
+
+  methods: {
+    show() {
+      if (this.visible) {
+        return;
+      }
+
+      this.visible = true;
+
+      this.$nextTick(() => {
+        this.component.setActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('shown');
+        }, 100);
+      });
+    },
+
+    hide() {
+      if (!this.visible) {
+        return;
+      }
+
+      this.visible = false;
+
+      this.$nextTick(() => {
+        this.component.clearActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('hidden');
+        }, 100);
+      });
+    },
+
+    onDocumentClick(e) {
+      if (!e) {
+        return;
+      }
+
+      e.stopPropagation();
+
+      if (this.visible && !this.el.contains(e.target)) {
+        this.componentTrigger.cancel();
+      }
+    },
+
+    setActiveDescedant(id) {
+      this.activeDescedant = id;
+    },
+  },
+}

package/mixins/floating-ui-item.js

@@ -0,0 +1,266 @@
+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;
+    },
+
+    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 cursor-pointer',
+        // 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-gray-200'
+          : null,
+      ];
+    },
+  },
+
+  data() {
+    return {
+      index: null,
+      selected: false,
+      tabIndex: 0,
+      eventType: null,
+    };
+  },
+
+  watch: {
+    selected(newValue) {
+      if (!newValue || !this.componentContent) {
+        return;
+      }
+
+      this.componentContent.setActiveDescedant(this.id);
+
+      // do not scroll into view if it's a mouse event
+      if (this.eventType && this.eventType.includes('mouse')) {
+        return;
+      }
+
+      this.$el.scrollIntoView({ block: 'nearest' });
+    },
+  },
+
+  mounted() {
+    this.init();
+    this.addMouseEventListeners();
+  },
+
+  beforeUnmount() {
+    this.apiInjected().unregisterItem(this.id);
+    this.removeMouseEventListeners();
+  },
+
+  methods: {
+    init() {
+      this.index = this.items.length;
+
+      const item = {
+        id: this.id,
+        text: '',
+        select: this.select,
+        unselect: this.unselect,
+        isSelected: this.isSelected,
+        focus: this.focus,
+        onClick: this.onClick,
+      };
+
+      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);
+    },
+
+    /**
+     * 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);
+    },
+
+    select(eventType) {
+      this.eventType = eventType;
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
+    isSelected() {
+      return this.selected;
+    },
+
+    focus() {
+      if (!this.$el) return;
+
+      this.tabIndex = -1;
+      this.selected = true;
+      this.$el.focus();
+    },
+
+    focusFirstItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = 0;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
+    },
+
+    focusLastItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = this.items.length - 1;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
+    },
+
+    /**
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
+     */
+    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(selectedIndex, newSelectedIndex);
+    },
+
+    /**
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
+     */
+    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(selectedIndex, newSelectedIndex);
+    },
+
+    /**
+     * Focus/select item by removing its tabindex and calling
+     * focus to the element.
+     *
+     * @param {Number, String} selectedIndex
+     * @param {Number, String} newSelectedIndex
+     */
+    setFocusToItem(selectedIndex, newSelectedIndex) {
+      this.tabIndex = 0;
+
+      // 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();
+      }
+    },
+
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
+    },
+
+    leaveMenu() {
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
+    },
+
+    onClick() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.value !== undefined
+        ? this.apiInjected().emit(this.value)
+        : this.$emit('click');
+
+      this.$nextTick(() => this.leaveMenu());
+    },
+
+    onKeyEsc() {
+      this.leaveMenu();
+    },
+
+    onMousemove(event) {
+      if (this.selected) {
+        return;
+      }
+
+      // unselect all items before selecting new one
+      for (const item of this.items) {
+        item.unselect();
+      }
+
+      /**
+       * 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();
+    },
+  },
+};

package/mixins/floating-ui.js

@@ -0,0 +1,67 @@
+import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
+
+export const floatingUiMixin = {
+  data() {
+    return {
+      component: null,
+      componentTrigger: null,
+      componentContent: null,
+      active: false,
+    };
+  },
+
+  watch: {
+    active(newVal) {
+      if (newVal) this.$nextTick(() => this.positionContentToTrigger());
+    },
+  },
+
+  mounted() {
+    this.component = {
+      setActive: this.setActive,
+      clearActive: this.clearActive,
+    };
+  },
+
+  methods: {
+    setActive() {
+      this.active = true;
+    },
+
+    clearActive() {
+      this.active = null;
+    },
+
+    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(5),
+          flip(),
+          shift({ padding: 5 }),
+          size({
+            apply({ rects }) {
+              if (!minWidthLimit) return;
+
+              const width = rects.reference.width;
+              const minWidth = width < minWidthLimit ? minWidthLimit : width;
+
+              Object.assign(content.style, {
+                minWidth: `${minWidth}px`,
+              });
+            },
+          }),
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(content.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    },
+  },
+};

package/mixins/form-control-icon.js

@@ -0,0 +1,53 @@
+import { formControlMixin, formControlStyleMixin } from '../mixins/form-control';
+
+export const formControlIconMixin = {
+  inheritAttrs: false,
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  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,73 @@
+export const formControlMixin = {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+  },
+
+  computed: {
+    attrsComputed() {
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        this.$attrs,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          onInput: (event) => {
+            // if (this.lazy) return;
+            this.$emit('update:modelValue', event.target.value);
+          },
+          onBlur: (event) => {
+            this.$emit('blur', event);
+          },
+        }
+      );
+    },
+
+    
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};
+
+export const formControlStyleMixin = {
+  computed: {
+    classComputed() {
+      return [
+        this.headless
+          ? `${this.name}`
+          : 'leading-0 flex outline-none 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 appearance-none',
+        // 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-12 md:h-10',
+      ];
+    },
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-2",
+  "version": "0.19.2-21",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,9 +11,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@veritree/icons": "^0.36.1-0"
+    "@floating-ui/dom": "^1.0.4",
+    "@veritree/icons": "^0.45.1"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0-rc.12"
+    "@nuxt/kit": "^3.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwindcss": "^3.2.4"
   }
 }

package/src/components/Avatar/VTAvatar.vue

@@ -1,14 +1,21 @@
 <template>
   <div
-    :class="{
-      Avatar: headless,
-      'flex items-center justify-center overflow-hidden rounded-full':
-        !headless,
-      'h-10 w-10': !small,
-      'h-8 w-8': small,
-      'border border-solid': !dark,
-      'bg-white text-fd-500': dark,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'avatar'
+        : 'flex items-center justify-center overflow-hidden rounded-full bg-white border border-solid',
+      // variant styles
+      headless ? `avatar--${variant}` : null,
+      // sizes styles
+      headless
+        ? `avatar--${size}`
+        : isSmall
+        ? 'h-8 w-8'
+        : isLarge
+        ? 'h-10 w-10'
+        : null,
+    ]"
   >
     <slot></slot>
   </div>
@@ -18,32 +25,28 @@
 export default {
   name: 'VTAvatar',
 
-  provide() {
-    return {
-      api: () => {
-        const { dark: isDark, headless: isHeadless, light: isLight } = this;
-
-        return {
-          isDark,
-          isHeadless,
-          isLight,
-        };
-      },
-    };
-  },
-
   props: {
     headless: {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
+    variant: {
+      type: String,
+      default: 'primary',
     },
-    small: {
-      type: Boolean,
-      default: false,
+    size: {
+      type: String,
+      default: 'large',
+    },
+  },
+
+  computed: {
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
     },
   },
 };

package/src/components/Button/VTButton.vue

@@ -16,11 +16,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 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'
         : 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 active:text-secondary-500 border-transparent disabled:text-gray-400'
         : isIcon
         ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
         : null,
@@ -30,7 +30,7 @@
         : isLarge
         ? isIcon
           ? 'h-8 w-8'
-          : 'h-10'
+          : 'h-12 sm:h-10'
         : isSmall
         ? isIcon
           ? 'h-6 w-6 p-1'
@@ -41,7 +41,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,
       ]"
     >
@@ -115,7 +115,11 @@ export default {
     },
 
     tag() {
-      return this.$attrs.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.$attrs.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
 
     type() {