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,