Release 1.0.15

package.json

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

src/components/Dialog/SDialog.vue

@@ -14,7 +14,7 @@
     :class="computedClasses"
     :close-on-click-modal="closeOnClickModal"
     :close-on-press-escape="closeOnEsc"
-    :before-close="beforeClose"
+    :before-close="handleBeforeClose"
     :center="center"
     @open="handleOpen"
     @close="handleClose"
@@ -135,9 +135,9 @@ export default class SDialog extends Mixins(BorderRadiusMixin, DesignSystemInjec
   /**
    * Function that will be called before closing.
    *
-   * `(done: boolean) => {}`
+   * `beforeClose(closeFn: () => void)`
    */
-  @Prop({ type: Function }) readonly beforeClose!: (done: boolean) => {}
+  @Prop({ type: Function }) readonly beforeClose!: ((closeFn: () => void) => void) | null
   /**
    * Key for dialog content.
    * If you need force rerender of table content (for instance, columns were changed)
@@ -151,9 +151,27 @@ export default class SDialog extends Mixins(BorderRadiusMixin, DesignSystemInjec
 
   model = this.visible
   computedTop = this.top
+  shouldNotBeClosed = false
 
   @Watch('visible')
   private handlePropChange (value: boolean): void {
+    const wrapper = (this.dialog || {}).$el as HTMLElement
+    if (!wrapper) {
+      return
+    }
+    const activeDialog = wrapper.children[0]
+    if (!activeDialog) {
+      return
+    }
+    if (!value) {
+      this.erd.uninstall(wrapper)
+      this.erd.uninstall(activeDialog)
+      activeDialog.removeEventListener('mouseleave', this.handleCheckCursorPosition)
+    } else {
+      this.erd.listenTo(wrapper, this.computeTop)
+      this.erd.listenTo(activeDialog, this.computeTop)
+      activeDialog.addEventListener('mouseleave', this.handleCheckCursorPosition)
+    }
     this.model = value
   }
 
@@ -162,6 +180,24 @@ export default class SDialog extends Mixins(BorderRadiusMixin, DesignSystemInjec
     this.$emit('update:visible', value)
   }
 
+  handleCheckCursorPosition (e): void {
+    if (e.buttons) { // When was pressed and left
+      this.shouldNotBeClosed = true
+    }
+  }
+
+  handleBeforeClose (closeFn: () => void) {
+    if (this.shouldNotBeClosed) {
+      this.shouldNotBeClosed = false
+      return
+    }
+    if (this.beforeClose) {
+      this.beforeClose(closeFn)
+    } else {
+      closeFn()
+    }
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.designSystemClass) {
@@ -176,26 +212,20 @@ export default class SDialog extends Mixins(BorderRadiusMixin, DesignSystemInjec
     return cssClasses
   }
 
-  mounted (): void {
-    this.$nextTick(() => {
+  destroyed (): void {
+    if (this.model) {
       const wrapper = (this.dialog || {}).$el as HTMLElement
       if (!wrapper) {
         return
       }
-      this.erd.listenTo(wrapper, this.computeTop)
-      this.erd.listenTo(wrapper.children[0], this.computeTop)
-    })
-  }
-
-  destroyed (): void {
-    this.$nextTick(() => {
-      const wrapper = (this.dialog || {}).$el as HTMLElement
-      if (!wrapper) {
+      const activeDialog = wrapper.children[0]
+      if (!activeDialog) {
         return
       }
       this.erd.uninstall(wrapper)
-      this.erd.uninstall(wrapper.children[0])
-    })
+      this.erd.uninstall(activeDialog)
+      activeDialog.removeEventListener('mouseleave', this.handleCheckCursorPosition)
+    }
   }
 
   computeTop (): void {

src/components/Input/SFloatInput/SFloatInput.vue

@@ -1,12 +1,14 @@
 <template>
   <s-input
+    ref="input"
     :placeholder="placeholderValue"
     :value="formatted"
     v-bind="$attrs"
     v-on="{
       ...$listeners,
       input: handleInput,
-      blur: onBlur
+      blur: onBlur,
+      dblclick: onDblClick
     }"
   >
     <template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
@@ -16,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 
 import SInput from '../SInput'
 import { Float } from '../../../directives'
@@ -50,6 +52,10 @@ export default class SFloatInput extends Vue {
   @Prop({ type: Object, default: () => DEFAULT_DELIMITERS }) readonly delimiters?: any
   @Prop({ type: [String, Number], default: undefined, validator: isNumberLikeValue }) readonly max!: string | number
 
+  @Ref('input') inputComponent!: any
+
+  charsCountBeforeSelection = 0
+
   get placeholderValue (): string {
     return this.placeholder || '0'.concat(this.delimiters.decimal, '0')
   }
@@ -58,21 +64,58 @@ export default class SFloatInput extends Vue {
     return this.hasLocaleString ? this.toLocaleString() : this.value
   }
 
-  handleInput (value: string): void {
+  get input (): HTMLInputElement {
+    return this.inputComponent.$refs['el-input'].$refs.input
+  }
+
+  saveSelectionPosition (value: string): void {
+    const pos = this.input.selectionStart as number
+    const chars = value.slice(0, pos).replace(new RegExp('\\' + this.delimiters.thousand, 'g'), '')
+
+    this.charsCountBeforeSelection = chars.length
+  }
+
+  updateSelectionPosition (): void {
+    const {
+      charsCountBeforeSelection: charsCount,
+      formatted: value,
+      delimiters: { thousand }
+    } = this
+
+    let selection = 0
+
+    for (let handledChars = 0; handledChars < charsCount; selection++) {
+      if (value.charAt(selection) !== thousand) {
+        handledChars++
+      }
+    }
+
+    this.input.selectionStart = this.input.selectionEnd = selection
+  }
+
+  async handleInput (value: string): Promise<void> {
     if (this.hasLocaleString) {
+      // save selection position to update it later in new formatted value
+      this.saveSelectionPosition(value)
       // Cleanup value's format
       value = value.replace(new RegExp('\\' + this.delimiters.thousand, 'g'), '')
       if (this.delimiters.decimal !== DEFAULT_DECIMAL_DELIMITER) {
         value = value.replace(this.delimiters.decimal, DEFAULT_DECIMAL_DELIMITER)
       }
     }
+
     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)
+
+    if (this.hasLocaleString) {
+      await this.$nextTick()
+      this.updateSelectionPosition()
+    }
   }
 
   onBlur (event: Event): void {
@@ -87,6 +130,11 @@ export default class SFloatInput extends Vue {
     this.$emit('blur', event)
   }
 
+  onDblClick (event: Event): void {
+    const target = event.target as any
+    target.select()
+  }
+
   onInput (value: string): void {
     this.$emit('input', value)
   }
@@ -120,7 +168,7 @@ export default class SFloatInput extends Vue {
     }
 
     // Avoid several decimal delimiters
-    if ((value.match(new RegExp(DEFAULT_DECIMAL_DELIMITER, 'g')) || []).length > 1) {
+    if ((value.match(new RegExp(`\\${DEFAULT_DECIMAL_DELIMITER}`, 'g')) || []).length > 1) {
       formatted = formatted.substring(0, decimalDelimiterIndex + 1) + formatted.substring(decimalDelimiterIndex + 1).replace(DEFAULT_DECIMAL_DELIMITER, '')
     }
 

src/components/Input/SInput/SInput.vue

@@ -36,6 +36,7 @@
           @blur="handleBlur"
           @focus="handleFocus"
           @paste.native="handlePaste"
+          @dblclick.native="handleDblClick"
           @keypress.enter.native="handleEnter"
         >
           <slot slot="prefix" name="prefix"></slot>
@@ -265,6 +266,10 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     this.$emit('paste', value)
   }
 
+  handleDblClick (event: Event): void {
+    this.$emit('dblclick', event)
+  }
+
   handleBlur (event: Event): void {
     this.focused = false
     this.$emit('blur', event)