From 4ab4bbbc0ef8141e202183a086d368d588c8f96d Mon Sep 17 00:00:00 2001 From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Date: Wed, 24 Mar 2021 15:59:06 +0300 Subject: [PATCH 1/4] Add max props to float input (#183) * add max props to float input * up version to 0.8.5 --- package.json | 2 +- src/components/Input/SFloatInput.vue | 30 ++++++++++++++++------------ src/stories/SFloatInput.stories.ts | 6 +++++- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index cf8ad7cc..4684a07e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.8.4", + "version": "0.8.5", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue index 5badf370..e15ac5c5 100644 --- a/src/components/Input/SFloatInput.vue +++ b/src/components/Input/SFloatInput.vue @@ -3,7 +3,6 @@ v-float :placeholder="placeholder" :value="value" - :maxlength="maxlength" v-bind="$attrs" v-on="{ ...$listeners, @@ -25,6 +24,8 @@ const isNumberLikeValue = (value: any): boolean => { return Number.isFinite(Number(value)) } +const decimalsValidator = x => x === undefined || x >= 0 + @Component({ components: { SInput @@ -35,20 +36,16 @@ const isNumberLikeValue = (value: any): boolean => { }) export default class SFloatInput extends Vue { @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: string - @Prop({ default: '0.0', type: String }) readonly placeholder!: 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) - } + @Prop({ type: String, default: '0.0' }) readonly placeholder!: string + @Prop({ type: Number, default: undefined, validator: decimalsValidator }) readonly decimals!: number + @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number handleInput (value: string): void { - const formatted = this.formatNumberField(value, this.decimals) - const newValue = isNumberLikeValue(formatted) ? formatted : DEFAULT_VALUE + const newValue = [ + (v) => this.formatNumberField(v, this.decimals), + (v) => isNumberLikeValue(v) ? v : DEFAULT_VALUE, + (v) => this.checkValueForExtremum(v) + ].reduce((buffer, rule) => rule(buffer), value) this.onInput(newValue) } @@ -111,5 +108,12 @@ export default class SFloatInput extends Vue { return fpIndex !== -1 ? fpIndex + 1 + decimals : undefined } + + private checkValueForExtremum (value: string): string { + if (!value) return value + if (this.max && (+value > +this.max)) return String(this.max) + + return value + } } diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts index f091cfdb..72454425 100644 --- a/src/stories/SFloatInput.stories.ts +++ b/src/stories/SFloatInput.stories.ts @@ -1,4 +1,4 @@ -import { number, withKnobs } from '@storybook/addon-knobs' +import { number, text, withKnobs } from '@storybook/addon-knobs' import { SFloatInput, SRow } from '../components' @@ -14,6 +14,7 @@ export const configurable = () => ({ `, data: () => ({ @@ -22,6 +23,9 @@ export const configurable = () => ({ props: { decimals: { default: number('Decimals', 18) + }, + max: { + default: text('Max', '10000') } } }) From c86dfe5406585acb5b43d27193f2844d310f13cf Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Thu, 1 Apr 2021 06:47:07 +0000 Subject: [PATCH 2/4] Make an area around checkbox in table inactive --- src/components/Table/STable.vue | 4 +++- src/components/Table/STableColumn.vue | 6 +++--- src/stories/Table/STable.stories.ts | 6 ++++++ src/styles/table.scss | 4 ++-- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue index 7edfd715..7e775d25 100644 --- a/src/components/Table/STable.vue +++ b/src/components/Table/STable.vue @@ -274,7 +274,9 @@ export default class STable extends Mixins(SizeMixin) { } handleRowClick (row: any, column: ElTableColumn, event: MouseEvent): void { - this.$emit('row-click', row, column, event) + if (column.type !== 'selection') { + this.$emit('row-click', row, column, event) + } } handleRowContextMenu (row: any, column: ElTableColumn, event: MouseEvent): void { diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue index f66436e2..4b801d4e 100644 --- a/src/components/Table/STableColumn.vue +++ b/src/components/Table/STableColumn.vue @@ -192,9 +192,9 @@ export default class STableColumn extends Vue { const size = (this.sTable || {}).size if (!this.width && this.type === 'selection' && size) { return !tableBorder ? ({ - [Size.SMALL]: '30', - [Size.MEDIUM]: '32', - [Size.BIG]: '36' + [Size.SMALL]: '46', + [Size.MEDIUM]: '48', + [Size.BIG]: '52' }[size]) : ({ [Size.SMALL]: '42', [Size.MEDIUM]: '44', diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts index 4209c7c8..b5169ddd 100644 --- a/src/stories/Table/STable.stories.ts +++ b/src/stories/Table/STable.stories.ts @@ -43,6 +43,7 @@ export const configurable = () => ({ :border="border" :show-header="showHeader" :highlight-current-row="highlightCurrentRow" + @row-click="alert('click')" > @@ -77,6 +78,11 @@ export const configurable = () => ({ highlightCurrentRow: { default: boolean('Highlight current row', false) } + }, + methods: { + alert (message: string) { + alert(message) + } } }) diff --git a/src/styles/table.scss b/src/styles/table.scss index 414eb157..e441199a 100644 --- a/src/styles/table.scss +++ b/src/styles/table.scss @@ -27,8 +27,8 @@ padding-left: 16px; padding-right: 16px; } -.el-table:not(.el-table--border) .el-table-column--selection > .cell { - padding-right: 0; +.el-table:not(.el-table--border) .el-table-column--selection + td > .cell { + padding-left: 0; } .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { From 5098aaf7f3b14877818d35f1b5974acdf478e198 Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Fri, 2 Apr 2021 06:41:13 +0000 Subject: [PATCH 3/4] Fix table row key property --- src/components/Table/STable.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue index 7edfd715..3afdd095 100644 --- a/src/components/Table/STable.vue +++ b/src/components/Table/STable.vue @@ -19,7 +19,7 @@ :header-row-style="headerRowStyle" :header-cell-class-name="headerCellClassName" :header-cell-style="headerCellStyle" - :row-key="rowRey" + :row-key="rowKey" :empty-text="emptyText" :default-expand-all="defaultExpandAll" :expand-row-keys="expandRowKeys" @@ -116,6 +116,10 @@ export default class STable extends Mixins(SizeMixin) { * `false` by default */ @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean + /** + * A key of the current row. Can be `string` or `number` + */ + @Prop({ type: [Function, String, Number] }) readonly rowKey!: ((row: any) => string | number) | string | number /** * A key of the current row. Can be `string` or `number` */ From a79e453f51f5b02f51b52a9305a79b9699fad7eb Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Fri, 2 Apr 2021 07:49:14 +0000 Subject: [PATCH 4/4] Update version and fix --- package.json | 2 +- src/components/Table/STable.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4684a07e..5ed95df7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.8.5", + "version": "0.8.6", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue index da7c4e45..b240df43 100644 --- a/src/components/Table/STable.vue +++ b/src/components/Table/STable.vue @@ -117,7 +117,7 @@ export default class STable extends Mixins(SizeMixin) { */ @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean /** - * A key of the current row. Can be `string` or `number` + * A key of the row. Can be 'Function(row)', `string` or `number` */ @Prop({ type: [Function, String, Number] }) readonly rowKey!: ((row: any) => string | number) | string | number /**