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

Deferred context added

pull/5315/head
tugcekucukoglu 2024-02-21 10:31:43 +03:00
parent 9a416252a7
commit 2f353f2c19
44 changed files with 801 additions and 635 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9726,7 +9726,7 @@ const services = {
{
key: '7-1',
data: {
name: 'primeng.png',
name: 'primevue.png',
size: '30kb',
type: 'Picture'
}

6
doc/galleria/AdvancedDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Advanced Galleria implementation with a custom UI.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria
ref="galleria"
@ -48,6 +49,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template>
@ -424,11 +426,11 @@ const slideButtonIcon = computed(() => {
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
methods: {
toggleAutoSlide() {
this.isAutoPlay = !this.isAutoPlay;
},

6
doc/galleria/AutoPlayDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
@ -12,6 +13,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -133,8 +135,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/BasicDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
@ -12,6 +13,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -130,8 +132,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/CaptionDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
@ -16,6 +17,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -146,8 +148,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/ControlledDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="mb-3">
<Button icon="pi pi-minus" @click="prev" />
@ -17,6 +18,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -168,10 +170,10 @@ const prev = () => {
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
},
methods: {
next() {
this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
},

6
doc/galleria/ResponsiveDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<template #item="slotProps">
@ -14,6 +15,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -138,8 +140,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/ThumbnailDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Thumbnails represent a smaller version of the actual content.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@ -20,6 +21,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -213,8 +215,10 @@ onMounted(() => {
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/fullscreen/CustomContentDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card flex justify-content-center">
<Galleria
v-model:activeIndex="activeIndex"
@ -29,6 +30,7 @@
</div>
</div>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -191,10 +193,10 @@ const imageClick = (index) => {
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
},
methods: {
imageClick(index) {
this.activeIndex = index;
this.displayCustom = true;

6
doc/galleria/fullscreen/WithThumbnailsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card flex justify-content-center">
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps">
@ -14,6 +15,7 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -165,8 +167,10 @@ onMounted(() => {
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Thumbnails can also be hidden in full screen mode.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card flex justify-content-center">
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
@ -14,6 +15,7 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -165,8 +167,10 @@ onMounted(() => {
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/indicator/ClickEventDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
@ -9,6 +10,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -91,8 +93,10 @@ const images = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/indicator/HoverEventDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
@ -9,6 +10,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -91,8 +93,10 @@ const images = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/indicator/PositionDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@ -19,6 +20,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -181,8 +183,10 @@ const positionOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/indicator/TemplateDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
@ -12,6 +13,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -103,8 +105,10 @@ const images = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/navigator/HoverDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
@ -12,6 +13,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -130,8 +132,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

18
doc/galleria/navigator/IndicatorsDoc.vue
View File

@ -2,8 +2,19 @@
<DocSectionText v-bind="$attrs">
<p>Navigators and Indicators can be combined as well.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<Galleria
:value="images"
:responsiveOptions="responsiveOptions"
:numVisible="5"
:circular="true"
containerStyle="max-width: 640px"
:showItemNavigators="true"
:showThumbnails="false"
:showItemNavigatorsOnHover="true"
:showIndicators="true"
>
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
@ -12,6 +23,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -145,8 +157,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/navigator/ItemThumbnailsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
<template #item="slotProps">
@ -12,6 +13,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -133,8 +135,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Simple example with indicators only.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
@ -12,6 +13,7 @@
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -145,8 +147,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

6
doc/treetable/BasicDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>TreeTable requires a collection of <i>TreeNode</i> instances as a <i>value</i> and <i>Column</i> components as children for the representation. The column with the element to toggle a node should have <i>expander</i> enabled.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes">
<Column field="name" header="Name" expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/ColumnToggleDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes">
<template #header>
@ -13,6 +14,7 @@
<Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -155,10 +157,10 @@ const onToggle = (val) => {
this.selectedColumns = this.columns;
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter((col) => value.includes(col));
}

6
doc/treetable/ControlledDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Expansion state is controlled with <i>expandedKeys</i> property. The <i>expandedKeys</i> should be an object whose keys refer to the node key and values represent the expanded state e.g. <i>&#123;'0-0': true&#125;</i>.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Button @click="toggleApplications" label="Toggle Applications" />
<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4">
@ -10,6 +11,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -131,10 +133,10 @@ const toggleApplications = () => {
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
methods: {
toggleApplications() {
let _expandedKeys = { ...this.expandedKeys };

6
doc/treetable/DynamicColumnsDoc.vue
View File

@ -2,11 +2,13 @@
<DocSectionText v-bind="$attrs">
<p>Columns can be created programmatically.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes">
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -119,8 +121,10 @@ const columns = ref([
{ field: 'type', header: 'Type' }
];
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/FilterDoc.vue
View File

@ -6,6 +6,7 @@
support filtering.
</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex justify-content-center mb-4">
<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
@ -38,6 +39,7 @@
</Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -226,8 +228,10 @@ const filterOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

7
doc/treetable/LazyLoadDoc.vue
View File

@ -10,6 +10,7 @@
</p>
<p>In addition, only the root elements should be loaded, children can be loaded on demand using <i>nodeExpand</i> callback.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
<Column field="name" header="Name" expander></Column>
@ -17,6 +18,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" />
</template>
@ -237,7 +239,8 @@ const loadNodes = (first, rows) => {
}
};
},
mounted() {
methods: {
loadDemoData() {
this.loading = true;
setTimeout(() => {
@ -246,7 +249,7 @@ const loadNodes = (first, rows) => {
this.totalRecords = 1000;
}, 1000);
},
methods: {
onExpand(node) {
if (!node.children) {
this.loading = true;

6
doc/treetable/ResponsiveDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A horizontal scrollbar is displayed when parent of the table gets smaller than the defined <i>minWidth</i>.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
<Column field="name" header="Name" expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/SizeDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>In addition to a regular table, alternatives with alternative sizes are available.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex justify-content-center mb-4">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
@ -12,6 +13,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -127,8 +129,10 @@ const sizeOptions = ref([
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/TemplateDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes">
<template #header>
@ -25,6 +26,7 @@
</template>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -170,8 +172,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

7
doc/treetable/paginator/PaginatorBasicDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
<Column field="name" header="Name" expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" />
</template>
@ -121,7 +123,9 @@ nodes.value = files;
}
};
},
mounted() {
mounted() {},
methods: {
loadDemoData() {
let files = [];
for (let i = 0; i < 50; i++) {
@ -149,5 +153,6 @@ nodes.value = files;
this.nodes = files;
}
}
};
</script>

6
doc/treetable/paginator/PaginatorTemplateDoc.vue
View File

@ -5,6 +5,7 @@
<PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable
:value="nodes"
@ -25,6 +26,7 @@
</template>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" />
</template>
@ -161,7 +163,8 @@ nodes.value = files;
}
};
},
mounted() {
methods: {
loadDemoData() {
let files = [];
for (let i = 0; i < 50; i++) {
@ -189,5 +192,6 @@ nodes.value = files;
this.nodes = files;
}
}
};
</script>

6
doc/treetable/resize/ExpandModeDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
<Column field="name" header="Name" expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/resize/FitModeDoc.vue
View File

@ -5,6 +5,7 @@
that does not change the overall table width.
</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
<Column field="name" header="Name" expander></Column>
@ -12,6 +13,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -109,8 +111,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/scroll/FlexibleScrollDoc.vue
View File

@ -5,6 +5,7 @@
adjusts itself according to the size changes.
</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
@ -19,6 +20,7 @@
</template>
</Dialog>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -110,8 +112,10 @@ const dialogVisible = ref(false);
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/scroll/FrozenColumnsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
@ -12,6 +13,7 @@
<Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -118,8 +120,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/scroll/HorizontalScrollDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column>
@ -12,6 +13,7 @@
<Column field="size" header="Size 3" style="width: 250px"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -118,8 +120,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/scroll/VerticalScrollDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="270px">
<Column field="name" header="Name" expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/selection/CheckboxRowSelectionDoc.vue
View File

@ -6,6 +6,7 @@
</p>
</DocSectionText>
<DocSectionCode :code="introCode" hideToggleCode importCode hideStackBlitz />
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
<Column field="name" header="Name" expander></Column>
@ -13,6 +14,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -123,8 +125,10 @@ const selectedKey = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/selection/MultipleRowsSelectionDoc.vue
View File

@ -6,6 +6,7 @@
</p>
<p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" />
@ -17,6 +18,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -130,8 +132,10 @@ const metaKey = ref(true);
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/selection/RowSelectionEventsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>TreeTable provides <i>nodeSelect</i> and <i>nodeUnselect</i> events to listen selection events.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false">
<Column field="name" header="Name" expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -130,10 +132,10 @@ const onNodeUnselect = (node) => {
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
methods: {
onNodeSelect(node) {
this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
},

6
doc/treetable/selection/SingleRowSelectionDoc.vue
View File

@ -6,6 +6,7 @@
setting it to false.
</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" />
@ -17,6 +18,7 @@
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -130,8 +132,10 @@ const metaKey = ref(true);
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/sort/MultipleColumnsDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" sortMode="multiple">
<Column field="name" header="Name" sortable expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type" sortable></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/sort/RemovableSortDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" sortMode="multiple" removableSort>
<Column field="name" header="Name" sortable expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type" sortable></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

6
doc/treetable/sort/SingleColumnDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes">
<Column field="name" header="Name" sortable expander></Column>
@ -9,6 +10,7 @@
<Column field="type" header="Type" sortable></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -106,8 +108,10 @@ const nodes = ref();
}
};
},
mounted() {
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

2
service/NodeService.js
View File

@ -377,7 +377,7 @@ export const NodeService = {
{
key: '7-1',
data: {
name: 'primeng.png',
name: 'primevue.png',
size: '30kb',
type: 'Picture'
}