From bc29c589f42a6654f2f3914e6443d3f72cb047c7 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 13 May 2024 12:39:13 +0300
Subject: [PATCH 1/3] SpeedDial hydration fixes

---
 components/lib/speeddial/SpeedDial.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index 2ac7381c7..f194ba0c0 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -72,6 +72,9 @@ import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 import BaseSpeedDial from './BaseSpeedDial.vue';
 
+// Set fix value for SSR.
+const Math_PI = 3.14159265358979;
+
 export default {
     name: 'SpeedDial',
     extends: BaseSpeedDial,
@@ -362,7 +365,7 @@ export default {
                 const radius = this.radius || length * 20;
 
                 if (type === 'circle') {
-                    const step = (2 * Math.PI) / length;
+                    const step = (2 * Math_PI) / length;
 
                     return {
                         left: `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px').variable})`,
@@ -370,7 +373,7 @@ export default {
                     };
                 } else if (type === 'semi-circle') {
                     const direction = this.direction;
-                    const step = Math.PI / (length - 1);
+                    const step = Math_PI / (length - 1);
                     const x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px').variable})`;
                     const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px').variable})`;
 
@@ -385,7 +388,7 @@ export default {
                     }
                 } else if (type === 'quarter-circle') {
                     const direction = this.direction;
-                    const step = Math.PI / (2 * (length - 1));
+                    const step = Math_PI / (2 * (length - 1));
                     const x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px').variable})`;
                     const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px').variable})`;
 

From 5e9fe6c22e83efc596071ebaf9b8e5945715926d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 13 May 2024 12:46:55 +0300
Subject: [PATCH 2/3] TreeTable column header cell content added

---
 components/lib/treetable/HeaderCell.vue          | 16 +++++++++-------
 components/lib/treetable/style/TreeTableStyle.js |  1 +
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index 8918be6a5..a53ff4f4d 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -13,13 +13,15 @@
         :data-p-highlight="isColumnSorted()"
         :data-p-frozen-column="columnProp('frozen')"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
-        <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-        <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ 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')" />
-        </span>
-        <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
+        <div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
+            <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
+            <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
+            <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ 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')" />
+            </span>
+            <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
+        </div>
     </th>
 </template>
 
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index 1288fdc43..0b7b79061 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -462,6 +462,7 @@ const classes = {
         }
     ],
     columnResizer: 'p-treetable-column-resizer',
+    columnHeaderContent: 'p-treetable-column-header-content',
     columnTitle: 'p-treetable-column-title',
     sortIcon: 'p-treetable-sort-icon',
     sortBadge: 'p-treetable-sort-badge',

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 3/3] 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 }) => [
         {