Tokens for TreeTable
parent
87839a4b84
commit
cb9cd5e623
|
@ -574,8 +574,6 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
|
|||
outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')};
|
||||
outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
|
|
|
@ -74,8 +74,8 @@ export default {
|
|||
rowToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
selectedHoverBackground: '{content.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.muted.color}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
selectedHoverColor: '{primary.color}',
|
||||
size: '1.75rem',
|
||||
borderRadius: '50%',
|
||||
|
|
|
@ -1,54 +1,105 @@
|
|||
export default {
|
||||
header: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
color: '{content.color}',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '600'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
borderColor: '{treetable.border.color}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
hoverColor: '{content.hover.color}',
|
||||
selectedColor: '{highlight.color}',
|
||||
gap: '0.5rem',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '600',
|
||||
align: 'left',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
row: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
hoverColor: '{content.hover.color}',
|
||||
selectedColor: '{highlight.color}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
padding: '0.75rem 1rem',
|
||||
gap: '0.5rem'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
color: '{content.color}',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '600'
|
||||
},
|
||||
footer: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
borderColor: '{treetable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
resizeIndicatorColor: '{primary.color}',
|
||||
columnResizerWidth: '0.5rem',
|
||||
resizeIndicator: {
|
||||
width: '1px',
|
||||
color: '{primary.color}'
|
||||
},
|
||||
sortIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
loadingIcon: {
|
||||
size: '2rem'
|
||||
},
|
||||
nodeToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
highlightHoverBackground: '{content.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.muted.color}'
|
||||
selectedHoverBackground: '{content.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
selectedHoverColor: '{primary.color}',
|
||||
size: '1.75rem',
|
||||
borderRadius: '50%',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
paginatorTop: {
|
||||
borderColor: '{content.border.color}',
|
||||
borderWidth: '0 0 1px 0'
|
||||
},
|
||||
paginatorBottom: {
|
||||
borderColor: '{content.border.color}',
|
||||
borderWidth: '0 0 1px 0'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
row: {
|
||||
stripedBackground: '{surface.50}'
|
||||
},
|
||||
bodyCell: {
|
||||
selectedBorderColor: '{primary.100}'
|
||||
}
|
||||
|
@ -57,9 +108,6 @@ export default {
|
|||
root: {
|
||||
borderColor: '{surface.800}'
|
||||
},
|
||||
row: {
|
||||
stripedBackground: '{surface.950}'
|
||||
},
|
||||
bodyCell: {
|
||||
selectedBorderColor: '{primary.900}'
|
||||
}
|
||||
|
|
|
@ -69,8 +69,8 @@ export default {
|
|||
rowToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
selectedHoverBackground: '{content.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.muted.color}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
selectedHoverColor: '{primary.color}',
|
||||
size: '1.75rem',
|
||||
borderRadius: '50%',
|
||||
|
|
|
@ -1,53 +1,115 @@
|
|||
export default {
|
||||
header: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
borderWidth: '1px 0 1px 0',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '700'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
selectedBackground: '{highlight.background}',
|
||||
borderColor: '{treetable.border.color}',
|
||||
hoverColor: '{content.hover.color}',
|
||||
selectedColor: '{highlight.color}',
|
||||
gap: '0.5rem',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '700',
|
||||
align: 'left',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: 'inset {focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
row: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
hoverColor: '{sr.hover.color}',
|
||||
selectedColor: '{highlight.color}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: 'inset {focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
padding: '0.75rem 1rem',
|
||||
gap: '0.5rem'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '700'
|
||||
},
|
||||
footer: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
borderColor: '{treetable.border.color}',
|
||||
borderWidth: '0 0 1px',
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '700'
|
||||
},
|
||||
columnResizerWidth: '0.5rem',
|
||||
resizeIndicator: {
|
||||
width: '1px',
|
||||
color: '{primary.color}'
|
||||
},
|
||||
resizeIndicatorColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
loadingIcon: {
|
||||
size: '2rem'
|
||||
},
|
||||
nodeToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
highlightHoverBackground: '{content.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.muted.color}'
|
||||
selectedHoverBackground: '{content.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
selectedHoverColor: '{primary.color}',
|
||||
size: '1.75rem',
|
||||
borderRadius: '50%',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
paginatorTop: {
|
||||
borderColor: '{content.border.color}',
|
||||
borderWidth: '0 0 1px 0'
|
||||
},
|
||||
paginatorBottom: {
|
||||
borderColor: '{content.border.color}',
|
||||
borderWidth: '0 0 1px 0'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
row: {
|
||||
stripedBackground: '{surface.50}'
|
||||
header: {
|
||||
background: '{surface.100}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{surface.100}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.100}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{surface.100}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
bodyCell: {
|
||||
selectedBorderColor: '{primary.100}'
|
||||
|
@ -57,8 +119,21 @@ export default {
|
|||
root: {
|
||||
borderColor: '{surface.800}'
|
||||
},
|
||||
row: {
|
||||
stripedBackground: '{surface.950}'
|
||||
header: {
|
||||
background: '{surface.800}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{surface.800}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.800}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{surface.800}',
|
||||
color: '{text.color}'
|
||||
},
|
||||
bodyCell: {
|
||||
selectedBorderColor: '{primary.900}'
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
|
||||
<div :class="cx('bodyCellContent')" v-bind="getColumnPT('bodyCellContent')">
|
||||
<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']" />
|
||||
|
@ -32,9 +33,8 @@
|
|||
</template>
|
||||
</Checkbox>
|
||||
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
|
||||
<template v-else>
|
||||
<span v-bind="getColumnPT('bodyCellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
|
||||
</template>
|
||||
<template v-else>{{ resolveFieldData(node.data, columnProp('field')) }}</template>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-table {
|
||||
border-spacing: 0px;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -24,7 +24,6 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-treetable-sort-icon {
|
||||
color: ${dt('treetable.sort.icon.color')};
|
||||
margin-left: 0.5rem;
|
||||
transition: color ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
|
@ -36,7 +35,6 @@ const theme = ({ dt }) => `
|
|||
height: 1rem;
|
||||
min-width: 1rem;
|
||||
line-height: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
|
||||
|
@ -49,17 +47,18 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-column-sorted {
|
||||
background: ${dt('highlight.background')};
|
||||
color: ${dt('highlight.color')};
|
||||
}
|
||||
|
||||
.p-treetable-sortable-column:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: -1px;
|
||||
background: ${dt('treetable.header.cell.selected.background')};
|
||||
color: ${dt('treetable.header.cell.selected.color')};
|
||||
}
|
||||
|
||||
.p-treetable-column-sorted .p-treetable-sort-icon {
|
||||
color: ${dt('highlight.color')};
|
||||
color: ${dt('treetable.header.cell.selected.color')};
|
||||
}
|
||||
|
||||
.p-treetable-sortable-column:focus-visible {
|
||||
box-shadow: ${dt('treetable.header.cell.focus.ring.shadow')};
|
||||
outline: ${dt('treetable.header.cell.focus.ring.width')} ${dt('treetable.header.cell.focus.ring.style')} ${dt('treetable.header.cell.focus.ring.color')};
|
||||
outline-offset: ${dt('treetable.header.cell.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-treetable-hoverable .p-treetable-selectable-row {
|
||||
|
@ -94,13 +93,11 @@ const theme = ({ dt }) => `
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead,
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-virtualscroller > .p-treetable-table > .p-treetable-thead {
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
|
||||
background: ${dt('treetable.header.cell.background')};
|
||||
}
|
||||
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot,
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-virtualscroller > .p-treetable-table > .p-treetable-tfoot {
|
||||
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot {
|
||||
background: ${dt('treetable.footer.cell.background')};
|
||||
}
|
||||
|
||||
|
@ -110,7 +107,7 @@ const theme = ({ dt }) => `
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable>.p-treetable-table-container {
|
||||
.p-treetable-flex-scrollable > .p-treetable-table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
@ -122,7 +119,6 @@ const theme = ({ dt }) => `
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Resizable */
|
||||
.p-treetable-resizable-table > .p-treetable-thead > tr > th,
|
||||
.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
|
||||
.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
|
||||
|
@ -145,7 +141,7 @@ const theme = ({ dt }) => `
|
|||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
width: 0.5rem;
|
||||
width: ${dt('treetable.column.resizer.width')};
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
cursor: col-resize;
|
||||
|
@ -155,27 +151,17 @@ const theme = ({ dt }) => `
|
|||
.p-treetable-column-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${dt('treetable.header.cell.gap')};
|
||||
}
|
||||
|
||||
.p-treetable-column-resize-indicator {
|
||||
width: 1px;
|
||||
width: ${dt('treetable.resize.indicator.width')};
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
background: ${dt('treetable.resize.indicator.color')};
|
||||
}
|
||||
|
||||
.p-treetable-row-reorder-indicator-up,
|
||||
.p-treetable-row-reorder-indicator-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-treetable-reorderable-column,
|
||||
.p-treetable-reorderable-row-handle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.p-treetable-mask {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
@ -184,64 +170,63 @@ const theme = ({ dt }) => `
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.p-treetable-virtualscroller-spacer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-treetable .p-virtualscroller .p-virtualscroller-loading {
|
||||
transform: none !important;
|
||||
min-height: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-treetable-paginator-top {
|
||||
border: solid ${dt('treetable.header.border.color')};
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: ${dt('treetable.paginator.top.border.color')};
|
||||
border-style: solid;
|
||||
border-width: ${dt('treetable.paginator.top.border.width')};
|
||||
}
|
||||
|
||||
.p-treetable-paginator-bottom {
|
||||
border-color: ${dt('treetable.paginator.bottom.border.color')};
|
||||
border-style: solid;
|
||||
border-width: ${dt('treetable.paginator.bottom.border.width')};
|
||||
}
|
||||
|
||||
.p-treetable-header {
|
||||
background: ${dt('treetable.header.background')};
|
||||
color: ${dt('treetable.header.color')};
|
||||
border: 1px solid ${dt('treetable.header.border.color')};
|
||||
border-width: 0 0 1px 0;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
border-color: ${dt('treetable.header.border.color')};
|
||||
border-style: solid;
|
||||
border-width: ${dt('treetable.header.border.width')};
|
||||
padding: ${dt('treetable.header.padding')};
|
||||
font-weight: ${dt('treetable.header.font.weight')};
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
background: ${dt('treetable.footer.background')};
|
||||
color: ${dt('treetable.footer.color')};
|
||||
border: 1px solid ${dt('treetable.footer.border.color')};
|
||||
border-width: 0 0 1px 0;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
border-color: ${dt('treetable.footer.border.color')};
|
||||
border-style: solid;
|
||||
border-width: ${dt('treetable.footer.border.width')};
|
||||
padding: ${dt('treetable.footer.padding')};
|
||||
font-weight: ${dt('treetable.footer.font.weight')};
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: ${dt('treetable.header.cell.text.align')};
|
||||
padding: ${dt('treetable.header.cell.padding')};
|
||||
background: ${dt('treetable.header.cell.background')};
|
||||
border: 1px solid ${dt('treetable.header.cell.border.color')};
|
||||
border-color: ${dt('treetable.header.cell.border.color')};
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
color: ${dt('treetable.header.cell.color')};
|
||||
font-weight: 600;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
font-weight: ${dt('treetable.header.font.weight')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr {
|
||||
outline-color: transparent;
|
||||
background: ${dt('treetable.row.background')};
|
||||
color: ${dt('treetable.row.color')};
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
text-align: left;
|
||||
border: 1px solid ${dt('treetable.body.cell.border.color')};
|
||||
border-color: ${dt('treetable.body.cell.border.color')};
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: ${dt('treetable.body.cell.padding')};
|
||||
}
|
||||
|
||||
.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
|
||||
|
@ -250,42 +235,40 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected {
|
||||
background: ${dt('highlight.background')};
|
||||
color: ${dt('highlight.color')};
|
||||
background: ${dt('treetable.row.selected.background')};
|
||||
color: ${dt('treetable.row.selected.color')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
|
||||
border-bottom-color: ${dt('treetable.body.cell.selected.border.color')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selectedt > td {
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected > td {
|
||||
border-bottom-color: ${dt('treetable.body.cell.selected.border.color')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr:focus-visible {
|
||||
outline: 1px solid ${dt('focus.ring.color')};
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr:focus-visible,
|
||||
.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
|
||||
outline: 1px solid ${dt('focus.ring.color')};
|
||||
outline-offset: -1px;
|
||||
box-shadow: ${dt('treetable.body.cell.focus.ring.shadow')};
|
||||
outline: ${dt('treetable.body.cell.focus.ring.width')} ${dt('treetable.body.cell.focus.ring.style')} ${dt('treetable.body.cell.focus.ring.color')};
|
||||
outline-offset: ${dt('treetable.body.cell.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid ${dt('treetable.footer.cell.border.color')};
|
||||
padding: ${dt('treetable.footer.cell.padding')};
|
||||
border-color: ${dt('treetable.footer.cell.border.color')};
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
font-weight: 600;
|
||||
font-weight: ${dt('treetable.footer.cell.font.weight')};
|
||||
color: ${dt('treetable.footer.cell.color')};
|
||||
background: ${dt('treetable.footer.cell.background')};
|
||||
}
|
||||
|
||||
.p-treetable-loading-icon {
|
||||
font-size: 2rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: ${dt('treetable.loading.icon.size')};
|
||||
width: ${dt('treetable.loading.icon.size')};
|
||||
height: ${dt('treetable.loading.icon.size')};
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-header {
|
||||
|
@ -302,8 +285,6 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-treetable-gridlines .p-treetable-paginator-bottom {
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: ${dt('treetable.footer.border.color')};
|
||||
}
|
||||
|
||||
.p-treetable-gridlines .p-treetable-thead > tr > th {
|
||||
|
@ -322,7 +303,7 @@ const theme = ({ dt }) => `
|
|||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
||||
p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
|
||||
border-width: 1px 0 1px 1px;
|
||||
}
|
||||
|
||||
|
@ -362,15 +343,6 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
|||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd {
|
||||
background: ${dt('treetable.row.striped.background')});
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
|
||||
background: ${dt('highlight.background')});
|
||||
color: ${dt('highlight.color')});
|
||||
}
|
||||
|
||||
.p-treetable.p-treetable-sm .p-treetable-header {
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
|
@ -411,23 +383,28 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
|||
padding: 0.9375rem 1.25rem;
|
||||
}
|
||||
|
||||
.p-treetable-body-cell-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${dt('treetable.body.cell.gap')};
|
||||
}
|
||||
|
||||
.p-treetable-node-toggle-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
width: ${dt('treetable.node.toggle.button.size')};
|
||||
height: ${dt('treetable.node.toggle.button.size')};
|
||||
color: ${dt('treetable.node.toggle.button.color')};
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('treetable.node.toggle.button.border.radius')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
outline-color: transparent;
|
||||
user-select: none;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.p-treetable-node-toggle-button:enabled:hover {
|
||||
|
@ -435,18 +412,15 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
|||
background: ${dt('treetable.node.toggle.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
|
||||
background: ${dt('treetable.node.toggle.button.selected.hover.background')};
|
||||
${dt('treetable.node.toggle.button.selected.hover.color')};
|
||||
}
|
||||
|
||||
.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-node-toggle-button:hover{
|
||||
background: ${dt('treetable.node.toggle.button.highlight.hover.background')};
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.p-treetable .p-treetable-node-checkbox {
|
||||
margin-right: 0.5rem;
|
||||
box-shadow: ${dt('treetable.node.toggle.button.focus.ring.shadow')};
|
||||
outline: ${dt('treetable.node.toggle.button.focus.ring.width')} ${dt('treetable.node.toggle.button.focus.ring.style')} ${dt('treetable.node.toggle.button.focus.ring.color')};
|
||||
outline-offset: ${dt('treetable.node.toggle.button.focus.ring.offset')};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -502,6 +476,12 @@ const classes = {
|
|||
'p-treetable-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
bodyCellContent: ({ instance }) => [
|
||||
'p-treetable-body-cell-content',
|
||||
{
|
||||
'p-treetable-body-cell-content-expander': instance.columnProp('expander')
|
||||
}
|
||||
],
|
||||
nodeToggleButton: 'p-treetable-node-toggle-button',
|
||||
nodeToggleIcon: 'p-treetable-node-toggle-icon',
|
||||
pcNodeCheckbox: 'p-treetable-node-checkbox',
|
||||
|
|
Loading…
Reference in New Issue