198 lines
7.8 KiB
Vue
198 lines
7.8 KiB
Vue
<template>
|
|
<div v-if="!embedded" class="surface-card mb-4" :class="scrollable ? '' : 'relative'" style="border-radius: 10px">
|
|
<div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1" :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }">
|
|
<template v-if="codeMode !== 'basic' && !hideToggleCode">
|
|
<Button
|
|
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
|
|
label="Composition API"
|
|
@click="codeLang = 'composition'"
|
|
></Button>
|
|
<Button
|
|
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'options' }]"
|
|
label="Options API"
|
|
@click="codeLang = 'options'"
|
|
></Button>
|
|
</template>
|
|
|
|
<template v-if="!hideToggleCode">
|
|
<Button
|
|
v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
|
|
type="button"
|
|
@click="toggleCodeMode('composition')"
|
|
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
icon="pi pi-code"
|
|
></Button>
|
|
</template>
|
|
|
|
<template v-if="!hideToggleCode && code.data">
|
|
<Button
|
|
v-tooltip.bottom="{ value: 'View Code', class: 'doc-section-code-tooltip' }"
|
|
type="button"
|
|
@click="onToggleData"
|
|
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
icon="pi pi-database"
|
|
>
|
|
</Button>
|
|
</template>
|
|
|
|
<template v-if="!hideCodeSandbox">
|
|
<Button
|
|
v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }"
|
|
type="button"
|
|
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
@click="showCodesandbox"
|
|
>
|
|
<template #icon="slotProps">
|
|
<svg role="img" :class="slotProps.class" viewBox="0 0 24 24" width="16" height="16" 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>
|
|
</template>
|
|
</Button>
|
|
</template>
|
|
|
|
<template v-if="!hideStackBlitz">
|
|
<Button
|
|
v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }"
|
|
type="button"
|
|
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
@click="showStackblitz"
|
|
>
|
|
<template #icon="slotProps">
|
|
<svg role="img" :class="slotProps.class" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
|
|
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
|
|
</svg>
|
|
</template>
|
|
</Button>
|
|
</template>
|
|
|
|
<Button
|
|
v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }"
|
|
type="button"
|
|
@click="copyCode"
|
|
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
|
icon="pi pi-copy"
|
|
></Button>
|
|
</div>
|
|
|
|
<div class="relative doc-section-code overflow-auto" :style="scrollable ? { 'max-height': '40rem' } : undefined" style="border-radius: 10px">
|
|
<template v-if="codeMode === 'basic' && importCode">
|
|
<pre v-code.script><code>{{ code.basic }}
|
|
</code></pre>
|
|
</template>
|
|
|
|
<template v-if="codeMode === 'basic' && !importCode">
|
|
<pre v-code><code>
|
|
{{ code.basic }}
|
|
|
|
</code></pre>
|
|
</template>
|
|
|
|
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
|
|
<pre v-code><code>
|
|
{{ code.options }}
|
|
|
|
</code></pre>
|
|
</template>
|
|
|
|
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
|
|
<pre v-code><code>
|
|
{{ code.composition }}
|
|
|
|
</code></pre>
|
|
</template>
|
|
|
|
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
|
|
<pre v-code.json><code>
|
|
{{ code.data }}
|
|
|
|
</code></pre>
|
|
</template>
|
|
</div>
|
|
<div v-if="scrollable" class="h-1rem"></div>
|
|
</div>
|
|
<div v-else id="embed"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useCodeSandbox, useStackBlitz } from './codeeditor';
|
|
|
|
export default {
|
|
inheritAttrs: false,
|
|
props: {
|
|
code: {
|
|
type: null,
|
|
default: null
|
|
},
|
|
service: {
|
|
type: Array,
|
|
default: null
|
|
},
|
|
hideToggleCode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hideCodeSandbox: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hideStackBlitz: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dependencies: {
|
|
type: null,
|
|
default: null
|
|
},
|
|
component: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
extFiles: {
|
|
type: null,
|
|
default: null
|
|
},
|
|
importCode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
embedded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
scrollable: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
codeMode: 'basic',
|
|
codeLang: this.code['options'] ? 'composition' : 'basic'
|
|
};
|
|
},
|
|
mounted() {
|
|
this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
|
|
},
|
|
methods: {
|
|
toggleCodeMode(content) {
|
|
this.codeMode = this.codeMode === 'basic' ? content : 'basic';
|
|
},
|
|
onToggleData() {
|
|
this.toggleCodeMode('data');
|
|
this.codeLang = 'data';
|
|
},
|
|
async copyCode() {
|
|
await navigator.clipboard.writeText(this.code[this.codeLang]);
|
|
},
|
|
showCodesandbox() {
|
|
useCodeSandbox(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
|
|
},
|
|
showStackblitz() {
|
|
useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
|
|
}
|
|
}
|
|
};
|
|
</script>
|