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

This commit is contained in:
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,