Fixed code buttons
Cagatay Civici
parent
49f24b6a85
commit
5e3a9ddd72
|
|
@ -346,6 +346,22 @@ pre[class*="language-"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-dark {
|
.layout-dark {
|
||||||
|
.doc-section-code-buttons {
|
||||||
|
button {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color .2s, box-shadow .2s;
|
||||||
|
border: 0 none;
|
||||||
|
color: var(--surface-400);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255,255,255,.1);
|
||||||
|
color: var(--surface-500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
pre[class*="language-"] {
|
pre[class*="language-"] {
|
||||||
code {
|
code {
|
||||||
background: var(--surface-card) !important;
|
background: var(--surface-card) !important;
|
||||||
|
|
@ -354,6 +370,22 @@ pre[class*="language-"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-light {
|
.layout-light {
|
||||||
|
.doc-section-code-buttons {
|
||||||
|
button {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color .2s, box-shadow .2s;
|
||||||
|
border: 0 none;
|
||||||
|
color: var(--surface-400);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255,255,255,.1);
|
||||||
|
color: var(--surface-300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
pre[class*="language-"] {
|
pre[class*="language-"] {
|
||||||
code {
|
code {
|
||||||
background: var(--surface-700) !important;
|
background: var(--surface-700) !important;
|
||||||
|
|
|
||||||
|
|
@ -6,78 +6,48 @@
|
||||||
style="gap: 0.75rem"
|
style="gap: 0.75rem"
|
||||||
>
|
>
|
||||||
<template v-if="codeMode !== 'basic' && !hideToggleCode">
|
<template v-if="codeMode !== 'basic' && !hideToggleCode">
|
||||||
<Button
|
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
|
||||||
:class="['p-button-rounded p-button-text p-button-plain py-0 px-1 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
|
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
|
||||||
label="Composition API"
|
|
||||||
@click="codeLang = 'composition'"
|
|
||||||
></Button>
|
|
||||||
<Button
|
|
||||||
:class="['p-button-rounded p-button-text p-button-plain py-0 px-1 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>
|
||||||
|
|
||||||
<template v-if="!hideToggleCode">
|
<template v-if="!hideToggleCode">
|
||||||
<Button
|
<button
|
||||||
v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
|
v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
|
||||||
type="button"
|
type="button"
|
||||||
@click="toggleCodeMode('composition')"
|
@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"
|
class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
||||||
icon="pi pi-code"
|
>
|
||||||
></Button>
|
<i class="pi pi-code"></i>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="!hideToggleCode && code.data">
|
<template v-if="!hideToggleCode && code.data">
|
||||||
<Button
|
<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">
|
||||||
v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }"
|
<i class="pi pi-database"></i>
|
||||||
type="button"
|
</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>
|
||||||
|
|
||||||
<template v-if="!hideCodeSandbox">
|
<template v-if="!hideCodeSandbox">
|
||||||
<Button
|
<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">
|
||||||
v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }"
|
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
|
||||||
type="button"
|
<path
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
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"
|
||||||
@click="showCodesandbox"
|
/>
|
||||||
>
|
</svg>
|
||||||
<template #icon="slotProps">
|
</button>
|
||||||
<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>
|
||||||
|
|
||||||
<template v-if="!hideStackBlitz">
|
<template v-if="!hideStackBlitz">
|
||||||
<Button
|
<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">
|
||||||
v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }"
|
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
|
||||||
type="button"
|
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
|
||||||
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
|
</svg>
|
||||||
@click="showStackblitz"
|
</button>
|
||||||
>
|
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<Button
|
<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">
|
||||||
v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }"
|
<i class="pi pi-copy"></i>
|
||||||
type="button"
|
</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>
|
||||||
|
|
||||||
<div :style="scrollable ? { 'max-height': '40rem' } : undefined">
|
<div :style="scrollable ? { 'max-height': '40rem' } : undefined">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue