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

102
doc/galleria/AdvancedDoc.vue
View File

@ -2,52 +2,54 @@
<DocSectionText v-bind="$attrs">
<p>Advanced Galleria implementation with a custom UI.</p>
</DocSectionText>
<div class="card">
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
:value="images"
:numVisible="5"
containerStyle="max-width: 640px"
:showThumbnails="showThumbnails"
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
class: [{ 'flex flex-column': fullScreen }]
},
content: {
class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
},
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>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>
<div class="flex align-items-center bg-black-alpha-90 text-white">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
<span v-if="images" class="title-container">
<span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
<span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
</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' } }" />
</div>
</template>
</Galleria>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
:value="images"
:numVisible="5"
containerStyle="max-width: 640px"
:showThumbnails="showThumbnails"
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
class: [{ 'flex flex-column': fullScreen }]
},
content: {
class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
},
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>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>
<div class="flex align-items-center bg-black-alpha-90 text-white">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
<span v-if="images" class="title-container">
<span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
<span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
</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' } }" />
</div>
</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() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
toggleAutoSlide() {
this.isAutoPlay = !this.isAutoPlay;
},

28
doc/galleria/AutoPlayDoc.vue
View File

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

28
doc/galleria/BasicDoc.vue
View File

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

36
doc/galleria/CaptionDoc.vue
View File

@ -2,20 +2,22 @@
<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>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" 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">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
<template #caption="slotProps">
<div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
<p class="text-white">{{ slotProps.item.alt }}</p>
</template>
</Galleria>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" 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">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
<template #caption="slotProps">
<div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
<p class="text-white">{{ slotProps.item.alt }}</p>
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -146,8 +148,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

36
doc/galleria/ControlledDoc.vue
View File

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

42
doc/galleria/ThumbnailDoc.vue
View File

@ -2,24 +2,26 @@
<DocSectionText v-bind="$attrs">
<p>Thumbnails represent a smaller version of the actual content.</p>
</DocSectionText>
<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">
<RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
<label :for="option.label" class="ml-2"> {{ option.label }} </label>
</div>
</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" />
<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">
<RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
<label :for="option.label" class="ml-2"> {{ option.label }} </label>
</div>
</template>
</Galleria>
</div>
</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>
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -213,8 +215,10 @@ onMounted(() => {
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

@ -2,33 +2,35 @@
<DocSectionText v-bind="$attrs">
<p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Galleria
v-model:activeIndex="activeIndex"
v-model:visible="displayCustom"
:value="images"
:responsiveOptions="responsiveOptions"
:numVisible="7"
containerStyle="max-width: 850px"
:circular="true"
:fullScreen="true"
:showItemNavigators="true"
:showThumbnails="false"
>
<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>
<DeferredDemo @load="loadDemoData">
<div class="card flex justify-content-center">
<Galleria
v-model:activeIndex="activeIndex"
v-model:visible="displayCustom"
:value="images"
:responsiveOptions="responsiveOptions"
:numVisible="7"
containerStyle="max-width: 850px"
:circular="true"
:fullScreen="true"
:showItemNavigators="true"
:showThumbnails="false"
>
<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 v-if="images" class="grid" style="max-width: 400px">
<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)" />
<div v-if="images" class="grid" style="max-width: 400px">
<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)" />
</div>
</div>
</div>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -191,10 +193,10 @@ const imageClick = (index) => {
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
},
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
},
imageClick(index) {
this.activeIndex = index;
this.displayCustom = true;

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

@ -2,18 +2,20 @@
<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>
<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">
<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>
<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">
<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>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
<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() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

@ -2,18 +2,20 @@
<DocSectionText v-bind="$attrs">
<p>Thumbnails can also be hidden in full screen mode.</p>
</DocSectionText>
<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">
<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>
<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">
<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>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
<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() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

@ -2,13 +2,15 @@
<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>
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -91,8 +93,10 @@ const images = ref();
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

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

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

@ -2,23 +2,25 @@
<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>
<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">
<RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
<label :for="option.label" class="ml-2"> {{ option.label }} </label>
<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">
<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 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 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>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -181,8 +183,10 @@ const positionOptions = ref([
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

@ -2,16 +2,18 @@
<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>
<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">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #indicator="{ index }">
<span style="color: #ffffff; cursor: pointer">{{ index + 1 }}</span>
</template>
</Galleria>
</div>
<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">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #indicator="{ index }">
<span style="color: #ffffff; cursor: pointer">{{ index + 1 }}</span>
</template>
</Galleria>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -103,8 +105,10 @@ const images = ref();
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

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

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

@ -2,16 +2,28 @@
<DocSectionText v-bind="$attrs">
<p>Navigators and Indicators can be combined as well.</p>
</DocSectionText>
<div class="card">
<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>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>
<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"
>
<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']" />
</template>
@ -145,8 +157,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

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

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

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

@ -2,16 +2,18 @@
<DocSectionText v-bind="$attrs">
<p>Simple example with indicators only.</p>
</DocSectionText>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
<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 @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">
<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']" />
</template>
@ -145,8 +147,10 @@ const responsiveOptions = ref([
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
methods: {
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
}
}
};
</script>

22
doc/treetable/BasicDoc.vue
View File

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

30
doc/treetable/ColumnToggleDoc.vue
View File

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

24
doc/treetable/ControlledDoc.vue
View File

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

18
doc/treetable/DynamicColumnsDoc.vue
View File

@ -2,11 +2,13 @@
<DocSectionText v-bind="$attrs">
<p>Columns can be created programmatically.</p>
</DocSectionText>
<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 @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() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

70
doc/treetable/FilterDoc.vue
View File

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

35
doc/treetable/LazyLoadDoc.vue
View File

@ -10,13 +10,15 @@
</p>
<p>In addition, only the root elements should be loaded, children can be loaded on demand using <i>nodeExpand</i> callback.</p>
</DocSectionText>
<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>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<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>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" />
</template>
@ -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: {
loadDemoData() {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.nodes = this.loadNodes(0, this.rows);
this.totalRecords = 1000;
}, 1000);
},
onExpand(node) {
if (!node.children) {
this.loading = true;

22
doc/treetable/ResponsiveDoc.vue
View File

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

26
doc/treetable/SizeDoc.vue
View File

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

50
doc/treetable/TemplateDoc.vue
View File

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

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

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

90
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.
</p>
</DocSectionText>
<div class="card">
<TreeTable
:value="nodes"
:paginator="true"
:rows="5"
:rowsPerPageOptions="[5, 10, 25, 50]"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"
>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" text />
</template>
<Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
<template #paginatorend>
<Button type="button" icon="pi pi-download" text />
</template>
</TreeTable>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable
:value="nodes"
:paginator="true"
:rows="5"
:rowsPerPageOptions="[5, 10, 25, 50]"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"
>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" text />
</template>
<Column field="name" header="Name" expander></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
<template #paginatorend>
<Button type="button" icon="pi pi-download" text />
</template>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" />
</template>
@ -161,33 +163,35 @@ nodes.value = files;
}
};
},
mounted() {
let files = [];
methods: {
loadDemoData() {
let files = [];
for (let i = 0; i < 50; i++) {
let node = {
key: i,
data: {
name: 'Item ' + i,
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i
},
children: [
{
key: i + ' - 0',
data: {
name: 'Item ' + i + ' - 0',
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i
for (let i = 0; i < 50; i++) {
let node = {
key: i,
data: {
name: 'Item ' + i,
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i
},
children: [
{
key: i + ' - 0',
data: {
name: 'Item ' + i + ' - 0',
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i
}
}
}
]
};
]
};
files.push(node);
files.push(node);
}
this.nodes = files;
}
this.nodes = files;
}
};
</script>

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

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

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

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

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

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

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

@ -2,16 +2,18 @@
<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>
<div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
</TreeTable>
</div>
<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>
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
<Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
<Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
<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() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

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

@ -2,16 +2,18 @@
<DocSectionText v-bind="$attrs">
<p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
</DocSectionText>
<div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column>
<Column field="size" header="Size" style="width: 250px"></Column>
<Column field="type" header="Type 2" style="width: 250px"></Column>
<Column field="size" header="Size 2" style="width: 250px"></Column>
<Column field="type" header="Type 3" style="width: 250px"></Column>
<Column field="size" header="Size 3" style="width: 250px"></Column>
</TreeTable>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
<Column field="name" header="Name" expander style="width: 250px"></Column>
<Column field="size" header="Size" style="width: 250px"></Column>
<Column field="type" header="Type 2" style="width: 250px"></Column>
<Column field="size" header="Size 2" style="width: 250px"></Column>
<Column field="type" header="Type 3" style="width: 250px"></Column>
<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() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

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

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

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

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

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

@ -6,17 +6,19 @@
</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>
<div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label>
<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" />
<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>
<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>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -130,8 +132,10 @@ const metaKey = ref(true);
}
};
},
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

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

@ -2,13 +2,15 @@
<DocSectionText v-bind="$attrs">
<p>TreeTable provides <i>nodeSelect</i> and <i>nodeUnselect</i> events to listen selection events.</p>
</DocSectionText>
<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>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<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>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -130,10 +132,10 @@ const onNodeUnselect = (node) => {
}
};
},
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
},
onNodeSelect(node) {
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.
</p>
</DocSectionText>
<div class="card">
<div class="flex justify-content-center align-items-center mb-4 gap-2">
<InputSwitch v-model="metaKey" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label>
<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" />
<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>
<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>
</DeferredDemo>
<DocSectionCode :code="code" :service="['NodeService']" />
</template>
@ -130,8 +132,10 @@ const metaKey = ref(true);
}
};
},
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
methods: {
loadDemoData() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
}
}
};
</script>

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

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

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

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

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

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