Merge branch 'master' of https://github.com/primefaces/primevue

api-generator/components/dialog.js

@@ -90,7 +90,7 @@ const DialogProps = [
         description: "Aria label of the close icon."
     },
     {
-        name: "maxiizable",
+        name: "maximizable",
         type: "boolean",
         default: "false",
         description: "Whether the dialog can be displayed full screen."

src/App.vue

@@ -1,13 +1,11 @@
 <template>
     <div class="layout-wrapper" :class="containerClass">
         <div class="layout-news" v-if="newsActive">
-            <div class="layout-news-container">
+            <div class="layout-news-container" @click="redirect">
-                <a href="https://www.primefaces.org/primeblocks-vue" class="layouts-news-mockup" target="_blank">
+                <img class="layout-news-logo p-ml-2" src="./assets/images/topbar-newyear-logo.svg">
-                    <img class="layouts-news-mockup-image" src="./assets/images/topbar-primeblocks-device.png">
+                <h3 class="layout-news-header p-px-2">DISCOUNT UP TO 50% ON EVERYTHING AT PRIMESTORE</h3>
-                </a>
+                <a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
-                <a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
+                    Read More
-                    LEARN MORE
-                    <i class="pi pi-angle-right"></i>
                 </a>
                 <a tabindex="0" class="layout-news-close" @click="hideNews">
                     <i class="pi pi-times"></i>
@@ -152,6 +150,9 @@ export default {
         },
         isDarkTheme(theme) {
             return theme.indexOf('dark') !== -1 || theme.indexOf('vela') !== -1 || theme.indexOf('arya') !== -1 || theme.indexOf('luna') !== -1;
+        },
+        redirect() {
+            window.location.href = 'https://www.primefaces.org/primeblocks-vue';
         }
     },
     computed: {

src/AppMenu.vue

@@ -22,7 +22,7 @@
                             <Tag v-if="child.badge" :value="child.badge"></Tag>
                         </router-link>
                         <template v-if="child.children">
-                           <router-link :to="child.children[0].to" v-slot="{isActive}" custom>
+                            <router-link :to="child.children[0].to" v-slot="{isActive}" custom>
                                 <div>
                                     <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">
                                         {{child.name}}

src/assets/styles/app/_news.scss

@@ -4,8 +4,8 @@
     justify-content: center;
     align-items: center;
     margin-left: 250px;
-    background-image: linear-gradient(197.37deg, rgba(0, 120, 227, 0.07) -0.38%, rgba(165, 72, 181, 0) 101.89%), linear-gradient(115.93deg, rgba(62, 136, 246, 0.15) 4.86%, rgba(62, 180, 246, 0.0495) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.05) 0%, rgba(62, 158, 246, 0.013) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, rgba(163, 171, 217, 0.1) 19.83%, rgba(163, 171, 217, 0) 97.33%);
+    background-image: url('./assets/images/topbar-newyear-bg.png'), linear-gradient(180deg, #D2000B 0%, #9B0008 100%);
-    background-color: white;
+    background-blend-mode: multiply;
 
     .layout-news-container {
         width: 100%;
@@ -17,49 +17,56 @@
         font-weight: bold;
         font-size: 20px;
 
-        .layouts-news-mockup {
+        .layout-news-header {
-            display: inline-block;
+            margin: 0;
-            overflow: hidden;
+            background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
+            border-radius: 4px 4px 0px 0px;
+            text-shadow: 0px 4px 4.4px rgba(0, 0, 0, 0.3);
+            font-weight: 900;
         }
 
-        img.layouts-news-mockup-image {
+        img.layout-news-logo {
-            height: 70px;
+            position: absolute;
+            left: 250px;
         }
 
         .layout-news-button {
-            border: 2px solid #283738;
+            background: linear-gradient(180deg, #D8000A 0%, rgba(251, 0, 1, 0.4) 89.06%, rgba(255, 0, 0, 0) 100%);
-            color: #283738;
+            border-radius: 5px;
-            font-size: 15px;
+            color: #ffffff;
-            padding: 0.3em 0.3em 0.5em 1em;
+            font-size: 14px;
+            padding: 0.5em 0.75em;
             font-weight: 700;
             border-radius: 3px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
             flex-shrink: 0;
             transition: background-color 0.15s;
             margin-left: 1rem;
-            position: relative;
+            text-decoration: none;
             z-index: 1;
 
             &:hover {
-                background-color: rgba(0, 0, 0, 0.25);
+                background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
             }
         }
     }
 
     .layout-news-close {
         cursor: pointer;
-        color: #fff;
+        color: #ffffff;
         position: absolute;
         z-index: 2;
         right: 28px;
-        background-color: rgba(0,0,0,.3);
+        background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
+        filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17));
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 23px;
+        width: 34px;
-        height: 23px;
+        height: 34px;
+
+        &:hover {
+            background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
+        }
     }
 }

src/assets/styles/app/_responsive.scss

@@ -1,12 +1,19 @@
+@media screen and (max-width: 1280px) {
+    .layout-wrapper {
+        .layout-news {
+            margin-left: 250px;
+            .layout-news-button,
+            .layout-news-logo {
+                display: none;
+            }
+        }
+    }
+}
 
 @media screen and (max-width: 960px) {
     .layout-wrapper {
         .layout-news {
             margin-left: 0;
-
-            .layout-news-button {
-                display: none;
-            }
         }
     }
 

src/components/confirmationoptions/ConfirmationOptions.d.ts

@@ -3,6 +3,10 @@ export interface ConfirmationOptions {
      * Element to align the overlay.
      */
     target?: HTMLElement | undefined;
+    /**
+     * Header text of the dialog.
+     */
+    header?: string | undefined;
     /**
      * Message of the confirmation.
      */
@@ -15,6 +19,10 @@ export interface ConfirmationOptions {
      * Icon to display next to the message.
      */
     icon?: string | undefined;
+    /**
+     * Whether background scroll should be blocked when dialog is visible.
+     */
+    blockScroll?: boolean | undefined;
     /**
      * Callback to execute when action is confirmed.
      */

src/components/confirmationservice/ConfirmationService.d.ts

@@ -5,7 +5,7 @@ declare const plugin: Plugin;
 export default plugin;
 
 interface ConfirmationServiceMethods {
-    require(options: ConfirmationOptions): any;
+    require(options: ConfirmationOptions): void;
     close(): void;
 }
 

src/components/datatable/DataTable.vue

@@ -7,7 +7,7 @@
         <div class="p-datatable-header" v-if="$slots.header">
             <slot name="header"></slot>
         </div>
-        <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="lazy ? 0 : d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+        <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
             <template #start v-if="$slots.paginatorstart">
                 <slot name="paginatorstart"></slot>
@@ -52,7 +52,7 @@
                 </template>
             </DTVirtualScroller>
         </div>
-        <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="lazy ? 0 : d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+        <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
             <template #start v-if="$slots.paginatorstart">
                 <slot name="paginatorstart"></slot>

src/components/splitter/Splitter.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="containerClass">
         <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
-             <component :is="panel"></component>
+            <component :is="panel"></component>
-             <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
+            <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
                 @mousedown="onGutterMouseDown($event, i)"
                 @touchstart="onGutterTouchStart($event, i)"
                 @touchmove="onGutterTouchMove($event, i)"
                 @touchend="onGutterTouchEnd($event, i)">
-                 <div class="p-splitter-gutter-handle"></div>
+                <div class="p-splitter-gutter-handle"></div>
-             </div>
+            </div>
         </template>
     </div>
 </template>
@@ -229,7 +229,7 @@ export default {
                     if (this.isSplitterPanel(child)) {
                         panels.push(child);
                     }
-                    else if (child.children.length > 0) {
+                    else if (child.children.length instanceof Array) {
                         child.children.forEach(nestedChild => {
                             if (this.isSplitterPanel(nestedChild)) {
                                 panels.push(nestedChild)

src/views/icons/Icons.vue

@@ -43,20 +43,20 @@ import 'primeicons/primeicons.css';
             <i class="pi pi-check"></i>
 
 <pre v-code><code>
-&lt;i class="pi pi-check" style="fontSize: 2rem"&gt;&lt;/i&gt;
+&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
 
-            <i class="pi pi-check" style="fontSize: 2rem"></i>
+            <i class="pi pi-check" style="font-size: 2rem"></i>
 
             <h5>Spinning Animation</h5>
             <p>Special pi-spin class applies continuous rotation to an icon.</p>
 <pre v-code><code>
-&lt;i class="pi pi-spin pi-spinner" style="fontSize: 2rem"&gt;&lt;/i&gt;
+&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
 
-            <i class="pi pi-spin pi-spinner" style="fontSize: 2rem"></i>
+            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
 
             <h5>Constants</h5>
             <p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>

src/views/validation/VuelidateFormDemo.vue

@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Vuelidate</h1>
-                <p>PrimeVue components can be easily used/integrated with <a href="https://vuelidate.js.org/">Vuelidate</a>. In this example, a register panel is simulated using Vuelidate.</p>
+                <p>PrimeVue components can be easily used/integrated with <a href="https://vuelidate-next.netlify.app/">Vuelidate</a>. In this example, a register panel is simulated using Vuelidate.</p>
             </div>
             <AppDemoActions />
         </div>