Merge branch 'master' into v4

assets/styles/layout/landing/_main.scss

@@ -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 {

assets/styles/layout/variables/landing/_dark.scss

@@ -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);
 }

assets/styles/layout/variables/landing/_light.scss

@@ -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);
 }

components/landing/HeroSection.vue

@@ -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 },

components/lib/card/Card.d.ts

@@ -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.
      */

components/lib/card/Card.vue

@@ -4,12 +4,14 @@
             <slot name="header"></slot>
         </div>
         <div :class="cx('body')" v-bind="ptm('body')">
+            <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>
             </div>

components/lib/card/style/CardStyle.js

@@ -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',