@veritree/ui 0.22.2 → 0.22.3-0

package/index.js

@@ -1,69 +1,65 @@
-import VTAlert from "./src/components/Alert/VTAlert.vue";
-import VTAvatar from "./src/components/Avatar/VTAvatar.vue";
-import VTAvatarImage from "./src/components/Avatar/VTAvatarImage.vue";
-import VTAvatarText from "./src/components/Avatar/VTAvatarText.vue";
-import VTButton from "./src/components/Button/VTButton.vue";
-import VTImage from "./src/components/Image/VTImage.vue";
-import VTImageCounter from "./src/components/Image/VTImageCounter.vue";
-import VTImageHover from "./src/components/Image/VTImageHover.vue";
-import VTDropdownMenu from "./src/components/DropdownMenu/VTDropdownMenu.vue";
-import VTDropdownMenuContent from "./src/components/DropdownMenu/VTDropdownMenuContent.vue";
-import VTDropdownMenuDivider from "./src/components/DropdownMenu/VTDropdownMenuDivider.vue";
-import VTDropdownMenuGroup from "./src/components/DropdownMenu/VTDropdownMenuGroup.vue";
-import VTDropdownMenuItem from "./src/components/DropdownMenu/VTDropdownMenuItem.vue";
-import VTDropdownMenuLabel from "./src/components/DropdownMenu/VTDropdownMenuLabel.vue";
-import VTDropdownMenuTrigger from "./src/components/DropdownMenu/VTDropdownMenuTrigger.vue";
-import VTPopover from "./src/components/Popover/VTPopover.vue";
-import VTPopoverContent from "./src/components/Popover/VTPopoverContent.vue";
-import VTPopoverDivider from "./src/components/Popover/VTPopoverDivider.vue";
-import VTPopoverGroup from "./src/components/Popover/VTPopoverGroup.vue";
-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";
-import VTListboxLabel from "./src/components/Listbox/VTListboxLabel.vue";
-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 VTInputDate from "./src/components/Input/VTInputDate.vue";
-import VTInputFile from "./src/components/Input/VTInputFile.vue";
-import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
-import VTProgressBar from "./src/components/ProgressBar/VTProgressBar.vue";
-import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
-import VTModal from "./src/components/Modal/VTModal.vue";
-import VTTab from "./src/components/Tabs/VTTab.vue";
-import VTTabGroup from "./src/components/Tabs/VTTabGroup.vue";
-import VTTabList from "./src/components/Tabs/VTTabList.vue";
-import VTTabPanel from "./src/components/Tabs/VTTabPanel.vue";
-import VTTabPanels from "./src/components/Tabs/VTTabPanels.vue";
-import VTDialog from "./src/components/Dialog/VTDialog.vue";
-import VTDialogClose from "./src/components/Dialog/VTDialogClose.vue";
-import VTDialogContent from "./src/components/Dialog/VTDialogContent.vue";
-import VTDialogFooter from "./src/components/Dialog/VTDialogFooter.vue";
-import VTDialogHeader from "./src/components/Dialog/VTDialogHeader.vue";
-import VTDialogMain from "./src/components/Dialog/VTDialogMain.vue";
-import VTDialogOverlay from "./src/components/Dialog/VTDialogOverlay.vue";
-import VTDialogTitle from "./src/components/Dialog/VTDialogTitle.vue";
-import VTDrawer from "./src/components/Drawer/VTDrawer.vue";
-import VTDrawerClose from "./src/components/Drawer/VTDrawerClose.vue";
-import VTDrawerContent from "./src/components/Drawer/VTDrawerContent.vue";
-import VTDrawerFooter from "./src/components/Drawer/VTDrawerFooter.vue";
-import VTDrawerHeader from "./src/components/Drawer/VTDrawerHeader.vue";
-import VTDrawerTitle from "./src/components/Drawer/VTDrawerTitle.vue";
-import VTDrawerMain from "./src/components/Drawer/VTDrawerMain.vue";
-import VTDrawerOverlay from "./src/components/Drawer/VTDrawerOverlay.vue";
-import VTDisclosure from "./src/components/Disclosure/VTDisclosure.vue";
-import VTDisclosureDetails from "./src/components/Disclosure/VTDisclosureDetails.vue";
-import VTDisclosureHeader from "./src/components/Disclosure/VTDisclosureHeader.vue";
-import VTDisclosureIcon from "./src/components/Disclosure/VTDisclosureIcon.vue";
-import VTDisclosureContent from "./src/components/Disclosure/VTDisclosureContent.vue";
+import VTAlert from './src/components/Alert/VTAlert.vue';
+import VTAvatar from './src/components/Avatar/VTAvatar.vue';
+import VTAvatarImage from './src/components/Avatar/VTAvatarImage.vue';
+import VTAvatarText from './src/components/Avatar/VTAvatarText.vue';
+import VTButton from './src/components/Button/VTButton.vue';
+import VTImage from './src/components/Image/VTImage.vue';
+import VTImageCounter from './src/components/Image/VTImageCounter.vue';
+import VTImageHover from './src/components/Image/VTImageHover.vue';
+import VTDropdownMenu from './src/components/DropdownMenu/VTDropdownMenu.vue';
+import VTDropdownMenuContent from './src/components/DropdownMenu/VTDropdownMenuContent.vue';
+import VTDropdownMenuDivider from './src/components/DropdownMenu/VTDropdownMenuDivider.vue';
+import VTDropdownMenuGroup from './src/components/DropdownMenu/VTDropdownMenuGroup.vue';
+import VTDropdownMenuItem from './src/components/DropdownMenu/VTDropdownMenuItem.vue';
+import VTDropdownMenuLabel from './src/components/DropdownMenu/VTDropdownMenuLabel.vue';
+import VTDropdownMenuTrigger from './src/components/DropdownMenu/VTDropdownMenuTrigger.vue';
+import VTPopover from './src/components/Popover/VTPopover.vue';
+import VTPopoverContent from './src/components/Popover/VTPopoverContent.vue';
+import VTPopoverDivider from './src/components/Popover/VTPopoverDivider.vue';
+import VTPopoverGroup from './src/components/Popover/VTPopoverGroup.vue';
+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 VTListbox from './src/components/Listbox/VTListbox.vue';
+import VTListboxContent from './src/components/Listbox/VTListboxContent.vue';
+import VTListboxItem from './src/components/Listbox/VTListboxItem.vue';
+import VTListboxLabel from './src/components/Listbox/VTListboxLabel.vue';
+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/Form/VTInput.vue';
+import VTProgressBar from './src/components/ProgressBar/VTProgressBar.vue';
+import VTTextarea from './src/components/Textarea/VTTextarea.vue';
+import VTTab from './src/components/Tabs/VTTab.vue';
+import VTTabGroup from './src/components/Tabs/VTTabGroup.vue';
+import VTTabList from './src/components/Tabs/VTTabList.vue';
+import VTTabPanel from './src/components/Tabs/VTTabPanel.vue';
+import VTTabPanels from './src/components/Tabs/VTTabPanels.vue';
+import VTDialog from './src/components/Dialog/VTDialog.vue';
+import VTDialogClose from './src/components/Dialog/VTDialogClose.vue';
+import VTDialogContent from './src/components/Dialog/VTDialogContent.vue';
+import VTDialogFooter from './src/components/Dialog/VTDialogFooter.vue';
+import VTDialogHeader from './src/components/Dialog/VTDialogHeader.vue';
+import VTDialogMain from './src/components/Dialog/VTDialogMain.vue';
+import VTDialogOverlay from './src/components/Dialog/VTDialogOverlay.vue';
+import VTDialogTitle from './src/components/Dialog/VTDialogTitle.vue';
+import VTDrawer from './src/components/Drawer/VTDrawer.vue';
+import VTDrawerClose from './src/components/Drawer/VTDrawerClose.vue';
+import VTDrawerContent from './src/components/Drawer/VTDrawerContent.vue';
+import VTDrawerFooter from './src/components/Drawer/VTDrawerFooter.vue';
+import VTDrawerHeader from './src/components/Drawer/VTDrawerHeader.vue';
+import VTDrawerTitle from './src/components/Drawer/VTDrawerTitle.vue';
+import VTDrawerMain from './src/components/Drawer/VTDrawerMain.vue';
+import VTDrawerOverlay from './src/components/Drawer/VTDrawerOverlay.vue';
+import VTDisclosure from './src/components/Disclosure/VTDisclosure.vue';
+import VTDisclosureDetails from './src/components/Disclosure/VTDisclosureDetails.vue';
+import VTDisclosureHeader from './src/components/Disclosure/VTDisclosureHeader.vue';
+import VTDisclosureIcon from './src/components/Disclosure/VTDisclosureIcon.vue';
+import VTDisclosureContent from './src/components/Disclosure/VTDisclosureContent.vue';
+import VTSkeleton from './src/components/Skeleton/VTSkeleton.vue';
+import VTSkeletonItem from './src/components/Skeleton/VTSkeletonItem.vue';
 
 export {
   VTAvatar,
@@ -98,14 +94,8 @@ export {
   VTListboxTrigger,
   VTButton,
   VTInput,
-  VTInputIcon,
-  VTInputPassword,
-  VTInputDate,
-  VTInputFile,
-  VTInputUpload,
   VTProgressBar,
   VTTextarea,
-  VTModal,
   VTTab,
   VTTabGroup,
   VTTabList,
@@ -132,4 +122,6 @@ export {
   VTDisclosureHeader,
   VTDisclosureIcon,
   VTDisclosureContent,
+  VTSkeleton,
+  VTSkeletonItem,
 };

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' });
     },
   },
 
@@ -84,37 +84,52 @@ export const floatingUiItemMixin = {
     this.addMouseEventListeners();
   },
 
-  beforeDestroy() {
+  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);
-  
-      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,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 item
-      this.items[goToIndex].focus();
+      // focus new item
+      if (this.items[newSelectedIndex]) {
+        this.items[newSelectedIndex].focus();
+      }
+    },
+
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
     },
 
     leaveMenu() {
@@ -189,7 +229,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 +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

@@ -2,9 +2,9 @@ import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 
 export const floatingUiMixin = {
   props: {
-    placement: {
-      type: String,
-      default: 'bottom-start',
+    offset: {
+      type: [Number, String],
+      default: 5,
     },
   },
 
@@ -40,22 +40,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(Number(this.offset)),
           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 {
@@ -43,11 +43,11 @@ export const formControlIconMixin = {
         this.headless
           ? null
           : this.isLeft
-          ? 'left-0'
+          ? 'left-1'
           : this.isRight
-          ? 'right-0'
+          ? 'right-1'
           : null,
       ];
     },
   },
-};
+};

package/mixins/form-control.js

@@ -1,9 +1,4 @@
 export const formControlMixin = {
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
   props: {
     disabled: {
       type: Boolean,
@@ -13,7 +8,7 @@ export const formControlMixin = {
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: [String, Number, Object, Array],
       default: null,
     },
@@ -24,32 +19,40 @@ export const formControlMixin = {
   },
 
   computed: {
-    listeners() {
+    attrsComputed() {
       // `Object.assign` merges objects together to form a new object
       return Object.assign(
         {},
         // We add all the listeners from the parent
-        this.$listeners,
+        this.$attrs,
         // Then we can add custom listeners or override the
         // behavior of some listeners.
         {
           // This ensures that the component works with v-model
-          input: (event) => {
+          onInput: (event) => {
             // if (this.lazy) return;
-            this.$emit('input', event.target.value);
+            this.$emit('update:modelValue', event.target.value);
           },
-          blur: (event) => {
+          onBlur: (event) => {
             this.$emit('blur', event);
           },
         }
       );
     },
 
+    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 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}`
@@ -61,12 +64,8 @@ export const formControlMixin = {
           ? null
           : this.name === 'textarea'
           ? 'min-h-10' // limit it because input type number height can be different from other input types
-          : 'h-10',
+          : 'h-12 md:h-10',
       ];
     },
-
-    isError() {
-      return this.variant === 'error';
-    },
   },
-};
+};