Refactor #5071

components/lib/radiobutton/RadioButton.d.ts

@@ -7,7 +7,6 @@
  * @module radiobutton
  *
  */
-import { InputHTMLAttributes } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -30,6 +29,10 @@ export interface RadioButtonPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: RadioButtonState;
+    /**
+     * Defines current options.
+     */
+    context: RadioButtonContext;
     /**
      * Defines valid attributes.
      */
@@ -57,18 +60,14 @@ export interface RadioButtonPassThroughOptions {
      * Used to pass attributes to the input's DOM element.
      */
     input?: RadioButtonPassThroughOptionType;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: RadioButtonPassThroughOptionType;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
     icon?: RadioButtonPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hidden accessible DOM element wrapper.
-     */
-    hiddenInputWrapper?: RadioButtonPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hidden accessible DOM element.
-     */
-    hiddenInput?: RadioButtonPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -87,11 +86,7 @@ export interface RadioButtonPassThroughAttributes {
  * Defines current inline state in RadioButton component.
  */
 export interface RadioButtonState {
-    /**
-     * Current focused state as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
+    [key: string]: any;
 }
 
 /**
@@ -115,6 +110,15 @@ export interface RadioButtonProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
     /**
      * Identifier of the underlying input element.
      */
@@ -127,10 +131,6 @@ export interface RadioButtonProps {
      * Style class of the input field.
      */
     inputClass?: string | object | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
@@ -156,6 +156,22 @@ export interface RadioButtonProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines current options in RadioButton component.
+ */
+export interface RadioButtonContext {
+    /**
+     * Current checked state of the item as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 export interface RadioButtonSlots {}
 
 /**
@@ -167,16 +183,21 @@ export interface RadioButtonEmits {
      * @param {*} value - New value.
      */
     'update:modelValue'(value: any): void;
-    /**
-     * Callback to invoke on radio button click.
-     * @param {Event} event - Browser event.
-     */
-    click(event: Event): void;
     /**
      * Callback to invoke on radio button value change.
      * @param {Event} event - Browser event.
      */
     change(event: Event): void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
 }
 
 /**

components/lib/radiobutton/RadioButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-checked="checked" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="radio"