PSS-364: add SFloatInput component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Input/SFloatInput.vue

@@ -0,0 +1,111 @@
+<template>
+  <s-input
+    v-float
+    :value="value"
+    :maxlength="maxlength"
+    v-bind="$attrs"
+    v-on="{
+      ...$listeners,
+      input: handleInput,
+      blur: onBlur
+    }"
+  />
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import SInput from './SInput.vue'
+import { Float } from '../../directives'
+
+const DEFAULT_VALUE = ''
+
+const isNumberLikeValue = (value: any): boolean => {
+  return Number.isFinite(Number(value))
+}
+
+@Component({
+  components: {
+    SInput
+  },
+  directives: {
+    float: Float
+  }
+})
+export default class SFloatInput extends Vue {
+  @Prop({ type: String, default: DEFAULT_VALUE }) readonly value!: 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)
+  }
+
+  handleInput (value: string): void {
+    const formatted = this.formatNumberField(value, this.decimals)
+    const newValue = isNumberLikeValue(formatted) ? formatted : DEFAULT_VALUE
+
+    this.onInput(newValue)
+  }
+
+  onBlur (event: Event): void {
+    const preparedValue = +this.value === 0
+      ? DEFAULT_VALUE
+      : this.trimNeedlessSymbols(this.value)
+
+    this.onInput(preparedValue)
+
+    this.$emit('blur', event)
+  }
+
+  onInput (value: string): void {
+    this.$emit('input', value)
+  }
+
+  private trimNeedlessSymbols = (value: string): string => {
+    // Trim zeros in the beginning
+    if (value.indexOf('0') === 0 && value.indexOf('.') !== 1) {
+      value = value.replace(/^0+/, '')
+    }
+    // add leading zero before floating point
+    if (value.indexOf('.') === 0) {
+      value = '0' + value
+    }
+    // Trim dot in the end
+    if (value.indexOf('.') === value.length - 1) {
+      value = value.slice(0, -1)
+    }
+
+    return value
+  }
+
+  private formatNumberField = (value: string, decimals: number): string => {
+    if (!['string', 'number'].includes(typeof value)) return value
+
+    let formatted = String(value)
+
+    if (formatted.indexOf('.') === 0) {
+      formatted = '0' + formatted
+    }
+
+    const lengthLimit = this.valueMaxLength(formatted, decimals)
+
+    if (lengthLimit && formatted.length > lengthLimit) {
+      formatted = formatted.slice(0, lengthLimit)
+    }
+
+    return formatted
+  }
+
+  private valueMaxLength = (value: string, decimals: number) => {
+    if (value.length === 0 || decimals === undefined) return undefined
+
+    const fpIndex = value.indexOf('.')
+
+    return fpIndex !== -1 ? fpIndex + 1 + decimals : undefined
+  }
+}
+</script>

src/components/Input/SInput.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject } from 'vue-property-decorator'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 

src/components/Input/index.ts

@@ -1,5 +1,7 @@
 import SInput from './SInput.vue'
+import SFloatInput from './SFloatInput.vue'
 import SJsonInput from './SJsonInput.vue'
+
 import { Autocomplete, InputType, InputSize } from './consts'
 
-export { SInput, SJsonInput, Autocomplete, InputType, InputSize }
+export { SInput, SFloatInput, SJsonInput, Autocomplete, InputType, InputSize }

src/components/index.ts

@@ -19,7 +19,7 @@ import { SFooter } from './Layout/Footer'
 import { SForm, SFormItem } from './Form'
 import { SHeader } from './Layout/Header'
 import { SIcon } from './Icon'
-import { SInput, SJsonInput } from './Input'
+import { SInput, SFloatInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
@@ -57,6 +57,7 @@ export {
   SHeader,
   SIcon,
   SInput,
+  SFloatInput,
   SJsonInput,
   SMain,
   SMenu,

src/index.ts

@@ -24,6 +24,7 @@ import {
   SHeader,
   SIcon,
   SInput,
+  SFloatInput,
   SJsonInput,
   SMain,
   SMenu,
@@ -78,6 +79,7 @@ const components = [
   { component: SHeader, name: Components.SHeader },
   { component: SIcon, name: Components.SIcon },
   { component: SInput, name: Components.SInput },
+  { component: SFloatInput, name: Components.SFloatInput },
   { component: SJsonInput, name: Components.SJsonInput },
   { component: SMain, name: Components.SMain },
   { component: SMenu, name: Components.SMenu },
@@ -153,6 +155,7 @@ export {
   SHeader,
   SIcon,
   SInput,
+  SFloatInput,
   SJsonInput,
   SMain,
   SMenu,

src/stories/SFloatInput.stories.ts

@@ -0,0 +1,27 @@
+import { number, withKnobs } from '@storybook/addon-knobs'
+
+import { SFloatInput, SRow } from '../components'
+
+export default {
+  component: SFloatInput,
+  title: 'Design System/Components/Input/Float',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SFloatInput, SRow },
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-float-input
+                 v-model="model"
+                 :decimals="decimals"
+               />
+             </s-row>`,
+  data: () => ({
+    model: ''
+  }),
+  props: {
+    decimals: {
+      default: number('Decimals', 18)
+    }
+  }
+})

src/types/components.ts

@@ -22,6 +22,7 @@ export enum Components {
   SHeader = 'SHeader',
   SIcon = 'SIcon',
   SInput = 'SInput',
+  SFloatInput = 'SFloatInput',
   SJsonInput = 'SJsonInput',
   SMain = 'SMain',
   SMenu = 'SMenu',