From 641753121625108fff148e24d6f53a3a549e93dd Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 1 Aug 2020 13:28:06 +0400
Subject: [PATCH 01/29] Fix button loading icon position

---
 src/components/Button/SButton.vue | 34 +++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 7f0e4a64..5622b21b 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -5,6 +5,7 @@
       :native-type="nativeType"
       :size="computedSize"
       :class="computedClasses"
+      :style="computedStyles"
       :disabled="disabled"
       :loading="isLoading"
       :autofocus="autofocus"
@@ -84,6 +85,7 @@ export default class SButton extends Vue {
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
   @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
 
+  private iconLeftOffset = 0
   elementIcon = ''
 
   get computedSize (): string {
@@ -120,6 +122,14 @@ export default class SButton extends Vue {
     return cssClasses
   }
 
+  get computedStyles () {
+    const styles = {} as any
+    if (this.loading) {
+      styles['--s-button-loading-left'] = `${this.iconLeftOffset}px`
+    }
+    return styles
+  }
+
   get availableIcon (): string {
     if (!this.icon) {
       return ''
@@ -143,6 +153,16 @@ export default class SButton extends Vue {
   handleClick (): void {
     this.$emit('click')
   }
+
+  mounted (): void {
+    this.$watch('loading', (value) => {
+      if (!value) {
+        return
+      }
+      const el = this.$el.querySelector('span') as HTMLSpanElement
+      this.iconLeftOffset = el.offsetLeft + (el.offsetWidth / 2) - 10
+    }, { immediate: true })
+  }
 }
 </script>
 
@@ -151,12 +171,18 @@ export default class SButton extends Vue {
 
 .loading {
   padding: 12px 17.5px;
-  > :not(i) {
-    color: transparent;
-  }
   i {
     position: absolute;
-    left: 43%;
+    left: var(--s-button-loading-left);
+  }
+  &.small {
+    padding: 9px 15px;
+    i {
+      left: calc(var(--s-button-loading-left) + 2px);
+    }
+  }
+  > :not(i) {
+    color: transparent;
   }
 }
 

From 9778d84a738719d0d68b58d85e1b5ad4cb5de777 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 1 Aug 2020 13:29:02 +0400
Subject: [PATCH 02/29] Update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0f987500..2054fd9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

From da4ec4e44e2d47e6a78b2346ec4bd38a3aa7dc50 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 1 Aug 2020 15:18:46 +0400
Subject: [PATCH 03/29] Fix input v-model

---
 src/components/Input/SInput.vue | 4 +++-
 src/stories/SInput.stories.ts   | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 17a652ec..8cf14ce6 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -30,7 +30,7 @@
     />
     <template v-if="type === InputType.TEXT_FILE">
       <i class="s-icon-file"></i>
-      <input type="file" :accept="accept" @change="handleTextFileChange">
+      <input :value="emptyValue" type="file" :accept="accept" @change="handleTextFileChange">
     </template>
   </div>
 </template>
@@ -45,6 +45,7 @@ import { Autocomplete, InputType } from './consts'
 @Component
 export default class SInput extends Vue {
   readonly InputType = InputType
+  readonly emptyValue = null
   /**
    * Type of input. It can be "text" or "textarea" or any native input type.
    * `"text"` by default
@@ -129,6 +130,7 @@ export default class SInput extends Vue {
 
   @Watch('model')
   private handleValueChange (value: string | number): void {
+    this.$emit('input', value)
     this.$emit('change', value)
   }
 
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index f1269566..9ad8258e 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -160,6 +160,7 @@ export const textFileInput = () => ({
                type="text-file"
                placeholder="Upload or input text"
                :accept="accept"
+               @change="(value) => handleChange(value, input)"
              />`,
   data: () => ({
     input: ''
@@ -168,5 +169,10 @@ export const textFileInput = () => ({
     accept: {
       default: text('Accept', '*/*')
     }
+  },
+  methods: {
+    handleChange: (value, input) => {
+      console.log(`v-model=${input}`, `@change=${value}`)
+    }
   }
 })

From fd7d4ffdb69a5927cceac7bbd427b22166b317a4 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 2 Aug 2020 01:33:26 +0400
Subject: [PATCH 04/29] Fix checkbox v-model

---
 src/components/Checkbox/SCheckbox.vue | 17 +++++++++++++++--
 src/stories/SCheckbox.stories.ts      | 10 ++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 823ca3d4..ac579b6e 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
   <el-checkbox
     :class="computedClasses"
-    :value="value"
+    v-model="model"
     :label="label"
     :disabled="disabled"
     :border="border"
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
 import { CheckboxSize } from './consts'
 
@@ -65,6 +65,19 @@ export default class SCheckbox extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly indeterminate!: boolean
 
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: string | number | boolean): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: string | number | boolean): void {
+    this.$emit('input', value)
+    this.$emit('change', value)
+  }
+
   get computedSize (): string {
     if (this.size === CheckboxSize.BIG ||
       !(Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 7556b584..c99db381 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -14,14 +14,18 @@ export const configurable = () => ({
   components: { SCheckbox, SRow },
   template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-checkbox
+                 v-model="checked"
                  :disabled="disabled"
                  :border="border"
                  :size="size"
                  :label="label"
-                 @change="hangleChange"
+                 @change="(value) => handleChange(value, checked)"
                >
                </s-checkbox>
              </s-row>`,
+  data: () => ({
+    checked: true
+  }),
   props: {
     disabled: {
       default: boolean('Disabled', false)
@@ -37,7 +41,9 @@ export const configurable = () => ({
     }
   },
   methods: {
-    hangleChange: (checked: boolean) => console.log(checked ? 'checked!' : 'unchecked!')
+    handleChange: (value: boolean, checked: boolean) => {
+      console.log(`v-model=${checked}`, `@change=${value}`)
+    }
   }
 })
 

From b5412c71279d4737ee12cf85d710074b44c58182 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 2 Aug 2020 11:48:19 +0400
Subject: [PATCH 05/29] Add icon

---
 src/styles/icons.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 40048b78..685667b9 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -52,6 +52,16 @@
     height: 20px;
   }
 
+  &more-small {
+    position: absolute;
+    background-image: url('~@/assets/icons/more-horizontal.svg');
+    background-size: contain;
+    width: 12px;
+    height: 12px;
+    top: -6px;
+    left: -6px;
+  }
+
   &back-small {
     position: absolute;
     background-image: url('~@/assets/icons/arrow-left.svg');

From 269cabaaea3ea37a52c63b50f4622860da200ede Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 2 Aug 2020 16:13:52 +0400
Subject: [PATCH 06/29] Add breadcrumb components

---
 src/components/Breadcrumb/SBreadcrumb.vue     | 25 ++++++++++++
 src/components/Breadcrumb/SBreadcrumbItem.vue | 40 +++++++++++++++++++
 src/components/Breadcrumb/index.ts            |  4 ++
 src/components/index.ts                       |  3 ++
 src/index.ts                                  |  6 +++
 src/plugins/elementUI.ts                      |  4 ++
 src/types/components.ts                       |  2 +
 7 files changed, 84 insertions(+)
 create mode 100644 src/components/Breadcrumb/SBreadcrumb.vue
 create mode 100644 src/components/Breadcrumb/SBreadcrumbItem.vue
 create mode 100644 src/components/Breadcrumb/index.ts

diff --git a/src/components/Breadcrumb/SBreadcrumb.vue b/src/components/Breadcrumb/SBreadcrumb.vue
new file mode 100644
index 00000000..2d53a072
--- /dev/null
+++ b/src/components/Breadcrumb/SBreadcrumb.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-breadcrumb :separator="separator">
+    <slot></slot>
+  </el-breadcrumb>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SBreadcrumb extends Vue {
+  /**
+   * Separator character of the breadcrumb component
+   */
+  @Prop({ default: '/', type: String }) readonly separator!: string
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+.el-breadcrumb__separator {
+  color: $color-neutral-secondary;
+  font-weight: normal;
+}
+</style>
diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem.vue
new file mode 100644
index 00000000..7d577779
--- /dev/null
+++ b/src/components/Breadcrumb/SBreadcrumbItem.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-breadcrumb-item
+    :to="to"
+    :replace="replace"
+  >
+    <slot></slot>
+  </el-breadcrumb-item>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class SBreadcrumbItem extends Vue {
+  /**
+   * Target route of the link, same as to of `vue-router`
+   */
+  @Prop({ default: '' }) readonly to!: any
+  /**
+   * If `true`, the navigation will not leave a history record.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly replace!: boolean
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+.el-breadcrumb__inner {
+  color: $color-neutral-secondary;
+  &.is-link {
+    color: $color-neutral-secondary;
+    font-weight: normal;
+  }
+}
+.el-breadcrumb__item:last-child {
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts
new file mode 100644
index 00000000..d1df7fdf
--- /dev/null
+++ b/src/components/Breadcrumb/index.ts
@@ -0,0 +1,4 @@
+import SBreadcrumb from './SBreadcrumb.vue'
+import SBreadcrumbItem from './SBreadcrumbItem.vue'
+
+export { SBreadcrumb, SBreadcrumbItem }
diff --git a/src/components/index.ts b/src/components/index.ts
index 4aee2ca3..59e17f66 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ import '../styles'
 
 import { SApp } from './Layout/App'
 import { SAside } from './Layout/Aside'
+import { SBreadcrumb, SBreadcrumbItem } from './Breadcrumb'
 import { SButton, SButtonGroup } from './Button'
 import { SCard } from './Card'
 import { SCheckbox } from './Checkbox'
@@ -24,6 +25,8 @@ import { STooltip } from './Tooltip'
 export {
   SApp,
   SAside,
+  SBreadcrumb,
+  SBreadcrumbItem,
   SButton,
   SButtonGroup,
   SCard,
diff --git a/src/index.ts b/src/index.ts
index 5fa8d13f..61d5a248 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,8 @@ import Vue from 'vue'
 import {
   SApp,
   SAside,
+  SBreadcrumb,
+  SBreadcrumbItem,
   SButton,
   SButtonGroup,
   SCard,
@@ -36,6 +38,8 @@ import { Message, MessageBox, Notification } from './plugins/elementUI'
 const elements = [
   { component: SApp, name: Components.SApp },
   { component: SAside, name: Components.SAside },
+  { component: SBreadcrumb, name: Components.SBreadcrumb },
+  { component: SBreadcrumbItem, name: Components.SBreadcrumbItem },
   { component: SButton, name: Components.SButton },
   { component: SButtonGroup, name: Components.SButtonGroup },
   { component: SCard, name: Components.SCard },
@@ -80,6 +84,8 @@ export {
   Notification,
   SApp,
   SAside,
+  SBreadcrumb,
+  SBreadcrumbItem,
   SButton,
   SButtonGroup,
   SCard,
diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts
index 792f0181..8ffc0b74 100644
--- a/src/plugins/elementUI.ts
+++ b/src/plugins/elementUI.ts
@@ -2,6 +2,8 @@ import Vue from 'vue'
 import {
   Aside,
   Badge,
+  Breadcrumb,
+  BreadcrumbItem,
   Button,
   ButtonGroup,
   Card,
@@ -46,6 +48,8 @@ import {
 // import lang from 'element-ui/lib/locale/lang/en'
 // import locale from 'element-ui/lib/locale'
 
+Vue.use(Breadcrumb)
+Vue.use(BreadcrumbItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Dialog)
diff --git a/src/types/components.ts b/src/types/components.ts
index 5e18f4a3..701af730 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -1,6 +1,8 @@
 export enum Components {
   SApp = 'SApp',
   SAside = 'SAside',
+  SBreadcrumb = 'SBreadcrumb',
+  SBreadcrumbItem = 'SBreadcrumbItem',
   SButton = 'SButton',
   SButtonGroup = 'SButtonGroup',
   SCard = 'SCard',

From 6a11995658d2be41e5072c62b953d6bacad67b1f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 2 Aug 2020 16:14:31 +0400
Subject: [PATCH 07/29] Fix stories config

---
 src/stories/SCard.stories.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 3528f06b..b6779d35 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -6,8 +6,7 @@ import { CardShadow } from '../components/Card'
 export default {
   component: SCard,
   title: 'Design System/Card',
-  decorators: [withKnobs],
-  excludeStories: /.*Data$/
+  decorators: [withKnobs]
 }
 
 export const configurable = () => ({

From 709cf3a7918a238dec2e15eb817c07cc8f054b9d Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 2 Aug 2020 16:15:05 +0400
Subject: [PATCH 08/29] Add stories for breadcrumbs

---
 src/stories/Breadcrumb/SBreadcrumb.stories.ts    | 16 ++++++++++++++++
 .../Breadcrumb/SBreadcrumbItem.stories.ts        | 14 ++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/stories/Breadcrumb/SBreadcrumb.stories.ts
 create mode 100644 src/stories/Breadcrumb/SBreadcrumbItem.stories.ts

diff --git a/src/stories/Breadcrumb/SBreadcrumb.stories.ts b/src/stories/Breadcrumb/SBreadcrumb.stories.ts
new file mode 100644
index 00000000..aae615bf
--- /dev/null
+++ b/src/stories/Breadcrumb/SBreadcrumb.stories.ts
@@ -0,0 +1,16 @@
+import { SBreadcrumb, SBreadcrumbItem } from '../../components'
+
+export default {
+  component: SBreadcrumb,
+  title: 'Design System/Breadcrumb'
+}
+
+export const configurable = () => ({
+  components: { SBreadcrumb, SBreadcrumbItem },
+  template: `<s-breadcrumb separator=">" style="flex: 1;">
+               <s-breadcrumb-item :to="{ path: '/' }">Homepage</s-breadcrumb-item>
+               <s-breadcrumb-item :to="{ path: '/main' }">Main Page</s-breadcrumb-item>
+               <s-breadcrumb-item :to="{ path: '/main/child' }">Child Page</s-breadcrumb-item>
+               <s-breadcrumb-item :to="{ path: '/main/child/shown' }">Shown Page</s-breadcrumb-item>
+             </s-breadcrumb>`
+})
diff --git a/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts b/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
new file mode 100644
index 00000000..4ff181ce
--- /dev/null
+++ b/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
@@ -0,0 +1,14 @@
+import { SBreadcrumb, SBreadcrumbItem } from '../../components'
+
+export default {
+  component: SBreadcrumbItem,
+  title: 'Design System/Breadcrumb/Breadcrumb Item'
+}
+
+export const configurable = () => ({
+  components: { SBreadcrumb, SBreadcrumbItem },
+  template: `<s-breadcrumb style="flex: 1;">
+               <s-breadcrumb-item to="path">Main page</s-breadcrumb-item>
+               <s-breadcrumb-item>Shown page</s-breadcrumb-item>
+             </s-breadcrumb>`
+})

From 5a37e8bcbbc71d610c51cd9e3b992ab972f64bf8 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 00:49:17 +0400
Subject: [PATCH 09/29] Add more visible results

---
 src/stories/SInput.stories.ts | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 9ad8258e..e484d588 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -155,24 +155,25 @@ export const withTextLimit = () => ({
 
 export const textFileInput = () => ({
   components: { SInput },
-  template: `<s-input
-               v-model="input"
-               type="text-file"
-               placeholder="Upload or input text"
-               :accept="accept"
-               @change="(value) => handleChange(value, input)"
-             />`,
+  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+               <s-input
+                 v-model="vModelValue"
+                 type="text-file"
+                 placeholder="Upload or input text"
+                 :accept="accept"
+                 @change="(value) => changeValue = value"
+               />
+               <span style="margin-top: 40px;">
+                 v-model="{{ vModelValue }}", @change="{{ changeValue }}"
+               </span>
+             </div>`,
   data: () => ({
-    input: ''
+    vModelValue: '',
+    changeValue: ''
   }),
   props: {
     accept: {
       default: text('Accept', '*/*')
     }
-  },
-  methods: {
-    handleChange: (value, input) => {
-      console.log(`v-model=${input}`, `@change=${value}`)
-    }
   }
 })

From 85ae8b92fc1e980c0492950b09337f47f43aeea0 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 01:24:05 +0400
Subject: [PATCH 10/29] Add more visible logs

---
 src/stories/SCheckbox.stories.ts | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index c99db381..2c53d75f 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -11,20 +11,24 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCheckbox, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  components: { SCheckbox },
+  template: `<div class="flex" style="flex: 1; flex-direction: column;">
                <s-checkbox
-                 v-model="checked"
+                 v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
                  :size="size"
                  :label="label"
-                 @change="(value) => handleChange(value, checked)"
+                 @change="(value) => changeValue = value"
                >
                </s-checkbox>
-             </s-row>`,
+               <span style="margin-top: 20px;">
+                 v-model="{{ vModelValue }}", @change="{{ changeValue }}"
+               </span>
+             </div>`,
   data: () => ({
-    checked: true
+    vModelValue: true,
+    changeValue: true
   }),
   props: {
     disabled: {
@@ -39,11 +43,6 @@ export const configurable = () => ({
     size: {
       default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
     }
-  },
-  methods: {
-    handleChange: (value: boolean, checked: boolean) => {
-      console.log(`v-model=${checked}`, `@change=${value}`)
-    }
   }
 })
 

From cb7e2eb9ba20b7f8d040a0c403e488e052822a9a Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 13:37:27 +0400
Subject: [PATCH 11/29] Add clickable prop to card component

---
 src/components/Card/SCard.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 6ecbbc98..32c5f360 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -33,6 +33,27 @@ export default class SCard extends Vue {
    * By default, it's set to `"hover"`
    */
   @Prop({ default: CardShadow.HOVER, type: String }) readonly shadow!: string
+  /**
+   * Clickable property of the Card component which means that the user can click on the card
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
+
+  handleClick (): void {
+    if (!this.clickable) {
+      return
+    }
+    this.$emit('click')
+  }
+
+  mounted (): void {
+    this.$el.addEventListener('click', this.handleClick)
+  }
+
+  destroyed (): void {
+    this.$el.removeEventListener('click', this.handleClick)
+  }
 }
 </script>
 

From 752b70dce6c5374dae3c46ad24dfb191394dfd33 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 13:39:40 +0400
Subject: [PATCH 12/29] Fix change visible event for dropdown component

---
 src/components/Dropdown/SDropdown.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 0a453885..9483244e 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -13,6 +13,7 @@
     @click="handleClick"
     @command="handleSelect"
     @visible-change="handleVisibleChange"
+    @click.native="handleVisibleEventChange"
   >
     <span v-if="type === DropdownType.DEFAULT || splitButton">
       <slot></slot>
@@ -77,9 +78,9 @@ export default class SDropdown extends Vue {
   /**
    * A placement of the popup menu. You can use any value from `DropdownPlacement` enum.
    *
-   * By default, it's set to `"bottom-end"`
+   * By default, it's set to `"bottom"`
    */
-  @Prop({ type: String, default: DropdownPlacement.BOTTOM_END }) readonly placement!: string
+  @Prop({ type: String, default: DropdownPlacement.BOTTOM }) readonly placement!: string
   /**
    * A trigger action of the dropdown component. Can be `"hover"` or `"click"`.
    * When dropdown type is "ellipsis", `trigger = "click"`.
@@ -180,6 +181,10 @@ export default class SDropdown extends Vue {
   handleVisibleChange (isAppear: boolean): void {
     this.$emit('visible-change', isAppear)
   }
+
+  handleVisibleEventChange (event: MouseEvent): void {
+    event.stopPropagation()
+  }
 }
 </script>
 

From da5082f2fdde3f1fa964698957c97aeba6a0735d Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 13:39:59 +0400
Subject: [PATCH 13/29] Modify card story

---
 src/stories/SCard.stories.ts | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index b6779d35..3bdff199 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -1,6 +1,6 @@
-import { text, withKnobs, select } from '@storybook/addon-knobs'
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SCard, SRow, SButton } from '../components'
+import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
 import { CardShadow } from '../components/Card'
 
 export default {
@@ -10,12 +10,21 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCard, SRow, SButton },
+  components: { SCard, SRow, SDropdown, SDropdownItem },
   template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card :shadow="shadow">
+               <s-card style="width: 80%;" :shadow="shadow" :clickable="clickable" @click="handleClick">
                  <template slot="header">
-                   <span>{{ header }}</span>
-                   <s-button type="tertiary" size="medium">Close</s-button>
+                   <div class="flex" style="justify-content: space-between; padding-right: 20px;">
+                     <span>{{ header }}</span>
+                     <s-dropdown type="ellipsis">
+                       Menu
+                       <template #menu>
+                         <s-dropdown-item>First</s-dropdown-item>
+                         <s-dropdown-item>Second</s-dropdown-item>
+                         <s-dropdown-item>Third</s-dropdown-item>
+                       </template>
+                     </s-dropdown>
+                   </div>
                  </template>
                  <div v-for="o in 4" :key="o" style="margin-bottom: 18px;">
                    {{'List item ' + o }}
@@ -28,6 +37,12 @@ export const configurable = () => ({
     },
     header: {
       default: text('Header', 'Card header')
+    },
+    clickable: {
+      default: boolean('Clickable', false)
     }
+  },
+  methods: {
+    handleClick: () => alert('Card component was clicked')
   }
 })

From e63eec15ba4bde0819b58ed26e177c96fc2abfae Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 17:43:18 +0400
Subject: [PATCH 14/29] Fix cursor style

---
 src/components/Card/SCard.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 32c5f360..266d758f 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -1,6 +1,7 @@
 <template>
   <el-card
     class="s-card"
+    :class="{ clickable }"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -63,6 +64,9 @@ export default class SCard extends Vue {
 .s-card {
   border-radius: 8px;
   border-color: $color-neutral-border;
+  &.clickable {
+    cursor: pointer;
+  }
   &:hover, &:focus {
     border-color: $color-basic-white;
   }

From 893466cb99e108c46ecdc2aa8a68d310e7090c9f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 4 Aug 2020 16:56:40 +0400
Subject: [PATCH 15/29] Add table template

---
 src/components/Card/SCard.vue         |   2 +-
 src/components/Table/STable.vue       | 273 ++++++++++++++++++++++++++
 src/components/Table/STableColumn.vue |   0
 src/components/Table/consts.ts        |   3 +
 src/components/Table/index.ts         |   0
 5 files changed, 277 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Table/STable.vue
 create mode 100644 src/components/Table/STableColumn.vue
 create mode 100644 src/components/Table/consts.ts
 create mode 100644 src/components/Table/index.ts

diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 266d758f..ba72dfbc 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Vue, Component, Prop } from 'vue-property-decorator'
 
 import { CardShadow } from './consts'
 
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
new file mode 100644
index 00000000..b2092293
--- /dev/null
+++ b/src/components/Table/STable.vue
@@ -0,0 +1,273 @@
+<template>
+  <el-table
+    ref="table"
+    :data="data"
+    :height="height"
+    :max-height="maxHeight"
+    :stripe="stripe"
+    :border="border"
+    :size="size"
+    :fit="fit"
+    :show-header="showHeader"
+    :highlight-current-row="highlightCurrentRow"
+    :current-row-key="currentRowKey"
+    :row-class-name="rowClassName"
+    :row-style="rowStyle"
+    :cell-class-name="cellClassName"
+    :cell-style="cellStyle"
+    :header-row-class-name="headerRowClassName"
+    :header-row-style="headerRowStyle"
+    :header-cell-class-name="headerCellClassName"
+    :header-cell-style="headerCellStyle"
+    :row-key="rowRey"
+    :empty-text="emptyText"
+    :default-expand-all="defaultExpandAll"
+    :expand-row-keys="expandRowKeys"
+    :default-sort="defaultSort"
+    :tooltip-effect="tooltipEffect"
+    :show-summary="showSummary"
+    :sum-text="sumText"
+    :summary-method="summaryMethod"
+    :span-method="spanMethod"
+    :select-on-indeterminate="selectOnIndeterminate"
+    :indent="indent"
+    :lazy="lazy"
+    :load="load"
+    :tree-props="treeProps"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
+    @selection-change="handleSelectionChange"
+    @cell-mouse-enter="handleCellMouseEnter"
+    @cell-mouse-leave="handleCellMouseLeave"
+    @cell-click="handleCellClick"
+    @cell-dblclick="handleCellDoubleClick"
+    @row-click="handleRowClick"
+    @row-contextmenu="handleRowContextMenu"
+    @row-dblclick="handleRowDoubleClick"
+    @header-click="handleHeaderClick"
+    @header-contextmenu="handleHeaderContextMenu"
+    @sort-change="handleSortChange"
+    @filter-change="handleFilterChange"
+    @current-change="handleCurrentChange"
+    @header-dragend="handleHeaderDragend"
+    @expand-change="handleExpandChange"
+  >
+    <slot></slot>
+  </el-table>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { TooltipTheme } from '../Tooltip'
+import { TableSize } from './consts'
+
+@Component
+export default class STable extends Vue {
+  /**
+   * Data of the table
+   */
+  @Prop({ default: [], type: Array }) readonly data!: Array<any>
+  /**
+   * Table's height
+   */
+  @Prop({ default: 'auto' }) readonly height!: string | number
+  /**
+   * Table's max height
+   */
+  @Prop() readonly maxHeight!: string | number
+  /**
+   * Table's stripe attribute
+   */
+  @Prop({ default: false, type: Boolean }) readonly stripe!: boolean
+  /**
+   * Table's vertical border attribute
+   */
+  @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Table's size attribute
+   */
+  @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly fit!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly showHeader!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly currentRowKey!: string | number
+  /**
+   * TODO
+   */
+  @Prop() readonly rowClassName!: ({ row, rowIndex }) => Array<string> | string
+  /**
+   * TODO
+   */
+  @Prop() readonly rowStyle!: ({ row, rowIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly cellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  /**
+   * TODO
+   */
+  @Prop() readonly cellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly headerRowClassName!: ({ row, rowIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly headerRowStyle!: ({ row, rowIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly headerCellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  /**
+   * TODO
+   */
+  @Prop() readonly headerCellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  /**
+   * TODO
+   */
+  @Prop() readonly rowRey!: ({ row }) => string | string
+  /**
+   * TODO
+   */
+  @Prop({ default: 'No data', type: String }) readonly emptyText!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly defaultExpandAll!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ type: Array }) readonly expandRowKeys!: Array<any>
+  /**
+   * TODO
+   */
+  @Prop({ type: Object }) readonly defaultSort!: object
+  /**
+   * TODO
+   */
+  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipEffect!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly showSummary!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: 'Sum', type: String }) readonly sumText!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: 'Sum', type: String }) readonly summaryMethod!: ({ columns, data }) => string
+  /**
+   * TODO
+   */
+  @Prop({ default: 'Sum', type: String }) readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly selectOnIndeterminate!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: 16, type: Number }) readonly indent!: number
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly lazy!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly load!: (row, treeNode, resolve) => any
+  /**
+   * TODO
+   */
+  @Prop({ type: Object }) readonly treeProps!: object
+
+  handleSelect (selection, row): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection): void {
+    this.$emit('select-all', selection)
+  }
+
+  handleSelectionChange (selection): void {
+    this.$emit('selection-change', selection)
+  }
+
+  handleCellMouseEnter (row, column, cell, event): void {
+    this.$emit('cell-mouse-enter', row, column, cell, event)
+  }
+
+  handleCellMouseLeave (row, column, cell, event): void {
+    this.$emit('cell-mouse-leave', row, column, cell, event)
+  }
+
+  handleCellClick (row, column, cell, event): void {
+    this.$emit('cell-click', row, column, cell, event)
+  }
+
+  handleCellDoubleClick (row, column, cell, event): void {
+    this.$emit('cell-double-click', row, column, cell, event)
+  }
+
+  handleRowClick (row, column, event): void {
+    this.$emit('row-click', row, column, event)
+  }
+
+  handleRowContextMenu (row, column, event): void {
+    this.$emit('row-context-menu', row, column, event)
+  }
+
+  handleRowDoubleClick (row, column, event): void {
+    this.$emit('row-double-click', row, column, event)
+  }
+
+  handleHeaderClick (column, event): void {
+    this.$emit('header-click', column, event)
+  }
+
+  handleHeaderContextMenu (column, event): void {
+    this.$emit('header-context-menu', column, event)
+  }
+
+  handleSortChange ({ column, prop, order }): void {
+    this.$emit('sort-change', column, prop, order)
+  }
+
+  handleFilterChange (filters): void {
+    this.$emit('filter-change', filters)
+  }
+
+  handleCurrentChange (currentRow, oldCurrentRow): void {
+    this.$emit('current-change', currentRow, oldCurrentRow)
+  }
+
+  handleHeaderDragend (newWidth, oldWidth, column, event): void {
+    this.$emit('header-dragend', newWidth, oldWidth, column, event)
+  }
+
+  handleExpandChange (row, ...args): void {
+    this.$emit('expand-change', row, ...args)
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+</style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
new file mode 100644
index 00000000..9a6fb1dd
--- /dev/null
+++ b/src/components/Table/consts.ts
@@ -0,0 +1,3 @@
+import { Size } from '@/types/size'
+
+export const TableSize = Size
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
new file mode 100644
index 00000000..e69de29b

From 2742795584ddeb50fadc4b0f6476e18fb30a082d Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:39:52 +0400
Subject: [PATCH 16/29] Add table column component

---
 src/components/Table/STableColumn.vue | 161 ++++++++++++++++++++++++++
 src/components/index.ts               |   3 +
 2 files changed, 164 insertions(+)

diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index e69de29b..0c1c9d6e 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-table-column
+    ref="tableColumn"
+    :type="type"
+    :index="index"
+    :label="label"
+    :column-key="columnKey"
+    :prop="prop"
+    :width="width"
+    :min-width="minWidth"
+    :fixed="fixedPosition || false"
+    :render-header="renderHeader"
+    :sortable="sortable"
+    :sort-method="sortMethod"
+    :sort-by="sortBy"
+    :sort-orders="sortOrders"
+    :resizable="resizable"
+    :formatter="formatter"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :align="align"
+    :header-align="headerAlign"
+    :class-name="headerAlign"
+    :label-class-name="labelClassName"
+    :selectable="selectable"
+    :reserve-selection="reserveSelection"
+    :filters="filters"
+    :filter-placement="filterPlacement"
+    :filter-multiple="filterMultiple"
+    :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>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+
+import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
+import { TableColumn } from 'element-ui'
+
+@Component
+export default class STableColumn extends Vue {
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly type!: string
+  /**
+   * TODO
+   */
+  @Prop() readonly index!: number | ((index: number) => number)
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly columnKey!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly prop!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly width!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly minWidth!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly fixedPosition!: string
+  /**
+   * TODO
+   */
+  @Prop() readonly renderHeader!: (h, { column, $index }) => any
+  /**
+   * TODO
+   */
+  @Prop({ default: false }) readonly sortable!: boolean | 'custom'
+  /**
+   * TODO
+   */
+  @Prop() readonly sortMethod!: (a, b) => number
+  /**
+   * TODO
+   */
+  @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
+  /**
+   * TODO
+   */
+  @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly formatter!: (row, column, cellValue, index) => string
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly className!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly labelClassName!: string
+  /**
+   * TODO
+   */
+  @Prop() readonly selectable!: (row, index) => boolean
+  /**
+   * TODO
+   */
+  @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
+  /**
+   * TODO
+   */
+  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
+  /**
+   * TODO
+   */
+  @Prop({ default: '', type: String }) readonly filterPlacement!: string
+  /**
+   * TODO
+   */
+  @Prop({ default: true, type: Boolean }) readonly filterMultiple!: boolean
+  /**
+   * TODO
+   */
+  @Prop() readonly filterMethod!: (value, row, column) => boolean
+  /**
+   * TODO
+   */
+  @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Ref('tableColumn') tableColumn!: TableColumn
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 59e17f66..16e8ad4e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -20,6 +20,7 @@ import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
+import { STable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
 
 export {
@@ -52,5 +53,7 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STable,
+  STableColumn,
   STooltip
 }

From 26bfcd1bcf8ec66951add352a71137e86a1aa203 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:40:28 +0400
Subject: [PATCH 17/29] Add story for table component

---
 src/stories/Table/STable.stories.ts | 57 +++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/stories/Table/STable.stories.ts

diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
new file mode 100644
index 00000000..1c85b1a8
--- /dev/null
+++ b/src/stories/Table/STable.stories.ts
@@ -0,0 +1,57 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { STable, STableColumn } from '../../components'
+
+export default {
+  component: STable,
+  title: 'Design System/Table',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table :data="tableData" style="width: 100%">
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column
+                 prop="date"
+                 label="Date"
+                 width="180"
+               >
+               </s-table-column>
+               <s-table-column
+                 prop="name"
+                 label="Name"
+                 width="180"
+               >
+               </s-table-column>
+               <s-table-column
+                 prop="address"
+                 label="Address"
+               >
+               </s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: [
+      {
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      }
+    ]
+  })
+})

From bb2f0e0cdc6c2534b8d10a3eba5d9142500201c6 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:40:52 +0400
Subject: [PATCH 18/29] Modify table component

---
 src/components/Table/STable.vue | 48 +++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index b2092293..ca9d87d0 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -67,7 +67,7 @@ export default class STable extends Vue {
   /**
    * Data of the table
    */
-  @Prop({ default: [], type: Array }) readonly data!: Array<any>
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
   /**
    * Table's height
    */
@@ -107,39 +107,39 @@ export default class STable extends Vue {
   /**
    * TODO
    */
-  @Prop() readonly rowClassName!: ({ row, rowIndex }) => Array<string> | string
+  @Prop() readonly rowClassName!: string | (({ row, rowIndex }) => string)
   /**
    * TODO
    */
-  @Prop() readonly rowStyle!: ({ row, rowIndex }) => object | object
+  @Prop() readonly rowStyle!: object | (({ row, rowIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly cellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  @Prop() readonly cellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
    * TODO
    */
-  @Prop() readonly cellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  @Prop() readonly cellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly headerRowClassName!: ({ row, rowIndex }) => object | object
+  @Prop() readonly headerRowClassName!: object | (({ row, rowIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly headerRowStyle!: ({ row, rowIndex }) => object | object
+  @Prop() readonly headerRowStyle!: object | (({ row, rowIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly headerCellClassName!: ({ row, column, rowIndex, columnIndex }) => Array<string> | string
+  @Prop() readonly headerCellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
    * TODO
    */
-  @Prop() readonly headerCellStyle!: ({ row, column, rowIndex, columnIndex }) => object | object
+  @Prop() readonly headerCellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
    * TODO
    */
-  @Prop() readonly rowRey!: ({ row }) => string | string
+  @Prop() readonly rowRey!: string | (({ row }) => string)
   /**
    * TODO
    */
@@ -151,7 +151,7 @@ export default class STable extends Vue {
   /**
    * TODO
    */
-  @Prop({ type: Array }) readonly expandRowKeys!: Array<any>
+  @Prop() readonly expandRowKeys!: Array<any>
   /**
    * TODO
    */
@@ -171,11 +171,11 @@ export default class STable extends Vue {
   /**
    * TODO
    */
-  @Prop({ default: 'Sum', type: String }) readonly summaryMethod!: ({ columns, data }) => string
+  @Prop() readonly summaryMethod!: ({ columns, data }) => string
   /**
    * TODO
    */
-  @Prop({ default: 'Sum', type: String }) readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
+  @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
   /**
    * TODO
    */
@@ -269,5 +269,25 @@ export default class STable extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-
+.el-table__header {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 4px;
+    top: 7px;
+  }
+}
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: $color-neutral-hover;
+}
+.el-table__body {
+  tr {
+    &.hover-row {
+      > td,
+      &.current-row > td,
+      &.el-table__row--striped > td,
+      &.el-table__row--striped.current-row > td {
+        background-color: $color-neutral-hover;
+      }
+    }
+  }
+}
 </style>

From f5099f5fdfeaac1c7f0653981c85a4a04cb636ba Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:41:17 +0400
Subject: [PATCH 19/29] Add types for table component

---
 src/components/Table/consts.ts | 22 ++++++++++++++++++++++
 src/components/Table/index.ts  | 13 +++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index 9a6fb1dd..d5e92695 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,3 +1,25 @@
 import { Size } from '@/types/size'
 
+export enum ColumnType {
+  SELECTION = 'selection',
+  INDEX = 'index',
+  EXPAND = 'expand'
+}
+
+export enum ColumnFixedPosition {
+  LEFT = 'left',
+  RIGHT = 'right'
+}
+
+export enum SortDirection {
+  ASC = 'ascending',
+  DESC = 'descending'
+}
+
+export enum ColumnAlignment {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right'
+}
+
 export const TableSize = Size
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index e69de29b..2a46f9ea 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -0,0 +1,13 @@
+import STable from './STable.vue'
+import STableColumn from './STableColumn.vue'
+import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection, TableSize } from './consts'
+
+export {
+  STable,
+  STableColumn,
+  ColumnAlignment,
+  ColumnFixedPosition,
+  ColumnType,
+  SortDirection,
+  TableSize
+}

From d597cbcc8bb6ef6583f5bff86f356df7a3e6577c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 16:41:36 +0400
Subject: [PATCH 20/29] Fix code style

---
 src/components/Layout/App/SApp.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/App/SApp.vue b/src/components/Layout/App/SApp.vue
index d4616619..583a0d7a 100644
--- a/src/components/Layout/App/SApp.vue
+++ b/src/components/Layout/App/SApp.vue
@@ -1,17 +1,17 @@
 <template>
   <s-container class="s-app">
-    <s-aside v-if="this.$slots.aside" :width="asideWidth">
+    <s-aside v-if="$slots.aside" :width="asideWidth">
       <slot name="aside" />
     </s-aside>
     <s-container>
-      <s-header v-if="this.$slots.header" :height="headerHeight">
+      <s-header v-if="$slots.header" :height="headerHeight">
         <slot name="header" />
       </s-header>
       <slot></slot>
-      <s-main v-if="this.$slots.main">
+      <s-main v-if="$slots.main">
         <slot name="main" />
       </s-main>
-      <s-footer v-if="this.$slots.footer" :height="footerHeight">
+      <s-footer v-if="$slots.footer" :height="footerHeight">
         <slot name="footer" />
       </s-footer>
     </s-container>

From e67f253663fbb59c886def3d552429e4571382d5 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 18:20:52 +0400
Subject: [PATCH 21/29] Modify styles

---
 src/components/Table/STable.vue       | 31 ++++++++++++++++++++++++++-
 src/components/Table/STableColumn.vue |  4 ++--
 src/styles/variables.scss             |  1 +
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index ca9d87d0..2d5348cb 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -57,7 +57,8 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { ElTable } from 'element-ui/types/table'
 
 import { TooltipTheme } from '../Tooltip'
 import { TableSize } from './consts'
@@ -197,6 +198,8 @@ export default class STable extends Vue {
    */
   @Prop({ type: Object }) readonly treeProps!: object
 
+  @Ref('table') table!: ElTable
+
   handleSelect (selection, row): void {
     this.$emit('select', selection, row)
   }
@@ -269,6 +272,7 @@ export default class STable extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
+
 .el-table__header {
   .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
     height: 4px;
@@ -277,6 +281,8 @@ export default class STable extends Vue {
 }
 .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: $color-neutral-hover;
+  border-left: none;
+  border-right: none;
 }
 .el-table__body {
   tr {
@@ -286,8 +292,31 @@ export default class STable extends Vue {
       &.el-table__row--striped > td,
       &.el-table__row--striped.current-row > td {
         background-color: $color-neutral-hover;
+        border-left: none;
+        border-right: none;
       }
     }
   }
 }
+.el-table--border th:first-child .cell,
+.el-table--border td:first-child .cell {
+  padding-left: 13px;
+}
+.el-table thead {
+  color: $color-neutral-tertiary;
+}
+.el-table--group,
+.el-table--border,
+.el-table th.is-leaf,
+.el-table td,
+.el-table--border th {
+  border-color: $color-neutral-placeholder;
+}
+.el-table--group::after,
+.el-table--border::after {
+  background-color: $color-neutral-placeholder;
+}
+.el-table:not(.el-table--border)::before {
+  background-color: $color-basic-white;
+}
 </style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 0c1c9d6e..02fadba6 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -37,9 +37,9 @@
 
 <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'
-import { TableColumn } from 'element-ui'
 
 @Component
 export default class STableColumn extends Vue {
@@ -152,7 +152,7 @@ export default class STableColumn extends Vue {
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
 
-  @Ref('tableColumn') tableColumn!: TableColumn
+  @Ref('tableColumn') tableColumn!: ElTableColumn
 }
 </script>
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 581d8ea1..d1cc7572 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -7,6 +7,7 @@ $color-main-base: #FFF9FA;
 // Neutral colors
 $color-neutral-primary: #53565A;
 $color-neutral-secondary: #75787B;
+$color-neutral-tertiary: #909296;
 $color-neutral-inactive: #C8C9C7;
 $color-neutral-border: #D9D9D6;
 $color-neutral-hover: #F0F0F0;

From f13bfb6d5fc57c2ec1874adbbfc245b0fa5a9e7c Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 20:23:37 +0400
Subject: [PATCH 22/29] Complete table component

---
 src/components/Table/STable.vue | 201 +++++++++++++++++++++++++-------
 1 file changed, 158 insertions(+), 43 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 2d5348cb..34e43168 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -24,7 +24,7 @@
     :default-expand-all="defaultExpandAll"
     :expand-row-keys="expandRowKeys"
     :default-sort="defaultSort"
-    :tooltip-effect="tooltipEffect"
+    :tooltip-effect="tooltipTheme"
     :show-summary="showSummary"
     :sum-text="sumText"
     :summary-method="summaryMethod"
@@ -61,140 +61,186 @@ import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 
 import { TooltipTheme } from '../Tooltip'
-import { TableSize } from './consts'
+import { TableSize, SortDirection } from './consts'
 
 @Component
 export default class STable extends Vue {
   /**
-   * Data of the table
+   * Data of the table.
+   *
+   * By default it's set to an empty array
    */
   @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
   /**
-   * Table's height
+   * Table's height. It can be `number` with a number of pixels.
+   * Also, it can be a string with CSS height value.
+   *
+   * `"auto"` by default
    */
   @Prop({ default: 'auto' }) readonly height!: string | number
   /**
-   * Table's max height
+   * Table's max height. It can be `number` with a number of pixels.
+   * Also, it can be a string with CSS height value
    */
   @Prop() readonly maxHeight!: string | number
   /**
-   * Table's stripe attribute
+   * Table's stripe attribute.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly stripe!: boolean
   /**
-   * Table's vertical border attribute
+   * Table's vertical border attribute.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
   /**
-   * Table's size attribute
+   * Table's size attribute.
+   *
+   * `"big"` by default
    */
   @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
   /**
-   * TODO
+   * Will width of column automatically be fit its container.
+   *
+   * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly fit!: boolean
   /**
-   * TODO
+   * Will table header be visible.
+   *
+   * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly showHeader!: boolean
   /**
-   * TODO
+   * Will selected row be highlighted.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly highlightCurrentRow!: boolean
   /**
-   * TODO
+   * A key of the current row. Can be `string` or `number`
    */
   @Prop() readonly currentRowKey!: string | number
   /**
-   * TODO
+   * Custom class names for the row. Can be `string` or `({ row, rowIndex }) => string`
    */
   @Prop() readonly rowClassName!: string | (({ row, rowIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the row. Can be `object` or `({ row, rowIndex }) => object`
    */
   @Prop() readonly rowStyle!: object | (({ row, rowIndex }) => object)
   /**
-   * TODO
+   * Custom class names for the cell. Can be `string` or `({ row, column, rowIndex, columnIndex }) => string`
    */
   @Prop() readonly cellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the cell. Can be `object` or `({ row, column, rowIndex, columnIndex }) => object`
    */
   @Prop() readonly cellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
-   * TODO
+   * Custom class names for the row header. Can be `string` or `({ row, rowIndex }) => string`
    */
-  @Prop() readonly headerRowClassName!: object | (({ row, rowIndex }) => object)
+  @Prop() readonly headerRowClassName!: string | (({ row, rowIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the row header. Can be `object` or `({ row, rowIndex }) => object`
    */
   @Prop() readonly headerRowStyle!: object | (({ row, rowIndex }) => object)
   /**
-   * TODO
+   * Custom class names for the cell header. Can be `string` or `({ row, column, rowIndex, columnIndex }) => string`
    */
   @Prop() readonly headerCellClassName!: string | (({ row, column, rowIndex, columnIndex }) => string)
   /**
-   * TODO
+   * Custom styles for the cell header. Can be `object` or `({ row, column, rowIndex, columnIndex }) => object`
    */
   @Prop() readonly headerCellStyle!: object | (({ row, column, rowIndex, columnIndex }) => object)
   /**
-   * TODO
+   * A key of the row data, used for optimizing rendering.
+   * Required if `reserve-selection` is true or display tree data.
+   * When its type is `string`, multi-level access is supported,
+   * e.g. `user.info.id`, but `user.info[0].id` is not supported,
+   * in which case `({ row }) => string` should be used.
    */
   @Prop() readonly rowRey!: string | (({ row }) => string)
   /**
-   * TODO
+   * A message for an empty data array.
+   *
+   * By default it's set to `"No data"`
    */
   @Prop({ default: 'No data', type: String }) readonly emptyText!: string
   /**
-   * TODO
+   * Expand all rows by default.
+   * It works when the table has a column with `type="expand"` or contains tree structure data
    */
   @Prop({ default: false, type: Boolean }) readonly defaultExpandAll!: boolean
   /**
-   * TODO
+   * Set expanded rows by this property, prop's value is the keys of expand rows.
+   * You should set `row-key` before using this property
    */
   @Prop() readonly expandRowKeys!: Array<any>
   /**
-   * TODO
+   * Set the default sort column and order object.
+   *
+   * `prop` is used to set default sort column,
+   *
+   * `order` is used to set default sort order: `"ascending"`, `"descending"`
    */
   @Prop({ type: Object }) readonly defaultSort!: object
   /**
-   * TODO
+   * Tooltip theme property. Can be `"dark"` or `"light"`.
+   *
+   * `"dark"` by default
    */
-  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipEffect!: string
+  @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipTheme!: string
   /**
-   * TODO
+   * Will summary row be shown.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly showSummary!: boolean
   /**
-   * TODO
+   * Text for the summary row.
+   *
+   * `"Sum"` by default
    */
   @Prop({ default: 'Sum', type: String }) readonly sumText!: string
   /**
-   * TODO
+   * Custom summary method. `({ columns, data }) => string`
    */
   @Prop() readonly summaryMethod!: ({ columns, data }) => string
   /**
-   * TODO
+   * Method that returns rowspan and colspan. `({ row, column, rowIndex, columnIndex }) => any`
    */
   @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
   /**
-   * TODO
+   * Controls the behavior of master checkbox in multi-select tables
+   * when only some rows are selected (but not all).
+   *
+   * If `true`, all rows will be selected, else deselected.
+   *
+   * `true` by default
    */
   @Prop({ default: true, type: Boolean }) readonly selectOnIndeterminate!: boolean
   /**
-   * TODO
+   * Horizontal indentation of tree data.
+   *
+   * `16` by default
    */
   @Prop({ default: 16, type: Number }) readonly indent!: number
   /**
-   * TODO
+   * Will the data will be lazy loaded.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly lazy!: boolean
   /**
-   * TODO
+   * The method for loading child row data, only works when `lazy` is true.
+   * `(row, treeNode, resolve) => any`
    */
   @Prop() readonly load!: (row, treeNode, resolve) => any
   /**
-   * TODO
+   * A configuration for rendering nested data
    */
   @Prop({ type: Object }) readonly treeProps!: object
 
@@ -267,18 +313,48 @@ export default class STable extends Vue {
   handleExpandChange (row, ...args): void {
     this.$emit('expand-change', row, ...args)
   }
+
+  clearSelection (): void {
+    this.table.clearSelection()
+  }
+
+  toggleRowSelection (row: object, selected?: boolean): void {
+    this.table.toggleRowSelection(row, selected)
+  }
+
+  toggleAllSelection (): void {
+    this.table.toggleAllSelection()
+  }
+
+  toggleRowExpansion (row: object, expanded?: boolean): void {
+    this.table.toggleRowExpansion(row, expanded)
+  }
+
+  setCurrentRow (row?: object): void {
+    this.table.setCurrentRow(row)
+  }
+
+  clearSort (): void {
+    this.table.clearSort()
+  }
+
+  clearFilter (): void {
+    this.table.clearFilter()
+  }
+
+  doLayout (): void {
+    this.table.doLayout()
+  }
+
+  sort (prop: string, order: SortDirection): void {
+    this.table.sort(prop, order)
+  }
 }
 </script>
 
 <style lang="scss">
 @import "../../styles/variables.scss";
 
-.el-table__header {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    height: 4px;
-    top: 7px;
-  }
-}
 .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: $color-neutral-hover;
   border-left: none;
@@ -319,4 +395,43 @@ export default class STable extends Vue {
 .el-table:not(.el-table--border)::before {
   background-color: $color-basic-white;
 }
+.el-table tr:last-child td {
+  border-color: $color-basic-white;
+}
+.el-table__header {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 4px;
+    top: 7px;
+  }
+}
+.el-table--medium {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 5px;
+  }
+  .el-checkbox__inner {
+    height: 16px;
+    width: 16px;
+    &::after {
+      top: 0;
+      left: 4px;
+      height: 8px;
+      width: 4px;
+    }
+  }
+}
+.el-table--small {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 4px;
+  }
+  .el-checkbox__inner {
+    height: 14px;
+    width: 14px;
+    &::after {
+      top: 1px;
+      left: 4px;
+      height: 6px;
+      width: 2px;
+    }
+  }
+}
 </style>

From f5bbe19f87b84032f47a30eac73884f7fc7e40ff Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 21:13:42 +0400
Subject: [PATCH 23/29] Fix issues

---
 src/components/Table/STable.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 34e43168..3500aabf 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -202,17 +202,19 @@ export default class STable extends Vue {
   /**
    * Text for the summary row.
    *
-   * `"Sum"` by default
+   * `"Tot"` by default
    */
-  @Prop({ default: 'Sum', type: String }) readonly sumText!: string
+  @Prop({ default: 'Tot', type: String }) readonly sumText!: string
   /**
    * Custom summary method. `({ columns, data }) => string`
    */
   @Prop() readonly summaryMethod!: ({ columns, data }) => string
   /**
-   * Method that returns rowspan and colspan. `({ row, column, rowIndex, columnIndex }) => any`
+   * Method that returns rowspan and colspan.
+   *
+   * `({ row, column, rowIndex, columnIndex }) => Array<number> | { rowspan: number; colspan: number }`
    */
-  @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => any
+  @Prop() readonly spanMethod!: ({ row, column, rowIndex, columnIndex }) => Array<number> | { rowspan: number; colspan: number }
   /**
    * Controls the behavior of master checkbox in multi-select tables
    * when only some rows are selected (but not all).
@@ -338,7 +340,11 @@ export default class STable extends Vue {
     this.table.clearSort()
   }
 
-  clearFilter (): void {
+  clearFilter (filterName: string): void {
+    (this.table as any).clearFilter(filterName)
+  }
+
+  clearFilters (): void {
     this.table.clearFilter()
   }
 
@@ -396,7 +402,7 @@ export default class STable extends Vue {
   background-color: $color-basic-white;
 }
 .el-table tr:last-child td {
-  border-color: $color-basic-white;
+  border-bottom-color: $color-basic-white;
 }
 .el-table__header {
   .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
@@ -434,4 +440,8 @@ export default class STable extends Vue {
     }
   }
 }
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  background-color: $color-neutral-placeholder;
+}
 </style>

From 4e716a14463edee67fe556ffda1604129f909fe4 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 21:14:06 +0400
Subject: [PATCH 24/29] Finish story for table component

---
 src/stories/Table/STable.stories.ts | 103 ++++++++++++++++------------
 1 file changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 1c85b1a8..51a91d7c 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -1,57 +1,76 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { STable, STableColumn } from '../../components'
+import { TableSize } from '../../components/Table'
 
 export default {
   component: STable,
   title: 'Design System/Table',
-  decorators: [withKnobs]
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
 }
 
+export const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]
+
 export const configurable = () => ({
   components: { STable, STableColumn },
-  template: `<s-table :data="tableData" style="width: 100%">
+  template: `<s-table
+               :data="tableData"
+               :size="size"
+               :height="height"
+               :stripe="stripe"
+               :border="border"
+               :show-header="showHeader"
+               :highlight-current-row="highlightCurrentRow"
+             >
                <s-table-column type="selection"></s-table-column>
-               <s-table-column
-                 prop="date"
-                 label="Date"
-                 width="180"
-               >
-               </s-table-column>
-               <s-table-column
-                 prop="name"
-                 label="Name"
-                 width="180"
-               >
-               </s-table-column>
-               <s-table-column
-                 prop="address"
-                 label="Address"
-               >
-               </s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="name" label="Name" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
              </s-table>`,
   data: () => ({
-    tableData: [
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      }
-    ]
-  })
+    tableData: tableData
+  }),
+  props: {
+    height: {
+      default: text('Height', 'auto')
+    },
+    stripe: {
+      default: boolean('Stripe', false)
+    },
+    border: {
+      default: boolean('Border', false)
+    },
+    showHeader: {
+      default: boolean('Show header', true)
+    },
+    size: {
+      default: select('Size', Object.values(TableSize), TableSize.BIG)
+    },
+    highlightCurrentRow: {
+      default: boolean('Highlight current row', false)
+    }
+  }
 })

From 98c445edddd8204b4e69c7d5964b06f48dd6d437 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Wed, 5 Aug 2020 21:36:37 +0400
Subject: [PATCH 25/29] Add new stories for Table component

---
 src/components/Table/STable.vue     | 18 +++---
 src/stories/Table/STable.stories.ts | 95 +++++++++++++++++++++++++++--
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 3500aabf..845d736d 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -25,9 +25,9 @@
     :expand-row-keys="expandRowKeys"
     :default-sort="defaultSort"
     :tooltip-effect="tooltipTheme"
-    :show-summary="showSummary"
-    :sum-text="sumText"
-    :summary-method="summaryMethod"
+    :show-summary="showTotal"
+    :sum-text="totalText"
+    :summary-method="totalMethod"
     :span-method="spanMethod"
     :select-on-indeterminate="selectOnIndeterminate"
     :indent="indent"
@@ -194,21 +194,21 @@ export default class STable extends Vue {
    */
   @Prop({ default: TooltipTheme.DARK, type: String }) readonly tooltipTheme!: string
   /**
-   * Will summary row be shown.
+   * Will total row be shown.
    *
    * `false` by default
    */
-  @Prop({ default: false, type: Boolean }) readonly showSummary!: boolean
+  @Prop({ default: false, type: Boolean }) readonly showTotal!: boolean
   /**
-   * Text for the summary row.
+   * Text for the total row.
    *
    * `"Tot"` by default
    */
-  @Prop({ default: 'Tot', type: String }) readonly sumText!: string
+  @Prop({ default: 'Tot', type: String }) readonly totalText!: string
   /**
-   * Custom summary method. `({ columns, data }) => string`
+   * Custom total method. `({ columns, data }) => string`
    */
-  @Prop() readonly summaryMethod!: ({ columns, data }) => string
+  @Prop() readonly totalMethod!: ({ columns, data }) => string
   /**
    * Method that returns rowspan and colspan.
    *
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 51a91d7c..2d12f3b0 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -13,22 +13,22 @@ export default {
 export const tableData = [
   {
     date: '2016-05-03',
-    name: 'Tom',
+    amount: '1.56',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-02',
-    name: 'Tom',
+    amount: '-99',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-04',
-    name: 'Tom',
+    amount: '0',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-01',
-    name: 'Tom',
+    amount: '55555',
     address: 'No. 189, Grove St, Los Angeles'
   }
 ]
@@ -46,7 +46,7 @@ export const configurable = () => ({
              >
                <s-table-column type="selection"></s-table-column>
                <s-table-column prop="date" label="Date" width="180"></s-table-column>
-               <s-table-column prop="name" label="Name" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
                <s-table-column prop="address" label="Address"></s-table-column>
                <s-table-column type="expand">Hello</s-table-column>
              </s-table>`,
@@ -74,3 +74,88 @@ export const configurable = () => ({
     }
   }
 })
+
+export const withBorder = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               border
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const striped = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               stripe
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const withAllExpandedRows = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               default-expand-all
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const withTotalRow = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               show-total
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
+
+export const withDefaultSort = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               :defaultSort="{ prop: 'amount', order: 'descending' }"
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column sortable prop="date" label="Date" width="180"></s-table-column>
+               <s-table-column sortable prop="amount" label="Amount" width="180"></s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})

From 0a0b2179fc4ad5b90c24fc924d4828d72974d77f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:37:51 +0400
Subject: [PATCH 26/29] Add docs

---
 src/components/Table/STableColumn.vue | 92 ++++++++++++++++++---------
 1 file changed, 63 insertions(+), 29 deletions(-)

diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 02fadba6..05d89e94 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -44,111 +44,145 @@ import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
 @Component
 export default class STableColumn extends Vue {
   /**
-   * TODO
+   * Type of the column. Can be `"selection"`, `"index"` or `"expand"`.
+   * If it's not defined, then it will be usual column without modifications
    */
   @Prop({ default: '', type: String }) readonly type!: string
   /**
-   * TODO
+   * Customize indices for each row. It works on columns with `type="index"`.
+   * Can be `number` or `(index: number) => number`
    */
   @Prop() readonly index!: number | ((index: number) => number)
   /**
-   * TODO
+   * Label of the column
    */
   @Prop({ default: '', type: String }) readonly label!: string
   /**
-   * TODO
+   * Column's key. If you need to use the `filter-change` event,
+   * you need this attribute to identify which column is being filtered
    */
   @Prop({ default: '', type: String }) readonly columnKey!: string
   /**
-   * TODO
+   * Name of the field
    */
   @Prop({ default: '', type: String }) readonly prop!: string
   /**
-   * TODO
+   * Column width in pixels. For instance, `width="80"`
    */
   @Prop({ default: '', type: String }) readonly width!: string
   /**
-   * TODO
+   * Column minimum width in pixels. Columns with `width` has a fixed width,
+   * while columns with `min-width` has a width that is distributed in proportion.
+   * For instance, `min-width="80"`
    */
   @Prop({ default: '', type: String }) readonly minWidth!: string
   /**
-   * TODO
+   * Will column be fixed at `"left"` or `"right"` position.
+   * If it's not defined, then it will be not fixed by default.
    */
   @Prop({ default: '', type: String }) readonly fixedPosition!: string
   /**
-   * TODO
+   * Render function for table header of this column.
+   * `(h, { column, $index }) => any`
    */
   @Prop() readonly renderHeader!: (h, { column, $index }) => any
   /**
-   * TODO
+   * Will column be sorted. Possible values: `true`, `false`, `"custom"`
+   * Remote sorting can be done by setting this attribute to `"custom"`
+   * and listening to the `sort-change` event of the Table component
    */
   @Prop({ default: false }) readonly sortable!: boolean | 'custom'
   /**
-   * TODO
+   * Sorting method like `Array.sort`, works when `sortable` is true.
+   * `(a, b) => number`
    */
   @Prop() readonly sortMethod!: (a, b) => number
   /**
-   * TODO
+   * Specify which property to sort by, works when `sortable` is true and `sort-method` is undefined.
+   * If set to an Array, the column will sequentially sort by the next property if the previous one is equal.
+   *
+   * Can be `string`, `Array<string>` or `(row, index) => string | Array<string>`
    */
   @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
   /**
-   * TODO
+   * The order of the sorting strategies used when sorting the data,
+   * works when `sortable` is true.
+   * Accepts an array, as the user clicks on the header,
+   * the column is sorted in order of the elements in the array.
+   *
+   * The elements in the array need to be one of the following: `"ascending"`, `"descending"` and `null`.
+   *
+   * `[SortDirection.ASC, SortDirection.DESC, null]` is set by default
    */
   @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
   /**
-   * TODO
+   * Can column be resized. It works only when the table has `border` set to true.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
   /**
-   * TODO
+   * A function that formats cell content. `(row, column, cellValue, index) => any`
    */
-  @Prop() readonly formatter!: (row, column, cellValue, index) => string
+  @Prop() readonly formatter!: (row, column, cellValue, index) => any
   /**
-   * TODO
+   * Will extra content be hidden and be replaced with a tooltip when hovering on the cell.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
   /**
-   * TODO
+   * Alignment property of the table column. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
    */
   @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
   /**
-   * TODO
+   * Alignment property of the column header. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
    */
   @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
   /**
-   * TODO
+   * Class name of cells in the column
    */
   @Prop({ default: '', type: String }) readonly className!: string
   /**
-   * TODO
+   * Class name of the label of this column
    */
   @Prop({ default: '', type: String }) readonly labelClassName!: string
   /**
-   * TODO
+   * A function that determines if a certain row can be selected.
+   * It works when `type="selection"`. `(row, index) => boolean`
    */
   @Prop() readonly selectable!: (row, index) => boolean
   /**
-   * TODO
+   * Will selection be reserved after data refreshing.
+   * It works when `type="selection"`.
+   *
+   * `row-key` is required for this to work.
+   *
+   * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
   /**
-   * TODO
+   * TODO: create custom dropdown menu with filters
    */
   @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
   @Prop({ default: '', type: String }) readonly filterPlacement!: string
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
-  @Prop({ default: true, type: Boolean }) readonly filterMultiple!: boolean
+  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
   @Prop() readonly filterMethod!: (value, row, column) => boolean
   /**
-   * TODO
+   * TODO: comment it when it'll be implemented
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
 

From de3a3ebe7cf08c023d4961fa80a174941caab732 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:38:26 +0400
Subject: [PATCH 27/29] Add table column stories

---
 src/stories/Table/STable.stories.ts       |  12 +--
 src/stories/Table/STableColumn.stories.ts | 103 ++++++++++++++++++++++
 2 files changed, 109 insertions(+), 6 deletions(-)
 create mode 100644 src/stories/Table/STableColumn.stories.ts

diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 2d12f3b0..daccf7de 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -12,24 +12,24 @@ export default {
 
 export const tableData = [
   {
-    date: '2016-05-03',
+    date: '2017-05-03',
     amount: '1.56',
     address: 'No. 189, Grove St, Los Angeles'
   },
   {
     date: '2016-05-02',
     amount: '-99',
-    address: 'No. 189, Grove St, Los Angeles'
+    address: 'No. 190, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-04',
+    date: '2018-05-04',
     amount: '0',
-    address: 'No. 189, Grove St, Los Angeles'
+    address: 'No. 191, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-01',
+    date: '2015-05-01',
     amount: '55555',
-    address: 'No. 189, Grove St, Los Angeles'
+    address: 'No. 192, Grove St, Los Angeles'
   }
 ]
 
diff --git a/src/stories/Table/STableColumn.stories.ts b/src/stories/Table/STableColumn.stories.ts
new file mode 100644
index 00000000..1ec6025b
--- /dev/null
+++ b/src/stories/Table/STableColumn.stories.ts
@@ -0,0 +1,103 @@
+import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { STable, STableColumn } from '../../components'
+import { ColumnAlignment } from '../../components/Table'
+
+import { tableData } from './STable.stories'
+
+export default {
+  component: STableColumn,
+  title: 'Design System/Table/Table Column',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               border
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column
+                 prop="date"
+                 width="80"
+                 resizable
+                 :label="label"
+                 :show-overflow-tooltip="showOverflowTooltip"
+                 :align="align"
+                 :header-align="headerAlign"
+               >
+               </s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData
+  }),
+  props: {
+    label: {
+      default: text('Label', 'Date')
+    },
+    showOverflowTooltip: {
+      default: boolean('Show overflow tooltip', true)
+    },
+    align: {
+      default: select('Align', Object.values(ColumnAlignment), ColumnAlignment.LEFT)
+    },
+    headerAlign: {
+      default: select('Header align', Object.values(ColumnAlignment), ColumnAlignment.LEFT)
+    }
+  }
+})
+
+export const withFilters = () => ({
+  components: { STable, STableColumn },
+  template: `<s-table
+               :data="tableData"
+               border
+             >
+               <s-table-column type="selection"></s-table-column>
+               <s-table-column
+                 prop="date"
+                 width="80"
+                 resizable
+                 label="Date"
+                 show-overflow-tooltip
+                 :filters="tableFilters"
+                 :filterMethod="filterDate"
+                 :filter-multiple="filterMultiple"
+               >
+               </s-table-column>
+               <s-table-column prop="address" label="Address"></s-table-column>
+               <s-table-column type="expand">Hello</s-table-column>
+             </s-table>`,
+  data: () => ({
+    tableData: tableData,
+    tableFilters: [
+      { text: '< 2016-01-01', value: 1 },
+      { text: 'between 2016-01-01 and 2016-05-01', value: 2 },
+      { text: 'between 2016-05-01 and 2018-05-05', value: 3 },
+      { text: '> 2019-01-01', value: 4 }
+    ],
+    filterDate: (value: number, row: any) => {
+      const date = new Date(row.date).getTime()
+      switch (value) {
+        case 1:
+          return date < new Date('2016-01-01').getTime()
+        case 2:
+          return date > new Date('2016-01-01').getTime() && date < new Date('2016-05-01').getTime()
+        case 3:
+          return date > new Date('2016-05-01').getTime() && date < new Date('2018-05-05').getTime()
+        case 4:
+          return date > new Date('2019-01-01').getTime()
+      }
+      return true
+    }
+  }),
+  props: {
+    filterMultiple: {
+      default: boolean('Filter multiple', false)
+    }
+  }
+})

From 7aaa86ff8dce8d84c5a75149bf14f087bd6c9e65 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:38:46 +0400
Subject: [PATCH 28/29] Modify table component

---
 src/components/Table/STable.vue | 51 +++++++++++++++++++--------------
 src/components/Table/consts.ts  |  4 ++-
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 845d736d..403e09ca 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -53,12 +53,14 @@
     @expand-change="handleExpandChange"
   >
     <slot></slot>
+    <slot slot="empty" name="empty"></slot>
   </el-table>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
+import { ElTableColumn } from 'element-ui/types/table-column'
 
 import { TooltipTheme } from '../Tooltip'
 import { TableSize, SortDirection } from './consts'
@@ -248,51 +250,51 @@ export default class STable extends Vue {
 
   @Ref('table') table!: ElTable
 
-  handleSelect (selection, row): void {
+  handleSelect (selection: Array<any>, row: any): void {
     this.$emit('select', selection, row)
   }
 
-  handleSelectAll (selection): void {
+  handleSelectAll (selection: Array<any>): void {
     this.$emit('select-all', selection)
   }
 
-  handleSelectionChange (selection): void {
+  handleSelectionChange (selection: Array<any>): void {
     this.$emit('selection-change', selection)
   }
 
-  handleCellMouseEnter (row, column, cell, event): void {
+  handleCellMouseEnter (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-mouse-enter', row, column, cell, event)
   }
 
-  handleCellMouseLeave (row, column, cell, event): void {
+  handleCellMouseLeave (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-mouse-leave', row, column, cell, event)
   }
 
-  handleCellClick (row, column, cell, event): void {
+  handleCellClick (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-click', row, column, cell, event)
   }
 
-  handleCellDoubleClick (row, column, cell, event): void {
+  handleCellDoubleClick (row: any, column: ElTableColumn, cell: HTMLElement, event: MouseEvent): void {
     this.$emit('cell-double-click', row, column, cell, event)
   }
 
-  handleRowClick (row, column, event): void {
+  handleRowClick (row: any, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('row-click', row, column, event)
   }
 
-  handleRowContextMenu (row, column, event): void {
+  handleRowContextMenu (row: any, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('row-context-menu', row, column, event)
   }
 
-  handleRowDoubleClick (row, column, event): void {
+  handleRowDoubleClick (row: any, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('row-double-click', row, column, event)
   }
 
-  handleHeaderClick (column, event): void {
+  handleHeaderClick (column: ElTableColumn, event: MouseEvent): void {
     this.$emit('header-click', column, event)
   }
 
-  handleHeaderContextMenu (column, event): void {
+  handleHeaderContextMenu (column: ElTableColumn, event: MouseEvent): void {
     this.$emit('header-context-menu', column, event)
   }
 
@@ -300,20 +302,21 @@ export default class STable extends Vue {
     this.$emit('sort-change', column, prop, order)
   }
 
-  handleFilterChange (filters): void {
-    this.$emit('filter-change', filters)
+  handleFilterChange (filterPanel: any): void {
+    const filterArray = Object.values(filterPanel)[0]
+    this.$emit('filter-change', filterArray)
   }
 
-  handleCurrentChange (currentRow, oldCurrentRow): void {
+  handleCurrentChange (currentRow: any, oldCurrentRow: any): void {
     this.$emit('current-change', currentRow, oldCurrentRow)
   }
 
-  handleHeaderDragend (newWidth, oldWidth, column, event): void {
+  handleHeaderDragend (newWidth: number, oldWidth: number, column: ElTableColumn, event: MouseEvent): void {
     this.$emit('header-dragend', newWidth, oldWidth, column, event)
   }
 
-  handleExpandChange (row, ...args): void {
-    this.$emit('expand-change', row, ...args)
+  handleExpandChange (row: any, expandedRows: Array<any>): void {
+    this.$emit('expand-change', row, expandedRows)
   }
 
   clearSelection (): void {
@@ -405,9 +408,15 @@ export default class STable extends Vue {
   border-bottom-color: $color-basic-white;
 }
 .el-table__header {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    height: 4px;
-    top: 7px;
+  label.el-checkbox.is-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .el-checkbox__input {
+    &.is-indeterminate .el-checkbox__inner::before {
+      height: 4px;
+      top: 7px;
+    }
   }
 }
 .el-table--medium {
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index d5e92695..ec3b1914 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,5 @@
-import { Size } from '@/types/size'
+import { Size } from '../../types/size'
+import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
   SELECTION = 'selection',
@@ -23,3 +24,4 @@ export enum ColumnAlignment {
 }
 
 export const TableSize = Size
+export const ColumnFilterPlacement = TooltipPlacement

From 325141cd6be433e278b94300184efd49a5a70abd Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 6 Aug 2020 09:41:42 +0400
Subject: [PATCH 29/29] Add exports

---
 src/index.ts            | 6 ++++++
 src/types/components.ts | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 61d5a248..12c29690 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,6 +30,8 @@ import {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STable,
+  STableColumn,
   STooltip
 } from './components'
 import { Components } from './types/components'
@@ -65,6 +67,8 @@ const elements = [
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSubmenu, name: Components.SSubmenu },
+  { component: STable, name: Components.STable },
+  { component: STableColumn, name: Components.STableColumn },
   { component: STooltip, name: Components.STooltip }
 ]
 
@@ -111,6 +115,8 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSubmenu,
+  STable,
+  STableColumn,
   STooltip
 }
 export default SoramitsuElements
diff --git a/src/types/components.ts b/src/types/components.ts
index 701af730..ed91efee 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -28,5 +28,7 @@ export enum Components {
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',
   SSubmenu = 'SSubmenu',
+  STable = 'STable',
+  STableColumn = 'STableColumn',
   STooltip = 'STooltip'
 }