Skip to content

Commit f5032fd

Browse files
dudo50dudo50
committed
Update few things
1 parent b8422d9 commit f5032fd

3 files changed

Lines changed: 115 additions & 11 deletions

File tree

‎docs/.vitepress/theme/components/AssetsImportBlock.vue‎

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script setup>
2-
import { computed } from 'vue'
2+
import { computed, ref } from 'vue'
33
import { apiVersion } from '../composables/useApiVersion'
44
5-
const importCode = computed(() => {
5+
const copied = ref(false)
6+
7+
const command = computed(() => {
68
const base =
79
apiVersion.value === 'pjs'
810
? '@paraspell/sdk-pjs'
@@ -32,25 +34,75 @@ const importCode = computed(() => {
3234
findAssetInfoOrThrow
3335
} from '${base}'`
3436
})
37+
38+
const copy = async () => {
39+
await navigator.clipboard.writeText(command.value)
40+
copied.value = true
41+
setTimeout(() => (copied.value = false), 1500)
42+
}
3543
</script>
3644

3745
<template>
3846
<transition name="fade" mode="out-in">
39-
<div class="import-box" :key="importCode">
40-
<pre><code>{{ importCode }}</code></pre>
47+
<div class="install-box" :key="command">
48+
<pre><code>{{ command }}</code></pre>
49+
50+
<button class="copy-btn" @click="copy">
51+
{{ copied ? 'Copied ✓' : 'Copy' }}
52+
</button>
4153
</div>
4254
</transition>
4355
</template>
4456

4557
<style scoped>
46-
.import-box {
58+
.install-box {
59+
position: relative;
4760
background: var(--vp-code-block-bg);
4861
border: 1px solid var(--vp-c-divider);
4962
border-radius: 14px;
5063
padding: 18px 20px;
64+
font-size: 0.95rem;
5165
font-family: var(--vp-font-family-mono);
66+
transition: all 0.2s ease;
67+
user-select: text;
68+
}
69+
70+
.install-box:hover {
71+
border-color: var(--vp-c-brand-1);
72+
box-shadow: 0 0 0 1px var(--vp-c-brand-1) inset;
73+
}
74+
75+
pre {
76+
margin: 0;
77+
background: transparent;
78+
overflow-x: auto;
79+
}
80+
81+
code {
82+
background: transparent;
83+
user-select: text;
84+
}
85+
86+
/* Copy Button */
87+
.copy-btn {
88+
position: absolute;
89+
top: 10px;
90+
right: 12px;
91+
border: none;
92+
background: var(--vp-c-bg-soft);
93+
border-radius: 8px;
94+
padding: 4px 10px;
95+
font-size: 0.75rem;
96+
cursor: pointer;
97+
transition: all 0.2s ease;
98+
}
99+
100+
.copy-btn:hover {
101+
background: var(--vp-c-brand-1);
102+
color: white;
52103
}
53104
105+
/* Fade animation */
54106
.fade-enter-active,
55107
.fade-leave-active {
56108
transition: opacity 0.2s ease, transform 0.2s ease;

‎docs/.vitepress/theme/components/ImportBlock.vue‎

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script setup>
2-
import { computed } from 'vue'
2+
import { computed, ref } from 'vue'
33
import { apiVersion } from '../composables/useApiVersion'
44
5-
const importCode = computed(() => {
5+
const copied = ref(false)
6+
7+
const command = computed(() => {
68
const base =
79
apiVersion.value === 'pjs'
810
? '@paraspell/sdk-pjs'
@@ -17,25 +19,75 @@ const importCode = computed(() => {
1719
getOtherAssetsPallets
1820
} from '${base}'`
1921
})
22+
23+
const copy = async () => {
24+
await navigator.clipboard.writeText(command.value)
25+
copied.value = true
26+
setTimeout(() => (copied.value = false), 1500)
27+
}
2028
</script>
2129

2230
<template>
2331
<transition name="fade" mode="out-in">
24-
<div class="import-box" :key="importCode">
25-
<pre><code>{{ importCode }}</code></pre>
32+
<div class="install-box" :key="command">
33+
<pre><code>{{ command }}</code></pre>
34+
35+
<button class="copy-btn" @click="copy">
36+
{{ copied ? 'Copied ✓' : 'Copy' }}
37+
</button>
2638
</div>
2739
</transition>
2840
</template>
2941

3042
<style scoped>
31-
.import-box {
43+
.install-box {
44+
position: relative;
3245
background: var(--vp-code-block-bg);
3346
border: 1px solid var(--vp-c-divider);
3447
border-radius: 14px;
3548
padding: 18px 20px;
49+
font-size: 0.95rem;
3650
font-family: var(--vp-font-family-mono);
51+
transition: all 0.2s ease;
52+
user-select: text;
53+
}
54+
55+
.install-box:hover {
56+
border-color: var(--vp-c-brand-1);
57+
box-shadow: 0 0 0 1px var(--vp-c-brand-1) inset;
58+
}
59+
60+
pre {
61+
margin: 0;
62+
background: transparent;
63+
overflow-x: auto;
64+
}
65+
66+
code {
67+
background: transparent;
68+
user-select: text;
69+
}
70+
71+
/* Copy Button */
72+
.copy-btn {
73+
position: absolute;
74+
top: 10px;
75+
right: 12px;
76+
border: none;
77+
background: var(--vp-c-bg-soft);
78+
border-radius: 8px;
79+
padding: 4px 10px;
80+
font-size: 0.75rem;
81+
cursor: pointer;
82+
transition: all 0.2s ease;
83+
}
84+
85+
.copy-btn:hover {
86+
background: var(--vp-c-brand-1);
87+
color: white;
3788
}
3889
90+
/* Fade animation */
3991
.fade-enter-active,
4092
.fade-leave-active {
4193
transition: opacity 0.2s ease, transform 0.2s ease;

‎docs/.vitepress/theme/components/InstallCommand.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const command = computed(() => {
2222
case 'npm':
2323
return `npm install ${packageList.value}`
2424
default:
25-
return `pnpm install ${packageList.value}`
25+
return `pnpm add ${packageList.value}`
2626
}
2727
})
2828

0 commit comments

Comments
 (0)