From 3e74c2cbe0f574c0f26076c54b9e91d18c9eee77 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Wed, 17 Feb 2021 16:02:43 +0000
Subject: [PATCH 01/20] Change type of divider in scroll sections

---
 src/components/ScrollSections/SScrollSectionItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 9f9f6b47..d3e5b4b6 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -3,7 +3,7 @@
     <span v-if="title" class="title">{{ title }}</span>
     <slot v-if="this.$slots.title && !title" name="title"></slot>
     <slot></slot>
-    <s-divider v-if="withDivider" style="margin: 20px 0 0 0;"></s-divider>
+    <s-divider v-if="withDivider" type="primary" style="margin: 20px 0 0 0;"></s-divider>
   </section>
 </template>
 

From 75b800f529e29dc2a5522474e1ff464cc67a7544 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Thu, 18 Feb 2021 19:59:18 +0000
Subject: [PATCH 02/20] Change card default border radius

---
 src/components/Card/SCard.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 81810fbc..ccc9ed4b 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -16,6 +16,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { CardShadow } from './consts'
+import { BorderRadius } from '@/types'
 
 @Component
 export default class SCard extends Mixins(BorderRadiusMixin) {
@@ -42,6 +43,8 @@ export default class SCard extends Mixins(BorderRadiusMixin) {
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
+  @Prop({ default: BorderRadius.MEDIUM }) borderRadius!: string
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.isStandardBorderRadius) {

From 3051fc8be736c50da96e166e2befe32e809a30a6 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 19 Feb 2021 06:54:25 +0000
Subject: [PATCH 03/20] Dialog mixin

---
 src/mixins/DialogMixin.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/mixins/DialogMixin.ts

diff --git a/src/mixins/DialogMixin.ts b/src/mixins/DialogMixin.ts
new file mode 100644
index 00000000..3e7318e5
--- /dev/null
+++ b/src/mixins/DialogMixin.ts
@@ -0,0 +1,23 @@
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+@Component
+export default class DialogMixin extends Vue {
+  /**
+   * Dialog visibility
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false, required: true }) readonly visible!: boolean
+
+  isVisible = this.visible
+
+  @Watch('visible')
+  public handleVisibleChange (value: boolean): void {
+    this.isVisible = value
+  }
+
+  @Watch('isVisible')
+  public handleIsVisibleChange (value: boolean): void {
+    this.$emit('update:visible', value)
+  }
+}

From a675c90268e71d668f2580c715664b4baac8959d Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 19 Feb 2021 07:01:05 +0000
Subject: [PATCH 04/20] export

---
 src/index.ts        | 4 +++-
 src/mixins/index.ts | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/mixins/index.ts

diff --git a/src/index.ts b/src/index.ts
index 86d79d9d..2e531e71 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -53,6 +53,7 @@ import { Directives } from './types/directives'
 import { modules, Modules } from './store'
 import { setTheme } from './utils'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
+import { DialogMixin } from './mixins'
 
 const components = [
   { component: SApp, name: Components.SApp },
@@ -174,6 +175,7 @@ export {
   STabs,
   STable,
   STableColumn,
-  STooltip
+  STooltip,
+  DialogMixin
 }
 export default SoramitsuElements
diff --git a/src/mixins/index.ts b/src/mixins/index.ts
new file mode 100644
index 00000000..c2839565
--- /dev/null
+++ b/src/mixins/index.ts
@@ -0,0 +1,9 @@
+import DialogMixin from './DialogMixin'
+import BorderRadiusMixin from './BorderRadiusMixin'
+import SizeMixin from './SizeMixin'
+
+export {
+  DialogMixin,
+  BorderRadiusMixin,
+  SizeMixin
+}

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 05/20] 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 06/20] 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 07/20] 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 b1505cb1444e3bd18b2c8ebb6fbda995d4937b15 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Thu, 25 Feb 2021 14:32:23 +0000
Subject: [PATCH 08/20] Fix table row paddings

---
 src/components/Table/STable.vue       |  4 +++-
 src/components/Table/STableColumn.vue | 25 ++++++++++++++++++++-----
 src/styles/table.scss                 |  8 ++++++++
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 1f6410a2..7edfd715 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Provide } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
@@ -353,5 +353,7 @@ export default class STable extends Mixins(SizeMixin) {
   sort (prop: string, order: SortDirection): void {
     this.table.sort(prop, order)
   }
+
+  @Provide('sTable') sTable = this
 }
 </script>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 1ca47e3a..4ef8e2e3 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -5,7 +5,7 @@
     :label="label"
     :column-key="columnKey"
     :prop="prop"
-    :width="width"
+    :width="computedWidth"
     :min-width="minWidth"
     :fixed="fixedPosition || false"
     :render-header="renderHeader"
@@ -18,7 +18,7 @@
     :show-overflow-tooltip="showOverflowTooltip"
     :align="align"
     :header-align="headerAlign"
-    :class-name="headerAlign"
+    :class-name="className"
     :label-class-name="labelClassName"
     :selectable="selectable"
     :reserve-selection="reserveSelection"
@@ -34,9 +34,11 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
 
-import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
+import { Size } from '@/types'
+
+import { SortDirection, ColumnAlignment } from './consts'
 
 @Component
 export default class STableColumn extends Vue {
@@ -143,7 +145,7 @@ export default class STableColumn extends Vue {
   /**
    * Class name of cells in the column
    */
-  @Prop({ default: '', type: String }) readonly className!: string
+  @Prop({ default: undefined, type: String || undefined }) readonly className!: string | undefined
   /**
    * Class name of the label of this column
    */
@@ -182,5 +184,18 @@ export default class STableColumn extends Vue {
    * TODO: comment it when it'll be implemented
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Inject({ default: '', from: 'sTable' }) sTable
+
+  get computedWidth () {
+    console.log(typeof this.sTable)
+    const tableBorder = (this.sTable || {}).border
+    const size = (this.sTable || {}).size
+    return !this.width && this.type === 'selection' && !tableBorder && size ? ({
+      [Size.SMALL]: '30px',
+      [Size.MEDIUM]: '32px',
+      [Size.BIG]: '36px'
+    }[size]) : this.width
+  }
 }
 </script>
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 576a2079..693bd66c 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -22,6 +22,14 @@
     }
   }
 }
+.el-table:not(.el-table--border) th > .cell,
+.el-table:not(.el-table--border) td > .cell {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.el-table:not(.el-table--border) .el-table-column--selection > .cell {
+  padding-right: 0;
+}
 .el-table--border th:first-child .cell,
 .el-table--border td:first-child .cell {
   padding-left: 13px;

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 09/20] 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 10/20] 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 f3df6bc33cfaa6dab1004f161d5083b7ff1f843c Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 06:02:18 +0000
Subject: [PATCH 11/20] Add size parameter to select

---
 src/components/Select/SSelect.vue     | 16 ++++++++++++++--
 src/stories/Select/SSelect.stories.ts |  6 +++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 885e4c63..73eefae6 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -7,6 +7,7 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :loading="loading"
+      :size="size"
       :multiple="multiple"
       :loading-text="loadingText"
       :clearable="clearable"
@@ -26,14 +27,17 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { ElFormItem } from 'element-ui/types/form-item'
 
+import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete } from '../Input'
 import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Mixins(BorderRadiusMixin) {
+export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -113,6 +117,9 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
 
   @Ref('select') select!: any
 
+  @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
+  @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
+
   model = this.value
   focused = false
 
@@ -157,6 +164,11 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if ((this.elForm || this.elFormItem || {}).size) {
+      cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
+    } else if (this.isStandardSize) {
+      cssClasses.push(`s-${this.size}`)
+    }
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index b901094f..55959c2c 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
-import { BorderRadius } from '../../types'
+import { Size, BorderRadius } from '../../types'
 import { InputTypes } from '../../components/Select'
 
 export default {
@@ -28,6 +28,7 @@ export const configurable = () => ({
                    :disabled="disabled"
                    :border-radius="borderRadius"
                    :loading="loading"
+                   :size="size"
                    :multiple="multiple"
                    :input-type="item.inputType"
                    :clearable="clearable"
@@ -63,6 +64,9 @@ export const configurable = () => ({
     loading: {
       default: boolean('Loading', false)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
     multiple: {
       default: boolean('Multiple', false)
     },

From 66496f8408ac6f98e251ace0ac4dbd51fac5a7c8 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 07:00:17 +0000
Subject: [PATCH 12/20] Add size parameter to date picker

---
 src/components/DatePicker/SDatePicker.vue | 16 ++++++++++++++--
 src/stories/SDatePicker.stories.ts        |  6 +++++-
 src/styles/datepicker.scss                | 22 +++++++++++++++++++---
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index deb95519..b000da54 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -8,6 +8,7 @@
       :unlink-panels="unlinkPanels"
       :readonly="readonly"
       :disabled="disabled"
+      :size="size"
       :editable="editable"
       :clearable="willHaveClearButton"
       :placeholder="placeholder"
@@ -35,15 +36,18 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { ElFormItem } from 'element-ui/types/form-item'
 
 // TODO: ask do we need size prop for the component?
 // Prev comment => TODO: ask design team
+import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 @Component
-export default class SDatePicker extends Mixins(BorderRadiusMixin) {
+export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.
    * Can be date object / array with date objects for date range picker
@@ -172,6 +176,9 @@ export default class SDatePicker extends Mixins(BorderRadiusMixin) {
 
   @Ref('picker') picker!: any
 
+  @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
+  @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
+
   model = this.value
   focused = false
 
@@ -219,6 +226,11 @@ export default class SDatePicker extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = ['s-date-picker']
+    if ((this.elForm || this.elFormItem || {}).size) {
+      cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
+    } else if (this.isStandardSize) {
+      cssClasses.push(`s-${this.size}`)
+    }
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
diff --git a/src/stories/SDatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
index 59fb117a..5926fca6 100644
--- a/src/stories/SDatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SDatePicker, SRow, SCol } from '../components'
-import { BorderRadius } from '../types'
+import { Size, BorderRadius } from '../types'
 import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePicker'
 
 export default {
@@ -20,6 +20,7 @@ export const configurable = () => ({
                  :type="type"
                  :readonly="readonly"
                  :disabled="disabled"
+                 :size="size"
                  :clearable="clearable"
                  :align="align"
                  :border-radius="borderRadius"
@@ -58,6 +59,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
     clearable: {
       default: boolean('Clearable', true)
     },
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index ccaca164..4047ed1b 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -19,6 +19,24 @@
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
+  &.s-big .el-input__inner {
+    height: $s-size-big;
+    .el-range-separator {
+      line-height: $s-size-big - 8px;
+    }
+  }
+  &.s-medium .el-input__inner {
+    height: $s-size-medium;
+    .el-range-separator {
+      line-height: $s-size-medium - 8px;
+    }
+  }
+  &.s-small .el-input__inner {
+    height: $s-size-small;
+    .el-range-separator {
+      line-height: $s-size-small - 8px;
+    }
+  }
   .el-date-editor {
     width: 100%;
     &.el-input,
@@ -52,9 +70,7 @@
     }
   }
   &.s-input-type {
-    min-height: $s-size-big;
     .el-input__inner {
-      height: $s-size-big;
       padding: 0 15px;
       border: 1px solid var(--s-color-base-background);
       background-color: var(--s-color-base-background);
@@ -134,7 +150,7 @@
     .s-icon-chevron-bottom {
       position: absolute;
       right: 10px;
-      top: 30%;
+      top: calc(50% - 8px);
       pointer-events: none;
       color: var(--s-color-base-content-tertiary);
       transition: transform 0.3s;

From c55862af60889a387f5b73d64a8312d14e74abd4 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 07:20:08 +0000
Subject: [PATCH 13/20] Small fix

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

diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 4ef8e2e3..53d6d4a2 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -145,7 +145,7 @@ export default class STableColumn extends Vue {
   /**
    * Class name of cells in the column
    */
-  @Prop({ default: undefined, type: String || undefined }) readonly className!: string | undefined
+  @Prop({ type: String }) readonly className!: string
   /**
    * Class name of the label of this column
    */
@@ -188,7 +188,6 @@ export default class STableColumn extends Vue {
   @Inject({ default: '', from: 'sTable' }) sTable
 
   get computedWidth () {
-    console.log(typeof this.sTable)
     const tableBorder = (this.sTable || {}).border
     const size = (this.sTable || {}).size
     return !this.width && this.type === 'selection' && !tableBorder && size ? ({

From 75e8b6fa555538de3d8f442316b21aebfd842201 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 07:37:37 +0000
Subject: [PATCH 14/20] Change mixin name DialogMixin to SDialogMixin

---
 src/index.ts                                   | 4 ++--
 src/mixins/{DialogMixin.ts => SDialogMixin.ts} | 2 +-
 src/mixins/index.ts                            | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename src/mixins/{DialogMixin.ts => SDialogMixin.ts} (91%)

diff --git a/src/index.ts b/src/index.ts
index 2e531e71..15ad4cc8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -53,7 +53,7 @@ import { Directives } from './types/directives'
 import { modules, Modules } from './store'
 import { setTheme } from './utils'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
-import { DialogMixin } from './mixins'
+import { SDialogMixin } from './mixins'
 
 const components = [
   { component: SApp, name: Components.SApp },
@@ -176,6 +176,6 @@ export {
   STable,
   STableColumn,
   STooltip,
-  DialogMixin
+  SDialogMixin
 }
 export default SoramitsuElements
diff --git a/src/mixins/DialogMixin.ts b/src/mixins/SDialogMixin.ts
similarity index 91%
rename from src/mixins/DialogMixin.ts
rename to src/mixins/SDialogMixin.ts
index 3e7318e5..17782ba5 100644
--- a/src/mixins/DialogMixin.ts
+++ b/src/mixins/SDialogMixin.ts
@@ -1,7 +1,7 @@
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
 @Component
-export default class DialogMixin extends Vue {
+export default class SDialogMixin extends Vue {
   /**
    * Dialog visibility
    *
diff --git a/src/mixins/index.ts b/src/mixins/index.ts
index c2839565..a6a993ad 100644
--- a/src/mixins/index.ts
+++ b/src/mixins/index.ts
@@ -1,9 +1,9 @@
-import DialogMixin from './DialogMixin'
+import SDialogMixin from './SDialogMixin'
 import BorderRadiusMixin from './BorderRadiusMixin'
 import SizeMixin from './SizeMixin'
 
 export {
-  DialogMixin,
+  SDialogMixin,
   BorderRadiusMixin,
   SizeMixin
 }

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 15/20] 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',

From 45c99a24b488239ec5848cc16e18adeba964811a Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 08:15:28 +0000
Subject: [PATCH 16/20] Disable size for 'input' type of select and style fix

---
 src/components/Select/SSelect.vue | 12 +++++++-----
 src/styles/select.scss            |  9 +++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 73eefae6..65765d4e 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -7,7 +7,7 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :loading="loading"
-      :size="size"
+      :size="inputType === 'select' ? size : undefined"
       :multiple="multiple"
       :loading-text="loadingText"
       :clearable="clearable"
@@ -164,10 +164,12 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((this.elForm || this.elFormItem || {}).size) {
-      cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
-    } else if (this.isStandardSize) {
-      cssClasses.push(`s-${this.size}`)
+    if (this.inputType === 'select') {
+      if ((this.elForm || this.elFormItem || {}).size) {
+        cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
+      } else if (this.isStandardSize) {
+        cssClasses.push(`s-${this.size}`)
+      }
     }
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
diff --git a/src/styles/select.scss b/src/styles/select.scss
index bc9cdce0..e1e1db04 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -27,6 +27,15 @@ $select-prefix-height: $s-size-mini;
   @include select-border-radius("medium", var(--s-border-radius-medium));
   @include select-border-radius("small", var(--s-border-radius-small));
   @include select-border-radius("mini", var(--s-border-radius-mini));
+  &.s-big .el-input__inner {
+    height: $s-size-big;
+  }
+  &.s-medium .el-input__inner {
+    height: $s-size-medium;
+  }
+  &.s-small .el-input__inner {
+    height: $s-size-small;
+  }
   .el-select {
     width: 100%;
     i.el-icon-arrow-up {

From b55a680cd635fe49df918e00bcb25d2d07c7f0ec Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 08:18:20 +0000
Subject: [PATCH 17/20] Add scss variable

---
 src/styles/datepicker.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index 4047ed1b..b2cfe8e3 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -15,6 +15,8 @@
   }
 }
 
+$date-picker-padding: 8px;
+
 .s-date-picker {
   font-family: $s-font-family-default;
   width: 100%;
@@ -22,19 +24,19 @@
   &.s-big .el-input__inner {
     height: $s-size-big;
     .el-range-separator {
-      line-height: $s-size-big - 8px;
+      line-height: $s-size-big - $date-picker-padding;
     }
   }
   &.s-medium .el-input__inner {
     height: $s-size-medium;
     .el-range-separator {
-      line-height: $s-size-medium - 8px;
+      line-height: $s-size-medium - $date-picker-padding;
     }
   }
   &.s-small .el-input__inner {
     height: $s-size-small;
     .el-range-separator {
-      line-height: $s-size-small - 8px;
+      line-height: $s-size-small - $date-picker-padding;
     }
   }
   .el-date-editor {

From d0ee48c2da0da61391d464ea81743d8c08af3dd6 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 08:41:33 +0000
Subject: [PATCH 18/20] Fix pressing zone of table expand

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

diff --git a/src/styles/table.scss b/src/styles/table.scss
index 9c85d481..d28b0876 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -108,6 +108,11 @@
   border-color: var(--s-color-theme-accent);
 }
 .el-table__expand-icon {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
   > .el-icon.el-icon-arrow-right {
     font-family: $s-font-family-icons;
     @extend .s-icon-chevron-bottom;

From cb8cdf0f46cc49a4a11cbbf47d419bb34ff3395d Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 09:49:15 +0000
Subject: [PATCH 19/20] Fix border table selection width

---
 src/components/Table/STableColumn.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 53d6d4a2..f66436e2 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -68,13 +68,13 @@ export default class STableColumn extends Vue {
   /**
    * Column width in pixels. For instance, `width="80"`
    */
-  @Prop({ default: '', type: String }) readonly width!: string
+  @Prop({ type: String }) readonly width!: string
   /**
    * Column minimum width in pixels. Columns with `width` has a fixed width,
    * while columns with `min-width` has a width that is distributed in proportion.
    * For instance, `min-width="80"`
    */
-  @Prop({ default: '', type: String }) readonly minWidth!: string
+  @Prop({ type: String }) readonly minWidth!: string
   /**
    * Will column be fixed at `"left"` or `"right"` position.
    * If it's not defined, then it will be not fixed by default.
@@ -190,11 +190,18 @@ export default class STableColumn extends Vue {
   get computedWidth () {
     const tableBorder = (this.sTable || {}).border
     const size = (this.sTable || {}).size
-    return !this.width && this.type === 'selection' && !tableBorder && size ? ({
-      [Size.SMALL]: '30px',
-      [Size.MEDIUM]: '32px',
-      [Size.BIG]: '36px'
-    }[size]) : this.width
+    if (!this.width && this.type === 'selection' && size) {
+      return !tableBorder ? ({
+        [Size.SMALL]: '30',
+        [Size.MEDIUM]: '32',
+        [Size.BIG]: '36'
+      }[size]) : ({
+        [Size.SMALL]: '42',
+        [Size.MEDIUM]: '44',
+        [Size.BIG]: '48'
+      }[size])
+    }
+    return this.width
   }
 }
 </script>

From a17bae2c70c2e9f382123cd70a33bff78c4d94b8 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Fri, 26 Feb 2021 10:14:20 +0000
Subject: [PATCH 20/20] Change package version to 0.7.7

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

diff --git a/package.json b/package.json
index e35b80cd..08febb60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"