From 01c389bc81692ca0cad2c6eec2fdc76712480239 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 25 Feb 2021 16:13:35 +0300
Subject: [PATCH 1/3] add SFloatInput component

---
 package.json                         |   2 +-
 src/components/Input/SFloatInput.vue | 112 +++++++++++++++++++++++++++
 src/components/Input/SInput.vue      |   2 +-
 src/components/Input/index.ts        |   4 +-
 src/components/index.ts              |   3 +-
 src/index.ts                         |   3 +
 src/stories/SFloatInput.stories.ts   |  27 +++++++
 src/types/components.ts              |   1 +
 8 files changed, 150 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Input/SFloatInput.vue
 create mode 100644 src/stories/SFloatInput.stories.ts

diff --git a/package.json b/package.json
index e89f36d3..e35b80cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
new file mode 100644
index 00000000..8c76577d
--- /dev/null
+++ b/src/components/Input/SFloatInput.vue
@@ -0,0 +1,112 @@
+<template>
+  <s-input
+    v-float
+    :value="value"
+    :maxlength="maxlength"
+    v-bind="$attrs"
+    v-on="{
+      ...$listeners,
+      input: handleInput,
+      blur: onBlur
+    }"
+  />
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import SInput from './SInput.vue'
+import { Float } from '../../directives'
+
+const DEFAULT_VALUE = ''
+
+const isNumberLikeValue = (value: any): boolean => {
+  const numberValue = +value
+  return typeof numberValue === 'number' && !isNaN(numberValue)
+}
+
+@Component({
+  components: {
+    SInput
+  },
+  directives: {
+    float: Float
+  }
+})
+export default class SFloatInput extends Vue {
+  @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string
+  @Prop({
+    type: Number,
+    default: undefined,
+    validator: x => x === undefined || x >= 0
+  }) readonly decimals!: number
+
+  get maxlength (): any {
+    return this.valueMaxLength(this.value, this.decimals)
+  }
+
+  handleInput (value: string): void {
+    const formatted = this.formatNumberField(value, this.decimals)
+    const newValue = isNumberLikeValue(formatted) ? formatted : DEFAULT_VALUE
+
+    this.onInput(newValue)
+  }
+
+  onBlur (event: Event): void {
+    const preparedValue = +this.value === 0
+      ? DEFAULT_VALUE
+      : this.trimNeedlessSymbols(this.value)
+
+    this.onInput(preparedValue)
+
+    this.$emit('blur', event)
+  }
+
+  onInput (value: string): void {
+    this.$emit('input', value)
+  }
+
+  private trimNeedlessSymbols = (value: string): string => {
+    // Trim zeros in the beginning
+    if (value.indexOf('0') === 0 && value.indexOf('.') !== 1) {
+      value = value.replace(/^0+/, '')
+    }
+    // add leading zero before floating point
+    if (value.indexOf('.') === 0) {
+      value = '0' + value
+    }
+    // Trim dot in the end
+    if (value.indexOf('.') === value.length - 1) {
+      value = value.slice(0, -1)
+    }
+
+    return value
+  }
+
+  private formatNumberField = (value: string, decimals: number): string => {
+    if (!['string', 'number'].includes(typeof value)) return value
+
+    let formatted = String(value)
+
+    if (formatted.indexOf('.') === 0) {
+      formatted = '0' + formatted
+    }
+
+    const lengthLimit = this.valueMaxLength(formatted, decimals)
+
+    if (lengthLimit && formatted.length > lengthLimit) {
+      formatted = formatted.slice(0, lengthLimit)
+    }
+
+    return formatted
+  }
+
+  private valueMaxLength = (value: string, decimals: number) => {
+    if (value.length === 0 || decimals === undefined) return undefined
+
+    const fpIndex = value.indexOf('.')
+
+    return fpIndex !== -1 ? fpIndex + 1 + decimals : undefined
+  }
+}
+</script>
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index d6f53b46..91d89784 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject } from 'vue-property-decorator'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index e1b9b29e..392672fa 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,5 +1,7 @@
 import SInput from './SInput.vue'
+import SFloatInput from './SFloatInput.vue'
 import SJsonInput from './SJsonInput.vue'
+
 import { Autocomplete, InputType, InputSize } from './consts'
 
-export { SInput, SJsonInput, Autocomplete, InputType, InputSize }
+export { SInput, SFloatInput, SJsonInput, Autocomplete, InputType, InputSize }
diff --git a/src/components/index.ts b/src/components/index.ts
index 6e2a173a..5f53bb5a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -19,7 +19,7 @@ import { SFooter } from './Layout/Footer'
 import { SForm, SFormItem } from './Form'
 import { SHeader } from './Layout/Header'
 import { SIcon } from './Icon'
-import { SInput, SJsonInput } from './Input'
+import { SInput, SFloatInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
@@ -57,6 +57,7 @@ export {
   SHeader,
   SIcon,
   SInput,
+  SFloatInput,
   SJsonInput,
   SMain,
   SMenu,
diff --git a/src/index.ts b/src/index.ts
index 86d79d9d..425c8e9b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,6 +24,7 @@ import {
   SHeader,
   SIcon,
   SInput,
+  SFloatInput,
   SJsonInput,
   SMain,
   SMenu,
@@ -78,6 +79,7 @@ const components = [
   { component: SHeader, name: Components.SHeader },
   { component: SIcon, name: Components.SIcon },
   { component: SInput, name: Components.SInput },
+  { component: SFloatInput, name: Components.SFloatInput },
   { component: SJsonInput, name: Components.SJsonInput },
   { component: SMain, name: Components.SMain },
   { component: SMenu, name: Components.SMenu },
@@ -153,6 +155,7 @@ export {
   SHeader,
   SIcon,
   SInput,
+  SFloatInput,
   SJsonInput,
   SMain,
   SMenu,
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
new file mode 100644
index 00000000..6543db2e
--- /dev/null
+++ b/src/stories/SFloatInput.stories.ts
@@ -0,0 +1,27 @@
+import { number, withKnobs } from '@storybook/addon-knobs'
+
+import { SFloatInput, SRow } from '../components'
+
+export default {
+  component: SFloatInput,
+  title: 'Design System/Components/Float Input',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SFloatInput, SRow },
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-float-input
+                 v-model="model"
+                 :decimals="decimals"
+               />
+             </s-row>`,
+  data: () => ({
+    model: ''
+  }),
+  props: {
+    decimals: {
+      default: number('Decimals', 18)
+    }
+  }
+})
diff --git a/src/types/components.ts b/src/types/components.ts
index 2f3923f9..1b2d8d2e 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -22,6 +22,7 @@ export enum Components {
   SHeader = 'SHeader',
   SIcon = 'SIcon',
   SInput = 'SInput',
+  SFloatInput = 'SFloatInput',
   SJsonInput = 'SJsonInput',
   SMain = 'SMain',
   SMenu = 'SMenu',

From 4f1d7b7b5a4fc0567d78133aaab6ec9be4a3c525 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 25 Feb 2021 16:59:50 +0300
Subject: [PATCH 2/3] improve isNumberLikeValue check

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

diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index 8c76577d..88b8cc1e 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -21,8 +21,7 @@ import { Float } from '../../directives'
 const DEFAULT_VALUE = ''
 
 const isNumberLikeValue = (value: any): boolean => {
-  const numberValue = +value
-  return typeof numberValue === 'number' && !isNaN(numberValue)
+  return Number.isFinite(Number(value))
 }
 
 @Component({

From ca9d6210cce7f70c57d7f908c593590630bf5b76 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Fri, 26 Feb 2021 10:47:34 +0300
Subject: [PATCH 3/3] move FloatInput story to Input space

---
 src/stories/SFloatInput.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index 6543db2e..f091cfdb 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -4,7 +4,7 @@ import { SFloatInput, SRow } from '../components'
 
 export default {
   component: SFloatInput,
-  title: 'Design System/Components/Float Input',
+  title: 'Design System/Components/Input/Float',
   decorators: [withKnobs]
 }