@veritree/ui 0.21.1-9 → 0.22.0-0

package/.prettierrc

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

package/index.js

@@ -1,67 +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 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/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";
-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,
@@ -96,12 +94,8 @@ export {
   VTListboxTrigger,
   VTButton,
   VTInput,
-  VTInputDate,
-  VTInputFile,
-  VTInputUpload,
   VTProgressBar,
   VTTextarea,
-  VTModal,
   VTTab,
   VTTabGroup,
   VTTabList,
@@ -128,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

@@ -1,10 +1,4 @@
-import FloatingUiItem from '../src/components/Utils/FloatingUiItem.vue';
-
 export const floatingUiItemMixin = {
-  components: {
-    FloatingUiItem,
-  },
-
   props: {
     headless: {
       type: Boolean,
@@ -25,10 +19,6 @@ export const floatingUiItemMixin = {
       return this.apiInjected().items;
     },
 
-    el() {
-      return this.$el;
-    },
-
     componentContent() {
       return this.apiInjected().componentContent;
     },
@@ -42,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
@@ -57,7 +47,7 @@ export const floatingUiItemMixin = {
             ? `${this.componentName}--selected`
             : null
           : this.selected
-          ? 'bg-secondary-200/10'
+          ? 'bg-gray-200'
           : null,
       ];
     },
@@ -68,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' });
     },
   },
 
@@ -90,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;
     },
 
@@ -128,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() {
@@ -195,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());
     },
 
@@ -203,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,
@@ -40,22 +33,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(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;
 
@@ -73,4 +64,4 @@ export const floatingUiMixin = {
       });
     },
   },
-};
+};

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-1'
+          : this.isRight
+          ? 'right-1'
+          : null,
+      ];
+    },
+  },
+};