vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Introduced new code display

Browse source
This commit is contained in:
Cagatay Civici 2023-10-15 09:00:52 +03:00
parent cd004e9c53
commit 0a416e0545
12 changed files with 109 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

37
components/doc/DocSectionCode.vue
View file

@ -1,30 +1,25 @@
<template>
<div v-if="!embedded" class="doc-section-code">
<div class="doc-section-code-buttons">
<div class="doc-section-code-buttons fadein animation-duration-300">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</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="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
>
<button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-code"></i>
</button>
</template>
<template v-if="!hideToggleCode && code.data">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-database"></i>
</button>
</template>
<template v-if="!hideCodeSandbox">
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" 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"
@ -34,14 +29,14 @@
</template>
<template v-if="!hideStackBlitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
</svg>
</button>
</template>
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-copy"></i>
</button>
</div>
@ -53,30 +48,22 @@
</template>
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>
{{ code.basic }}
<pre v-code><code>{{ code.basic }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>
{{ code.options }}
<pre v-code><code>{{ code.options }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>
{{ code.composition }}
<pre v-code><code>{{ code.composition }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>
{{ code.data }}
<pre v-code.json><code>{{ code.data }}
</code></pre>
</template>
</div>