@veritree/ui 0.27.0-4 → 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,8 +1,19 @@
 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';
@@ -28,9 +39,15 @@ 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';
@@ -53,13 +70,17 @@ 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,
@@ -69,6 +90,12 @@ export {
   VTImageCounter,
   VTImageHover,
   VTAlert,
+  VTBadge,
+  VTBreadcrumbRoot,
+  VTBreadcrumbList,
+  VTBreadcrumbItem,
+  VTBreadcrumbLink,
+  VTBreadcrumbSeparator,
   VTSpinner,
   VTDropdownMenu,
   VTDropdownMenuContent,
@@ -92,9 +119,20 @@ export {
   VTListboxList,
   VTListboxSearch,
   VTListboxTrigger,
+  VTListboxTriggerHighlight,
+  VTListboxDivider,
+  VTListboxGroup,
+  VTListboxPlaceholder,
+  VTListboxViewport,
   VTButton,
+  VTCarousel,
+  VTCarouselBackward,
+  VTCarouselForward,
+  VTCarouselTracker,
+  VTChip,
   VTInput,
   VTProgressBar,
+  VTProgressBarIndicator,
   VTTextarea,
   VTTab,
   VTTabGroup,
@@ -117,11 +155,15 @@ export {
   VTDialogMain,
   VTDialogOverlay,
   VTDialogTitle,
+  VTDivider,
   VTDisclosure,
   VTDisclosureDetails,
   VTDisclosureHeader,
   VTDisclosureIcon,
   VTDisclosureContent,
+  VTScrollShadows,
+  VTSeparator,
   VTSkeleton,
   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() {
@@ -23,7 +27,7 @@ export const floatingUiContentMixin = {
     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 cursor-pointer',
+          : '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,
       ];
     },
   },
@@ -95,7 +97,7 @@ export const floatingUiItemMixin = {
 
       const item = {
         id: this.id,
-        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() {
@@ -263,4 +277,4 @@ export const floatingUiItemMixin = {
       this.unselect();
     },
   },
-};
+};

package/mixins/floating-ui.js

@@ -1,9 +1,17 @@
-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],
+      type: [Number, String, Object],
       default: 5,
     },
   },
@@ -14,6 +22,7 @@ export const floatingUiMixin = {
       componentTrigger: null,
       componentContent: null,
       active: false,
+      floatingUiUpdaterDisposer: null,
     };
   },
 
@@ -30,6 +39,12 @@ export const floatingUiMixin = {
     };
   },
 
+  beforeUnmount() {
+    if (this.floatingUiUpdaterDisposer) {
+      this.floatingUiUpdaterDisposer();
+    }
+  },
+
   methods: {
     setActive() {
       this.active = true;
@@ -39,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(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`,
+      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.js

@@ -9,13 +9,29 @@ export const formControlMixin = {
       default: false,
     },
     modelValue: {
-      type: [String, Number, Object, Array],
+      type: [String, Number, Object, Array, Date],
       default: null,
     },
     variant: {
       type: [String, Object, Function],
       default: '',
     },
+
+    /**
+     * Specifies the size of the button
+     *
+     * @values
+     * - 'small': A smaller size for the button
+     * - 'large': A larger size for the button
+     */
+    size: {
+      type: String,
+      default: 'large',
+    },
+    min: {
+      type: [String, Number],
+      default: null,
+    },
   },
 
   computed: {
@@ -36,13 +52,17 @@ export const formControlMixin = {
           onBlur: (event) => {
             this.$emit('blur', event);
           },
-        }
+        },
       );
     },
 
     isError() {
       return this.variant === 'error';
     },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
   },
 };
 
@@ -51,21 +71,31 @@ export const formControlStyleMixin = {
     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',
+          ? `${this.name ? this.name : ''}`
+          : 'leading-0 bg-white has-[:disabled]:bg-gray-200 disabled:bg-gray-200 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-inherit file:hidden focus-within:border-gray-600 focus:border-gray-600 focus-within:placeholder:text-gray-400 focus:placeholder:text-gray-400 has-[:disabled]:text-gray-500 disabled:text-gray-500',
         // variant styles
         this.headless
-          ? `${this.name}--${this.variant}`
+          ? `${this.name ? this.name : ''}${this.variant ? '--' + this.variant : ''}`
           : this.isError
-          ? 'border-error-300'
-          : 'border-gray-300',
+            ? 'border-error-300'
+            : this.isSuccess
+              ? 'border-success-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',
+            ? 'min-h-10' // limit it because input type number height can be different from other input types
+            : this.size === 'small'
+              ? 'h-8 text-sm'
+              : 'h-10 text-base',
+        // disabled styles
+        this.disabled
+          ? this.headless
+            ? `${this.name}--disabled`
+            : null
+          : null,
       ];
     },
   },
-};
+};

package/nuxt.js

@@ -4,18 +4,26 @@ import { fileURLToPath } from 'node:url';
 const components = [
   './src/components/Alert',
   './src/components/Avatar',
+  './src/components/Badge',
+  './src/components/Breadcrumb',
   './src/components/Button',
+  './src/components/Carousel',
   './src/components/Checkbox',
-  './src/components/Drawer',
+  './src/components/Chip',
   './src/components/Dialog',
   './src/components/Disclosure',
+  './src/components/Divider',
+  './src/components/Drawer',
   './src/components/DropdownMenu',
   './src/components/Form',
-  './src/components/Listbox',
   './src/components/Image',
+  './src/components/Listbox',
   './src/components/Popover',
   './src/components/ProgressBar',
+  './src/components/ScrollShadows',
+  './src/components/Separator',
   './src/components/Skeleton',
+  './src/components/Switch',
   './src/components/Tabs',
   './src/components/Tooltip',
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.27.0-4",
+  "version": "0.28.0-1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -17,10 +17,11 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.4.5",
-    "@veritree/icons": "^0.45.1"
+    "@internationalized/date": "^3.12.0",
+    "reka-ui": "^2.9.2"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.11.2",
+    "@nuxt/kit": "^4.4.2",
     "np": "^8.0.4",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",

package/src/components/Badge/VTBadge.vue

@@ -0,0 +1,60 @@
+<template>
+  <span
+    :class="[
+      // default styles
+      headless
+        ? 'badge'
+        : 'ml-auto flex min-w-5 place-content-center rounded-xl  p-1 text-xs leading-none ',
+      // variant styles
+      headless
+        ? `badge--${variant}`
+        : isDefault
+          ? 'bg-gray-800 text-white'
+          : isSuccess
+            ? 'bg-success-200 text-success-700'
+            : isError
+              ? 'bg-error-200 text-error-700'
+              : isWarning
+                ? 'bg-warning-200 text-warning-700'
+                : null,
+      // sizes styles
+    ]"
+  >
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VTBadge',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  computed: {
+    isDefault() {
+      return this.variant === 'default';
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+  },
+};
+</script>