@veritree/ui 0.78.0-0 → 0.78.0-2

package/package.json

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

package/src/components/Form/VTInput.vue

@@ -14,6 +14,8 @@ import {
 } from '../../../mixins/form-control';
 
 export default {
+  name: 'VTInput',
+
   mixins: [formControlMixin, formControlStyleMixin],
 
   data() {

package/src/components/Form/VTInputNumber.vue

@@ -0,0 +1,102 @@
+<template>
+  <input
+    v-model="valueFormatted"
+    :class="classComputed"
+    :disabled="disabled"
+    @input="onInput"
+    @change="onChange"
+    @blur="onBlur"
+  />
+</template>
+
+<script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+
+export default {
+  name: 'VTInputNumber',
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    value: {
+      type: [String, Number, Object, Array, Date],
+      default: null,
+    },
+  },
+
+  computed: {
+    valueComputed: {
+      get() {
+        if (this.value === null || this.value === undefined) {
+          return '';
+        }
+
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', this.unformatNumber(value));
+      },
+    },
+
+    valueFormatted: {
+      get() {
+        return Number(this.value).toLocaleString();
+      },
+      set(value) {
+        this.valueComputed = value;
+      },
+    },
+  },
+
+  methods: {
+    /**
+     * Unformats a formatted number string by removing commas and converting it to an integer.
+     *
+     * @param {string} formattedNumber - The formatted number string.
+     * @returns {number|null} - Returns the unformatted number as an integer, or null if the input is invalid.
+     */
+    unformatNumber(number) {
+      if (!this.isValidNumber(number)) {
+        return null; // or any other appropriate value or behavior
+      }
+
+      return parseInt(number.replace(/,/g, ''), 10);
+    },
+
+    /**
+     * Checks if the input is a valid number.
+     *
+     * @param {string} input - The input string to check.
+     * @returns {boolean} - Returns true if the input is a valid number, otherwise false.
+     */
+    isValidNumber(input) {
+      return (
+        input !== null &&
+        input !== undefined &&
+        input !== '' &&
+        !isNaN(Number(input.replace(/,/g, '')))
+      );
+    },
+
+    onChange(e) {
+      this.$emit('change', this.unformatNumber(e.target.value));
+    },
+
+    onInput(e) {
+      this.valueComputed = e.target.value;
+    },
+
+    onBlur() {
+      this.$emit('blur');
+    },
+  },
+};
+</script>