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

Refactored landing css

pull/5806/head
Cagatay Civici 2024-05-21 10:57:47 +03:00
parent d5493601b6
commit ea02762fbd
21 changed files with 162 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
assets/styles/layout/landing/_main.scss
View File

@ -38,40 +38,25 @@
} }
} }
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
.linkbox { .linkbox {
transition: background-color .2s, border-color .2s; transition: background-color .2s, border-color .2s, outline-color .2s;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--text-color); color: var(--text-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: var(--card-background); background-color: var(--card-background);
border-radius: 10px; border-radius: 10px;
cursor: pointer; font-weight: 600;
padding: 1rem 1.5rem;
cursor: pointer;
@include focus-visible(); @include focus-visible();
&:hover { &:hover {
background: var(--hover-background); background: var(--hover-background);
} }
&.active { &.linkbox-primary {
background: var(--primary-color); background: var(--primary-color);
color: var(--primary-contrast-color); color: var(--primary-contrast-color);
@ -79,6 +64,12 @@
background: var(--primary-hover-color); background: var(--primary-hover-color);
} }
} }
&.linkbox-icon {
width: 3rem;
height: 3rem;
justify-content: center;
}
} }
.section-header { .section-header {
@ -103,6 +94,7 @@
height: 1px; height: 1px;
border-bottom: 0 none; border-bottom: 0 none;
overflow: hidden; overflow: hidden;
margin-top: 5rem;
} }
&.layout-news-active { &.layout-news-active {
@ -110,13 +102,6 @@
} }
} }
.text-secondary {
color: var(--text-secondary-color);
}
.hover\:surface-hover:hover {
background-color: var(--hover-background);
}
.landing-footer-container { .landing-footer-container {
max-width: 1250px !important; max-width: 1250px !important;
@ -177,3 +162,20 @@
transform: translateX(calc(-100% - 3rem)); transform: translateX(calc(-100% - 3rem));
} }
} }
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}

10
components/landing/BlockSection.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<section id="blocks-section" class="landing-blocks pt-20 overflow-hidden"> <section id="blocks-section" class="landing-blocks pt-20 overflow-hidden">
<div class="section-header">Blocks</div> <div class="section-header relative z-30">Blocks</div>
<p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p> <p class="section-detail relative z-30">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
<div class="flex justify-center mt-6"> <div class="flex justify-center mt-6 relative z-30">
<a href="https://blocks.primevue.org" class="font-semibold py-4 px-6 rounded flex items-center linkbox active z-20"> <a href="https://blocks.primevue.org" class="linkbox linkbox-primary">
<span>Explore All</span> <span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i> <i class="pi pi-arrow-right ml-2"></i>
</a> </a>
</div> </div>
<section :class="['prime-blocks flex justify-center items-center flex-col z-1', { 'blocks-animation': setAnimation }]"> <section :class="['prime-blocks flex justify-center items-center flex-col', { 'blocks-animation': setAnimation }]">
<div class="flex"> <div class="flex">
<div class="prime-block flex self-stretch p-1"> <div class="prime-block flex self-stretch p-1">
<div class="block-sidebar w-1/12 p-4"> <div class="block-sidebar w-1/12 p-4">

16
components/landing/FeaturesSection.vue
View File

@ -9,56 +9,56 @@
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">80+ UI Components</div> <div class="font-semibold mb-4 text-lg">80+ UI Components</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Styled or Unstyled</div> <div class="font-semibold mb-4 text-lg">Styled or Unstyled</div>
<p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Community</div> <div class="font-semibold mb-4 text-lg">Community</div>
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Accessibility</div> <div class="font-semibold mb-4 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Enterprise Support</div> <div class="font-semibold mb-4 text-lg">Enterprise Support</div>
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Mobile</div> <div class="font-semibold mb-4 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">First class support for responsive design led by touch optimized elements.</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Blocks</div> <div class="font-semibold mb-4 text-lg">Blocks</div>
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
</div> </div>
</div> </div>
<div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-4 text-lg">Typescript</div> <div class="font-semibold mb-4 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p> <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div> </div>
</div> </div>
</div> </div>

40
components/landing/FooterSection.vue
View File

@ -6,10 +6,12 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-8">General</li> <li class="font-bold mb-8">General</li>
<li class="mb-6"> <li class="mb-6">
<PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Get Started</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/setup" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Get Started</PrimeVueNuxtLink>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Examples</a> <a href="https://github.com/primefaces/primevue-examples" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer"
>Examples</a
>
</li> </li>
</ul> </ul>
</div> </div>
@ -17,13 +19,13 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-8">Support</li> <li class="font-bold mb-8">Support</li>
<li class="mb-6"> <li class="mb-6">
<a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a> <a href="https://github.com/orgs/primefaces/discussions" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a> <a href="https://discord.gg/gzKFYnpmCY" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">PRO Support</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/support" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">PRO Support</PrimeVueNuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
@ -31,10 +33,10 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-8 lg:mt-0 mb-8">Theming</li> <li class="font-bold mt-8 lg:mt-0 mb-8">Theming</li>
<li class="mb-6"> <li class="mb-6">
<PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Styled Mode</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/theming/styled" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Styled Mode</PrimeVueNuxtLink>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/theming/unstyled" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
@ -42,33 +44,33 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-8 lg:mt-0 mb-8">Resources</li> <li class="font-bold mt-8 lg:mt-0 mb-8">Resources</li>
<li class="mb-6"> <li class="mb-6">
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer" <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer"
>PrimeTV</a >PrimeTV</a
> >
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a> <a href="https://www.primefaces.org/store/" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a> <a href="https://github.com/primefaces/primevue" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a> <a href="https://twitter.com/primevue" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a> <a href="https://www.primefaces.org/newsletter" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a> <a href="https://gear.primefaces.org/" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
</li> </li>
<li class="mb-6"> <li class="mb-6">
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Contact Us</a> <a href="mailto:contact@primetek.com.tr" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Contact Us</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<hr class="section-divider mt-20" /> <hr class="section-divider" />
<div class="flex flex-wrap justify-between py-12 gap-8"> <div class="flex flex-wrap justify-between py-12 gap-8">
<span> <span>
@ -116,16 +118,16 @@
</svg> </svg>
</span> </span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a href="https://twitter.com/primevue" class="linkbox w-12 h-12 flex items-center justify-center"> <a href="https://twitter.com/primevue" class="linkbox linkbox-icon">
<i class="pi pi-twitter"></i> <i class="pi pi-twitter"></i>
</a> </a>
<a href="https://github.com/primefaces/primevue" class="linkbox w-12 h-12 flex items-center justify-center"> <a href="https://github.com/primefaces/primevue" class="linkbox linkbox-icon">
<i class="pi pi-github"></i> <i class="pi pi-github"></i>
</a> </a>
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox w-12 h-12 flex items-center justify-center"> <a href="https://discord.gg/gzKFYnpmCY" class="linkbox linkbox-icon">
<i class="pi pi-discord"></i> <i class="pi pi-discord"></i>
</a> </a>
<a href="https://github.com/orgs/primefaces/discussions" class="linkbox w-12 h-12 flex items-center justify-center"> <a href="https://github.com/orgs/primefaces/discussions" class="linkbox linkbox-icon">
<i class="pi pi-comments"></i> <i class="pi pi-comments"></i>
</a> </a>
</div> </div>

22
components/landing/HeroSection.vue
View File

@ -7,11 +7,11 @@
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier. Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
</p> </p>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-4 px-6"> <PrimeVueNuxtLink to="/setup" class="linkbox linkbox-primary">
<span>Get Started</span> <span>Get Started</span>
<i class="pi pi-arrow-right ml-4"></i> <i class="pi pi-arrow-right ml-4"></i>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
<a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-4 px-6"> <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox">
<span>Give a Star</span> <span>Give a Star</span>
<i class="pi pi-star-fill ml-4 text-yellow-500"></i> <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
</a> </a>
@ -23,11 +23,11 @@
<div class="box p-6 animate-fadein animate-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<div class="flex gap-2"> <div class="flex gap-2">
<div class="w-24 flex-shrink-0"> <div class="w-24 flex-shrink-0">
<span class="text-secondary font-medium block mb-4">Amount</span> <span class="text-surface-500 dark:text-surface-400 font-medium block mb-4">Amount</span>
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" /> <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
</div> </div>
<div class="flex-auto" style="width: 1%"> <div class="flex-auto" style="width: 1%">
<span class="text-secondary font-semibold block mb-4">Beneficiary</span> <span class="text-surface-500 dark:text-surface-400 font-semibold block mb-4">Beneficiary</span>
<Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full"> <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -38,7 +38,7 @@
</Select> </Select>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-8 mb-4">Account</span> <span class="text-surface-500 dark:text-surface-400 font-medium block mt-8 mb-4">Account</span>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center">
<RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" /> <RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" />
@ -49,7 +49,7 @@
<label for="category2" class="ml-2 font-medium">Checking</label> <label for="category2" class="ml-2 font-medium">Checking</label>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-8 mb-4">Date</span> <span class="text-surface-500 dark:text-surface-400 font-medium block mt-8 mb-4">Date</span>
<DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" /> <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
</div> </div>
<div class="box p-6 animate-fadein animate-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
@ -77,7 +77,7 @@
<div class="flex items-center mb-6"> <div class="flex items-center mb-6">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="block font-semibold mb-1">Sneaker</span> <span class="block font-semibold mb-1">Sneaker</span>
<span class="text-secondary text-sm">Premium Quality</span> <span class="text-surface-500 dark:text-surface-400 text-sm">Premium Quality</span>
</div> </div>
<span class="font-medium text-xl ml-auto">$990</span> <span class="font-medium text-xl ml-auto">$990</span>
</div> </div>
@ -91,7 +91,7 @@
</span> </span>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="font-bold mb-1">Amanda Williams</span> <span class="font-bold mb-1">Amanda Williams</span>
<span class="text-secondary text-sm">Administrator</span> <span class="text-surface-500 dark:text-surface-400 text-sm">Administrator</span>
</div> </div>
</li> </li>
<li class="flex"> <li class="flex">
@ -99,7 +99,7 @@
<i class="pi pi-home text-xl mr-4"></i> <i class="pi pi-home text-xl mr-4"></i>
<span class="flex flex-col"> <span class="flex flex-col">
<span class="font-bold mb-1">Dashboard</span> <span class="font-bold mb-1">Dashboard</span>
<span class="m-0 text-secondary text-sm">Control Panel</span> <span class="m-0 text-surface-500 dark:text-surface-400 text-sm">Control Panel</span>
</span> </span>
</a> </a>
</li> </li>
@ -108,7 +108,7 @@
<i class="pi pi-envelope text-xl mr-4"></i> <i class="pi pi-envelope text-xl mr-4"></i>
<span class="flex flex-col"> <span class="flex flex-col">
<span class="font-bold mb-1">Inbox</span> <span class="font-bold mb-1">Inbox</span>
<span class="m-0 text-secondary text-sm">View Messages</span> <span class="m-0 text-surface-500 dark:text-surface-400 text-sm">View Messages</span>
</span> </span>
<Badge value="3" class="ml-auto"></Badge> <Badge value="3" class="ml-auto"></Badge>
</a> </a>
@ -245,7 +245,7 @@ export default {
}, },
setChartOptions() { setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); const textColorSecondary = documentStyle.getPropertyValue('--text-surface-500 dark:text-surface-400-color');
const surfaceBorder = documentStyle.getPropertyValue('--border-color'); const surfaceBorder = documentStyle.getPropertyValue('--border-color');
return { return {

2
components/landing/TemplateSection.vue
View File

@ -3,7 +3,7 @@
<div class="section-header relative z-30">Templates</div> <div class="section-header relative z-30">Templates</div>
<p class="section-detail relative z-30">Professionally designed highly customizable application templates to get started in style.</p> <p class="section-detail relative z-30">Professionally designed highly customizable application templates to get started in style.</p>
<div class="flex justify-center mt-6 relative z-30"> <div class="flex justify-center mt-6 relative z-30">
<a href="https://www.primefaces.org/store" class="font-semibold py-4 px-6 rounded flex items-center linkbox active"> <a href="https://www.primefaces.org/store" class="linkbox linkbox-primary">
<span>Explore All</span> <span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i> <i class="pi pi-arrow-right ml-2"></i>
</a> </a>

8
doc/dataview/BasicDoc.vue
View File

@ -15,7 +15,7 @@
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -63,7 +63,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -102,7 +102,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -175,7 +175,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">

16
doc/dataview/LayoutDoc.vue
View File

@ -25,7 +25,7 @@
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -61,7 +61,7 @@
<div class="pt-6"> <div class="pt-6">
<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-secondary 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 text-surface-900 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">
@ -121,7 +121,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -157,7 +157,7 @@ export default {
<div class="pt-6"> <div class="pt-6">
<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-secondary 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 text-surface-900 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">
@ -206,7 +206,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -242,7 +242,7 @@ export default {
<div class="pt-6"> <div class="pt-6">
<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-secondary 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 text-surface-900 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">
@ -327,7 +327,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -363,7 +363,7 @@ export default {
<div class="pt-6"> <div class="pt-6">
<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-secondary 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 text-surface-900 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">

8
doc/dataview/PaginationDoc.vue
View File

@ -15,7 +15,7 @@
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -63,7 +63,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -102,7 +102,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -175,7 +175,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">

8
doc/dataview/SortingDoc.vue
View File

@ -18,7 +18,7 @@
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -76,7 +76,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -118,7 +118,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">
@ -215,7 +215,7 @@ export default {
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary 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 text-surface-900 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">

8
doc/metergroup/TemplateDoc.vue
View File

@ -11,7 +11,7 @@
<template #content> <template #content>
<div class="flex justify-between gap-8"> <div class="flex justify-between gap-8">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span> <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span> <span class="font-bold text-lg">{{ val.value }}%</span>
</div> </div>
<span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }"> <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
@ -64,7 +64,7 @@ export default {
<template #content> <template #content>
<div class="flex justify-between gap-8"> <div class="flex justify-between gap-8">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span> <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span> <span class="font-bold text-lg">{{ val.value }}%</span>
</div> </div>
<span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }"> <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
@ -105,7 +105,7 @@ export default {
<template #content> <template #content>
<div class="flex justify-between gap-8"> <div class="flex justify-between gap-8">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span> <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span> <span class="font-bold text-lg">{{ val.value }}%</span>
</div> </div>
<span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }"> <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
@ -163,7 +163,7 @@ export default {
<template #content> <template #content>
<div class="flex justify-between gap-8"> <div class="flex justify-between gap-8">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span> <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span> <span class="font-bold text-lg">{{ val.value }}%</span>
</div> </div>
<span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }"> <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">

16
doc/orderlist/TemplateDoc.vue
View File

@ -10,8 +10,8 @@
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold">${{ item.price }}</span>
@ -37,8 +37,8 @@ export default {
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
@ -56,8 +56,8 @@ export default {
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
@ -91,8 +91,8 @@ export default {
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>

16
doc/picklist/TemplateDoc.vue
View File

@ -10,8 +10,8 @@
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">${{ item.price }}</span> <span class="font-bold">${{ item.price }}</span>
@ -38,8 +38,8 @@ export default {
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
@ -57,8 +57,8 @@ export default {
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>
@ -92,8 +92,8 @@ export default {
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i> <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
<span class="text-sm text-secondary">{{ item.category }}</span> <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
</div> </div>
</div> </div>
<span class="font-bold">\${{ item.price }}</span> <span class="font-bold">\${{ item.price }}</span>

2
doc/theming/styled/ColorsDoc.vue
View File

@ -13,7 +13,7 @@
<div class="flex gap-4 flex-auto flex-col sm:flex-row"> <div class="flex gap-4 flex-auto flex-col sm:flex-row">
<div v-for="(shade, j) of shades" :key="shade" class="flex flex-col items-center gap-1 flex-1"> <div v-for="(shade, j) of shades" :key="shade" class="flex flex-col items-center gap-1 flex-1">
<div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div> <div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
<span class="text-sm text-secondary font-medium">{{ shades[j] }}</span> <span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
</div> </div>
</div> </div>
</li> </li>

8
doc/virtualscroller/BasicDoc.vue
View File

@ -8,7 +8,7 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -24,7 +24,7 @@ export default {
basic: ` basic: `
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
`, `,
@ -33,7 +33,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -57,7 +57,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>

24
doc/virtualscroller/DelayDoc.vue
View File

@ -7,7 +7,7 @@
<span class="font-bold block mb-2">No Delay</span> <span class="font-bold block mb-2">No Delay</span>
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -15,7 +15,7 @@
<span class="font-bold block mb-2">150ms</span> <span class="font-bold block mb-2">150ms</span>
<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -23,7 +23,7 @@
<span class="font-bold block mb-2">500ms</span> <span class="font-bold block mb-2">500ms</span>
<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -40,19 +40,19 @@ export default {
basic: ` basic: `
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
`, `,
@ -63,7 +63,7 @@ export default {
<span class="font-bold block mb-2">No Delay</span> <span class="font-bold block mb-2">No Delay</span>
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -71,7 +71,7 @@ export default {
<span class="font-bold block mb-2">150ms</span> <span class="font-bold block mb-2">150ms</span>
<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -79,7 +79,7 @@ export default {
<span class="font-bold block mb-2">500ms</span> <span class="font-bold block mb-2">500ms</span>
<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -106,7 +106,7 @@ export default {
<span class="font-bold block mb-2">No Delay</span> <span class="font-bold block mb-2">No Delay</span>
<VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -114,7 +114,7 @@ export default {
<span class="font-bold block mb-2">150ms</span> <span class="font-bold block mb-2">150ms</span>
<VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -122,7 +122,7 @@ export default {
<span class="font-bold block mb-2">500ms</span> <span class="font-bold block mb-2">500ms</span>
<VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>

8
doc/virtualscroller/GridDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<template v-for="(el, index) of item" :key="index"> <template v-for="(el, index) of item" :key="index">
<div style="width: 100px">{{ el }}</div> <div style="width: 100px">{{ el }}</div>
</template> </template>
@ -25,7 +25,7 @@ export default {
basic: ` basic: `
<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<template v-for="(el, index) of item" :key="index"> <template v-for="(el, index) of item" :key="index">
<div style="width: 100px">{{ el }}</div> <div style="width: 100px">{{ el }}</div>
</template> </template>
@ -38,7 +38,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<template v-for="(el, index) of item" :key="index"> <template v-for="(el, index) of item" :key="index">
<div style="width: 100px">{{ el }}</div> <div style="width: 100px">{{ el }}</div>
</template> </template>
@ -66,7 +66,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<template v-for="(el, index) of item" :key="index"> <template v-for="(el, index) of item" :key="index">
<div style="width: 100px">{{ el }}</div> <div style="width: 100px">{{ el }}</div>
</template> </template>

8
doc/virtualscroller/HorizontalDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }"> <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -21,7 +21,7 @@ export default {
basic: ` basic: `
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }"> <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
`, `,
@ -30,7 +30,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }"> <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -54,7 +54,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }"> <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>

8
doc/virtualscroller/LazyDoc.vue
View File

@ -8,7 +8,7 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -26,7 +26,7 @@ export default {
basic: ` basic: `
<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
`, `,
@ -35,7 +35,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -84,7 +84,7 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>

24
doc/virtualscroller/LoadingDoc.vue
View File

@ -10,7 +10,7 @@
<span class="font-bold block mb-2">Modal</span> <span class="font-bold block mb-2">Modal</span>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -18,10 +18,10 @@
<span class="font-bold block mb-2">Skeleton</span> <span class="font-bold block mb-2">Skeleton</span>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
</div> </div>
</template> </template>
@ -40,16 +40,16 @@ export default {
basic: ` basic: `
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
</div> </div>
</template> </template>
@ -62,7 +62,7 @@ export default {
<span class="font-bold block mb-2">Modal</span> <span class="font-bold block mb-2">Modal</span>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -70,10 +70,10 @@ export default {
<span class="font-bold block mb-2">Skeleton</span> <span class="font-bold block mb-2">Skeleton</span>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
</div> </div>
</template> </template>
@ -102,7 +102,7 @@ export default {
<span class="font-bold block mb-2">Modal</span> <span class="font-bold block mb-2">Modal</span>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
@ -110,10 +110,10 @@ export default {
<span class="font-bold block mb-2">Skeleton</span> <span class="font-bold block mb-2">Skeleton</span>
<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px"> <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
<template v-slot:item="{ item, options }"> <template v-slot:item="{ item, options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
</template> </template>
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px"> <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
<Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
</div> </div>
</template> </template>

17
pages/support/index.vue
View File

@ -25,14 +25,9 @@
<div class="flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-wrap items-center justify-between gap-4">
<div> <div>
<div class="text-2xl text-surface-900 font-semibold mb-4">Enterprise Support</div> <div class="text-2xl text-surface-900 font-semibold mb-4">Enterprise Support</div>
<p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800">1 Year Subscription</p> <p class="m-0 leading-normal mb-8 text-surface-500 dark:text-surface-400 text-lg text-surface-800">1 Year Subscription</p>
</div> </div>
<a <a href="mailto:contact@primetek.com.tr" class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"> Get a Quote </a>
href="mailto:contact@primetek.com.tr"
class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"
>
Get a Quote
</a>
</div> </div>
<div class="flex flex-wrap -mt-4 gap-4 text-surface-800"> <div class="flex flex-wrap -mt-4 gap-4 text-surface-800">
<ul class="flex-auto list-none p-0 m-0 text-lg p-4"> <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
@ -86,7 +81,7 @@
<div class="card mb-8"> <div class="card mb-8">
<div class="text-2xl text-surface-900 font-semibold mb-4">Enhancement Credits</div> <div class="text-2xl text-surface-900 font-semibold mb-4">Enhancement Credits</div>
<p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800"> <p class="m-0 leading-normal mb-8 text-surface-500 dark:text-surface-400 text-lg text-surface-800">
New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have an enhancement request, initially our team will review your requirement to verify New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have an enhancement request, initially our team will review your requirement to verify
if it is suitable to be included in the open source core library. We cannot guarantee that all requests can be accepted depending on the project roadmap, workload at the time and type of the requirement. After successful verification, if it is suitable to be included in the open source core library. We cannot guarantee that all requests can be accepted depending on the project roadmap, workload at the time and type of the requirement. After successful verification,
we prepare an initial estimate in terms of credits and once this estimate is confirmed by you, implementation will be delivered by our team within an estimated timeframe. we prepare an initial estimate in terms of credits and once this estimate is confirmed by you, implementation will be delivered by our team within an estimated timeframe.
@ -95,15 +90,15 @@
<div class="flex flex-col md:flex-row gap-8"> <div class="flex flex-col md:flex-row gap-8">
<div class="flex-1"> <div class="flex-1">
<div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Components</div> <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Components</div>
<p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Brand new components you need that are not already available in the existing UI suite.</p> <p class="m-0 leading-normal mb-4 text-surface-500 dark:text-surface-400 text-lg text-surface-800">Brand new components you need that are not already available in the existing UI suite.</p>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Features</div> <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Features</div>
<p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Enhancements to the components you need such as new properties, events and templating.</p> <p class="m-0 leading-normal mb-4 text-surface-500 dark:text-surface-400 text-lg text-surface-800">Enhancements to the components you need such as new properties, events and templating.</p>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="text-xl text-surface-900 font-semibold mb-2 text-xl">UX Customization</div> <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">UX Customization</div>
<p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Behavioral changes to the existing components.</p> <p class="m-0 leading-normal mb-4 text-surface-500 dark:text-surface-400 text-lg text-surface-800">Behavioral changes to the existing components.</p>
</div> </div>
</div> </div>
</div> </div>