Refactor #5426 - For InputNumber

primefaces · Mar 18, 2024 · 586936f · 586936f
1 parent 8983376
commit 586936f
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 59 deletions.
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
@@ -9,7 +9,6 @@
  */
 import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions } from '../button';
 import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
@@ -107,15 +106,13 @@ export interface InputNumberPassThroughOptions<T = any> {
      */
     buttonGroup?: InputNumberPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the increment button's DOM element.
      */
-    incrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
+    incrementButton?: InputNumberPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the decrement button's DOM element.
      */
-    decrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
+    decrementButton?: InputNumberPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -240,7 +237,7 @@ export interface InputNumberProps {
      */
     roundingMode?: RoundingMode;
     /**
-     * Mininum boundary value.
+     * Minimum boundary value.
      */
     min?: number | undefined;
     /**
@@ -339,6 +336,66 @@ export interface InputNumberProps {
  * Defines valid slots in InputNumber component.
  */
 export interface InputNumberSlots {
+    /**
+     * Custom increment button template.
+     */
+    incrementbutton(scope: {
+        /**
+         * Mouse down event of increment button.
+         * @param {Event} event - Browser event
+         */
+        onMousedown: (event: Event) => void;
+        /**
+         * Mouse up event of increment button.
+         * @param {Event} event - Browser event
+         */
+        onMouseup: (event: Event) => void;
+        /**
+         * Mouse leave event of increment button.
+         * @param {Event} event - Browser event
+         */
+        onMouseleave: (event: Event) => void;
+        /**
+         * Key down event of increment button.
+         * @param {Event} event - Browser event
+         */
+        onKeydown: (event: Event) => void;
+        /**
+         * Key up event of increment button.
+         * @param {Event} event - Browser event
+         */
+        onKeyup: (event: Event) => void;
+    }): VNode[];
+    /**
+     * Custom decrement button template.
+     */
+    decrementbutton(scope: {
+        /**
+         * Mouse down event of decrement button.
+         * @param {Event} event - Browser event
+         */
+        onMousedown: (event: Event) => void;
+        /**
+         * Mouse up event of decrement button.
+         * @param {Event} event - Browser event
+         */
+        onMouseup: (event: Event) => void;
+        /**
+         * Mouse leave event of decrement button.
+         * @param {Event} event - Browser event
+         */
+        onMouseleave: (event: Event) => void;
+        /**
+         * Key down event of decrement button.
+         * @param {Event} event - Browser event
+         */
+        onKeydown: (event: Event) => void;
+        /**
+         * Key up event of decrement button.
+         * @param {Event} event - Browser event
+         */
+        onKeyup: (event: Event) => void;
+    }): VNode[];
     /**
      * Custom increment button icon template.
      */

diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
@@ -15,7 +15,8 @@
             :placeholder="placeholder"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
-            :aria-invalid="invalid || undefined"
+            :invalid="invalid"
+            :variant="variant"
             @input="onUserInput"
             @keydown="onInputKeyDown"
             @paste="onPaste"
@@ -27,60 +28,55 @@
             :unstyled="unstyled"
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
-            <INButton :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" :pt="ptm('incrementButton')" :unstyled="unstyled">
-                <template #icon>
+            <slot name="incrementbutton" v-on="upButtonListeners">
+                <button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...ptm('incrementButton'), ...incrementButtonProps }">
                     <slot name="incrementbuttonicon">
-                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" data-pc-section="incrementbuttonicon" />
+                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
                     </slot>
-                </template>
-            </INButton>
-            <INButton :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" :pt="ptm('decrementButton')" :unstyled="unstyled">
-                <template #icon>
+                </button>
+            </slot>
+            <slot name="decrementbutton" v-on="downButtonListeners">
+                <button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...ptm('decrementButton'), ...decrementButtonProps }">
                     <slot name="decrementbuttonicon">
-                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" data-pc-section="decrementbuttonicon" />
+                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
                     </slot>
-                </template>
-            </INButton>
+                </button>
+            </slot>
         </span>
-        <INButton
-            v-if="showButtons && buttonLayout !== 'stacked'"
-            :class="[cx('incrementButton'), incrementButtonClass]"
-            v-on="upButtonListeners"
-            :disabled="disabled"
-            :tabindex="-1"
-            aria-hidden="true"
-            v-bind="incrementButtonProps"
-            :pt="ptm('incrementButton')"
-            :unstyled="unstyled"
-        >
-            <template #icon>
+        <slot name="incrementbutton" v-on="upButtonListeners">
+            <button
+                v-if="showButtons && buttonLayout !== 'stacked'"
+                :class="[cx('incrementButton'), incrementButtonClass]"
+                v-on="upButtonListeners"
+                :disabled="disabled"
+                :tabindex="-1"
+                aria-hidden="true"
+                v-bind="{ ...ptm('incrementButton'), ...incrementButtonProps }"
+            >
                 <slot name="incrementbuttonicon">
-                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" data-pc-section="incrementbuttonicon" />
+                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
                 </slot>
-            </template>
-        </INButton>
-        <INButton
-            v-if="showButtons && buttonLayout !== 'stacked'"
-            :class="[cx('decrementButton'), decrementButtonClass]"
-            v-on="downButtonListeners"
-            :disabled="disabled"
-            :tabindex="-1"
-            aria-hidden="true"
-            v-bind="decrementButtonProps"
-            :pt="ptm('decrementButton')"
-            :unstyled="unstyled"
-        >
-            <template #icon>
+            </button>
+        </slot>
+        <slot name="decrementbutton" v-on="downButtonListeners">
+            <button
+                v-if="showButtons && buttonLayout !== 'stacked'"
+                :class="[cx('decrementButton'), decrementButtonClass]"
+                v-on="downButtonListeners"
+                :disabled="disabled"
+                :tabindex="-1"
+                aria-hidden="true"
+                v-bind="{ ...ptm('decrementButton'), ...decrementButtonProps }"
+            >
                 <slot name="decrementbuttonicon">
-                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" data-pc-section="decrementbuttonicon" />
+                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
                 </slot>
-            </template>
-        </INButton>
+            </button>
+        </slot>
     </span>
 </template>
 
 <script>
-import Button from 'primevue/button';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleUpIcon from 'primevue/icons/angleup';
 import InputText from 'primevue/inputtext';
@@ -988,7 +984,6 @@ export default {
     },
     components: {
         INInputText: InputText,
-        INButton: Button,
         AngleUpIcon: AngleUpIcon,
         AngleDownIcon: AngleDownIcon
     }

diff --git a/components/lib/inputnumber/style/InputNumberStyle.js b/components/lib/inputnumber/style/InputNumberStyle.js
@@ -8,16 +8,10 @@ const classes = {
             'p-inputwrapper-focus': instance.focused,
             'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked',
             'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
-            'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical',
-            'p-invalid': props.invalid
-        }
-    ],
-    input: ({ props, instance }) => [
-        'p-inputnumber-input',
-        {
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical'
         }
     ],
+    input: 'p-inputnumber-input',
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ instance, props }) => [
         'p-inputnumber-button p-inputnumber-button-up',