browser source added for misc
Tuğçe Küçükoğlu
parent
94b2062b6e
commit
e18a2d09e2
|
|
@ -370,6 +370,117 @@ export default {
|
||||||
export default {
|
export default {
|
||||||
}
|
}
|
||||||
<\\/script>`
|
<\\/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>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -249,6 +249,51 @@ export default {
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>`
|
<\\/script>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -268,6 +268,78 @@ button {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
</style>`
|
</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>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -241,6 +241,64 @@ export default {
|
||||||
color: var(--primary-color-text);
|
color: var(--primary-color-text);
|
||||||
}
|
}
|
||||||
</style>`
|
</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>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -316,6 +316,78 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>`
|
<\\/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>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -217,6 +217,64 @@ export default {
|
||||||
}
|
}
|
||||||
<\\/script>`
|
<\\/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>`
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -143,7 +143,32 @@ export default {
|
||||||
export default {
|
export default {
|
||||||
}
|
}
|
||||||
<\\/script>`
|
<\\/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>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -222,6 +222,70 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>`
|
</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>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -199,6 +199,64 @@ export default {
|
||||||
color: var(--primary-color-text);
|
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>`
|
</style>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -449,6 +449,176 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>`
|
</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>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<h1>StyleClass</h1>
|
<h1>StyleClass</h1>
|
||||||
<p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
|
<p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
|
||||||
</div>
|
</div>
|
||||||
|
<AppDemoActions />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -246,6 +246,76 @@ export default {
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
||||||
|
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -187,6 +187,48 @@ export default {
|
||||||
export default {
|
export default {
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/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>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -278,6 +278,91 @@ p {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>`
|
</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>
|
||||||
|
|
||||||
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue