Differences in Tabindex Types Fix, V-Button Directive (#462)

* SInput, SButton, SDropdown, STooltip: Fixed differences in Tabindex types. Added V-Button Directive.

Author: alexnatalia

package.json

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

src/components/Button/SButton/SButton.vue

@@ -103,7 +103,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   /**
    * Button tabindex
    */
-  @Prop({ default: '0', type: String }) readonly tabindex!: string
+  @Prop({ default: 0, type: [Number, String] }) readonly tabindex!: number | string
   /**
    * Placement of the tooltip. You can use any value from the `TooltipPlacement` enum.
    *
@@ -202,7 +202,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   }
 
   mounted (): void {
-    this.$el.setAttribute('tabindex', this.tabindex)
+    this.$el.setAttribute('tabindex', this.tabindex.toString())
     this.$watch('loading', (value) => {
       if (!value) {
         return

src/components/Dropdown/SDropdown/SDropdown.vue

@@ -10,7 +10,7 @@
     :hide-on-click="hideOnClick"
     :show-timeout="showTimeout"
     :hide-timeout="hideTimeout"
-    :tabindex="tabindex"
+    :tabindex="tabindexFormatted"
     @click="handleClick"
     @command="handleSelect"
     @visible-change="handleVisibleChange"
@@ -129,7 +129,7 @@ export default class SDropdown extends Mixins(SizeMixin, BorderRadiusMixin) {
    *
    * `0` by default
    */
-  @Prop({ type: Number, default: 0 }) readonly tabindex!: number
+  @Prop({ type: [Number, String], default: 0 }) readonly tabindex!: number | string
   /**
    * Popper class
    */
@@ -139,6 +139,10 @@ export default class SDropdown extends Mixins(SizeMixin, BorderRadiusMixin) {
 
   willTooltipBeDisabled = false
 
+  get tabindexFormatted (): number {
+    return +this.tabindex
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.isStandardBorderRadius) {

src/components/Input/SInput/SInput.vue

@@ -28,7 +28,7 @@
           :form="form"
           :label="label"
           :accept="accept"
-          :tabindex="tabindex"
+          :tabindex="tabindexFormatted"
           :prefix-icon="prefix"
           :suffix-icon="suffix"
           :rows="rows"
@@ -154,7 +154,7 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
   /**
    * Input tabindex
    */
-  @Prop({ default: '', type: String }) readonly tabindex!: string
+  @Prop({ default: 0, type: [Number, String] }) readonly tabindex!: number | string
   /**
    * Icon prefix, works only with medium input
    */
@@ -214,6 +214,10 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     return (this.type === InputType.TEXT && this.size === InputSize.BIG) || (this.type === InputType.TEXTAREA)
   }
 
+  get tabindexFormatted (): string {
+    return this.tabindex.toString()
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.designSystemClass) {

src/components/Tooltip/STooltip.vue

@@ -14,7 +14,7 @@
     :popper-class="computedPopperClass"
     :manual="manual"
     :hide-after="hideAfter"
-    :tabindex="tabindex"
+    :tabindex="tabindexFormatted"
   >
     <slot slot="content" name="content"></slot>
     <slot></slot>
@@ -116,12 +116,16 @@ export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInje
    *
    * `0` by default
    */
-  @Prop({ default: 0, type: Number }) readonly tabindex!: number
+  @Prop({ default: 0, type: [Number, String] }) readonly tabindex!: number | string
 
   @Ref('tooltip') tooltip!: any
 
   @Getter libraryTheme!: Theme
 
+  get tabindexFormatted (): number {
+    return +this.tabindex
+  }
+
   get computedPopperClass (): string {
     const cssClasses: Array<string> = []
     if (this.designSystemClass) {

src/directives/button.ts

@@ -0,0 +1,33 @@
+import { DirectiveOptions } from 'vue'
+
+import KeyValues from '../utils/KeyValues'
+
+const onEnterKeyDown = (e: any) => {
+  if (KeyValues.isEnter(e.key)) {
+    e.preventDefault()
+    e.target.click()
+  }
+}
+
+export const Button = {
+  bind (el, binding, vnode) {
+    if (binding.value || typeof binding.value === 'undefined') {
+      const button = el as HTMLDivElement
+      button.setAttribute('role', 'button')
+      button.addEventListener(
+        'keydown',
+        onEnterKeyDown
+      )
+    }
+  },
+  unbind (el, binding, vnode) {
+    if (binding.value || typeof binding.value === 'undefined') {
+      const button = el as HTMLDivElement
+      button.removeAttribute('role')
+      button.removeEventListener(
+        'keydown',
+        onEnterKeyDown
+      )
+    }
+  }
+} as DirectiveOptions

src/directives/index.ts

@@ -1 +1,2 @@
 export { Float, Integer } from './number'
+export { Button } from './button'

src/directives/number.ts

@@ -2,15 +2,15 @@ import { DirectiveOptions } from 'vue'
 
 import KeyValues from '../utils/KeyValues'
 
-const onDigitKeyPress = (e: any) => {
+const onDigitKeyDown = (e: any) => {
   if (!KeyValues.isDigit(e.key)) {
     e.preventDefault()
   } else {
     return true
   }
 }
 
-const onNumberKeyPress = (e: any) => {
+const onNumberKeyDown = (e: any) => {
   if (!KeyValues.isNumber(e.key) || (!KeyValues.isDigit(e.key) && e.target.value.includes('.'))) {
     e.preventDefault()
   } else {
@@ -23,17 +23,17 @@ export const Integer = {
     const input = el.querySelector('input[type="text"]') as HTMLInputElement
     if (input) {
       input.addEventListener(
-        'keypress',
-        onDigitKeyPress
+        'keydown',
+        onDigitKeyDown
       )
     }
   },
   unbind (el, binding, vnode) {
     const input = el.querySelector('input[type="text"]') as HTMLInputElement
     if (input) {
       input.removeEventListener(
-        'keypress',
-        onDigitKeyPress
+        'keydown',
+        onDigitKeyDown
       )
     }
   }
@@ -44,17 +44,17 @@ export const Float = {
     const input = el.querySelector('input[type="text"]') as HTMLInputElement
     if (input) {
       input.addEventListener(
-        'keypress',
-        onNumberKeyPress
+        'keydown',
+        onNumberKeyDown
       )
     }
   },
   unbind (el, binding, vnode) {
     const input = el.querySelector('input[type="text"]') as HTMLInputElement
     if (input) {
       input.removeEventListener(
-        'keypress',
-        onNumberKeyPress
+        'keydown',
+        onNumberKeyDown
       )
     }
   }

src/index.ts

@@ -54,7 +54,7 @@ import {
   STableColumn,
   STooltip
 } from './components'
-import { Float, Integer } from './directives'
+import { Float, Integer, Button } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
 import { setTheme, setDesignSystem, setLocale } from './utils'
@@ -72,6 +72,7 @@ const SoramitsuElements = {
     vue.use(ElementUIPlugin)
     vue.directive(Directives.Float, Float)
     vue.directive(Directives.Integer, Integer)
+    vue.directive(Directives.Button, Button)
     vue.use(SApp)
     vue.use(SAside)
     vue.use(SBreadcrumb)

src/types/directives.ts

@@ -1,4 +1,5 @@
 export enum Directives {
   Float = 'Float',
-  Integer = 'Integer'
+  Integer = 'Integer',
+  Button = 'Button'
 }

src/utils/KeyValues.ts

@@ -1,6 +1,7 @@
 export default class KeyValues {
   private static readonly digits = /[0-9]/
   private static readonly numbers = /[0-9.]/
+  private static readonly Enter = 'Enter'
 
   public static isDigit (digit: string): boolean {
     return this.digits.test(digit)
@@ -9,4 +10,8 @@ export default class KeyValues {
   public static isNumber (number: string): boolean {
     return this.numbers.test(number)
   }
+
+  public static isEnter (key: string): boolean {
+    return key === this.Enter
+  }
 }