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

Refactor #5476 - For DataViewLayoutOptions

pull/5507/head
tugcekucukoglu 2024-03-26 13:45:13 +03:00
parent bb51b40051
commit 1cbaf36aa0
20 changed files with 52 additions and 363 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>;

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"
}

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'];

1
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'),

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"
/>

1
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',