vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Use Badge as inner component in Tables

pull/5756/head
tugcekucukoglu 2024-05-13 13:08:24 +03:00
parent 5e9fe6c22e
commit db09d00a43
7 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/lib/column/Column.d.ts vendored
View File

@ -9,6 +9,7 @@
*
*/
import { VNode } from 'vue';
import { BadgePassThroughOptions } from '../badge';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { CheckboxPassThroughOptionType } from '../checkbox';
@ -154,11 +155,11 @@ export interface ColumnPassThroughOptions {
*/
sortIcon?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the sort badge's DOM element.
* Used to pass attributes to the Badge component.
*/
sortBadge?: ColumnPassThroughOptionType;
pcSortBadge?: BadgePassThroughOptions;
/**
* Used to pass attributes to the header checkbox's DOM element.
* Used to pass attributes to the Checkbox component.
*/
pcHeaderCheckbox?: CheckboxPassThroughOptionType;
/**

4
components/lib/datatable/HeaderCell.vue
View File

@ -29,7 +29,7 @@
<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')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" />
<DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected"
@ -84,6 +84,7 @@
</template>
<script>
import Badge from 'primevue/badge';
import BaseComponent from 'primevue/basecomponent';
import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown';
@ -365,6 +366,7 @@ export default {
}
},
components: {
Badge,
DTHeaderCheckbox: HeaderCheckbox,
DTColumnFilter: ColumnFilter,
SortAltIcon: SortAltIcon,

2
components/lib/datatable/style/DataTableStyle.d.ts vendored
View File

@ -22,7 +22,7 @@ export enum DataTableClasses {
columnHeaderContent = 'p-datatable-column-header-content',
columnTitle = 'p-datatable-column-title',
sortIcon = 'p-datatable-sort-icon',
sortBadge = 'p-datatable-sort-badge',
pcSortBadge = 'p-datatable-sort-badge',
filter = 'p-datatable-filter',
filterElementContainer = 'p-datatable-filter-element-container',
pcColumnFilterButton = 'p-datatable-column-filter-button',

6
components/lib/datatable/style/DataTableStyle.js
View File

@ -27,11 +27,9 @@ const theme = ({ dt }) => `
transition: color ${dt('transition.duration')};
}
.p-datatable-sort-badge {
.p-datatable-sort-badge.p-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 1rem;
min-width: 1rem;
line-height: 1rem;
@ -625,7 +623,7 @@ const classes = {
columnHeaderContent: 'p-datatable-column-header-content',
columnTitle: 'p-datatable-column-title',
sortIcon: 'p-datatable-sort-icon',
sortBadge: 'p-datatable-sort-badge',
pcSortBadge: 'p-datatable-sort-badge',
filter: ({ props }) => [
'p-datatable-filter',
{

4
components/lib/treetable/HeaderCell.vue
View File

@ -20,12 +20,13 @@
<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')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" />
</div>
</th>
</template>
<script>
import Badge from 'primevue/badge';
import BaseComponent from 'primevue/basecomponent';
import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown';
@ -232,6 +233,7 @@ export default {
}
},
components: {
Badge,
SortAltIcon: SortAltIcon,
SortAmountUpAltIcon: SortAmountUpAltIcon,
SortAmountDownIcon: SortAmountDownIcon

2
components/lib/treetable/style/TreeTableStyle.d.ts vendored
View File

@ -22,7 +22,7 @@ export enum TreeTableClasses {
columnResizer = 'p-treetable-column-resizer',
columnTitle = 'p-treetable-column-title',
sortIcon = 'p-treetable-sort-icon',
sortBadge = 'p-treetable-sort-badge',
pcSortBadge = 'p-treetable-sort-badge',
tbody = 'p-treetable-tbody',
nodeToggleButton = 'p-treetable-node-toggle-button',
nodeToggleIcon = 'p-treetable-node-toggle-icon',

6
components/lib/treetable/style/TreeTableStyle.js
View File

@ -27,11 +27,9 @@ const theme = ({ dt }) => `
transition: color ${dt('transition.duration')};
}
.p-treetable-sort-badge {
.p-treetable-sort-badge.p-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 1rem;
min-width: 1rem;
line-height: 1rem;
@ -465,7 +463,7 @@ const classes = {
columnHeaderContent: 'p-treetable-column-header-content',
columnTitle: 'p-treetable-column-title',
sortIcon: 'p-treetable-sort-icon',
sortBadge: 'p-treetable-sort-badge',
pcSortBadge: 'p-treetable-sort-badge',
tbody: 'p-treetable-tbody',
row: ({ instance }) => [
{