refs #6339 composable

src/components/UserPanel.vue

@@ -1,19 +1,19 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar, useQuasar } from 'quasar';
+import { Dark, Quasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { localeEquivalence } from "src/i18n/index";
+import { localeEquivalence } from 'src/i18n/index';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-const quasar = useQuasar();
+import { useClipboard } from 'src/composables/useClipboard';
-
+const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
         return locale.value;
@@ -21,14 +21,14 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        value = localeEquivalence[value] ?? value
+        value = localeEquivalence[value] ?? value;
 
         try {
             /* @vite-ignore */
             import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
                 Quasar.lang.set(lang.default);
             });
-       } catch (error) {
+        } catch (error) {
             //
         }
     },
@@ -81,12 +81,8 @@ function logout() {
     router.push('/login');
 }
 
-function copyUserToken(){
+function copyUserToken() {
-    navigator.clipboard.writeText(session.getToken());
+    copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
-    quasar.notify({
-        type: 'positive',
-        message: t('components.userPanel.copyToken'),
-    });
 }
 </script>
 
@@ -129,8 +125,12 @@ function copyUserToken(){
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
+                <div
-            </div>
+                    class="text-subtitle3 text-grey-7 q-mb-xs copyText"
+                    @click="copyUserToken()"
+                >
+                    @{{ user.name }}
+                </div>
 
                 <QBtn
                     id="logout"
@@ -152,9 +152,9 @@ function copyUserToken(){
     width: 150px;
 }
 
-.copyUserToken {
+.copyText {
-   &:hover{
+    &:hover {
-    cursor: alias;
+        cursor: alias;
-   }
+    }
 }
 </style>

src/components/ui/VnLv.vue

@@ -1,9 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
-import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
 
+import { useClipboard } from 'src/composables/useClipboard';
 const $props = defineProps({
     label: { type: String, default: null },
     value: {
@@ -14,16 +13,15 @@ const $props = defineProps({
     dash: { type: Boolean, default: true },
     copy: { type: Boolean, default: false },
 });
-const { t } = useI18n();
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
-const quasar = useQuasar();
+
-function copyText() {
+const { copyText } = useClipboard();
-    navigator.clipboard.writeText($props.value);
+
-    quasar.notify({
+function copyValueText() {
-        type: 'positive',
+    copyText($props.value, {
-        message: t('components.VnLv.copyText', {
+        component: {
             copyValue: $props.value,
-        }),
+        },
     });
 }
 </script>
@@ -62,7 +60,7 @@ function copyText() {
                 </QTooltip>
             </QIcon>
         </div>
-        <div class="copy" v-if="$props.copy && $props.value" @click="copyText()">
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
             <QIcon name="Content_Copy" color="primary" />
         </div>
     </div>

src/composables/useClipboard.js

@@ -0,0 +1,17 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useClipboard() {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    /**
+     *
+     * @param {String} value Value to send to clipboardAPI
+     * @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
+     */
+    function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
+        navigator.clipboard.writeText(value);
+        quasar.notify({ type: 'positive', message: t(label, component) });
+    }
+    return { copyText };
+}