diff --git a/package.json b/package.json
index 7ebe581b..e639ba48 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@soramitsu/soramitsu-js-ui",
- "version": "0.5.4",
+ "version": "0.5.5",
"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 757b52e3..4aa83ac4 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,7 +3,7 @@
class="s-input"
:class="computedClasses"
>
- {{ placeholder }}
+ {{ placeholder }}
{
const cssClasses: Array = []
if (this.focused) {
@@ -169,9 +187,22 @@ export default class SInput extends Vue {
if (this.autofill) {
cssClasses.push('s-autofill')
}
+ if (this.size) {
+ cssClasses.push(this.sizeClass)
+ }
return cssClasses
}
+ get sizeClass (): string {
+ switch (this.size) {
+ case InputSize.MEDIUM:
+ return 's-size-medium'
+ case InputSize.BIG:
+ default:
+ return ''
+ }
+ }
+
get computedType (): string {
if (this.type === InputType.TEXT_FILE) {
return InputType.TEXT
diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index cafbcaeb..bb48a246 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -29,3 +29,8 @@ export enum InputType {
URL = 'url',
WEEK = 'week'
}
+
+export enum InputSize {
+ MEDIUM = 'medium',
+ BIG = 'big'
+}
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index ee397074..e1b9b29e 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,5 +1,5 @@
import SInput from './SInput.vue'
import SJsonInput from './SJsonInput.vue'
-import { Autocomplete, InputType } from './consts'
+import { Autocomplete, InputType, InputSize } from './consts'
-export { SInput, SJsonInput, Autocomplete, InputType }
+export { SInput, SJsonInput, Autocomplete, InputType, InputSize }
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 88cf7a08..182d55e8 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,7 +1,7 @@
import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
import { SInput, SRow, SCol } from '../components'
-import { InputType } from '../components/Input'
+import { InputType, InputSize } from '../components/Input'
export default {
component: SInput,
@@ -21,6 +21,9 @@ export const configurable = () => ({
:readonly="readonly"
:show-text-limit="showTextLimit"
:maxlength="maxlength"
+ :size="size"
+ :prefix="prefix"
+ :suffix="suffix"
/>`,
data: () => ({
input: ''
@@ -29,9 +32,18 @@ export const configurable = () => ({
type: {
default: select('Type', Object.values(InputType), InputType.TEXT)
},
+ size: {
+ default: select('Size', Object.values(InputSize), InputSize.BIG)
+ },
placeholder: {
default: text('Placeholder', 'Placeholder')
},
+ prefix: {
+ default: text('Prefix icon', 'el-icon-search')
+ },
+ suffix: {
+ default: text('Suffix icon', 'el-icon-search')
+ },
disabled: {
default: boolean('Disabled', false)
},
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 85ff393a..2e748fa6 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -55,6 +55,18 @@
border-color: var(--s-color-base-background-hover);
}
}
+ &.s-size-medium {
+ min-height: $s-size-medium;
+
+ .el-input,
+ .el-textarea {
+ height: 100%;
+ > input,
+ > textarea {
+ height: $s-size-medium;
+ }
+ }
+ }
&.s-focused {
.s-placeholder,
.el-input > input,