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

Merge branch 'master' into v4

pull/5507/head
mertsincan 2024-01-03 11:07:23 +00:00
parent 72d8356b51 8e1354d099
commit 0837cfb54a
7 changed files with 97 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,52 @@
border: 1px solid var(--home-border-color);
border-radius: 10px;
background-color: var(--home-box-bg);
position: relative;
z-index: 0;
&::before,
&::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid var(--home-box-ring-color);
transition: all .5s;
animation: clippath 3s infinite linear;
border-radius: 10px;
opacity: 0;
z-index: -1;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
&:hover {
&::before,
&::after {
opacity: 1;
}
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
.linkbox {

1
assets/styles/layout/variables/landing/_dark.scss
View File

@ -49,4 +49,5 @@
--home-templates-btn-border-bottom:4px solid #424b57;
--home-templates-btn-border-left:3px solid #424b57;
--home-features-card-shadow: none;
--home-box-ring-color: rgba(52, 211, 153, .3);
}

1
assets/styles/layout/variables/landing/_light.scss
View File

@ -49,4 +49,5 @@
--home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
--home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
--home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
--home-box-ring-color: var(--primary-100);
}

42
components/landing/HeroSection.vue
View File

@ -10,7 +10,7 @@
class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold text-lg transition-colors transition-duration-300 hover:border-yellow-600"
>🎉 Introducing the Tailwind CSS Presets <i class="pi pi-arrow-right text-sm"></i
></a>
<h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
</p>
@ -58,7 +58,7 @@
</div>
</div>
<span class="text-secondary font-medium block mt-5 mb-3">Date</span>
<Calendar v-model="dateValue" :showWeek="true" class="w-full" />
<Calendar v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
</div>
<div class="box p-4 fadein animation-duration-500">
<Chart type="line" :data="chartData" :options="chartOptions" />
@ -72,7 +72,7 @@
<div class="mt-5 flex justify-content-center">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
</div>
<div class="mt-5">
<div class="mt-5 pt-1 pb-2">
<Slider v-model="rangeValues" range class="w-full" />
</div>
</div>
@ -80,7 +80,7 @@
<div class="flex flex-column w-6 gap-5 pl-3">
<div class="box p-4 fadein animation-duration-500">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan.png" alt="Watch" class="w-14rem" />
<img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan.png" alt="Watch" class="w-10rem" />
</div>
<div class="flex align-items-center mb-4">
<div class="flex flex-column">
@ -124,6 +124,27 @@
</ul>
</div>
<div class="box p-4 fadein animation-duration-500">
<div class="flex justify-content-between align-items-center mb-5">
<span class="inline-flex align-items-center">
<Checkbox id="cbox" v-model="checked" :binary="true" />
<label for="cbox" class="ml-2">Confirm</label>
</span>
<SplitButton
label="Save"
icon="pi pi-plus"
:model="splitButtonItems"
outlined
:pt="{
button: {
root: 'p-2'
},
menuButton: {
width: 'auto',
root: 'p-2'
}
}"
/>
</div>
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
</div>
</div>
@ -157,9 +178,20 @@ export default {
selectButtonValue: { name: 'Styled', value: 1 },
dateValue: null,
rangeValues: [20, 80],
checked: false,
splitButtonItems: [
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
}
],
items: [
{ label: 'Home', icon: 'pi pi-fw pi-home' },
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' }
{ label: 'Inbox', icon: 'pi pi-fw pi-inbox' }
],
selectButtonOptions: [
{ name: 'Styled', value: 1 },

4
components/lib/card/Card.d.ts vendored
View File

@ -31,6 +31,10 @@ export interface CardPassThroughOptions {
* Used to pass attributes to the body's DOM element.
*/
body?: CardPassThroughOptionType;
/**
* Used to pass attributes to the caption's DOM element.
*/
caption?: CardPassThroughOptionType;
/**
* Used to pass attributes to the title's DOM element.
*/

12
components/lib/card/Card.vue
View File

@ -4,11 +4,13 @@
<slot name="header"></slot>
</div>
<div :class="cx('body')" v-bind="ptm('body')">
<div v-if="$slots.title" :class="cx('title')" v-bind="ptm('title')">
<slot name="title"></slot>
</div>
<div v-if="$slots.subtitle" :class="cx('subtitle')" v-bind="ptm('subtitle')">
<slot name="subtitle"></slot>
<div v-if="$slots.title || $slots.subtitle" :class="cx('caption')" v-bind="ptm('caption')">
<div v-if="$slots.title" :class="cx('title')" v-bind="ptm('title')">
<slot name="title"></slot>
</div>
<div v-if="$slots.subtitle" :class="cx('subtitle')" v-bind="ptm('subtitle')">
<slot name="subtitle"></slot>
</div>
</div>
<div :class="cx('content')" v-bind="ptm('content')">
<slot name="content"></slot>

1
components/lib/card/style/CardStyle.js
View File

@ -4,6 +4,7 @@ const classes = {
root: 'p-card p-component',
header: 'p-card-header',
body: 'p-card-body',
caption: 'p-card-caption',
title: 'p-card-title',
subtitle: 'p-card-subtitle',
content: 'p-card-content',