Fixed #5179 - Improve data-pc- structure in components

This commit is contained in:
mertsincan 2024-01-30 14:35:32 +00:00
parent 3b72308226
commit 4836654f7b
85 changed files with 128 additions and 242 deletions

View file

@ -69,7 +69,6 @@
@update:modelValue="onOperatorChange($event)"
:unstyled="unstyled"
:pt="getColumnPT('filterOperatorDropdown')"
data-pc-section="filteroperatordropdown"
></CFDropdown>
</div>
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
@ -85,7 +84,6 @@
@update:modelValue="onMenuMatchModeChange($event, i)"
:unstyled="unstyled"
:pt="getColumnPT('filterMatchModeDropdown')"
data-pc-section="filtermatchmodedropdown"
></CFDropdown>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')">
@ -100,7 +98,6 @@
severity="danger"
size="small"
:pt="getColumnPT('filterRemoveButton')"
data-pc-section="filterremovebutton"
>
<template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
@ -121,7 +118,6 @@
severity="info"
size="small"
:pt="getColumnPT('filterAddRuleButton')"
data-pc-section="filteraddrulebutton"
>
<template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
@ -139,21 +135,10 @@
size="small"
outlined
:pt="getColumnPT('filterClearButton')"
data-pc-section="filterclearbutton"
></CFButton>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton
v-if="!filterApplyTemplate"
type="button"
:class="cx('filterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
size="small"
:pt="getColumnPT('filterApplyButton')"
data-pc-section="filterapplybutton"
></CFButton>
<CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>
</div>

View file

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')" data-pc-name="datatable">
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
<slot></slot>
<div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
<slot v-if="$slots.loading" name="loading"></slot>

View file

@ -27,7 +27,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" data-pc-section="sorticon" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox