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

lint fixes

pull/3711/head
Tuğçe Küçükoğlu 2023-03-07 17:29:07 +03:00
parent 87b20dd122
commit d68733266f
6 changed files with 156 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
pages/landing/ComponentSection.vue
View File

@ -1,83 +1,69 @@
<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 relative ">
<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 relative">
<div class="components-main-container flex flex-column xl:flex-row mt-7 gap-5 justify-content-center mx-auto w-full xl:w-auto px-5 lg:px-8">
<div class="flex flex-column md:flex-row gap-5 w-full xl:w-auto">
<div class="flex flex-column w-full gap-5 xl:mt-8 z-1 lg:w-28rem md:w-30rem">
<div class="box p-4">
<span class="text-secondary font-medium block mb-3">Balance</span>
<div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass='lg:w-6'/>
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass='lg:w-6'/>
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
</div>
<span class="text-secondary font-medium block mt-5 mb-3">Category</span>
<div class="flex justify-content-between flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue"
@change="setCategory('C')" />
<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')" />
<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')" />
<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 ">
<div class="box p-4">
<Chart type="line" :data="chartData" :options="chartOptions" />
</div>
<div class="box p-4 ">
<div class="box p-4">
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
</div>
<div class="box p-4">
<ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-1.svg"
alt="avatar 1" class="w-2rem h-2rem mr-3" />
<img src="https://primefaces.org/cdn/primevue/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: 0.5rem" />
<ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">15%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-2.svg"
alt="avatar 2" class="w-2rem h-2rem mr-3" />
<img src="https://primefaces.org/cdn/primevue/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: 0.5rem" />
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">85%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-3.svg"
alt="avatar 3" class="w-2rem h-2rem mr-3" />
<img src="https://primefaces.org/cdn/primevue/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: 0.5rem" />
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">50%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-4.svg"
alt="avatar 4" class="w-2rem h-2rem mr-3" />
<img src="https://primefaces.org/cdn/primevue/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: 0.5rem" />
<ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">75%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-5.svg"
alt="avatar 5" class="w-2rem h-2rem mr-3" />
<img src="https://primefaces.org/cdn/primevue/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: 0.5rem" />
<ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">60%</span>
</li>
</ul>
@ -86,7 +72,7 @@
<div class="flex flex-column w-full gap-5 justify-content-start xl:w-24rem z-1">
<div class="box p-4">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="images/landing/brown-watch.png" alt="Watch" class='w-14rem'/>
<img src="images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
</div>
<div class="flex align-items-center mb-4">
<div class="flex flex-column">
@ -100,15 +86,14 @@
<div class="box p-4">
<Tree :value="nodes" class="bg-transparent border-none p-0" />
</div>
<div class="box p-4 ">
<div class="box p-4">
<div class="flex align-items-center">
<Chip label="Vue" class="mr-2 font-medium" removable />
<span class="font-medium">Typescript</span>
<InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
</div>
<div class="mt-5">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions"
optionLabel="name" />
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
</div>
</div>
<div class="box p-4 block xl:hidden">
@ -119,8 +104,7 @@
</div>
</div>
<div
class="flex flex-column gap-5 flex-column md:flex-row xl:flex-column justify-content-between xl:justify-content-start z-1 w-full md:w-auto">
<div class="flex flex-column gap-5 flex-column md:flex-row xl:flex-column justify-content-between xl:justify-content-start z-1 w-full md:w-auto">
<div class="flex flex-column gap-5 xl:mt-5 w-full">
<div class="box p-4 hidden xl:block">
<div class="flex justify-content-center w-full">
@ -131,8 +115,7 @@
<ul class="list-none p-0 m-0">
<li class="flex mb-3">
<span class="mr-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png"
alt="Avatar" class="w-3rem h-3rem" />
<img src="https://primefaces.org/cdn/primevue/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>
@ -140,8 +123,7 @@
</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'">
<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>
@ -150,8 +132,7 @@
</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'">
<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>
@ -161,8 +142,7 @@
</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'">
<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>
@ -174,10 +154,9 @@
</div>
</div>
<div class="box p-4 md:w-6 xl:w-full">
<Calendar v-model="dateValue" :inline="true" :showWeek="true" class="w-full"/>
<Calendar v-model="dateValue" :inline="true" :showWeek="true" class="w-full" />
</div>
</div>
</div>
<div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>

2
pages/landing/DesignerSection.vue
View File

@ -26,7 +26,7 @@
<RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
<label for="size-small" class="ml-2 font-medium">Small</label>
</div>
<div class="flex align-items-center ">
<div class="flex align-items-center">
<RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
<label for="size-normal" class="ml-2 font-medium">Normal</label>
</div>

1
pages/landing/FeaturesSection.vue
View File

@ -61,7 +61,6 @@
</div>
</div>
</div>
</div>
</section>
</template>

1
pages/landing/HeaderSection.vue
View File

@ -48,7 +48,6 @@
</button>
</div>
</div>
</section>
</template>

67
pages/landing/HeroSection.vue
View File

@ -1,25 +1,20 @@
<template>
<section
:class="['landing-hero flex align-items-center flex-column justify-content-center relative', { 'hero-animation': setAnimation }]">
<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="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="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg"
alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/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="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="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg"
alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
<div class="name">
<b>Theme Designer</b>
<span>Create Your Own</span>
@ -28,11 +23,9 @@
</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="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="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg"
alt="primevue core" />
<img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
<div class="name">
<b>Open Source</b>
<span>90+ UI Components</span>
@ -40,22 +33,18 @@
</div>
</div>
<router-link to="/installation">
<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 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="https://primefaces.org/cdn/primevue/images/landing/overview-icon.svg"
alt="primevue main" />
<img src="https://primefaces.org/cdn/primevue/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="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="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg"
alt="primevue icons" />
<img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg" alt="primevue icons" />
<div class="name">
<b>CSS Utilities</b>
<span>PrimeFlex CSS</span>
@ -64,11 +53,9 @@
</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="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="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg"
alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
<div class="name">
<b>Prime Blocks</b>
<span>400+ UI Blocks</span>
@ -76,11 +63,9 @@
</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="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="https://primefaces.org/cdn/primevue/images/landing/icons-icon.svg"
alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/images/landing/icons-icon.svg" alt="primevue templates" />
<div class="name">
<b>Icon Library</b>
<span>200+ Icons</span>
@ -96,15 +81,13 @@
</div>
<section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
<router-link to="/installation"
class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
<router-link to="/installation" 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 w-14rem cursor-pointer 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"
@click="copyMe">
<div class="box download-box w-14rem cursor-pointer 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" @click="copyMe">
<i :class="npmIcon"></i>
<span class="font-bold" :style="{ fontFamily: 'monaco' }" >{{ npmText }}</span>
<span class="font-bold" :style="{ fontFamily: 'monaco' }">{{ npmText }}</span>
</div>
</section>
@ -119,8 +102,8 @@
export default {
data() {
return {
npmIcon:'download-icon pi pi-download mr-3',
npmText:'npm i primevue',
npmIcon: 'download-icon pi pi-download mr-3',
npmText: 'npm i primevue',
setAnimation: false
};
},
@ -129,12 +112,12 @@ export default {
},
methods: {
copyMe() {
navigator.clipboard.writeText("npm i primevue");
this.npmText = 'copied!'
this.npmIcon = 'pi pi-copy download-icon mr-3'
navigator.clipboard.writeText('npm i primevue');
this.npmText = 'copied!';
this.npmIcon = 'pi pi-copy download-icon mr-3';
setTimeout(() => {
this.npmIcon = 'download-icon pi pi-download mr-3'
this.npmText = "npm i primevue"
this.npmIcon = 'download-icon pi pi-download mr-3';
this.npmText = 'npm i primevue';
}, 2000);
},
navigateTo(url) {