From db09d00a4357602280a5d1f515c4e5d31759088f Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 13 May 2024 13:08:24 +0300
Subject: [PATCH] Use Badge as inner component in Tables

---
 components/lib/column/Column.d.ts                  | 7 ++++---
 components/lib/datatable/HeaderCell.vue            | 4 +++-
 components/lib/datatable/style/DataTableStyle.d.ts | 2 +-
 components/lib/datatable/style/DataTableStyle.js   | 6 ++----
 components/lib/treetable/HeaderCell.vue            | 4 +++-
 components/lib/treetable/style/TreeTableStyle.d.ts | 2 +-
 components/lib/treetable/style/TreeTableStyle.js   | 6 ++----
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index 18b17eb1c..95fafbc5a 100755
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -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;
     /**
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index c8d01b84d..9f5b0019f 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -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,
diff --git a/components/lib/datatable/style/DataTableStyle.d.ts b/components/lib/datatable/style/DataTableStyle.d.ts
index bbb05518b..001c70dfd 100644
--- a/components/lib/datatable/style/DataTableStyle.d.ts
+++ b/components/lib/datatable/style/DataTableStyle.d.ts
@@ -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',
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index b29d3c2a0..6a5d0e699 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -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',
         {
diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index a53ff4f4d..8274891d2 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -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
diff --git a/components/lib/treetable/style/TreeTableStyle.d.ts b/components/lib/treetable/style/TreeTableStyle.d.ts
index e3ba7569c..a8a3bae2d 100644
--- a/components/lib/treetable/style/TreeTableStyle.d.ts
+++ b/components/lib/treetable/style/TreeTableStyle.d.ts
@@ -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',
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index 0b7b79061..bd35e7aa3 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -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 }) => [
         {