refactor: use composables

src/renderer/components/devtools/composables/index.ts

@@ -0,0 +1,7 @@
+import { useClipboard } from '@vueuse/core'
+
+export function useCopy (value: string) {
+  console.log(value)
+  const { copy } = useClipboard()
+  copy(value)
+}

src/renderer/components/devtools/crypto/HashTool.vue

@@ -25,7 +25,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -38,7 +38,6 @@
 import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref, computed } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import sha1 from 'crypto-js/sha1'
 import sha224 from 'crypto-js/sha224'
 import sha256 from 'crypto-js/sha256'
@@ -49,6 +48,7 @@ import md5 from 'crypto-js/md5'
 import ripemd160 from 'crypto-js/ripemd160'
 import type { Algo } from './types'
 import options from './algo-options.json'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const algo = ref<Algo>('md5')
@@ -98,11 +98,6 @@ function onClear () {
   inputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 track('devtools/hash-generator')
 </script>
 

src/renderer/components/devtools/crypto/HmacTool.vue

@@ -31,7 +31,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -44,7 +44,6 @@
 import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref, computed } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import sha1 from 'crypto-js/hmac-sha1'
 import sha224 from 'crypto-js/hmac-sha224'
 import sha256 from 'crypto-js/hmac-sha256'
@@ -55,6 +54,7 @@ import md5 from 'crypto-js/hmac-md5'
 import ripemd160 from 'crypto-js/hmac-ripemd160'
 import type { Algo } from './types'
 import options from './algo-options.json'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const secretValue = ref('')
@@ -105,11 +105,6 @@ function onClear () {
   inputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 track('devtools/hmac-generator')
 </script>
 

src/renderer/components/devtools/crypto/UuidTool.vue

@@ -30,7 +30,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -43,8 +43,8 @@
 import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref, watch, nextTick } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import { v1, v4 } from 'uuid'
+import { useCopy } from '../composables'
 
 const version = ref('1')
 const amount = ref(1)
@@ -71,11 +71,6 @@ function onClear () {
   outputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 watch(amount, v => {
   if (v > 1000) {
     nextTick(() => {

src/renderer/components/devtools/encode-decode/Base64EncodeDecodeTool.vue

@@ -25,7 +25,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -38,9 +38,9 @@
 import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref, computed } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import type { Type } from './types'
 import options from './encode-decode-options.json'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const type = ref<Type>('encode')
@@ -66,11 +66,6 @@ function onClear () {
   inputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 track('devtools/base64-encoder-decoder')
 </script>
 

src/renderer/components/devtools/encode-decode/UrlEncodeDecodeTool.vue

@@ -25,7 +25,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -38,9 +38,9 @@
 import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref, computed } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import type { Type } from './types'
 import options from './encode-decode-options.json'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const type = ref<Type>('encode')
@@ -66,11 +66,6 @@ function onClear () {
   inputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 track('devtools/url-encoder-decoder')
 </script>
 

src/renderer/components/devtools/text/CaseConverterTool.vue

@@ -42,7 +42,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -56,7 +56,7 @@ import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref } from 'vue'
 import { camelCase, kebabCase, startCase, snakeCase } from 'lodash'
-import { useClipboard } from '@vueuse/core'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const outputValue = ref('')
@@ -99,11 +99,6 @@ function onClear () {
   outputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 track('devtools/case-converter')
 </script>
 

src/renderer/components/devtools/text/SlugTool.vue

@@ -19,7 +19,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -33,7 +33,7 @@ import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref, computed } from 'vue'
 import slugify from 'slugify'
-import { useClipboard } from '@vueuse/core'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const outputValue = computed(() => {
@@ -45,11 +45,6 @@ function onClear () {
   inputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 track('devtools/slug-generator')
 </script>
 

src/renderer/components/devtools/text/SortTool.vue

@@ -27,7 +27,7 @@
           <AppButton @click="onClear">
             {{ i18n.t('common:button.clear') }}
           </AppButton>
-          <AppButton @click="onCopy">
+          <AppButton @click="useCopy(outputValue)">
             {{ i18n.t('common:button.copy') }}
           </AppButton>
         </template>
@@ -40,7 +40,7 @@
 import { i18n } from '@/electron'
 import { track } from '@/services/analytics'
 import { ref } from 'vue'
-import { useClipboard } from '@vueuse/core'
+import { useCopy } from '../composables'
 
 const inputValue = ref('')
 const outputValue = ref('')
@@ -50,11 +50,6 @@ function onClear () {
   outputValue.value = ''
 }
 
-function onCopy () {
-  const { copy } = useClipboard()
-  copy(outputValue.value)
-}
-
 function onSort (type: string) {
   const lines = inputValue.value.split('\n')