Refactor #3922 - For Checkbox

api-generator/components/checkbox.js

@@ -88,6 +88,12 @@ const CheckboxProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/checkbox/Checkbox.d.ts

@@ -10,6 +10,57 @@
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CheckboxPassThroughMethodOptions {
+    props: CheckboxProps;
+    state: CheckboxState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CheckboxProps.pt}
+ */
+export interface CheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input aria's DOM element.
+     */
+    inputAria?: CheckboxPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CheckboxPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Checkbox component.
+ */
+export interface CheckboxState {
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in Checkbox component.
  */
@@ -84,6 +135,11 @@ export interface CheckboxProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CheckboxPassThroughOptions}
+     */
+    pt?: CheckboxPassThroughOptions;
 }
 
 export interface CheckboxSlots {

components/lib/checkbox/Checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)">
+    <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
         <div class="p-hidden-accessible">
             <input
                 ref="input"
@@ -16,23 +16,25 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="inputProps"
+                v-bind="ptm('inputAria')"
             />
         </div>
-        <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle">
+        <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }">
             <slot name="icon" :checked="checked">
-                <component :is="checked ? 'CheckIcon' : null" class="p-checkbox-icon" />
+                <component :is="checked ? 'CheckIcon' : null" class="p-checkbox-icon" v-bind="ptm('icon')" />
             </slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Checkbox',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
     props: {
         value: null,

components/lib/config/PrimeVue.d.ts

@@ -12,6 +12,7 @@ import { CardPassThroughOptions } from '../card';
 import { CarouselPassThroughOptions } from '../carousel';
 import { CascadeSelectPassThroughOptions } from '../cascadeselect';
 import { ChartPassThroughOptions } from '../chart';
+import { CheckboxPassThroughOptions } from '../checkbox';
 import { ChipPassThroughOptions } from '../chip';
 import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
 import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
@@ -82,6 +83,7 @@ interface PrimeVuePTOptions {
     carousel?: CarouselPassThroughOptions;
     cascadeselect?: CascadeSelectPassThroughOptions;
     chart?: ChartPassThroughOptions;
+    checkbox?: CheckboxPassThroughOptions;
     chip?: ChipPassThroughOptions;
     confirmdialog?: ConfirmDialogPassThroughOptions;
     confirmpopup?: ConfirmPopupPassThroughOptions;