Skip to content

Commit

Permalink
chore(lib): update Numberinput
Browse files Browse the repository at this point in the history
- `Numberinput` migrates to Vue 3. Changes sufficient to render the
  documentation page of `Numberinput` are made.
- In `src/components/numberinput/Numberinput.vue`,
    - `v-model` binding conforms to Vue 3,
        - `value` prop --> `modelValue`
        - `input` event --> `update:modelValue`
    - Events to be emitted are listed in `emits`.
    - `disabled` is replaced with `disabledOrUndefined` that takes
      `true` or `undefined`. Because setting a boolean attribute
      `false` does not remove it on Vue 3, but `null` or `undefined`
      has to be given to remove it.
    - Automatic ESLint fix is applied.
  • Loading branch information
kikuomax committed Jul 7, 2023
1 parent c3b8668 commit 768a957
Showing 1 changed file with 19 additions and 10 deletions.
29 changes: 19 additions & 10 deletions src/components/numberinput/Numberinput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
type="button"
class="button"
:class="buttonClasses"
:disabled="isDisabled(control)"
:disabled="isDisabled(control) || undefined"
:aria-label="control === 'plus' ? ariaPlusLabel : ariaMinusLabel"
@mousedown="
!isDisabled(control) && onStartLongPress($event, control === 'plus')
Expand All @@ -29,7 +29,8 @@
both
:icon="control"
:pack="iconPack"
:size="iconSize" />
:size="iconSize"
/>
</button>
</p>
<b-input
Expand All @@ -41,7 +42,7 @@
:max="max"
:min="min"
:size="size"
:disabled="disabled"
:disabled="disabledOrUndefined"
:readonly="!editable"
:loading="loading"
:rounded="rounded"
Expand All @@ -68,7 +69,7 @@
type="button"
class="button"
:class="buttonClasses"
:disabled="isDisabled(control)"
:disabled="isDisabled(control) || undefined"
:aria-label="control === 'plus' ? ariaPlusLabel : ariaMinusLabel"
@mousedown="
!isDisabled(control) && onStartLongPress($event, control === 'plus')
Expand All @@ -84,7 +85,8 @@
both
:icon="control"
:pack="iconPack"
:size="iconSize" />
:size="iconSize"
/>
</button>
</p>
</div>
Expand All @@ -104,7 +106,7 @@ export default {
mixins: [FormElementMixin],
inheritAttrs: false,
props: {
value: Number,
modelValue: Number,
min: {
type: [Number, String]
},
Expand Down Expand Up @@ -149,9 +151,10 @@ export default {
default: true
}
},
emits: ['blur', 'focus', 'update:modelValue'],
data() {
return {
newValue: this.value,
newValue: this.modelValue,
newStep: this.step || 1,
newMinStep: this.minStep,
timesPressed: 1,
Expand All @@ -171,9 +174,9 @@ export default {
}
this.newValue = newValue
if (newValue === null) {
this.$emit('input', newValue)
this.$emit('update:modelValue', newValue)
} else if (!isNaN(newValue) && newValue !== '-0') {
this.$emit('input', Number(newValue))
this.$emit('update:modelValue', Number(newValue))
}
this.$nextTick(() => {
if (this.$refs.input) {
Expand Down Expand Up @@ -236,14 +239,20 @@ export default {
return step.substring(index + 1).length
}
return 0
},
disabledOrUndefined() {
// On Vue 3, setting a boolean attribute `false` does not remove it,
// `null` or `undefined` has to be given to remove it.
return this.disabled || undefined
}
},
watch: {
/**
* When v-model is changed:
* 1. Set internal value.
*/
value: {
modelValue: {
immediate: true,
handler(value) {
this.newValue = value
Expand Down

0 comments on commit 768a957

Please sign in to comment.