feat(electron): copy button of connection page (#154)

Co-authored-by: arlo <[email protected]>

packages/client/src/components/WaitForConnection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { VueInput } from '@vue/devtools-ui'
+import { VueIcon, VueInput } from '@vue/devtools-ui'
 import AppConnecting from '~/components/AppConnecting.vue'
 
 const props = defineProps<{
@@ -16,6 +16,8 @@ const _network = scriptWrapper(props.network!)
 
 const local = ref(_local)
 const network = ref(_network)
+
+const { copy } = useCopy()
 </script>
 
 <template>
@@ -28,11 +30,13 @@ const network = ref(_network)
         <p class="text-center text-sm op80 text-base">
           Add one of the following to the top of your page 👇:
         </p>
-        <div class="mt-3 $ui-fcc flex-row">
-          <VueInput v-model="local" left-icon="i-carbon-copy" class="w-400px!" />
+        <div class="mt-3 $ui-fcc flex-row gap3">
+          <VueInput v-model="local" class="w-380px!" />
+          <VueIcon icon="i-carbon-copy" class="cursor-pointer text-primary-300 hover:text-primary-500" @click="copy(local)" />
         </div>
-        <div class="mt-3 $ui-fcc flex-row">
-          <VueInput v-model="network" left-icon="i-carbon-copy" class="w-400px!" />
+        <div class="mt-3 $ui-fcc flex-row gap3">
+          <VueInput v-model="network" class="w-380px!" />
+          <VueIcon icon="i-carbon-copy" class="cursor-pointer text-primary-300 hover:text-primary-500" @click="copy(network)" />
         </div>
       </div>
     </AppConnecting>

packages/client/src/components/assets/AssetDetails.vue

@@ -57,7 +57,7 @@ const codeSnippets = computed(() => {
   return items
 })
 
-const copy = useCopy()
+const { copy } = useCopy()
 const timeAgo = useTimeAgo(() => asset.value.mtime)
 const fileSize = computed(() => {
   const size = asset.value.size
@@ -159,7 +159,7 @@ const supportsPreview = computed(() => {
                 icon="i-carbon-copy"
                 action mr1 mt--2px flex-none
                 :border="false"
-                @click="copy(asset.publicPath, 'assets-public-path')"
+                @click="copy(asset.publicPath, { silent: false, type: 'assets-public-path' })"
               />
               <RouterLink
                 :to="asset.publicPath"

packages/client/src/components/code/CodeSnippets.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 }>()
 
 const selected = shallowRef<CodeSnippet | undefined>(props.codeSnippets[0])
-const copy = useCopy()
+const { copy } = useCopy()
 
 const selectedLang = computed(() => (selected.value?.lang || 'text') as BuiltinLanguage)
 
@@ -45,7 +45,7 @@ watchEffect(() => {
         w-full of-auto p3
       />
       <div flex="~ gap-2" px3 pb3>
-        <VueButton @click="copy(selected!.code, eventType || `code-snippet-${selected.name}`)">
+        <VueButton @click="copy(selected!.code, { silent: false, type: eventType || `code-snippet-${selected.name}` })">
           Copy
           <template #icon>
             <slot name="i-carbon-copy" />

packages/client/src/composables/editor.ts

@@ -1,7 +1,39 @@
+import { showVueNotification } from '@vue/devtools-ui'
+
+interface CopyOptions {
+  silent?: boolean
+  type?: string
+}
+
 export function useCopy() {
-  const clipboard = useClipboard()
+  const { copy: _copy, copied } = useClipboard()
+
+  const copy = (text: string, options: CopyOptions = {}) => {
+    const {
+      silent = false,
+      type = '',
+    } = options
+    _copy(text).then(() => {
+      if (!silent) {
+        showVueNotification({
+          message: 'Copied to clipboard',
+          type: 'success',
+          duration: 3000,
+        })
+      }
+    }).catch(() => {
+      if (!silent) {
+        showVueNotification({
+          message: 'Failed to copy to clipboard',
+          type: 'error',
+          duration: 3000,
+        })
+      }
+    })
+  }
 
-  return (text: string, type?: string) => {
-    clipboard.copy(text)
+  return {
+    copy,
+    copied,
   }
 }

packages/ui/src/components/Input.vue

@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<{
   loading?: boolean
   autoFocus?: boolean
   loadingDebounceTime?: number
+  readonly?: boolean
 }>(), {
   placeholder: '',
   variant: 'normal',
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<{
   loading: false,
   autoFocus: false,
   loadingDebounceTime: 0,
+  readonly: false,
 })
 
 const emit = defineEmits<{
@@ -42,7 +44,7 @@ const focused = refWithControl(false, {
     emit('updateFocused', value)
   },
 })
-const noFocusAnimation = computed(() => props.variant === 'flat' || props.variant === 'warning')
+const noFocusAnimation = computed(() => props.variant === 'flat' || props.variant === 'warning' || props.disabled || props.readonly)
 
 const disabled = computed(() => props.disabled || loading.value)
 
@@ -100,7 +102,7 @@ watchEffect(() => {
     <input
       ref="inputRef" v-model="value"
       class="$ui-base w-full bg-transparent color-inherit outline-none placeholder-color-gray-500 dark:placeholder-gray-300" :type="props.password ? 'password' : 'text'"
-      :placeholder="placeholder" :disabled="disabled"
+      :placeholder="placeholder" :disabled="disabled || readonly"
       @blur="focused = false"
     >
     <div v-if="loading" :class="iconClasses">