vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5426 - For InputNumber

pull/5507/head
tugcekucukoglu 2024-03-18 13:02:11 +03:00
parent 898337667e
commit 586936fd95
3 changed files with 105 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/lib/inputnumber/InputNumber.d.ts vendored
View File

@ -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.
*/

81
components/lib/inputnumber/InputNumber.vue
View File

@ -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
}

10
components/lib/inputnumber/style/InputNumberStyle.js
View File

@ -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',