update input event firing (#491)

* update input event firing

* update model check

Author: Nikita-Polyakov

package.json

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

src/components/Checkbox/SCheckbox.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, ModelSync, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import ElCheckbox from 'element-ui/lib/checkbox'
 
 import SizeMixin from '../../mixins/SizeMixin'
@@ -26,6 +26,10 @@ import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
   components: { ElCheckbox }
 })
 export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
+  /**
+   * Value of the checkbox item. Can be `string / number / boolean`
+   */
+  @Prop() readonly value!: string | number | boolean
   /**
    * Label of the checkbox item
    */
@@ -58,11 +62,16 @@ export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly indeterminate!: boolean
-  /**
-   * Value of the checkbox item. Can be `string / number / boolean`
-   */
-  @ModelSync('value', 'input', { type: [String, Number, Boolean] })
-  readonly model!: string | number | boolean
+
+  get model (): string | number | boolean {
+    return this.value
+  }
+
+  set model (value: string | number | boolean) {
+    if (this.value !== value) {
+      this.$emit('input', value)
+    }
+  }
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []

src/components/DatePicker/SDatePicker/SDatePicker.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, ModelSync, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
 import ElDatePicker from 'element-ui/lib/date-picker'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
@@ -52,6 +52,11 @@ import { PickerTypes, PickerAlignment, InputTypes } from '../consts'
   components: { ElDatePicker, SIcon }
 })
 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
+   */
+  @Prop() readonly value!: any
   /**
    * Type of the date picker component. Available values:
    *
@@ -172,12 +177,16 @@ export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
    * `true` by default
    */
   @Prop({ type: Boolean, default: true }) readonly validateEvent!: boolean
-  /**
-   * Value of date picker component. Can be used with `v-model`.
-   * Can be date object / array with date objects for date range picker
-   */
-  @ModelSync('value', 'input')
-  readonly model!: any
+
+  get model (): any {
+    return this.value
+  }
+
+  set model (value: any) {
+    if (JSON.stringify(value) !== JSON.stringify(this.value)) {
+      this.$emit('input', value)
+    }
+  }
 
   @Watch('value')
   private handlePropChange (value: any): void {

src/components/Radio/SRadio/SRadio.vue

@@ -7,13 +7,14 @@
     :disabled="disabled"
     :border="border"
     :name="name"
+    @change="handleChange"
   >
     <slot></slot>
   </component>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import ElRadio from 'element-ui/lib/radio'
 import ElRadioButton from 'element-ui/lib/radio-button'
 
@@ -51,7 +52,17 @@ export default class SRadio extends Mixins(SizeMixin, DesignSystemInject) {
   /**
    * Binding value of the radio component. Can be `string` / `number` / `boolean`
    */
-  @ModelSync('value', 'input', { type: [String, Number, Boolean] }) readonly model!: string | number | boolean
+  @Prop({ type: [String, Number, Boolean] }) readonly value!: string | number | boolean
+
+  get model (): string | number | boolean {
+    return this.value
+  }
+
+  set model (value: string | number | boolean) {
+    if (this.value !== value) {
+      this.$emit('input', value)
+    }
+  }
 
   get radioComponent () {
     return this.isRadioButton ? 'el-radio-button' : 'el-radio'
@@ -67,5 +78,9 @@ export default class SRadio extends Mixins(SizeMixin, DesignSystemInject) {
     }
     return cssClasses
   }
+
+  handleChange (value: string | number | boolean): void {
+    this.$emit('change', value)
+  }
 }
 </script>

src/components/Radio/SRadioGroup/SRadioGroup.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import ElRadioGroup from 'element-ui/lib/radio-group'
 
 import SizeMixin from '../../../mixins/SizeMixin'
@@ -25,6 +25,16 @@ export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio group. Can be `string` / `number` / `boolean`
    */
-  @ModelSync('value', 'input', { type: [String, Number, Boolean] }) readonly groupModel!: string | number | boolean
+  @Prop({ type: [String, Number, Boolean] }) readonly value!: string | number | boolean
+
+  get groupModel (): string | number | boolean {
+    return this.value
+  }
+
+  set groupModel (value: string | number | boolean) {
+    if (this.value !== value) {
+      this.$emit('input', value)
+    }
+  }
 }
 </script>

src/components/Select/SSelect/SSelect.vue

@@ -18,6 +18,7 @@
       @focus="handleFocus"
       @visible-change="handleVisibleChange"
       @clear="handleClear"
+      @change="handleChange"
       :filterable="filterable"
     >
       <slot name="prefix" slot="prefix"></slot>
@@ -28,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, ModelSync, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref, Inject } from 'vue-property-decorator'
 import ElSelect from 'element-ui/lib/select'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
@@ -39,10 +40,18 @@ import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
 import { Autocomplete } from '../../Input/consts'
 import { InputTypes } from '../consts'
 
+type SingleSelectValue = boolean | string | number;
+type MultipleSelectValue = Array<string | number>;
+type SelectValue = SingleSelectValue | MultipleSelectValue;
+
 @Component({
   components: { ElSelect }
 })
 export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin, DesignSystemInject) {
+  /**
+   * Selected value. Can be used with `v-model`
+   */
+  @Prop({ type: [Boolean, String, Number, Array] }) readonly value!: SelectValue
   /**
    * Input type of the select component. Available values: `"input"`, `"select"`.
    *
@@ -121,19 +130,24 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin, Design
    * `false` by default
    */
   @Prop({ type: Boolean, default: false }) readonly filterable!: boolean
-  /**
-   * Selected value. Can be used with `v-model`
-   */
-  @ModelSync('value', 'input')
-  readonly model!: any
+
+  get model (): SelectValue {
+    return this.value
+  }
+
+  set model (value: SelectValue) {
+    if (JSON.stringify(value) !== JSON.stringify(this.value)) {
+      this.$emit('input', value)
+    }
+  }
 
   @Ref('select') select!: any
 
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
   @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
 
   @Watch('model')
-  private handleValueChange (value: any): void {
+  private handleValueChange (): void {
     this.updateInputValue()
   }
 
@@ -148,7 +162,7 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin, Design
       tags.remove()
     }
     const input = this.select.$el.getElementsByClassName('el-input__inner')[0] as HTMLInputElement
-    input.value = this.model && this.model.length ? `${this.multipleTextPrefix || this.placeholder} (${this.model.length})` : ''
+    input.value = Array.isArray(this.model) && (this.model as MultipleSelectValue).length ? `${this.multipleTextPrefix || this.placeholder} (${this.model.length})` : ''
   }
 
   mounted (): void {
@@ -193,7 +207,7 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin, Design
     if (this.disabled) {
       cssClasses.push('s-disabled')
     }
-    if ((!this.multiple && this.model) || (this.multiple && this.model.length !== 0)) {
+    if ((!this.multiple && this.model) || (this.multiple && Array.isArray(this.model) && this.model.length !== 0)) {
       cssClasses.push('s-has-value')
     }
     return cssClasses
@@ -233,6 +247,10 @@ export default class SSelect extends Mixins(SizeMixin, BorderRadiusMixin, Design
     this.$emit('clear')
   }
 
+  handleChange (value: SelectValue): void {
+    this.$emit('change', value)
+  }
+
   public focus (): void {
     this.select.focus()
   }

src/components/Slider/SSlider.vue

@@ -19,14 +19,13 @@
       :range="range"
       :marks="marks"
       :disabled="disabled"
-      @input="handleInput"
       @change="handleChange"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, ModelSync, Prop, Watch } from 'vue-property-decorator'
+import { Vue, Component, Prop } from 'vue-property-decorator'
 import ElSlider from 'element-ui/lib/slider'
 
 import { SliderInputSize } from './consts'
@@ -35,6 +34,10 @@ import { SliderInputSize } from './consts'
   components: { ElSlider }
 })
 export default class SSlider extends Vue {
+  /**
+   * Binding value
+   */
+  @Prop({ default: 0, type: [Number, Array] }) readonly value!: number | number[]
   /**
    * Minimum value
    */
@@ -99,14 +102,15 @@ export default class SSlider extends Vue {
    * Whether Slider is disabled
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
-  /**
-   * Binding value
-   */
-  @ModelSync('value', 'input', { default: 0, type: [Number, Array] })
-  readonly model!: number | number[]
 
-  handleInput (value: number): void {
-    this.$emit('input', value)
+  get model (): number | number[] {
+    return this.value
+  }
+
+  set model (value: number | number[]) {
+    if (JSON.stringify(value) !== JSON.stringify(this.value)) {
+      this.$emit('input', value)
+    }
   }
 
   handleChange (value: number): void {

src/components/Switch/SSwitch.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, ModelSync, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import ElSwitch from 'element-ui/lib/switch'
 
 import DesignSystemInject from '../DesignSystem/DesignSystemInject'
@@ -65,8 +65,17 @@ export default class SSwitch extends Mixins(DesignSystemInject) {
   /**
    * Value of switch
    */
-  @ModelSync('value', 'input', { type: [Boolean, String, Number] })
-  readonly model!: boolean | string | number
+  @Prop({ type: [Boolean, String, Number] }) readonly value!: boolean | string | number
+
+  get model (): boolean | string | number {
+    return this.value
+  }
+
+  set model (value: boolean | string | number) {
+    if (this.value !== value) {
+      this.$emit('input', value)
+    }
+  }
 
   handleChange (value: boolean | string | number): void {
     this.$emit('change', value)

src/components/Tab/STabs/STabs.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Mixins, ModelSync, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import ElTabs from 'element-ui/lib/tabs'
 
 import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
@@ -32,6 +32,12 @@ import { TabsType, TabsPosition } from '../consts'
   components: { ElTabs }
 })
 export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject) {
+  /**
+   * Name of the selected tab. Can be used with `v-model`.
+   *
+   * First value by default
+   */
+  @Prop({ type: String }) readonly value!: string
   /**
    * Type of tabs. Can be `"card"`/`"border-card"`/`"rounded"` or unset.
    *
@@ -73,13 +79,16 @@ export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject)
    * If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented
    */
   @Prop({ type: Function }) readonly beforeLeave!: (activeName: string, oldActiveName: string) => (false | Promise<any>)
-  /**
-   * Name of the selected tab. Can be used with `v-model`.
-   *
-   * First value by default
-   */
-  @ModelSync('value', 'input', { type: String })
-  readonly model!: string
+
+  get model (): string {
+    return this.value
+  }
+
+  set model (value: string) {
+    if (this.value !== value) {
+      this.$emit('input', value)
+    }
+  }
 
   get computedType (): string {
     // neu tabs implemented only with TabsType.ROUNDED type