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/2] 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/2] 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)
   }