@veritree/ui 0.81.0 → 0.82.0-1

package/mixins/form-control.js

@@ -73,7 +73,7 @@ export const formControlStyleMixin = {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 bg-white 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:border-gray-600 focus:placeholder:text-gray-400 disabled:text-gray-500',
+          : '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}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.81.0",
+  "version": "0.82.0-1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInputNumber.vue

@@ -1,12 +1,18 @@
 <template>
-  <input
-    v-model="valueFormatted"
-    :class="classComputed"
-    :disabled="disabled"
-    @input="onInput"
-    @change="onChange"
-    @blur="onBlur"
-  />
+  <div :class="inputNumberClassComputed">
+    <span v-if="format === 'currency'" class="grow-0 mr-1">{{
+      currencySymbol
+    }}</span>
+    <input
+      v-model="valueFormatted"
+      :disabled="disabled"
+      class="w-full"
+      @input="onInput"
+      @change="onChange"
+      @blur="onBlur"
+      @keydown="onKeyDown"
+    />
+  </div>
 </template>
 
 <script>
@@ -14,6 +20,7 @@ import {
   formControlMixin,
   formControlStyleMixin,
 } from '../../../mixins/form-control';
+import { getCurrencySymbol } from '../../helpers/currency';
 
 export default {
   name: 'VTInputNumber',
@@ -26,12 +33,32 @@ export default {
   },
 
   props: {
+    currency: {
+      type: String,
+      default: 'USD',
+    },
+    locale: {
+      type: String,
+      default: 'en-US',
+    },
+    // different type of number input (e.g. 'integer', 'decimal', 'currency')
+    format: {
+      type: String,
+      default: 'integer',
+    },
     value: {
       type: [String, Number, Object, Array, Date],
       default: null,
     },
   },
 
+  data() {
+    return {
+      event: 'input',
+      key: null,
+    };
+  },
+
   computed: {
     valueComputed: {
       get() {
@@ -48,12 +75,44 @@ export default {
 
     valueFormatted: {
       get() {
-        return Number(this.value).toLocaleString();
+        if (this.value === 0 && this.event === 'blur') {
+          return null;
+        }
+
+        let options = {};
+
+        // only add the fraction digits on blur because on input it won't behave nicely
+        if (this.format === 'currency' && this.event === 'blur') {
+          options = {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          };
+        } else {
+          options = {};
+        }
+
+        return Number(this.value).toLocaleString(this.locale, options);
       },
       set(value) {
+        // value without formatting that will be
         this.valueComputed = value;
       },
     },
+
+    currencySymbol() {
+      return getCurrencySymbol({
+        locale: this.locale,
+        currency: this.currency,
+      });
+    },
+
+    inputNumberClassComputed() {
+      if (this.format === 'currency') {
+        return [this.classComputed, 'flex justify-start'];
+      }
+
+      return this.classComputed;
+    },
   },
 
   methods: {
@@ -68,6 +127,10 @@ export default {
         return null; // or any other appropriate value or behavior
       }
 
+      if (this.format === 'currency') {
+        return parseFloat(number.replace(/,/g, ''));
+      }
+
       return parseInt(number.replace(/,/g, ''), 10);
     },
 
@@ -91,12 +154,42 @@ export default {
     },
 
     onInput(e) {
+      this.event = 'input';
       this.valueComputed = e.target.value;
     },
 
-    onBlur() {
+    onBlur(e) {
+      this.event = 'blur';
+
+      // only set valueComputed if it's greater than 0
+      if (!this.valueComputed && this.valueComputed > 0) {
+        this.valueComputed = e.target.value;
+      }
+
       this.$emit('blur');
     },
+
+    /**
+     * Handles the keydown event to restrict input to valid characters.
+     *
+     * This function prevents the default action for any key presses that do not correspond
+     * to a digit (0-9), a comma, or a period. It also allows common navigation and editing
+     * keys such as Backspace, Delete, Arrow keys, and Tab.
+     *
+     * @param {Event} e - The keydown event object.
+     */
+    onKeyDown(e) {
+      if (
+        !/^[0-9.,]$/.test(e.key) &&
+        !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
+          e.key,
+        )
+      ) {
+        e.preventDefault();
+      }
+
+      this.key = e.key;
+    },
   },
 };
 </script>

package/src/helpers/currency.js

@@ -0,0 +1,21 @@
+export const currencyFormatter = ({ locale = 'en-US', currency = 'USD' }) => {
+  return Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  });
+};
+
+export const getCurrencySymbol = (options) => {
+  const formatter = currencyFormatter(options);
+  const parts = formatter.formatToParts(0); // can be any number
+  const currency = parts.find((part) => part.type === 'currency');
+  const symbol = currency.value;
+
+  return removeLetters(symbol);
+};
+
+// Remove all letters (for example, change CA$ to $)
+const removeLetters = (value) => {
+  const lettersRegex = /[A-Za-z]/g;
+  return value.replaceAll(lettersRegex, '');
+};