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

Refactor #3832 Refactor #3833 - For InputNumber

pull/3841/head
Tuğçe Küçükoğlu 2023-04-04 15:40:30 +03:00
parent ad64a8aeab
commit 06124bd86e
3 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
api-generator/components/inputnumber.js
View File

@ -231,11 +231,23 @@ const InputNumberEvents = [
} }
]; ];
const InputNumberSlots = [
{
name: 'incrementbuttonicon',
description: 'Custom increment button icon template.'
},
{
name: 'decrementbuttonicon',
description: 'Custom decrement button icon template.'
}
];
module.exports = { module.exports = {
inputnumber: { inputnumber: {
name: 'InputNumber', name: 'InputNumber',
description: 'InputNumber is an input component to provide numerical input.', description: 'InputNumber is an input component to provide numerical input.',
props: InputNumberProps, props: InputNumberProps,
events: InputNumberEvents events: InputNumberEvents,
slots: InputNumberSlots
} }
}; };

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

@ -7,7 +7,7 @@
* @module inputnumber * @module inputnumber
* *
*/ */
import { ButtonHTMLAttributes, InputHTMLAttributes } from 'vue'; import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
/** /**
@ -73,12 +73,10 @@ export interface InputNumberProps {
decrementButtonClass?: string | undefined; decrementButtonClass?: string | undefined;
/** /**
* Style class of the increment button. * Style class of the increment button.
* @defaultValue pi pi-angle-up
*/ */
incrementButtonIcon?: string | undefined; incrementButtonIcon?: string | undefined;
/** /**
* Style class of the decrement button. * Style class of the decrement button.
* @defaultValue pi pi-angle-down
*/ */
decrementButtonIcon?: string | undefined; decrementButtonIcon?: string | undefined;
/** /**
@ -203,7 +201,16 @@ export interface InputNumberProps {
/** /**
* Defines valid slots in InputNumber component. * Defines valid slots in InputNumber component.
*/ */
export interface InputNumberSlots {} export interface InputNumberSlots {
/**
* Custom increment button icon template.
*/
incrementbuttonicon(): VNode[];
/**
* Custom decrement button icon template.
*/
decrementbuttonicon(): VNode[];
}
/** /**
* Defines valid emits in InputNumber component. * Defines valid emits in InputNumber component.

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

@ -26,16 +26,34 @@
v-bind="inputProps" v-bind="inputProps"
/> />
<span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group"> <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
<INButton :class="upButtonClass" :icon="incrementButtonIcon" 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">
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" /> <slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
</slot>
</INButton>
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
</slot>
</INButton>
</span> </span>
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" /> <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" /> <slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
</slot>
</INButton>
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
</slot>
</INButton>
</span> </span>
</template> </template>
<script> <script>
import Button from 'primevue/button'; import Button from 'primevue/button';
import AngleDownIcon from 'primevue/icon/angledown';
import AngleUpIcon from 'primevue/icon/angleup';
import InputText from 'primevue/inputtext'; import InputText from 'primevue/inputtext';
import { DomHandler } from 'primevue/utils'; import { DomHandler } from 'primevue/utils';
@ -69,11 +87,11 @@ export default {
}, },
incrementButtonIcon: { incrementButtonIcon: {
type: String, type: String,
default: 'pi pi-angle-up' default: undefined
}, },
decrementButtonIcon: { decrementButtonIcon: {
type: String, type: String,
default: 'pi pi-angle-down' default: undefined
}, },
locale: { locale: {
type: String, type: String,
@ -1097,7 +1115,9 @@ export default {
}, },
components: { components: {
INInputText: InputText, INInputText: InputText,
INButton: Button INButton: Button,
AngleUpIcon: AngleUpIcon,
AngleDownIcon: AngleDownIcon
} }
}; };
</script> </script>