github/toon
1
0
Fork 0
mirror of https://github.com/voson-wang/toon.git synced 2026-01-29 15:24:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(playground): move copy button to code block

Browse Source
This commit is contained in:
Johann Schopplich
2025-11-29 22:27:03 +01:00
parent 81dfab1d4d
commit 5c6ea544a0
1 changed files with 56 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/.vitepress/theme/components/PlaygroundLayout.vue
View File

@@ -237,15 +237,16 @@ async function loadTokenizer() {
<span>{{ toonTokens ?? '...' }} tokens</span> <span>{{ toonTokens ?? '...' }} tokens</span>
<span>{{ toonOutput.length }} chars</span> <span>{{ toonOutput.length }} chars</span>
</span> </span>
</div>
<div class="editor-output">
<button <button
class="copy-button" class="copy-button"
:class="{ copied }"
:disabled="!!error" :disabled="!!error"
:aria-label="copied ? 'Copied to clipboard' : 'Copy to clipboard'" :aria-label="copied ? 'Copied to clipboard' : 'Copy to clipboard'"
:aria-pressed="copied" :aria-pressed="copied"
@click="copy()" @click="copy()"
/> />
</div>
<div class="editor-output">
<pre v-if="!error"><code>{{ toonOutput }}</code></pre> <pre v-if="!error"><code>{{ toonOutput }}</code></pre>
<div v-else id="json-error" role="alert" class="error-message"> <div v-else id="json-error" role="alert" class="error-message">
{{ error }} {{ error }}
@@ -436,17 +437,33 @@ async function loadTokenizer() {
} }
.copy-button { .copy-button {
width: 20px; position: absolute;
height: 20px; top: 12px;
background: var(--vp-icon-copy) center / 16px no-repeat; right: 12px;
z-index: 3;
border: 1px solid var(--vp-code-copy-code-border-color);
border-radius: 4px; border-radius: 4px;
opacity: 0.6; width: 40px;
transition: opacity 0.25s, background-color 0.25s; height: 40px;
background-color: var(--vp-code-copy-code-bg);
opacity: 0;
cursor: pointer;
background-image: var(--vp-icon-copy);
background-position: 50%;
background-size: 20px;
background-repeat: no-repeat;
transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
} }
.copy-button:hover:not(:disabled) { .editor-output:hover .copy-button,
.copy-button:focus {
opacity: 1; opacity: 1;
background-color: var(--vp-c-default-soft); }
.copy-button:hover:not(:disabled),
.copy-button.copied {
border-color: var(--vp-code-copy-code-hover-border-color);
background-color: var(--vp-code-copy-code-hover-bg);
} }
.copy-button:focus-visible { .copy-button:focus-visible {
@@ -459,8 +476,36 @@ async function loadTokenizer() {
cursor: not-allowed; cursor: not-allowed;
} }
.copy-button[aria-pressed="true"] { .copy-button.copied,
.copy-button:hover.copied {
border-radius: 0 4px 4px 0;
background-image: var(--vp-icon-copied); background-image: var(--vp-icon-copied);
}
.copy-button.copied::before,
.copy-button:hover.copied::before {
position: relative;
top: -1px;
transform: translateX(calc(-100% - 1px));
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--vp-code-copy-code-hover-border-color);
border-right: 0;
border-radius: 4px 0 0 4px;
padding: 0 10px;
width: fit-content;
height: 40px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: var(--vp-code-copy-code-active-text);
background-color: var(--vp-code-copy-code-hover-bg);
white-space: nowrap;
content: var(--vp-code-copy-copied-text-content);
}
.copy-button[aria-pressed="true"] {
opacity: 1; opacity: 1;
} }
@@ -480,6 +525,7 @@ async function loadTokenizer() {
} }
.editor-output { .editor-output {
position: relative;
overflow: auto; overflow: auto;
background: var(--vp-code-block-bg); background: var(--vp-code-block-bg);
} }