From fe217c5944bb3ff338ee530d11608d6613ab9eff Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Wed, 19 May 2021 10:45:51 +0300
Subject: [PATCH 1/9] SFloatInput: Added Number Formatting.

---
 src/components/Input/SFloatInput.vue | 67 ++++++++++++++++++++++------
 src/stories/SFloatInput.stories.ts   |  8 +++-
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index e15ac5c5..734f5ab3 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -1,6 +1,5 @@
 <template>
   <s-input
-    v-float
     :placeholder="placeholder"
     :value="value"
     v-bind="$attrs"
@@ -35,15 +34,32 @@ const decimalsValidator = x => x === undefined || x >= 0
   }
 })
 export default class SFloatInput extends Vue {
+  locale = ''
+  delimiters = {
+    thousand: ',',
+    decimal: '.'
+  }
+
   @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string
   @Prop({ type: String, default: '0.0' }) readonly placeholder!: string
+  @Prop({ type: Boolean, default: false }) readonly isLocaleString!: boolean
   @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
+  created () {
+    // Set delimiters' symbols
+    this.locale = navigator.language
+    const decimalDelimiter = Number(1.1).toLocaleString(this.locale).substring(1, 2)
+    if (decimalDelimiter !== this.delimiters.decimal) {
+      this.delimiters.decimal = decimalDelimiter
+      this.delimiters.thousand = decimalDelimiter === '.' ? ',' : '.'
+    }
+  }
+
   handleInput (value: string): void {
     const newValue = [
       (v) => this.formatNumberField(v, this.decimals),
-      (v) => isNumberLikeValue(v) ? v : DEFAULT_VALUE,
+      (v) => isNumberLikeValue(this.isLocaleString ? v.replace(new RegExp(this.delimiters.thousand, 'g'), '') : v) ? v : DEFAULT_VALUE,
       (v) => this.checkValueForExtremum(v)
     ].reduce((buffer, rule) => rule(buffer), value)
 
@@ -68,15 +84,15 @@ export default class SFloatInput extends Vue {
 
   private trimNeedlessSymbols (value: string): string {
     // Trim zeros in the beginning
-    if (value.indexOf('0') === 0 && value.indexOf('.') !== 1) {
+    if (value.indexOf('0') === 0 && value.indexOf(this.delimiters.decimal) !== 1) {
       value = value.replace(/^0+/, '')
     }
     // add leading zero before floating point
-    if (value.indexOf('.') === 0) {
+    if (value.indexOf(this.delimiters.decimal) === 0) {
       value = '0' + value
     }
     // Trim dot in the end
-    if (value.indexOf('.') === value.length - 1) {
+    if (value.indexOf(this.delimiters.decimal) === value.length - 1) {
       value = value.slice(0, -1)
     }
 
@@ -86,14 +102,21 @@ export default class SFloatInput extends Vue {
   private formatNumberField (value: string, decimals: number): string {
     if (!['string', 'number'].includes(typeof value)) return value
 
-    let formatted = String(value).replace(/[^\d.]/g, '')
-
-    if (formatted.indexOf('.') === 0) {
+    let formatted = String(value).replace(new RegExp('[^\\d' + this.delimiters.decimal + ']', 'g'), '')
+    const decimalDelimiterIndex = formatted.indexOf(this.delimiters.decimal)
+    // Add prefix zero if needed
+    if (decimalDelimiterIndex === 0) {
       formatted = '0' + formatted
     }
+    // Avoid several decimal delimiters
+    if ((value.match(new RegExp(this.delimiters.decimal, 'g')) || []).length > 1) {
+      formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(this.delimiters.decimal, '')
+    }
+    if (this.isLocaleString) {
+      formatted = this.formatToLocaleString(formatted)
+    }
 
     const lengthLimit = this.valueMaxLength(formatted, decimals)
-
     if (lengthLimit && formatted.length > lengthLimit) {
       formatted = formatted.slice(0, lengthLimit)
     }
@@ -101,17 +124,35 @@ export default class SFloatInput extends Vue {
     return formatted
   }
 
+  private formatToLocaleString (formatted: string): string {
+    const splittedValue = formatted.replace(this.delimiters.thousand, '').split(this.delimiters.decimal)
+
+    if (splittedValue[0].length > 3) {
+      const reversedValue = splittedValue[0].split('').reverse()
+      splittedValue[0] = reversedValue.reduce((prev, current, index) => {
+        prev += current
+        if (++index % 3 === 0 && index !== reversedValue.length) {
+          prev += this.delimiters.thousand
+        }
+        return prev
+      }).split('').reverse().join('')
+    }
+
+    return splittedValue.join(this.delimiters.decimal)
+  }
+
   private valueMaxLength (value: string, decimals: number) {
     if (value.length === 0 || decimals === undefined) return undefined
 
-    const fpIndex = value.indexOf('.')
+    const fpIndex = value.indexOf(this.delimiters.decimal)
 
-    return fpIndex !== -1 ? fpIndex + 1 + decimals : undefined
+    return fpIndex !== -1 ? fpIndex + 1 + decimals + (value.match(new RegExp(this.delimiters.thousand, 'g')) || []).length : undefined
   }
 
   private checkValueForExtremum (value: string): string {
-    if (!value) return value
-    if (this.max && (+value > +this.max)) return String(this.max)
+    const cleanValue = this.isLocaleString ? value.replace(new RegExp(this.delimiters.thousand, 'g'), '') : value
+    if (!cleanValue) return cleanValue
+    if (this.max && (+cleanValue > +this.max)) return this.isLocaleString ? this.formatToLocaleString(String(this.max)) : String(this.max)
 
     return value
   }
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index 72454425..fceb4fad 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -1,4 +1,4 @@
-import { number, text, withKnobs } from '@storybook/addon-knobs'
+import { boolean, number, text, withKnobs } from '@storybook/addon-knobs'
 
 import { SFloatInput, SRow } from '../components'
 
@@ -13,6 +13,7 @@ export const configurable = () => ({
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-float-input
                  v-model="model"
+                 :isLocaleString="isLocaleString"
                  :decimals="decimals"
                  :max="max"
                />
@@ -25,7 +26,10 @@ export const configurable = () => ({
       default: number('Decimals', 18)
     },
     max: {
-      default: text('Max', '10000')
+      default: text('Max', '90000000')
+    },
+    isLocaleString: {
+      default: boolean('Is Locale String', true)
     }
   }
 })

From 5ece491ecb97da6c88d0d3ed5b99c0bbd5323208 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Wed, 19 May 2021 14:39:45 +0300
Subject: [PATCH 2/9] Updated UI Lib version, fixed some RegExp.

---
 package.json                         |  2 +-
 src/components/Input/SFloatInput.vue | 27 ++++++++++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index c4c078e8..edab577e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index 734f5ab3..f7615285 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -47,19 +47,21 @@ export default class SFloatInput extends Vue {
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
   created () {
-    // Set delimiters' symbols
-    this.locale = navigator.language
-    const decimalDelimiter = Number(1.1).toLocaleString(this.locale).substring(1, 2)
-    if (decimalDelimiter !== this.delimiters.decimal) {
-      this.delimiters.decimal = decimalDelimiter
-      this.delimiters.thousand = decimalDelimiter === '.' ? ',' : '.'
+    if (this.isLocaleString) {
+      // Set delimiters' symbols
+      this.locale = navigator.language
+      const decimalDelimiter = Number(1.1).toLocaleString(this.locale).substring(1, 2)
+      if (decimalDelimiter !== this.delimiters.decimal) {
+        this.delimiters.decimal = decimalDelimiter
+        this.delimiters.thousand = decimalDelimiter === '.' ? ',' : '.'
+      }
     }
   }
 
   handleInput (value: string): void {
     const newValue = [
       (v) => this.formatNumberField(v, this.decimals),
-      (v) => isNumberLikeValue(this.isLocaleString ? v.replace(new RegExp(this.delimiters.thousand, 'g'), '') : v) ? v : DEFAULT_VALUE,
+      (v) => isNumberLikeValue(this.formatToNumber(v)) ? v : DEFAULT_VALUE,
       (v) => this.checkValueForExtremum(v)
     ].reduce((buffer, rule) => rule(buffer), value)
 
@@ -82,6 +84,11 @@ export default class SFloatInput extends Vue {
     this.$emit('input', value)
   }
 
+  private formatToNumber (value: string) {
+    if (!this.isLocaleString) return value
+    return value.replace(new RegExp('\\' + this.delimiters.thousand, 'g'), '').replace(/,/g, '.')
+  }
+
   private trimNeedlessSymbols (value: string): string {
     // Trim zeros in the beginning
     if (value.indexOf('0') === 0 && value.indexOf(this.delimiters.decimal) !== 1) {
@@ -104,10 +111,12 @@ export default class SFloatInput extends Vue {
 
     let formatted = String(value).replace(new RegExp('[^\\d' + this.delimiters.decimal + ']', 'g'), '')
     const decimalDelimiterIndex = formatted.indexOf(this.delimiters.decimal)
+
     // Add prefix zero if needed
     if (decimalDelimiterIndex === 0) {
       formatted = '0' + formatted
     }
+
     // Avoid several decimal delimiters
     if ((value.match(new RegExp(this.delimiters.decimal, 'g')) || []).length > 1) {
       formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(this.delimiters.decimal, '')
@@ -146,11 +155,11 @@ export default class SFloatInput extends Vue {
 
     const fpIndex = value.indexOf(this.delimiters.decimal)
 
-    return fpIndex !== -1 ? fpIndex + 1 + decimals + (value.match(new RegExp(this.delimiters.thousand, 'g')) || []).length : undefined
+    return fpIndex !== -1 ? fpIndex + 1 + decimals + (value.match(new RegExp('\\' + this.delimiters.thousand, 'g')) || []).length : undefined
   }
 
   private checkValueForExtremum (value: string): string {
-    const cleanValue = this.isLocaleString ? value.replace(new RegExp(this.delimiters.thousand, 'g'), '') : value
+    const cleanValue = this.isLocaleString ? this.formatToNumber(value) : value
     if (!cleanValue) return cleanValue
     if (this.max && (+cleanValue > +this.max)) return this.isLocaleString ? this.formatToLocaleString(String(this.max)) : String(this.max)
 

From 7562c1097e9868c4cf59c17c9e72e6f146f58eee Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Thu, 20 May 2021 10:35:04 +0300
Subject: [PATCH 3/9] Cleanup.

---
 src/components/Input/SFloatInput.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index f7615285..bcbe7e88 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -34,7 +34,6 @@ const decimalsValidator = x => x === undefined || x >= 0
   }
 })
 export default class SFloatInput extends Vue {
-  locale = ''
   delimiters = {
     thousand: ',',
     decimal: '.'
@@ -49,8 +48,7 @@ export default class SFloatInput extends Vue {
   created () {
     if (this.isLocaleString) {
       // Set delimiters' symbols
-      this.locale = navigator.language
-      const decimalDelimiter = Number(1.1).toLocaleString(this.locale).substring(1, 2)
+      const decimalDelimiter = Number(1.1).toLocaleString(navigator.language).substring(1, 2)
       if (decimalDelimiter !== this.delimiters.decimal) {
         this.delimiters.decimal = decimalDelimiter
         this.delimiters.thousand = decimalDelimiter === '.' ? ',' : '.'

From 32ff5bf4ac328eb0f0492578691d740d078b4471 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Thu, 20 May 2021 23:25:58 +0300
Subject: [PATCH 4/9] SFloatInput: Added delimiters prop.

---
 src/components/Input/SFloatInput.vue | 45 +++++++++++-----------------
 src/stories/SFloatInput.stories.ts   | 14 +++++++--
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index bcbe7e88..93ec6dd0 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -34,26 +34,15 @@ const decimalsValidator = x => x === undefined || x >= 0
   }
 })
 export default class SFloatInput extends Vue {
-  delimiters = {
-    thousand: ',',
-    decimal: '.'
-  }
-
   @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string
   @Prop({ type: String, default: '0.0' }) readonly placeholder!: string
-  @Prop({ type: Boolean, default: false }) readonly isLocaleString!: boolean
+  @Prop({ type: Boolean, default: false }) readonly isLocaleString?: boolean
+  @Prop({ type: Object, default: () => {} }) readonly delimiters?: object
   @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
-  created () {
-    if (this.isLocaleString) {
-      // Set delimiters' symbols
-      const decimalDelimiter = Number(1.1).toLocaleString(navigator.language).substring(1, 2)
-      if (decimalDelimiter !== this.delimiters.decimal) {
-        this.delimiters.decimal = decimalDelimiter
-        this.delimiters.thousand = decimalDelimiter === '.' ? ',' : '.'
-      }
-    }
+  get delimitersConfig (): any {
+    return this.isLocaleString && this.delimiters ? this.delimiters : { thousand: ',', decimal: '.' }
   }
 
   handleInput (value: string): void {
@@ -84,20 +73,20 @@ export default class SFloatInput extends Vue {
 
   private formatToNumber (value: string) {
     if (!this.isLocaleString) return value
-    return value.replace(new RegExp('\\' + this.delimiters.thousand, 'g'), '').replace(/,/g, '.')
+    return value.replace(new RegExp('\\' + this.delimitersConfig.thousand, 'g'), '').replace(/,/g, '.')
   }
 
   private trimNeedlessSymbols (value: string): string {
     // Trim zeros in the beginning
-    if (value.indexOf('0') === 0 && value.indexOf(this.delimiters.decimal) !== 1) {
+    if (value.indexOf('0') === 0 && value.indexOf(this.delimitersConfig.decimal) !== 1) {
       value = value.replace(/^0+/, '')
     }
     // add leading zero before floating point
-    if (value.indexOf(this.delimiters.decimal) === 0) {
+    if (value.indexOf(this.delimitersConfig.decimal) === 0) {
       value = '0' + value
     }
     // Trim dot in the end
-    if (value.indexOf(this.delimiters.decimal) === value.length - 1) {
+    if (value.indexOf(this.delimitersConfig.decimal) === value.length - 1) {
       value = value.slice(0, -1)
     }
 
@@ -107,8 +96,8 @@ export default class SFloatInput extends Vue {
   private formatNumberField (value: string, decimals: number): string {
     if (!['string', 'number'].includes(typeof value)) return value
 
-    let formatted = String(value).replace(new RegExp('[^\\d' + this.delimiters.decimal + ']', 'g'), '')
-    const decimalDelimiterIndex = formatted.indexOf(this.delimiters.decimal)
+    let formatted = String(value).replace(new RegExp('[^\\d' + this.delimitersConfig.decimal + ']', 'g'), '')
+    const decimalDelimiterIndex = formatted.indexOf(this.delimitersConfig.decimal)
 
     // Add prefix zero if needed
     if (decimalDelimiterIndex === 0) {
@@ -116,8 +105,8 @@ export default class SFloatInput extends Vue {
     }
 
     // Avoid several decimal delimiters
-    if ((value.match(new RegExp(this.delimiters.decimal, 'g')) || []).length > 1) {
-      formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(this.delimiters.decimal, '')
+    if ((value.match(new RegExp(this.delimitersConfig.decimal, 'g')) || []).length > 1) {
+      formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(this.delimitersConfig.decimal, '')
     }
     if (this.isLocaleString) {
       formatted = this.formatToLocaleString(formatted)
@@ -132,28 +121,28 @@ export default class SFloatInput extends Vue {
   }
 
   private formatToLocaleString (formatted: string): string {
-    const splittedValue = formatted.replace(this.delimiters.thousand, '').split(this.delimiters.decimal)
+    const splittedValue = formatted.replace(this.delimitersConfig.thousand, '').split(this.delimitersConfig.decimal)
 
     if (splittedValue[0].length > 3) {
       const reversedValue = splittedValue[0].split('').reverse()
       splittedValue[0] = reversedValue.reduce((prev, current, index) => {
         prev += current
         if (++index % 3 === 0 && index !== reversedValue.length) {
-          prev += this.delimiters.thousand
+          prev += this.delimitersConfig.thousand
         }
         return prev
       }).split('').reverse().join('')
     }
 
-    return splittedValue.join(this.delimiters.decimal)
+    return splittedValue.join(this.delimitersConfig.decimal)
   }
 
   private valueMaxLength (value: string, decimals: number) {
     if (value.length === 0 || decimals === undefined) return undefined
 
-    const fpIndex = value.indexOf(this.delimiters.decimal)
+    const fpIndex = value.indexOf(this.delimitersConfig.decimal)
 
-    return fpIndex !== -1 ? fpIndex + 1 + decimals + (value.match(new RegExp('\\' + this.delimiters.thousand, 'g')) || []).length : undefined
+    return fpIndex !== -1 ? fpIndex + 1 + decimals + (value.match(new RegExp('\\' + this.delimitersConfig.thousand, 'g')) || []).length : undefined
   }
 
   private checkValueForExtremum (value: string): string {
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index fceb4fad..19c2dd8b 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -1,4 +1,4 @@
-import { boolean, number, text, withKnobs } from '@storybook/addon-knobs'
+import { boolean, number, text, object, withKnobs } from '@storybook/addon-knobs'
 
 import { SFloatInput, SRow } from '../components'
 
@@ -13,8 +13,9 @@ export const configurable = () => ({
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-float-input
                  v-model="model"
-                 :isLocaleString="isLocaleString"
                  :decimals="decimals"
+                 :isLocaleString="isLocaleString"
+                 :delimiters="delimiters"
                  :max="max"
                />
              </s-row>`,
@@ -30,6 +31,15 @@ export const configurable = () => ({
     },
     isLocaleString: {
       default: boolean('Is Locale String', true)
+    },
+    delimiters: {
+      default: object(
+        'Delimiters',
+        {
+          thousand: '.',
+          decimal: ','
+        }
+      )
     }
   }
 })

From 606a50f238c282507b3fc9e90fdba12d70e7eec8 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Sun, 23 May 2021 18:45:25 +0300
Subject: [PATCH 5/9] Refactored due to PR comments.

---
 src/components/Input/SFloatInput.vue | 84 ++++++++++++++++++----------
 src/stories/SFloatInput.stories.ts   | 10 +---
 2 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index 93ec6dd0..00d3f993 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -1,7 +1,7 @@
 <template>
   <s-input
     :placeholder="placeholder"
-    :value="value"
+    :value="formatted"
     v-bind="$attrs"
     v-on="{
       ...$listeners,
@@ -18,6 +18,11 @@ import SInput from './SInput.vue'
 import { Float } from '../../directives'
 
 const DEFAULT_VALUE = ''
+const DEFAULT_DECIMAL_DELIMITER = '.'
+const DEFAULT_DELIMITERS = {
+  thousand: ',',
+  decimal: DEFAULT_DECIMAL_DELIMITER
+}
 
 const isNumberLikeValue = (value: any): boolean => {
   return Number.isFinite(Number(value))
@@ -36,19 +41,29 @@ const decimalsValidator = x => x === undefined || x >= 0
 export default class SFloatInput extends Vue {
   @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string
   @Prop({ type: String, default: '0.0' }) readonly placeholder!: string
-  @Prop({ type: Boolean, default: false }) readonly isLocaleString?: boolean
   @Prop({ type: Object, default: () => {} }) readonly delimiters?: object
   @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
   get delimitersConfig (): any {
-    return this.isLocaleString && this.delimiters ? this.delimiters : { thousand: ',', decimal: '.' }
+    return this.delimiters || DEFAULT_DELIMITERS
+  }
+
+  get formatted (): string {
+    return this.delimiters ? this.toLocaleString() : this.value
   }
 
   handleInput (value: string): void {
+    if (this.delimiters) {
+      // Cleanup value's format
+      value = value.replace(new RegExp('\\' + this.delimitersConfig.thousand, 'g'), '')
+      if (this.delimitersConfig.decimal !== DEFAULT_DECIMAL_DELIMITER) {
+        value = value.replace(this.delimitersConfig.decimal, DEFAULT_DECIMAL_DELIMITER)
+      }
+    }
     const newValue = [
       (v) => this.formatNumberField(v, this.decimals),
-      (v) => isNumberLikeValue(this.formatToNumber(v)) ? v : DEFAULT_VALUE,
+      (v) => isNumberLikeValue(v) ? v : DEFAULT_VALUE,
       (v) => this.checkValueForExtremum(v)
     ].reduce((buffer, rule) => rule(buffer), value)
 
@@ -71,22 +86,17 @@ export default class SFloatInput extends Vue {
     this.$emit('input', value)
   }
 
-  private formatToNumber (value: string) {
-    if (!this.isLocaleString) return value
-    return value.replace(new RegExp('\\' + this.delimitersConfig.thousand, 'g'), '').replace(/,/g, '.')
-  }
-
   private trimNeedlessSymbols (value: string): string {
     // Trim zeros in the beginning
-    if (value.indexOf('0') === 0 && value.indexOf(this.delimitersConfig.decimal) !== 1) {
+    if (value.indexOf('0') === 0 && value.indexOf(DEFAULT_DECIMAL_DELIMITER) !== 1) {
       value = value.replace(/^0+/, '')
     }
     // add leading zero before floating point
-    if (value.indexOf(this.delimitersConfig.decimal) === 0) {
+    if (value.indexOf(DEFAULT_DECIMAL_DELIMITER) === 0) {
       value = '0' + value
     }
     // Trim dot in the end
-    if (value.indexOf(this.delimitersConfig.decimal) === value.length - 1) {
+    if (value.indexOf(DEFAULT_DECIMAL_DELIMITER) === value.length - 1) {
       value = value.slice(0, -1)
     }
 
@@ -96,8 +106,8 @@ export default class SFloatInput extends Vue {
   private formatNumberField (value: string, decimals: number): string {
     if (!['string', 'number'].includes(typeof value)) return value
 
-    let formatted = String(value).replace(new RegExp('[^\\d' + this.delimitersConfig.decimal + ']', 'g'), '')
-    const decimalDelimiterIndex = formatted.indexOf(this.delimitersConfig.decimal)
+    let formatted = String(value).replace(new RegExp('[^\\d' + DEFAULT_DECIMAL_DELIMITER + ']', 'g'), '')
+    const decimalDelimiterIndex = formatted.indexOf(DEFAULT_DECIMAL_DELIMITER)
 
     // Add prefix zero if needed
     if (decimalDelimiterIndex === 0) {
@@ -105,11 +115,8 @@ export default class SFloatInput extends Vue {
     }
 
     // Avoid several decimal delimiters
-    if ((value.match(new RegExp(this.delimitersConfig.decimal, 'g')) || []).length > 1) {
-      formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(this.delimitersConfig.decimal, '')
-    }
-    if (this.isLocaleString) {
-      formatted = this.formatToLocaleString(formatted)
+    if ((value.match(new RegExp(DEFAULT_DECIMAL_DELIMITER, 'g')) || []).length > 1) {
+      formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(DEFAULT_DECIMAL_DELIMITER, '')
     }
 
     const lengthLimit = this.valueMaxLength(formatted, decimals)
@@ -120,35 +127,50 @@ export default class SFloatInput extends Vue {
     return formatted
   }
 
-  private formatToLocaleString (formatted: string): string {
-    const splittedValue = formatted.replace(this.delimitersConfig.thousand, '').split(this.delimitersConfig.decimal)
+  private toLocaleString (): string {
+    const hasDecimalDelimiter = this.value.indexOf(DEFAULT_DECIMAL_DELIMITER) !== -1
+    let [integer, decimal] = this.value.split(DEFAULT_DECIMAL_DELIMITER)
 
-    if (splittedValue[0].length > 3) {
-      const reversedValue = splittedValue[0].split('').reverse()
-      splittedValue[0] = reversedValue.reduce((prev, current, index) => {
+    if (integer.length > 3) {
+      const integerReversed = integer.split('').reverse()
+      const lastIndex = integerReversed.length - 1
+      integer = integerReversed.reduce((prev, current, index) => {
         prev += current
-        if (++index % 3 === 0 && index !== reversedValue.length) {
+        if (++index % 3 === 0 && index !== integerReversed.length) {
+          // Avoid thousands' delimiter for negative numbers
+          if (index === lastIndex && integerReversed[lastIndex] === '-') {
+            return prev
+          }
           prev += this.delimitersConfig.thousand
         }
         return prev
       }).split('').reverse().join('')
     }
 
-    return splittedValue.join(this.delimitersConfig.decimal)
+    let localeString = integer
+
+    if (hasDecimalDelimiter) {
+      localeString += this.delimitersConfig.decimal
+    }
+
+    if (decimal) {
+      localeString += decimal
+    }
+
+    return localeString
   }
 
   private valueMaxLength (value: string, decimals: number) {
     if (value.length === 0 || decimals === undefined) return undefined
 
-    const fpIndex = value.indexOf(this.delimitersConfig.decimal)
+    const fpIndex = value.indexOf(DEFAULT_DECIMAL_DELIMITER)
 
-    return fpIndex !== -1 ? fpIndex + 1 + decimals + (value.match(new RegExp('\\' + this.delimitersConfig.thousand, 'g')) || []).length : undefined
+    return fpIndex !== -1 ? fpIndex + 1 + decimals : undefined
   }
 
   private checkValueForExtremum (value: string): string {
-    const cleanValue = this.isLocaleString ? this.formatToNumber(value) : value
-    if (!cleanValue) return cleanValue
-    if (this.max && (+cleanValue > +this.max)) return this.isLocaleString ? this.formatToLocaleString(String(this.max)) : String(this.max)
+    if (!value) return value
+    if (this.max && (+value > +this.max)) return String(this.max)
 
     return value
   }
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index 19c2dd8b..2d85b634 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -1,4 +1,4 @@
-import { boolean, number, text, object, withKnobs } from '@storybook/addon-knobs'
+import { number, text, object, withKnobs } from '@storybook/addon-knobs'
 
 import { SFloatInput, SRow } from '../components'
 
@@ -14,7 +14,6 @@ export const configurable = () => ({
                <s-float-input
                  v-model="model"
                  :decimals="decimals"
-                 :isLocaleString="isLocaleString"
                  :delimiters="delimiters"
                  :max="max"
                />
@@ -29,15 +28,12 @@ export const configurable = () => ({
     max: {
       default: text('Max', '90000000')
     },
-    isLocaleString: {
-      default: boolean('Is Locale String', true)
-    },
     delimiters: {
       default: object(
         'Delimiters',
         {
-          thousand: '.',
-          decimal: ','
+          thousand: ',',
+          decimal: '.'
         }
       )
     }

From a18aa6692e0ffbfdc67d623d09a4c6528e64c320 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Sun, 23 May 2021 19:21:27 +0300
Subject: [PATCH 6/9] Updated UI Lib version.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d0b74706..6e8bcc79 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

From d0f4b27d002230d15ec573c0b17d8b6ba830d836 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Mon, 24 May 2021 00:48:20 +0300
Subject: [PATCH 7/9] Updated SFloatInput placeholder value.

---
 src/components/Input/SFloatInput.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index 00d3f993..c886b0d5 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -1,6 +1,6 @@
 <template>
   <s-input
-    :placeholder="placeholder"
+    :placeholder="placeholderValue"
     :value="formatted"
     v-bind="$attrs"
     v-on="{
@@ -40,11 +40,15 @@ const decimalsValidator = x => x === undefined || x >= 0
 })
 export default class SFloatInput extends Vue {
   @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string
-  @Prop({ type: String, default: '0.0' }) readonly placeholder!: string
+  @Prop({ type: String }) readonly placeholder!: string
   @Prop({ type: Object, default: () => {} }) readonly delimiters?: object
   @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
+  get placeholderValue (): string {
+    return this.placeholder || '0'.concat(this.delimitersConfig.decimal, '0')
+  }
+
   get delimitersConfig (): any {
     return this.delimiters || DEFAULT_DELIMITERS
   }

From 75cbd14dab1e63ac037e873108afdddc1f630d88 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Mon, 24 May 2021 12:50:10 +0300
Subject: [PATCH 8/9] Updated due to PR comments.

---
 src/components/Input/SFloatInput.vue | 23 ++++++++++-------------
 src/stories/SFloatInput.stories.ts   |  6 +++++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index c886b0d5..5667791a 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -41,28 +41,25 @@ const decimalsValidator = x => x === undefined || x >= 0
 export default class SFloatInput extends Vue {
   @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string
   @Prop({ type: String }) readonly placeholder!: string
-  @Prop({ type: Object, default: () => {} }) readonly delimiters?: object
   @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number
+  @Prop({ type: Boolean, default: false }) readonly hasLocaleString?: boolean
+  @Prop({ type: Object, default: () => DEFAULT_DELIMITERS }) readonly delimiters?: any
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
   get placeholderValue (): string {
-    return this.placeholder || '0'.concat(this.delimitersConfig.decimal, '0')
-  }
-
-  get delimitersConfig (): any {
-    return this.delimiters || DEFAULT_DELIMITERS
+    return this.placeholder || '0'.concat(this.delimiters.decimal, '0')
   }
 
   get formatted (): string {
-    return this.delimiters ? this.toLocaleString() : this.value
+    return this.hasLocaleString ? this.toLocaleString() : this.value
   }
 
   handleInput (value: string): void {
-    if (this.delimiters) {
+    if (this.hasLocaleString) {
       // Cleanup value's format
-      value = value.replace(new RegExp('\\' + this.delimitersConfig.thousand, 'g'), '')
-      if (this.delimitersConfig.decimal !== DEFAULT_DECIMAL_DELIMITER) {
-        value = value.replace(this.delimitersConfig.decimal, DEFAULT_DECIMAL_DELIMITER)
+      value = value.replace(new RegExp('\\' + this.delimiters.thousand, 'g'), '')
+      if (this.delimiters.decimal !== DEFAULT_DECIMAL_DELIMITER) {
+        value = value.replace(this.delimiters.decimal, DEFAULT_DECIMAL_DELIMITER)
       }
     }
     const newValue = [
@@ -145,7 +142,7 @@ export default class SFloatInput extends Vue {
           if (index === lastIndex && integerReversed[lastIndex] === '-') {
             return prev
           }
-          prev += this.delimitersConfig.thousand
+          prev += this.delimiters.thousand
         }
         return prev
       }).split('').reverse().join('')
@@ -154,7 +151,7 @@ export default class SFloatInput extends Vue {
     let localeString = integer
 
     if (hasDecimalDelimiter) {
-      localeString += this.delimitersConfig.decimal
+      localeString += this.delimiters.decimal
     }
 
     if (decimal) {
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index 2d85b634..7c0234d8 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -1,4 +1,4 @@
-import { number, text, object, withKnobs } from '@storybook/addon-knobs'
+import { number, text, boolean, object, withKnobs } from '@storybook/addon-knobs'
 
 import { SFloatInput, SRow } from '../components'
 
@@ -14,6 +14,7 @@ export const configurable = () => ({
                <s-float-input
                  v-model="model"
                  :decimals="decimals"
+                 :hasLocaleString="hasLocaleString"
                  :delimiters="delimiters"
                  :max="max"
                />
@@ -28,6 +29,9 @@ export const configurable = () => ({
     max: {
       default: text('Max', '90000000')
     },
+    hasLocaleString: {
+      default: boolean('Has Locale String', false)
+    },
     delimiters: {
       default: object(
         'Delimiters',

From 6861560b68c1b7cd49bba0e9b95b69c10728e0de Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenko@soramitsu.co.jp>
Date: Mon, 24 May 2021 12:53:41 +0300
Subject: [PATCH 9/9] Updated UI Lib version.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6e8bcc79..bb68747a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"