<script lang="jsx">
import LiveEditor from '@/pages/liveeditor/LiveEditor';
import { data, services } from '@/pages/liveeditor/LiveEditorData';
import EventBus from './AppEventBus';
export default {
name: 'appdoc',
props: {
name: null,
sources: null,
service: null,
data: null,
dependencies: null,
extPages: null,
extFiles: null,
component: null,
github: {
type: String,
default: 'index'
}
},
viewGithubListener: null,
mounted() {
this.viewGithubListener = () => {
window.open('https://github.com/primefaces/primevue/blob/master/pages/' + this.name.toLowerCase().replaceAll('demo', '/') + this.github + '.vue', '_blank');
};
EventBus.on('view-github', this.viewGithubListener);
},
beforeUnmount() {
EventBus.off('view-github', this.viewGithubListener);
},
methods: {
renderPanels() {
let tabs = [];
if (this.$slots.default) {
tabs.push(<TabPanel header="Documentation">{this.$slots.default()}</TabPanel>);
}
this.renderSource('options-api', tabs);
this.renderSource('composition-api', tabs);
this.renderSource('browser-source', tabs);
this.renderSource('demo1', tabs);
this.renderSource('demo2', tabs);
if (this.service) {
let serviceArr = [];
this.service.forEach((el) => {
serviceArr.push(el.split(','));
});
/* eslint-disable */
serviceArr.forEach((el, i) => {
tabs.push(
<TabPanel key={el} header={`${el}.js`}>
<pre v-code="script">
<code>{services[el]}</code>
</pre>
</TabPanel>
);
});
}
if (this.data) {
let dataArr = [];
this.data.forEach((el) => {
dataArr.push(el.split(','));
});
dataArr.forEach((el, i) => {
tabs.push(
<TabPanel key={`${el}_i`} header={`${el}.json`}>
<pre v-code="script" style={{ maxHeight: '500px' }}>
<code>{data[el]}</code>
</pre>
</TabPanel>
);
});
}
return tabs;
},
renderContent(source) {
if (source.tabName === 'Browser Source') {
const _imports = source.imports ? source.imports.replaceAll('<\\/script>', '<\/script>') : '';
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue@next"><\/script>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"><\/script>
<!-- Demo -->
${_imports}
<link href="./index.css" rel="stylesheet" />
</head>
<body>
${source.content.replace('<\\/script>', '<\/script>')}
</body>
</html>
`;
}
return source.content.replace('<\\/script>', '<\/script>');
},
renderSource(sourceType, tabs) {
if (this.sources && this.sources[sourceType]) {
let extFiles = this.extFiles ? this.extFiles[sourceType] || this.extFiles : null;
extFiles =
extFiles &&
Object.entries(extFiles).map(([key, value], i) => {
if (key === 'index.css' || !value.content) {
return null;
}
return (
<pre v-code>
<code>
{`\n/* ${key.replace('src/components/', '')} */\n`}
{this.renderContent(value)}
</code>
</pre>
);
});
tabs.push(
<TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
<pre v-code>
<code>{this.renderContent(this.sources[sourceType])}</code>
</pre>
{extFiles}
</TabPanel>
);
}
}
},
render() {
return (
<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()}</TabView>
</div>
);
}
};
</script>