@veritree/ui 0.27.0 → 0.28.0-1

package/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git ls-tree:*)",
+      "Bash(grep:*)",
+      "Bash(do echo:*)",
+      "Bash(git grep:*)"
+    ]
+  }
+}

package/index.js

@@ -1,71 +1,86 @@
-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 VTSkeleton from "./src/components/Skeleton/VTSkeleton.vue";
-import VTSkeletonItem from "./src/components/Skeleton/VTSkeletonItem.vue";
+import VTAlert from './src/components/Alert/VTAlert.vue';
+import VTAvatar from './src/components/Avatar/VTAvatar.vue';
+import VTBadge from './src/components/Badge/VTBadge.vue';
+import VTBreadcrumbRoot from './src/components/Breadcrumb/VTBreadcrumbRoot.vue';
+import VTBreadcrumbList from './src/components/Breadcrumb/VTBreadcrumbList.vue';
+import VTBreadcrumbItem from './src/components/Breadcrumb/VTBreadcrumbItem.vue';
+import VTBreadcrumbLink from './src/components/Breadcrumb/VTBreadcrumbLink.vue';
+import VTBreadcrumbSeparator from './src/components/Breadcrumb/VTBreadcrumbSeparator.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 VTCarousel from './src/components/Carousel/VTCarousel.vue';
+import VTCarouselBackward from './src/components/Carousel/VTCarouselBackward.vue';
+import VTCarouselForward from './src/components/Carousel/VTCarouselForward.vue';
+import VTCarouselTracker from './src/components/Carousel/VTCarouselTracker.vue';
+import VTChip from './src/components/Chip/VTChip.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 VTListboxTriggerHighlight from './src/components/Listbox/VTListboxTriggerHighlight.vue';
+import VTListboxDivider from './src/components/Listbox/VTListboxDivider.vue';
+import VTListboxGroup from './src/components/Listbox/VTListboxGroup.vue';
+import VTListboxPlaceholder from './src/components/Listbox/VTListboxPlaceholder.vue';
+import VTListboxViewport from './src/components/Listbox/VTListboxViewport.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 VTProgressBarIndicator from './src/components/ProgressBar/VTProgressBarIndicator.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 VTDivider from './src/components/Divider/VTDivider.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 VTScrollShadows from './src/components/ScrollShadows/VTScrollShadows.vue';
+import VTSeparator from './src/components/Separator/VTSeparator.vue';
+import VTSkeleton from './src/components/Skeleton/VTSkeleton.vue';
+import VTSkeletonItem from './src/components/Skeleton/VTSkeletonItem.vue';
+import VTSwitch from './src/components/Switch/VTSwitch.vue';
 
 export {
   VTAvatar,
@@ -75,6 +90,12 @@ export {
   VTImageCounter,
   VTImageHover,
   VTAlert,
+  VTBadge,
+  VTBreadcrumbRoot,
+  VTBreadcrumbList,
+  VTBreadcrumbItem,
+  VTBreadcrumbLink,
+  VTBreadcrumbSeparator,
   VTSpinner,
   VTDropdownMenu,
   VTDropdownMenuContent,
@@ -98,16 +119,21 @@ export {
   VTListboxList,
   VTListboxSearch,
   VTListboxTrigger,
+  VTListboxTriggerHighlight,
+  VTListboxDivider,
+  VTListboxGroup,
+  VTListboxPlaceholder,
+  VTListboxViewport,
   VTButton,
+  VTCarousel,
+  VTCarouselBackward,
+  VTCarouselForward,
+  VTCarouselTracker,
+  VTChip,
   VTInput,
-  VTInputIcon,
-  VTInputPassword,
-  VTInputDate,
-  VTInputFile,
-  VTInputUpload,
   VTProgressBar,
+  VTProgressBarIndicator,
   VTTextarea,
-  VTModal,
   VTTab,
   VTTabGroup,
   VTTabList,
@@ -129,11 +155,15 @@ export {
   VTDialogMain,
   VTDialogOverlay,
   VTDialogTitle,
+  VTDivider,
   VTDisclosure,
   VTDisclosureDetails,
   VTDisclosureHeader,
   VTDisclosureIcon,
   VTDisclosureContent,
+  VTScrollShadows,
+  VTSeparator,
   VTSkeleton,
-  VTSkeletonItem
+  VTSkeletonItem,
+  VTSwitch,
 };

package/mixins/floating-ui-content.js

@@ -10,6 +10,10 @@ export const floatingUiContentMixin = {
       type: Boolean,
       default: false,
     },
+    freeze: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -20,10 +24,10 @@ export const floatingUiContentMixin = {
   },
 
   mounted() {
-    document.addEventListener('click', (e) => this.onDocumentClick(e));
+    document.addEventListener('click', this.onDocumentClick);
   },
 
-  destroyed() {
+  unmounted() {
     document.removeEventListener('click', this.onDocumentClick);
   },
 
@@ -39,7 +43,16 @@ export const floatingUiContentMixin = {
         this.component.setActive();
 
         setTimeout(() => {
+          if (!this.id) {
+            return;
+          }
+
           this.el = document.getElementById(this.id);
+
+          if (!this.el) {
+            return;
+          }
+
           this.$emit('shown');
         }, 100);
       });
@@ -63,7 +76,7 @@ export const floatingUiContentMixin = {
     },
 
     onDocumentClick(e) {
-      if (!e) {
+      if (!e || !this.el || this.freeze) {
         return;
       }
 
@@ -78,4 +91,4 @@ export const floatingUiContentMixin = {
       this.activeDescedant = id;
     },
   },
-}
+};

package/mixins/floating-ui-item.js

@@ -32,23 +32,25 @@ 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 text-sm 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,
+            ? 'pointer-events-none opacity-50'
+            : null,
         // selected state styles
         this.headless
           ? this.selected
-            ? `${this.componentName}--selected`
+            ? this.multiple
+              ? null
+              : `${this.componentName}--selected`
             : null
           : this.selected
-          ? 'bg-gray-200'
-          : null,
+            ? 'bg-gray-200'
+            : null,
       ];
     },
   },
@@ -84,7 +86,7 @@ export const floatingUiItemMixin = {
     this.addMouseEventListeners();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiInjected().unregisterItem(this.id);
     this.removeMouseEventListeners();
   },
@@ -95,7 +97,7 @@ export const floatingUiItemMixin = {
 
       const item = {
         id: this.id,
-        text: this.$slots.default[0].text,
+        text: this.$slots.default?.()[0]?.children || this.$el?.textContent?.trim() || '',
         select: this.select,
         unselect: this.unselect,
         isSelected: this.isSelected,
@@ -217,6 +219,20 @@ export const floatingUiItemMixin = {
       return this.items.findIndex((item) => item.isSelected());
     },
 
+    handleToogle() {
+      const checkbox = this.$refs[`${this.id}-checkbox`];
+
+      if (checkbox) {
+        checkbox.click();
+      }
+    },
+
+    handleClick() {
+      this.value !== undefined
+        ? this.apiInjected().emit(this.value)
+        : this.$emit('click');
+    },
+
     leaveMenu() {
       if (this.componentTrigger) {
         this.componentTrigger.cancel();
@@ -229,11 +245,9 @@ export const floatingUiItemMixin = {
         return;
       }
 
-      this.value !== undefined
-        ? this.apiInjected().emit(this.value)
-        : this.$emit('click');
-
-      this.$nextTick(() => this.leaveMenu());
+      this.$emit('click');
+      this.multiple ? this.handleToogle() : this.handleClick();
+      this.multiple ? null : this.$nextTick(() => this.leaveMenu());
     },
 
     onKeyEsc() {
@@ -245,8 +259,10 @@ export const floatingUiItemMixin = {
         return;
       }
 
-      // unselect all items before selecting new item
-      this.items.forEach((item) => item.unselect());
+      // unselect all items before selecting new one
+      for (const item of this.items) {
+        item.unselect();
+      }
 
       /**
        * Select item passing the event type to decide if

package/mixins/floating-ui.js

@@ -1,12 +1,28 @@
-import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  shift,
+  offset,
+  size,
+  // update,
+} from '@floating-ui/dom';
 
 export const floatingUiMixin = {
+  props: {
+    offset: {
+      type: [Number, String, Object],
+      default: 5,
+    },
+  },
+
   data() {
     return {
       component: null,
       componentTrigger: null,
       componentContent: null,
       active: false,
+      floatingUiUpdaterDisposer: null,
     };
   },
 
@@ -23,6 +39,12 @@ export const floatingUiMixin = {
     };
   },
 
+  beforeUnmount() {
+    if (this.floatingUiUpdaterDisposer) {
+      this.floatingUiUpdaterDisposer();
+    }
+  },
+
   methods: {
     setActive() {
       this.active = true;
@@ -32,34 +54,130 @@ export const floatingUiMixin = {
       this.active = null;
     },
 
+    positionContentToTriggerByTopAndLeft(trigger, content, minWidthLimit) {
+      /*
+        TODO: Try to replace this with the offset object from floating-ui, using mainAxis, crossAxis, and alignmentAxis.
+        The problem is that the floating-ui offset values are px values, not percentages, which is the use case I am trying to solve.
+        I tried to calculate the percentage based off of the width and height of the trigger element, 
+        but depending on the placement prop, mainAxis could be x OR y and crossAxis could be x OR y,
+        so to calculate the offset based on the width/height of the trigger element
+        we would have to calculate it differently for each individual placement preset. 
+      */
+      const contentRect = content.getBoundingClientRect();
+      const contentWidth = contentRect.width;
+      const contentHeight = contentRect.height;
+      const triggerWidth = trigger.getBoundingClientRect().width;
+      let leftObject = this.leftPosition || {};
+      let topObject = this.topPosition || {};
+      let left = leftObject.value || 0;
+      let top = topObject.value || 0;
+
+      if (leftObject.unit === '%') {
+        left = (triggerWidth * left) / 100;
+      }
+
+      if (topObject.unit === '%') {
+        top = (triggerWidth * top) / 100;
+      }
+
+      if (leftObject.positionBy === 'center') {
+        left = left - contentWidth / 2;
+      }
+
+      if (leftObject.positionBy === 'end') {
+        left = left - contentWidth;
+      }
+
+      if (topObject.positionBy === 'top') {
+        top = top + contentHeight;
+      }
+
+      if (topObject.positionBy === 'center') {
+        top = top + contentHeight / 2;
+      }
+
+      /**
+       * Initializes the auto-update functionality for positioning the floating UI element.
+       * This method sets up an automatic update mechanism that adjusts the position of the
+       * content element in relation to the trigger element based on changes in the environment,
+       * such as scroll or resize events.
+       *
+       * @param {Element} trigger - The DOM element that acts as the reference point for positioning.
+       * @param {Element} content - The DOM element representing the floating UI content that needs to be positioned.
+       * @param {Function} updateFunction - A callback function that executes the update logic for positioning.
+       */
+      this.floatingUiUpdaterDisposer = autoUpdate(trigger, content, () => {
+        computePosition(trigger, content, {
+          placement: 'top-start',
+          middleware: [
+            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 + left}px`,
+            top: `${y + top}px`,
+          });
+        });
+      });
+    },
+
     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`,
+      if (!trigger || !content) {
+        console.error('The trigger or content element does not exist.');
+        return;
+      }
+
+      if (this.top || this.left) {
+        this.positionContentToTriggerByTopAndLeft(
+          trigger,
+          content,
+          minWidthLimit,
+        );
+        return;
+      }
+
+      this.floatingUiUpdaterDisposer = autoUpdate(trigger, content, () => {
+        computePosition(trigger, content, {
+          placement: this.placement,
+          middleware: [
+            offset(Number(this.offset)),
+            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

@@ -43,11 +43,11 @@ export const formControlIconMixin = {
         this.headless
           ? null
           : this.isLeft
-          ? 'left-0'
+          ? 'left-1'
           : this.isRight
-          ? 'right-0'
+          ? 'right-1'
           : null,
       ];
     },
   },
-};
+};