From a01282a014abab02871c661af95d5078b58373e2 Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Wed, 24 Feb 2021 11:40:01 +0300
Subject: [PATCH 1/6] PSS-363: Add styles for select prefix slot (#126)

* add styles for select prefix slot

* increase version in package.json
---
 package.json                      |  2 +-
 src/components/Select/SSelect.vue |  1 +
 src/styles/select.scss            | 52 ++++++++++++++++++++++++-------
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 85235b9e..f21a6683 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 04fdcccc..885e4c63 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -18,6 +18,7 @@
       @visible-change="handleVisibleChange"
       @clear="handleClear"
     >
+      <slot name="prefix" slot="prefix"></slot>
       <slot name="empty" slot="empty"></slot>
       <slot></slot>
     </el-select>
diff --git a/src/styles/select.scss b/src/styles/select.scss
index cbf72ac3..f66d5f4d 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -45,6 +45,16 @@
       .el-select__caret {
         color: var(--s-color-base-content-tertiary);
       }
+      &--prefix {
+        .el-input__prefix {
+          bottom: 0;
+          left: 12px;
+          width: $s-size-mini;
+          height: $s-size-mini;
+          margin: auto;
+          overflow: hidden;
+        }
+      }
     }
   }
   &.s-input-type {
@@ -71,8 +81,19 @@
       }
     }
     .s-placeholder + .el-select {
-      .el-input__inner {
-        padding-top: 12px;
+      .el-input {
+        &--prefix {
+          .el-input__inner{
+            padding-left: 44px;
+          }
+
+          .el-input__prefix {
+            top: 12px;
+          }
+        }
+        .el-input__inner{
+          padding-top: 12px;
+        }
       }
       .el-input__validateIcon {
         padding-top: 11px;
@@ -127,18 +148,25 @@
   }
   &.s-select-type {
     .el-select {
-      .el-input__inner {
-        padding-left: 12px;
-        font-weight: bold;
-        &:hover {
-          border-color: var(--s-color-base-border-primary);
+      .el-input {
+        &.el-input--prefix {
+          .el-input__inner {
+            padding-left: 44px;
+          }
         }
-        &::placeholder {
-          color: var(--s-color-base-content-tertiary);
+        .el-input__inner {
+          padding-left: 12px;
           font-weight: bold;
-        }
-        &:focus {
-          border-color: var(--s-color-base-border-primary);
+          &:hover {
+            border-color: var(--s-color-base-border-primary);
+          }
+          &::placeholder {
+            color: var(--s-color-base-content-tertiary);
+            font-weight: bold;
+          }
+          &:focus {
+            border-color: var(--s-color-base-border-primary);
+          }
         }
       }
       .el-select__caret {

From 584e838611a5e490c75ac181602f756c65a20ef9 Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Thu, 25 Feb 2021 09:10:06 +0300
Subject: [PATCH 2/6] Fix/remove input inner model (#129)

* removed model from SInput

* up package version

* fix paste input handler

* add change emitter on file change
---
 package.json                    |  2 +-
 src/components/Input/SInput.vue | 27 ++++++++++-----------------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index f21a6683..ff0bbeee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 2ecac0be..d6f53b46 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,12 +3,12 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="model && !isMediumInput" class="s-placeholder">{{ placeholder }}</span>
+    <span v-if="value && !isMediumInput" class="s-placeholder">{{ placeholder }}</span>
     <el-input
       ref="el-input"
+      :value="value"
       :type="computedType"
       :placeholder="placeholder"
-      v-model="model"
       :disabled="disabled"
       :show-password="showPassword && isTextInput"
       :readonly="readonly"
@@ -27,9 +27,9 @@
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
-      @paste="handlePaste"
       @blur="handleBlur"
       @focus="handleFocus"
+      @paste.native="handlePaste"
     />
     <template v-if="type === InputType.TEXT_FILE">
       <i class="s-icon-file-upload"></i>
@@ -138,7 +138,6 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
 
   focused = false
   autofill = false
-  model = this.value
 
   mounted (): void {
     this.$el.addEventListener('animationstart', this.changeAutofillValue)
@@ -152,17 +151,6 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
     this.autofill = e.animationName === 'onAutoFillStart'
   }
 
-  @Watch('value')
-  private handlePropChange (value: string | number): void {
-    this.model = value
-  }
-
-  @Watch('model')
-  private handleValueChange (value: string | number): void {
-    this.$emit('input', value)
-    this.$emit('change', value)
-  }
-
   get isTextInput (): boolean {
     return this.type === InputType.TEXT
   }
@@ -223,7 +211,10 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
     this.$emit('change', value)
   }
 
-  handlePaste (value: string | number): void {
+  handlePaste (event: ClipboardEvent): void {
+    if (!event || !event.clipboardData) return
+
+    const value = event.clipboardData.getData('text')
     this.$emit('paste', value)
   }
 
@@ -254,7 +245,9 @@ export default class SInput extends Mixins(BorderRadiusMixin) {
     const file = input.files[0]
     const fr = new FileReader()
     fr.onload = (event: ProgressEvent<FileReader>) => {
-      this.model = ((event.target || {}).result as string)
+      const result = (event.target || {}).result as string
+      this.handleInput(result)
+      this.handleChange(result)
     }
     fr.readAsText(file)
   }

From 9ef4d3c6f2ae4813c791bd8b22b6d6bc3fe4f72f Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Thu, 25 Feb 2021 12:42:46 +0300
Subject: [PATCH 3/6] Add input inner offset for s-input-type (#128)

* add input inner offset for s-input-type

* add option padding

* up library version to 0.7.5

* fixes after review

* use variables in offsets

* remove test code from story
---
 package.json                      |  2 +-
 src/components/Select/SOption.vue |  2 +-
 src/styles/index.scss             |  1 +
 src/styles/option.scss            |  4 ++++
 src/styles/select.scss            | 22 ++++++++++++++++------
 src/styles/variables.scss         |  5 +++++
 6 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/styles/option.scss

diff --git a/package.json b/package.json
index ff0bbeee..e89f36d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Select/SOption.vue b/src/components/Select/SOption.vue
index 602733fe..372a6719 100644
--- a/src/components/Select/SOption.vue
+++ b/src/components/Select/SOption.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-option :value="value" :label="label" :disabled="disabled">
+  <el-option :value="value" :label="label" :disabled="disabled" class="s-option">
     <slot></slot>
   </el-option>
 </template>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4eef760e..93009ec5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,6 +16,7 @@
 @import "./json-input";
 @import "./layout";
 @import "./menu";
+@import "./option";
 @import "./pagination";
 @import "./radio";
 @import "./scroll-sections";
diff --git a/src/styles/option.scss b/src/styles/option.scss
new file mode 100644
index 00000000..9b1ba403
--- /dev/null
+++ b/src/styles/option.scss
@@ -0,0 +1,4 @@
+.s-option {
+  padding-left: $s-padding-input;
+  padding-right: $s-padding-input;
+}
\ No newline at end of file
diff --git a/src/styles/select.scss b/src/styles/select.scss
index f66d5f4d..bc9cdce0 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -15,6 +15,10 @@
   }
 }
 
+$select-prefix-margin-right: 8px;
+$select-prefix-width: $s-size-mini;
+$select-prefix-height: $s-size-mini;
+
 .s-select {
   font-family: $s-font-family-default;
   width: 100%;
@@ -48,9 +52,9 @@
       &--prefix {
         .el-input__prefix {
           bottom: 0;
-          left: 12px;
-          width: $s-size-mini;
-          height: $s-size-mini;
+          left: $s-padding-input;
+          width: $select-prefix-width;
+          height: $select-prefix-height;
           margin: auto;
           overflow: hidden;
         }
@@ -59,6 +63,13 @@
   }
   &.s-input-type {
     .el-select {
+      .el-input {
+        &--prefix {
+          .el-input__inner {
+            padding-left: $s-padding-input + $select-prefix-width + $select-prefix-margin-right;
+          }
+        }
+      }
       .el-input__inner {
         height: $s-size-big;
         padding: 0 15px;
@@ -84,7 +95,7 @@
       .el-input {
         &--prefix {
           .el-input__inner{
-            padding-left: 44px;
+            padding-left: $s-padding-input + $select-prefix-width + $select-prefix-margin-right;
           }
 
           .el-input__prefix {
@@ -151,11 +162,10 @@
       .el-input {
         &.el-input--prefix {
           .el-input__inner {
-            padding-left: 44px;
+            padding-left: $s-padding-input + $select-prefix-width + $select-prefix-margin-right;
           }
         }
         .el-input__inner {
-          padding-left: 12px;
           font-weight: bold;
           &:hover {
             border-color: var(--s-color-base-border-primary);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 6e867af2..30254a87 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -48,6 +48,9 @@ $s-size-medium: 40px !default;
 $s-size-small: 32px !default;
 $s-size-mini: 24px !default;
 
+// Padding
+$s-padding-input: 16px;
+
 $s-border-radius-base: 4px;
 $s-border-radius-mini: $s-border-radius-base !default;
 $s-border-radius-small: $s-border-radius-base * 2 !default;
@@ -153,6 +156,8 @@ $--breakpoints-spec: (
   --s-size-small: #{$s-size-small};
   --s-size-medium: #{$s-size-medium};
   --s-size-big: #{$s-size-big};
+  // Padding
+  --s-padding-input: #{$s-padding-input};
   // Border Radius
   --s-border-radius-mini: #{$s-border-radius-mini};
   --s-border-radius-small: #{$s-border-radius-small};

From 2b8c92d5961cac256d64c37c72597b3197c2829e Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Thu, 25 Feb 2021 19:36:57 +0000
Subject: [PATCH 4/6] Fix expaneded table row style

---
 src/styles/table.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/table.scss b/src/styles/table.scss
index 576a2079..dc68567b 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -116,3 +116,7 @@
     transform: rotate(180deg);
   }
 }
+.el-table__expanded-cell[class*=cell] {
+  padding: 8px 16px;
+  background: var(--s-color-base-background);
+}

From 6ff9b867ce15582ba050cf0326a6a05b4b2e0145 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Thu, 25 Feb 2021 19:39:05 +0000
Subject: [PATCH 5/6] Fix line-height

---
 src/styles/table.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/table.scss b/src/styles/table.scss
index dc68567b..9c85d481 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -118,5 +118,6 @@
 }
 .el-table__expanded-cell[class*=cell] {
   padding: 8px 16px;
+  line-height: 22.4px;
   background: var(--s-color-base-background);
 }

From eb6d682307e2f3379cc118d524c90ee6542f3594 Mon Sep 17 00:00:00 2001
From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com>
Date: Fri, 26 Feb 2021 11:06:50 +0300
Subject: [PATCH 6/6] PSS-364: add SFloatInput component (#133)

* add SFloatInput component

* improve isNumberLikeValue check

* move FloatInput story to Input space
---
 package.json                         |   2 +-
 src/components/Input/SFloatInput.vue | 111 +++++++++++++++++++++++++++
 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, 149 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..88b8cc1e
--- /dev/null
+++ b/src/components/Input/SFloatInput.vue
@@ -0,0 +1,111 @@
+<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 => {
+  return Number.isFinite(Number(value))
+}
+
+@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..f091cfdb
--- /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/Input/Float',
+  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',