Release 0.7.7

package.json

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

src/components/Card/SCard.vue

@@ -16,6 +16,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { CardShadow } from './consts'
+import { BorderRadius } from '@/types'
 
 @Component
 export default class SCard extends Mixins(BorderRadiusMixin) {
@@ -42,6 +43,8 @@ export default class SCard extends Mixins(BorderRadiusMixin) {
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
+  @Prop({ default: BorderRadius.MEDIUM }) borderRadius!: string
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.isStandardBorderRadius) {

src/components/DatePicker/SDatePicker.vue

@@ -8,6 +8,7 @@
       :unlink-panels="unlinkPanels"
       :readonly="readonly"
       :disabled="disabled"
+      :size="size"
       :editable="editable"
       :clearable="willHaveClearButton"
       :placeholder="placeholder"
@@ -35,15 +36,18 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { ElFormItem } from 'element-ui/types/form-item'
 
 // TODO: ask do we need size prop for the component?
 // Prev comment => TODO: ask design team
+import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 @Component
-export default class SDatePicker extends Mixins(BorderRadiusMixin) {
+export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.
    * Can be date object / array with date objects for date range picker
@@ -172,6 +176,9 @@ export default class SDatePicker extends Mixins(BorderRadiusMixin) {
 
   @Ref('picker') picker!: any
 
+  @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
+  @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
+
   model = this.value
   focused = false
 
@@ -219,6 +226,11 @@ export default class SDatePicker extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = ['s-date-picker']
+    if ((this.elForm || this.elFormItem || {}).size) {
+      cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
+    } else if (this.isStandardSize) {
+      cssClasses.push(`s-${this.size}`)
+    }
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }

src/components/ScrollSections/SScrollSectionItem.vue

@@ -3,7 +3,7 @@
     <span v-if="title" class="title">{{ title }}</span>
     <slot v-if="this.$slots.title && !title" name="title"></slot>
     <slot></slot>
-    <s-divider v-if="withDivider" style="margin: 20px 0 0 0;"></s-divider>
+    <s-divider v-if="withDivider" type="primary" style="margin: 20px 0 0 0;"></s-divider>
   </section>
 </template>
 

src/components/Select/SSelect.vue

@@ -7,6 +7,7 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :loading="loading"
+      :size="inputType === 'select' ? size : undefined"
       :multiple="multiple"
       :loading-text="loadingText"
       :clearable="clearable"
@@ -26,14 +27,17 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { ElFormItem } from 'element-ui/types/form-item'
 
+import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete } from '../Input'
 import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Mixins(BorderRadiusMixin) {
+export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -113,6 +117,9 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
 
   @Ref('select') select!: any
 
+  @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
+  @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
+
   model = this.value
   focused = false
 
@@ -157,6 +164,13 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.inputType === 'select') {
+      if ((this.elForm || this.elFormItem || {}).size) {
+        cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
+      } else if (this.isStandardSize) {
+        cssClasses.push(`s-${this.size}`)
+      }
+    }
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }

src/components/Table/STable.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Provide } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
@@ -353,5 +353,7 @@ export default class STable extends Mixins(SizeMixin) {
   sort (prop: string, order: SortDirection): void {
     this.table.sort(prop, order)
   }
+
+  @Provide('sTable') sTable = this
 }
 </script>

src/components/Table/STableColumn.vue

@@ -5,7 +5,7 @@
     :label="label"
     :column-key="columnKey"
     :prop="prop"
-    :width="width"
+    :width="computedWidth"
     :min-width="minWidth"
     :fixed="fixedPosition || false"
     :render-header="renderHeader"
@@ -18,7 +18,7 @@
     :show-overflow-tooltip="showOverflowTooltip"
     :align="align"
     :header-align="headerAlign"
-    :class-name="headerAlign"
+    :class-name="className"
     :label-class-name="labelClassName"
     :selectable="selectable"
     :reserve-selection="reserveSelection"
@@ -34,9 +34,11 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
 
-import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
+import { Size } from '@/types'
+
+import { SortDirection, ColumnAlignment } from './consts'
 
 @Component
 export default class STableColumn extends Vue {
@@ -66,13 +68,13 @@ export default class STableColumn extends Vue {
   /**
    * Column width in pixels. For instance, `width="80"`
    */
-  @Prop({ default: '', type: String }) readonly width!: string
+  @Prop({ type: String }) readonly width!: string
   /**
    * 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
+  @Prop({ type: String }) readonly minWidth!: string
   /**
    * Will column be fixed at `"left"` or `"right"` position.
    * If it's not defined, then it will be not fixed by default.
@@ -143,7 +145,7 @@ export default class STableColumn extends Vue {
   /**
    * Class name of cells in the column
    */
-  @Prop({ default: '', type: String }) readonly className!: string
+  @Prop({ type: String }) readonly className!: string
   /**
    * Class name of the label of this column
    */
@@ -182,5 +184,24 @@ export default class STableColumn extends Vue {
    * TODO: comment it when it'll be implemented
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Inject({ default: '', from: 'sTable' }) sTable
+
+  get computedWidth () {
+    const tableBorder = (this.sTable || {}).border
+    const size = (this.sTable || {}).size
+    if (!this.width && this.type === 'selection' && size) {
+      return !tableBorder ? ({
+        [Size.SMALL]: '30',
+        [Size.MEDIUM]: '32',
+        [Size.BIG]: '36'
+      }[size]) : ({
+        [Size.SMALL]: '42',
+        [Size.MEDIUM]: '44',
+        [Size.BIG]: '48'
+      }[size])
+    }
+    return this.width
+  }
 }
 </script>

src/index.ts

@@ -54,6 +54,7 @@ import { Directives } from './types/directives'
 import { modules, Modules } from './store'
 import { setTheme } from './utils'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
+import { SDialogMixin } from './mixins'
 
 const components = [
   { component: SApp, name: Components.SApp },
@@ -177,6 +178,7 @@ export {
   STabs,
   STable,
   STableColumn,
-  STooltip
+  STooltip,
+  SDialogMixin
 }
 export default SoramitsuElements

src/mixins/SDialogMixin.ts

@@ -0,0 +1,23 @@
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+@Component
+export default class SDialogMixin extends Vue {
+  /**
+   * Dialog visibility
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false, required: true }) readonly visible!: boolean
+
+  isVisible = this.visible
+
+  @Watch('visible')
+  public handleVisibleChange (value: boolean): void {
+    this.isVisible = value
+  }
+
+  @Watch('isVisible')
+  public handleIsVisibleChange (value: boolean): void {
+    this.$emit('update:visible', value)
+  }
+}

src/mixins/index.ts

@@ -0,0 +1,9 @@
+import SDialogMixin from './SDialogMixin'
+import BorderRadiusMixin from './BorderRadiusMixin'
+import SizeMixin from './SizeMixin'
+
+export {
+  SDialogMixin,
+  BorderRadiusMixin,
+  SizeMixin
+}

src/stories/SDatePicker.stories.ts

@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SDatePicker, SRow, SCol } from '../components'
-import { BorderRadius } from '../types'
+import { Size, BorderRadius } from '../types'
 import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePicker'
 
 export default {
@@ -20,6 +20,7 @@ export const configurable = () => ({
                  :type="type"
                  :readonly="readonly"
                  :disabled="disabled"
+                 :size="size"
                  :clearable="clearable"
                  :align="align"
                  :border-radius="borderRadius"
@@ -58,6 +59,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
     clearable: {
       default: boolean('Clearable', true)
     },

src/stories/Select/SSelect.stories.ts

@@ -1,7 +1,7 @@
 import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
-import { BorderRadius } from '../../types'
+import { Size, BorderRadius } from '../../types'
 import { InputTypes } from '../../components/Select'
 
 export default {
@@ -28,6 +28,7 @@ export const configurable = () => ({
                    :disabled="disabled"
                    :border-radius="borderRadius"
                    :loading="loading"
+                   :size="size"
                    :multiple="multiple"
                    :input-type="item.inputType"
                    :clearable="clearable"
@@ -63,6 +64,9 @@ export const configurable = () => ({
     loading: {
       default: boolean('Loading', false)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
     multiple: {
       default: boolean('Multiple', false)
     },

src/styles/datepicker.scss

@@ -15,10 +15,30 @@
   }
 }
 
+$date-picker-padding: 8px;
+
 .s-date-picker {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
+  &.s-big .el-input__inner {
+    height: $s-size-big;
+    .el-range-separator {
+      line-height: $s-size-big - $date-picker-padding;
+    }
+  }
+  &.s-medium .el-input__inner {
+    height: $s-size-medium;
+    .el-range-separator {
+      line-height: $s-size-medium - $date-picker-padding;
+    }
+  }
+  &.s-small .el-input__inner {
+    height: $s-size-small;
+    .el-range-separator {
+      line-height: $s-size-small - $date-picker-padding;
+    }
+  }
   .el-date-editor {
     width: 100%;
     &.el-input,
@@ -52,9 +72,7 @@
     }
   }
   &.s-input-type {
-    min-height: $s-size-big;
     .el-input__inner {
-      height: $s-size-big;
       padding: 0 15px;
       border: 1px solid var(--s-color-base-background);
       background-color: var(--s-color-base-background);
@@ -134,7 +152,7 @@
     .s-icon-chevron-bottom {
       position: absolute;
       right: 10px;
-      top: 30%;
+      top: calc(50% - 8px);
       pointer-events: none;
       color: var(--s-color-base-content-tertiary);
       transition: transform 0.3s;