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

Fixed font color issues

pull/5806/head
Cagatay Civici 2024-05-21 14:17:35 +03:00
parent a1134898b7
commit a012c060a3
15 changed files with 186 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/contextmenu/TemplateDoc.vue
View File

@ -19,7 +19,7 @@
<span>{{ product.category }}</span> <span>{{ product.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold text-surface-900 ml-8">${{ product.price }}</span> <span class="font-bold ml-8">${{ product.price }}</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -95,7 +95,7 @@ export default {
<span>{{ product.category }}</span> <span>{{ product.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span> <span class="font-bold ml-8">\${{ product.price }}</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -130,7 +130,7 @@ export default {
<span>{{ product.category }}</span> <span>{{ product.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span> <span class="font-bold ml-8">\${{ product.price }}</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -220,7 +220,7 @@ export default {
<span>{{ product.category }}</span> <span>{{ product.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span> <span class="font-bold ml-8">\${{ product.price }}</span>
</div> </div>
</li> </li>
</ul> </ul>

8
doc/datatable/TemplateDoc.vue
View File

@ -7,7 +7,7 @@
<DataTable :value="products" tableStyle="min-width: 50rem"> <DataTable :value="products" tableStyle="min-width: 50rem">
<template #header> <template #header>
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span> <span class="text-xl font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
@ -52,7 +52,7 @@ export default {
<DataTable :value="products" tableStyle="min-width: 50rem"> <DataTable :value="products" tableStyle="min-width: 50rem">
<template #header> <template #header>
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span> <span class="text-xl font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
@ -87,7 +87,7 @@ export default {
<DataTable :value="products" tableStyle="min-width: 50rem"> <DataTable :value="products" tableStyle="min-width: 50rem">
<template #header> <template #header>
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span> <span class="text-xl font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>
@ -159,7 +159,7 @@ export default {
<DataTable :value="products" tableStyle="min-width: 50rem"> <DataTable :value="products" tableStyle="min-width: 50rem">
<template #header> <template #header>
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center justify-between gap-2">
<span class="text-xl text-surface-900 font-bold">Products</span> <span class="text-xl font-bold">Products</span>
<Button icon="pi pi-refresh" rounded raised /> <Button icon="pi pi-refresh" rounded raised />
</div> </div>
</template> </template>

16
doc/dataview/BasicDoc.vue
View File

@ -16,7 +16,7 @@
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">${{ item.price }}</span> <span class="text-xl font-semibold">${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -64,7 +64,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -74,7 +74,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -103,7 +103,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -113,7 +113,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -176,7 +176,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -186,7 +186,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>

32
doc/dataview/LayoutDoc.vue
View File

@ -26,7 +26,7 @@
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">${{ item.price }}</span> <span class="text-xl font-semibold">${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -62,7 +62,7 @@
<div class="flex flex-row justify-between items-start gap-2"> <div class="flex flex-row justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div> <div class="text-lg font-medium mt-1">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -72,7 +72,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col gap-6 mt-6"> <div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold text-surface-900">${{ item.price }}</span> <span class="text-2xl font-semibold">${{ item.price }}</span>
<div class="flex gap-2"> <div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
@ -122,7 +122,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -132,7 +132,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -158,7 +158,7 @@ export default {
<div class="flex flex-row justify-between items-start gap-2"> <div class="flex flex-row justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div> <div class="text-lg font-medium mt-1">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -168,7 +168,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col gap-6 mt-6"> <div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<div class="flex gap-2"> <div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
@ -207,7 +207,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -217,7 +217,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -243,7 +243,7 @@ export default {
<div class="flex flex-row justify-between items-start gap-2"> <div class="flex flex-row justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div> <div class="text-lg font-medium mt-1">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -253,7 +253,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col gap-6 mt-6"> <div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<div class="flex gap-2"> <div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
@ -328,7 +328,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -338,7 +338,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -364,7 +364,7 @@ export default {
<div class="flex flex-row justify-between items-start gap-2"> <div class="flex flex-row justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div> <div class="text-lg font-medium mt-1">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -374,7 +374,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col gap-6 mt-6"> <div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-2xl font-semibold">\${{ item.price }}</span>
<div class="flex gap-2"> <div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>

16
doc/dataview/PaginationDoc.vue
View File

@ -16,7 +16,7 @@
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">${{ item.price }}</span> <span class="text-xl font-semibold">${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -64,7 +64,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -74,7 +74,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -103,7 +103,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -113,7 +113,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -176,7 +176,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -186,7 +186,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>

16
doc/dataview/SortingDoc.vue
View File

@ -19,7 +19,7 @@
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">${{ item.price }}</span> <span class="text-xl font-semibold">${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -77,7 +77,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -87,7 +87,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -119,7 +119,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -129,7 +129,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@ -216,7 +216,7 @@ export default {
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span> <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium mt-2">{{ item.name }}</div>
</div> </div>
<div class="bg-surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 p-1" style="border-radius: 30px">
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@ -226,7 +226,7 @@ export default {
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-8"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span> <span class="text-xl font-semibold">\${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>

136
doc/drawer/HeadlessDoc.vue
View File

@ -36,20 +36,20 @@
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">FAVORITES</span> <span class="font-medium">FAVORITES</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-home mr-2"></i> <i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span> <span class="font-medium">Dashboard</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-bookmark mr-2"></i> <i class="pi pi-bookmark mr-2"></i>
<span class="font-medium">Bookmarks</span> <span class="font-medium">Bookmarks</span>
</a> </a>
@ -64,7 +64,7 @@
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Reports</span> <span class="font-medium">Reports</span>
@ -81,7 +81,7 @@
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Revenue</span> <span class="font-medium">Revenue</span>
@ -89,13 +89,13 @@
</a> </a>
<ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out"> <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-table mr-2"></i> <i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span> <span class="font-medium">View</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-search mr-2"></i> <i class="pi pi-search mr-2"></i>
<span class="font-medium">Search</span> <span class="font-medium">Search</span>
</a> </a>
@ -103,7 +103,7 @@
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Expenses</span> <span class="font-medium">Expenses</span>
</a> </a>
@ -111,26 +111,26 @@
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-users mr-2"></i> <i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span> <span class="font-medium">Team</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-comments mr-2"></i> <i class="pi pi-comments mr-2"></i>
<span class="font-medium">Messages</span> <span class="font-medium">Messages</span>
<span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span> <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span> <span class="font-medium">Calendar</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -149,26 +149,26 @@
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">APPLICATION</span> <span class="font-medium">APPLICATION</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-folder mr-2"></i> <i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span> <span class="font-medium">Projects</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-bar mr-2"></i> <i class="pi pi-chart-bar mr-2"></i>
<span class="font-medium">Performance</span> <span class="font-medium">Performance</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -179,7 +179,7 @@
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" /> <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
<a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</a> </a>
@ -226,20 +226,20 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">FAVORITES</span> <span class="font-medium">FAVORITES</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-home mr-2"></i> <i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span> <span class="font-medium">Dashboard</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-bookmark mr-2"></i> <i class="pi pi-bookmark mr-2"></i>
<span class="font-medium">Bookmarks</span> <span class="font-medium">Bookmarks</span>
</a> </a>
@ -254,7 +254,7 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Reports</span> <span class="font-medium">Reports</span>
@ -271,7 +271,7 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Revenue</span> <span class="font-medium">Revenue</span>
@ -279,13 +279,13 @@ export default {
</a> </a>
<ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out"> <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-table mr-2"></i> <i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span> <span class="font-medium">View</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-search mr-2"></i> <i class="pi pi-search mr-2"></i>
<span class="font-medium">Search</span> <span class="font-medium">Search</span>
</a> </a>
@ -293,7 +293,7 @@ export default {
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Expenses</span> <span class="font-medium">Expenses</span>
</a> </a>
@ -301,26 +301,26 @@ export default {
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-users mr-2"></i> <i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span> <span class="font-medium">Team</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-comments mr-2"></i> <i class="pi pi-comments mr-2"></i>
<span class="font-medium">Messages</span> <span class="font-medium">Messages</span>
<span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span> <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span> <span class="font-medium">Calendar</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -339,26 +339,26 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">APPLICATION</span> <span class="font-medium">APPLICATION</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-folder mr-2"></i> <i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span> <span class="font-medium">Projects</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-bar mr-2"></i> <i class="pi pi-chart-bar mr-2"></i>
<span class="font-medium">Performance</span> <span class="font-medium">Performance</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -369,7 +369,7 @@ export default {
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" /> <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
<a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</a> </a>
@ -415,20 +415,20 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">FAVORITES</span> <span class="font-medium">FAVORITES</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-home mr-2"></i> <i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span> <span class="font-medium">Dashboard</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-bookmark mr-2"></i> <i class="pi pi-bookmark mr-2"></i>
<span class="font-medium">Bookmarks</span> <span class="font-medium">Bookmarks</span>
</a> </a>
@ -443,7 +443,7 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Reports</span> <span class="font-medium">Reports</span>
@ -460,7 +460,7 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Revenue</span> <span class="font-medium">Revenue</span>
@ -468,13 +468,13 @@ export default {
</a> </a>
<ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out"> <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-table mr-2"></i> <i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span> <span class="font-medium">View</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-search mr-2"></i> <i class="pi pi-search mr-2"></i>
<span class="font-medium">Search</span> <span class="font-medium">Search</span>
</a> </a>
@ -482,7 +482,7 @@ export default {
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Expenses</span> <span class="font-medium">Expenses</span>
</a> </a>
@ -490,26 +490,26 @@ export default {
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-users mr-2"></i> <i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span> <span class="font-medium">Team</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-comments mr-2"></i> <i class="pi pi-comments mr-2"></i>
<span class="font-medium">Messages</span> <span class="font-medium">Messages</span>
<span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span> <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span> <span class="font-medium">Calendar</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -528,26 +528,26 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">APPLICATION</span> <span class="font-medium">APPLICATION</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-folder mr-2"></i> <i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span> <span class="font-medium">Projects</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-bar mr-2"></i> <i class="pi pi-chart-bar mr-2"></i>
<span class="font-medium">Performance</span> <span class="font-medium">Performance</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -558,7 +558,7 @@ export default {
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" /> <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
<a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</a> </a>
@ -616,20 +616,20 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">FAVORITES</span> <span class="font-medium">FAVORITES</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-home mr-2"></i> <i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span> <span class="font-medium">Dashboard</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-bookmark mr-2"></i> <i class="pi pi-bookmark mr-2"></i>
<span class="font-medium">Bookmarks</span> <span class="font-medium">Bookmarks</span>
</a> </a>
@ -644,7 +644,7 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Reports</span> <span class="font-medium">Reports</span>
@ -661,7 +661,7 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple" class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
> >
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Revenue</span> <span class="font-medium">Revenue</span>
@ -669,13 +669,13 @@ export default {
</a> </a>
<ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out"> <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-table mr-2"></i> <i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span> <span class="font-medium">View</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-search mr-2"></i> <i class="pi pi-search mr-2"></i>
<span class="font-medium">Search</span> <span class="font-medium">Search</span>
</a> </a>
@ -683,7 +683,7 @@ export default {
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-line mr-2"></i> <i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Expenses</span> <span class="font-medium">Expenses</span>
</a> </a>
@ -691,26 +691,26 @@ export default {
</ul> </ul>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-users mr-2"></i> <i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span> <span class="font-medium">Team</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-comments mr-2"></i> <i class="pi pi-comments mr-2"></i>
<span class="font-medium">Messages</span> <span class="font-medium">Messages</span>
<span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span> <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span> <span class="font-medium">Calendar</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -729,26 +729,26 @@ export default {
leaveToClass: 'hidden', leaveToClass: 'hidden',
leaveActiveClass: 'animate-slideup' leaveActiveClass: 'animate-slideup'
}" }"
class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple" class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
> >
<span class="font-medium">APPLICATION</span> <span class="font-medium">APPLICATION</span>
<i class="pi pi-chevron-down"></i> <i class="pi pi-chevron-down"></i>
</div> </div>
<ul class="list-none p-0 m-0 overflow-hidden"> <ul class="list-none p-0 m-0 overflow-hidden">
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-folder mr-2"></i> <i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span> <span class="font-medium">Projects</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-chart-bar mr-2"></i> <i class="pi pi-chart-bar mr-2"></i>
<span class="font-medium">Performance</span> <span class="font-medium">Performance</span>
</a> </a>
</li> </li>
<li> <li>
<a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i> <i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span> <span class="font-medium">Settings</span>
</a> </a>
@ -759,7 +759,7 @@ export default {
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" /> <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
<a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"> <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
</a> </a>

26
doc/megamenu/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem"> <MegaMenu :model="items" class="p-4 bg-surface-0 dark:bg-surface-950" style="border-radius: 3rem">
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
<path <path
@ -14,7 +14,7 @@
/> />
<path <path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z" d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--text-color)" fill="var(--p-text-color)"
/> />
</svg> </svg>
</template> </template>
@ -23,12 +23,12 @@
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2"> <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12"> <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
<i :class="[item.icon, 'text-lg']"></i> <i :class="[item.icon, 'text-lg']"></i>
</span> </span>
<span class="inline-flex flex-col gap-1"> <span class="inline-flex flex-col gap-1">
<span class="font-medium text-lg text-surface-900">{{ item.label }}</span> <span class="font-bold text-lg">{{ item.label }}</span>
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
@ -104,7 +104,7 @@ export default {
<template #start> <template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
<path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-primary-color)" />
<path d="..." fill="var(--text-color)" /> <path d="..." fill="var(--p-text-color)" />
</svg> </svg>
</template> </template>
<template #item="{ item }"> <template #item="{ item }">
@ -112,12 +112,12 @@ export default {
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2"> <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12"> <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
<i :class="[item.icon, 'text-lg']"></i> <i :class="[item.icon, 'text-lg']"></i>
</span> </span>
<span class="inline-flex flex-col gap-1"> <span class="inline-flex flex-col gap-1">
<span class="font-medium text-lg text-surface-900">{{ item.label }}</span> <span class="font-bold text-lg">{{ item.label }}</span>
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
@ -144,7 +144,7 @@ export default {
/> />
<path <path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z" d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--text-color)" fill="var(--p-text-color)"
/> />
</svg> </svg>
</template> </template>
@ -153,12 +153,12 @@ export default {
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2"> <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12"> <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
<i :class="[item.icon, 'text-lg']"></i> <i :class="[item.icon, 'text-lg']"></i>
</span> </span>
<span class="inline-flex flex-col gap-1"> <span class="inline-flex flex-col gap-1">
<span class="font-medium text-lg text-surface-900">{{ item.label }}</span> <span class="font-bold text-lg">{{ item.label }}</span>
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>
@ -244,7 +244,7 @@ export default {
/> />
<path <path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z" d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--text-color)" fill="var(--p-text-color)"
/> />
</svg> </svg>
</template> </template>
@ -253,12 +253,12 @@ export default {
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2"> <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12"> <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
<i :class="[item.icon, 'text-lg']"></i> <i :class="[item.icon, 'text-lg']"></i>
</span> </span>
<span class="inline-flex flex-col gap-1"> <span class="inline-flex flex-col gap-1">
<span class="font-medium text-lg text-surface-900">{{ item.label }}</span> <span class="font-bold text-lg">{{ item.label }}</span>
<span class="whitespace-nowrap">{{ item.subtext }}</span> <span class="whitespace-nowrap">{{ item.subtext }}</span>
</span> </span>
</a> </a>

24
doc/menu/TemplateDoc.vue
View File

@ -19,7 +19,7 @@
fill="var(--text-color)" fill="var(--text-color)"
/> />
</svg> </svg>
<span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span> <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
</span> </span>
</template> </template>
<template #submenuitem="{ item }"> <template #submenuitem="{ item }">
@ -30,11 +30,11 @@
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<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> <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200"> <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-col items-start"> <span class="inline-flex flex-col items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
@ -103,7 +103,7 @@ export default {
<path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-primary-color)" />
<path d="..." fill="var(--text-color)" /> <path d="..." fill="var(--text-color)" />
</svg> </svg>
<span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span> <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
</span> </span>
</template> </template>
<template #submenuitem="{ item }"> <template #submenuitem="{ item }">
@ -114,11 +114,11 @@ export default {
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<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> <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200"> <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-col items-start"> <span class="inline-flex flex-col items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
@ -144,7 +144,7 @@ export default {
fill="var(--text-color)" fill="var(--text-color)"
/> />
</svg> </svg>
<span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span> <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
</span> </span>
</template> </template>
<template #submenuitem="{ item }"> <template #submenuitem="{ item }">
@ -155,11 +155,11 @@ export default {
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<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> <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200"> <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-col items-start"> <span class="inline-flex flex-col items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
@ -239,7 +239,7 @@ export default {
fill="var(--text-color)" fill="var(--text-color)"
/> />
</svg> </svg>
<span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span> <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
</span> </span>
</template> </template>
<template #submenuitem="{ item }"> <template #submenuitem="{ item }">
@ -250,11 +250,11 @@ export default {
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<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> <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200"> <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-col items-start"> <span class="inline-flex flex-col items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>

8
doc/panelmenu/RouterDoc.vue
View File

@ -8,7 +8,7 @@
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate"> <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target"> <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
@ -74,7 +74,7 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate"> <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target"> <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
@ -93,7 +93,7 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate"> <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target"> <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
@ -164,7 +164,7 @@ export default {
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate"> <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target"> <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">

24
doc/popover/BasicDoc.vue
View File

@ -8,7 +8,7 @@
<Popover ref="op"> <Popover ref="op">
<div class="flex flex-col gap-4 w-[25rem]"> <div class="flex flex-col gap-4 w-[25rem]">
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Share this document</span> <span class="font-medium block mb-2">Share this document</span>
<InputGroup> <InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText> <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
<InputGroupAddon> <InputGroupAddon>
@ -17,14 +17,14 @@
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Invite Member</span> <span class="font-medium block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<InputText disabled></InputText> <InputText disabled></InputText>
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Team Members</span> <span class="font-medium block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-col gap-4"> <ul class="list-none p-0 m-0 flex flex-col gap-4">
<li v-for="member in members" :key="member.name" class="flex items-center gap-2"> <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" /> <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
@ -61,7 +61,7 @@ export default {
<Popover ref="op"> <Popover ref="op">
<div class="flex flex-col gap-4 w-[25rem]"> <div class="flex flex-col gap-4 w-[25rem]">
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Share this document</span> <span class="font-medium block mb-2">Share this document</span>
<InputGroup> <InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText> <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
<InputGroupAddon> <InputGroupAddon>
@ -70,14 +70,14 @@ export default {
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Invite Member</span> <span class="font-medium block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<InputText disabled /> <InputText disabled />
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Team Members</span> <span class="font-medium block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-col gap-4"> <ul class="list-none p-0 m-0 flex flex-col gap-4">
<li v-for="member in members" :key="member.name" class="flex items-center gap-2"> <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
@ -103,7 +103,7 @@ export default {
<Popover ref="op"> <Popover ref="op">
<div class="flex flex-col gap-4 w-[25rem]"> <div class="flex flex-col gap-4 w-[25rem]">
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Share this document</span> <span class="font-medium block mb-2">Share this document</span>
<InputGroup> <InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText> <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
<InputGroupAddon> <InputGroupAddon>
@ -112,14 +112,14 @@ export default {
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Invite Member</span> <span class="font-medium block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<InputText disabled /> <InputText disabled />
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Team Members</span> <span class="font-medium block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-col gap-4"> <ul class="list-none p-0 m-0 flex flex-col gap-4">
<li v-for="member in members" :key="member.name" class="flex items-center gap-2"> <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
@ -166,7 +166,7 @@ export default {
<Popover ref="op"> <Popover ref="op">
<div class="flex flex-col gap-4 w-[25rem]"> <div class="flex flex-col gap-4 w-[25rem]">
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Share this document</span> <span class="font-medium block mb-2">Share this document</span>
<InputGroup> <InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText> <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
<InputGroupAddon> <InputGroupAddon>
@ -175,14 +175,14 @@ export default {
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Invite Member</span> <span class="font-medium block mb-2">Invite Member</span>
<InputGroup> <InputGroup>
<InputText disabled /> <InputText disabled />
<Button label="Invite" icon="pi pi-users"></Button> <Button label="Invite" icon="pi pi-users"></Button>
</InputGroup> </InputGroup>
</div> </div>
<div> <div>
<span class="font-medium text-surface-900 block mb-2">Team Members</span> <span class="font-medium block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-col gap-4"> <ul class="list-none p-0 m-0 flex flex-col gap-4">
<li v-for="member in members" :key="member.name" class="flex items-center gap-2"> <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />

32
doc/popover/DataTableDoc.vue
View File

@ -6,15 +6,15 @@
<div class="card flex flex-col items-center gap-4"> <div class="card flex flex-col items-center gap-4">
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded"> <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
<div class="relative"> <div class="relative">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-80" /> <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-80" />
</div> </div>
<div class="flex items-center justify-between mt-4 mb-2"> <div class="flex items-center justify-between mt-4 mb-2">
<span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span> <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
<span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span> <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-surface-600">{{ selectedProduct.category }}</span> <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
</div> </div>
<Popover ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
@ -46,15 +46,15 @@ export default {
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded"> <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
<div class="relative"> <div class="relative">
<img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-16 shadow-sm" class="w-full sm:w-80" /> <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-16 shadow-sm" class="w-full sm:w-80" />
</div> </div>
<div class="flex items-center justify-between mt-4 mb-2"> <div class="flex items-center justify-between mt-4 mb-2">
<span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span> <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
<span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span> <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-surface-600">{{ selectedProduct.category }}</span> <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
</div> </div>
<Popover ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
@ -79,15 +79,15 @@ export default {
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded"> <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
<div class="relative"> <div class="relative">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
</div> </div>
<div class="flex items-center justify-between mt-4 mb-2"> <div class="flex items-center justify-between mt-4 mb-2">
<span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span> <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
<span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span> <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-surface-600">{{ selectedProduct.category }}</span> <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
</div> </div>
<Popover ref="op" appendTo="body"> <Popover ref="op" appendTo="body">
@ -141,15 +141,15 @@ export default {
<Toast /> <Toast />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" /> <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded"> <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
<div class="relative"> <div class="relative">
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" /> <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
</div> </div>
<div class="flex items-center justify-between mt-4 mb-2"> <div class="flex items-center justify-between mt-4 mb-2">
<span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span> <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
<span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span> <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-surface-600">{{ selectedProduct.category }}</span> <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
</div> </div>
<Popover ref="op" appendTo="body"> <Popover ref="op" appendTo="body">

4
doc/toast/HeadlessDoc.vue
View File

@ -6,10 +6,10 @@
<Toast position="top-center" group="headless" @close="visible = false"> <Toast position="top-center" group="headless" @close="visible = false">
<template #container="{ message, closeCallback }"> <template #container="{ message, closeCallback }">
<section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px"> <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
<i class="pi pi-cloud-upload text-primary-500 text-2xl"></i> <i class="pi pi-cloud-upload text-green-400 text-2xl"></i>
<div class="flex flex-col gap-4 w-full"> <div class="flex flex-col gap-4 w-full">
<p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p> <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
<p class="m-0 text-base text-surface-700">{{ message.detail }}</p> <p class="m-0 text-base text-white">{{ message.detail }}</p>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar> <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label> <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>

16
doc/toast/TemplateDoc.vue
View File

@ -8,9 +8,9 @@
<div class="flex flex-col items-start" style="flex: 1"> <div class="flex flex-col items-start" style="flex: 1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-surface-900">Amy Elsner</span> <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
</div> </div>
<div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div> <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
<Button class="p-button-sm" label="Reply" @click="onReply()"></Button> <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div> </div>
</template> </template>
@ -32,9 +32,9 @@ export default {
<div class="flex flex-col items-start" style="flex: 1"> <div class="flex flex-col items-start" style="flex: 1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-surface-900">Amy Elsner</span> <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
</div> </div>
<div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div> <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
<Button class="p-button-sm" label="Reply" @click="onReply()"></Button> <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div> </div>
</template> </template>
@ -49,9 +49,9 @@ export default {
<div class="flex flex-col items-start" style="flex: 1"> <div class="flex flex-col items-start" style="flex: 1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-surface-900">Amy Elsner</span> <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
</div> </div>
<div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div> <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
<Button class="p-button-sm" label="Reply" @click="onReply()"></Button> <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div> </div>
</template> </template>
@ -93,9 +93,9 @@ export default {
<div class="flex flex-col items-start" style="flex: 1"> <div class="flex flex-col items-start" style="flex: 1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-surface-900">Amy Elsner</span> <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
</div> </div>
<div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div> <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
<Button class="p-button-sm" label="Reply" @click="onReply()"></Button> <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
</div> </div>
</template> </template>

6
doc/tree/TemplateDoc.vue
View File

@ -8,7 +8,7 @@
<b>{{ slotProps.node.label }}</b> <b>{{ slotProps.node.label }}</b>
</template> </template>
<template #url="slotProps"> <template #url="slotProps">
<a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a> <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
</template> </template>
</Tree> </Tree>
</div> </div>
@ -60,7 +60,7 @@ export default {
<b>{{ slotProps.node.label }}</b> <b>{{ slotProps.node.label }}</b>
</template> </template>
<template #url="slotProps"> <template #url="slotProps">
<a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a> <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
</template> </template>
</Tree> </Tree>
</div> </div>
@ -105,7 +105,7 @@ export default {
<b>{{ slotProps.node.label }}</b> <b>{{ slotProps.node.label }}</b>
</template> </template>
<template #url="slotProps"> <template #url="slotProps">
<a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a> <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
</template> </template>
</Tree> </Tree>
</div> </div>