Skip to content

Commit 131027a

Browse files
mythzmythz
committed
Update ShellCommand.mjs
1 parent 3fa2fab commit 131027a

File tree

1 file changed

+68
-46
lines changed

1 file changed

+68
-46
lines changed

‎MyApp/wwwroot/pages/components/ShellCommand.mjs‎

Lines changed: 68 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,79 @@
11
import { ref } from "vue"
2-
import { map } from "@servicestack/client"
32

43
export default {
5-
template:`<div class="lang relative bg-gray-700 text-gray-300 pl-5 py-3 sm:rounded flex">
6-
<div class="flex ml-2 w-full justify-between cursor-pointer" @click="copy">
7-
<div>
8-
<span>$ </span>
9-
<label class="cursor-pointer">
10-
<slot>{{text}}</slot>
11-
</label>
12-
</div>
13-
<small class="text-xs text-gray-400 px-3 -mt-1">sh</small>
14-
</div>
15-
16-
<div v-if="successText" class="absolute right-0 -mr-28 -mt-3 rounded-md bg-green-50 p-3">
17-
<div class="flex">
18-
<div class="flex-shrink-0">
19-
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
20-
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
21-
</svg>
4+
template:`
5+
<div :class="['group relative overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700',
6+
'bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800',
7+
'shadow-sm hover:shadow-md transition-all duration-200']"
8+
@click="copy">
9+
<!-- Background pattern -->
10+
<div class="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800 opacity-50"
11+
style="background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 16px 16px;" />
12+
13+
<div class="relative flex items-center justify-between px-4 py-3">
14+
<!-- Left side - Terminal icon and command -->
15+
<div class="flex items-center gap-3 flex-1 min-w-0 cursor-pointer">
16+
<svg class="w-4 h-4 text-slate-500 dark:text-slate-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg>
17+
<div class="flex items-center gap-2 min-w-0 flex-1">
18+
<code ref="commandRef" class="text-sm font-mono text-slate-900 dark:text-slate-100 truncate">
19+
<slot>{{text}}</slot>
20+
</code>
21+
</div>
2222
</div>
23-
<div class="ml-3">
24-
<p class="text-sm font-medium text-green-800">
25-
{{ successText }}
26-
</p>
23+
24+
<!-- Right side - Copy button -->
25+
<div class="flex items-center gap-2 ml-4">
26+
<button type="button"
27+
@click="copy"
28+
:class="[
29+
'flex items-center justify-center p-2 rounded-md',
30+
'transition-all duration-200',
31+
'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
32+
copied
33+
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-300 dark:border-green-700'
34+
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-400 dark:hover:border-slate-500'
35+
]"
36+
:aria-label="copied ? 'Copied!' : 'Copy command'"
37+
>
38+
<svg v-if="copied" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
39+
<svg v-else class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
40+
</button>
2741
</div>
2842
</div>
29-
</div>
30-
31-
</div>`,
32-
props:['text'],
43+
</div>`,
44+
props: ['text'],
3345
setup(props) {
34-
let successText = ref('')
35-
/** @param {MouseEvent} e */
36-
function copy(e) {
37-
let $el = document.createElement("input")
38-
let $lbl = e.target.parentElement.querySelector('label')
39-
$el.setAttribute("value", $lbl.innerText)
40-
document.body.appendChild($el)
41-
$el.select()
42-
document.execCommand("copy")
43-
document.body.removeChild($el)
44-
if (typeof window.getSelection == "function") {
45-
const range = document.createRange()
46-
range.selectNodeContents($lbl)
47-
map(window.getSelection(), sel => {
48-
sel.removeAllRanges()
49-
sel.addRange(range)
50-
})
46+
const copied = ref(false)
47+
const commandRef = ref(null)
48+
49+
async function copy(e) {
50+
e.preventDefault()
51+
52+
// Get the text content from the command element
53+
const textToCopy = commandRef.value?.textContent?.trim() || ""
54+
55+
try {
56+
// Use modern Clipboard API
57+
await navigator.clipboard.writeText(textToCopy)
58+
59+
copied.value = true
60+
setTimeout(() => copied.value = false, 2000)
61+
} catch (err) {
62+
// Fallback for older browsers
63+
const $el = document.createElement("textarea")
64+
$el.value = textToCopy
65+
$el.style.position = "fixed"
66+
$el.style.opacity = "0"
67+
document.body.appendChild($el)
68+
$el.select()
69+
document.execCommand("copy")
70+
document.body.removeChild($el)
71+
72+
copied.value = true
73+
setTimeout(() => copied.value = false, 2000)
5174
}
52-
successText.value = 'copied'
53-
setTimeout(() => successText.value = '', 3000)
5475
}
55-
return { successText, copy }
76+
77+
return { copied, commandRef, copy }
5678
}
5779
}

0 commit comments

Comments
 (0)