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/5507/head
Cagatay Civici 2024-03-26 16:44:32 +03:00
parent e0865bfc73 636c89e750
commit 6ddb8501eb
37 changed files with 191 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
api-generator/components/dataviewlayoutoptions.js
View File

@ -1,35 +0,0 @@
const DataViewLayoutOptionsProps = [
{
name: 'modelValue',
type: 'string',
default: 'null',
description: 'Value of the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Used to pass attributes to DOM elements inside the component.'
}
];
const DataViewLayoutOptionsSlots = [
{
name: 'listicon',
description: 'Custom list icon template.'
},
{
name: 'gridicon',
description: 'Custom grid icon template.'
}
];
module.exports = {
dataviewlayoutoptions: {
name: 'DataViewLayoutOptions',
description: 'When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.',
'doc-url': 'dataview',
props: DataViewLayoutOptionsProps,
slots: DataViewLayoutOptionsSlots
}
};

2
components/doc/codeeditor/templates.js
View File

@ -173,7 +173,6 @@ import ConfirmationService from 'primevue/confirmationservice';
import ContextMenu from 'primevue/contextmenu';
import DataTable from 'primevue/datatable';
import DataView from 'primevue/dataview';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
import DeferredContent from 'primevue/deferredcontent';
import Dialog from 'primevue/dialog';
import DialogService from 'primevue/dialogservice'
@ -294,7 +293,6 @@ app.component('ConfirmPopup', ConfirmPopup);
app.component('ContextMenu', ContextMenu);
app.component('DataTable', DataTable);
app.component('DataView', DataView);
app.component('DataViewLayoutOptions', DataViewLayoutOptions);
app.component('DeferredContent', DeferredContent);
app.component('Dialog', Dialog);
app.component('Divider', Divider);

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -26,7 +26,6 @@ import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
import { ContextMenuPassThroughOptions } from '../contextmenu';
import { DataTablePassThroughOptions } from '../datatable';
import { DataViewPassThroughOptions } from '../dataview';
import { DataViewLayoutOptionsPassThroughOptions } from '../dataviewlayoutoptions';
import { DeferredContentPassThroughOptions } from '../deferredcontent';
import { DialogPassThroughOptions } from '../dialog';
import { DividerPassThroughOptions } from '../divider';
@ -148,7 +147,6 @@ export interface PrimeVuePTOptions {
contextmenu?: DefaultPassThrough<ContextMenuPassThroughOptions>;
datatable?: DefaultPassThrough<DataTablePassThroughOptions>;
dataview?: DefaultPassThrough<DataViewPassThroughOptions>;
dataviewlayoutoptions?: DefaultPassThrough<DataViewLayoutOptionsPassThroughOptions>;
deferredcontent?: DefaultPassThrough<DeferredContentPassThroughOptions>;
divider?: DefaultPassThrough<DividerPassThroughOptions>;
dialog?: DefaultPassThrough<DialogPassThroughOptions>;

11
components/lib/datatable/BaseDataTable.vue
View File

@ -273,6 +273,17 @@ export default {
filterInputProps: {
type: null,
default: null
},
filterButtonProps: {
type: Object,
default() {
return {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
};
}
}
},
style: DataTableStyle,

26
components/lib/datatable/ColumnFilter.vue
View File

@ -94,9 +94,7 @@
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:unstyled="unstyled"
text
severity="danger"
size="small"
v-bind="filterButtonProps.removeRule"
:pt="getColumnPT('filterRemoveButton')"
>
<template #icon="iconProps">
@ -114,9 +112,7 @@
:class="cx('filterAddRuleButton')"
@click="addConstraint()"
:unstyled="unstyled"
text
severity="info"
size="small"
v-bind="filterButtonProps.addRule"
:pt="getColumnPT('filterAddRuleButton')"
>
<template #icon="iconProps">
@ -132,13 +128,21 @@
:label="clearButtonLabel"
@click="clearFilter"
:unstyled="unstyled"
size="small"
outlined
v-bind="filterButtonProps.clear"
:pt="getColumnPT('filterClearButton')"
></CFButton>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
<CFButton
v-if="!filterApplyTemplate"
type="button"
:class="cx('filterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
v-bind="filterButtonProps.apply"
:pt="getColumnPT('filterApplyButton')"
></CFButton>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>
</div>
@ -275,6 +279,10 @@ export default {
type: null,
default: null
},
filterButtonProps: {
type: null,
default: null
},
column: null
},
data() {

33
components/lib/datatable/DataTable.d.ts vendored
View File

@ -9,6 +9,7 @@
*/
import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonProps } from '../button';
import { ColumnPassThroughOptionType } from '../column';
import { ColumnGroupPassThroughOptionType } from '../columngroup';
import { PaginatorPassThroughOptionType } from '../paginator';
@ -159,6 +160,28 @@ export interface DataTableExportCSVOptions {
selectionOnly: boolean;
}
/**
* Custom datatable filter button props options.
*/
export interface DataTableFilterButtonPropsOptions {
/**
* Add rule button props
*/
addRule: ButtonProps | undefined;
/**
* Remove rule button props
*/
removeRule: ButtonProps | undefined;
/**
* Apply button props
*/
apply: ButtonProps | undefined;
/**
* Apply button props
*/
clear: ButtonProps | undefined;
}
/**
* Custom sort event.
* @see {@link DataTableEmits.sort}
@ -1130,6 +1153,16 @@ export interface DataTableProps {
* Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
*/
filterInputProps?: InputHTMLAttributes | undefined;
/**
* Used to pass all filter button property object
* @defaultValue {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
}
*/
filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {DataTablePassThroughOptions}

12
components/lib/datatable/DataTable.vue
View File

@ -86,6 +86,7 @@
:filters="d_filters"
:filtersStore="filters"
:filterDisplay="filterDisplay"
:filterButtonProps="headerFilterButtonProps"
:filterInputProps="filterInputProps"
:first="d_first"
@column-click="onColumnHeaderClick($event)"
@ -2069,6 +2070,17 @@ export default {
groupRowSortField() {
return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
},
headerFilterButtonProps() {
return {
...{
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
},
...this.filterButtonProps
};
},
virtualScrollerDisabled() {
return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
}

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

@ -58,6 +58,7 @@
:filters="filters"
:filtersStore="filtersStore"
:filterInputProps="filterInputProps"
:filterButtonProps="filterButtonProps"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
:filterMenuStyle="columnProp('filterMenuStyle')"
@ -182,6 +183,10 @@ export default {
filterInputProps: {
type: null,
default: null
},
filterButtonProps: {
type: null,
default: null
}
},
data() {

6
components/lib/datatable/TableHeader.vue
View File

@ -29,6 +29,7 @@
:filterDisplay="filterDisplay"
:filtersStore="filtersStore"
:filterInputProps="filterInputProps"
:filterButtonProps="filterButtonProps"
:first="first"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
@ -69,6 +70,7 @@
:filters="filters"
:filtersStore="filtersStore"
:filterInputProps="filterInputProps"
:filterButtonProps="filterButtonProps"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
:filterMenuStyle="columnProp(col, 'filterMenuStyle')"
@ -231,6 +233,10 @@ export default {
filterInputProps: {
type: null,
default: null
},
filterButtonProps: {
type: null,
default: null
}
},
provide() {

2
components/lib/dataview/DataView.d.ts vendored
View File

@ -328,7 +328,7 @@ export interface DataViewEmits {
}
/**
* **PrimeVue - DataViewLayoutOptions**
* **PrimeVue - DataView**
*
* _DataView displays data in grid or list layout with pagination and sorting features._
*

18
components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
View File

@ -1,18 +0,0 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import DataViewLayoutOptionsStyle from 'primevue/dataviewlayoutoptions/style';
export default {
name: 'BaseDataViewLayoutOptions',
extends: BaseComponent,
props: {
modelValue: String
},
style: DataViewLayoutOptionsStyle,
provide() {
return {
$parentInstance: this
};
}
};
</script>

185
components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts vendored
View File

@ -1,185 +0,0 @@
/**
*
* The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well.
*
* [Live Demo](https://www.primevue.org/dataview/)
*
* @module dataviewlayoutoptions
*
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { SelectButtonPassThroughOptions } from '../selectbutton';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type DataViewLayoutOptionsPassThroughOptionType =
| DataViewLayoutOptionsPassThroughAttributes
| ((options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes | string)
| string
| null
| undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DataViewLayoutOptionsPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: DataViewLayoutOptionsProps;
/**
* Defines current inline state.
*/
state: DataViewLayoutOptionsState;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link DataViewLayoutOptionsProps.pt}
*/
export interface DataViewLayoutOptionsPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
* @see {@link SelectButtonPassThroughOptions}
*/
root?: SelectButtonPassThroughOptions<DataViewLayoutOptionsSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the root's DOM element.
* @see {@link SelectButtonPassThroughOptions}
*/
selectbutton?: SelectButtonPassThroughOptions<DataViewLayoutOptionsSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the list icon's DOM element.
*/
listIcon?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Used to pass attributes to the grid icon's DOM element.
*/
gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface DataViewLayoutOptionsPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in DataViewLayoutOptions component.
*/
export interface DataViewLayoutOptionsState {
/**
* Default options of the component.
* @defaultValue ['list', 'grid']
*/
options: string[];
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface DataViewLayoutOptionsSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: DataViewLayoutOptionsProps;
/**
* Defines current inline state.
*/
state: DataViewLayoutOptionsState;
}
/**
* Defines valid properties in DataViewLayoutOptions component.
*/
export interface DataViewLayoutOptionsProps {
/**
* Value of the component.
*/
modelValue?: string | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {DataViewLayoutOptionsPassThroughOptions}
*/
pt?: PassThrough<DataViewLayoutOptionsPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slots in DataViewLayoutOptions component.
*/
export interface DataViewLayoutOptionsSlots {
/**
* Custom list icon template.
*/
listicon(): VNode[];
/**
* Custom grid icon template.
*/
gridicon(): VNode[];
}
/**
* Defines valid emits in DataViewLayoutOptions component.
*/
export interface DataViewLayoutOptionsEmits {
/**
* Emitted when the value changes.
* @param {*} value - New value.
*/
'update:modelValue'(value: string): void;
}
/**
* **PrimeVue - DataViewLayoutOptions**
*
* _The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well._
*
* [Live Demo](https://www.primevue.org/dataview/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*
*/
declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> {}
declare module 'vue' {
export interface GlobalComponents {
DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>;
}
}
export default DataViewLayoutOptions;

18
components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
View File

@ -1,18 +0,0 @@
import { mount } from '@vue/test-utils';
import DataViewLayoutOptions from './DataViewLayoutOptions.vue';
describe('DataViewLayoutOptions.vue', () => {
it('should exist', async () => {
const wrapper = mount(DataViewLayoutOptions, {
props: {
modelValue: 'grid'
}
});
expect(wrapper.find('.p-dataview-layout-options').exists()).toBe(true);
wrapper.vm.$emit('update:modelValue', 'list');
expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['list']);
});
});

49
components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
View File

@ -1,49 +0,0 @@
<template>
<SelectButton :class="cx('root')" :modelValue="modelValue" :options="options" :allowEmpty="false" :unstyled="unstyled" :pt="{ ...ptm('selectbutton'), ...ptm('root') }" @update:modelValue="changeLayout">
<template #option="{ option }">
<slot v-if="option === 'list'" name="listicon">
<BarsIcon v-bind="ptm('listIcon')" />
</slot>
<slot v-else-if="option === 'grid'" name="gridicon">
<ThLargeIcon v-bind="ptm('gridIcon')" />
</slot>
</template>
</SelectButton>
</template>
<script>
import BarsIcon from 'primevue/icons/bars';
import ThLargeIcon from 'primevue/icons/thlarge';
import SelectButton from 'primevue/selectbutton';
import BaseDataViewLayoutOptions from './BaseDataViewLayoutOptions.vue';
export default {
name: 'DataViewLayoutOptions',
extends: BaseDataViewLayoutOptions,
inheritAttrs: false,
emits: ['update:modelValue'],
data() {
return {
options: ['list', 'grid']
};
},
methods: {
changeLayout(layout) {
this.$emit('update:modelValue', layout);
}
},
computed: {
listViewAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listView : undefined;
},
gridViewAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.gridView : undefined;
}
},
components: {
SelectButton,
BarsIcon,
ThLargeIcon
}
};
</script>

9
components/lib/dataviewlayoutoptions/package.json
View File

@ -1,9 +0,0 @@
{
"main": "./dataviewlayoutoptions.cjs.js",
"module": "./dataviewlayoutoptions.esm.js",
"unpkg": "./dataviewlayoutoptions.min.js",
"types": "./DataViewLayoutOptions.d.ts",
"browser": {
"./sfc": "./DataViewLayoutOptions.vue"
}
}

3
components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.d.ts vendored
View File

@ -1,3 +0,0 @@
import { BaseStyle } from '../../base/style';
export interface DataViewLayoutOptionsStyle extends BaseStyle {}

10
components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js
View File

@ -1,10 +0,0 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-dataview-layout-options'
};
export default BaseStyle.extend({
name: 'dataviewlayoutoptions',
classes
});

6
components/lib/dataviewlayoutoptions/style/package.json
View File

@ -1,6 +0,0 @@
{
"main": "./dataviewlayoutoptionsstyle.cjs.js",
"module": "./dataviewlayoutoptionsstyle.esm.js",
"unpkg": "./dataviewlayoutoptionsstyle.min.js",
"types": "./DataViewLayoutOptionsStyle.d.ts"
}

4
components/lib/listbox/Listbox.vue
View File

@ -11,7 +11,9 @@
:data-p-hidden-accessible="true"
:data-p-hidden-focusable="true"
></span>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div :class="cx('header')">
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
</div>
<div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
<div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<InputText

4
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -133,10 +133,6 @@ export interface OrderListPassThroughOptions {
* Used to pass attributes to the container's DOM element.
*/
container?: OrderListPassThroughOptionType;
/**
* Used to pass attributes to the header's DOM element.
*/
header?: OrderListPassThroughOptionType;
/**
* Used to pass attributes to the Listbox component.
* @see {@link ListboxPassThroughOptions}

4
components/lib/orderlist/OrderList.vue
View File

@ -55,9 +55,7 @@
@change="onChangeSelection"
>
<template v-if="$slots.header" #header>
<div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
<slot name="header"></slot>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />

1
components/lib/orderlist/style/OrderListStyle.js
View File

@ -4,7 +4,6 @@ const classes = {
root: 'p-orderlist p-component',
controls: 'p-orderlist-controls',
container: 'p-orderlist-list-container',
header: 'p-orderlist-header',
list: 'p-orderlist-list',
item: 'p-orderlist-item'
};

8
components/lib/picklist/PickList.d.ts vendored
View File

@ -172,10 +172,6 @@ export interface PickListPassThroughOptions {
* Used to pass attributes to the source wrapper's DOM element.
*/
sourceWrapper?: PickListPassThroughOptionType;
/**
* Used to pass attributes to the source header's DOM element.
*/
sourceHeader?: PickListPassThroughOptionType;
/**
* Used to pass attributes to the source list's DOM element.
*/
@ -204,10 +200,6 @@ export interface PickListPassThroughOptions {
* Used to pass attributes to the target wrapper's DOM element.
*/
targetWrapper?: PickListPassThroughOptionType;
/**
* Used to pass attributes to the target header's DOM element.
*/
targetHeader?: PickListPassThroughOptionType;
/**
* Used to pass attributes to the target list's DOM element.
*/

8
components/lib/picklist/PickList.vue
View File

@ -56,9 +56,7 @@
data-pc-group-section="list"
>
<template v-if="$slots.sourceheader" #header>
<div :class="cx('sourceHeader')" v-bind="ptm('sourceHeader')" data-pc-group-section="header">
<slot name="sourceheader"></slot>
</div>
<slot name="sourceheader"></slot>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />
@ -121,9 +119,7 @@
data-pc-group-section="list"
>
<template v-if="$slots.targetheader" #header>
<div :class="cx('targetheader')" v-bind="ptm('targetheader')" data-pc-group-section="header">
<slot name="targetheader"></slot>
</div>
<slot name="targetheader"></slot>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />

2
components/lib/picklist/style/PickListStyle.js
View File

@ -4,11 +4,9 @@ const classes = {
root: 'p-picklist p-component',
sourceControls: 'p-picklist-buttons p-picklist-source-controls',
sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
sourceHeader: 'p-picklist-header',
sourceList: 'p-picklist-list p-picklist-source-list',
buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
targetHeader: 'p-picklist-header',
targetList: 'p-picklist-list p-picklist-target',
item: 'p-picklist-item',
targetControls: 'p-picklist-buttons p-picklist-target-controls'

15
components/lib/selectbutton/SelectButton.d.ts vendored
View File

@ -10,14 +10,15 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
// import { ToggleButtonPassThroughOptions } from '../togglebutton';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type SelectButtonPassThroughOptionType<T = any> = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions<T>) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface SelectButtonPassThroughMethodOptions<T = any> {
export interface SelectButtonPassThroughMethodOptions {
/**
* Defines instance.
*/
@ -41,7 +42,7 @@ export interface SelectButtonPassThroughMethodOptions<T = any> {
/**
* Defines parent options.
*/
parent: T;
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
@ -52,19 +53,19 @@ export interface SelectButtonPassThroughMethodOptions<T = any> {
* Custom passthrough(pt) options.
* @see {@link SelectButtonProps.pt}
*/
export interface SelectButtonPassThroughOptions<T = any> {
export interface SelectButtonPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: SelectButtonPassThroughOptionType<T>;
root?: SelectButtonPassThroughOptionType;
/**
* Used to pass attributes to the button's DOM element.
*/
button?: SelectButtonPassThroughOptionType<T>;
button?: SelectButtonPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
*/
label?: SelectButtonPassThroughOptionType<T>;
label?: SelectButtonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

38
components/lib/selectbutton/SelectButton.vue
View File

@ -1,26 +1,29 @@
<template>
<div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
<button
v-for="(option, i) of options"
:key="getOptionRenderKey(option)"
v-ripple
:aria-pressed="isSelected(option)"
:aria-disabled="isOptionDisabled(option)"
:class="cx('button', { option })"
@click="onOptionSelect($event, option, i)"
v-bind="getPTOptions(option, 'button')"
:data-p-highlight="isSelected(option)"
:data-p-disabled="isOptionDisabled(option)"
>
<slot name="option" :option="option" :index="i" :class="cx('label')">
<span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
</slot>
</button>
<template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
<ToggleButton
:modelValue="isSelected(option)"
:onLabel="getOptionLabel(option)"
:offLabel="getOptionLabel(option)"
:disabled="disabled"
:invalid="invalid"
:unstyled="unstyled"
@change="onOptionSelect($event, option, index)"
:pt="ptm('button')"
>
<template v-if="$slots.option" #default>
<slot name="option" :option="option" :index="index">
<span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span>
</slot>
</template>
</ToggleButton>
</template>
</div>
</template>
<script>
import Ripple from 'primevue/ripple';
import ToggleButton from 'primevue/togglebutton';
import { ObjectUtils } from 'primevue/utils';
import BaseSelectButton from './BaseSelectButton.vue';
@ -103,6 +106,9 @@ export default {
},
directives: {
ripple: Ripple
},
components: {
ToggleButton
}
};
</script>

18
components/lib/togglebutton/ToggleButton.d.ts vendored
View File

@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
export declare type ToggleButtonPassThroughOptionType<T = any> = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions<T = any>) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ToggleButtonPassThroughMethodOptions {
export interface ToggleButtonPassThroughMethodOptions<T = any> {
/**
* Defines instance.
*/
@ -37,7 +37,7 @@ export interface ToggleButtonPassThroughMethodOptions {
/**
* Defines parent options.
*/
parent: any;
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -48,19 +48,19 @@ export interface ToggleButtonPassThroughMethodOptions {
* Custom passthrough(pt) options.
* @see {@link ToggleButtonProps.pt}
*/
export interface ToggleButtonPassThroughOptions {
export interface ToggleButtonPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: ToggleButtonPassThroughOptionType;
root?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: ToggleButtonPassThroughOptionType;
icon?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the label's DOM element.
*/
label?: ToggleButtonPassThroughOptionType;
label?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -173,6 +173,10 @@ export interface ToggleButtonProps {
* Defines valid slots in ToggleButton component.
*/
export interface ToggleButtonSlots {
/**
* Custom content such as icons, images and text can be placed inside the button via the default slot.
*/
default(): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.

8
components/lib/togglebutton/ToggleButton.vue
View File

@ -1,9 +1,11 @@
<template>
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<slot name="icon" :value="modelValue" :class="cx('icon')">
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
<slot>
<slot name="icon" :value="modelValue" :class="cx('icon')">
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
</slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
</slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
</button>
</template>

1
doc/dataview/ImportDoc.vue
View File

@ -10,7 +10,6 @@ export default {
code: {
basic: `
import DataView from 'primevue/dataview';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions' // optional
`
}
};

34
doc/dataview/LayoutDoc.vue
View File

@ -1,15 +1,16 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper <i>DataViewLayoutOptions</i> component can be used to switch between the modes however this component is optional and you may
use your own UI to switch modes as well.
</p>
<p>DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property.</p>
</DocSectionText>
<div class="card">
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -95,12 +96,17 @@ export default {
return {
products: null,
layout: 'grid',
options: ['list', 'grid'],
code: {
basic: `
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -181,7 +187,11 @@ export default {
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -265,7 +275,8 @@ export default {
data() {
return {
products: null,
layout: 'grid'
layout: 'grid',
options: ['list', 'grid'],
}
},
mounted() {
@ -297,7 +308,11 @@ export default {
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -384,6 +399,7 @@ onMounted(() => {
const products = ref();
const layout = ref('grid');
const options = ref(['list', 'grid']);
const getSeverity = (product) => {
switch (product.inventoryStatus) {

29
doc/dataview/LoadingDoc.vue
View File

@ -6,7 +6,11 @@
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -68,12 +72,17 @@ export default {
return {
products: null,
layout: 'grid',
options: ['list', 'grid'],
code: {
basic: `
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -130,7 +139,11 @@ export default {
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -190,7 +203,8 @@ export default {
data() {
return {
products: null,
layout: 'grid'
layout: 'grid',
options: ['list', 'grid'],
}
},
mounted() {
@ -222,7 +236,11 @@ export default {
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-content-end">
<DataViewLayoutOptions v-model="layout" />
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-th-large']" />
</template>
</SelectButton>
</div>
</template>
@ -285,6 +303,7 @@ onMounted(() => {
const products = ref();
const layout = ref('grid');
const options = ref(['list', 'grid']);
const getSeverity = (product) => {
switch (product.inventoryStatus) {

6
doc/dataview/pt/index.vue
View File

@ -27,12 +27,6 @@ export default {
label: 'DataView PT Options',
component: DocApiTable,
data: getPTOption('DataView')
},
{
id: 'pt.doc.dataviewlayoutoptions',
label: 'DataViewLayoutOptions PT Options',
component: DocApiTable,
data: getPTOption('DataViewLayoutOptions')
}
]
};

2
modules/nuxt-primevue/runtime/core/components/index.js
View File

@ -33,7 +33,7 @@ const form = [
const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton'];
const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'DataViewLayoutOptions', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];
const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];
const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'TabPanel', 'Toolbar'];

3
nuxt-vite.config.js
View File

@ -34,7 +34,6 @@ const STYLE_ALIAS = {
'primevue/contextmenu/style': path.resolve(__dirname, './components/lib/contextmenu/style/ContextMenuStyle.js'),
'primevue/datatable/style': path.resolve(__dirname, './components/lib/datatable/style/DataTableStyle.js'),
'primevue/dataview/style': path.resolve(__dirname, './components/lib/dataview/style/DataViewStyle.js'),
'primevue/dataviewlayoutoptions/style': path.resolve(__dirname, './components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js'),
'primevue/deferredcontent/style': path.resolve(__dirname, './components/lib/deferredcontent/style/DeferredContentStyle.js'),
'primevue/dialog/style': path.resolve(__dirname, './components/lib/dialog/style/DialogStyle.js'),
'primevue/divider/style': path.resolve(__dirname, './components/lib/divider/style/DividerStyle.js'),
@ -296,7 +295,7 @@ export default {
'primevue/message': path.resolve(__dirname, './components/lib/message/Message.vue'),
'primevue/tree': path.resolve(__dirname, './components/lib/tree/Tree.vue'),
'primevue/badge': path.resolve(__dirname, './components/lib/badge/Badge.vue'),
'primevue/selectbutton': path.resolve(__dirname, './components/lib/selectbutton/SelectButton.vue'),
'primevue/togglebutton': path.resolve(__dirname, './components/lib/togglebutton/ToggleButton.vue'),
'primevue/listbox': path.resolve(__dirname, './components/lib/listbox/Listbox.vue'),
'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'),
'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'),

2
pages/dataview/index.vue
View File

@ -4,7 +4,7 @@
header="DataView"
description="DataView displays data in grid or list layout with pagination and sorting features."
:componentDocs="docs"
:apiDocs="['DataView', 'DataViewLayoutOptions']"
:apiDocs="['DataView']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>

3
rollup.config.js
View File

@ -99,7 +99,6 @@ const CORE_STYLE_DEPENDENCIES = {
'primevue/contextmenu/style': 'primevue.contextmenu.style',
'primevue/datatable/style': 'primevue.datatable.style',
'primevue/dataview/style': 'primevue.dataview.style',
'primevue/dataviewlayoutoptions/style': 'primevue.dataviewlayoutoptions.style',
'primevue/deferredcontent/style': 'primevue.deferredcontent.style',
'primevue/dialog/style': 'primevue.dialog.style',
'primevue/divider/style': 'primevue.divider.style',
@ -213,6 +212,8 @@ const CORE_DEPENDENCIES = {
'primevue/menu': 'primevue.menu',
'primevue/tieredmenu': 'primevue.tieredmenu',
'primevue/badge': 'primevue.badge',
'primevue/listbox': 'primevue.listbox',
'primevue/togglebutton': 'primevue.togglebutton',
...CORE_PASSTHROUGH_DEPENDENCIES
};