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

Migrated demos

pull/5806/head
Cagatay Civici 2024-05-20 15:14:38 +03:00
parent 1f86b4906f
commit 48f92d3966
454 changed files with 3920 additions and 3920 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
doc/accordion/ControlledDoc.vue
View File

@ -3,10 +3,10 @@
<p>Accordion can be controlled programmatically using a binding to <i>value</i> along with <i>v-model</i> to update the active value.</p>
</DocSectionText>
<div class="card">
<div class="flex mb-3 gap-2 justify-content-end">
<Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
<div class="flex mb-4 gap-2 justify-end">
<Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
</div>
<Accordion :value="active">
@ -49,10 +49,10 @@ export default {
active: '0',
code: {
basic: `
<div class="flex mb-3 gap-2 justify-content-end">
<Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
<div class="flex mb-4 gap-2 justify-end">
<Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
</div>
<Accordion :value="active">
@ -88,10 +88,10 @@ export default {
options: `
<template>
<div class="card">
<div class="flex mb-3 gap-2 justify-content-end">
<Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
<div class="flex mb-4 gap-2 justify-end">
<Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
</div>
<Accordion :value="active">
@ -139,10 +139,10 @@ export default {
composition: `
<template>
<div class="card">
<div class="flex mb-3 gap-2 justify-content-end">
<Button @click="active = '0'" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== '2'" />
<div class="flex mb-4 gap-2 justify-end">
<Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
<Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
<Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
</div>
<Accordion :value="active">

48
doc/accordion/TemplateDoc.vue
View File

@ -6,9 +6,9 @@
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionPanel value="0">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
<span class="font-bold whitespace-nowrap">Amy Elsner</span>
<Badge value="3" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -21,9 +21,9 @@
</AccordionPanel>
<AccordionPanel value="1">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
<span class="font-bold whitespace-nowrap">Onyama Limba</span>
<Badge value="4" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -36,9 +36,9 @@
</AccordionPanel>
<AccordionPanel value="2">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
<Badge value="2" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -63,9 +63,9 @@ export default {
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionPanel value="0">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
<span class="font-bold whitespace-nowrap">Amy Elsner</span>
<Badge value="3" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -78,9 +78,9 @@ export default {
</AccordionPanel>
<AccordionPanel value="1">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
<span class="font-bold whitespace-nowrap">Onyama Limba</span>
<Badge value="4" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -93,9 +93,9 @@ export default {
</AccordionPanel>
<AccordionPanel value="2">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
<Badge value="2" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -114,9 +114,9 @@ export default {
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionPanel value="0">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
<span class="font-bold whitespace-nowrap">Amy Elsner</span>
<Badge value="3" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -129,9 +129,9 @@ export default {
</AccordionPanel>
<AccordionPanel value="1">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
<span class="font-bold whitespace-nowrap">Onyama Limba</span>
<Badge value="4" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -144,9 +144,9 @@ export default {
</AccordionPanel>
<AccordionPanel value="2">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
<Badge value="2" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -170,9 +170,9 @@ export default {
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionPanel value="0">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
<span class="font-bold whitespace-nowrap">Amy Elsner</span>
<Badge value="3" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -185,9 +185,9 @@ export default {
</AccordionPanel>
<AccordionPanel value="1">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
<span class="font-bold whitespace-nowrap">Onyama Limba</span>
<Badge value="4" class="ml-auto mr-2" />
</span>
</AccordionHeader>
@ -200,9 +200,9 @@ export default {
</AccordionPanel>
<AccordionPanel value="2">
<AccordionHeader>
<span class="flex align-items-center gap-2 w-full">
<span class="flex items-center gap-2 w-full">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
<Badge value="2" class="ml-auto mr-2" />
</span>
</AccordionHeader>

116
doc/animateonscroll/BasicDoc.vue
View File

@ -2,45 +2,45 @@
<DocSectionText v-bind="$attrs">
<p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center overflow-hidden">
<div class="flex flex-column align-items-center gap-2">
<div class="card flex flex-col items-center overflow-hidden">
<div class="flex flex-col items-center gap-2">
<span class="text-xl font-medium">Scroll Down</span>
<span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
<i class="pi pi-arrow-down" />
</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div class="h-30rem"></div>
<div class="h-[30rem]"></div>
<div
v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }"
class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out"
class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">fade-left</span>
</div>
<div class="h-30rem"></div>
<div class="h-[30rem]"></div>
<div
v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }"
class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out"
class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">fade-right</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-left</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-y</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">scalein</span>
</div>
</div>
@ -53,69 +53,69 @@ export default {
return {
code: {
basic: `
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-left</span>
</div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-right</span>
</div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">zoom</span>
</div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-left</span>
</div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-y</span>
</div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">scalein</span>
</div>
`,
options: `
<template>
<div class="card flex flex-column align-items-center">
<div class="flex flex-column align-items-center gap-2">
<div class="card flex flex-col items-center">
<div class="flex flex-col items-center gap-2">
<span class="text-xl font-medium">Scroll Down</span>
<span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
<i class="pi pi-arrow-down" />
</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-left</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-right</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-left</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-y</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">scalein</span>
</div>
</div>
@ -151,39 +151,39 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-column align-items-center">
<div class="flex flex-column align-items-center gap-2">
<div class="card flex flex-col items-center">
<div class="flex flex-col items-center gap-2">
<span class="text-xl font-medium">Scroll Down</span>
<span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
<i class="pi pi-arrow-down" />
</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-left</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-right</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000">
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-left</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-y</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<div class="h-[30rem]"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">scalein</span>
</div>
</div>

6
doc/autocomplete/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>AutoComplete is used as a controlled component with <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>
<DocSectionCode :code="code" />
@ -20,7 +20,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>
</template>
@ -43,7 +43,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>
</template>

6
doc/autocomplete/DisabledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete disabled placeholder="Disabled" />
</div>
<DocSectionCode :code="code" />
@ -18,7 +18,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete disabled placeholder="Disabled" />
</div>
</template>
@ -29,7 +29,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete disabled placeholder="Disabled" />
</div>
</template>

6
doc/autocomplete/DropdownDoc.vue
View File

@ -5,7 +5,7 @@
<i>blank</i> is the default mode to send a query with an empty string whereas <i>current</i> setting sends a query with the current value of the input.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
</div>
<DocSectionCode :code="code" />
@ -23,7 +23,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
</div>
</template>
@ -48,7 +48,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
</div>
</template>

6
doc/autocomplete/FilledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
</div>
<DocSectionCode :code="code" />
@ -20,7 +20,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
</div>
</template>
@ -43,7 +43,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
</div>
</template>

6
doc/autocomplete/FloatLabelDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label>
@ -26,7 +26,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label>
@ -52,7 +52,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<FloatLabel>
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
<label for="ac">Float Label</label>

6
doc/autocomplete/ForceSelectionDoc.vue
View File

@ -5,7 +5,7 @@
<i>forceSelection</i> to enforce that input is always from the suggestion list.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
<DocSectionCode :code="code" :service="['CountryService']" />
@ -26,7 +26,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
</template>
@ -63,7 +63,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
</template>

14
doc/autocomplete/GroupDoc.vue
View File

@ -2,10 +2,10 @@
<DocSectionText v-bind="$attrs">
<p>Option groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.item.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
</div>
@ -60,7 +60,7 @@ export default {
basic: `
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
</div>
@ -69,10 +69,10 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
</div>
@ -145,10 +145,10 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<div class="flex items-center country-item">
<img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
<div>{{ slotProps.item.label }}</div>
</div>

6
doc/autocomplete/InvalidDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
</div>
<DocSectionCode :code="code" />
@ -20,7 +20,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
</div>
</template>
@ -43,7 +43,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
</div>
</template>

6
doc/autocomplete/ObjectsDoc.vue
View File

@ -5,7 +5,7 @@
Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
<DocSectionCode :code="code" :service="['CountryService']" />
@ -26,7 +26,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
</template>
@ -63,7 +63,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
</div>
</template>

6
doc/autocomplete/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
<i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps">
<div class="flex align-options-center">
@ -39,7 +39,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps">
<div class="flex align-options-center">
@ -83,7 +83,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
<template #option="slotProps">
<div class="flex align-options-center">

6
doc/autocomplete/VirtualScrollDoc.vue
View File

@ -5,7 +5,7 @@
<PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> documentation for more information about the configuration API.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
</div>
<DocSectionCode :code="code" />
@ -25,7 +25,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
</div>
</template>
@ -61,7 +61,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
</div>
</template>

6
doc/avatar/AvatarGroupDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
@ -50,7 +50,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />

6
doc/avatar/IconDoc.vue
View File

@ -3,7 +3,7 @@
<p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
@ -46,7 +46,7 @@ export default {
options: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
@ -76,7 +76,7 @@ export default {
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />

14
doc/avatar/ImageDoc.vue
View File

@ -3,7 +3,7 @@
<p>Use the <i>image</i> property to display an image as an Avatar.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
@ -18,7 +18,7 @@
<div class="flex-auto">
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
</div>
</div>
</div>
@ -37,12 +37,12 @@ export default {
<Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
`,
options: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
@ -57,7 +57,7 @@ export default {
<div class="flex-auto">
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
</div>
</div>
</div>
@ -70,7 +70,7 @@ export default {
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
@ -85,7 +85,7 @@ export default {
<div class="flex-auto">
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
</div>
</div>
</div>

6
doc/avatar/LabelDoc.vue
View File

@ -3,7 +3,7 @@
<p>A letter Avatar is defined with the <i>label</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
@ -45,7 +45,7 @@ export default {
`,
options: `
<template>
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
@ -73,7 +73,7 @@ export default {
`,
composition: `
<template>
<div class="flex flex-wrap gap-5">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />

6
doc/badge/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Text to display is defined with the <i>value</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Badge value="2"></Badge>
</div>
<DocSectionCode :code="code" />
@ -18,7 +18,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Badge value="2"></Badge>
</div>
</template>
@ -29,7 +29,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Badge value="2"></Badge>
</div>
</template>

6
doc/badge/ButtonDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Buttons have built-in support for badges to display a badge inline.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
</div>
@ -20,7 +20,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
</div>
@ -31,7 +31,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
</div>

6
doc/badge/PositionDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A Badge can be added to any element using the directive.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-4">
<div class="card flex flex-wrap justify-center gap-6">
<span v-badge="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>
@ -34,7 +34,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-4">
<div class="card flex flex-wrap justify-center gap-6">
<span v-badge="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>
@ -53,7 +53,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-4">
<div class="card flex flex-wrap justify-center gap-6">
<span v-badge="2">
<i class="pi pi-bell" style="font-size: 2rem" />
</span>

6
doc/badge/SeverityDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Severity defines the variant of a badge.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Badge value="2"></Badge>
<Badge value="6" severity="secondary"></Badge>
<Badge value="8" severity="success"></Badge>
@ -30,7 +30,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Badge value="2"></Badge>
<Badge value="6" severity="secondary"></Badge>
<Badge value="8" severity="success"></Badge>
@ -46,7 +46,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Badge value="2"></Badge>
<Badge value="6" severity="secondary"></Badge>
<Badge value="8" severity="success"></Badge>

6
doc/badge/SizeDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<div class="card flex flex-wrap justify-center items-end gap-2">
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
@ -24,7 +24,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<div class="card flex flex-wrap justify-center items-end gap-2">
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>
@ -38,7 +38,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center align-items-end gap-2">
<div class="card flex flex-wrap justify-center items-end gap-2">
<Badge value="8" size="xlarge" severity="success"></Badge>
<Badge value="6" size="large" severity="warn"></Badge>
<Badge value="4" severity="info"></Badge>

8
doc/blockui/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
</DocSectionText>
<div class="card">
<div class="mb-3">
<div class="mb-4">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>
@ -26,7 +26,7 @@ export default {
blocked: false,
code: {
basic: `
<div class="mb-3">
<div class="mb-4">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>
@ -42,7 +42,7 @@ export default {
options: `
<template>
<div class="card">
<div class="mb-3">
<div class="mb-4">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>
@ -70,7 +70,7 @@ export default {
composition: `
<template>
<div class="card">
<div class="mb-3">
<div class="mb-4">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>

6
doc/breadcrumb/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Breadcrumb requires a collection of menuitems as its <i>model</i>, the root item is defined with the <i>home</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items" />
</div>
<DocSectionCode :code="code" />
@ -22,7 +22,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items" />
</div>
</template>
@ -48,7 +48,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items" />
</div>
</template>

14
doc/breadcrumb/RouterDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@ -12,7 +12,7 @@
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span class="text-color">{{ item.label }}</span>
<span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
</a>
</template>
</Breadcrumb>
@ -40,14 +40,14 @@ export default {
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span class="text-color">{{ item.label }}</span>
<span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
</a>
</template>
</Breadcrumb>
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@ -57,7 +57,7 @@ export default {
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span class="text-color">{{ item.label }}</span>
<span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
</a>
</template>
</Breadcrumb>
@ -84,7 +84,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@ -94,7 +94,7 @@ export default {
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span class="text-color">{{ item.label }}</span>
<span class="text-surface-700 dark:text-surface-0">{{ item.label }}</span>
</a>
</template>
</Breadcrumb>

6
doc/breadcrumb/TemplateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Custom content can be placed inside the items using the <i>item</i> template. The divider between the items has its own <i>separator</i> template.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ item }">
<a class="cursor-pointer" :href="item.url">
@ -34,7 +34,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ item }">
<a class="cursor-pointer" :href="item.url">
@ -59,7 +59,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items">
<template #item="{ item }">
<a class="cursor-pointer" :href="item.url">

2
doc/button/AccessibilityDoc.vue
View File

@ -47,7 +47,7 @@ export default {
<Button class="youtube p-0" aria-label="Youtube">
<i class="pi pi-youtube px-2"></i>
<span class="px-3">Youtube</span>
<span class="px-4">Youtube</span>
</Button>
`
}

6
doc/button/BadgesDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
</div>
@ -20,7 +20,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
</div>
@ -31,7 +31,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
</div>

6
doc/button/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button label="Submit" />
</div>
<DocSectionCode :code="code" />
@ -18,7 +18,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button label="Submit" />
</div>
</template>
@ -28,7 +28,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button label="Submit" />
</div>
</template>

6
doc/button/ButtonGroupDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
@ -26,7 +26,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
@ -40,7 +40,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />

6
doc/button/DisabledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button label="Submit" disabled />
</div>
<DocSectionCode :code="code" />
@ -18,7 +18,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button label="Submit" disabled />
</div>
</template>
@ -28,7 +28,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button label="Submit" disabled />
</div>
</template>

30
doc/button/IconOnlyDoc.vue
View File

@ -3,7 +3,7 @@
<p>Buttons can have icons without labels.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
@ -13,7 +13,7 @@
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
@ -23,7 +23,7 @@
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
@ -33,7 +33,7 @@
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
@ -43,7 +43,7 @@
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3">
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" text rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
@ -105,7 +105,7 @@ export default {
options: `
<template>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
@ -115,7 +115,7 @@ export default {
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
@ -125,7 +125,7 @@ export default {
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
@ -135,7 +135,7 @@ export default {
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
@ -145,7 +145,7 @@ export default {
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3">
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" text rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
@ -163,7 +163,7 @@ export default {
composition: `
<template>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
@ -173,7 +173,7 @@ export default {
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
@ -183,7 +183,7 @@ export default {
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
@ -193,7 +193,7 @@ export default {
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3 mb-4">
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
@ -203,7 +203,7 @@ export default {
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
</div>
<div class="flex flex-wrap justify-content-center gap-3">
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" text rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />

12
doc/button/IconsDoc.vue
View File

@ -2,10 +2,10 @@
<DocSectionText v-bind="$attrs">
<p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
</DocSectionText>
<div class="card flex flex-wrap gap-3 justify-content-center">
<Button icon="pi pi-check" class="align-self-center" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" class="align-self-center" />
<Button label="Submit" icon="pi pi-check" iconPos="right" class="align-self-center" />
<div class="card flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-check" class="self-center" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" class="self-center" />
<Button label="Submit" icon="pi pi-check" iconPos="right" class="self-center" />
<Button label="Submit" icon="pi pi-check" iconPos="top" />
<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
</div>
@ -26,7 +26,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap gap-3 justify-content-center">
<div class="card flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
@ -40,7 +40,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap gap-3 justify-content-center">
<div class="card flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />

6
doc/button/LinkDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A button can be displayed as a link element when the <i>link</i> property is present. If you need to use buttons for navigation, wrap the button inside a component like <i>NuxtLink</i> or <i>router-link</i> depending on your router.</p>
</DocSectionText>
<div class="card flex justify-content-center gap-3">
<div class="card flex justify-center gap-4">
<Button label="Link" link />
<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener" tabindex="-1">
<Button label="External" />
@ -30,7 +30,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center gap-3">
<div class="card flex justify-center gap-4">
<Button label="Link" link />
<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
<Button label="External" />
@ -46,7 +46,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center gap-3">
<div class="card flex justify-center gap-4">
<Button label="Link" link />
<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
<Button label="External" />

6
doc/button/LoadingDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Busy state is controlled with the <i>loading</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
</div>
</template>
@ -44,7 +44,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
</div>
</template>

6
doc/button/OutlinedDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Outlined buttons display a border without a background initially.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
<Button label="Success" severity="success" outlined />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
<Button label="Success" severity="success" outlined />
@ -49,7 +49,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
<Button label="Success" severity="success" outlined />

6
doc/button/RaisedDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Raised buttons display a shadow to indicate elevation.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
@ -49,7 +49,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />

6
doc/button/RaisedTextDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Text buttons can be displayed as raised as well for elevation.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
<Button label="Success" severity="success" text raised />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
<Button label="Success" severity="success" text raised />
@ -49,7 +49,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
<Button label="Success" severity="success" text raised />

6
doc/button/RoundedDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Rounded buttons have a circular border radius.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
@ -49,7 +49,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />

6
doc/button/SeverityDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>The <i>severity</i> property defines the variant of a button.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
@ -49,7 +49,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />

6
doc/button/SizesDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
</DocSectionText>
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
<div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />
@ -22,7 +22,7 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
<div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />
@ -34,7 +34,7 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap align-items-center justify-content-center gap-3">
<div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />

6
doc/button/TemplateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Custom content inside a button is defined as children.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<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
@ -34,7 +34,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<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
@ -55,7 +55,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<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

6
doc/button/TextDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Text buttons are displayed as textual elements.</p>
</DocSectionText>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
<Button label="Success" severity="success" text />
@ -32,7 +32,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
<Button label="Success" severity="success" text />
@ -49,7 +49,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center flex-wrap gap-3">
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
<Button label="Success" severity="success" text />

10
doc/card/AdvancedDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
</DocSectionText>
<div class="mb-3 p-5 flex align-items-center justify-content-center">
<div class="mb-4 p-8 flex items-center justify-center">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
@ -16,7 +16,7 @@
</p>
</template>
<template #footer>
<div class="flex gap-3 mt-1">
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
@ -45,7 +45,7 @@ export default {
</p>
</template>
<template #footer>
<div class="flex gap-3 mt-1">
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
@ -67,7 +67,7 @@ export default {
</p>
</template>
<template #footer>
<div class="flex gap-3 mt-1">
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
@ -93,7 +93,7 @@ export default {
</p>
</template>
<template #footer>
<div class="flex gap-3 mt-1">
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>

2
doc/card/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
</DocSectionText>
<div class="mb-3 p-5">
<div class="mb-4 p-8">
<Card>
<template #title>Simple Card</template>
<template #content>

40
doc/carousel/BasicDoc.vue
View File

@ -6,15 +6,15 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -61,15 +61,15 @@ export default {
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -85,15 +85,15 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -165,15 +165,15 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />

40
doc/carousel/CircularDoc.vue
View File

@ -6,15 +6,15 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -61,15 +61,15 @@ export default {
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -85,15 +85,15 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -165,15 +165,15 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />

40
doc/carousel/ResponsiveDoc.vue
View File

@ -9,15 +9,15 @@
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -64,15 +64,15 @@ export default {
basic: `
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -88,15 +88,15 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -168,15 +168,15 @@ export default {
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />

48
doc/carousel/VerticalDoc.vue
View File

@ -4,17 +4,17 @@
</DocSectionText>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -37,17 +37,17 @@ export default {
products: null,
code: {
basic: `
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -61,17 +61,17 @@ export default {
options: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@ -119,17 +119,17 @@ export default {
composition: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />

6
doc/cascadeselect/BasicDoc.vue
View File

@ -5,7 +5,7 @@
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.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<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" />
</div>
<DocSectionCode :code="code" />
@ -97,7 +97,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<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" />
</div>
@ -189,7 +189,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<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" />
</div>

6
doc/cascadeselect/DisabledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
</div>
<DocSectionCode :code="code" />
@ -18,7 +18,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
</div>
</template>
@ -29,7 +29,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
</div>
</template>

6
doc/cascadeselect/FilledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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-content-center">
<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" />
</div>
<DocSectionCode :code="code" />
@ -94,7 +94,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<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" />
</div>
@ -186,7 +186,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<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" />
</div>

6
doc/cascadeselect/FloatLabelDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<label for="cs-city">City</label>
@ -100,7 +100,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@ -195,7 +195,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />

6
doc/cascadeselect/InvalidDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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-content-center">
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>
<DocSectionCode :code="code" />
@ -94,7 +94,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>
@ -186,7 +186,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>

6
doc/cascadeselect/LoadingStateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Loading state can be used <i>loading</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
</div>
<DocSectionCode :code="code" />
@ -18,7 +18,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
</div>
</template>
@ -29,7 +29,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
</div>
</template>

14
doc/cascadeselect/TemplateDoc.vue
View File

@ -5,10 +5,10 @@
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.
</p>
</DocSectionText>
<div class="card flex justify-content-center">
<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">
<template #option="slotProps">
<div class="flex align-items-center">
<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" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
@ -104,7 +104,7 @@ export default {
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="flex align-items-center">
<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" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
@ -115,11 +115,11 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<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">
<template #option="slotProps">
<div class="flex align-items-center">
<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" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
@ -216,11 +216,11 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<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">
<template #option="slotProps">
<div class="flex align-items-center">
<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" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>

8
doc/chart/ComboDoc.vue
View File

@ -3,7 +3,7 @@
<p>Different chart types can be combined in the same graph usign the <i>type</i> option of a dataset.</p>
</DocSectionText>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -116,7 +116,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

14
doc/chart/DoughnutDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>
@ -78,8 +78,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>

8
doc/chart/HorizontalBarDoc.vue
View File

@ -3,7 +3,7 @@
<p>A bar chart is rendered horizontally when <i>indexAxis</i> option is set as <i>y</i>.</p>
</DocSectionText>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -111,7 +111,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

8
doc/chart/LineDoc.vue
View File

@ -3,7 +3,7 @@
<p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
</DocSectionText>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -107,7 +107,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

8
doc/chart/LineStylesDoc.vue
View File

@ -3,7 +3,7 @@
<p>Various styles of a line series can be customized to display customizations like an area chart.</p>
</DocSectionText>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -116,7 +116,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

8
doc/chart/MultiAxisDoc.vue
View File

@ -3,7 +3,7 @@
<p>Multiple axes can be added using the <i>scales</i> option.</p>
</DocSectionText>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -125,7 +125,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

14
doc/chart/PieChartDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>
@ -76,8 +76,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>

14
doc/chart/PolarAreaDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>
@ -89,8 +89,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>

14
doc/chart/RadarDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>
@ -97,8 +97,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
<div class="card flex justify-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
</div>
</template>

8
doc/chart/StackedBarDoc.vue
View File

@ -3,7 +3,7 @@
<p>Bars can be stacked on top of each other when <i>stacked</i> option of a scale is enabled.</p>
</DocSectionText>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -117,7 +117,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

8
doc/chart/VerticalBarDoc.vue
View File

@ -3,7 +3,7 @@
<p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
</DocSectionText>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
</template>
@ -19,12 +19,12 @@ export default {
chartOptions: null,
code: {
basic: `
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
`,
options: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>
@ -110,7 +110,7 @@ export default {
composition: `
<template>
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
</div>
</template>

6
doc/checkbox/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Binary checkbox is used as a controlled input with <i>v-model</i> and <i>binary</i> properties.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" :binary="true" />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" :binary="true" />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" :binary="true" />
</div>
</template>

6
doc/checkbox/DisabledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" disabled />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" disabled />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" disabled />
</div>
</template>

20
doc/checkbox/DynamicDoc.vue
View File

@ -2,9 +2,9 @@
<DocSectionText v-bind="$attrs">
<p>Checkboxes can be generated using a list of values.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-3">
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
</div>
@ -26,16 +26,16 @@ export default {
],
code: {
basic: `
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
<div v-for="category of categories" :key="category.key" class="flex items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-3">
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
@ -61,9 +61,9 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-3">
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>

6
doc/checkbox/FilledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
</template>

40
doc/checkbox/GroupDoc.vue
View File

@ -2,20 +2,20 @@
<DocSectionText v-bind="$attrs">
<p>Multiple checkboxes can be grouped together.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-3">
<div class="flex align-items-center">
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
@ -30,20 +30,20 @@ export default {
pizza: null,
code: {
basic: `
<div class="card flex flex-wrap justify-content-center gap-3">
<div class="flex align-items-center">
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
@ -51,20 +51,20 @@ export default {
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-3">
<div class="flex align-items-center">
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
@ -83,20 +83,20 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-3">
<div class="flex align-items-center">
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex align-items-center">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>

6
doc/checkbox/IndeterminateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" indeterminate binary />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" indeterminate binary />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" indeterminate binary />
</div>
</template>

6
doc/checkbox/InvalidDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<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-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" invalid binary />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" invalid binary />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Checkbox v-model="checked" invalid binary />
</div>
</template>

16
doc/chip/TemplateDoc.vue
View File

@ -3,8 +3,8 @@
<p>The default slot allows displaying custom content inside a chip.</p>
</DocSectionText>
<div class="card">
<Chip class="py-0 pl-0 pr-3">
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
<Chip class="py-0 pl-0 pr-4">
<span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
<span class="ml-2 font-medium">PRIME</span>
</Chip>
</div>
@ -17,16 +17,16 @@ export default {
return {
code: {
basic: `
<Chip class="py-0 pl-0 pr-3">
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
<Chip class="py-0 pl-0 pr-4">
<span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
<span class="ml-2 font-medium">PRIME</span>
</Chip>
`,
options: `
<template>
<div class="card">
<Chip class="py-0 pl-0 pr-3">
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
<Chip class="py-0 pl-0 pr-4">
<span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
<span class="ml-2 font-medium">PRIME</span>
</Chip>
</div>
@ -39,8 +39,8 @@ export default {
composition: `
<template>
<div class="card">
<Chip class="py-0 pl-0 pr-3">
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
<Chip class="py-0 pl-0 pr-4">
<span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
<span class="ml-2 font-medium">PRIME</span>
</Chip>
</div>

2
doc/colorpicker/AccessibilityDoc.vue
View File

@ -84,7 +84,7 @@
<tbody>
<tr>
<td>
<span class="inline-flex flex-column">
<span class="inline-flex flex-col">
<i class="mb-1">up arrow</i>
<i>down arrow</i>
</span>

6
doc/colorpicker/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>ColorPicker is used as a controlled input with <i>v-model</i> property.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" />
</div>
</template>

6
doc/colorpicker/DisabledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" disabled />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" disabled />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" disabled />
</div>
</template>

48
doc/colorpicker/FormatDoc.vue
View File

@ -2,20 +2,20 @@
<DocSectionText v-bind="$attrs">
<p>Default color format to use in value binding is <i>hex</i> and other possible values can be <i>rgb</i> and <i>hsb</i> using the <i>format</i> property.</p>
</DocSectionText>
<div class="card flex flex-wrap gap-3">
<div class="flex-1 flex flex-column align-items-center">
<div class="card flex flex-wrap gap-4">
<div class="flex-1 flex flex-col items-center">
<label for="cp-hex" class="font-bold block mb-2"> HEX </label>
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<span>{{ colorHEX }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center">
<div class="flex-1 flex flex-col items-center">
<label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<span>{{ JSON.stringify(colorRGB) }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center">
<div class="flex-1 flex flex-col items-center">
<label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
<span>{{ JSON.stringify(colorHSB) }}</span>
</div>
</div>
@ -31,26 +31,26 @@ export default {
colorHSB: { h: 239, s: 59, b: 95 },
code: {
basic: `
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
`,
options: `
<template>
<div class="card flex flex-wrap gap-3">
<div class="flex-1 flex flex-column align-items-center">
<div class="card flex flex-wrap gap-4">
<div class="flex-1 flex flex-col items-center">
<label for="cp-hex" class="font-bold block mb-2"> HEX </label>
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<span>{{ colorHEX }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center">
<div class="flex-1 flex flex-col items-center">
<label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<span>{{ JSON.stringify(colorRGB) }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center">
<div class="flex-1 flex flex-col items-center">
<label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
<span>{{ JSON.stringify(colorHSB) }}</span>
</div>
</div>
@ -70,20 +70,20 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap gap-3">
<div class="flex-1 flex flex-column align-items-center">
<div class="card flex flex-wrap gap-4">
<div class="flex-1 flex flex-col items-center">
<label for="cp-hex" class="font-bold block mb-2"> HEX </label>
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<span>{{ colorHEX }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center">
<div class="flex-1 flex flex-col items-center">
<label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<span>{{ JSON.stringify(colorRGB) }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center">
<div class="flex-1 flex flex-col items-center">
<label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
<span>{{ JSON.stringify(colorHSB) }}</span>
</div>
</div>

6
doc/colorpicker/InlineDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>ColorPicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" inline />
</div>
<DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" inline />
</div>
</template>
@ -36,7 +36,7 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ColorPicker v-model="color" inline />
</div>
</template>

2
doc/configuration/PTDoc.vue
View File

@ -18,7 +18,7 @@ const app = createApp(App);
app.use(PrimeVue, {
pt: {
slider: {
handle: { class: 'bg-primary' }
handle: { class: 'bg-primary text-primary-contrast' }
}
}
});

6
doc/confirmdialog/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
</DocSectionText>
<ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1()" label="Save" outlined></Button>
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
</div>
@ -24,7 +24,7 @@ export default {
<template>
<Toast />
<ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1()" label="Save" outlined></Button>
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
</div>
@ -84,7 +84,7 @@ export default {
<template>
<Toast />
<ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1()" label="Save" outlined></Button>
<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
</div>

50
doc/confirmdialog/HeadlessDoc.vue
View File

@ -4,20 +4,20 @@
</DocSectionText>
<ConfirmDialog group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
<div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
<div class="flex items-center gap-2 mt-6">
<Button label="Save" @click="acceptCallback" class="w-32"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="requireConfirmation()" label="Save"></Button>
</div>
<DocSectionCode :code="code" />
@ -31,15 +31,15 @@ export default {
basic: `
<ConfirmDialog group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
<div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
<div class="flex items-center gap-2 mt-6">
<Button label="Save" @click="acceptCallback" class="w-32"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
</div>
</div>
</template>
@ -50,20 +50,20 @@ export default {
<template>
<ConfirmDialog group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
<div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
<div class="flex items-center gap-2 mt-6">
<Button label="Save" @click="acceptCallback" class="w-32"></Button>
<Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="requireConfirmation()" label="Save"></Button>
</div>
<Toast />
@ -93,20 +93,20 @@ export default {
<template>
<ConfirmDialog group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="flex flex-column align-items-center p-5 surface-overlay border-round">
<div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
<div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
<i class="pi pi-question text-5xl"></i>
</div>
<span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
<span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
<p class="mb-0">{{ message.message }}</p>
<div class="flex align-items-center gap-2 mt-4">
<div class="flex items-center gap-2 mt-6">
<Button label="Save" @click="acceptCallback"></Button>
<Button label="Cancel" outlined @click="rejectCallback"></Button>
</div>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="requireConfirmation()" label="Save"></Button>
</div>
<Toast />

24
doc/confirmdialog/PositionDoc.vue
View File

@ -4,16 +4,16 @@
</DocSectionText>
<ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<div class="flex flex-wrap justify-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
@ -29,16 +29,16 @@ export default {
code: {
basic: `
<ConfirmDialog group="positioned"></ConfirmDialog>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<div class="flex flex-wrap justify-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
@ -49,16 +49,16 @@ export default {
<Toast />
<ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<div class="flex flex-wrap justify-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
@ -103,16 +103,16 @@ export default {
<Toast />
<ConfirmDialog group="positioned"></ConfirmDialog>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-3">
<div class="flex flex-wrap justify-center gap-2 mb-4">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<div class="flex flex-wrap justify-center gap-2">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>

14
doc/confirmdialog/TemplateDoc.vue
View File

@ -4,13 +4,13 @@
</DocSectionText>
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="showTemplate()" label="Save"></Button>
</div>
<DocSectionCode :code="code" />
@ -24,7 +24,7 @@ export default {
basic: `
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
@ -36,13 +36,13 @@ export default {
<template>
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
<i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="showTemplate()" label="Save"></Button>
</div>
<Toast />
@ -84,13 +84,13 @@ export default {
<template>
<ConfirmDialog group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmDialog>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="showTemplate()" label="Save"></Button>
</div>
<Toast />

6
doc/confirmpopup/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
</DocSectionText>
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1($event)" label="Save" outlined></Button>
<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
</div>
@ -24,7 +24,7 @@ export default {
<template>
<Toast />
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1($event)" label="Save" outlined></Button>
<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
</div>
@ -84,7 +84,7 @@ export default {
<template>
<Toast />
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1($event)" label="Save" outlined></Button>
<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
</div>

22
doc/confirmpopup/HeadlessDoc.vue
View File

@ -4,16 +4,16 @@
</DocSectionText>
<ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="border-round p-3">
<div class="rounded p-4">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<div class="flex items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="requireConfirmation($event)" label="Save"></Button>
</div>
<DocSectionCode :code="code" />
@ -27,9 +27,9 @@ export default {
basic: `
<ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="border-round p-3">
<div class="rounded p-4">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<div class="flex items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div>
@ -43,16 +43,16 @@ export default {
<Toast />
<ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="border-round p-3">
<div class="rounded p-4">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<div class="flex items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="requireConfirmation($event)" label="Save"></Button>
</div>
</template>
@ -82,16 +82,16 @@ export default {
<Toast />
<ConfirmPopup group="headless">
<template #container="{ message, acceptCallback, rejectCallback }">
<div class="border-round p-3">
<div class="rounded p-4">
<span>{{ message.message }}</span>
<div class="flex align-items-center gap-2 mt-3">
<div class="flex items-center gap-2 mt-4">
<Button label="Save" @click="acceptCallback" size="small"></Button>
<Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
</div>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="requireConfirmation($event)" label="Save"></Button>
</div>
</template>

14
doc/confirmpopup/TemplateDoc.vue
View File

@ -4,13 +4,13 @@
</DocSectionText>
<ConfirmPopup group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="showTemplate($event)" label="Save"></Button>
</div>
<DocSectionCode :code="code" />
@ -24,7 +24,7 @@ export default {
basic: `
<ConfirmPopup group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
@ -37,13 +37,13 @@ export default {
<Toast />
<ConfirmPopup group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="showTemplate($event)" label="Save"></Button>
</div>
</template>
@ -83,13 +83,13 @@ export default {
<Toast />
<ConfirmPopup group="templating">
<template #message="slotProps">
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
<div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
<i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
<p>{{ slotProps.message.message }}</p>
</div>
</template>
</ConfirmPopup>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<Button @click="showTemplate($event)" label="Save"></Button>
</div>
</template>

12
doc/contextmenu/BasicDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p>
</DocSectionText>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-30rem border-round shadow-4" @contextmenu="onImageRightClick" aria-haspopup="true" />
<div class="card flex md:justify-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
</div>
<DocSectionCode :code="code" />
@ -19,13 +19,13 @@ export default {
],
code: {
basic: `
<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-30rem border-round shadow-4" @contextmenu="onImageRightClick" aria-haspopup="true" />
<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
`,
options: `
<template>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-30rem border-round shadow-4" aria-haspopup="true" />
<div class="card flex md:justify-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
</div>
</template>
@ -51,7 +51,7 @@ export default {
composition: `
<template>
<div class="card">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-30rem border-round shadow-4" aria-haspopup="true" />
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" @contextmenu="onImageRightClick" class="w-full md:w-[30rem] rounded shadow-lg" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
</div>
</template>

30
doc/contextmenu/CommandDoc.vue
View File

@ -2,15 +2,15 @@
<DocSectionText v-bind="$attrs">
<p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
</DocSectionText>
<div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<div class="card flex md:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="user in users"
:key="user.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)"
>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" style="width: 32px" />
<span class="font-bold">{{ user.name }}</span>
</div>
@ -69,14 +69,14 @@ export default {
],
code: {
basic: `
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="user in users"
:key="user.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)"
>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="user.name" :src="\`/images/avatar/\${user.image}\`" style="width: 32px" />
<span class="font-bold">{{ user.name }}</span>
</div>
@ -88,15 +88,15 @@ export default {
`,
options: `
<template>
<div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<div class="card flex md:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="user in users"
:key="user.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)"
>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
<span class="font-bold">{{ user.name }}</span>
</div>
@ -171,15 +171,15 @@ export default {
`,
composition: `
<template>
<div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<div class="card flex md:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="user in users"
:key="user.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)"
>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
<span class="font-bold">{{ user.name }}</span>
</div>

14
doc/contextmenu/RouterDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
<div class="card flex justify-center">
<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
<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"
@ -58,7 +58,7 @@ export default {
],
code: {
basic: `
<span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
<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(--text-color)" />
@ -81,8 +81,8 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
<div class="card flex justify-center">
<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
<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"
@ -146,8 +146,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
<div class="card flex justify-center">
<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
<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"

78
doc/contextmenu/TemplateDoc.vue
View File

@ -2,34 +2,34 @@
<DocSectionText v-bind="$attrs">
<p>ContextMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
</DocSectionText>
<div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<div class="card flex md:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="product in products"
:key="product.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1">
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900 ml-5">${{ product.price }}</span>
<span class="font-bold text-surface-900 ml-8">${{ product.price }}</span>
</div>
</li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
<template #item="{ item, props }">
<a v-ripple class="flex align-items-center" v-bind="props.action">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a>
</template>
@ -79,33 +79,33 @@ export default {
],
code: {
basic: `
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="product in products"
:key="product.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1">
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900 ml-5">\${{ product.price }}</span>
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
</div>
</li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
<template #item="{ item, props }">
<a v-ripple class="flex align-items-center" v-bind="props.action">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a>
</template>
@ -113,34 +113,34 @@ export default {
`,
options: `
<template>
<div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
<div class="card flex md:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
<li
v-for="product in products"
:key="product.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1">
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900 ml-5">\${{ product.price }}</span>
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
</div>
</li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
<template #item="{ item, props }">
<a v-ripple class="flex align-items-center" v-bind="props.action">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a>
</template>
@ -203,34 +203,34 @@ export default {
`,
composition: `
<template>
<div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem" @hide="selectedId = null">
<div class="card flex md:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]" @hide="selectedId = null">
<li
v-for="product in products"
:key="product.id"
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
@contextmenu="onRightClick($event, product.id)"
>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-column gap-1">
<div class="flex flex-wrap p-2 items-center gap-4">
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
<div class="flex-1 flex flex-col gap-1">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900 ml-5">\${{ product.price }}</span>
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
</div>
</li>
</ul>
<ContextMenu ref="menu" :model="items">
<template #item="{ item, props }">
<a v-ripple class="flex align-items-center" v-bind="props.action">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
</a>
</template>

12
doc/datatable/ConditionalStyleDoc.vue
View File

@ -75,7 +75,7 @@ export default {
},
methods: {
rowClass(data) {
return [{ 'bg-primary': data.category === 'Fitness' }];
return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }];
},
rowStyle(data) {
if (data.quantity === 0) {
@ -84,7 +84,7 @@ export default {
},
stockClass(data) {
return [
'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm',
{
'bg-red-100 text-red-900': data.quantity === 0,
'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
@ -125,7 +125,7 @@ onMounted(() => {
const products = ref();
const rowClass = (data) => {
return [{ 'bg-primary': data.category === 'Fitness' }];
return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }];
};
const rowStyle = (data) => {
if (data.quantity === 0) {
@ -134,7 +134,7 @@ const rowStyle = (data) => {
};
const stockClass = (data) => {
return [
'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm',
{
'bg-red-100 text-red-900': data.quantity === 0,
'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,
@ -167,7 +167,7 @@ const stockClass = (data) => {
ProductService.getProductsSmall().then((data) => (this.products = data));
},
rowClass(data) {
return [{ 'bg-primary': data.category === 'Fitness' }];
return [{ 'bg-primary text-primary-contrast': data.category === 'Fitness' }];
},
rowStyle(data) {
if (data.quantity === 0) {
@ -176,7 +176,7 @@ const stockClass = (data) => {
},
stockClass(data) {
return [
'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
'rounded-full w-8 h-8 inline-flex font-bold justify-center items-center text-sm',
{
'bg-red-100 text-red-900': data.quantity === 0,
'bg-blue-100 text-blue-900': data.quantity > 0 && data.quantity < 10,

16
doc/datatable/LazyLoadDoc.vue
View File

@ -43,7 +43,7 @@
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -59,7 +59,7 @@
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -113,7 +113,7 @@ export default {
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -129,7 +129,7 @@ export default {
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -155,7 +155,7 @@ export default {
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -171,7 +171,7 @@ export default {
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -289,7 +289,7 @@ export default {
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -305,7 +305,7 @@ export default {
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>

24
doc/datatable/RowExpansionDoc.vue
View File

@ -13,7 +13,7 @@
<div class="card">
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<div class="flex flex-wrap justify-content-end gap-2">
<div class="flex flex-wrap justify-end gap-2">
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
@ -22,7 +22,7 @@
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-4" width="64" />
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
</template>
</Column>
<Column field="price" header="Price">
@ -42,7 +42,7 @@
</template>
</Column>
<template #expansion="slotProps">
<div class="p-3">
<div class="p-4">
<h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders">
<Column field="id" header="Id" sortable></Column>
@ -85,7 +85,7 @@ export default {
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<div class="flex flex-wrap justify-content-end gap-2">
<div class="flex flex-wrap justify-end gap-2">
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
@ -94,7 +94,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-4" width="64" />
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
</template>
</Column>
<Column field="price" header="Price">
@ -114,7 +114,7 @@ export default {
</template>
</Column>
<template #expansion="slotProps">
<div class="p-3">
<div class="p-4">
<h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders">
<Column field="id" header="Id" sortable></Column>
@ -146,7 +146,7 @@ export default {
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<div class="flex flex-wrap justify-content-end gap-2">
<div class="flex flex-wrap justify-end gap-2">
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
@ -155,7 +155,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-4" width="64" />
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
</template>
</Column>
<Column field="price" header="Price">
@ -175,7 +175,7 @@ export default {
</template>
</Column>
<template #expansion="slotProps">
<div class="p-3">
<div class="p-4">
<h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders" >
<Column field="id" header="Id" sortable></Column>
@ -276,7 +276,7 @@ export default {
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
<template #header>
<div class="flex flex-wrap justify-content-end gap-2">
<div class="flex flex-wrap justify-end gap-2">
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
@ -285,7 +285,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-4" width="64" />
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
</template>
</Column>
<Column field="price" header="Price">
@ -305,7 +305,7 @@ export default {
</template>
</Column>
<template #expansion="slotProps">
<div class="p-3">
<div class="p-4">
<h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders">
<Column field="id" header="Id" sortable></Column>

6
doc/datatable/SizeDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<div class="flex justify-content-center mb-4">
<div class="flex justify-center mb-6">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
</div>
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
@ -44,7 +44,7 @@ export default {
options: `
<template>
<div class="card">
<div class="flex justify-content-center mb-4">
<div class="flex justify-center mb-6">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
</div>
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
@ -80,7 +80,7 @@ export default {
composition: `
<template>
<div class="card">
<div class="flex justify-content-center mb-4">
<div class="flex justify-center mb-6">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
</div>
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">

24
doc/datatable/StatefulDoc.vue
View File

@ -37,7 +37,7 @@
</Column>
<Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -48,7 +48,7 @@
</Column>
<Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -56,7 +56,7 @@
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -126,7 +126,7 @@ export default {
</Column>
<Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -137,7 +137,7 @@ export default {
</Column>
<Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -145,7 +145,7 @@ export default {
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -189,7 +189,7 @@ export default {
</Column>
<Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -200,7 +200,7 @@ export default {
</Column>
<Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -208,7 +208,7 @@ export default {
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -317,7 +317,7 @@ export default {
</Column>
<Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -328,7 +328,7 @@ export default {
</Column>
<Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -336,7 +336,7 @@ export default {
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>

24
doc/datatable/TemplateDoc.vue
View File

@ -6,15 +6,15 @@
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span>
<div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised />
</div>
</template>
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-6rem border-round" />
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-24 rounded" />
</template>
</Column>
<Column field="price" header="Price">
@ -51,15 +51,15 @@ export default {
basic: `
<DataTable :value="products" tableStyle="min-width: 50rem">
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span>
<div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised />
</div>
</template>
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
</template>
</Column>
<Column field="price" header="Price">
@ -86,15 +86,15 @@ export default {
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span>
<div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised />
</div>
</template>
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
</template>
</Column>
<Column field="price" header="Price">
@ -158,15 +158,15 @@ export default {
<div class="card">
<DataTable :value="products" tableStyle="min-width: 50rem">
<template #header>
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
<span class="text-xl text-900 font-bold">Products</span>
<div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised />
</div>
</template>
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-24 rounded" />
</template>
</Column>
<Column field="price" header="Price">

56
doc/datatable/filter/AdvancedFilterDoc.vue
View File

@ -6,7 +6,7 @@
<div class="card">
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<div class="flex justify-content-between">
<div class="flex justify-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField>
<InputIcon>
@ -28,7 +28,7 @@
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -43,12 +43,12 @@
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template>
<template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
<div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -56,7 +56,7 @@
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -97,8 +97,8 @@
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-between px-2">
<Slider v-model="filterModel.value" range class="m-4"></Slider>
<div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>
@ -147,7 +147,7 @@ export default {
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<div class="flex justify-content-between">
<div class="flex justify-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField>
<InputIcon>
@ -169,7 +169,7 @@ export default {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -184,12 +184,12 @@ export default {
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template>
<template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
<div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -197,7 +197,7 @@ export default {
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -238,8 +238,8 @@ export default {
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-between px-2">
<Slider v-model="filterModel.value" range class="m-4"></Slider>
<div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>
@ -262,7 +262,7 @@ export default {
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<div class="flex justify-content-between">
<div class="flex justify-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField>
<InputIcon>
@ -284,7 +284,7 @@ export default {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -299,12 +299,12 @@ export default {
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template>
<template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
<div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -312,7 +312,7 @@ export default {
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -353,8 +353,8 @@ export default {
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-between px-2">
<Slider v-model="filterModel.value" range class="m-4"></Slider>
<div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>
@ -469,7 +469,7 @@ export default {
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<div class="flex justify-content-between">
<div class="flex justify-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField>
<InputIcon>
@ -491,7 +491,7 @@ export default {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
@ -506,12 +506,12 @@ export default {
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template>
<template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
<div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
@ -519,7 +519,7 @@ export default {
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
@ -560,8 +560,8 @@ export default {
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex align-items-center justify-content-between px-2">
<Slider v-model="filterModel.value" range class="m-4"></Slider>
<div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>

Some files were not shown because too many files have changed in this diff Show More