Tabs implementation

package.json

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

src/components/Input/SInput.vue

@@ -121,8 +121,21 @@ export default class SInput extends Vue {
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
 
   focused = false
+  autofill = false
   model = this.value
 
+  mounted (): void {
+    this.$el.addEventListener('animationstart', this.changeAutofillValue)
+  }
+
+  destroyed (): void {
+    this.$el.removeEventListener('animationstart', this.changeAutofillValue)
+  }
+
+  private changeAutofillValue (e: any): void {
+    this.autofill = e.animationName === 'onAutoFillStart'
+  }
+
   @Watch('value')
   private handlePropChange (value: string | number): void {
     this.model = value
@@ -153,6 +166,9 @@ export default class SInput extends Vue {
     if (this.type === InputType.TEXT_FILE) {
       cssClasses.push('text-file')
     }
+    if (this.autofill) {
+      cssClasses.push('autofill')
+    }
     return cssClasses
   }
 
@@ -298,6 +314,26 @@ export default class SInput extends Vue {
       border-color: $color-neutral-border;
     }
   }
+  &.autofill {
+    .placeholder {
+      background-color: transparent !important;
+    }
+  }
+  .el-input > input {
+    &:-webkit-autofill {
+      color: $color-basic-black !important;
+      animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
+    }
+    &:not(:-webkit-autofill) {
+      animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel
+    }
+    &:-internal-autofill-selected {
+      animation-name: onAutoFillStart;
+    }
+    &:not(:-internal-autofill-selected) {
+      animation-name: onAutoFillCancel;
+    }
+  }
   .placeholder + .el-input {
     > input {
       padding-top: 12px;
@@ -332,5 +368,12 @@ export default class SInput extends Vue {
     }
   }
 }
-
+@keyframes onAutoFillStart {
+  from {/**/}
+  to {/**/}
+}
+@keyframes onAutoFillCancel {
+  from {/**/}
+  to {/**/}
+}
 </style>

src/components/Tab/STabs.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-tabs
+    class="s-tabs"
+    :class="computedClasses"
+    v-model="model"
+    :type="computedType"
+    :closable="closable"
+    :addable="addable"
+    :editable="editable"
+    :stretch="stretch"
+    :tab-position="position"
+    :before-leave="beforeLeave"
+    @tab-click="handleClick"
+    @tab-remove="handleRemove"
+    @tab-add="handleAdd"
+    @edit="handleEdit"
+  >
+    <slot></slot>
+  </el-tabs>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+import { TabsType, TabsPosition } from './consts'
+
+@Component
+export default class STabs extends Vue {
+  /**
+   * Name of the selected tab. Can be used with `v-model`.
+   *
+   * First value by default
+   */
+  @Prop({ type: String }) readonly value!: string
+  /**
+   * Type of tabs. Can be `"card"`/`"border-card"`/`"rounded"` or unset.
+   *
+   * `"rounded"` works only when position is `"top"` or `"bottom"`
+   */
+  @Prop({ type: String, default: '' }) readonly type!: string
+  /**
+   * Will tabs be closable.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly closable!: boolean
+  /**
+   * Will tabs be added.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly addable!: boolean
+  /**
+   * Will tabs be closable and added by user.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly editable!: boolean
+  /**
+   * Will width of tab automatically fits its container.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly stretch!: boolean
+  /**
+   * Tabs position. Available values: `"top"`/`"bottom"`/`"right"`/`"left"`.
+   *
+   * `"top"` by default
+   */
+  @Prop({ type: String, default: TabsPosition.TOP }) readonly position!: string
+  /**
+   * Hook function before switching tab.
+   * If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented
+   */
+  @Prop({ type: Function }) readonly beforeLeave!: (activeName: string, oldActiveName: string) => (false | Promise<any>)
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: string): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: string): void {
+    this.$emit('change', value)
+  }
+
+  get computedType (): string {
+    if (!(Object.values(TabsType) as Array<string>).includes(this.type)) {
+      return ''
+    }
+    return this.type !== TabsType.ROUNDED ? this.type : ''
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.type === TabsType.ROUNDED &&
+      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+      cssClasses.push('rounded')
+    }
+    return cssClasses
+  }
+
+  handleClick (component: Vue, event: MouseEvent): void {
+    this.$emit('click', component, event)
+  }
+
+  handleRemove (tabName: string): void {
+    this.$emit('remove', tabName)
+  }
+
+  handleAdd (): void {
+    this.$emit('add')
+  }
+
+  handleEdit (tabName: string, action: 'add' | 'remove'): void {
+    this.$emit('edit', tabName, action)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+.s-tabs {
+  width: 100%;
+  .el-tabs__item {
+    font-weight: bold;
+    .el-icon-close {
+      &:before {
+        font-weight: bold;
+      }
+      &:hover {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+    &:not(.is-active) {
+      color: $color-basic-black;
+    }
+  }
+  .el-tab-pane {
+    color: $color-basic-black;
+  }
+  .el-tabs__nav-wrap::after {
+    background-color: $color-neutral-placeholder;
+  }
+  .el-tabs--card {
+    > .el-tabs__header {
+      border-bottom-color: $color-neutral-hover;
+      .el-tabs__nav {
+        border-color: $color-neutral-hover;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+      }
+      .el-tabs__item {
+        border-left-color: $color-neutral-hover;
+      }
+    }
+  }
+  .el-tabs--border-card {
+    border-color: $color-neutral-border;
+    > .el-tabs__header {
+      background-color: $color-neutral-placeholder;
+      border-bottom-color: $color-neutral-border;
+    }
+  }
+  &.rounded {
+    .el-tabs__header {
+      width: fit-content;
+    }
+    .el-tabs__nav-wrap {
+      background-color: $color-neutral-placeholder;
+      border-radius: 8px;
+      height: 32px;
+      padding-top: 2px;
+      padding-left: 2px;
+      padding-right: 2px;
+      &::after, .el-tabs__active-bar {
+        height: 0;
+      }
+      .el-tabs__item {
+        padding: 0 32px;
+        height: 28px;
+        line-height: 28px;
+        &:nth-child(2), &:last-child {
+          padding: 0 32px;
+        }
+        &.is-active {
+          color: $color-basic-black;
+          background-color: #FFFFFF;
+          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
+          border-radius: 8px;
+        }
+        &:focus.is-focus {
+          // TODO: make it more focusable
+          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Tab/consts.ts

@@ -0,0 +1,12 @@
+export enum TabsType {
+  ROUNDED = 'rounded',
+  CARD = 'card',
+  BORDER_CARD = 'border-card'
+}
+
+export enum TabsPosition {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  RIGHT = 'right',
+  LEFT = 'left'
+}

src/components/Tab/index.ts

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import { TabPane } from 'element-ui'
+
+import STabs from './STabs.vue'
+import { TabsType, TabsPosition } from './consts'
+
+const STab = Vue.component('STab', TabPane)
+
+export { STab, STabs, TabsType, TabsPosition }

src/components/index.ts

@@ -22,6 +22,7 @@ import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
+import { STab, STabs } from './Tab'
 import { STable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
 
@@ -57,6 +58,8 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STab,
+  STabs,
   STable,
   STableColumn,
   STooltip

src/index.ts

@@ -32,12 +32,14 @@ import {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STab,
+  STabs,
   STable,
   STableColumn,
   STooltip
 } from './components'
 import { Components } from './types/components'
-import { Message, MessageBox, Notification } from './plugins/elementUI'
+import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 
 const elements = [
   { component: SApp, name: Components.SApp },
@@ -71,6 +73,8 @@ const elements = [
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSubmenu, name: Components.SSubmenu },
+  { component: STab, name: Components.STab },
+  { component: STabs, name: Components.STabs },
   { component: STable, name: Components.STable },
   { component: STableColumn, name: Components.STableColumn },
   { component: STooltip, name: Components.STooltip }
@@ -87,6 +91,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export {
+  Loading,
   Message,
   MessageBox,
   Notification,
@@ -121,6 +126,8 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STab,
+  STabs,
   STable,
   STableColumn,
   STooltip

src/plugins/elementUI.ts

@@ -96,12 +96,14 @@ MsgBox.setDefaults({
   cancelButtonText: 'Cancel',
   confirmButtonText: 'OK'
 })
+Vue.prototype.$loading = Loading.service
 Vue.prototype.$prompt = MessageBox.prompt
 Vue.prototype.$alert = MessageBox.alert
 Vue.prototype.$message = Message
 Vue.prototype.$notify = Notification
 // locale.use(lang) // TODO: it will be used later
 export {
+  Loading,
   MessageBox,
   Message,
   Notification