Release 0.2.5

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/"

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>

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>

src/components/Breadcrumb/index.ts

@@ -0,0 +1,4 @@
+import SBreadcrumb from './SBreadcrumb.vue'
+import SBreadcrumbItem from './SBreadcrumbItem.vue'
+
+export { SBreadcrumb, SBreadcrumbItem }

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;
   }
 }
 

src/components/Card/SCard.vue

@@ -1,6 +1,7 @@
 <template>
   <el-card
     class="s-card"
+    :class="{ clickable }"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -11,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'
 
@@ -33,6 +34,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>
 
@@ -42,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;
   }

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)) {

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>
 

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)
   }
 

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>