Release 0.8.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -68,7 +68,7 @@
     "jest": "^26.0.1",
     "lint-staged": "^9.5.0",
     "node-sass": "^4.12.0",
-    "postcss": "^7.0.23",
+    "postcss": "^8.2.10",
     "rollup": "^1.27.8",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.3.0",

src/components/Table/SHierarchicalTable.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="s-hierarchical-table">
+    <s-table
+      :class="{
+        's-hierarchical-table-level': true,
+        's-hierarchical-table-level--last': levelIndex === data.length - 1
+      }"
+      v-for="(level, levelIndex) in data"
+      :key="level.name"
+      :data="level.content"
+      :size="computedSize"
+      :border="false"
+      :row-class-name="({ row }) => getRowClassName({ row, levelIndex })"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+      @selection-change="handleSelectionChange"
+      @row-click="row => $emit('row-click', row, level)"
+    >
+      <s-table-column
+        v-if="levelIndex === (data.length - 1)"
+        type="selection"
+      />
+      <s-table-column
+        prop="value"
+        :label="level.name"
+      >
+        <template slot-scope="{ row }">
+          <slot
+            :name="level.id"
+            :value="row"
+          >
+            {{ row }}
+          </slot>
+        </template>
+      </s-table-column>
+    </s-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Provide, Mixins } from 'vue-property-decorator'
+
+import SizeMixin from '../../mixins/SizeMixin'
+import STable from './STable.vue'
+import STableColumn from './STableColumn.vue'
+
+@Component({
+  components: {
+    STable,
+    STableColumn
+  }
+})
+export default class SHierarchicalTable extends Mixins(SizeMixin) {
+  /**
+   * Data of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
+  /**
+   * Path of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly path!: Array<any>
+
+  handleSelect (selection: Array<any>, row: any): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection: Array<any>): void {
+    this.$emit('select-all', selection)
+  }
+
+  handleSelectionChange (selection: Array<any>): void {
+    this.$emit('selection-change', selection)
+  }
+
+  getRowClassName ({ levelIndex, row }) {
+    const classes = ['s-hierarchical-table-row']
+    if (this.path[levelIndex] === row) {
+      classes.push('s-hierarchical-table-row--active')
+    }
+    return classes.join(' ')
+  }
+
+  @Provide('sHierarchicalTable') sHierarchicalTable = this
+}
+</script>

src/components/Table/STable.vue

@@ -1,5 +1,6 @@
 <template>
   <el-table
+    :class="computedClasses"
     ref="table"
     :data="data"
     :height="height"
@@ -360,6 +361,14 @@ export default class STable extends Mixins(SizeMixin) {
     this.table.sort(prop, order)
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardSize) {
+      cssClasses.push(`s-${this.size}`)
+    }
+    return cssClasses
+  }
+
   @Provide('sTable') sTable = this
 }
 </script>