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

Merge branch 'prod'

pull/6483/head
Cagatay Civici 2024-09-26 12:05:38 +03:00
parent 2d4f85a084 72fd3c80f3
commit cb124df402
36 changed files with 741 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/button/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Custom content inside a button is defined as children.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button outlined class="border-2">
<Button outlined class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@ -25,7 +25,7 @@ export default {
return {
code: {
basic: `
<Button outlined class="border-2">
<Button outlined class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" />
<path d="..." fill="var(--p-text-color)" />
@ -35,7 +35,7 @@ export default {
options: `
<template>
<div class="card flex justify-center">
<Button outlined class="border-2">
<Button outlined class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@ -56,7 +56,7 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<Button outlined class="border-2">
<Button outlined class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"

8
apps/showcase/doc/cascadeselect/BasicDoc.vue
View File

@ -6,7 +6,7 @@
</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
<DocSectionCode :code="code" />
</template>
@ -93,13 +93,13 @@ export default {
code: {
basic: `
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
</template>
@ -191,7 +191,7 @@ export default {
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
</template>

8
apps/showcase/doc/cascadeselect/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,12 +14,12 @@ export default {
return {
code: {
basic: `
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
</div>
</template>
@ -30,7 +30,7 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
</div>
</template>

8
apps/showcase/doc/cascadeselect/FilledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
<DocSectionCode :code="code" />
</template>
@ -90,13 +90,13 @@ export default {
code: {
basic: `
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
</template>
@ -188,7 +188,7 @@ export default {
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
</template>

8
apps/showcase/doc/cascadeselect/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
</div>
<DocSectionCode :code="code" />
</template>
@ -90,13 +90,13 @@ export default {
code: {
basic: `
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
</div>
</template>
@ -188,7 +188,7 @@ export default {
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
</div>
</template>

8
apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Loading state can be used <i>loading</i> property.</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
<CascadeSelect loading placeholder="Loading..." class="w-56" />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,12 +14,12 @@ export default {
return {
code: {
basic: `
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
<CascadeSelect loading placeholder="Loading..." class="w-56" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
<CascadeSelect loading placeholder="Loading..." class="w-56" />
</div>
</template>
@ -30,7 +30,7 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
<CascadeSelect loading placeholder="Loading..." class="w-56" />
</div>
</template>

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

@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
CascadeSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
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>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps">
<div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@ -15,6 +15,9 @@
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div>
</template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect>
</div>
<DocSectionCode :code="code" />
@ -102,7 +105,7 @@ export default {
code: {
basic: `
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps">
<div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -111,13 +114,16 @@ export default {
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div>
</template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect>
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps">
<div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -126,6 +132,9 @@ export default {
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div>
</template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect>
</div>
</template>
@ -218,7 +227,7 @@ export default {
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps">
<div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -227,6 +236,9 @@ export default {
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div>
</template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect>
</div>
</template>

8
apps/showcase/doc/datatable/ExportDoc.vue
View File

@ -6,7 +6,7 @@
<div class="card">
<DataTable ref="dt" :value="products" tableStyle="min-width: 50rem">
<template #header>
<div style="text-align: left">
<div class="text-end pb-4">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>
@ -31,7 +31,7 @@ export default {
basic: `
<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
<template #header>
<div style="text-align: left">
<div class="text-end pb-4">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>
@ -46,7 +46,7 @@ export default {
<div>
<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
<template #header>
<div style="text-align: left">
<div class="text-end pb-4">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>
@ -84,7 +84,7 @@ export default {
<div>
<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
<template #header>
<div style="text-align: left">
<div class="text-end pb-4">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>

143
apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Row selection with an element inside a column is implemented with templating.</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['ProductService']" />
</template>
<script>
import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null,
code: {
basic: `
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
`,
options: `
<template>
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
<Toast/>
</div>
</template>
<script>
import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null
};
},
mounted() {
ProductService.getProductsMini().then((data) => (this.products = data));
},
methods: {
selectRow(data) {
this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<Column class="w-24 !text-end">
<template #body="{ data }">
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
</template>
</Column>
</DataTable>
<Toast />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProductsMini().then((data) => (products.value = data));
});
const products = ref();
const toast = useToast();
const selectRow = (data) => {
toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
};
<\/script>
`,
data: `
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
...
`
}
};
},
methods: {
loadDemoData() {
ProductService.getProductsMini().then((data) => (this.products = data));
},
selectRow(data) {
this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
}
}
};
</script>

32
apps/showcase/doc/datatable/samples/ProductsDoc.vue
View File

@ -6,13 +6,13 @@
<div class="card">
<Toolbar class="mb-6">
<template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
</template>
</Toolbar>
@ -183,13 +183,13 @@ export default {
basic: `
<Toolbar class="mb-6">
<template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
</template>
</Toolbar>
@ -255,13 +255,13 @@ export default {
<div class="card">
<Toolbar class="mb-6">
<template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
</template>
</Toolbar>
@ -547,13 +547,13 @@ export default {
<div class="card">
<Toolbar class="mb-6">
<template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
</template>
</Toolbar>

20
apps/showcase/doc/dataview/BasicDoc.vue
View File

@ -7,12 +7,10 @@
<template #list="slotProps">
<div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center gap-4">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative">
<img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
</div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
@ -60,9 +58,7 @@ export default {
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
</div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
@ -101,9 +97,7 @@ export default {
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
</div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
@ -176,9 +170,7 @@ export default {
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
</div>
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
</div>
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">

8
apps/showcase/doc/inputmask/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-center">
<InputMask mask="99-999999" placeholder="99-999999" disabled />
<InputMask mask="99-999999" placeholder="Disabled" disabled />
</div>
<DocSectionCode :code="code" />
</template>
@ -15,12 +15,12 @@ export default {
value: '',
code: {
basic: `
<InputMask mask="99-999999" placeholder="99-999999" disabled />
<InputMask mask="99-999999" placeholder="Disabled" disabled />
`,
options: `
<template>
<div class="card flex justify-center">
<InputMask mask="99-999999" placeholder="99-999999" disabled />
<InputMask mask="99-999999" placeholder="Disabled" disabled />
</div>
</template>
@ -38,7 +38,7 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<InputMask mask="99-999999" placeholder="99-999999" disabled />
<InputMask mask="99-999999" placeholder="Disabled" disabled />
</div>
</template>

14
apps/showcase/doc/message/LifeDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Messages can disappear automatically by defined the <i>life</i> in milliseconds.</p>
</DocSectionText>
<div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="showMessage" :disabled="visible" />
<div class="card flex flex-col items-center justify-center">
<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
</div>
<DocSectionCode :code="code" />
@ -16,13 +16,13 @@ export default {
visible: false,
code: {
basic: `
<Button label="Show" @click="showMessage" :disabled="visible" />
<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
`,
options: `
<template>
<div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="showMessage" :disabled="visible" />
<div class="card flex flex-col items-center justify-center">
<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
</div>
</template>
@ -48,8 +48,8 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="showMessage" :disabled="visible" />
<div class="card flex flex-col items-center justify-center">
<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
</div>
</template>

8
apps/showcase/doc/panel/TemplateDoc.vue
View File

@ -6,7 +6,7 @@
<Panel toggleable>
<template #header>
<div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
@ -58,7 +58,7 @@ export default {
<Panel toggleable>
<template #header>
<div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
@ -88,7 +88,7 @@ export default {
<Panel toggleable>
<template #header>
<div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
@ -154,7 +154,7 @@ export default {
<Panel toggleable>
<template #header>
<div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>

27
apps/showcase/doc/splitbutton/BasicDoc.vue
View File

@ -26,12 +26,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -63,11 +65,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
}
{ label: 'Upload', to: '/fileupload' }
]
};
@ -96,22 +101,24 @@ const items = [
{
label: 'Update',
command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

24
apps/showcase/doc/splitbutton/DisabledDoc.vue
View File

@ -26,12 +26,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -63,12 +65,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
};
},
@ -105,12 +109,14 @@ const items = [
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

34
apps/showcase/doc/splitbutton/IconsDoc.vue
View File

@ -28,13 +28,15 @@ export default {
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
icon: 'pi pi-power-off',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -68,13 +70,15 @@ export default {
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
icon: 'pi pi-power-off',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
]
};
},
@ -103,24 +107,26 @@ const items = [
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
icon: 'pi pi-power-off',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
];
const save = () => {

270
apps/showcase/doc/splitbutton/NestedDoc.vue Normal file
View File

@ -0,0 +1,270 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Multi-level menus are supported with a nested menu hierarchy.</p>
</DocSectionText>
<div class="card flex justify-center">
<SplitButton label="Save" @click="save" :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
],
code: {
basic: `
<SplitButton label="Save" @click="save" :model="items" />
`,
options: `
<template>
<div class="card flex justify-center">
<SplitButton label="Save" @click="save" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
]
};
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<SplitButton label="Save" @click="save" :model="items" />
</div>
</template>
<script setup>
const items = [
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'New',
icon: 'pi pi-plus',
items: [
{
label: 'Document',
icon: 'pi pi-file'
},
{
label: 'Image',
icon: 'pi pi-image'
},
{
label: 'Video',
icon: 'pi pi-video'
}
]
},
{
label: 'Open',
icon: 'pi pi-folder-open'
},
{
label: 'Print',
icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
icon: 'pi pi-file-edit',
items: [
{
label: 'Copy',
icon: 'pi pi-copy'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
]
},
{
label: 'Search',
icon: 'pi pi-search'
},
{
separator: true
},
{
label: 'Share',
icon: 'pi pi-share-alt',
items: [
{
label: 'Slack',
icon: 'pi pi-slack'
},
{
label: 'Whatsapp',
icon: 'pi pi-whatsapp'
}
]
}
];
const save = () => {
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
};
<\/script>
`
}
};
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
}
};
</script>

28
apps/showcase/doc/splitbutton/OutlinedDoc.vue
View File

@ -33,12 +33,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -84,12 +86,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
}
},
@ -124,22 +128,24 @@ const items = [
{
label: 'Update',
command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

24
apps/showcase/doc/splitbutton/RaisedDoc.vue
View File

@ -33,12 +33,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -84,12 +86,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
};
},
@ -134,12 +138,14 @@ const items = [
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

24
apps/showcase/doc/splitbutton/RaisedTextDoc.vue
View File

@ -32,12 +32,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -81,12 +83,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
};
},
@ -130,12 +134,14 @@ const items = [
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

24
apps/showcase/doc/splitbutton/RoundedDoc.vue
View File

@ -33,12 +33,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -84,12 +86,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
};
},
@ -134,12 +138,14 @@ const items = [
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

24
apps/showcase/doc/splitbutton/SeverityDoc.vue
View File

@ -33,12 +33,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -84,12 +86,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
};
},
@ -134,12 +138,14 @@ const items = [
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

64
apps/showcase/doc/splitbutton/SizesDoc.vue
View File

@ -17,26 +17,25 @@ export default {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -61,26 +60,25 @@ export default {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
]
};
},
@ -107,28 +105,28 @@ import { useToast } from "primevue/usetoast";
const toast = useToast();
const items = [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
{
label: 'Update',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }];
];
const save = () => {
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });

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

@ -20,26 +20,25 @@ export default {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -70,26 +69,25 @@ export default {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
]
};
},
@ -121,26 +119,25 @@ const toast = useToast();
const items = [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
}
];
const save = () => {

24
apps/showcase/doc/splitbutton/TextDoc.vue
View File

@ -32,12 +32,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
],
code: {
basic: `
@ -81,12 +83,14 @@ export default {
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
]
};
},
@ -130,12 +134,14 @@ const items = [
}
},
{
label: 'Vue Website',
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', to: '/fileupload' }
}
];
const save = () => {

18
apps/showcase/doc/tooltip/AutoHideDoc.vue
View File

@ -1,10 +1,10 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p>
<p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
</div>
<DocSectionCode :code="code" />
</template>
@ -15,22 +15,22 @@ export default {
return {
code: {
basic: `
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
`,
options: `
<template>
<div class="card flex flex-wrap justify-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
</div>
</template>
`,
composition: `
<template>
<div class="card flex flex-wrap justify-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
</div>
</template>
`

6
apps/showcase/doc/tree/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
</div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@ -21,7 +21,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-center">
<div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
</div>
</template>
@ -43,7 +43,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
</div>
</template>

6
apps/showcase/doc/tree/ControlledDoc.vue
View File

@ -5,7 +5,7 @@
<i>expandedKeys</i> also supports two-way binding with the v-model directive.
</p>
</DocSectionText>
<div class="card flex flex-col items-center">
<div class="card">
<div class="flex flex-wrap gap-2 mb-6">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@ -33,7 +33,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-col align-items-cente">
<div class="card">
<div class="flex flex-wrap gap-2 mb-6">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@ -81,7 +81,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-col align-items-cente">
<div class="card">
<div class="flex flex-wrap gap-2 mb-6">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />

14
apps/showcase/doc/tree/EventsDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="card">
<Tree
v-model:selectionKeys="selectedKey"
:value="nodes"
@ -27,12 +27,12 @@ export default {
selectedKey: null,
code: {
basic: `
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-[30rem]"
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
`,
options: `
<template>
<div class="card flex justify-center">
<div class="card">
<Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@ -62,7 +62,7 @@ export default {
this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
},
onNodeCollapse(node) {
this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
}
}
}
@ -70,7 +70,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="card">
<Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@ -103,7 +103,7 @@ const onNodeExpand = (node) => {
};
const onNodeCollapse (node) => {
toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
};
<\/script>
`,
@ -151,7 +151,7 @@ const onNodeCollapse (node) => {
this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
},
onNodeCollapse(node) {
this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
}
}
};

6
apps/showcase/doc/tree/TemplateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]">
<template #default="slotProps">
<b>{{ slotProps.node.label }}</b>
@ -54,7 +54,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-center">
<div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]">
<template #default="slotProps">
<b>{{ slotProps.node.label }}</b>
@ -99,7 +99,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]">
<template #default="slotProps">
<b>{{ slotProps.node.label }}</b>

6
apps/showcase/doc/tree/selection/CheckboxDoc.vue
View File

@ -6,7 +6,7 @@
selection.
</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="card">
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@ -26,7 +26,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-center">
<div class="card">
<Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</div>
@ -58,7 +58,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="card">
<Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</div>

14
apps/showcase/doc/tree/selection/MultipleDoc.vue
View File

@ -6,12 +6,12 @@
</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 flex flex-col items-center justify-center">
<div class="card">
<div class="flex items-center mb-6 gap-2">
<ToggleSwitch v-model="checked" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label>
</div>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
</div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
</template>
@ -27,17 +27,17 @@ export default {
selectedKey: null,
code: {
basic: `
<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-[30rem]"
<Tree v-model:selectionKeys="selectedKey" :value="nodes"
selectionMode="multiple" :metaKeySelection="checked"></Tree>
`,
options: `
<template>
<div class="card flex flex-col items-center justify-center">
<div class="card">
<div class="flex items-center mb-6 gap-2">
<ToggleSwitch v-model="checked" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label>
</div>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
</div>
</template>
@ -60,12 +60,12 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-col items-center justify-center">
<div class="card">
<div class="flex items-center mb-6 gap-2">
<ToggleSwitch v-model="checked" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label>
</div>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
</div>
</template>

6
apps/showcase/doc/tree/selection/SingleDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="card">
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
</div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@ -21,7 +21,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-center">
<div class="card">
<Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
</div>
@ -53,7 +53,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="card">
<Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
</div>

6
apps/showcase/pages/datatable/index.vue
View File

@ -41,6 +41,7 @@ import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDo
import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue';
import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue';
import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue';
import ColumnRowSelectionDoc from '@/doc/datatable/rowselection/ColumnRowSelectionDoc.vue';
import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue';
import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue';
import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue';
@ -181,6 +182,11 @@ export default {
label: 'Checkbox',
component: CheckboxRowSelectionDoc
},
{
id: 'column_row_selection',
label: 'Column',
component: ColumnRowSelectionDoc
},
{
id: 'row_selection_events',
label: 'Events',

11
apps/showcase/pages/splitbutton/index.vue
View File

@ -16,11 +16,13 @@ import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
import NestedDoc from '@/doc/splitbutton/NestedDoc.vue';
import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
import RaisedTextDoc from '@/doc/splitbutton/RaisedTextDoc.vue';
import RoundedDoc from '@/doc/splitbutton/RoundedDoc.vue';
import SeverityDoc from '@/doc/splitbutton/SeverityDoc.vue';
import SizesDoc from '@/doc/splitbutton/SizesDoc.vue';
import TemplateDoc from '@/doc/splitbutton/TemplateDoc.vue';
import TextDoc from '@/doc/splitbutton/TextDoc.vue';
import PTComponent from '@/doc/splitbutton/pt/index.vue';
@ -45,6 +47,11 @@ export default {
label: 'Icons',
component: IconsDoc
},
{
id: 'nested',
label: 'Nested',
component: NestedDoc
},
{
id: 'severity',
label: 'Severity',
@ -80,11 +87,11 @@ export default {
label: 'Outlined',
component: OutlinedDoc
},
/*{
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},*/
},
{
id: 'template',
label: 'Template',