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

browser source added for misc

pull/1664/head
Tuğçe Küçükoğlu 2021-10-11 16:58:47 +03:00
parent 94b2062b6e
commit e18a2d09e2
14 changed files with 931 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/views/avatar/AvatarDoc.vue
View File

@ -369,6 +369,117 @@ export default {
<script>
export default {
}
<\\/script>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
content: `
<div id="app">
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label</h5>
<p-avatar label="P" class="p-mr-2" size="xlarge"></p-avatar>
<p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
<p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Circle</h5>
<p-avatar label="P" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
<p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
<p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Badge</h5>
<p-avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4"></p-avatar>
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon</h5>
<p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Circle</h5>
<p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Badge</h5>
<p-avatar icon="pi pi-user" size="xlarge" v-badge="4"></p-avatar>
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image</h5>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle"></p-avatar>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>p-avatar Group</h5>
<p-avatargroup class="p-mb-3">
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
</p-avatargroup>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image - Badge</h5>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4"></p-avatar>
</div>
</div>
</div>
</div>
<script type="module">
const { createApp } = Vue;
const BadgeDirective = primevue.badgedirective;
const App = {
components: {
"p-avatar": primevue.avatar,
"p-avatargroup": primevue.avatargroup
}
};
createApp(App)
.use(primevue.config.default)
.directive("badge", BadgeDirective)
.mount("#app");
<\\/script>`
}
}

45
src/views/badge/BadgeDoc.vue
View File

@ -249,6 +249,51 @@ export default {
<script>
export default {
}
<\\/script>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/badge/badge.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Numbers</h5>
<p-badge value="2" class="p-mr-2"></p-badge>
<p-badge value="8" severity="success" class="p-mr-2"></p-badge>
<p-badge value="4" severity="info" class="p-mr-2"></p-badge>
<p-badge value="12" severity="warning" class="p-mr-2"></p-badge>
<p-badge value="3" severity="danger"></p-badge>
<h5 class="p-mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5>
<p-button type="button" label="Emails" badge="8" class="p-mr-2"></p-button>
<p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
<h5>Sizes</h5>
<p-badge value="2" class="p-mr-2"></p-badge>
<p-badge value="4" class="p-mr-2" size="large" severity="warning"></p-badge>
<p-badge value="6" size="xlarge" severity="success"></p-badge>
</div>
<script type="module">
const { createApp } = Vue;
const BadgeDirective = primevue.badgedirective;
const App = {
components: {
"p-badge": primevue.badge,
"p-button": primevue.button
}
};
const app = createApp(App);
app.use(primevue.config.default);
app.directive('badge', BadgeDirective);
app.mount('#app');
<\\/script>`
}
}

72
src/views/blockui/BlockUIDoc.vue
View File

@ -268,6 +268,78 @@ button {
margin-right: .5rem;
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Document</h5>
<p-blockui :blocked="blockedDocument" :full-screen="true"></p-blockui>
<p-button type="button" label="Block" @click="blockDocument()"></p-button>
<h5>Panel</h5>
<p-button type="button" label="Block" @click="blockPanel()"></p-button>
<p-button type="button" label="Unblock" @click="unblockPanel()"></p-button>
<p-blockui :blocked="blockedPanel">
<p-panel header="Godfather I" style="margin-top: 20px">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</p-panel>
</p-blockui>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const blockedPanel = ref(false);
const blockedDocument = ref(false);
const blockDocument = () => {
blockedDocument.value = true;
setTimeout(() => {
blockedDocument.value = false;
}, 3000);
};
const blockPanel = () => {
blockedPanel.value = true;
};
const unblockPanel = () => {
blockedPanel.value = false;
};
return { blockedPanel, blockedDocument, blockDocument, blockPanel, unblockPanel }
},
components: {
"p-blockui": primevue.blockui,
"p-panel": primevue.panel,
"p-button": primevue.button
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
.p-panel p {
line-height: 1.5;
margin: 0;
}
.p-button {
margin-right: .5rem;
}
</style>
`
}
}
}

58
src/views/chip/ChipDoc.vue
View File

@ -241,6 +241,64 @@ export default {
color: var(--primary-color-text);
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<p-chip label="Action" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Comedy" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Mystery" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Thriller" class="p-mb-2" removable></p-chip>
</div>
<h5>Icon</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable></p-chip>
</div>
<h5>Image</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable></p-chip>
</div>
<h5>Styling</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
<p-chip label="Action" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
<p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable></p-chip>
</div>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
components: {
"p-chip": primevue.chip
}
};
createApp(App).mount('#app');
<\\/script>
<style>
.p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
}
</style>
`
}
}
}

72
src/views/inplace/InplaceDoc.vue
View File

@ -315,6 +315,78 @@ export default {
return { productService, text, products, loadData }
}
}
<\\/script>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/inplace/inplace.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
<script src="./ProductService.js"><\\/script>`,
content: `
<div id="app">
<h5>Input</h5>
<p-inplace :closable="true">
<template #display>
{{text || 'Click to Edit'}}
</template>
<template #content>
<p-inputtext v-model="text" autoFocus></p-inputtext>
</template>
</p-inplace>
<h5>Image</h5>
<p-inplace>
<template #display>
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template>
<template #content>
<img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
</template>
</p-inplace>
<h5>Lazy Data</h5>
<p-inplace @open="loadData">
<template #display>
View Data
</template>
<template #content>
<p-datatable :value="products" responsive-layout="scroll" >
<p-column field="code" header="Code"></p-column>
<p-column field="name" header="Name"></p-column>
<p-column field="category" header="Category"></p-column>
<p-column field="quantity" header="Quantity"></p-column>
</p-datatable>
</template>
</p-inplace>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const productService = ref(new ProductService());
const text = ref(null);
const products = ref(null);
const loadData = () => {
productService.value.getProductsSmall().then(data => products.value = data);
}
return { productService, text, products, loadData }
},
components: {
"p-inplace": primevue.inplace,
"p-datatable": primevue.datatable,
"p-column": primevue.column,
"p-inputtext": primevue.inputtext
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>`
}
}

58
src/views/progressbar/ProgressBarDoc.vue
View File

@ -217,6 +217,64 @@ export default {
}
<\\/script>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/progressbar/progressbar.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Dynamic</h5>
<p-progressbar :value="value1"></p-progressbar>
<h5>Static</h5>
<p-progressbar :value="value2" :showValue="false"></p-progressbar>
<h5>Indeterminate</h5>
<p-progressbar mode="indeterminate" style="height: .5em"></p-progressbar>
</div>
<script type="module">
const { createApp, ref, onMounted, onBeforeUnmount } = Vue;
const App = {
setup() {
onMounted(() => {
startProgress();
})
onBeforeUnmount(() => {
endProgress();
})
const value1 = ref(0);
const value2 = ref(50);
const interval = ref(null);
const startProgress = () => {
interval.value = setInterval(() => {
let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
}
value1.value = newValue;
}, 2000);
};
const endProgress = () => {
clearInterval(interval.value);
interval.value = null;
};
return { value1, value2 }
},
components: {
"p-progressbar": primevue.progressbar
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>`
}
}
}

25
src/views/progressspinner/ProgressSpinnerDoc.vue
View File

@ -143,7 +143,32 @@ export default {
export default {
}
<\\/script>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/progressspinner/progressspinner.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Basic</h5>
<p-progressspinner></p-progressspinner>
<h5>Custom</h5>
<p-progressspinner style="width:50px;height:50px" stroke-width="8" fill="#EEEEEE" animation-duration=".5s"></p-progressspinner>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
components: {
"p-progressspinner": primevue.progressspinner
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>`
}
}
}

64
src/views/ripple/RippleDoc.vue
View File

@ -221,6 +221,70 @@ export default {
}
}
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
content: `
<div id="app" class="p-d-flex">
<div class="card primary-box p-ripple" v-ripple>Default</div>
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
</div>
<script type="module">
const { createApp } = Vue;
const Ripple = primevue.ripple;
const App = {
directives: {
"ripple": Ripple
}
};
const app = createApp(App);
app.use(primevue.config.default, { ripple: true });
app.mount("#app");
<\\/script>
<style>
.card {
width: 75px;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
user-select: none;
padding: 0;
background: #ffffff;
padding: 2rem;
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
border-radius: 4px;
margin-bottom: 2rem;
}
.card.primary-box {
background-color: var(--primary-color);
padding: 0;
color: var(--primary-color-text);
}
.card.styled-box-green .p-ink {
background: #4baf50;
}
.card.styled-box-orange .p-ink {
background: #ffc106;
}
.card.styled-box-purple .p-ink {
background: #9c27b0;
}
.card:last-child {
margin-right: 0;
}
</style>`
}
}

58
src/views/scrolltop/ScrollTopDoc.vue
View File

@ -199,6 +199,64 @@ export default {
color: var(--primary-color-text);
}
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/scrolltop/scrolltop.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/scrollpanel/scrollpanel.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Element</h5>
<p-scrollpanel style="width: 250px; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<p-scrolltop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up"></p-scrolltop>
</p-scrollpanel>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
components: {
"p-scrolltop": primevue.scrolltop,
"p-scrollpanel": primevue.scrollpanel
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
.custom-scrolltop {
width: 2rem;
height: 2rem;
border-radius: 4px;
background-color: var(--primary-color) !important;
}
.custom-scrolltop:hover {
background-color: var(--primary-color);
}
.custom-scrolltop .p-scrolltop-icon {
font-size: 1rem;
color: var(--primary-color-text);
}
</style>`
}
}

170
src/views/skeleton/SkeletonDoc.vue
View File

@ -448,6 +448,176 @@ export default {
list-style: none;
}
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>`,
content: `
<div id="app">
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6">
<h5>Rectangle</h5>
<p-skeleton class="p-mb-2"></p-skeleton>
<p-skeleton width="10rem" class="p-mb-2"></p-skeleton>
<p-skeleton width="5rem" class="p-mb-2"></p-skeleton>
<p-skeleton height="2rem" class="p-mb-2"></p-skeleton>
<p-skeleton width="10rem" height="4rem"></p-skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>Rounded</h5>
<p-skeleton class="p-mb-2" border-radius="16px"></p-skeleton>
<p-skeleton width="10rem" class="p-mb-2" border-radius="16px"></p-skeleton>
<p-skeleton width="5rem" border-radius="16px" class="p-mb-2"></p-skeleton>
<p-skeleton height="2rem" class="p-mb-2" border-radius="16px"></p-skeleton>
<p-skeleton width="10rem" height="4rem" border-radius="16px"></p-skeleton>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Square</h5>
<div class="p-d-flex p-ai-end">
<p-skeleton size="2rem" class="p-mr-2"></p-skeleton>
<p-skeleton size="3rem" class="p-mr-2"></p-skeleton>
<p-skeleton size="4rem" class="p-mr-2"></p-skeleton>
<p-skeleton size="5rem"></p-skeleton>
</div>
</div>
<div class="p-field p-col-12 p-md-6">
<h5 class="p-mt-3">Circle</h5>
<div class="p-d-flex p-ai-end">
<p-skeleton shape="circle" size="2rem" class="p-mr-2"></p-skeleton>
<p-skeleton shape="circle" size="3rem" class="p-mr-2"></p-skeleton>
<p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
<p-skeleton shape="circle" size="5rem"></p-skeleton>
</div>
</div>
</div>
</div>
<div class="card">
<div class="p-grid p-formgrid">
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-p-4">
<div class="p-d-flex p-mb-3">
<p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
<div>
<p-skeleton width="10rem" class="p-mb-2"></p-skeleton>
<p-skeleton width="5rem" class="p-mb-2"></p-skeleton>
<p-skeleton height=".5rem"></p-skeleton>
</div>
</div>
<p-skeleton width="100%" height="150px"></p-skeleton>
<div class="p-d-flex p-jc-between p-mt-3">
<p-skeleton width="4rem" height="2rem"></p-skeleton>
<p-skeleton width="4rem" height="2rem"></p-skeleton>
</div>
</div>
</div>
<div class="p-field p-col-12 p-md-6">
<h5>List</h5>
<div class="custom-skeleton p-p-4">
<ul class="p-m-0 p-p-0">
<li class="p-mb-3">
<div class="p-d-flex">
<p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="p-mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="p-mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
<li class="p-mb-3">
<div class="p-d-flex">
<p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="p-mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
<li>
<div class="p-d-flex">
<p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="p-mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<h5>DataTable</h5>
<p-datatable :value="products" responsive-layout="scroll">
<p-column field="code" header="Code">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
<p-column field="name" header="Name">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
<p-column field="category" header="Category">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
<p-column field="quantity" header="Quantity">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
</p-datatable>
</div>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const products = ref(new Array(4));
return { products }
},
components: {
"p-skeleton": primevue.skeleton,
"p-datatable": primevue.datatable,
"p-column": primevue.column
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
.custom-skeleton {
border: 1px solid var(--surface-d);
border-radius: 4px;
}
.custom-skeleton ul {
list-style: none;
}
</style>`
}
}

1
src/views/styleclass/StyleClassDemo.vue
View File

@ -5,6 +5,7 @@
<h1>StyleClass</h1>
<p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
</div>
<AppDemoActions />
</div>
</div>

70
src/views/styleclass/StyleClassDoc.vue
View File

@ -246,6 +246,76 @@ export default {
}
</style>
`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/styleclass/styleclass.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Toggle Class</h5>
<p-button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }"></p-button>
<p-inputtext class="p-d-block p-mt-3"></p-inputtext>
<h5>Animations</h5>
<p-button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }"></p-button>
<p-button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }"></p-button>
<div class="box p-d-none">Content</div>
</div>
<script>
const { createApp } = Vue;
const StyleClass = primevue.styleclass;
const App = {
components: {
"p-inputtext": primevue.inputtext,
"p-button": primevue.button
}
};
createApp(App)
.use(primevue.config.default)
.directive("styleclass", StyleClass)
.mount("#app");
<\\/script>
<style>
.box {
background-color: var(--green-500);
color: #ffffff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 4px;
margin-top: 1rem;
font-weight: bold;
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
}
@keyframes my-fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes my-fadeout {
0% { opacity: 1; }
100% { opacity: 0; }
}
.my-fadein {
animation: my-fadein 150ms linear;
}
.my-fadeout {
animation: my-fadeout 150ms linear;
}
</style>
`
}
}

42
src/views/tag/TagDoc.vue
View File

@ -187,6 +187,48 @@ export default {
export default {
}
<\\/script>
`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/tag/tag.min.js"><\\/script>`,
content: `
<div id="app">
<h5>Tags</h5>
<p-tag class="p-mr-2" value="Primary"></p-tag>
<p-tag class="p-mr-2" severity="success" value="Success"></p-tag>
<p-tag class="p-mr-2" severity="info" value="Info"></p-tag>
<p-tag class="p-mr-2" severity="warning" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>
<h5>Pills</h5>
<p-tag class="p-mr-2" value="Primary" rounded></p-tag>
<p-tag class="p-mr-2" severity="success" value="Success" rounded></p-tag>
<p-tag class="p-mr-2" severity="info" value="Info" rounded></p-tag>
<p-tag class="p-mr-2" severity="warning" value="Warning" rounded></p-tag>
<p-tag severity="danger" value="Danger" rounded></p-tag>
<h5>Icons</h5>
<p-tag class="p-mr-2" icon="pi pi-user" value="Primary"></p-tag>
<p-tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
<p-tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
<p-tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
components: {
"p-tag": primevue.tag
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
`
}
}

85
src/views/terminal/TerminalDoc.vue
View File

@ -278,6 +278,91 @@ p {
}
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/terminal/terminal.min.js"><\\/script>`,
content: `
<div id="app">
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<p-terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal"></p-terminal>
</div>
<script type="module">
const { createApp, onMounted, onBeforeUnmount } = Vue;
const TerminalService = primevue.terminalservice;
const App = {
setup() {
onMounted(() => {
TerminalService.on('command', commandHandler);
})
onBeforeUnmount(() => {
TerminalService.off('command', commandHandler);
})
const commandHandler = (text) => {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.emit('response', response);
}
return { commandHandler }
},
components: {
"p-terminal": primevue.terminal
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
p {
margin-top: 0;
}
.dark-demo-terminal {
background-color: #212121;
color: #ffffff;
}
.dark-demo-terminal .p-terminal-command {
color: #80CBC4;
}
.dark-demo-terminal .p-terminal-prompt {
color: #FFD54F;
}
.dark-demo-terminal .p-terminal-response {
color: #9FA8DA;
}
</style>
`
}
}
}