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', key: '7-1',
data: { data: {
name: 'primeng.png', name: 'primevue.png',
size: '30kb', size: '30kb',
type: 'Picture' type: 'Picture'
} }

102
doc/galleria/AdvancedDoc.vue
View File

@ -2,52 +2,54 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Advanced Galleria implementation with a custom UI.</p> <p>Advanced Galleria implementation with a custom UI.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<Galleria <div class="card">
ref="galleria" <Galleria
v-model:activeIndex="activeIndex" ref="galleria"
:value="images" v-model:activeIndex="activeIndex"
:numVisible="5" :value="images"
containerStyle="max-width: 640px" :numVisible="5"
:showThumbnails="showThumbnails" containerStyle="max-width: 640px"
:showItemNavigators="true" :showThumbnails="showThumbnails"
:showItemNavigatorsOnHover="true" :showItemNavigators="true"
:circular="true" :showItemNavigatorsOnHover="true"
:autoPlay="isAutoPlay" :circular="true"
:transitionInterval="3000" :autoPlay="isAutoPlay"
:responsiveOptions="responsiveOptions" :transitionInterval="3000"
:pt="{ :responsiveOptions="responsiveOptions"
root: { :pt="{
class: [{ 'flex flex-column': fullScreen }] root: {
}, class: [{ 'flex flex-column': fullScreen }]
content: { },
class: ['relative', { 'flex-1 justify-content-center': fullScreen }] content: {
}, class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
thumbnailwrapper: 'absolute w-full left-0 bottom-0' },
}" thumbnailwrapper: 'absolute w-full left-0 bottom-0'
> }"
<template #item="slotProps"> >
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
<template #thumbnail="slotProps"> </template>
<div class="grid grid-nogutter justify-content-center"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <div class="grid grid-nogutter justify-content-center">
</div> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </div>
<template #footer> </template>
<div class="flex align-items-center bg-black-alpha-90 text-white"> <template #footer>
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" /> <div class="flex align-items-center bg-black-alpha-90 text-white">
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" /> <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
<span v-if="images" class="title-container"> <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
<span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span> <span v-if="images" class="title-container">
<span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span> <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="text-sm p-3">{{ images[activeIndex].alt }}</span> <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
</span> <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" /> </span>
</div> <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
</template> </div>
</Galleria> </template>
</div> </Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" /> <DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template> </template>
@ -424,11 +426,11 @@ const slideButtonIcon = computed(() => {
} }
}; };
}, },
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
methods: { methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
toggleAutoSlide() { toggleAutoSlide() {
this.isAutoPlay = !this.isAutoPlay; this.isAutoPlay = !this.isAutoPlay;
}, },

28
doc/galleria/AutoPlayDoc.vue
View File

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

28
doc/galleria/BasicDoc.vue
View File

@ -2,16 +2,18 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <div class="card">
<template #item="slotProps"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
<template #thumbnail="slotProps"> </template>
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <template #thumbnail="slotProps">
</template> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</Galleria> </template>
</div> </Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -130,8 +132,10 @@ const responsiveOptions = ref([
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

36
doc/galleria/CaptionDoc.vue
View File

@ -2,20 +2,22 @@
<DocSectionText v-bind="$attrs"> <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> <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <div class="card">
<template #item="slotProps"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<template #thumbnail="slotProps"> </template>
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <template #thumbnail="slotProps">
</template> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<template #caption="slotProps"> </template>
<div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div> <template #caption="slotProps">
<p class="text-white">{{ slotProps.item.alt }}</p> <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
</template> <p class="text-white">{{ slotProps.item.alt }}</p>
</Galleria> </template>
</div> </Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -146,8 +148,10 @@ const responsiveOptions = ref([
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

36
doc/galleria/ControlledDoc.vue
View File

@ -2,21 +2,23 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p> <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<div class="mb-3"> <div class="card">
<Button icon="pi pi-minus" @click="prev" /> <div class="mb-3">
<Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" /> <Button icon="pi pi-minus" @click="prev" />
</div> <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
</div>
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -168,10 +170,10 @@ const prev = () => {
} }
}; };
}, },
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
},
methods: { methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
},
next() { next() {
this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1; this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
}, },

32
doc/galleria/ResponsiveDoc.vue
View File

@ -2,18 +2,20 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p> <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"> <div class="card">
<template #item="slotProps"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<template #thumbnail="slotProps"> </template>
<div class="grid grid-nogutter justify-content-center"> <template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <div class="grid grid-nogutter justify-content-center">
</div> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </div>
</Galleria> </template>
</div> </Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -138,8 +140,10 @@ const responsiveOptions = ref([
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

42
doc/galleria/ThumbnailDoc.vue
View File

@ -2,24 +2,26 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Thumbnails represent a smaller version of the actual content.</p> <p>Thumbnails represent a smaller version of the actual content.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<div class="flex flex-wrap gap-3 mb-5"> <div class="card">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center"> <div class="flex flex-wrap gap-3 mb-5">
<RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" /> <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<label :for="option.label" class="ml-2"> {{ option.label }} </label> <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
</div> <label :for="option.label" class="ml-2"> {{ option.label }} </label>
</div>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div> </div>
</template> </div>
</Galleria> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :thumbnailsPosition="position" containerStyle="max-width: 640px">
</div> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -213,8 +215,10 @@ onMounted(() => {
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

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

@ -2,33 +2,35 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p> <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <DeferredDemo @load="loadDemoData">
<Galleria <div class="card flex justify-content-center">
v-model:activeIndex="activeIndex" <Galleria
v-model:visible="displayCustom" v-model:activeIndex="activeIndex"
:value="images" v-model:visible="displayCustom"
:responsiveOptions="responsiveOptions" :value="images"
:numVisible="7" :responsiveOptions="responsiveOptions"
containerStyle="max-width: 850px" :numVisible="7"
:circular="true" containerStyle="max-width: 850px"
:fullScreen="true" :circular="true"
:showItemNavigators="true" :fullScreen="true"
:showThumbnails="false" :showItemNavigators="true"
> :showThumbnails="false"
<template #item="slotProps"> >
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<template #thumbnail="slotProps"> </template>
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <template #thumbnail="slotProps">
</template> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</Galleria> </template>
</Galleria>
<div v-if="images" class="grid" style="max-width: 400px"> <div v-if="images" class="grid" style="max-width: 400px">
<div v-for="(image, index) of images" :key="index" class="col-4"> <div v-for="(image, index) of images" :key="index" class="col-4">
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" /> <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
</div>
</div> </div>
</div> </div>
</div> </DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -191,10 +193,10 @@ const imageClick = (index) => {
} }
}; };
}, },
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
},
methods: { methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
},
imageClick(index) { imageClick(index) {
this.activeIndex = index; this.activeIndex = index;
this.displayCustom = true; this.displayCustom = true;

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

@ -2,18 +2,20 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card flex justify-content-center"> <DeferredDemo @load="loadDemoData">
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"> <div class="card flex justify-content-center">
<template #item="slotProps"> <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<template #thumbnail="slotProps"> </template>
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <template #thumbnail="slotProps">
</template> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</Galleria> </template>
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /> <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div> </div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -165,8 +167,10 @@ onMounted(() => {
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

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

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

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

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

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

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

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

@ -2,23 +2,25 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<div class="flex flex-wrap gap-3 mb-5"> <div class="card">
<div v-for="option in positionOptions" :key="option.label" class="flex align-items-center"> <div class="flex flex-wrap gap-3 mb-5">
<RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" /> <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
<label :for="option.label" class="ml-2"> {{ option.label }} </label> <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
<label :for="option.label" class="ml-2"> {{ option.label }} </label>
</div>
</div> </div>
<div class="flex align-items-center mb-5">
<Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
<label for="inside_cbox" class="ml-2"> Inside </label>
</div>
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div> </div>
<div class="flex align-items-center mb-5"> </DeferredDemo>
<Checkbox v-model="inside" inputId="inside_cbox" :binary="true"></Checkbox>
<label for="inside_cbox" class="ml-2"> Inside </label>
</div>
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -181,8 +183,10 @@ const positionOptions = ref([
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

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

@ -2,16 +2,18 @@
<DocSectionText v-bind="$attrs"> <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> <p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"> <div class="card">
<template #item="slotProps"> <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <template #item="slotProps">
</template> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<template #indicator="{ index }"> </template>
<span style="color: #ffffff; cursor: pointer">{{ index + 1 }}</span> <template #indicator="{ index }">
</template> <span style="color: #ffffff; cursor: pointer">{{ index + 1 }}</span>
</Galleria> </template>
</div> </Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" /> <DocSectionCode :code="code" :service="['PhotoService']" />
</template> </template>
@ -103,8 +105,10 @@ const images = ref();
} }
}; };
}, },
mounted() { methods: {
PhotoService.getImages().then((data) => (this.images = data)); loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
} }
}; };
</script> </script>

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

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

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

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

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

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

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

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

22
doc/treetable/BasicDoc.vue
View File

@ -2,13 +2,15 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable :value="nodes"> <div class="card">
<Column field="name" header="Name" expander></Column> <TreeTable :value="nodes">
<Column field="size" header="Size"></Column> <Column field="name" header="Name" expander></Column>
<Column field="type" header="Type"></Column> <Column field="size" header="Size"></Column>
</TreeTable> <Column field="type" header="Type"></Column>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -106,8 +108,10 @@ const nodes = ref();
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

30
doc/treetable/ColumnToggleDoc.vue
View File

@ -2,17 +2,19 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable :value="nodes"> <div class="card">
<template #header> <TreeTable :value="nodes">
<div style="text-align: left"> <template #header>
<MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip" /> <div style="text-align: left">
</div> <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip" />
</template> </div>
<Column field="name" header="Name" :expander="true"></Column> </template>
<Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column> <Column field="name" header="Name" :expander="true"></Column>
</TreeTable> <Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -155,10 +157,10 @@ const onToggle = (val) => {
this.selectedColumns = this.columns; this.selectedColumns = this.columns;
}, },
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
methods: { methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
onToggle(value) { onToggle(value) {
this.selectedColumns = this.columns.filter((col) => value.includes(col)); this.selectedColumns = this.columns.filter((col) => value.includes(col));
} }

24
doc/treetable/ControlledDoc.vue
View File

@ -2,14 +2,16 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<Button @click="toggleApplications" label="Toggle Applications" /> <div class="card">
<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4"> <Button @click="toggleApplications" label="Toggle Applications" />
<Column field="name" header="Name" expander></Column> <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4">
<Column field="size" header="Size"></Column> <Column field="name" header="Name" expander></Column>
<Column field="type" header="Type"></Column> <Column field="size" header="Size"></Column>
</TreeTable> <Column field="type" header="Type"></Column>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -131,10 +133,10 @@ const toggleApplications = () => {
} }
}; };
}, },
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
methods: { methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
toggleApplications() { toggleApplications() {
let _expandedKeys = { ...this.expandedKeys }; let _expandedKeys = { ...this.expandedKeys };

18
doc/treetable/DynamicColumnsDoc.vue
View File

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

70
doc/treetable/FilterDoc.vue
View File

@ -6,38 +6,40 @@
support filtering. support filtering.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<div class="flex justify-content-center mb-4"> <div class="card">
<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" /> <div class="flex justify-content-center mb-4">
<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
</div>
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header>
<div class="text-right">
<IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global']" placeholder="Global Search" />
</IconField>
</div>
</template>
<Column field="name" header="Name" expander>
<template #filter>
<InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
</template>
</Column>
<Column field="size" header="Size">
<template #filter>
<InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
</template>
</Column>
<Column field="type" header="Type">
<template #filter>
<InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
</template>
</Column>
</TreeTable>
</div> </div>
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> </DeferredDemo>
<template #header>
<div class="text-right">
<IconField iconPosition="left">
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global']" placeholder="Global Search" />
</IconField>
</div>
</template>
<Column field="name" header="Name" expander>
<template #filter>
<InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
</template>
</Column>
<Column field="size" header="Size">
<template #filter>
<InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
</template>
</Column>
<Column field="type" header="Type">
<template #filter>
<InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
</template>
</Column>
</TreeTable>
</div>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -226,8 +228,10 @@ const filterOptions = ref([
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

37
doc/treetable/LazyLoadDoc.vue
View File

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

22
doc/treetable/ResponsiveDoc.vue
View File

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

26
doc/treetable/SizeDoc.vue
View File

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

50
doc/treetable/TemplateDoc.vue
View File

@ -2,29 +2,31 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p> <p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable :value="nodes"> <div class="card">
<template #header> <TreeTable :value="nodes">
<div class="text-xl font-bold">File Viewer</div> <template #header>
</template> <div class="text-xl font-bold">File Viewer</div>
<Column field="name" header="Name" :expander="true"></Column> </template>
<Column field="size" header="Size"></Column> <Column field="name" header="Name" :expander="true"></Column>
<Column field="type" header="Type"></Column> <Column field="size" header="Size"></Column>
<Column headerStyle="width: 10rem"> <Column field="type" header="Type"></Column>
<template #body> <Column headerStyle="width: 10rem">
<div class="flex flex-wrap gap-2"> <template #body>
<Button type="button" icon="pi pi-search" rounded /> <div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-pencil" rounded severity="success" /> <Button type="button" icon="pi pi-search" rounded />
<Button type="button" icon="pi pi-pencil" rounded severity="success" />
</div>
</template>
</Column>
<template #footer>
<div class="flex justify-content-start">
<Button icon="pi pi-refresh" label="Reload" severity="warning" />
</div> </div>
</template> </template>
</Column> </TreeTable>
<template #footer> </div>
<div class="flex justify-content-start"> </DeferredDemo>
<Button icon="pi pi-refresh" label="Reload" severity="warning" />
</div>
</template>
</TreeTable>
</div>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -170,8 +172,10 @@ const nodes = ref();
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

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

@ -2,13 +2,15 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p> <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]"> <div class="card">
<Column field="name" header="Name" expander></Column> <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
<Column field="size" header="Size"></Column> <Column field="name" header="Name" expander></Column>
<Column field="type" header="Type"></Column> <Column field="size" header="Size"></Column>
</TreeTable> <Column field="type" header="Type"></Column>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -115,39 +117,42 @@ for (let i = 0; i < 50; i++) {
} }
nodes.value = files; nodes.value = files;
<\/script> <\/script>
` `
} }
}; };
}, },
mounted() { mounted() {},
let files = []; methods: {
loadDemoData() {
let files = [];
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
let node = { let node = {
key: i, key: i,
data: { data: {
name: 'Item ' + i, name: 'Item ' + i,
size: Math.floor(Math.random() * 1000) + 1 + 'kb', size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i type: 'Type ' + i
}, },
children: [ children: [
{ {
key: i + ' - 0', key: i + ' - 0',
data: { data: {
name: 'Item ' + i + ' - 0', name: 'Item ' + i + ' - 0',
size: Math.floor(Math.random() * 1000) + 1 + 'kb', size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i type: 'Type ' + i
}
} }
} ]
] };
};
files.push(node); files.push(node);
}
this.nodes = files;
} }
this.nodes = files;
} }
}; };
</script> </script>

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

@ -5,26 +5,28 @@
<PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options. <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable <div class="card">
:value="nodes" <TreeTable
:paginator="true" :value="nodes"
:rows="5" :paginator="true"
:rowsPerPageOptions="[5, 10, 25, 50]" :rows="5"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" :rowsPerPageOptions="[5, 10, 25, 50]"
currentPageReportTemplate="{first} to {last} of {totalRecords}" paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
> currentPageReportTemplate="{first} to {last} of {totalRecords}"
<template #paginatorstart> >
<Button type="button" icon="pi pi-refresh" text /> <template #paginatorstart>
</template> <Button type="button" icon="pi pi-refresh" text />
<Column field="name" header="Name" expander></Column> </template>
<Column field="size" header="Size"></Column> <Column field="name" header="Name" expander></Column>
<Column field="type" header="Type"></Column> <Column field="size" header="Size"></Column>
<template #paginatorend> <Column field="type" header="Type"></Column>
<Button type="button" icon="pi pi-download" text /> <template #paginatorend>
</template> <Button type="button" icon="pi pi-download" text />
</TreeTable> </template>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -155,39 +157,41 @@ for (let i = 0; i < 50; i++) {
} }
nodes.value = files; nodes.value = files;
<\/script> <\/script>
` `
} }
}; };
}, },
mounted() { methods: {
let files = []; loadDemoData() {
let files = [];
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
let node = { let node = {
key: i, key: i,
data: { data: {
name: 'Item ' + i, name: 'Item ' + i,
size: Math.floor(Math.random() * 1000) + 1 + 'kb', size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i type: 'Type ' + i
}, },
children: [ children: [
{ {
key: i + ' - 0', key: i + ' - 0',
data: { data: {
name: 'Item ' + i + ' - 0', name: 'Item ' + i + ' - 0',
size: Math.floor(Math.random() * 1000) + 1 + 'kb', size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i type: 'Type ' + i
}
} }
} ]
] };
};
files.push(node); files.push(node);
}
this.nodes = files;
} }
this.nodes = files;
} }
}; };
</script> </script>

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

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

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

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

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

@ -5,20 +5,22 @@
adjusts itself according to the size changes. adjusts itself according to the size changes.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <DeferredDemo @load="loadDemoData">
<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" /> <div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
<Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }"> <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
<TreeTable :value="nodes" :scrollable="true" scrollHeight="flex"> <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
<Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column> <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
<Column field="size" header="Size" style="min-width: 200px"></Column> <Column field="size" header="Size" style="min-width: 200px"></Column>
<Column field="type" header="Type" style="min-width: 200px"></Column> <Column field="type" header="Type" style="min-width: 200px"></Column>
</TreeTable> </TreeTable>
<template #footer> <template #footer>
<Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" /> <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
</template> </template>
</Dialog> </Dialog>
</div> </div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -110,8 +112,10 @@ const dialogVisible = ref(false);
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

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

@ -2,16 +2,18 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both"> <div class="card">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column> <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column> <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column> <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column> <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column> <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column> <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
</TreeTable> <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -118,8 +120,10 @@ const nodes = ref();
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

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

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

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

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

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

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

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

@ -6,17 +6,19 @@
</p> </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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<div class="flex justify-content-center align-items-center mb-4 gap-2"> <div class="card">
<InputSwitch v-model="metaKey" inputId="input-metakey" /> <div class="flex justify-content-center align-items-center mb-4 gap-2">
<label for="input-metakey">MetaKey</label> <InputSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label>
</div>
<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
<Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div> </div>
<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey"> </DeferredDemo>
<Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -130,8 +132,10 @@ const metaKey = ref(true);
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

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

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

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

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

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

@ -2,13 +2,15 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card"> <DeferredDemo @load="loadDemoData">
<TreeTable :value="nodes" sortMode="multiple"> <div class="card">
<Column field="name" header="Name" sortable expander></Column> <TreeTable :value="nodes" sortMode="multiple">
<Column field="size" header="Size" sortable></Column> <Column field="name" header="Name" sortable expander></Column>
<Column field="type" header="Type" sortable></Column> <Column field="size" header="Size" sortable></Column>
</TreeTable> <Column field="type" header="Type" sortable></Column>
</div> </TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" /> <DocSectionCode :code="code" :service="['NodeService']" />
</template> </template>
@ -106,8 +108,10 @@ const nodes = ref();
} }
}; };
}, },
mounted() { methods: {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
} }
}; };
</script> </script>

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

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

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

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

2
service/NodeService.js
View File

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