Refactor #3922 - For InputNumber

api-generator/components/inputnumber.js

@@ -182,6 +182,12 @@ const InputNumberProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -31,6 +31,7 @@ import { ImagePassThroughOptions } from '../image';
 import { InlineMessagePassThroughOptions } from '../inlinemessage';
 import { InplacePassThroughOptions } from '../inplace';
 import { InputMaskPassThroughOptions } from '../inputmask';
+import { InputNumberPassThroughOptions } from '../inputnumber';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { MegaMenuPassThroughOptions } from '../megamenu';
 import { MenuPassThroughOptions } from '../menu';
@@ -108,6 +109,7 @@ interface PrimeVuePTOptions {
     inlinemessage?: InlineMessagePassThroughOptions;
     inplace?: InplacePassThroughOptions;
     inputmask?: InputMaskPassThroughOptions;
+    inputnumber?: InputNumberPassThroughOptions;
     inputtext?: InputTextPassThroughOptions;
     megamenu?: MegaMenuPassThroughOptions;
     menu?: MenuPassThroughOptions;

components/lib/inputnumber/InputNumber.d.ts

@@ -8,8 +8,20 @@
  *
  */
 import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
+import { InputTextPassThroughOptionType } from '../inputtext';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
+export declare type InputNumberPassThroughOptionType = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputNumberPassThroughMethodOptions {
+    props: InputNumberProps;
+    state: InputNumberState;
+}
+
 /**
  * Custom input event.
  * @see {@link InputNumberEmits.input}
@@ -40,6 +52,58 @@ export interface InputNumberBlurEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputNumberProps.pt}
+ */
+export interface InputNumberPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputNumberPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Input component.
+     * @see {@link InputTextPassThroughOptionType}
+     */
+    input?: InputTextPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button group's DOM element.
+     */
+    buttonGroup?: InputNumberPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    incrementButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    decrementButton?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputNumberPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InputNumber component.
+ */
+export interface InputNumberState {
+    /**
+     * Current value state as a number.
+     */
+    d_modelValue: number;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in InputNumber component.
  */
@@ -198,6 +262,11 @@ export interface InputNumberProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputNumberPassThroughOptions}
+     */
+    pt?: InputNumberPassThroughOptions;
 }
 
 /**

components/lib/inputnumber/InputNumber.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="containerClass">
+    <span :class="containerClass" v-bind="ptm('root')">
         <INInputText
             ref="input"
             :id="inputId"
@@ -23,35 +23,35 @@
             @click="onInputClick"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
-        <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
+        <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group" v-bind="ptm('buttonGroup')">
-            <INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
+            <INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
                 <template #icon>
                     <slot name="incrementbuttonicon">
-                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
+                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" />
                     </slot>
                 </template>
             </INButton>
-            <INButton :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
+            <INButton :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
                 <template #icon>
                     <slot name="decrementbuttonicon">
-                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
+                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" />
                     </slot>
                 </template>
             </INButton>
         </span>
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
             <template #icon>
                 <slot name="incrementbuttonicon">
-                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
+                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" />
                 </slot>
             </template>
         </INButton>
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
             <template #icon>
                 <slot name="decrementbuttonicon">
-                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
+                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" />
                 </slot>
             </template>
         </INButton>
@@ -59,6 +59,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleUpIcon from 'primevue/icons/angleup';
@@ -67,6 +68,7 @@ import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'InputNumber',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'input', 'focus', 'blur'],
     props: {
         modelValue: {