Release/0.9.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -32,7 +32,7 @@
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.1",
+    "vue-property-decorator": "^9.1.2",
     "vuex": "^3.1.3",
     "vuex-class": "^0.3.2"
   },

src/components/Card/SCard.vue

@@ -14,12 +14,15 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+import SizeMixin from '../../mixins/SizeMixin'
+import StatusMixin from '../../mixins/StatusMixin'
 import { CardShadow } from './consts'
 import { BorderRadius } from '@/types'
 
 @Component
-export default class SCard extends Mixins(BorderRadiusMixin) {
+export default class SCard extends Mixins(BorderRadiusMixin, SizeMixin, StatusMixin, DesignSystemInject) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -44,15 +47,38 @@ export default class SCard extends Mixins(BorderRadiusMixin) {
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
   @Prop({ default: BorderRadius.MEDIUM }) borderRadius!: string
+  /**
+   * Does card should looks like it's under surface (inner shadow)
+   */
+  @Prop({ default: false, type: Boolean }) readonly pressed!: boolean
+  /**
+   * Should it be a main card (app content wrapper)
+   */
+  @Prop({ default: false, type: Boolean }) readonly primary!: boolean
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
+    if (this.statusClass) {
+      cssClasses.push(this.statusClass)
+    }
+    if (this.isStandardSize) {
+      cssClasses.push(`s-size-${this.size}`)
+    }
     if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.clickable) {
       cssClasses.push('s-clickable')
     }
+    if (this.primary) {
+      cssClasses.push('s-primary')
+    }
+    if (this.pressed) {
+      cssClasses.push('s-pressed')
+    }
     return cssClasses
   }
 

src/components/DesignSystem/SDesignSystemProvider.vue

@@ -5,14 +5,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Provide } from 'vue-property-decorator'
+import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
 import { DesignSystemProvideKey } from './consts'
 import { DesignSystemTypes } from '../../utils/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
   @Prop({ default: DesignSystemTypes.DEFAULT, type: String }) readonly value!: string
-  @Provide(DesignSystemProvideKey) designSystem = this
+  @Provide(DesignSystemProvideKey) providedObject = {
+    value: DesignSystemTypes.DEFAULT
+  }
+
+  @Watch('value', { immediate: true })
+  onValueChange (newValue: DesignSystemTypes) {
+    this.providedObject.value = newValue
+  }
 }
 </script>
 

src/components/Input/SInput.vue

@@ -9,7 +9,7 @@
       <slot name="left" />
 
       <div class="s-input__input">
-        <span v-if="value && !isMediumInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
+        <span v-if="value && isBigInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
         <el-input
           ref="el-input"
           :value="value"
@@ -179,8 +179,8 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     return [InputType.TEXT, InputType.TEXTAREA].includes(this.type as InputType)
   }
 
-  get isMediumInput (): boolean {
-    return this.type === InputType.TEXT && this.size === InputSize.MEDIUM
+  get isBigInput (): boolean {
+    return this.type === InputType.TEXT && this.size === InputSize.BIG
   }
 
   get computedClasses (): Array<string> {
@@ -207,7 +207,7 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
       cssClasses.push('s-autofill')
     }
     if (this.size) {
-      cssClasses.push(this.sizeClass)
+      cssClasses.push(`s-size-${this.size}`)
     }
     if (this.prefix) {
       cssClasses.push('s-input--prefix')
@@ -218,16 +218,6 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     return cssClasses
   }
 
-  get sizeClass (): string {
-    switch (this.size) {
-      case InputSize.MEDIUM:
-        return 's-size-medium'
-      case InputSize.BIG:
-      default:
-        return ''
-    }
-  }
-
   get computedType (): string {
     if (this.type === InputType.TEXT_FILE) {
       return InputType.TEXT

src/components/Input/consts.ts

@@ -31,6 +31,7 @@ export enum InputType {
 }
 
 export enum InputSize {
+  SMALL = 'small',
   MEDIUM = 'medium',
   BIG = 'big'
 }

src/components/Radio/SRadio.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-radio-button v-if="isRadioButton"
+  <component :is="radioComponent"
+    class="s-radio"
     :class="computedClasses"
     v-model="model"
     :label="label"
@@ -8,30 +9,17 @@
     :name="name"
   >
     <slot></slot>
-  </el-radio-button>
-  <el-radio v-else
-    :class="computedClasses"
-    v-model="model"
-    :label="label"
-    :disabled="disabled"
-    :border="border"
-    :name="name"
-  >
-    <slot></slot>
-  </el-radio>
+  </component>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
 
+import { DesignSystemInject } from '../DesignSystem'
 import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Mixins(SizeMixin) {
-  /**
-   * Binding value of the radio component. Can be `string` / `number` / `boolean`
-   */
-  @Prop() readonly value!: string | number | boolean
+export default class SRadio extends Mixins(SizeMixin, DesignSystemInject) {
   /**
    * Value of the radio component. Can be `string` / `number` / `boolean`
    */
@@ -56,22 +44,20 @@ export default class SRadio extends Mixins(SizeMixin) {
    * Native name property
    */
   @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Binding value of the radio component. Can be `string` / `number` / `boolean`
+   */
+  @ModelSync('value', 'input', { type: [String, Number, Boolean] }) readonly model!: string | number | 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 radioComponent () {
+    return this.isRadioButton ? 'el-radio-button' : 'el-radio'
   }
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }

src/components/Radio/SRadioGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <el-radio-group
-    v-model="model"
+    v-model="groupModel"
     :size="computedSize"
     :disabled="disabled"
   >
@@ -9,32 +9,19 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
 
 import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
 export default class SRadio extends Mixins(SizeMixin) {
-  /**
-   * Binding value of the radio group. Can be `string` / `number` / `boolean`
-   */
-  @Prop() readonly value!: string | number | boolean
   /**
    * Whether the nesting radios are disabled.
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: 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)
-  }
+  /**
+   * Binding value of the radio group. Can be `string` / `number` / `boolean`
+   */
+  @ModelSync('value', 'input', { type: [String, Number, Boolean] }) readonly groupModel!: string | number | boolean
 }
 </script>

src/components/Switch/SSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="s-switch">
+  <div class="s-switch" :class="computedClasses">
     <el-switch
       v-model="model"
       :active-icon-class="activeIconСlass"
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-import { ElSwitch } from 'element-ui/types/switch'
+import { Mixins, Component, Prop, Watch } from 'vue-property-decorator'
+import { DesignSystemInject } from '../DesignSystem'
 
 @Component
-export default class SSwitch extends Vue {
+export default class SSwitch extends Mixins(DesignSystemInject) {
   /**
    * Value of switch
    */
@@ -78,5 +78,13 @@ export default class SSwitch extends Vue {
   handleChange (value: boolean | string | number): void {
     this.$emit('change', value)
   }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
+    return cssClasses
+  }
 }
 </script>

src/components/Tab/STabs.vue

@@ -22,11 +22,12 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TabsType, TabsPosition } from './consts'
 
 @Component
-export default class STabs extends Mixins(BorderRadiusMixin) {
+export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   /**
    * Name of the selected tab. Can be used with `v-model`.
    *
@@ -95,6 +96,9 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.type === TabsType.ROUNDED &&
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')

src/components/Tooltip/STooltip.vue

@@ -28,12 +28,13 @@ import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Theme } from '../../utils/Theme'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
-export default class STooltip extends Mixins(BorderRadiusMixin) {
+export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   /**
    * Theme of the tooltip. Supported values: `"dark"`, `"light"`, or `"auto"`.
    * `"auto"` means that it will be managed with theming controller by `setTheme` function
@@ -115,6 +116,9 @@ export default class STooltip extends Mixins(BorderRadiusMixin) {
 
   get computedPopperClass (): string {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }

src/mixins/StatusMixin.ts

@@ -0,0 +1,20 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Status } from '../types'
+
+@Component
+export default class StatusMixin extends Vue {
+  /**
+   * Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`.
+   *
+   * By default it's set to `"default"`
+   */
+  @Prop({ default: Status.DEFAULT }) status!: string
+
+  get isStandardStatus (): boolean {
+    return (Object.values(Status) as Array<string>).includes(this.status)
+  }
+
+  get statusClass (): string {
+    return this.isStandardStatus ? `s-status-${this.status}` : ''
+  }
+}

src/stories/SButton.stories.ts

@@ -97,7 +97,7 @@ export const withDifferentTypes = () => ({
                   {{ item.label }}
                 </s-button>
               </s-row>
-            <s-design-system-provider />`,
+            </s-design-system-provider>`,
   props: {
     designSystem: {
       default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)