Add max props to float input

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/"

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
+  }
 }
 </script>

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 = () => ({
                <s-float-input
                  v-model="model"
                  :decimals="decimals"
+                 :max="max"
                />
              </s-row>`,
   data: () => ({
@@ -22,6 +23,9 @@ export const configurable = () => ({
   props: {
     decimals: {
       default: number('Decimals', 18)
+    },
+    max: {
+      default: text('Max', '10000')
     }
   }
 })