Index - setup pages added
Bahadir Sofuoglu
parent
8264983db4
commit
2643836b20
8
app.vue
8
app.vue
|
|
@ -1,3 +1,11 @@
|
|||
<template>
|
||||
|
||||
<NuxtLayout v-if="$route.name !== 'index'">
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
<NuxtPage v-else />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
|
@ -303,72 +303,72 @@
|
|||
<div class="grid premium-themes">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/sakai-vue">
|
||||
<img alt="Ultima" src="./assets/images/layouts/sakai-vue.jpg">
|
||||
<img alt="Ultima" src="@/assets/images/layouts/sakai-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/atlantis-vue">
|
||||
<img alt="Atlantis" src="./assets/images/layouts/atlantis-vue.jpg">
|
||||
<img alt="Atlantis" src="@/assets/images/layouts/atlantis-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/freya-vue">
|
||||
<img alt="Freya" src="./assets/images/layouts/freya-vue.png">
|
||||
<img alt="Freya" src="@/assets/images/layouts/freya-vue.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/ultima-vue">
|
||||
<img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg">
|
||||
<img alt="Ultima" src="@/assets/images/layouts/ultima-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/diamond-vue">
|
||||
<img alt="Diamond" src="./assets/images/layouts/diamond-vue.jpg">
|
||||
<img alt="Diamond" src="@/assets/images/layouts/diamond-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/verona-vue">
|
||||
<img alt="Verona" src="./assets/images/layouts/verona-vue.jpg">
|
||||
<img alt="Verona" src="@/assets/images/layouts/verona-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/poseidon-vue">
|
||||
<img alt="Poseidon" src="./assets/images/layouts/poseidon-vue.jpg">
|
||||
<img alt="Poseidon" src="@/assets/images/layouts/poseidon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/sapphire-vue">
|
||||
<img alt="Sapphire" src="./assets/images/layouts/sapphire-vue.jpg">
|
||||
<img alt="Sapphire" src="@/assets/images/layouts/sapphire-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/serenity-vue">
|
||||
<img alt="Serenity" src="./assets/images/layouts/serenity-vue.jpg">
|
||||
<img alt="Serenity" src="@/assets/images/layouts/serenity-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/babylon-vue">
|
||||
<img alt="Babylon" src="./assets/images/layouts/babylon-vue.jpg">
|
||||
<img alt="Babylon" src="@/assets/images/layouts/babylon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/avalon-vue">
|
||||
<img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg">
|
||||
<img alt="Avalon" src="@/assets/images/layouts/avalon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/apollo-vue">
|
||||
<img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg">
|
||||
<img alt="Apollo" src="@/assets/images/layouts/apollo-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/roma-vue">
|
||||
<img alt="Roma" src="./assets/images/layouts/roma-vue.jpg">
|
||||
<img alt="Roma" src="@/assets/images/layouts/roma-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/prestige-vue">
|
||||
<img alt="Prestige" src="./assets/images/layouts/prestige-vue.jpg">
|
||||
<img alt="Prestige" src="@/assets/images/layouts/prestige-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -433,6 +433,7 @@ export default {
|
|||
event.preventDefault();
|
||||
},
|
||||
changeTheme(event, theme, dark) {
|
||||
debugger
|
||||
EventBus.emit('theme-change', { theme: theme, dark: dark });
|
||||
event.preventDefault();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<a class="menu-button" @click="$emit('menubutton-click')">
|
||||
<i class="pi pi-bars"></i>
|
||||
</a>
|
||||
<div class="app-theme" v-tooltip.bottom="$appState.theme">
|
||||
<!-- <div class="app-theme" v-tooltip.bottom="$appState.theme">
|
||||
<img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
|
||||
</div>
|
||||
</div> -->
|
||||
<ul ref="topbarMenu" class="topbar-menu">
|
||||
<li class="topbar-submenu">
|
||||
<a tabindex="0" @click="toggleMenu($event, 0)">
|
||||
|
|
@ -83,21 +83,21 @@
|
|||
<transition name="p-connected-overlay" @enter="onMenuEnter">
|
||||
<ul v-show="activeMenuIndex === 1">
|
||||
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
|
||||
<li><a href="https://www.primefaces.org/sakai-vue"><img src="./assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/sakai-vue"><img src="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></a></li>
|
||||
<li class="topbar-submenu-header">PREMIUM ADMIN TEMPLATES</li>
|
||||
<li><a href="https://www.primefaces.org/layouts/atlantis-vue"><img src="./assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/freya-vue"><img src="./assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/diamond-vue"><img src="./assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/verona-vue"><img src="./assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/poseidon-vue"><img src="./assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/sapphire-vue"><img src="./assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/serenity-vue"><img src="./assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/ultima-vue"><img src="./assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/avalon-vue"><img src="./assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/babylon-vue"><img src="./assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/apollo-vue"><img src="./assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/roma-vue"><img src="./assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/prestige-vue"><img src="./assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/atlantis-vue"><img src="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/freya-vue"><img src="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/diamond-vue"><img src="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/verona-vue"><img src="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/poseidon-vue"><img src="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/sapphire-vue"><img src="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/serenity-vue"><img src="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/ultima-vue"><img src="@/assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/avalon-vue"><img src="@/assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/babylon-vue"><img src="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/apollo-vue"><img src="@/assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/roma-vue"><img src="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a></li>
|
||||
<li><a href="https://www.primefaces.org/layouts/prestige-vue"><img src="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></a></li>
|
||||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="layout-wrapper" :class="containerClass">
|
||||
<app-news v-if="$appState.newsActive" />
|
||||
<!-- <app-topbar @menubutton-click="onMenuButtonClick" /> -->
|
||||
<app-topbar @menubutton-click="onMenuButtonClick" />
|
||||
<app-menu :active="sidebarActive" />
|
||||
<app-configurator />
|
||||
<div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
|
||||
|
|
@ -37,10 +37,11 @@ export default {
|
|||
this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
|
||||
}
|
||||
},
|
||||
/* watch: {
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(to) {
|
||||
// Todo: Check this again
|
||||
if(!process.client || typeof window === 'undefined') {
|
||||
return
|
||||
}
|
||||
|
|
@ -54,7 +55,7 @@ export default {
|
|||
this.$toast.removeAllGroups();
|
||||
}
|
||||
}
|
||||
}, */
|
||||
},
|
||||
methods: {
|
||||
onMenuButtonClick() {
|
||||
if (this.sidebarActive) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"": {
|
||||
"hasInstallScript": true,
|
||||
"devDependencies": {
|
||||
"chart.js": "3.3.2",
|
||||
"nuxt": "3.0.0-rc.9",
|
||||
"primeflex": "^3.2.1",
|
||||
"primeicons": "^5.0.0",
|
||||
|
|
@ -2140,6 +2141,12 @@
|
|||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.2.tgz",
|
||||
"integrity": "sha512-H0hSO7xqTIrwxoACqnSoNromEMfXvfuVnrbuSt2TuXfBDDofbnto4zuZlRtRvC73/b37q3wGAWZyUU41QPvNbA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
|
|
@ -10310,6 +10317,12 @@
|
|||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
|
||||
"dev": true
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.2.tgz",
|
||||
"integrity": "sha512-H0hSO7xqTIrwxoACqnSoNromEMfXvfuVnrbuSt2TuXfBDDofbnto4zuZlRtRvC73/b37q3wGAWZyUU41QPvNbA==",
|
||||
"dev": true
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"devDependencies": {
|
||||
"nuxt": "3.0.0-rc.9",
|
||||
"primeflex": "^3.2.1",
|
||||
"chart.js": "3.3.2",
|
||||
"primeicons": "^5.0.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"sass": "^1.45.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/styles/landing/landing.scss';
|
||||
</style>
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
<h5>hello</h5>
|
||||
</NuxtLayout>
|
||||
<!-- <div :class="landingClass">
|
||||
<div :class="landingClass">
|
||||
<div class="landing-intro">
|
||||
<AppNews v-if="$appState.newsActive" />
|
||||
<HeaderSection @theme-toggle="onThemeToggle" />
|
||||
|
|
@ -16,23 +13,22 @@
|
|||
<UsersSection />
|
||||
<FeaturesSection />
|
||||
<FooterSection />
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
import EventBus from './AppEventBus';
|
||||
import HeaderSection from './views/landing/HeaderSection';
|
||||
import HeroSection from './views/landing/HeroSection';
|
||||
import ComponentSection from './views/landing/ComponentSection';
|
||||
import ThemeSection from './views/landing/ThemeSection';
|
||||
import BlockSection from './views/landing/BlockSection';
|
||||
import DesignerSection from './views/landing/DesignerSection';
|
||||
import TemplateSection from './views/landing/TemplateSection';
|
||||
import UsersSection from './views/landing/UsersSection';
|
||||
import FeaturesSection from './views/landing/FeaturesSection';
|
||||
import FooterSection from './views/landing/FooterSection';
|
||||
import AppNews from './AppNews';
|
||||
<script>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import HeaderSection from './landing/HeaderSection';
|
||||
import HeroSection from './landing/HeroSection';
|
||||
import ComponentSection from './landing/ComponentSection';
|
||||
import ThemeSection from './landing/ThemeSection';
|
||||
import BlockSection from './landing/BlockSection';
|
||||
import DesignerSection from './landing/DesignerSection';
|
||||
import TemplateSection from './landing/TemplateSection';
|
||||
import UsersSection from './landing/UsersSection';
|
||||
import FeaturesSection from './landing/FeaturesSection';
|
||||
import FooterSection from './landing/FooterSection';
|
||||
import AppNews from '@/layouts/AppNews';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -70,12 +66,13 @@ export default {
|
|||
this.replaceTableTheme(value);
|
||||
},
|
||||
replaceTableTheme(newTheme) {
|
||||
debugger
|
||||
const elementId = 'home-table-link';
|
||||
const linkElement = document.getElementById(elementId);
|
||||
const tableThemeTokens = linkElement.getAttribute('href').split('/');
|
||||
const currentTableTheme = tableThemeTokens[tableThemeTokens.length - 2];
|
||||
const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;
|
||||
const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null;
|
||||
|
||||
if (currentTableTheme !== newTheme) {
|
||||
if (currentTableTheme !== newTheme && tableThemeTokens) {
|
||||
const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
|
||||
|
||||
const cloneLinkElement = linkElement.cloneNode(true);
|
||||
|
|
@ -110,8 +107,8 @@ export default {
|
|||
AppNews
|
||||
}
|
||||
}
|
||||
</script> -->
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './assets/styles/landing/landing.scss';
|
||||
@import '@/assets/styles/landing/landing.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
|
||||
<div class="section-header">PrimeBlocks</div>
|
||||
<p class="section-detail">350+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
|
||||
<div class="flex justify-content-center mt-4">
|
||||
<a href="https://www.primefaces.org/primeblocks-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
|
||||
<span>Learn More</span>
|
||||
<i class="pi pi-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
<section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', {'blocks-animation': setAnimation}]">
|
||||
<div class="flex">
|
||||
<div class="prime-block flex align-self-stretch p-1">
|
||||
<div class="block-sidebar w-1 p-3">
|
||||
<div class="logo">
|
||||
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
|
||||
</div>
|
||||
<div class="sidebar-menu mt-5">
|
||||
<div class="bar w-8 my-3"></div>
|
||||
<div class="bar w-9 my-3"></div>
|
||||
<div class="bar w-7 my-3"></div>
|
||||
<div class="bar w-6 my-3"></div>
|
||||
<div class="bar w-9 my-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content flex-1 p-4 flex flex-column">
|
||||
<div class="bar w-1"></div>
|
||||
<div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
|
||||
<div class="flex justify-content-between">
|
||||
<div class="block-item w-6rem">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex-1">
|
||||
<div class="circle circle-highlight"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item block-item-active animation-1 mx-3 w-6rem">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item w-6rem">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="circle circle-highligh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<div class="block-item w-6rem">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="circle circle-highligh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item mx-3 w-6rem">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="circle circle-highligh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item w-6rem">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-3"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="circle circle-highligh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex -ml-8">
|
||||
<div class="prime-block p-1 flex align-self-stretch flex-column">
|
||||
<div class="block-header py-3 px-4 flex justify-content-between align-items-center">
|
||||
<div class="logo pr-5">
|
||||
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
|
||||
</div>
|
||||
<div class="flex-auto sidebar-menu flex">
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
</div>
|
||||
<div class="circle circle-highlight"></div>
|
||||
</div>
|
||||
<div class="block-content flex-1 p-4 flex flex-column">
|
||||
<div class="bar w-1"></div>
|
||||
<div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
|
||||
<div class="flex justify-content-between">
|
||||
<div class="block-item w-4rem">
|
||||
<div class="bar w-2rem "></div>
|
||||
<span class="text my-2">26 %</span>
|
||||
<div class="box box-orange"></div>
|
||||
</div>
|
||||
<div class="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
|
||||
<div class="bar w-1rem"></div>
|
||||
<span class="text my-2">6 %</span>
|
||||
<div class="box box-pink"></div>
|
||||
</div>
|
||||
<div class="block-item mr-3 w-4rem">
|
||||
<div class="bar w-4rem "></div>
|
||||
<span class="text my-2">62 %</span>
|
||||
<div class="box box-green"></div>
|
||||
</div>
|
||||
<div class="block-item w-4rem">
|
||||
<div class="bar w-2rem "></div>
|
||||
<span class="text my-2">39 %</span>
|
||||
<div class="box box-blue"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prime-block flex align-self-stretch p-1">
|
||||
<div class="block-sidebar p-3">
|
||||
<div class="logo">
|
||||
<img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" />
|
||||
</div>
|
||||
<div class="sidebar-menu mt-5">
|
||||
<div class="circle my-3"></div>
|
||||
<div class="circle my-3"></div>
|
||||
<div class="circle my-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-sidebar-list px-4">
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
<div class="bar w-3rem my-3"></div>
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
<div class="bar w-1rem my-3"></div>
|
||||
<div class="bar w-3rem my-3"></div>
|
||||
<div class="bar w-3rem my-3"></div>
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
</div>
|
||||
<div class="block-content flex-1 my-5 mx-4 flex flex-column">
|
||||
<div class="block-main h-full flex justify-content-center align-items-center flex-column px-2">
|
||||
<div class="flex justify-content-between ">
|
||||
<div class="block-item w-3 flex justify-content-between flex-column ">
|
||||
<div class="bar w-full "></div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<div class="circle circle-small circle-highlight mr-2"></div>
|
||||
<div class="bar w-2rem"></div>
|
||||
</div>
|
||||
<div class="bar bar-button w-4rem mt-4"></div>
|
||||
</div>
|
||||
<div class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
|
||||
<div class="bar w-full "></div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<div class="circle circle-small circle-highlight mr-2"></div>
|
||||
<div class="bar w-2rem"></div>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<div class="circle circle-small circle-highlight mr-2"></div>
|
||||
<div class="bar w-3rem"></div>
|
||||
</div>
|
||||
<div class="bar bar-button w-4rem mt-4"></div>
|
||||
</div>
|
||||
<div class="block-item w-3 flex justify-content-between flex-column">
|
||||
<div class="bar w-full "></div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<div class="circle circle-small circle-highlight mr-2"></div>
|
||||
<div class="bar w-2rem"></div>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<div class="circle circle-small circle-highlight mr-2"></div>
|
||||
<div class="bar w-2rem"></div>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<div class="circle circle-small circle-highlight mr-2"></div>
|
||||
<div class="bar w-2rem"></div>
|
||||
</div>
|
||||
<div class="bar bar-button w-4rem mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex -mr-8">
|
||||
<div class="prime-block flex align-self-stretch p-1">
|
||||
<div class="block-sidebar w-1 p-3">
|
||||
<div class="logo">
|
||||
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
|
||||
</div>
|
||||
<div class="sidebar-menu mt-5">
|
||||
<div class="bar w-8 my-3"></div>
|
||||
<div class="bar w-9 my-3"></div>
|
||||
<div class="bar w-7 my-3"></div>
|
||||
<div class="bar w-6 my-3"></div>
|
||||
<div class="bar w-9 my-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content flex-1 p-4 flex flex-column">
|
||||
<div class="block-main h-full flex justify-content-center align-items-center flex-column">
|
||||
<div class="bar w-3 mb-3"></div>
|
||||
<div class="bar w-4 mb-5"></div>
|
||||
<div class="flex justify-content-between">
|
||||
<div class="block-item w-6rem p-0">
|
||||
<div class="block-image"></div>
|
||||
<div class="p-2">
|
||||
<div>
|
||||
<div class="bar w-4rem my-2"></div>
|
||||
<div class="bar w-2rem mb-2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex-1">
|
||||
<div class="circle circle-highlight circle-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item block-item-active mx-3 animation-1 w-6rem p-0">
|
||||
<div class="block-image"></div>
|
||||
<div class="p-2">
|
||||
<div>
|
||||
<div class="bar w-4rem my-2"></div>
|
||||
<div class="bar w-2rem mb-2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex-1">
|
||||
<div class="circle circle-highlight circle-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item w-6rem p-0">
|
||||
<div class="block-image"></div>
|
||||
<div class="p-2">
|
||||
<div>
|
||||
<div class="bar w-4rem my-2"></div>
|
||||
<div class="bar w-2rem mb-2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex-1">
|
||||
<div class="circle circle-highlight circle-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prime-block flex align-self-stretch p-1">
|
||||
<div class="block-sidebar p-3">
|
||||
<div class="logo">
|
||||
<img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" />
|
||||
</div>
|
||||
<div class="sidebar-menu mt-5">
|
||||
<div class="circle my-3"></div>
|
||||
<div class="circle my-3"></div>
|
||||
<div class="circle my-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-sidebar-list px-4">
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
<div class="bar w-3rem my-3"></div>
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
<div class="bar w-1rem my-3"></div>
|
||||
<div class="bar w-3rem my-3"></div>
|
||||
<div class="bar w-3rem my-3"></div>
|
||||
<div class="bar w-2rem my-3"></div>
|
||||
</div>
|
||||
<div class="block-content flex-1 my-5 mx-4 flex flex-column">
|
||||
<div class="block-main h-full flex justify-content-center align-items-center flex-column px-2">
|
||||
<div class="flex justify-content-between">
|
||||
<div class="block-item block-item-table block-item-active animation-1 flex ">
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item block-item-col flex ">
|
||||
<div class="flex">
|
||||
<div class="circle circle-small circle-highlight -mr-1"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
<div class="block-item block-item-col flex ">
|
||||
<div class="flex">
|
||||
<div class="circle circle-small circle-highlight -mr-1"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
<div class="block-item block-item-col flex ">
|
||||
<div class="flex">
|
||||
<div class="circle circle-small circle-highlight -mr-1"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
<div class="bar w-3rem mx-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="prime-block p-1 flex align-self-stretch flex-column">
|
||||
<div class="block-header py-3 px-4 flex justify-content-between align-items-center">
|
||||
<div class="logo pr-5">
|
||||
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
|
||||
</div>
|
||||
<div class="flex-auto sidebar-menu flex">
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
<div class="bar w-2rem mx-2"></div>
|
||||
</div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="block-content flex-1 p-4 flex flex-column">
|
||||
<div class="block-main h-full flex justify-content-center align-items-center flex-column">
|
||||
<div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
|
||||
<div class="-mt-4">
|
||||
<img src="demo/images/landing/blocks/question.svg" alt="question mark" />
|
||||
</div>
|
||||
<div class="bar w-2rem mt-2"></div>
|
||||
<div class="bar w-6rem mt-2"></div>
|
||||
<div class="bar w-4rem mt-2"></div>
|
||||
<div class="flex">
|
||||
<div class="bar bar-highlight bar-button w-4rem mr-2 mt-4"></div>
|
||||
<div class="bar bar-button w-4rem mr-2 mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setAnimation: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setAnimation = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<section class="landing-components py-8">
|
||||
<div class="section-header">Components</div>
|
||||
<p class="section-detail"><span class="font-bold text-900">Over 90</span> Vue UI Components with top-notch quality to help you implement all your UI requirements in style.</p>
|
||||
<div class="components-main flex mt-7 relative md:justify-content-center overflow-auto">
|
||||
<div class="flex flex-column px-3 py-8 z-1">
|
||||
<div class="box p-4 mb-5">
|
||||
<span class="text-secondary font-medium block mb-3">Balance</span>
|
||||
<div class="flex">
|
||||
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="mr-2" />
|
||||
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<span class="text-secondary font-medium block mt-5 mb-3">Category</span>
|
||||
<div class="flex justify-content-between">
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
|
||||
<label for="category1" class="ml-2 font-medium">Clothing</label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
|
||||
<label for="category2" class="ml-2 font-medium">Fitness</label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
|
||||
<label for="category3" class="ml-2 font-medium">Electronics</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box p-4 mb-5">
|
||||
<Chart type="line" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
<div class="box p-4 mb-5">
|
||||
<TabMenu :model="items" v-model:activeIndex="activeTabIndex"/>
|
||||
</div>
|
||||
<div class="box p-4">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<img src="demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
|
||||
<span class="font-medium">Darrel Steward</span>
|
||||
<ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
|
||||
<span class="text-secondary font-medium">15%</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<img src="demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
|
||||
<span class="font-medium">Albert Flores</span>
|
||||
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
|
||||
<span class="text-secondary font-medium">85%</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<img src="demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
|
||||
<span class="font-medium">Kathryn Murphy</span>
|
||||
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
|
||||
<span class="text-secondary font-medium">50%</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<img src="demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
|
||||
<span class="font-medium">Cody Fisher</span>
|
||||
<ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
|
||||
<span class="text-secondary font-medium">75%</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<img src="demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
|
||||
<span class="font-medium">Brandon Atkinson</span>
|
||||
<ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
|
||||
<span class="text-secondary font-medium">60%</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column justify-content-start px-3 z-1">
|
||||
<div class="box p-4 mb-5">
|
||||
<div class="surface-card mb-4 w-20rem text-center p-5" style="border-radius:'10px'">
|
||||
<img src="demo/images/landing/watch.png" alt="Watch"/>
|
||||
</div>
|
||||
<div class="flex align-items-center mb-4">
|
||||
<div class="flex flex-column">
|
||||
<span class="block font-semibold mb-1">Brown Watch</span>
|
||||
<span class="text-secondary text-sm">Premium Quality</span>
|
||||
</div>
|
||||
<span class="font-medium text-xl ml-auto">$12.45</span>
|
||||
</div>
|
||||
<Button label="Add to Cart" icon="pi pi-shopping-cart" class="w-full p-button-outlined"></Button>
|
||||
</div>
|
||||
<div class="box p-4 mb-5">
|
||||
<Tree :value="nodes" class="bg-transparent border-none p-0" />
|
||||
</div>
|
||||
<div class="box p-4 mb-5">
|
||||
<div class="flex align-items-center">
|
||||
<Chip label="Vue" class="mr-2 font-medium" removable />
|
||||
<span class="font-medium">Typescript</span>
|
||||
<InputSwitch class="ml-auto" v-model="switchValue"></InputSwitch>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column px-3 py-5 z-1">
|
||||
<div class="box p-4 mb-5">
|
||||
<div class="flex justify-content-center">
|
||||
<Slider v-model="rangeValues" range class="w-20rem"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box p-4 mb-5">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex mb-3">
|
||||
<span class="mr-3">
|
||||
<img src="demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
|
||||
</span>
|
||||
<div class="flex flex-column">
|
||||
<span class="font-bold mb-2">Amanda Williams</span>
|
||||
<p class="m-0 text-secondary">Webmaster</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius:'10px'">
|
||||
<i class="pi pi-home text-xl mr-3"></i>
|
||||
<span class="flex flex-column">
|
||||
<span class="font-bold mb-1">Dashboard</span>
|
||||
<span class="m-0 text-secondary">Control Panel</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius:'10px'">
|
||||
<i class="pi pi-envelope text-xl mr-3"></i>
|
||||
<span class="flex flex-column">
|
||||
<span class="font-bold mb-1">Inbox</span>
|
||||
<span class="m-0 text-secondary">View Messages</span>
|
||||
</span>
|
||||
<Badge value="3" class="ml-auto"></Badge>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius:'10px'">
|
||||
<i class="pi pi-cog text-xl mr-3"></i>
|
||||
<span class="flex flex-column">
|
||||
<span class="font-bold mb-1">Profile</span>
|
||||
<span class="m-0 text-secondary">Account Settings</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box p-4 mb-5">
|
||||
<Calendar v-model="dateValue" :inline="true" :showWeek="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>
|
||||
<div class="components-strip-bottom absolute w-full md:w-6 h-8rem bottom-0 right-0"></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 240,
|
||||
value2: 356,
|
||||
category: 'C',
|
||||
chartData: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Income',
|
||||
data: [40, 59, 40, 50, 56, 40, 70],
|
||||
fill: true,
|
||||
borderColor: '#03C4E8',
|
||||
tension: .4,
|
||||
backgroundColor: 'rgba(3, 196, 232, .2)'
|
||||
}
|
||||
]
|
||||
},
|
||||
chartOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
x: {
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pbValue1: 15,
|
||||
pbValue2: 85,
|
||||
pbValue3: 50,
|
||||
pbValue4: 75,
|
||||
pbValue5: 60,
|
||||
activeTabIndex: 0,
|
||||
radioValue: 'C',
|
||||
nodes: null,
|
||||
switchValue: true,
|
||||
selectButtonValue: 1,
|
||||
dateValue: null,
|
||||
rangeValues: [20, 80],
|
||||
items: [
|
||||
{label: 'Home', icon: 'pi pi-fw pi-home'},
|
||||
{label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
|
||||
{label: 'Settings', icon: 'pi pi-fw pi-cog'}
|
||||
],
|
||||
selectButtonOptions: [
|
||||
{name: 'Prime', value: 1},
|
||||
{name: 'Vue', value: 2},
|
||||
{name: 'Themes', value: 3}
|
||||
]
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeNodes().then(data => this.nodes = data);
|
||||
},
|
||||
methods: {
|
||||
setCategory(category) {
|
||||
this.category = category;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<section class="landing-designer py-8">
|
||||
<div class="section-header">Theme Designer</div>
|
||||
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
|
||||
<div class="designer-main mt-7 justify-content-center pad-section"
|
||||
:style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize:'cover'}">
|
||||
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
|
||||
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
|
||||
<div class="text-center mb-4">
|
||||
<img :src="'demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
|
||||
</div>
|
||||
<div class="p-fluid">
|
||||
<span class="font-semibold block mb-3">Primary</span>
|
||||
<div>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color:#4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color:#03E8BF" @click="changeTheme('#03E8BF', '#02ba99')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color:#916AFF" @click="changeTheme('#916AFF', '#7455cc')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link" style="background-color:#FFBD80" @click="changeTheme('#FFBD80','#cc9766')"></button>
|
||||
</div>
|
||||
|
||||
<span class="font-semibold block mt-4 mb-3">Font</span>
|
||||
<Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
|
||||
|
||||
<span class="font-semibold block mt-4 mb-3">Size</span>
|
||||
<div class="flex align-items-center">
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="size-small" value="small" name="sizevalue" v-model="size" />
|
||||
<label for="size-small" class="ml-2 font-medium">Small</label>
|
||||
</div>
|
||||
<div class="flex align-items-center ml-4">
|
||||
<RadioButton id="size-normal" value="normal" name="sizevalue" v-model="size" />
|
||||
<label for="size-normal" class="ml-2 font-medium">Normal</label>
|
||||
</div>
|
||||
<div class="flex align-items-center ml-4">
|
||||
<RadioButton id="size-large" value="large" name="sizevalue" v-model="size" />
|
||||
<label for="size-large" class="ml-2 font-medium">Large</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="font-semibold block mt-4 mb-3">Input Style</span>
|
||||
<div class="flex align-items-center mb-6">
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="inputStyle1" value="outlined" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
|
||||
<label for="inputStyle1" class="ml-2 font-medium">Outlined</label>
|
||||
</div>
|
||||
<div class="flex align-items-center ml-4">
|
||||
<RadioButton id="inputStyle2" value="filled" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
|
||||
<label for="inputStyle2" class="ml-2 font-medium">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
|
||||
<span>View Full Version</span>
|
||||
<i class="pi pi-arrow-right ml-auto"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="editorclass" style="border-radius: '10px'" :ref="editorRef">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 xl:col-6">
|
||||
<label for="username" class="font-semibold mb-3 p-component">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 xl:col-6">
|
||||
<label for="email" class="font-semibold mb-3 p-component">Email</label>
|
||||
<InputText id="email" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 xl:col-6">
|
||||
<label for="price" class="font-semibold mb-3 p-component">Price</label>
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputNumber id="price" placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field col-12 xl:col-6">
|
||||
<label for="date" class="font-semibold mb-3 p-component">Date</label>
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-calendar"></i>
|
||||
</span>
|
||||
<InputMask id="date" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field col-12 xl:col-6">
|
||||
<span class="font-semibold mb-2 block mb-3 mt-3 p-component">City</span>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
</div>
|
||||
<div class="field col-12 xl:col-6">
|
||||
<label for="email" class="font-semibold mb-3 mt-3 p-component">Range</label>
|
||||
<Slider v-model="range" range />
|
||||
|
||||
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Checkboxes</span>
|
||||
<div class="flex flex-column xl:flex-row xl:align-items-center">
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox id="cb1" :value="value1" name="cbvalue" v-model="values"/>
|
||||
<label for="cb1" class="ml-2 font-medium p-component white-space-nowrap">Option 1</label>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3 xl:mt-0 xl:ml-4">
|
||||
<Checkbox id="cb2" :value="value2" name="cbvalue" v-model="values" />
|
||||
<label for="cb2" class="ml-2 font-medium p-component white-space-nowrap">Option 2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
|
||||
<div class="flex align-items-center">
|
||||
<Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button>
|
||||
<Button type="button" label="Clear" icon="pi pi-times" class="p-button-outlined ml-1"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 'normal',
|
||||
font: {label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol'},
|
||||
fonts: [
|
||||
{label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif'},
|
||||
{label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol'},
|
||||
{label: 'Trebuches MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif'},
|
||||
{label: 'Verdana', value: 'Verdana,Geneva,sans-serif'},
|
||||
],
|
||||
selectedCity: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
range: [20, 80],
|
||||
value1: 1,
|
||||
value2: 2,
|
||||
values: []
|
||||
}
|
||||
},
|
||||
editor: null,
|
||||
methods: {
|
||||
changeTheme(color, darker) {
|
||||
this.editor.style.setProperty('--dd-primary', color);
|
||||
this.editor.style.setProperty('--dd-primary-darker', darker);
|
||||
},
|
||||
changeFont(event){
|
||||
this.editor.style.setProperty('--dd-font', event.value.value);
|
||||
this.font = event.value;
|
||||
},
|
||||
onChange(value) {
|
||||
this.$primevue.config.inputStyle = value;
|
||||
},
|
||||
editorRef(el) {
|
||||
this.editor = el;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editorclass() {
|
||||
return ['p-4 designer-demo', {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'demo-size-small': this.size === 'small',
|
||||
'demo-size-large': this.size === 'large'
|
||||
}];
|
||||
},
|
||||
inputstyle() {
|
||||
return this.$primevue.config.inputStyle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<section class="landing-features py-8">
|
||||
<div class="section-header">Features</div>
|
||||
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
|
||||
<div class="grid mt-7 pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 text-lg">90+ UI Components</div>
|
||||
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 text-lg">Productivity</div>
|
||||
<p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 text-lg">Accessibility</div>
|
||||
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 text-lg">Mobile</div>
|
||||
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 text-lg">Themes</div>
|
||||
<p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3"/>
|
||||
<div class="font-semibold mb-3 text-lg">Typescript</div>
|
||||
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<section class="landing-footer pt-8 pad-section">
|
||||
<div class="flex flex-wrap z-1">
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">General</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">Support</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider mt-8" />
|
||||
|
||||
<div class="flex justify-content-between py-6">
|
||||
<span>
|
||||
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
|
||||
</span>
|
||||
<div class="flex align-items-center">
|
||||
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
||||
<i class="pi pi-twitter"></i>
|
||||
</a>
|
||||
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
||||
<i class="pi pi-github"></i>
|
||||
</a>
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||
<i class="pi pi-discord"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<section :ref="containerRef" :class="['landing-header pad-section', {'landing-header-active': menuActive}]">
|
||||
<span>
|
||||
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo"/>
|
||||
</span>
|
||||
|
||||
<div class="flex align-items-center">
|
||||
<nav class="scalein origin-top">
|
||||
<ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
|
||||
<li class="mr-0 lg:mr-2">
|
||||
<nuxt-link to="/setup">
|
||||
<img src="demo/images/landing/core-icon.svg" alt="primevue core" />
|
||||
<span>Components</span>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="mr-0 lg:mr-2">
|
||||
<a href="https://www.primefaces.org/primeblocks-vue">
|
||||
<img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" />
|
||||
<span>Blocks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-0 lg:mr-2">
|
||||
<a href="https://www.primefaces.org/designer-vue">
|
||||
<img src="demo/images/landing/designer-icon.svg" alt="primevue templates" />
|
||||
<span>Designer</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mr-0 lg:mr-2">
|
||||
<a href="https://www.primefaces.org/store/templates.xhtml">
|
||||
<img src="demo/images/landing/templates-icon.svg" alt="primevue templates" />
|
||||
<span>Templates</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<a href="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
|
||||
<i class="pi pi-github"></i>
|
||||
</a>
|
||||
<a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
|
||||
<i class="pi pi-discord"></i>
|
||||
</a>
|
||||
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
|
||||
<i :class="['pi', {'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme()}]"></i>
|
||||
</button>
|
||||
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" @click="toggleMenuActive" >
|
||||
<i class="pi pi-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['theme-toggle'],
|
||||
data() {
|
||||
return {
|
||||
menuActive: false
|
||||
}
|
||||
},
|
||||
scrollListener: null,
|
||||
container: null,
|
||||
mounted() {
|
||||
this.bindScrollListener();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.scrollListener) {
|
||||
this.unbindScrollListener();
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
this.checkSticky();
|
||||
},
|
||||
methods: {
|
||||
isDarkTheme() {
|
||||
return this.$appState.darkTheme === true;
|
||||
},
|
||||
toggleTheme() {
|
||||
this.$emit('theme-toggle');
|
||||
},
|
||||
toggleMenuActive() {
|
||||
this.menuActive = !this.menuActive;
|
||||
},
|
||||
bindScrollListener() {
|
||||
if (!this.scrollListener && this.container) {
|
||||
this.scrollListener = () => {
|
||||
this.checkSticky();
|
||||
}
|
||||
}
|
||||
window.addEventListener('scroll', this.scrollListener);
|
||||
},
|
||||
unbindScrollListener() {
|
||||
if (this.scrollListener) {
|
||||
window.removeEventListener('scroll', this.scrollListener);
|
||||
this.scrollListener = null;
|
||||
}
|
||||
},
|
||||
containerRef(el) {
|
||||
this.container = el;
|
||||
},
|
||||
checkSticky() {
|
||||
if (window.scrollY > 0)
|
||||
this.container.classList.add('landing-header-sticky');
|
||||
else
|
||||
this.container.classList.remove('landing-header-sticky');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<section :class="['landing-hero flex align-items-center flex-column justify-content-center relative', {'hero-animation': setAnimation}]">
|
||||
<div class="hero-inner z-2 relative">
|
||||
<div class="flex flex-column md:align-items-center md:flex-row">
|
||||
<div class="p-2 flex flex-row md:flex-column">
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<img src="demo/images/landing/templates-icon.svg" alt="primevue templates" />
|
||||
<div class="name">
|
||||
<b>Templates</b>
|
||||
<span>Spectacular Designs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/designer-vue')">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<img src="demo/images/landing/designer-icon.svg" alt="primevue templates" />
|
||||
<div class="name">
|
||||
<b>Theme Designer</b>
|
||||
<span>Create Your Own</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 flex flex-row md:flex-column">
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<img src="demo/images/landing/core-icon.svg" alt="primevue core" />
|
||||
<div class="name">
|
||||
<b>Open Source</b>
|
||||
<span>90+ UI Components</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-link to="/setup">
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
|
||||
<div class="hero-box-inner text-center">
|
||||
<img src="demo/images/landing/overview-icon.svg" alt="primevue main" />
|
||||
<div class="name">
|
||||
<b class="font-bold">NEXT-GEN VUE UI</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<img src="demo/images/landing/css-icon.svg" alt="primevue icons" />
|
||||
<div class="name">
|
||||
<b>CSS Utilities</b>
|
||||
<span>PrimeFlex CSS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 flex flex-row md:flex-column">
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeblocks-vue')">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" />
|
||||
<div class="name">
|
||||
<b>Prime Blocks</b>
|
||||
<span>350+ UI Blocks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-link to="/icons">
|
||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<img src="demo/images/landing/icons-icon.svg" alt="primevue templates" />
|
||||
<div class="name">
|
||||
<b>Icon Library</b>
|
||||
<span>200+ Icons</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-border-top hidden md:block"></div>
|
||||
<div class="hero-border-left hidden md:block"></div>
|
||||
<div class="hero-border-right hidden md:block"></div>
|
||||
</div>
|
||||
|
||||
<section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
|
||||
<router-link to="/setup" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
|
||||
Get Started
|
||||
<i class="pi pi-arrow-right ml-3"></i>
|
||||
</router-link>
|
||||
<div class="box download-box font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out">
|
||||
<i class="download-icon pi pi-download mr-3"></i>
|
||||
<span class="font-bold" :style="{fontFamily:'monaco'}">npm i primevue</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="hero-bg absolute top-0 left-0 right-0 bottom-0 z-0">
|
||||
<div class="hero-strip-top"></div>
|
||||
<div class="hero-strip-left"></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setAnimation: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setAnimation = true
|
||||
},
|
||||
methods: {
|
||||
navigateTo(url) {
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<section class="landing-templates theme-dark py-8">
|
||||
<div class="section-header">Templates</div>
|
||||
<p class="section-detail">Professionally designed highly customizable application templates to get started in style.</p>
|
||||
<div class="flex justify-content-center mt-4">
|
||||
<a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
|
||||
<span>Learn More</span>
|
||||
<i class="pi pi-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
<section :class="['templates flex justify-content-center align-items-center flex-column mt-7', {'templates-animation': setAnimation}]">
|
||||
<div class="flex">
|
||||
<div class="template-block block-1 mr-2 flex justify-content-center align-items-center"
|
||||
:style="{backgroundImage: imageBg('diamond')}">
|
||||
<a class="templates-btn" target="_blank" href="https://www.primefaces.org/diamond-vue/" >Diamond Preview</a>
|
||||
</div>
|
||||
<div
|
||||
class="template-block block-2 ml-2 flex justify-content-center align-items-center"
|
||||
:style="{backgroundImage: imageBg('freya')}">
|
||||
<a class="templates-btn" target="_blank" href="https://www.primefaces.org/freya-vue/" >Freya Preview</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex my-4">
|
||||
<div class="template-block block-3 mr-2 flex justify-content-center align-items-center"
|
||||
:style="{backgroundImage: imageBg('atlantis')}">
|
||||
<a class="templates-btn" target="_blank" href="https://www.primefaces.org/atlantis-vue/" >Atlantis Preview</a>
|
||||
</div>
|
||||
<div class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column">
|
||||
<img class="img-1"
|
||||
:src="templateImg()" height="110">
|
||||
</div>
|
||||
<div class="template-block block-4 ml-2 flex justify-content-center align-items-center"
|
||||
:style="{backgroundImage: imageBg('apollo')}">
|
||||
<a class="templates-btn" target="_blank" href="https://www.primefaces.org/apollo-vue/" >Apollo Preview</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="template-block block-5 mr-2 flex justify-content-center align-items-center"
|
||||
:style="{backgroundImage: imageBg('serenity')}">
|
||||
<a class="templates-btn" target="_blank" href="https://www.primefaces.org/serenity-vue/" >Serenity Preview</a>
|
||||
</div>
|
||||
<div class="template-block block-6 ml-2 flex justify-content-center align-items-center"
|
||||
:style="{backgroundImage: imageBg('ultima')}">
|
||||
<a class="templates-btn" target="_blank" href="https://www.primefaces.org/ultima-vue/" >Ultima Preview</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lines">
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="left">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setAnimation: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setAnimation = true
|
||||
},
|
||||
methods: {
|
||||
imageBg(template) {
|
||||
const isDark = this.$appState.darkTheme;
|
||||
const url = template === 'templates-text' ? 'png' : 'jpeg';
|
||||
|
||||
return `url('demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`
|
||||
},
|
||||
templateImg() {
|
||||
return `demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
:style="{backgroundImage: imageBg('diamond')}">
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<section class="landing-themes py-8">
|
||||
<div class="section-header">Themes</div>
|
||||
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
|
||||
<div class="flex flex-wrap justify-content-center">
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('lara')}]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('md')}]" @click="changeTheme('md', 'indigo')">Material</button>
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
||||
<a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
|
||||
</div>
|
||||
<div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
|
||||
<div class="box overflow-hidden z-1 p-5 table-container">
|
||||
<DataTable :value="customers" :paginator="true" :rows="5"
|
||||
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
|
||||
<h5 class="m-0">Customers</h5>
|
||||
<span class="p-input-icon-left mt-3 sm:mt-0 w-full sm:w-auto">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Search" class="w-full" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
No customers found.
|
||||
</template>
|
||||
<template #loading>
|
||||
Loading customers data. Please wait.
|
||||
</template>
|
||||
<Column selectionMode="multiple" style="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" sortable style="min-width: 14rem">
|
||||
<template #body="{data}">
|
||||
{{data.name}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" sortable style="min-width: 14rem">
|
||||
<template #body="{data}">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
|
||||
<span class="image-text">{{data.country.name}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
|
||||
<template #body="{data}">
|
||||
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
|
||||
<template #body="{data}">
|
||||
{{formatDate(data.date)}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem">
|
||||
<template #body="{data}">
|
||||
{{formatCurrency(data.balance)}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" sortable style="min-width: 10rem">
|
||||
<template #body="{data}">
|
||||
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="activity" header="Activity" sortable style="min-width: 6rem">
|
||||
<template #body="{data}">
|
||||
<ProgressBar :value="data.activity" :showValue="false" style="height: 7px" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #body>
|
||||
<Button type="button" icon="pi pi-cog" class="p-button-text"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomerService from '../../service/CustomerService';
|
||||
import {FilterMatchMode,FilterOperator} from 'primevue/api';
|
||||
|
||||
export default {
|
||||
emits: ['table-theme-change'],
|
||||
props: {
|
||||
theme: null
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
selectedCustomers: null,
|
||||
filters: {
|
||||
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||
'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'representative': {value: null, matchMode: FilterMatchMode.IN},
|
||||
'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]},
|
||||
'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||
'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||
'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},
|
||||
'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
|
||||
},
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
customerService: null,
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
},
|
||||
mounted() {
|
||||
this.customerService.getCustomersLarge().then(data => {
|
||||
this.customers = data;
|
||||
this.customers.forEach(customer => customer.date = new Date(customer.date));
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
changeTheme(name, color) {
|
||||
let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color;
|
||||
this.$emit('table-theme-change', newTheme);
|
||||
},
|
||||
formatDate(value) {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<section class="landing-users py-8 pad-section">
|
||||
<div class="section-header">Who Uses</div>
|
||||
<p class="section-detail">Open source products of PrimeTek are used all around the world by millions of developers.</p>
|
||||
<div class="grid mt-7">
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('fox')" alt="fox logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('airbus')" alt="airbus logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('mercedes')" alt="mercedes logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('ebay')" alt="ebay logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('ford')" alt="ford logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('vw')" alt="volkswage logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('intel')" alt="intel logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('unicredit')" alt="unicredit logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('lufthansa')" alt="lufthansa logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('nvidia')" alt="nvidia logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('verizon')" alt="verizon logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
||||
<img :src="imgSrc('amex')" alt="american express logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
imgSrc(brand) {
|
||||
return `demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colorScheme() {
|
||||
return this.$appState.darkTheme ? 'light' : 'dark';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,375 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Setup</h1>
|
||||
<p>PrimeVue is a rich set of open source native components for Vue.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section documentation">
|
||||
<h3>Module Loader</h3>
|
||||
<p>This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.</p>
|
||||
|
||||
<p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
npm install primevue@^3.17.0-SNAPSHOT --save
|
||||
npm install primeicons --save
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>Next step is setting up PrimeVue configuration.</p>
|
||||
<pre v-code.script><code>
|
||||
import {createApp} from 'vue';
|
||||
import App from './App.vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue);
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
|
||||
<pre v-code.script><code>
|
||||
import {createApp} from 'vue';
|
||||
import App from './App.vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import Dialog from 'primevue/dialog';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue);
|
||||
|
||||
app.component('Dialog', Dialog);
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>Finally you'll be able to utilize the component in your application. See the <b>Styles</b> section to apply styling.</p>
|
||||
<pre v-code><code>
|
||||
<Dialog></Dialog>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<p>Watch the video tutorial that goes through these steps.</p>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/cGTXuyqIwMA" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h5>Single File Components</h5>
|
||||
<p>SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files
|
||||
in your local build instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import Dialog from 'primevue/dialog/sfc';
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h3>Script Tag</h3>
|
||||
<p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PrimeVue Demo</title>
|
||||
<link href="https://unpkg.com/primevue/resources/themes/lara-light-indigo/theme.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://unpkg.com/vue@next"></script>
|
||||
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
|
||||
<script src="https://unpkg.com/primevue/slider/slider.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<p-slider v-model="val"></p-slider>
|
||||
<h6>{{val}}</h6>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const {createApp, ref} = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const val = ref(null);
|
||||
|
||||
return {
|
||||
val
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'p-slider': primevue.slider
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App).use(primevue.config.default).mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
<h3>Styles</h3>
|
||||
<p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you
|
||||
may import them to your main application component.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
primevue/resources/themes/saga-blue/theme.css //theme
|
||||
primevue/resources/primevue.min.css //core css
|
||||
primeicons/primeicons.css //icons
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Free Themes</h5>
|
||||
<p>PrimeVue ships with various free themes to choose from.</p>
|
||||
<pre v-code.css><code>
|
||||
primevue/resources/themes/bootstrap4-light-blue/theme.css
|
||||
primevue/resources/themes/bootstrap4-light-purple/theme.css
|
||||
primevue/resources/themes/bootstrap4-dark-blue/theme.css
|
||||
primevue/resources/themes/bootstrap4-dark-purple/theme.css
|
||||
primevue/resources/themes/md-light-indigo/theme.css
|
||||
primevue/resources/themes/md-light-deeppurple/theme.css
|
||||
primevue/resources/themes/md-dark-indigo/theme.css
|
||||
primevue/resources/themes/md-dark-deeppurple/theme.css
|
||||
primevue/resources/themes/mdc-light-indigo/theme.css
|
||||
primevue/resources/themes/mdc-light-deeppurple/theme.css
|
||||
primevue/resources/themes/mdc-dark-indigo/theme.css
|
||||
primevue/resources/themes/mdc-dark-deeppurple/theme.css
|
||||
primevue/resources/themes/tailwind-light/theme.css
|
||||
primevue/resources/themes/fluent-light/theme.css
|
||||
primevue/resources/themes/lara-light-indigo/theme.css
|
||||
primevue/resources/themes/lara-dark-indigo/theme.css
|
||||
primevue/resources/themes/lara-light-purple/theme.css
|
||||
primevue/resources/themes/lara-dark-purple/theme.css
|
||||
primevue/resources/themes/lara-light-blue/theme.css
|
||||
primevue/resources/themes/lara-dark-blue/theme.css
|
||||
primevue/resources/themes/lara-light-teal/theme.css
|
||||
primevue/resources/themes/lara-dark-teal/theme.css
|
||||
primevue/resources/themes/saga-blue/theme.css
|
||||
primevue/resources/themes/saga-green/theme.css
|
||||
primevue/resources/themes/saga-orange/theme.css
|
||||
primevue/resources/themes/saga-purple/theme.css
|
||||
primevue/resources/themes/vela-blue/theme.css
|
||||
primevue/resources/themes/vela-green/theme.css
|
||||
primevue/resources/themes/vela-orange/theme.css
|
||||
primevue/resources/themes/vela-purple/theme.css
|
||||
primevue/resources/themes/arya-blue/theme.css
|
||||
primevue/resources/themes/arya-green/theme.css
|
||||
primevue/resources/themes/arya-orange/theme.css
|
||||
primevue/resources/themes/arya-purple/theme.css
|
||||
primevue/resources/themes/nova/theme.css
|
||||
primevue/resources/themes/nova-alt/theme.css
|
||||
primevue/resources/themes/nova-accent/theme.css
|
||||
primevue/resources/themes/nova-vue/theme.css
|
||||
primevue/resources/themes/luna-amber/theme.css
|
||||
primevue/resources/themes/luna-blue/theme.css
|
||||
primevue/resources/themes/luna-green/theme.css
|
||||
primevue/resources/themes/luna-pink/theme.css
|
||||
primevue/resources/themes/rhea/theme.css
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>PrimeFlex</h5>
|
||||
<p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
|
||||
recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.</p>
|
||||
|
||||
<h3>Nuxt Integration</h3>
|
||||
<p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
||||
|
||||
<h6>nuxt.config.js</h6>
|
||||
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
||||
<pre v-code.script><code>
|
||||
import { defineNuxtConfig } from 'nuxt3'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
css: [
|
||||
'primevue/resources/themes/saga-blue/theme.css',
|
||||
'primevue/resources/primevue.css',
|
||||
'primeicons/primeicons.css'
|
||||
]
|
||||
})
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h6>primevue.js</h6>
|
||||
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import { defineNuxtPlugin } from "#app";
|
||||
import PrimeVue from "primevue/config";
|
||||
import Button from "primevue/button";
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.use(PrimeVue, {ripple: true});
|
||||
nuxtApp.vueApp.component('Button', Button);
|
||||
//other components that you need
|
||||
});
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h3>Configuration</h3>
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
|
||||
<p>In addition, components require PrimeIcons library for icons.</p>
|
||||
|
||||
<h6>Mandatory</h6>
|
||||
<pre v-code.script><code>
|
||||
dependencies: {
|
||||
"vue": "^3.0.0",
|
||||
"primeicons": "^5.0.0"
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h6>Optional</h6>
|
||||
<p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Dependency</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Charts</td>
|
||||
<td>Charts.js 3.3.2+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Editor</td>
|
||||
<td>Quill.js 1.3.3+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PrimeFlex</td>
|
||||
<td>DataView</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Prop Cases</h5>
|
||||
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
|
||||
<pre v-code><code>
|
||||
<Dialog :showHeader="false"></Dialog>
|
||||
|
||||
<!-- can be written as -->
|
||||
|
||||
<Dialog :show-header="false"></Dialog>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Ripple</h5>
|
||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
|
||||
your app's entry file (e.g. main.js) during the PrimeVue setup.
|
||||
</p>
|
||||
<pre v-code.script><code>
|
||||
import {createApp} from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {ripple: true});
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Outlined vs Filled Input Styles</h5>
|
||||
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
|
||||
to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application,
|
||||
use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog
|
||||
will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeVue configuration as well.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import {createApp} from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {inputStyle: 'filled'});
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>ZIndex Layering</h5>
|
||||
<p>ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure
|
||||
the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration
|
||||
offers the <i>zIndex</i> property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.</p>
|
||||
<pre v-code.script><code>
|
||||
import {createApp} from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
zIndex: {
|
||||
modal: 1100, //dialog, sidebar
|
||||
overlay: 1000, //dropdown, overlaypanel
|
||||
menu: 1000, //overlay menus
|
||||
tooltip: 1100 //tooltip
|
||||
}
|
||||
});
|
||||
|
||||
</code></pre>
|
||||
<h5>Locale</h5>
|
||||
<p>PrimeVue provides a Locale API to support i18n and l7n, visit the <router-link to="/locale">Locale</router-link> documentation for more information.</p>
|
||||
|
||||
<h5>Browser Support</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table browsers">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="flex align-items-center">
|
||||
<img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem;" class="mr-2">
|
||||
Edge
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex align-items-center">
|
||||
<img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem;" class="mr-2">
|
||||
Firefox
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex align-items-center">
|
||||
<img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem;" class="mr-2">
|
||||
Chrome
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex align-items-center">
|
||||
<img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem;" class="mr-2">
|
||||
Safari
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex align-items-center">
|
||||
<img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem;" class="mr-2">
|
||||
Opera
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Edge</td>
|
||||
<td>Last 2 versions</td>
|
||||
<td>Last 2 versions</td>
|
||||
<td>Last 2 versions</td>
|
||||
<td>Last 2 versions</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Samples</h3>
|
||||
<h5>Typescript</h5>
|
||||
<p>Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI is available as at github.</p>
|
||||
|
||||
<h5>Quickstart with Vue CLI</h5>
|
||||
<p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
|
||||
|
||||
<h5>Quickstart with Vite</h5>
|
||||
<p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
|
||||
|
||||
<h5>Quickstart with Nuxt</h5>
|
||||
<p>A <a href="https://github.com/primefaces/primevue-quickstart-nuxt3">sample application</a> is created for Nuxt 3 users.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
import PrimeVue from '@/components/config/PrimeVue';
|
||||
import CodeHighlight from '@/layouts/AppCodeHighlight';
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
console.log(PrimeVue)
|
||||
nuxtApp.vueApp.use(PrimeVue);
|
||||
nuxtApp.vueApp.directive('code', CodeHighlight)
|
||||
});
|
||||
Loading…
Reference in New Issue