Added Arrow component

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.85",
+  "version": "1.9.86",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -4625,6 +4625,14 @@ const moodRadarConfig = ref({
           >
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
+              <Arrow
+                :x1="20"
+                :y1="20"
+                :x2="100"
+                :y2="100"
+                :pointerSize="10"
+                :strokeWidth="2"
+              />
             </template>
           </DonutTest>
         </template>

src/App.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { createUid } from '../lib';
+import { computed } from "vue"
+
+const props = defineProps({
+    markerEnd: {
+        type: Boolean,
+        default: true
+    },
+    markerSize: {
+        type: Number,
+        default: 10
+    },
+    markerStart: {
+        type: Boolean,
+        default: false,
+    },
+    stroke: {
+        type: String,
+        default: "#2D353C"
+    },
+    strokeDasharray: {
+        type: Number,
+        default: 0
+    },
+    strokeLinecap: {
+        type: String,
+        default: "round"
+    },
+    strokeWidth: {
+        type: Number,
+        default: 1
+    },
+    x1: {
+        type: Number,
+        default: 0
+    },
+    x2: {
+        type: Number,
+        default: 0,
+    },
+    y1: {
+        type: Number,
+        default: 0
+    },
+    y2: {
+        type: Number,
+        default: 0
+    },
+})
+
+const uid = createUid();
+
+const viewBox = computed(() => {
+    return `0 0 ${props.markerSize} ${props.markerSize}`
+})
+
+const refC = computed(() => props.markerSize / 2)
+const markerSize = computed(() => {
+    return refC.value + (props.markerSize / 10)
+})
+
+</script>
+
+<template>
+    <g class="vue-ui-element-arrow">
+        <defs>
+            <marker :id="`arrow_end_${uid}`" orient="auto" :viewBox="viewBox" :refX="refC" :refY="refC" :markerWidth="markerSize" :markerHeight="markerSize">
+                <path :d="`M 0 0 L ${markerSize} ${refC} L 0 ${markerSize} z`" :fill="stroke" />
+            </marker>
+            <marker :id="`arrow_start_${uid}`" orient="auto-start-reverse" :viewBox="viewBox" :refX="refC" :refY="refC" :markerWidth="markerSize" :markerHeight="markerSize">
+                <path :d="`M 0 0 L ${markerSize} ${refC} L 0 ${markerSize} z`" :fill="stroke" />
+            </marker>
+        </defs>
+        <line
+            :x1="x1"
+            :y1="y1"
+            :x2="x2"
+            :y2="y2"
+            :stroke="stroke"
+            :stroke-width="strokeWidth"
+            :stroke-linecap="strokeLinecap"
+            :stroke-dasharray="strokeDasharray"
+            :marker-end="markerEnd ? `url(#arrow_end_${uid})` : ''"
+            :marker-start="markerStart ? `url(#arrow_start_${uid})` : ''"
+        />
+    </g>
+</template>

src/atoms/Arrow.vue

@@ -34,6 +34,7 @@ import VueUi3dBar from "./components/vue-ui-3d-bar.vue";
 import VueUiDigits from "./components/vue-ui-digits.vue";
 import VueUiMolecule from "./components/vue-ui-molecule.vue";
 import VueUiTableSparkline from "./components/vue-ui-table-sparkline.vue";
+import Arrow from "./atoms/Arrow.vue"
 
 export { 
     VueUiXy, 
@@ -71,5 +72,6 @@ export {
     VueUi3dBar,
     VueUiDigits,
     VueUiMolecule,
-    VueUiTableSparkline
+    VueUiTableSparkline,
+    Arrow
 };

src/index.js

@@ -37,7 +37,8 @@ import {
     VueUi3dBar,
     VueUiDigits,
     VueUiMolecule,
-    VueUiTableSparkline
+    VueUiTableSparkline,
+    Arrow
 } from 'vue-data-ui';
 import 'vue-data-ui/style.css';
 
@@ -78,4 +79,5 @@ app.component("VueUi3dBar", VueUi3dBar);
 app.component("VueUiDigits", VueUiDigits);
 app.component("VueUiMolecule", VueUiMolecule);
 app.component("VueUiTableSparkline", VueUiTableSparkline);
+app.component("Arrow", Arrow);
 app.mount('#app');

src/main.js

@@ -5,6 +5,20 @@ declare module 'vue-data-ui' {
         [key: string]: unknown;
     }
 
+    export const Arrow: DefineComponent<{
+        markerEnd?: boolean,
+        markerSize?: number,
+        markerStart?: boolean,
+        stroke?: string,
+        strokeDasharray?: number,
+        strokeLinecap?: "round" | "butt" | "square",
+        strokeWidth?: number,
+        x1: number,
+        x2: number,
+        y1: number,
+        y2: number
+    }>
+
     export type VueUiTableSparklineDatasetItem = {
         name: string;
         values: number[];