Release 0.3.3

package.json

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

src/components/Button/SButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <s-tooltip :content="tooltip" placement="right" :disabled="!tooltip">
+  <s-tooltip :content="tooltip" :disabled="!tooltip" :placement="tooltipPlacement">
     <el-button
       :type="computedType"
       :native-type="nativeType"
@@ -23,9 +23,10 @@
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
+import { PopoverPlacement } from 'element-ui/types/popover'
 
 import { SIcon } from '../Icon'
-import { STooltip } from '../Tooltip'
+import { STooltip, TooltipPlacement } from '../Tooltip'
 import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 
 @Component({
@@ -34,7 +35,7 @@ import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 export default class SButton extends Vue {
   readonly ButtonTypes = ButtonTypes
   /**
-   * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`.
+   * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
    *
    * By default it's set to `"primary"`
    */
@@ -54,7 +55,7 @@ export default class SButton extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
   /**
-   * Loading state. Only `"tertiary"` and `"action"` button cannot have this state
+   * Loading state. Only `"link"` and `"action"` button cannot have this state
    *
    * If you use `loading` state for one button, for instance, [Send][Cancel], and "send" button sent
    * request to back-end side, you should use `loading` state ONLY for "send" button and apply this flag
@@ -85,6 +86,12 @@ export default class SButton extends Vue {
    * Button tabindex
    */
   @Prop({ default: '0', type: String }) readonly tabindex!: string
+  /**
+   * Placement of the tooltip. You can use any value from the `TooltipPlacement` enum.
+   *
+   * `"top"` by default
+   */
+  @Prop({ default: TooltipPlacement.TOP, type: String }) readonly tooltipPlacement!: PopoverPlacement
 
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
   @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
@@ -147,7 +154,7 @@ export default class SButton extends Vue {
   }
 
   get isLoading (): boolean {
-    if (([ButtonTypes.TERTIARY, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
       return false
     }
     return this.loading
@@ -220,11 +227,12 @@ export default class SButton extends Vue {
     &:disabled, &:disabled:hover {
       color: $color-neutral-inactive;
       border-color: $color-neutral-border;
+      background-color: $color-basic-white;
     }
   }
 }
 
-.tertiary {
+.link {
   color: $color-basic-black;
   border: none;
   background-color: transparent;
@@ -237,6 +245,22 @@ export default class SButton extends Vue {
   }
 }
 
+.tertiary {
+  color: $color-basic-black;
+  border-color: $color-neutral-placeholder;
+  background-color: $color-neutral-placeholder;
+  &:hover, &:active, &:focus {
+    color: $color-main-brand;
+    background-color: $color-neutral-placeholder;
+    border-color: $color-neutral-placeholder;
+  }
+  &:disabled, &:disabled:hover {
+    color: $color-neutral-inactive;
+    background-color: $color-neutral-placeholder;
+    border-color: $color-neutral-placeholder;
+  }
+}
+
 .action {
   &.big {
     width: $size-big;

src/components/Button/consts.ts

@@ -4,7 +4,8 @@ export enum ButtonTypes {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
   TERTIARY = 'tertiary',
-  ACTION = 'action'
+  ACTION = 'action',
+  LINK = 'link'
 }
 
 export enum ButtonNativeTypes {

src/components/Checkbox/SCheckbox.vue

@@ -176,8 +176,11 @@ export default class SCheckbox extends Vue {
     }
   }
   &.is-checked {
-    &.is-disabled > .el-checkbox__inner::after {
-      border-color: $color-neutral-inactive;
+    &.is-disabled > .el-checkbox__inner {
+      background-color: $color-neutral-placeholder;
+      &::after {
+        border-color: $color-neutral-inactive;
+      }
     }
     & + .el-checkbox__label {
       color: $color-basic-black;

src/components/DatePicker/SDatePicker.vue

@@ -26,6 +26,7 @@
       :validate-event="validateEvent"
       @blur="handleBlur"
       @focus="handleFocus"
+      @change="handleChange"
     >
       <slot name="range-separator" slot="range-separator"></slot>
     </el-date-picker>
@@ -180,6 +181,7 @@ export default class SDatePicker extends Vue {
   @Watch('value')
   private handlePropChange (value: any): void {
     this.model = value
+    this.focused = false
   }
 
   @Watch('model')
@@ -241,6 +243,10 @@ export default class SDatePicker extends Vue {
     this.$emit('focus', component)
   }
 
+  handleChange (values: any): void {
+    this.focused = false
+  }
+
   public focus (): void {
     this.picker.focus()
   }
@@ -351,6 +357,14 @@ export default class SDatePicker extends Vue {
         }
       }
     }
+    .s-icon-chevron-bottom {
+      position: absolute;
+      right: 10px;
+      top: 30%;
+      pointer-events: none;
+      color: $color-neutral-tertiary;
+      transition: transform .3s;
+    }
     &.focused {
       .el-date-editor.el-input__inner,
       .el-date-editor .el-input__inner {
@@ -360,14 +374,6 @@ export default class SDatePicker extends Vue {
         transform: rotate(180deg);
       }
     }
-    .s-icon-chevron-bottom {
-      position: absolute;
-      right: 10px;
-      top: 30%;
-      pointer-events: none;
-      color: $color-neutral-tertiary;
-      transition: transform .3s;
-    }
     &.has-value {
       .s-icon-chevron-bottom {
         color: $color-basic-black;

src/components/Dropdown/SDropdown.vue

@@ -28,12 +28,12 @@
         <slot></slot>
         <i class="el-icon-arrow-down el-icon--right"></i>
       </s-button>
-      <el-tooltip v-else :disabled="!this.$slots.default || willTooltipBeDisabled">
+      <s-tooltip v-else :disabled="!this.$slots.default || willTooltipBeDisabled">
         <i class="s-icon-more-horizontal"></i>
         <template slot="content">
           <slot></slot>
         </template>
-      </el-tooltip>
+      </s-tooltip>
     </template>
     <el-dropdown-menu :class="{'ellipsis': type === DropdownType.ELLIPSIS}">
       <slot name="menu"></slot>
@@ -47,10 +47,12 @@ import { ElDropdown } from 'element-ui/types/dropdown'
 
 import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts'
 import { ButtonTypes, SButton } from '../Button'
+import { STooltip } from '../Tooltip'
 
 @Component({
   components: {
-    SButton
+    SButton,
+    STooltip
   }
 })
 export default class SDropdown extends Vue {

src/components/Form/SFormItem.vue

@@ -13,7 +13,7 @@
   >
     <slot slot="label" name="label"></slot>
     <slot></slot>
-    <i v-if="errorState" class="s-icon-error"></i>
+    <i v-if="willMessageBeShown && errorState" class="s-icon-error"></i>
   </el-form-item>
 </template>
 
@@ -89,6 +89,10 @@ export default class SFormItem extends Vue {
     })
   }
 
+  get willMessageBeShown (): boolean {
+    return this.showMessage && (this.elForm || {}).showMessage
+  }
+
   get computedRules (): object {
     const rules = (this.rules || (this.elForm.rules || {})[this.prop]) as any
     if (!rules) {

src/components/Radio/SRadio.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-radio
+    :class="computedClasses"
+    v-model="model"
+    :label="label"
+    :disabled="disabled"
+    :border="border"
+    :name="name"
+  >
+    <slot></slot>
+  </el-radio>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+import { RadioSize } from './consts'
+
+@Component
+export default class SRadio extends Vue {
+  /**
+   * Binding value of the radio component. Can be `string` / `number` / `boolean`
+   */
+  @Prop() readonly value!: string | number | boolean
+  /**
+   * Value of the radio component. Can be `string` / `number` / `boolean`
+   */
+  @Prop() readonly label!: string | number | boolean
+  /**
+   * Disabled state of the radio component.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Will borders be shown.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Native name property
+   */
+  @Prop({ default: '', type: String }) readonly name!: boolean
+  /**
+   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
+
+  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 computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(RadioSize) as Array<string>).includes(this.size)) {
+      cssClasses.push(this.size)
+    }
+    return cssClasses
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+@import "../../styles/common.scss";
+
+.el-radio {
+  &.big {
+    @extend .big;
+    line-height: $size-big;
+    &.is-bordered {
+      padding-top: 18px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      &::after {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+  &.medium {
+    @extend .medium;
+    line-height: $size-medium;
+    > .el-radio__input .el-radio__inner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  &.small {
+    @extend .small;
+    line-height: $size-small;
+    &.is-bordered {
+      padding-top: 9px;
+    }
+    > .el-radio__label {
+      font-size: 12px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 14px;
+      height: 14px;
+      border-width: 2px;
+      &::after {
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+  &.is-bordered {
+    line-height: 0;
+    &.is-disabled {
+      border-color: $color-neutral-border;
+    }
+  }
+  > .el-radio__input {
+    .el-radio__inner {
+      background-color: $color-basic-white;
+      &::after {
+        background-color: $color-main-brand;
+      }
+    }
+    &.is-checked .el-radio__inner {
+      background-color: $color-basic-white;
+    }
+    &.is-disabled {
+      .el-radio__inner {
+        background-color: $color-neutral-placeholder;
+        border-color: $color-neutral-border;
+      }
+      &.is-checked .el-radio__inner {
+        background-color: $color-neutral-placeholder;
+        border-color: $color-neutral-border;
+        &::after {
+          background-color: $color-neutral-inactive;
+        }
+      }
+      & + span.el-radio__label {
+        color: $color-neutral-inactive;
+      }
+    }
+  }
+}
+</style>