Release 0.4.3

package.json

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

src/components/Radio/SRadio.vue

@@ -1,5 +1,15 @@
 <template>
-  <el-radio
+  <el-radio-button v-if="isRadioButton"
+    :class="computedClasses"
+    v-model="model"
+    :label="label"
+    :disabled="disabled"
+    :border="border"
+    :name="name"
+  >
+    <slot></slot>
+  </el-radio-button>
+  <el-radio v-else
     :class="computedClasses"
     v-model="model"
     :label="label"
@@ -26,6 +36,10 @@ export default class SRadio extends Vue {
    * Value of the radio component. Can be `string` / `number` / `boolean`
    */
   @Prop() readonly label!: string | number | boolean
+  /**
+   * Change redio element to radio button
+   */
+  @Prop({ default: false, type: Boolean }) readonly isRadioButton!: boolean
   /**
    * Disabled state of the radio component.
    *
@@ -41,7 +55,7 @@ export default class SRadio extends Vue {
   /**
    * Native name property
    */
-  @Prop({ default: '', type: String }) readonly name!: boolean
+  @Prop({ default: '', type: String }) readonly name!: string
   /**
    * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
    *

src/components/Radio/SRadioGroup.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-radio-group
+    v-model="model"
+    :size="size"
+    :disabled="disabled"
+  >
+    <slot></slot>
+  </el-radio-group>
+</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 group. Can be `string` / `number` / `boolean`
+   */
+  @Prop() readonly value!: string | number | 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
+  /**
+   * 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)
+  }
+}
+</script>

src/components/Radio/index.ts

@@ -1,4 +1,5 @@
 import SRadio from './SRadio.vue'
+import SRadioGroup from './SRadioGroup.vue'
 import { RadioSize } from './consts'
 
-export { SRadio, RadioSize }
+export { SRadio, SRadioGroup, RadioSize }

src/components/Slider/SSlider.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="s-slider">
+    <el-slider
+      v-model="model"
+      :min="min"
+      :max="max"
+      :show-tooltip="showTooltip"
+      :tooltip-class="tooltipClass"
+      :format-tooltip="formatTooltip"
+      :step="step"
+      :show-stops="showStops"
+      :show-input="showInput"
+      :show-input-controls="showInputControls"
+      :input-size="inputSize"
+      :debounce="debounce"
+      :vertical="isVertical && (height !== '')"
+      :height="height"
+      :label="label"
+      :range="range"
+      :marks="marks"
+      :disabled="disabled"
+      @input="handleInput"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { ElSlider } from 'element-ui/types/slider'
+
+import { SliderInputSize } from './consts'
+
+@Component
+export default class SSlider extends Vue {
+  /**
+   * Binding value
+   */
+  @Prop({ default: 0 }) readonly value!: number | number[]
+  /**
+   * Minimum value
+   */
+  @Prop({ default: 0, type: Number }) readonly min!: number
+  /**
+   * Maximum value
+   */
+  @Prop({ default: 100, type: Number }) readonly max!: number
+  /**
+   * Show tooltip
+   */
+  @Prop({ default: true, type: Boolean }) readonly showTooltip!: boolean
+  /**
+   * Custom class name for the tooltip
+   */
+  @Prop({ default: '', type: String }) readonly tooltipClass!: string
+  /**
+   * Step size
+   */
+  @Prop({ default: 1, type: Number }) readonly step!: number
+  /**
+   * Whether to display breakpoints
+   */
+  @Prop({ default: false, type: Boolean }) readonly showStops!: boolean
+  /**
+   * Whether to display an input box, works when range is false
+   */
+  @Prop({ default: false, type: Boolean }) readonly showInput!: boolean
+  /**
+   * Whether to display control buttons when show-input is true
+   */
+  @Prop({ default: true, type: Boolean }) readonly showInputControls!: boolean
+  /**
+   * Size of the input box. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`
+   */
+  @Prop({ default: SliderInputSize.SMALL, type: String }) readonly inputSize!: string
+  /**
+   * Debounce delay when typing, in milliseconds, works when show-input is true
+   */
+  @Prop({ default: 300, type: Number }) readonly debounce!: number
+  /**
+   * Vertical mode
+   */
+  @Prop({ default: true, type: Boolean }) readonly isVertical!: boolean
+  /**
+   * Slider height, required in vertical mode
+   */
+  @Prop({ default: '', type: String }) readonly height!: string
+  /**
+   * Label for screen reader
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * Whether to select a range
+   */
+  @Prop({ default: false, type: Boolean }) readonly range!: boolean
+  /**
+   * Marks， type of key must be number and must in closed interval [min, max], each mark can custom style
+   */
+  @Prop({ default: () => {}, type: Object }) readonly marks!: object
+  /**
+   * Whether Slider is disabled
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: number): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: number): void {
+    this.$emit('input', value)
+    this.$emit('change', value)
+  }
+
+  handleInput (value: number): void {
+    this.$emit('input', value)
+  }
+
+  handleChange (value: number): void {
+    this.$emit('change', value)
+  }
+
+  formatTooltip (value: number): number {
+    // To format tooltip value you shoud change return value at the next line
+    // return value / 100
+    return value
+  }
+}
+</script>

src/components/Slider/consts.ts

@@ -0,0 +1,6 @@
+export enum SliderInputSize {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}

src/components/Slider/index.ts

@@ -0,0 +1,4 @@
+import SSlider from './SSlider.vue'
+import { SliderInputSize } from './consts'
+
+export { SSlider, SliderInputSize }

src/components/Switch/SSwitch.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="s-switch">
+    <el-switch
+      v-model="model"
+      :active-icon-class="activeIconСlass"
+      :inactive-icon-class="inactiveIconСlass"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      :name="name"
+      :width="width"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { ElSwitch } from 'element-ui/types/switch'
+
+@Component
+export default class SSwitch extends Vue {
+  /**
+   * Value of switch
+   */
+  @Prop({ default: false }) readonly value!: boolean | string | number
+  /**
+   * Class name of the icon displayed when in on state, overrides active-text
+   */
+  @Prop({ default: '', type: String }) readonly activeIconСlass!: string
+  /**
+   * Class name of the icon displayed when in off state, overrides inactive-text
+   */
+  @Prop({ default: '', type: String }) readonly inactiveIconСlass!: string
+  /**
+   * Text displayed when in on state
+   */
+  @Prop({ default: '', type: String }) readonly activeText!: string
+  /**
+   * Text displayed when in off state
+   */
+  @Prop({ default: '', type: String }) readonly inactiveText!: string
+  /**
+   * Switch value when in on state
+   */
+  @Prop({ default: true }) readonly activeValue!: boolean | string | number
+  /**
+   * Switch value when in off state
+   */
+  @Prop({ default: false }) readonly inactiveValue!: boolean | string | number
+  /**
+   * Input name of switch
+   */
+  @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Width of switch
+   */
+  @Prop({ default: 40, type: Number }) readonly width!: number
+  /**
+   * Whether switch is disabled
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: boolean | string | number): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: boolean | string | number): void {
+    this.$emit('input', value)
+  }
+
+  handleChange (value: boolean | string | number): void {
+    this.$emit('change', value)
+  }
+}
+</script>

src/components/Switch/index.ts

@@ -0,0 +1,3 @@
+import SSwitch from './SSwitch.vue'
+
+export { SSwitch }

src/components/index.ts

@@ -23,7 +23,9 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
-import { SRadio } from './Radio'
+import { SSlider } from './Slider'
+import { SSwitch } from './Switch'
+import { SRadio, SRadioGroup } from './Radio'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
 import { SSelect, SOption, SOptionGroup } from './Select'
@@ -64,11 +66,14 @@ export {
   SOptionGroup,
   SPagination,
   SRadio,
+  SRadioGroup,
   SRow,
   SScrollSectionItem,
   SScrollSections,
   SSelect,
+  SSlider,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,