Skip to content

Commit

Permalink
chore(lib): update Switch
Browse files Browse the repository at this point in the history
- In `src/components/switch/Switch.vue`,
    - `v-model` binding is updated for Vue 3,
        - `value` prop --> `modelValue`
        - `input` event --> `update:modelValue`
    - Setting a boolean attribute to `false` does not remove the
      attribute on Vue 3. It ended up with a grayed out switch.
      `disabled` should not directly be bound to the `disabled`
      attribute but a newly computed `disabledOrUndefined` has to be
      used instead.
    - Automatic ESLint fix is applied.
  • Loading branch information
kikuomax committed Jul 6, 2023
1 parent ea627f6 commit 1a878a9
Showing 1 changed file with 22 additions and 10 deletions.
32 changes: 22 additions & 10 deletions src/components/switch/Switch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,38 @@
class="switch"
:class="newClass"
ref="label"
:disabled="disabled"
:disabled="disabledOrUndefined"
@click="focus"
@keydown.prevent.enter="$refs.label.click()"
@mousedown="isMouseDown = true"
@mouseup="isMouseDown = false"
@mouseout="isMouseDown = false"
@blur="isMouseDown = false">
@blur="isMouseDown = false"
>
<input
v-model="computedValue"
type="checkbox"
ref="input"
@click.stop
:disabled="disabled"
:disabled="disabledOrUndefined"
:name="name"
:required="required"
:value="nativeValue"
:true-value="trueValue"
:false-value="falseValue"
:aria-labelledby="ariaLabelledby">
:aria-labelledby="ariaLabelledby"
>
<span
class="check"
:class="checkClasses"/>
:class="checkClasses"
/>
<span
v-if="showControlLabel"
:id="ariaLabelledby"
class="control-label"><slot/></span>
class="control-label"
>
<slot />
</span>
</label>
</template>

Expand All @@ -38,7 +44,7 @@ import config from '../../utils/config'
export default {
name: 'BSwitch',
props: {
value: [String, Number, Boolean, Function, Object, Array, Date],
modelValue: [String, Number, Boolean, Function, Object, Array, Date],
nativeValue: [String, Number, Boolean, Function, Object, Array, Date],
disabled: Boolean,
type: String,
Expand Down Expand Up @@ -72,7 +78,7 @@ export default {
},
data() {
return {
newValue: this.value,
newValue: this.modelValue,
isMouseDown: false
}
},
Expand All @@ -83,7 +89,7 @@ export default {
},
set(value) {
this.newValue = value
this.$emit('input', value)
this.$emit('update:modelValue', value)
}
},
newClass() {
Expand All @@ -106,13 +112,19 @@ export default {
},
showControlLabel() {
return !!this.$slots.default
},
disabledOrUndefined() {
// On Vue 3, setting boolean attribute `false` does not remove it.
// To do so, `null` or `undefined` has to be specified instead.
// Setting `disabled="false"` ends up with a grayed out switch.
return this.disabled || undefined
}
},
watch: {
/**
* When v-model change, set internal value.
*/
value(value) {
modelValue(value) {
this.newValue = value
}
},
Expand Down

0 comments on commit 1a878a9

Please sign in to comment.