Release 0.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
@@ -73,6 +73,7 @@
     "ts-jest": "^26.0.0",
     "typescript": "~3.8.3",
     "vue-cli-plugin-storybook": "~1.2.2",
+    "vue-i18n": "^8.11.2",
     "vue-router": "^3.3.4",
     "vue-template-compiler": "^2.6.11"
   },

src/components/Button/SButton.vue

@@ -33,7 +33,6 @@ import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 })
 export default class SButton extends Vue {
   readonly ButtonTypes = ButtonTypes
-
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`.
    *
@@ -82,6 +81,10 @@ export default class SButton extends Vue {
    * By default it's set to "button"
    */
   @Prop({ default: ButtonNativeTypes.BUTTON, type: String }) readonly nativeType!: string
+  /**
+   * Button tabindex
+   */
+  @Prop({ default: '0', type: String }) readonly tabindex!: string
 
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
   @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
@@ -155,6 +158,7 @@ export default class SButton extends Vue {
   }
 
   mounted (): void {
+    this.$el.setAttribute('tabindex', this.tabindex)
     this.$watch('loading', (value) => {
       if (!value) {
         return
@@ -223,9 +227,10 @@ export default class SButton extends Vue {
 .tertiary {
   color: $color-basic-black;
   border: none;
+  background-color: transparent;
   &:hover, &:active, &:focus {
     color: $color-main-brand;
-    background-color: $color-basic-white;
+    background-color: transparent;
   }
   &:disabled, &:disabled:hover {
     color: $color-neutral-inactive;

src/components/Pagination/SPagination.vue

@@ -0,0 +1,291 @@
+<template>
+  <el-pagination
+    ref="pagination"
+    :page-sizes="pageSizes"
+    :page-size.sync="pageSizeModel"
+    :layout="layout"
+    :total="total"
+    :small="small"
+    :background="background"
+    :current-page.sync="currentPageModel"
+    :popper-class="popperClass"
+    :prev-text="prevText"
+    :next-text="nextText"
+    :disabled="disabled"
+    :hide-on-single-page="hideOnSinglePage"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    @prev-click="handlePrevClick"
+    @next-click="handleNextClick"
+  >
+    <slot v-if="willBeSlotEnabled"></slot>
+  </el-pagination>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { ElPagination } from 'element-ui/types/pagination'
+import cloneDeep from 'lodash/fp/cloneDeep'
+
+@Component
+export default class SPagination extends Vue {
+  /**
+   * Will pagination component be small.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly small!: boolean
+  /**
+   * Will pagination component buttons have background.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly background!: boolean
+  /**
+   * Items count of each page. It supports the .sync modifier.
+   *
+   * By default it's set to `10`
+   */
+  @Prop({ default: 10, type: Number }) readonly pageSize!: number
+  /**
+   * Total items count of the pagination component
+   */
+  @Prop({ type: Number }) readonly total!: number
+  /**
+   * Current page number. It supports the .sync modifier.
+   *
+   * By default it's set to `1`
+   */
+  @Prop({ default: 1, type: Number }) readonly currentPage!: number
+  /**
+   * Layout of the pagination component, which contains elements separated by comma.
+   * It should also be ordered as you want to see these elements. List of available items:
+   *
+   * `"sizes, prev, pager, next, jumper, total, slot"`
+   *
+   * By default it's set to `"total, sizes, pager, prev, next"`
+   */
+  @Prop({ default: 'total, sizes, pager, prev, next', type: String }) readonly layout!: string
+  /**
+   * A list of available page size (items count per page).
+   *
+   * By default it's set to `[10, 20, 30, 40, 50, 100]`
+   */
+  @Prop({ default: () => [10, 20, 30, 40, 50, 100], type: Array }) readonly pageSizes!: Array<number>
+  /**
+   * Custom class name for the page size Select's dropdown
+   */
+  @Prop({ default: '', type: String }) readonly popperClass!: string
+  /**
+   * Custom class name for the total element of the pagination component
+   */
+  @Prop({ default: '', type: String }) readonly totalClass!: string
+  /**
+   * Custom class name for the sizes element of the pagination component
+   */
+  @Prop({ default: '', type: String }) readonly sizesClass!: string
+  /**
+   * Text of the previous button
+   */
+  @Prop({ default: '', type: String }) readonly prevText!: string
+  /**
+   * Text of the next button
+   */
+  @Prop({ default: '', type: String }) readonly nextText!: string
+  /**
+   * Disabled state of the pagination component.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Will it be hidden when there's only one page.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly hideOnSinglePage!: boolean
+
+  @Ref('pagination') pagination!: any
+
+  totalItem!: any
+  sizesItem!: any
+  sizesLabelItem!: any
+
+  pageSizeModel = this.pageSize
+  currentPageModel = this.currentPage
+
+  private initPaginationItems (): void {
+    const items = Array.from(this.pagination.$el.childNodes) as Array<any>
+    this.totalItem = items.find(item => item.className === 'el-pagination__total')
+    this.sizesItem = items.find(item => item.className === 'el-pagination__sizes')
+    if (this.totalItem && this.totalClass) {
+      (this.totalItem as Element).classList.add(this.totalClass)
+    }
+    if (this.sizesItem && this.sizesClass) {
+      (this.sizesItem as Element).classList.add(this.sizesClass)
+    }
+  }
+
+  private renderPaginationItems (): void {
+    if (this.totalItem && this.total) {
+      const upperNumber = this.pageSizeModel * this.currentPageModel
+      this.totalItem.textContent = `${upperNumber - this.pageSizeModel + 1}—${upperNumber > this.total ? this.total : upperNumber} of ${this.total}`
+    }
+    if (this.sizesItem && !this.sizesLabelItem) {
+      const itemsPerPageText = document.createElement('span')
+      itemsPerPageText.textContent = 'Rows per page'
+      itemsPerPageText.classList.add('per-page-text')
+      this.pagination.$el.insertBefore(itemsPerPageText, this.sizesItem)
+    }
+  }
+
+  @Watch('pageSize')
+  private handlePageSizePropChange (value: number): void {
+    this.pageSizeModel = value
+  }
+
+  @Watch('pageSizeModel')
+  private handlePageSizeValueChange (value: number): void {
+    this.$emit('update:page-size', value)
+  }
+
+  @Watch('currentPage')
+  private handleCurrentPagePropChange (value: number): void {
+    this.currentPageModel = value
+  }
+
+  @Watch('currentPageModel')
+  private handleCurrentPageValueChange (value: number): void {
+    this.$emit('update:current-page', value)
+  }
+
+  get willBeSlotEnabled (): boolean {
+    return this.layout.includes('slot')
+  }
+
+  mounted (): void {
+    this.initPaginationItems()
+    this.renderPaginationItems()
+    this.sizesLabelItem = (Array.from(this.pagination.$el.childNodes) as Array<any>)
+      .find(item => item.className === 'per-page-text')
+  }
+
+  updated (): void {
+    this.renderPaginationItems()
+  }
+
+  handleSizeChange (newSize: number): void {
+    this.$emit('size-change', newSize)
+  }
+
+  handleCurrentChange (newCurrent: number): void {
+    this.$emit('current-change', newCurrent)
+  }
+
+  handlePrevClick (newCurrent: number): void {
+    this.$emit('prev-click', newCurrent)
+  }
+
+  handleNextClick (newCurrent: number): void {
+    this.$emit('next-click', newCurrent)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-pagination {
+  .btn-prev, .btn-next {
+    color: $color-basic-black;
+  }
+  button:disabled {
+    color: $color-neutral-inactive;
+  }
+  .el-pagination__sizes {
+    .el-select .el-input {
+      width: 65px;
+      .el-select__caret, .el-input__inner {
+        color: $color-basic-black;
+        font-weight: bold;
+      }
+      .el-select__caret {
+        margin-right: 6px;
+      }
+      .el-input__inner {
+        border-radius: 8px;
+        padding-right: 20px;
+        padding-left: 5px;
+        background-color: $color-neutral-placeholder;
+        border-color: $color-neutral-placeholder;
+      }
+      &.is-disabled {
+        .el-select__caret, .el-input__inner {
+          color: $color-neutral-inactive;
+        }
+      }
+    }
+  }
+  .el-pagination__editor.el-input {
+    .el-input__inner {
+      border-radius: 8px;
+      background-color: $color-neutral-placeholder;
+      border-color: $color-neutral-placeholder;
+      color: $color-basic-black;
+    }
+    &.is-disabled .el-input__inner {
+      color: $color-neutral-inactive;
+    }
+  }
+  .el-pagination__total, .per-page-text, .el-pagination__jump {
+    color: $color-neutral-secondary;
+  }
+  .el-pager li {
+    color: $color-basic-black;
+    &.btn-quicknext, &.btn-quickprev {
+      color: $color-basic-black;
+    }
+    &:not(.disabled) {
+      &:hover, &.active {
+        color: $color-main-brand;
+      }
+    }
+    &.disabled {
+      color: $color-neutral-inactive;
+    }
+  }
+  &.is-background {
+    .el-pager li {
+      background-color: $color-neutral-placeholder;
+      &.disabled {
+        color: $color-neutral-inactive;
+      }
+    }
+    .btn-prev, .btn-next {
+      background-color: $color-neutral-placeholder;
+      &:disabled {
+        color: $color-neutral-inactive;
+        background-color: $color-neutral-placeholder;
+      }
+      &:not(:disabled):hover {
+        color: $color-main-brand;
+      }
+    }
+  }
+  &.el-pagination--small {
+    .el-pagination__editor {
+      height: 22px;
+    }
+    .el-pagination__sizes .el-select .el-input {
+      .el-input__inner {
+        height: 22px !important;
+        font-size: 12px;
+      }
+      .el-select__caret {
+        font-size: 12px;
+        line-height: 23px;
+      }
+    }
+  }
+}
+</style>

src/components/Pagination/index.ts

@@ -0,0 +1,3 @@
+import SPagination from './SPagination.vue'
+
+export { SPagination }

src/components/Table/STableColumn.vue

@@ -1,6 +1,5 @@
 <template>
   <el-table-column
-    ref="tableColumn"
     :type="type"
     :index="index"
     :label="label"
@@ -29,15 +28,13 @@
     :filter-method="filterMethod"
     :filtered-value="filteredValue"
   >
-    <!-- TODO: fix scoped slots with { row, column, $index } data or add possibility to use it -->
-    <slot slot="header" name="header"></slot>
-    <slot></slot>
+    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
   </el-table-column>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
-import { ElTableColumn } from 'element-ui/types/table-column'
 
 import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
 
@@ -185,8 +182,6 @@ export default class STableColumn extends Vue {
    * TODO: comment it when it'll be implemented
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
-
-  @Ref('tableColumn') tableColumn!: ElTableColumn
 }
 </script>