Refactor #3922 - For TriStateCheckbox

components/lib/tristatecheckbox/TriStateCheckbox.d.ts

@@ -18,6 +18,7 @@ export declare type TriStateCheckboxPassThroughOptionType = TriStateCheckboxPass
 export interface TriStateCheckboxPassThroughMethodOptions {
     props: TriStateCheckboxProps;
     state: TriStateCheckboxState;
+    context: TriStateCheckboxContext;
 }
 
 /**
@@ -29,22 +30,10 @@ export interface TriStateCheckboxPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: TriStateCheckboxPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the input aria's DOM element.
-     */
-    inputAria?: TriStateCheckboxPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the input's DOM element.
-     */
-    input?: TriStateCheckboxPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the sr only aria's DOM element.
-     */
-    srOnlyAria?: TriStateCheckboxPassThroughOptionType;
     /**
      * Uses to pass attributes to the checkbox box's DOM element.
      */
-    checboxBox?: TriStateCheckboxPassThroughOptionType;
+    checbox?: TriStateCheckboxPassThroughOptionType;
     /**
      * Uses to pass attributes to the check icon's DOM element.
      */
@@ -57,6 +46,18 @@ export interface TriStateCheckboxPassThroughOptions {
      * Uses to pass attributes to the nullable icon's DOM element.
      */
     nullableIcon?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sr only aria's DOM element.
+     */
+    srOnlyAria?: TriStateCheckboxPassThroughOptionType;
 }
 
 /**
@@ -76,6 +77,27 @@ export interface TriStateCheckboxState {
     focused: boolean;
 }
 
+/**
+ * Defines current options in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxContext {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in TriStateCheckbox component.
  */

components/lib/tristatecheckbox/TriStateCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
-        <div class="p-hidden-accessible" v-bind="ptm('inputAria')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="input"
                 :id="inputId"
@@ -13,11 +13,11 @@
                 @keydown="onKeyDown($event)"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="{ ...inputProps, ...ptm('input') }"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </div>
         <span class="p-sr-only" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span>
-        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="ptm('checboxBox')">
+        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getPTOptions('checbox')">
             <slot v-if="modelValue === true" name="checkicon">
                 <component :is="'CheckIcon'" class="p-checkbox-icon" v-bind="ptm('checkIcon')" />
             </slot>
@@ -73,6 +73,15 @@ export default {
         };
     },
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.modelValue !== null,
+                    focused: this.focused,
+                    disabled: this.disabled
+                }
+            });
+        },
         updateModel() {
             if (!this.disabled) {
                 let newValue;