68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup>
|
|
import { Browser } from "@capacitor/browser"
|
|
|
|
const props = defineProps({
|
|
links: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
/**
|
|
* Öffnet externen Link in iOS/Android über InApp Browser.
|
|
* Öffnet externen Link im Web über window.open.
|
|
* Interne Links → navigateTo
|
|
*/
|
|
async function openLink(link) {
|
|
if (link.external) {
|
|
if (useCapacitor().getIsNative()) {
|
|
await Browser.open({
|
|
url: link.to,
|
|
presentationStyle: "popover",
|
|
})
|
|
} else {
|
|
window.open(link.to, "_blank")
|
|
}
|
|
} else {
|
|
return navigateTo(link.to)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardCard
|
|
v-if="links.length > 0"
|
|
title="Schnellzugriffe"
|
|
>
|
|
<div class="space-y-2">
|
|
|
|
<div
|
|
v-for="(link, index) in links"
|
|
:key="index"
|
|
class="
|
|
p-3 bg-gray-50 dark:bg-gray-900
|
|
rounded-xl border flex items-center justify-between
|
|
active:scale-95 transition cursor-pointer
|
|
"
|
|
@click="openLink(link)"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<UIcon
|
|
:name="link.icon || 'i-heroicons-link'"
|
|
class="w-6 h-6 text-primary-500"
|
|
/>
|
|
<span class="font-medium truncate max-w-[60vw]">
|
|
{{ link.label }}
|
|
</span>
|
|
</div>
|
|
|
|
<UIcon
|
|
name="i-heroicons-chevron-right-20-solid"
|
|
class="w-5 h-5 text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</UDashboardCard>
|
|
</template>
|