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

csb added

pull/880/head
Tuğçe Küçükoğlu 2021-01-21 11:55:32 +03:00
parent 01d2af1b2c
commit ffcdcbbb7f
9 changed files with 1403 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/views/contextmenu/ContextMenuDoc.vue
View File

@ -313,9 +313,12 @@ export default {
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="ContextMenuDemo" :sources="sources" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt; &lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
@ -472,4 +475,175 @@ export default {
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

79
src/views/deferredcontent/DeferredContentDoc.vue
View File

@ -70,9 +70,12 @@ import DeferredContent from 'primevue/deferredcontent';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" data="products-small" :components="['DataTable', 'Column']" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;div style="height: 800px"&gt; &lt;div style="height: 800px"&gt;
@ -126,4 +129,72 @@ export default {
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<Toast />
<div class="content-section implementation">
<div class="card">
<div style="height: 800px">
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
</div>
<DeferredContent @load="onImageLoad">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Nature"/>
</DeferredContent>
<div style="height: 500px">
</div>
<DeferredContent @load="onDataLoad">
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</DeferredContent>
</div>
</div>
</div>
</template>
<script>
import ProductService from '../service/ProductService';
export default {
data() {
return {
products: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
methods: {
onImageLoad() {
this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
},
onDataLoad() {
this.productService.getProductsSmall().then(data => this.products = data);
this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

233
src/views/floatlabel/FloatLabelDemo.vue
View File

@ -104,6 +104,9 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="FloatLabelDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;div class="p-fluid p-grid"&gt; &lt;div class="p-fluid p-grid"&gt;
@ -335,6 +338,7 @@ export default {
<script> <script>
import CountryService from '../../service/CountryService'; import CountryService from '../../service/CountryService';
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
@ -361,6 +365,206 @@ export default {
valueIconLeft: null, valueIconLeft: null,
valueIconRight: null, valueIconRight: null,
selectedCity: null, selectedCity: null,
cascadeCountries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
],
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-left">
<i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label p-input-icon-right">
<i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Chips id="chips" v-model="value4" />
<label for="chips">Chips</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="p-float-label">
<InputText id="inputgroup" type="text" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</span>
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label>
</span>
</div>
<div class="p-field p-col-12">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CountryService from '../service/CountryService';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
value10: null,
selectedCity: null,
cascadeCountries: [ cascadeCountries: [
{ {
name: 'Australia', name: 'Australia',
@ -460,6 +664,35 @@ export default {
}, 250); }, 250);
} }
} }
}`
}
}
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
},
components: {
LiveEditor
}
} }
</script> </script>

176
src/views/invalid/InvalidDemo.vue
View File

@ -49,6 +49,9 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="InvalidDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;div class="p-fluid p-grid"&gt; &lt;div class="p-fluid p-grid"&gt;
@ -223,7 +226,151 @@ export default {
<script> <script>
import CountryService from '../../service/CountryService'; import CountryService from '../../service/CountryService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
selectedCity: null,
cascadeCountries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
],
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" multiple @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CountryService from '../service/CountryService';
export default { export default {
data() { data() {
return { return {
@ -345,6 +492,35 @@ export default {
}, 250); }, 250);
} }
} }
}`
}
}
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
},
components: {
LiveEditor
}
} }
</script> </script>

169
src/views/megamenu/MegaMenuDoc.vue
View File

@ -252,9 +252,13 @@ export default {
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="MegaMenuDemo" :sources="sources" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;h3&gt;Horizontal&lt;/h3&gt; &lt;h3&gt;Horizontal&lt;/h3&gt;
@ -390,4 +394,161 @@ export default {
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section introduction">
<div class="feature-intro">
<h1>MegaMenu</h1>
<p>MegaMenu is navigation component that displays submenus together.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card">
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Videos', icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
},
{
label: 'Video 2',
items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
}
],
[
{
label: 'Video 3',
items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
},
{
label: 'Video 4',
items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
}
]
]
},
{
label: 'Users', icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
},
{
label: 'User 2',
items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
},
],
[
{
label: 'User 3',
items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
},
{
label: 'User 4',
items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
}
],
[
{
label: 'User 5',
items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
},
{
label: 'User 6',
items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
}
]
]
},
{
label: 'Events', icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
},
{
label: 'Event 2',
items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
}
],
[
{
label: 'Event 3',
items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
},
{
label: 'Event 4',
items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
}
]
]
},
{
label: 'Settings', icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
},
{
label: 'Setting 2',
items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
},
{
label: 'Setting 3',
items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
}
],
[
{
label: 'Setting 4',
items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
}
]
]
}
]
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

180
src/views/menubar/MenubarDoc.vue
View File

@ -245,9 +245,12 @@ export default {
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="MenubarDemo" :sources="sources" :components="['InputText']"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;Menubar :model="items"&gt; &lt;Menubar :model="items"&gt;
@ -403,4 +406,173 @@ export default {
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

167
src/views/panelmenu/PanelMenuDoc.vue
View File

@ -223,9 +223,12 @@ export default {
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="PanelMenuDemo" :sources="sources" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;PanelMenu :model="items" /&gt; &lt;PanelMenu :model="items" /&gt;
@ -362,4 +365,160 @@ export default {
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<PanelMenu :model="items" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'File',
icon:'pi pi-fw pi-file',
items: [
{
label: 'New',
icon:'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon:'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon:'pi pi-fw pi-trash'
},
{
label: 'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon:'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon:'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon:'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon:'pi pi-fw pi-user',
items: [
{
label: 'New',
icon:'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon:'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon:'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon:'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon:'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon:'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
}
]
}
}
}`,
style: `<style scoped lang="scss">
.p-panelmenu {
width: 22rem;
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

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

@ -122,9 +122,12 @@ import Tag from 'primevue/tag';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="TagDemo" :sources="sources" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;h5&gt;Tags&lt;/h5&gt; &lt;h5&gt;Tags&lt;/h5&gt;
@ -152,4 +155,53 @@ import Tag from 'primevue/tag';
</TabPanel> </TabPanel>
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Tags</h5>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<h5>Pills</h5>
<Tag class="p-mr-2" value="Primary" rounded></Tag>
<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<h5>Icons</h5>
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
</div>
</div>
</template>
<script>
export default {
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

184
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -302,9 +302,12 @@ toggle(event) {
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <div class="p-d-flex p-jc-between">
<span>View on GitHub</span> <a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
</a> <span>View on GitHub</span>
</a>
<LiveEditor name="TieredMenuDemo" :sources="sources" :components="['Button']" />
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt; &lt;h3&gt;Inline&lt;/h3&gt;
@ -466,3 +469,178 @@ export default {
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<TieredMenu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>