Updated Link component

src/components/all.ts

@@ -3,7 +3,7 @@ import Progress from './Progress.vue';
 import ExpandableCard from './ExpandableCard.vue';
 import Modal from './Modal.vue';
 import ModalCard from './ModalCard.vue';
-import Link from './Link.vue';
+import Link from './v2/Link.vue';
 import DeferredInput from './DeferredInput.vue';
 
 export {

src/components/v2/Link.vue

@@ -0,0 +1,43 @@
+<template>
+    <component  :is="tag" v-if="target === 'file'" @click="selectFile()" class='c-link' data-semantic="file-selection">
+        <slot></slot>
+    </component>
+    <component  :is="tag" v-else-if="target != null" @click="openLink()" class='c-link' data-semantic="external-link">
+        <slot></slot>
+    </component>
+    <component  :is="tag" v-else class='c-link' data-semantic="visual-indicator">
+        <slot></slot>
+    </component>
+</template>
+
+<script lang="ts" setup>
+import LinkProvider from '../../providers/components/LinkProvider';
+
+interface LinkProps {
+    url: string;
+    target?: string;
+    tag: string;
+}
+
+const linkProps = withDefaults(defineProps<LinkProps>(), {
+    tag: "a"
+})
+
+function openLink() {
+    LinkProvider.instance.openLink(linkProps.url);
+}
+
+function selectFile() {
+    LinkProvider.instance.selectFile(linkProps.url);
+}
+</script>
+
+<style lang="scss" scoped>
+    .c-link {
+        color: var(--v2-link-text-color);
+
+        &:focus, &:hover, &:active {
+            color: var(--v2-link-active-text-color);
+        }
+    }
+</style>

src/css/v2/_initial.scss

@@ -6,4 +6,7 @@
     --v2-warning-background-color: #ffe08a;
     --v2-warning-text-color: #222;
     --v2-warning-subtitle-text-color: #272727;
+
+    --v2-link-text-color: #3f8ecf;
+    --v2-link-active-text-color: white;
 }