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

Merge branch 'v4' of https://github.com/primefaces/primevue into v4

pull/5756/head
Cagatay Civici 2024-05-13 13:49:41 +03:00
parent f3beedf2c9 db09d00a43
commit a39d562bdb
8 changed files with 31 additions and 24 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',
{

9
components/lib/speeddial/SpeedDial.vue
View File

@ -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})`;

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

@ -13,17 +13,20 @@
: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>
<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';
@ -230,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',

7
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;
@ -462,9 +460,10 @@ 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',
pcSortBadge: 'p-treetable-sort-badge',
tbody: 'p-treetable-tbody',
row: ({ instance }) => [
{