Refactor #5071 - Improve the structure of some components to comply with standards

components/lib/radiobutton/BaseRadioButton.vue

@@ -16,6 +16,14 @@ export default {
             type: Boolean,
             default: false
         },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
         inputId: {
             type: String,
             default: null
@@ -28,10 +36,6 @@ export default {
             type: Object,
             default: null
         },
-        inputProps: {
-            type: null,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null

components/lib/radiobutton/RadioButton.vue

@@ -1,10 +1,25 @@
 <template>
-    <div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="radiobutton">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input ref="input" :id="inputId" type="radio" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="ptm('hiddenInput')" />
-        </div>
-        <div ref="box" :class="[cx('input'), inputClass]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }" :data-p-highlight="checked" :data-p-disabled="disabled" :data-p-focused="focused">
-            <div :class="cx('icon')" v-bind="ptm('icon')"></div>
+    <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>
         </div>
     </div>
 </template>
@@ -16,30 +31,26 @@ import BaseRadioButton from './BaseRadioButton.vue';
 export default {
     name: 'RadioButton',
     extends: BaseRadioButton,
-    emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
     methods: {
-        onClick(event) {
-            if (!this.disabled) {
-                this.$emit('click', event);
-                this.$emit('update:modelValue', this.value);
-                this.$refs.input.focus();
-
-                if (!this.checked) {
-                    this.$emit('change', event);
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
                 }
+            });
+        },
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
+                this.$emit('update:modelValue', this.value);
+                this.$emit('change', event);
             }
         },
         onFocus(event) {
-            this.focused = true;
             this.$emit('focus', event);
         },
         onBlur(event) {
-            this.focused = false;
             this.$emit('blur', event);
         }
     },

components/lib/radiobutton/style/RadioButtonStyle.js

@@ -1,26 +1,54 @@
 import BaseStyle from 'primevue/base/style';
 
+const css = `
+@layer primevue {
+    .p-radiobutton {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+    }
+
+    .p-radiobutton-input {
+        cursor: pointer;
+    }
+
+    .p-radiobutton-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-radiobutton-icon {
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: translateZ(0) scale(.1);
+        border-radius: 50%;
+        visibility: hidden;
+    }
+
+    .p-radiobutton.p-highlight .p-radiobutton-icon {
+        transform: translateZ(0) scale(1.0, 1.0);
+        visibility: visible;
+    }
+}
+`;
+
 const classes = {
     root: ({ instance, props }) => [
         'p-radiobutton p-component',
-        {
-            'p-radiobutton-checked': instance.checked,
-            'p-radiobutton-disabled': props.disabled,
-            'p-radiobutton-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-radiobutton-box',
         {
             'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
+            'p-disabled': props.disabled
         }
     ],
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
     icon: 'p-radiobutton-icon'
 };
 
 export default BaseStyle.extend({
     name: 'radiobutton',
+    css,
     classes
 });