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

Add new templating demos

pull/6537/head
Cagatay Civici 2024-10-04 22:29:29 +03:00
parent 5e7772ff33
commit fee9118017
6 changed files with 323 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/showcase/doc/autocomplete/TemplateDoc.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>AutoComplete offers multiple slots for customization through templating.</p>
Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
<i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search"> <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
@ -13,6 +10,14 @@
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #header>
<div class="font-medium px-3 py-2">Available Items</div>
</template>
<template #footer>
<div class="px-3 py-2">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</AutoComplete> </AutoComplete>
</div> </div>
<DocSectionCode :code="code" :service="['CountryService']" /> <DocSectionCode :code="code" :service="['CountryService']" />
@ -35,6 +40,14 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #header>
<div class="font-medium px-3 py-2">Available Items</div>
</template>
<template #footer>
<div class="px-3 py-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</AutoComplete> </AutoComplete>
`, `,
options: ` options: `
@ -47,6 +60,14 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #header>
<div class="font-medium px-3 py-2">Available Items</div>
</template>
<template #footer>
<div class="px-3 py-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</AutoComplete> </AutoComplete>
</div> </div>
</template> </template>
@ -91,6 +112,14 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #header>
<div class="font-medium px-3 py-2">Available Items</div>
</template>
<template #footer>
<div class="px-3 py-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</AutoComplete> </AutoComplete>
</div> </div>
</template> </template>

45
apps/showcase/doc/cascadeselect/TemplateDoc.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>CascadeSelect offers multiple slots for customization through templating.</p>
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>dropdownicon</i>,
<i>loadingicon</i>, and <i>optiongroupicon</i> slots are provided for further customization.
</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City"> <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
@ -16,7 +13,15 @@
</div> </div>
</template> </template>
<template #dropdownicon> <template #dropdownicon>
<i class="pi pi-map-marker"></i> <i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer>
<div class="px-3 py-1">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template> </template>
</CascadeSelect> </CascadeSelect>
</div> </div>
@ -115,7 +120,15 @@ export default {
</div> </div>
</template> </template>
<template #dropdownicon> <template #dropdownicon>
<i class="pi pi-map-marker"></i> <i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer>
<div class="px-3 py-1">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template> </template>
</CascadeSelect> </CascadeSelect>
`, `,
@ -133,7 +146,15 @@ export default {
</div> </div>
</template> </template>
<template #dropdownicon> <template #dropdownicon>
<i class="pi pi-map-marker"></i> <i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer>
<div class="px-3 py-1">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template> </template>
</CascadeSelect> </CascadeSelect>
</div> </div>
@ -237,7 +258,15 @@ export default {
</div> </div>
</template> </template>
<template #dropdownicon> <template #dropdownicon>
<i class="pi pi-map-marker"></i> <i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer>
<div class="px-3 py-1">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template> </template>
</CascadeSelect> </CascadeSelect>
</div> </div>

61
apps/showcase/doc/multiselect/TemplateDoc.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>MultiSelect offers multiple slots for customization through templating.</p>
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>,
<i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
@ -13,9 +10,19 @@
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #filtericon>
<i class="pi pi-map-marker" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer> <template #footer>
<div class="py-2 px-4"> <div class="p-3 flex justify-between">
<b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>
@ -49,9 +56,19 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #filtericon>
<i class="pi pi-map-marker" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer> <template #footer>
<div class="py-2 px-4"> <div class="p-3 flex justify-between">
<b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>
@ -66,9 +83,19 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #filtericon>
<i class="pi pi-map-marker" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer> <template #footer>
<div class="py-2 px-4"> <div class="p-3 flex justify-between">
<b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>
@ -107,9 +134,19 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #filtericon>
<i class="pi pi-map-marker" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Countries</div>
</template>
<template #footer> <template #footer>
<div class="py-2 px-4"> <div class="p-3 flex justify-between">
<b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>

46
apps/showcase/doc/select/TemplateDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Options and the selected option display support templating with <i>option</i> and <i>value</i> respectively.</p> <p>Select offers multiple slots for customization through templating.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56"> <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
@ -19,6 +19,17 @@
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium p-3">Available Countries</div>
</template>
<template #footer>
<div class="p-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</Select> </Select>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -59,6 +70,17 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium p-3">Available Countries</div>
</template>
<template #footer>
<div class="p-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</Select> </Select>
`, `,
options: ` options: `
@ -80,6 +102,17 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium p-3">Available Countries</div>
</template>
<template #footer>
<div class="p-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</Select> </Select>
</div> </div>
</template> </template>
@ -125,6 +158,17 @@ export default {
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium p-3">Available Countries</div>
</template>
<template #footer>
<div class="p-3">
<Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</Select> </Select>
</div> </div>
</template> </template>

151
apps/showcase/doc/treeselect/TemplateDoc.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<DocSectionText v-bind="$attrs">
<p>TreeSelect offers multiple slots for customization through templating.</p>
</DocSectionText>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
<template #dropdownicon>
<i class="pi pi-search" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Files</div>
</template>
<template #footer>
<div class="px-3 pt-1 pb-2 flex justify-between">
<Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
</div>
</template>
</TreeSelect>
</div>
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
</template>
<script>
import { NodeService } from '/service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
code: {
basic: `
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
<template #dropdownicon>
<i class="pi pi-search" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Files</div>
</template>
<template #footer>
<div class="px-3 pt-1 pb-2 flex justify-between">
<Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
</div>
</template>
</TreeSelect>
`,
options: `
<template>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
<template #dropdownicon>
<i class="pi pi-search" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Files</div>
</template>
<template #footer>
<div class="px-3 pt-1 pb-2 flex justify-between">
<Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
</div>
</template>
</TreeSelect>
</div>
</template>
<script>
import { NodeService } from './service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
}
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
<template #dropdownicon>
<i class="pi pi-search" />
</template>
<template #header>
<div class="font-medium px-3 py-2">Available Files</div>
</template>
<template #footer>
<div class="px-3 pt-1 pb-2 flex justify-between">
<Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
<Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
</div>
</template>
</TreeSelect>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { NodeService } from './service/NodeService';
const nodes = ref(null);
const selectedValue = ref(null);
onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data));
});
<\/script>
`,
data: `
{
key: '0',
label: 'Documents',
data: 'Documents Folder',
icon: 'pi pi-fw pi-inbox',
children: [
{
key: '0-0',
label: 'Work',
data: 'Work Folder',
icon: 'pi pi-fw pi-cog',
children: [
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
]
},
{
key: '0-1',
label: 'Home',
data: 'Home Folder',
icon: 'pi pi-fw pi-home',
children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
}
]
},
...`
}
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

10
apps/showcase/pages/treeselect/index.vue
View File

@ -14,16 +14,17 @@
import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/treeselect/BasicDoc.vue'; import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue'; import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/treeselect/FilledDoc.vue'; import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
import ImportDoc from '@/doc/treeselect/ImportDoc.vue'; import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue'; import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
import PTComponent from '@/doc/treeselect/pt/index.vue'; import PTComponent from '@/doc/treeselect/pt/index.vue';
import TemplateDoc from '@/doc/treeselect/TemplateDoc.vue';
import ThemingDoc from '@/doc/treeselect/theming/index.vue'; import ThemingDoc from '@/doc/treeselect/theming/index.vue';
export default { export default {
@ -60,6 +61,11 @@ export default {
label: 'Filter', label: 'Filter',
component: FilterDoc component: FilterDoc
}, },
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{ {
id: 'filled', id: 'filled',
label: 'Filled', label: 'Filled',