@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/Form/VTInputNumber.vue

@@ -0,0 +1,198 @@
+<template>
+  <div :class="inputNumberClassComputed">
+    <span v-if="format === 'currency'" class="grow-0 mr-1">{{
+      currencySymbol
+    }}</span>
+    <input
+      ref="inputEl"
+      :id="id"
+      :value="displayValue"
+      :data-testid="dataTestid"
+      :disabled="disabled"
+      :inputmode="inputmode"
+      :placeholder="placeholder"
+      class="w-full bg-transparent outline-none"
+      @input="onInput"
+      @blur="onBlur"
+      @keydown="onKeyDown"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+import { getCurrencySymbol } from '../../helpers/currency';
+
+export default {
+  name: 'VTInputNumber',
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  emits: ['update:modelValue', 'change', 'blur'],
+
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
+    currency: {
+      type: String,
+      default: 'USD',
+    },
+    format: {
+      type: String,
+      default: 'decimal',
+    },
+    locale: {
+      type: String,
+      default: 'en-US',
+    },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    inputmode: {
+      type: String,
+      default: 'decimal',
+    },
+  },
+
+  data() {
+    return {
+      isFocused: false,
+      localDisplay: null,
+    };
+  },
+
+  computed: {
+    displayValue() {
+      // While typing, show the local display (with comma grouping but no fraction forcing)
+      if (this.isFocused && this.localDisplay !== null) {
+        return this.localDisplay;
+      }
+
+      // When not focused, show full formatting
+      if (this.modelValue === null || this.modelValue === undefined || this.modelValue === '') {
+        return '';
+      }
+
+      const num = Number(this.modelValue);
+      if (isNaN(num)) return '';
+
+      const options = this.format === 'currency'
+        ? { minimumFractionDigits: 2, maximumFractionDigits: 3 }
+        : {};
+
+      return num.toLocaleString(this.locale, options);
+    },
+
+    currencySymbol() {
+      return getCurrencySymbol({
+        locale: this.locale,
+        currency: this.currency,
+      });
+    },
+
+    inputNumberClassComputed() {
+      if (this.format === 'currency') {
+        return [this.classComputed, 'flex justify-start'];
+      }
+      return this.classComputed;
+    },
+  },
+
+  methods: {
+    unformat(str) {
+      if (!str || typeof str !== 'string') return null;
+      const cleaned = str.replace(/,/g, '');
+      if (cleaned === '' || cleaned === '.' || cleaned === '-') return null;
+      const num = this.format === 'integer'
+        ? parseInt(cleaned, 10)
+        : parseFloat(cleaned);
+      return isNaN(num) ? null : num;
+    },
+
+    formatWhileTyping(str) {
+      if (!str || typeof str !== 'string') return '';
+      const cleaned = str.replace(/,/g, '');
+
+      // Keep trailing dot or trailing decimal digits as-is while typing
+      const hasTrailingDot = cleaned.endsWith('.');
+      const parts = cleaned.split('.');
+      const intPart = parts[0];
+      const decPart = parts.length > 1 ? parts[1] : null;
+
+      // Format integer part with commas
+      const intNum = parseInt(intPart, 10);
+      if (isNaN(intNum)) return str;
+      const formatted = intNum.toLocaleString(this.locale);
+
+      if (hasTrailingDot) return formatted + '.';
+      if (decPart !== null) return formatted + '.' + decPart;
+      return formatted;
+    },
+
+    onInput(e) {
+      const raw = e.target.value;
+      const cursorPos = e.target.selectionStart;
+      const oldLength = raw.length;
+
+      // Format with commas while typing
+      const formatted = this.formatWhileTyping(raw);
+      this.localDisplay = formatted;
+
+      // Emit the raw number
+      const num = this.unformat(raw);
+      this.$emit('update:modelValue', num);
+      this.$emit('change', num);
+
+      // Restore cursor position (adjust for added/removed commas)
+      this.$nextTick(() => {
+        const newLength = formatted.length;
+        const diff = newLength - oldLength;
+        const newPos = cursorPos + diff;
+        this.$refs.inputEl?.setSelectionRange(newPos, newPos);
+      });
+    },
+
+    onBlur() {
+      this.isFocused = false;
+      this.localDisplay = null;
+      this.$emit('blur');
+    },
+
+    onKeyDown(e) {
+      if (e.key === 'a' && (e.ctrlKey || e.metaKey)) return;
+
+      const allowed = /^[0-9.,\-]$/;
+      const navKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
+
+      if (!allowed.test(e.key) && !navKeys.includes(e.key)) {
+        e.preventDefault();
+      }
+
+      // Set focused state on first keydown
+      if (!this.isFocused) {
+        this.isFocused = true;
+      }
+    },
+  },
+
+  mounted() {
+    this.$refs.inputEl?.addEventListener('focus', () => {
+      this.isFocused = true;
+      // Initialize localDisplay from current formatted value
+      if (this.modelValue !== null && this.modelValue !== undefined && this.modelValue !== '') {
+        this.localDisplay = this.formatWhileTyping(String(this.modelValue));
+      }
+    });
+  },
+};
+</script>

package/src/components/Form/VTInputPassword.vue

@@ -2,21 +2,25 @@
   <div :class="classComputedWrapper">
     <input
       :class="classComputed"
-      :value="value"
+      :value="modelValue"
       :disabled="disabled"
       :type="reveal ? 'text' : 'password'"
-      v-bind="$attrs"
-      v-on="listeners"
+      v-bind="attrsComputed"
     />
     <div :class="classComputedWrapperIcon">
-      <VTButton v-show="value.length" variant="icon" @click="reveal = !reveal">
-        <component :is="iconVisibility" class="h-5 w-5" />
+      <VTButton
+        v-show="modelValue.length"
+        variant="icon"
+        @click="reveal = !reveal"
+      >
+        <component :is="iconVisibility" class="h-5 w-5 text-gray-500" />
       </VTButton>
     </div>
   </div>
 </template>
 
 <script>
+import { IconVisibilityOn, IconVisibilityOff } from '@veritree/icons';
 import { formControlIconMixin } from '../../../mixins/form-control-icon';
 
 export default {
@@ -24,6 +28,11 @@ export default {
 
   mixins: [formControlIconMixin],
 
+  components: {
+    IconVisibilityOn,
+    IconVisibilityOff,
+  },
+
   props: {
     iconPlacement: {
       type: String,

package/src/components/Form/VTInputRange.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="range-slider" :style="style">
+    <input
+      :id="id"
+      v-model.number="computedValue"
+      :data-testid="dataTestid"
+      :min="min"
+      :max="max"
+      :step="step"
+      type="range"
+      @input="onInput"
+    />
+    <div class="range-slider-track" aria-hidden />
+    <div ref="thumb" class="range-slider-thumb" aria-hidden />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTInputRange',
+
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    step: {
+      type: [String, Number],
+      default: 1,
+    },
+  },
+
+  data() {
+    return {
+      thumbSize: null,
+    };
+  },
+
+  computed: {
+    computedValue: {
+      get() {
+        return Number(this.value);
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+
+    percentage() {
+      return ((this.computedValue - this.min) / (this.max - this.min)) * 100;
+    },
+
+    style() {
+      return {
+        '--value': `${this.percentage}%`,
+        '--thumb-left-position': `calc(${this.percentage}% - ${this.thumbSize * (this.percentage / 100)}px)`,
+      };
+    },
+  },
+
+  mounted() {
+    this.thumbSize = 20;
+  },
+
+  methods: {
+    onInput(e) {
+      this.computedValue = e.target.value;
+    },
+  },
+};
+</script>

package/src/components/Form/VTLegend.vue

@@ -0,0 +1,24 @@
+<template>
+  <legend
+    :class="[
+      headless
+        ? 'legend'
+        : 'mb-4 block w-full text-sm font-medium text-gray-600',
+    ]"
+  >
+    <slot />
+  </legend>
+</template>
+
+<script>
+export default {
+  name: 'VTLegend',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Form/VTTextarea.vue

@@ -1,9 +1,9 @@
 <template>
   <textarea
     :class="classComputed"
-    :value="value"
+    :value="modelValue"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 

package/src/components/Image/VTImage.vue

@@ -6,8 +6,8 @@
       headless
         ? null
         : hasObjectFit
-        ? `h-full w-full ${objectFitComputed}`
-        : null,
+          ? `h-full w-full ${objectFitComputed}`
+          : null,
     ]"
     v-bind="$attrs"
     @load="onLoad"
@@ -60,12 +60,14 @@ export default {
           return this.placeholder;
         }
 
-        if (this.cdnSrc) {
-          return this.handleImageResizing(this.cdnSrc, this.$attrs.width);
+        if (this.src) {
+          return this.src.includes('cloudfront.net/')
+            ? handleImageResizing(this.src, this.$attrs.width)
+            : this.src;
         }
 
-        if (this.src) {
-          return this.src;
+        if (this.cdnSrc) {
+          return handleImageResizing(this.cdnSrc, this.$attrs.width);
         }
       }
 
@@ -81,15 +83,13 @@ export default {
         ? this.objectFit === 'cover'
           ? 'object-cover'
           : this.objectFit === 'contain'
-          ? 'object-contain'
-          : null
+            ? 'object-contain'
+            : null
         : null;
     },
   },
 
   methods: {
-    handleImageResizing,
-
     onLoad() {
       this.isLoaded = true;
     },

package/src/components/Listbox/VTListbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ listbox: headless }">
+  <div :class="classList">
     <slot></slot>
   </div>
 </template>
@@ -16,16 +16,28 @@ export default {
   provide() {
     return {
       apiListbox: () => {
+        /**
+         * This function registers a trigger by setting its value to the componentTrigger property of the current object.
+         * @param {VueComponent} trigger - The trigger to be registered.
+         */
         const registerTrigger = (trigger) => {
           if (!trigger) return;
           this.componentTrigger = trigger;
         };
 
+        /**
+         * Registers content to be used in the children components by setting its value to the componentContent property of the current object.
+         * @param {any} content - The content to be registered.
+         */
         const registerContent = (content) => {
           if (!content) return;
           this.componentContent = content;
         };
 
+        /**
+         * Registers search to be used in the children components by setting its value to the componentSearch property of the current object.
+         * @param {any} search - The search to be registered.
+         */
         const registerSearch = (search) => {
           if (!search) return;
           this.componentSearch = search;
@@ -52,8 +64,32 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit('input', value);
-          this.$emit('change', value);
+          this.valueComputed = value;
+        };
+
+        /**
+         * pushValueToValueComputed handles pushing new selected values
+         * to an array that will replace the valueComputed. It is
+         * only used when the prop multiple is set to true.
+         */
+        const pushValueToValueComputed = (value) => {
+          const newArr = Array.isArray(value) ? value : [value];
+          this.valueComputed = [...this.valueComputed, ...newArr];
+        };
+
+        /**
+         * removeValueFromValueComputed handles removing aselected value
+         * from the valueComputed array by just filtering it out. It
+         * is also only used when the prop multiple is true.
+         */
+        const removeValueFromValueComputed = (value) => {
+          this.valueComputed = this.valueComputed.filter((valueComputed) => {
+            if (typeof valueComputed === 'object') {
+              return JSON.stringify(valueComputed) !== JSON.stringify(value);
+            }
+
+            return valueComputed !== value;
+          });
         };
 
         return {
@@ -63,8 +99,10 @@ export default {
           componentContent: this.componentContent,
           componentSearch: this.componentSearch,
           items: this.items,
+          multiple: this.multiple,
           search: this.search,
-          selectedValue: this.value,
+          version: this.version,
+          valueComputed: this.valueComputed,
           registerTrigger,
           registerContent,
           registerSearch,
@@ -72,37 +110,87 @@ export default {
           unregisterItem,
           pushSearch,
           clearSearch,
+          pushValueToValueComputed,
+          removeValueFromValueComputed,
           emit,
         };
       },
     };
   },
 
+  emits: ['update:modelValue', 'change'],
+
   props: {
-    value: {
-      type: [String, Number, Object],
+    id: {
+      type: String,
       default: null,
     },
+    /**
+     * The value of the component. Can be a string, number, object, or array.
+     * @type {string|number|object|array}
+     * @default []
+     */
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: () => [],
+    },
+    /**
+     * Determines whether the button will use its default atomic style (tailwind) or its default class
+     * @type {boolean}
+     * @values
+     * - true: The button will have no default style and can be fully customized with a custom class
+     * - false: The button will use its default atomic style (tailwind) and can be further customized with additional classes
+     * @default null
+     */
     headless: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The placement of the component relative to its trigger element.
+     * @type {string}
+     * @values 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
+     * @default 'bottom-start'
+     */
     placement: {
       type: String,
       default: 'bottom-start',
     },
+    /**
+     * Determines whether the component should be aligned to the right of its trigger element.
+     * @type {boolean}
+     * @default false
+     */
     right: {
       type: Boolean,
       default: false,
     },
+    /**
+     * Determines whether the component should allow multiple selections.
+     * @type {boolean}
+     * @default false
+     */
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The version of the component to use.
+     * @type {number|string}
+     * @default '1'
+     */
+    version: {
+      type: [Number, String],
+      default: '1',
+    },
   },
 
   data() {
     return {
-      componentId: genId(),
       componentSearch: null,
       search: '',
       items: [],
+      itemsChecked: [],
       /**
        * Explaining the need for the floatingUiMinWidth data
        *
@@ -122,8 +210,39 @@ export default {
   },
 
   computed: {
-    id() {
-      return `listbox-${this.componentId}`;
+    componentId() {
+      return this.id || genId();
+    },
+
+    valueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue);
+        this.$emit('change', newValue);
+      },
+    },
+
+    classList() {
+      const list = [];
+
+      // This will be refactor by moving the inline tailwind styling to its own file
+      if (this.headless || this.version === '2') {
+        // use semantic list
+        list.push('listbox');
+        list.push(`listbox--version-${this.version}`);
+
+        if (this.variant) {
+          list.push(`listbox--${this.variant}`);
+        }
+
+        if (this.size) {
+          list.push(`listbox--${this.size}`);
+        }
+      }
+
+      return list;
     },
   },
 };

package/src/components/Listbox/VTListboxContent.vue

@@ -4,9 +4,12 @@
     :visible="visible"
     :headless="headless"
     :aria-activedescendant="activeDescedant"
-    :portal-class="$vnode.data.staticClass"
+    :portal-class="`${$attrs.class || ''} ${portalClassList}`"
     component="listbox"
     role="listbox"
+    @shown="$emit('shown')"
+    @hidden="$emit('hidden')"
+    @before-show="$emit('before-show')"
   >
     <slot></slot>
   </FloatingUi>
@@ -40,6 +43,16 @@ export default {
     componentTrigger() {
       return this.apiListbox().componentTrigger;
     },
+
+    portalClassList() {
+      const staticClass = this.$attrs.class || this.$attrs.staticClass || '';
+
+      if (this.apiListbox().version === '2') {
+        return `${staticClass} listbox-content--version-2`;
+      }
+
+      return staticClass;
+    },
   },
 
   mounted() {

package/src/components/Listbox/VTListboxDivider.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    :class="{
+      'listbox-divider': headless,
+      'mx-3 my-0.5 h-[1px] bg-gray-200': !headless,
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxDivider',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Listbox/VTListboxGroup.vue

@@ -0,0 +1,9 @@
+<template>
+  <div role="group"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxGroup',
+};
+</script>