<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>