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

Added demo actions

pull/1147/head
Cagatay Civici 2021-04-05 12:29:28 +03:00
parent e7f4264d29
commit f4758cd54b
157 changed files with 381 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/AppDemoActions.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="app-demoactions p-d-flex p-ai-end p-jc-end p-mt-3">
<Button class="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" @click="toggleMenu">
<svg role="img" viewBox="0 0 24 24" width="17" height="17" fill="var(--text-color-secondary)" style="display:block">
<path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/>
</svg>
</Button>
<Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="viewOnGitHub"></Button>
<Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="scrollToDocs"></Button>
<Menu ref="menu" :model="items" :popup="true" style="width:14rem"/>
</div>
</template>
<script>
import EventBus from '@/AppEventBus';
export default {
data() {
return {
items: [
{
label: 'Options API Demo',
command: () => {
EventBus.emit('run-demo', 'options-api');
}
},
{
label: 'Composition API Demo',
command: () => {
EventBus.emit('run-demo', 'composition-api');
}
}
]
}
},
methods: {
toggleMenu(event) {
this.$refs.menu.toggle(event);
},
scrollToDocs() {
document.getElementById('app-doc').scrollIntoView({behavior: 'smooth'});
},
viewOnGitHub() {
EventBus.emit('view-github');
}
}
};
</script>

55
src/AppDocumentation.vue
View File

@ -1,4 +1,5 @@
<script>
import EventBus from '@/AppEventBus';
import LiveEditor from './views/liveeditor/LiveEditor';
import { services, data } from './views/liveeditor/LiveEditorData';
@ -12,7 +13,16 @@ export default {
dependencies: null,
extPages: null,
extFiles: null,
component: null
component: null,
github: null
},
mounted() {
EventBus.on('view-github', () => {
window.open('https://github.com/primefaces/primevue/blob/master/src/views/' + this.github, '_blank');
});
},
beforeUnmount() {
EventBus.off('view-github');
},
methods: {
renderPanels() {
@ -22,31 +32,8 @@ export default {
tabs.push(<TabPanel header="Documentation">{this.$slots.default()}</TabPanel>);
}
if (this.sources) {
const sourceType = this.$appState.sourceType; //options-api or composition-api
/* eslint-disable */
tabs.push(
<TabPanel header={this.sources[sourceType].tabName}>
<LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles} component={this.component}/>
<pre v-code><code>
{this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
</code></pre>
</TabPanel>
);
}
if (this.extPages) {
/* eslint-disable */
this.extPages.forEach(file => {
tabs.push(
<TabPanel key={file.tabName} header={file.tabName}>
<pre v-code><code>
{file.content.replace('<\\/script>', '<\/script>')}
</code></pre>
</TabPanel>
);
});
}
this.renderSource('options-api', tabs);
this.renderSource('composition-api', tabs);
if (this.service) {
let serviceArr = [];
@ -57,7 +44,7 @@ export default {
/* eslint-disable */
serviceArr.forEach((el, i) => {
tabs.push(
<TabPanel key="service" header={`${el}.js`}>
<TabPanel key={el} header={`${el}.js`}>
<pre v-code="script"><code>
{services[el]}
</code></pre>
@ -85,11 +72,23 @@ export default {
}
return tabs;
},
renderSource(sourceType, tabs) {
if (this.sources && this.sources[sourceType]) {
tabs.push(
<TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
<pre v-code><code>
{this.sources[sourceType].content.replace('<\\/script>', '<\\/script>')}
</code></pre>
</TabPanel>
);
}
}
},
render() {
return (
<div class="content-section documentation">
<div class="content-section documentation" id="app-doc">
<LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles} component={this.component} />
<TabView>
{
this.renderPanels()

1
src/assets/images/icons/codesandbox.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg role="img" viewBox="0 0 24 24" stroke="var(--text-color)" xmlns="http://www.w3.org/2000/svg"><title/><path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

6
src/assets/styles/app/_content.scss
View File

@ -34,6 +34,12 @@
}
}
}
.app-demoactions {
.p-button-icon-only {
padding: .5rem 0;
}
}
}
&.implementation {

2
src/main.js
View File

@ -95,6 +95,7 @@ import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import Galleria from './components/galleria/Galleria';
import AppInputStyleSwitch from './AppInputStyleSwitch';
import AppDemoActions from './AppDemoActions';
import AppDocumentation from './AppDocumentation';
import CodeHighlight from './AppCodeHighlight';
@ -208,6 +209,7 @@ app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('Galleria', Galleria);
app.component('AppDemoActions', AppDemoActions);
app.component('AppInputStyleSwitch', AppInputStyleSwitch);
app.component('AppDoc', AppDocumentation);
app.directive('code', CodeHighlight);

4
src/views/accordion/AccordionDoc.vue
View File

@ -309,7 +309,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -438,7 +438,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -5,7 +5,7 @@
<h1>AutoComplete</h1>
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -371,7 +371,7 @@ export default {
return {
sources:{
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content:`
<template>
<div>
@ -488,7 +488,7 @@ export default {
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content:`
<template>
<div>

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

@ -179,7 +179,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div class="p-grid">
@ -276,7 +276,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div class="p-grid">

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

@ -176,7 +176,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -210,7 +210,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

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

@ -146,7 +146,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -208,7 +208,7 @@ button {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/breadcrumb/BreadcrumbDoc.vue
View File

@ -105,7 +105,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -135,7 +135,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/button/ButtonDoc.vue
View File

@ -221,7 +221,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -385,7 +385,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/calendar/CalendarDemo.vue
View File

@ -5,7 +5,7 @@
<h1>Calendar</h1>
<p>Calendar is an input component to select a date.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/calendar/CalendarDoc.vue
View File

@ -572,7 +572,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -705,7 +705,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/card/CardDoc.vue
View File

@ -108,7 +108,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -157,7 +157,7 @@ p {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/carousel/CarouselDoc.vue
View File

@ -297,7 +297,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -439,7 +439,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/cascadeselect/CascadeSelectDemo.vue
View File

@ -5,7 +5,7 @@
<h1>CascadeSelect</h1>
<p>CascadeSelect displays a nested structure of options.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/cascadeselect/CascadeSelectDoc.vue
View File

@ -337,7 +337,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -456,7 +456,7 @@ img {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/chart/BarChartDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -141,7 +141,7 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/chart/ComboChartDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -50,7 +50,7 @@ export default {
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/chart/LineChartDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -120,7 +120,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/chart/PieChartDoc.vue
View File

@ -9,7 +9,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -38,7 +38,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/chart/PolarAreaChartDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -35,7 +35,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/chart/RadarChartDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -52,7 +52,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/checkbox/CheckboxDemo.vue
View File

@ -5,7 +5,7 @@
<h1>Checkbox</h1>
<p>Checkbox is an extension to standard checkbox element with theming.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/checkbox/CheckboxDoc.vue
View File

@ -113,7 +113,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -166,7 +166,7 @@ export default {
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

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

@ -141,7 +141,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -192,7 +192,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/chips/ChipsDemo.vue
View File

@ -5,7 +5,7 @@
<h1>Chips</h1>
<p>Chips is used to enter multiple values on an input field.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation p-fluid">

4
src/views/chips/ChipsDoc.vue
View File

@ -166,7 +166,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div class="p-fluid">
@ -204,7 +204,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div class="p-fluid">

4
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -168,7 +168,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -193,7 +193,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/confirmdialog/ConfirmDialogDoc.vue
View File

@ -248,7 +248,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -333,7 +333,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/confirmpopup/ConfirmPopupDoc.vue
View File

@ -248,7 +248,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -298,7 +298,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `<template>
<div>
<ConfirmPopup></ConfirmPopup>

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

@ -312,7 +312,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -468,7 +468,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableBasicDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -42,7 +42,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableColGroupDemo.vue
View File

@ -69,7 +69,7 @@ export default {
sales: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<DataTable :value="sales" responsiveLayout="scroll">
@ -169,7 +169,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<DataTable :value="sales" responsiveLayout="scroll">

4
src/views/datatable/DataTableColResizeDemo.vue
View File

@ -43,7 +43,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -90,7 +90,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableColToggleDemo.vue
View File

@ -37,7 +37,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -89,7 +89,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableContextMenuDemo.vue
View File

@ -42,7 +42,7 @@ export default {
],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -104,7 +104,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableCrudDemo.vue
View File

@ -183,7 +183,7 @@ export default {
],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -479,7 +479,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableDoc.vue
View File

@ -2599,7 +2599,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -2823,7 +2823,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableDynamicColumnsDemo.vue
View File

@ -30,7 +30,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -68,7 +68,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableEditDemo.vue
View File

@ -115,7 +115,7 @@ export default {
],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div class="p-fluid">
@ -315,7 +315,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div class="p-fluid">

4
src/views/datatable/DataTableExportDemo.vue
View File

@ -36,7 +36,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -80,7 +80,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableFilterDemo.vue
View File

@ -249,7 +249,7 @@ export default {
loading2: true,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -590,7 +590,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableFlexScrollDemo.vue
View File

@ -24,7 +24,7 @@ export default {
customers: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -58,7 +58,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableGridLinesDemo.vue
View File

@ -37,7 +37,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -77,7 +77,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableLazyDemo.vue
View File

@ -72,7 +72,7 @@ export default {
],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -183,7 +183,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTablePaginatorDemo.vue
View File

@ -41,7 +41,7 @@ export default {
customers: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -84,7 +84,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableReorderDemo.vue
View File

@ -31,7 +31,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -82,7 +82,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -68,7 +68,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -139,7 +139,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableRowExpandDemo.vue
View File

@ -84,7 +84,7 @@ export default {
expandedRows: [],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -202,7 +202,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -120,7 +120,7 @@ export default {
expandedRowGroups: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -283,7 +283,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableScrollDemo.vue
View File

@ -145,7 +145,7 @@ export default {
balanceFrozen: false,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -367,7 +367,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableSelectionDemo.vue
View File

@ -101,7 +101,7 @@ export default {
selectedProducts3: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -211,7 +211,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableSizeDemo.vue
View File

@ -59,7 +59,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -122,7 +122,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableSortDemo.vue
View File

@ -84,7 +84,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -176,7 +176,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableStateDemo.vue
View File

@ -161,7 +161,7 @@ export default {
],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -326,7 +326,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableStripedDemo.vue
View File

@ -32,7 +32,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -66,7 +66,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableStyleDemo.vue
View File

@ -37,7 +37,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -113,7 +113,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/datatable/DataTableTemplatingDemo.vue
View File

@ -58,7 +58,7 @@ export default {
products: null,
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -136,7 +136,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/dataview/DataViewDoc.vue
View File

@ -454,7 +454,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div class="card">
@ -689,7 +689,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div class="card">

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

@ -71,7 +71,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -126,7 +126,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/dialog/DialogDoc.vue
View File

@ -293,7 +293,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -496,7 +496,7 @@ p {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/display/DisplayDoc.vue
View File

@ -47,7 +47,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -83,7 +83,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/divider/DividerDoc.vue
View File

@ -174,7 +174,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -325,7 +325,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/dropdown/DropdownDemo.vue
View File

@ -5,7 +5,7 @@
<h1>Dropdown</h1>
<p>Dropdown is used to select an item from a list of options.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/dropdown/DropdownDoc.vue
View File

@ -463,7 +463,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -577,7 +577,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>

4
src/views/editor/EditorDoc.vue
View File

@ -166,7 +166,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -199,7 +199,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/elevation/ElevationDoc.vue
View File

@ -23,7 +23,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -57,7 +57,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/fieldset/FieldsetDoc.vue
View File

@ -177,7 +177,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -212,7 +212,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/fileupload/FileUploadDoc.vue
View File

@ -338,7 +338,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -371,7 +371,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/filterservice/FilterServiceDoc.vue
View File

@ -203,7 +203,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -285,7 +285,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

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

@ -5,7 +5,7 @@
<h1>Float Label</h1>
<p>All input text components support floating labels.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">
@ -218,7 +218,7 @@ export default {
],
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -453,7 +453,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/formlayout/FormLayoutDemo.vue
View File

@ -6,7 +6,7 @@
<p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/formlayout/FormLayoutDoc.vue
View File

@ -229,7 +229,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -440,7 +440,7 @@ textarea {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/fullcalendar/FullCalendarDoc.vue
View File

@ -208,7 +208,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -259,7 +259,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/grid/GridDoc.vue
View File

@ -340,7 +340,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div class="flexgrid-demo p-p-2">
@ -782,7 +782,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div class="flexgrid-demo p-p-2">

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

@ -191,7 +191,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -257,7 +257,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/inputgroup/InputGroupDemo.vue
View File

@ -5,7 +5,7 @@
<h1>InputGroup</h1>
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/inputgroup/InputGroupDoc.vue
View File

@ -8,7 +8,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -130,7 +130,7 @@ export default {
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/inputmask/InputMaskDemo.vue
View File

@ -5,7 +5,7 @@
<h1>InputMask</h1>
<p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/inputmask/InputMaskDoc.vue
View File

@ -128,7 +128,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -183,7 +183,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/inputnumber/InputNumberDemo.vue
View File

@ -5,7 +5,7 @@
<h1>InputNumber</h1>
<p>InputNumber is an input component to provide numerical input.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/inputswitch/InputSwitchDoc.vue
View File

@ -101,7 +101,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -126,7 +126,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/inputtext/InputTextDemo.vue
View File

@ -5,7 +5,7 @@
<h1>InputText</h1>
<p>InputText renders a text field to enter data.</p>
</div>
<AppInputStyleSwitch />
<AppDemoActions />
</div>
<div class="content-section implementation">

6
src/views/inputtext/InputTextDoc.vue
View File

@ -1,5 +1,5 @@
<template>
<AppDoc name="InputTextDemo" :sources="sources">
<AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
<h5>Import</h5>
<pre v-code.script><code>
import InputText from 'primevue/inputtext';
@ -149,7 +149,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content:`
<template>
<div>
@ -233,7 +233,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content:`
<template>
<div>

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

@ -5,7 +5,7 @@
<h1>Invalid State</h1>
<p>All form components have an invalid state style to display the validation errors.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/knob/KnobDoc.vue
View File

@ -207,7 +207,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -272,7 +272,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/listbox/ListboxDemo.vue
View File

@ -5,7 +5,7 @@
<h1>Listbox</h1>
<p>Listbox is used to select one or more values from a list of items.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/listbox/ListboxDoc.vue
View File

@ -355,7 +355,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -444,7 +444,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

12
src/views/liveeditor/LiveEditor.vue
View File

@ -1,11 +1,13 @@
<template>
<span v-if="showEditor" class="p-d-flex p-jc-end">
<SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" />
<SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false"/>
</span>
</template>
<script>
import EventBus from '@/AppEventBus';
import { services, data } from './LiveEditorData';
export default {
data() {
return {
@ -51,6 +53,14 @@ export default {
default: null
}
},
mounted() {
EventBus.on('run-demo', type => {
this.postSandboxParameters(type);
});
},
beforeUnmount() {
EventBus.off('view-github');
},
methods: {
postSandboxParameters(sourceType) {
fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {

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

@ -251,7 +251,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -386,7 +386,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/menu/MenuDoc.vue
View File

@ -210,7 +210,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -278,7 +278,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

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

@ -267,7 +267,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -421,7 +421,7 @@ export default {
`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/message/MessageDoc.vue
View File

@ -256,7 +256,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -337,7 +337,7 @@ button.p-button {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

2
src/views/multiselect/MultiSelectDemo.vue
View File

@ -5,7 +5,7 @@
<h1>MultiSelect</h1>
<p>MultiSelect is used to multiple values from a list of options.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

4
src/views/multiselect/MultiSelectDoc.vue
View File

@ -452,7 +452,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -585,7 +585,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

4
src/views/orderlist/OrderListDoc.vue
View File

@ -203,7 +203,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div class="card">
@ -308,7 +308,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div class="card">

4
src/views/organizationchart/OrganizationChartDoc.vue
View File

@ -485,7 +485,7 @@ export default {
return {
sources: {
'options-api': {
tabName: 'Source',
tabName: 'Options API Source',
content: `
<template>
<div>
@ -700,7 +700,7 @@ export default {
</style>`
},
'composition-api': {
tabName: 'Composition API',
tabName: 'Composition API Source',
content: `
<template>
<div>

Some files were not shown because too many files have changed in this diff Show More