update(examples): Fix examples

examples/CustomConnectionLine/ConnectionLine.vue

@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+import { ConnectionLineComponentProps } from '~/index'
+
+interface ConnectionLineProps extends ConnectionLineComponentProps {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+const props = defineProps<ConnectionLineProps>()
+</script>
 <template>
   <g>
     <path
@@ -5,33 +16,8 @@
       fill="none"
       stroke="#222"
       :stroke-width="1.5"
-      :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
+      :d="`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
     />
-    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
   </g>
 </template>
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { ConnectionLineComponentProps } from '../../src';
-
-export default defineComponent({
-  props: {
-    sourceX: {
-      type: Number as PropType<ConnectionLineComponentProps['sourceX']>,
-      required: true
-    },
-    sourceY: {
-      type: Number as PropType<ConnectionLineComponentProps['sourceY']>,
-      required: true
-    },
-    targetX: {
-      type: Number as PropType<ConnectionLineComponentProps['targetX']>,
-      required: true
-    },
-    targetY: {
-      type: Number as PropType<ConnectionLineComponentProps['targetY']>,
-      required: true
-    }
-  }
-});
-</script>