primevue-mirror/components/lib/radiobutton/RadioButton.vue

66 lines
2.0 KiB
Vue
Raw Normal View History

2022-09-06 12:03:37 +00:00
<template>
2024-01-14 13:46:21 +00:00
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="radio"
:class="[cx('input'), inputClass]"
:style="inputStyle"
:value="value"
:name="name"
:checked="checked"
:tabindex="tabindex"
:disabled="disabled"
:readonly="readonly"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
@focus="onFocus"
@blur="onBlur"
@change="onChange"
v-bind="getPTOptions('input')"
/>
<div :class="cx('box')" v-bind="getPTOptions('box')">
<div :class="cx('icon')" v-bind="getPTOptions('icon')"></div>
2022-09-06 12:03:37 +00:00
</div>
</div>
</template>
<script>
2022-09-14 11:26:01 +00:00
import { ObjectUtils } from 'primevue/utils';
2023-05-24 12:29:06 +00:00
import BaseRadioButton from './BaseRadioButton.vue';
2022-09-06 12:03:37 +00:00
export default {
name: 'RadioButton',
2023-05-24 12:29:06 +00:00
extends: BaseRadioButton,
emits: ['update:modelValue', 'change', 'focus', 'blur'],
2022-09-06 12:03:37 +00:00
methods: {
getPTOptions(key) {
return this.ptm(key, {
context: {
checked: this.checked,
disabled: this.disabled
2022-09-06 12:03:37 +00:00
}
});
},
onChange(event) {
if (!this.disabled && !this.readonly) {
2024-01-14 22:25:39 +00:00
const newModelValue = this.binary ? !this.checked : this.value;
this.$emit('update:modelValue', newModelValue);
this.$emit('change', event);
2022-09-06 12:03:37 +00:00
}
},
onFocus(event) {
this.$emit('focus', event);
},
onBlur(event) {
this.$emit('blur', event);
}
},
computed: {
checked() {
2024-01-14 22:25:39 +00:00
return this.modelValue != null && (this.binary ? !!this.modelValue : ObjectUtils.equals(this.modelValue, this.value));
2022-09-06 12:03:37 +00:00
}
}
2022-09-14 11:26:01 +00:00
};
2022-09-06 12:03:37 +00:00
</script>