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 { VNode } from 'vue';
import { BadgePassThroughOptions } from '../badge';
import { ComponentHooks } from '../basecomponent'; import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button'; import { ButtonPassThroughOptions } from '../button';
import { CheckboxPassThroughOptionType } from '../checkbox'; import { CheckboxPassThroughOptionType } from '../checkbox';
@ -154,11 +155,11 @@ export interface ColumnPassThroughOptions {
*/ */
sortIcon?: ColumnPassThroughOptionType; 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; pcHeaderCheckbox?: CheckboxPassThroughOptionType;
/** /**

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

@ -29,7 +29,7 @@
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')"> <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')" /> <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
</span> </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 <DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected" :checked="allRowsSelected"
@ -84,6 +84,7 @@
</template> </template>
<script> <script>
import Badge from 'primevue/badge';
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import SortAltIcon from 'primevue/icons/sortalt'; import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown'; import SortAmountDownIcon from 'primevue/icons/sortamountdown';
@ -365,6 +366,7 @@ export default {
} }
}, },
components: { components: {
Badge,
DTHeaderCheckbox: HeaderCheckbox, DTHeaderCheckbox: HeaderCheckbox,
DTColumnFilter: ColumnFilter, DTColumnFilter: ColumnFilter,
SortAltIcon: SortAltIcon, 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', columnHeaderContent = 'p-datatable-column-header-content',
columnTitle = 'p-datatable-column-title', columnTitle = 'p-datatable-column-title',
sortIcon = 'p-datatable-sort-icon', sortIcon = 'p-datatable-sort-icon',
sortBadge = 'p-datatable-sort-badge', pcSortBadge = 'p-datatable-sort-badge',
filter = 'p-datatable-filter', filter = 'p-datatable-filter',
filterElementContainer = 'p-datatable-filter-element-container', filterElementContainer = 'p-datatable-filter-element-container',
pcColumnFilterButton = 'p-datatable-column-filter-button', 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')}; transition: color ${dt('transition.duration')};
} }
.p-datatable-sort-badge { .p-datatable-sort-badge.p-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
border-radius: 50%;
height: 1rem; height: 1rem;
min-width: 1rem; min-width: 1rem;
line-height: 1rem; line-height: 1rem;
@ -625,7 +623,7 @@ const classes = {
columnHeaderContent: 'p-datatable-column-header-content', columnHeaderContent: 'p-datatable-column-header-content',
columnTitle: 'p-datatable-column-title', columnTitle: 'p-datatable-column-title',
sortIcon: 'p-datatable-sort-icon', sortIcon: 'p-datatable-sort-icon',
sortBadge: 'p-datatable-sort-badge', pcSortBadge: 'p-datatable-sort-badge',
filter: ({ props }) => [ filter: ({ props }) => [
'p-datatable-filter', '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 { DomHandler, UniqueComponentId } from 'primevue/utils';
import BaseSpeedDial from './BaseSpeedDial.vue'; import BaseSpeedDial from './BaseSpeedDial.vue';
// Set fix value for SSR.
const Math_PI = 3.14159265358979;
export default { export default {
name: 'SpeedDial', name: 'SpeedDial',
extends: BaseSpeedDial, extends: BaseSpeedDial,
@ -362,7 +365,7 @@ export default {
const radius = this.radius || length * 20; const radius = this.radius || length * 20;
if (type === 'circle') { if (type === 'circle') {
const step = (2 * Math.PI) / length; const step = (2 * Math_PI) / length;
return { return {
left: `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px').variable})`, 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') { } else if (type === 'semi-circle') {
const direction = this.direction; 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 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})`; 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') { } else if (type === 'quarter-circle') {
const direction = this.direction; 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 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})`; 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-highlight="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')" :data-p-frozen-column="columnProp('frozen')"
> >
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span> <div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" /> <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span> <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')"> <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" /> <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
</span> <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span> </span>
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" />
</div>
</th> </th>
</template> </template>
<script> <script>
import Badge from 'primevue/badge';
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import SortAltIcon from 'primevue/icons/sortalt'; import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown'; import SortAmountDownIcon from 'primevue/icons/sortamountdown';
@ -230,6 +233,7 @@ export default {
} }
}, },
components: { components: {
Badge,
SortAltIcon: SortAltIcon, SortAltIcon: SortAltIcon,
SortAmountUpAltIcon: SortAmountUpAltIcon, SortAmountUpAltIcon: SortAmountUpAltIcon,
SortAmountDownIcon: SortAmountDownIcon 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', columnResizer = 'p-treetable-column-resizer',
columnTitle = 'p-treetable-column-title', columnTitle = 'p-treetable-column-title',
sortIcon = 'p-treetable-sort-icon', sortIcon = 'p-treetable-sort-icon',
sortBadge = 'p-treetable-sort-badge', pcSortBadge = 'p-treetable-sort-badge',
tbody = 'p-treetable-tbody', tbody = 'p-treetable-tbody',
nodeToggleButton = 'p-treetable-node-toggle-button', nodeToggleButton = 'p-treetable-node-toggle-button',
nodeToggleIcon = 'p-treetable-node-toggle-icon', 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')}; transition: color ${dt('transition.duration')};
} }
.p-treetable-sort-badge { .p-treetable-sort-badge.p-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
border-radius: 50%;
height: 1rem; height: 1rem;
min-width: 1rem; min-width: 1rem;
line-height: 1rem; line-height: 1rem;
@ -462,9 +460,10 @@ const classes = {
} }
], ],
columnResizer: 'p-treetable-column-resizer', columnResizer: 'p-treetable-column-resizer',
columnHeaderContent: 'p-treetable-column-header-content',
columnTitle: 'p-treetable-column-title', columnTitle: 'p-treetable-column-title',
sortIcon: 'p-treetable-sort-icon', sortIcon: 'p-treetable-sort-icon',
sortBadge: 'p-treetable-sort-badge', pcSortBadge: 'p-treetable-sort-badge',
tbody: 'p-treetable-tbody', tbody: 'p-treetable-tbody',
row: ({ instance }) => [ row: ({ instance }) => [
{ {