feat(client): new arrow component

Author: antfu

packages/client/builtin/Arrow.vue

@@ -0,0 +1,53 @@
+<!--
+
+Simple Arrow
+
+<arrow x1="10" y1="20" x2="100" y2="200" color="green" width="3" />
+
+<arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }"/>
+
+-->
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps<{
+  x1: number | string
+  y1: number | string
+  x2: number | string
+  y2: number | string
+  width?: number | string
+  color?: string
+}>()
+</script>
+
+<template>
+  <svg
+    class="absolute left-0 top-0 pointer-events-none"
+    :width="Math.max(+x1, +x2) + 50"
+    :height="Math.max(+y1, +y2) + 50"
+  >
+    <defs>
+      <marker
+        id="arrowhead"
+        markerUnits="strokeWidth"
+        :markerWidth="10"
+        :markerHeight="7"
+        refX="9"
+        refY="3.5"
+        orient="auto"
+      >
+        <polygon points="0 0, 10 3.5, 0 7" :fill="color || 'currentColor'" />
+      </marker>
+    </defs>
+    <line
+      :x1="+x1"
+      :y1="+y1"
+      :x2="+x2"
+      :y2="+y2"
+      :stroke="color || 'currentColor'"
+      :stroke-width="width || 2"
+      marker-end="url(#arrowhead)"
+    />
+  </svg>
+</template>

packages/create-app/template/slides.md

@@ -110,13 +110,15 @@ interface User {
   role: string
 }
 
-function updateUser(id: number, update: Partial<User>) {
+function updateUser(id: number, update: User) {
   const user = getUser(id)
   const newUser = {...user, ...update}  
   saveUser(id, newUser)
 }
 ```
 
+<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
+
 ---
 
 # Components