Set Back/Close/Cancel buttons using a component

resources/js_vue3/components/DestinationGroupSelector.vue

@@ -62,12 +62,7 @@
             <p class="control">
                 <button class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
             </p>
-            <!-- Cancel button -->
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <button id="btnCancel" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showDestinationGroupSelector', false)">{{ $t('commons.cancel') }}</button>
-                </UseColorMode>
-            </p>
+            <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
         </VueFooter>
     </div>
 </template>

resources/js_vue3/components/GroupSwitch.vue

@@ -45,12 +45,7 @@
             </div>
         </div>
         <VueFooter :showButtons="true">
-            <!-- Close Group switch button -->
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showGroupSwitch', false)">{{ $t('commons.close') }}</button>
-                </UseColorMode>
-            </p>
+            <ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="$emit('update:showGroupSwitch', false)" />
         </VueFooter>
     </div>
 </template>

resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue

@@ -0,0 +1,87 @@
+<script setup>
+    import { useColorMode } from '@vueuse/core'
+
+    const router = useRouter()
+    const route = useRoute()
+    const mode = useColorMode()
+    
+    const props = defineProps({
+        returnTo: {
+            type: String,
+            default: 'accounts'
+        },
+        action: {
+            type: String,
+            default: 'close'
+        },
+        useLinkTag: {
+            type: Boolean,
+            default: true
+        },
+        isText: {
+            type: Boolean,
+            default: false
+        },
+        isCapture: {
+            type: Boolean,
+            default: false
+        },
+    })
+
+    const classes = 'button is-rounded'
+        + (mode.value === 'dark' && ! props.isText && ! props.isCapture ? ' is-dark' : '')
+        + (props.isText ? ' is-text' : '')
+        + (props.isCapture ? ' is-large is-warning' : '')
+</script>
+
+<template>
+    <!-- back / close / cancel button -->
+    <p v-if="useLinkTag" class="control">
+        <RouterLink
+            v-if="action == 'close'"
+            id="btnClose"
+            :to="{ name: returnTo }"
+            :class="classes"
+            tabindex="0"
+            role="button"
+            :aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
+        >
+            {{ $t('commons.close') }}
+        </RouterLink>
+        <RouterLink
+            v-else-if="action == 'back'"
+            id="lnkBack"
+            :to="{ name: returnTo }"
+            :class="classes"
+            :aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
+        >
+            {{ $t('commons.back') }}
+        </RouterLink>
+        <RouterLink
+            v-else-if="action == 'cancel'"
+            id="btnCancel"
+            :to="{ name: returnTo }"
+            :class="classes"
+        >
+            {{ $t('commons.cancel') }}
+        </RouterLink>
+    </p>
+    <p v-else class="control">
+        <button
+            v-if="action == 'close'"
+            id="btnClose"
+            :class="classes"
+            @click="$emit('closed')"
+        >
+            {{ $t('commons.close') }}
+        </button>
+        <button
+            v-if="action == 'cancel'"
+            id="btnCancel"
+            :class="classes"
+            @click="$emit('canceled')"
+        >
+            {{ $t('commons.cancel') }}
+        </button>
+    </p>
+</template>