Refactor #5681, #5682, #5683 - For DataTable, InputNumber

pull/5701/head
tugcekucukoglu 2024-05-07 11:20:05 +03:00
parent ee5843c315
commit 45bb31a7d3
8 changed files with 58 additions and 19 deletions

View File

@ -3,7 +3,7 @@
<tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
<button v-if="expandableRowGroups" :class="cx('rowToggleButton')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowToggleButton')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
<component v-if="templates['rowtoggleicon'] || templates['rowgrouptogglericon']" :is="templates['rowtoggleicon'] || templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
<template v-else>
<span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowToggleIcon'), expandedRowIcon]" v-bind="ptm('rowToggleIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />

View File

@ -658,9 +658,9 @@ export interface DataTablePassThroughOptions {
*/
root?: DataTablePassThroughOptionType;
/**
* Used to pass attributes to the overlay's DOM element.
* Used to pass attributes to the mask's DOM element.
*/
overlay?: DataTablePassThroughOptionType;
mask?: DataTablePassThroughOptionType;
/**
* Used to pass attributes to the loading icon's DOM element.
*/

View File

@ -1,7 +1,7 @@
<template>
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptmi('root')">
<slot></slot>
<div v-if="loading" :class="cx('overlay')" v-bind="ptm('overlay')">
<div v-if="loading" :class="cx('mask')" v-bind="ptm('mask')">
<slot v-if="$slots.loading" name="loading"></slot>
<template v-else>
<component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />

View File

@ -595,7 +595,7 @@ const classes = {
'p-datatable-lg': props.size === 'large'
}
],
overlay: 'p-datatable-mask p-component-overlay',
mask: 'p-datatable-mask p-component-overlay',
loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header',
pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,

View File

@ -143,6 +143,10 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the dropdown's DOM element.
*/
dropdown?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the dropdown icon's DOM element.
*/
dropdownIcon?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the panel's DOM element.
*/

View File

@ -34,10 +34,18 @@ export default {
type: String,
default: undefined
},
incrementIcon: {
type: String,
default: undefined
},
decrementButtonIcon: {
type: String,
default: undefined
},
decrementIcon: {
type: String,
default: undefined
},
locale: {
type: String,
default: undefined

View File

@ -113,10 +113,18 @@ export interface InputNumberPassThroughOptions<T = any> {
* Used to pass attributes to the increment button's DOM element.
*/
incrementButton?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the increment icon's DOM element.
*/
incrementIcon?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the decrement button's DOM element.
*/
decrementButton?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the decrement icon's DOM element.
*/
decrementIcon?: InputNumberPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -209,15 +217,23 @@ export interface InputNumberProps {
*/
decrementButtonClass?: string | undefined;
/**
* Style class of the increment button.
* @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
* Style class of the increment icon.
* @deprecated since v4.0. Use 'incrementIcon'.
*/
incrementButtonIcon?: string | undefined;
/**
* Style class of the decrement button.
* @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
* Style class of the increment icon.
*/
incrementIcon?: string | undefined;
/**
* Style class of the decrement icon.
* @deprecated since v4.0. Use 'decrementIcon'.
*/
decrementButtonIcon?: string | undefined;
/**
* Style class of the decrement icon.
*/
decrementIcon?: string | undefined;
/**
* Locale to be used in formatting.
*/
@ -382,13 +398,23 @@ export interface InputNumberSlots {
listeners: InputNumberButtonListeners;
}): VNode[];
/**
* Custom increment button icon template.
* @deprecated since v4.0. Use 'incrementicon' slot.
* Custom increment icon template.
*/
incrementbuttonicon(): VNode[];
/**
* Custom decrement button icon template.
* Custom increment icon template.
*/
incrementicon(): VNode[];
/**
* @deprecated since v4.0. Use 'decrementicon' slot.
* Custom decrement icon template.
*/
decrementbuttonicon(): VNode[];
/**
* Custom decrement icon template.
*/
decrementicon(): VNode[];
}
/**

View File

@ -31,33 +31,34 @@
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
<slot name="incrementbutton" :listeners="upButtonListeners">
<button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('incrementButton')">
<slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
<slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
<component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
</slot>
</button>
</slot>
<slot name="decrementbutton" :listeners="downButtonListeners">
<button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="ptm('decrementButton')">
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
<slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
<component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
</slot>
</button>
</slot>
</span>
<slot name="incrementbutton" :listeners="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')">
<slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButtonIcon')" data-pc-section="incrementbuttonicon" />
<slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
<component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
</slot>
</button>
</slot>
<slot name="decrementbutton" :listeners="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')">
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButtonIcon')" data-pc-section="decrementbuttonicon" />
<slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
<component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
</slot>
</button>
</slot>
<!-- TODO: decrementButton* and incrementButton* are deprecated since v4.0-->
</span>
</template>