Merge branch 'master' of https://github.com/primefaces/primevue
|
@ -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."
|
||||
|
|
15
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">
|
||||
<a href="https://www.primefaces.org/primeblocks-vue" class="layouts-news-mockup" target="_blank">
|
||||
<img class="layouts-news-mockup-image" src="./assets/images/topbar-primeblocks-device.png">
|
||||
</a>
|
||||
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
|
||||
LEARN MORE
|
||||
<i class="pi pi-angle-right"></i>
|
||||
<div class="layout-news-container" @click="redirect">
|
||||
<img class="layout-news-logo p-ml-2" src="./assets/images/topbar-newyear-logo.svg">
|
||||
<h3 class="layout-news-header p-px-2">DISCOUNT UP TO 50% ON EVERYTHING AT PRIMESTORE</h3>
|
||||
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
|
||||
Read More
|
||||
</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: {
|
||||
|
|
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 365 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 387 KiB |
Before Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 385 KiB |
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 28 KiB |
|
@ -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-color: white;
|
||||
background-image: url('./assets/images/topbar-newyear-bg.png'), linear-gradient(180deg, #D2000B 0%, #9B0008 100%);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
.layout-news-container {
|
||||
width: 100%;
|
||||
|
@ -17,49 +17,56 @@
|
|||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
.layouts-news-mockup {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
.layout-news-header {
|
||||
margin: 0;
|
||||
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 {
|
||||
height: 70px;
|
||||
img.layout-news-logo {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
}
|
||||
|
||||
.layout-news-button {
|
||||
border: 2px solid #283738;
|
||||
color: #283738;
|
||||
font-size: 15px;
|
||||
padding: 0.3em 0.3em 0.5em 1em;
|
||||
background: linear-gradient(180deg, #D8000A 0%, rgba(251, 0, 1, 0.4) 89.06%, rgba(255, 0, 0, 0) 100%);
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
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;
|
||||
height: 23px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -5,7 +5,7 @@ declare const plugin: Plugin;
|
|||
export default plugin;
|
||||
|
||||
interface ConfirmationServiceMethods {
|
||||
require(options: ConfirmationOptions): any;
|
||||
require(options: ConfirmationOptions): void;
|
||||
close(): void;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -43,20 +43,20 @@ import 'primeicons/primeicons.css';
|
|||
<i class="pi pi-check"></i>
|
||||
|
||||
<pre v-code><code>
|
||||
<i class="pi pi-check" style="fontSize: 2rem"></i>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
</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>
|
||||
<i class="pi pi-spin pi-spinner" style="fontSize: 2rem"></i>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
</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>
|
||||
|
|
|
@ -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>
|
||||
|
|