vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactored tokens of Data components

Browse source
This commit is contained in:
Cagatay Civici 2024-05-05 00:57:50 +03:00
parent 0d488b1ba9
commit c617766c77
14 changed files with 227 additions and 431 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/lib/treetable/BodyCell.vue
View file

@ -1,6 +1,6 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggleButton')" data-pc-group-section="rowactionbutton">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('nodeToggleButton')" data-pc-group-section="rowactionbutton">
<template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetoggleicon']" :is="templates['nodetoggleicon']" />
<!-- TODO: Deprecated since v4.0-->
@ -19,12 +19,12 @@
v-if="checkboxSelectionMode && columnProp('expander')"
:modelValue="checked"
:binary="true"
:class="cx('rowCheckbox')"
:class="cx('nodeCheckbox')"
@change="toggleCheckbox"
:tabindex="-1"
:indeterminate="partialChecked"
:unstyled="unstyled"
:pt="getColumnCheckboxPT('rowCheckbox')"
:pt="getColumnCheckboxPT('nodeCheckbox')"
:data-p-partialchecked="partialChecked"
>
<template #icon="slotProps">

24
components/lib/treetable/style/TreeTableStyle.js
View file

@ -162,7 +162,7 @@ const theme = ({ dt }) => `
position: absolute;
z-index: 10;
display: none;
background: ${dt('treetable.resizer.color')};
background: ${dt('treetable.resize.indicator.color')};
}
.p-treetable-row-reorder-indicator-up,
@ -411,7 +411,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
padding: 0.9375rem 1.25rem;
}
.p-treetable-row-toggle-button {
.p-treetable-node-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
@ -419,7 +419,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
position: relative;
width: 1.75rem;
height: 1.75rem;
color: ${dt('treetable.row.action.color')};
color: ${dt('treetable.node.toggle.button.color')};
border: 0 none;
background: transparent;
cursor: pointer;
@ -430,18 +430,18 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
margin-right: 0.5rem;
}
.p-treetable-row-toggle-button:enabled:hover {
color: ${dt('treetable.row.action.hover.color')};
background: ${dt('treetable.row.action.hover.background')};
.p-treetable-node-toggle-button:enabled:hover {
color: ${dt('treetable.node.toggle.button.hover.color')};
background: ${dt('treetable.node.toggle.button.hover.background')};
}
.p-treetable-row-toggle-button:focus-visible {
.p-treetable-node-toggle-button:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
}
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-row-toggle-button:hover{
background: ${dt('treetable.row.action.highlight.hover.background')};
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover{
background: ${dt('treetable.node.toggle.button.highlight.hover.background')};
color: inherit;
}
@ -503,9 +503,9 @@ const classes = {
'p-treetable-frozen-column': instance.columnProp('frozen')
}
],
rowToggleButton: 'p-treetable-row-toggle-button',
rowToggleIcon: 'p-treetable-row-toggle-icon',
rowCheckbox: 'p-treetable-row-checkbox',
nodeToggleButton: 'p-treetable-node-toggle-button',
nodeToggleIcon: 'p-treetable-node-toggle-icon',
nodeCheckbox: 'p-treetable-node-checkbox',
emptyMessage: 'p-treetable-empty-message',
tfoot: 'p-treetable-tfoot',
footerCell: ({ instance }) => [