@stonecrop/node-editor 0.2.33 → 0.2.34

package/dist/node_editor/src/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.47.0"
+      "packageVersion": "7.47.9"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/node-editor",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "description": "Node editor UI for Stonecrop",
   "license": "MIT",
   "type": "module",
@@ -33,21 +33,21 @@
   ],
   "dependencies": {
     "@vue-flow/core": "^1.37.1",
-    "vue": "^3.4.31",
+    "vue": "^3.5.6",
     "vue-router": "^4.4.0",
     "xstate": "^4.38.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.25.3",
-    "@rushstack/heft": "^0.66.18",
+    "@rushstack/heft": "^0.67.2",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.3",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
     "typescript": "^5.5.2",
-    "vite": "^5.3.2",
+    "vite": "^5.4.5",
     "stonecrop-rig": "0.2.22"
   },
   "publishConfig": {

package/src/components/EditableEdge.vue

@@ -10,7 +10,7 @@
 			}"
 			class="nodrag nopan editable-edge-label"
 			@click="labelOnClick()">
-			<div class="vue-flow__edge-label">{{ props.label }}</div>
+			<div class="vue-flow__edge-label">{{ label }}</div>
 			<div v-if="showInput" class="label-input-wrapper">
 				<input
 					ref="labelInput"
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { type EdgeProps, EdgeLabelRenderer, getBezierPath /* useVueFlow */ } from '@vue-flow/core'
-import { computed, ref, nextTick } from 'vue'
+import { computed, ref, nextTick, useTemplateRef } from 'vue'
 
 const props = defineProps<EdgeProps>()
 const emit = defineEmits(['change'])
@@ -33,7 +33,7 @@ const emit = defineEmits(['change'])
 // TODO: Implement edge removal
 // const { removeEdges } = useVueFlow()
 
-const labelInput = ref<HTMLElement>()
+const inputRef = useTemplateRef<HTMLInputElement>('labelInput')
 const newLabel = ref<EdgeProps['label']>('')
 const showInput = ref(false)
 let lastClick = 0
@@ -50,7 +50,7 @@ const showLabelInput = async () => {
 	newLabel.value = props.label
 	showInput.value = true
 	await nextTick()
-	labelInput.value.focus()
+	inputRef.value.focus()
 }
 
 const submitNewLabel = () => {

package/src/components/EditableNode.vue

@@ -1,6 +1,6 @@
 <template>
 	<div @click="nodeOnClick()">
-		<div>{{ props.label }}</div>
+		<div>{{ label }}</div>
 		<div v-if="showInput" class="label-input-wrapper">
 			<input
 				ref="labelInput"
@@ -9,19 +9,19 @@
 				@blur="showInput = false"
 				@keypress.enter="submitNewLabel" />
 		</div>
-		<Handle v-if="props.data.hasInput" id="a" type="target" :position="props.targetPosition" />
-		<Handle v-if="props.data.hasOutput" id="b" type="source" :position="props.sourcePosition" />
+		<Handle v-if="data.hasInput" id="a" type="target" :position="targetPosition" />
+		<Handle v-if="data.hasOutput" id="b" type="source" :position="sourcePosition" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import { NodeProps, Handle } from '@vue-flow/core'
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, useTemplateRef } from 'vue'
 
 const props = defineProps<NodeProps>()
 const emit = defineEmits(['change'])
 
-const labelInput = ref<HTMLInputElement>()
+const inputRef = useTemplateRef<HTMLInputElement>('labelInput')
 const newLabel = ref<NodeProps['label']>('')
 const showInput = ref(false)
 let lastClick = 0
@@ -38,7 +38,7 @@ const showLabelInput = async () => {
 	newLabel.value = props.label
 	showInput.value = true
 	await nextTick()
-	labelInput.value.focus()
+	inputRef.value.focus()
 }
 
 const submitNewLabel = () => {

package/src/components/NodeEditor.vue

@@ -46,7 +46,7 @@ import EditableEdge from '@/components/EditableEdge.vue'
 import EditableNode from '@/components/EditableNode.vue'
 import type { FlowElements } from '@/types'
 
-const props = defineProps<{
+const { modelValue, nodeContainerClass } = defineProps<{
 	modelValue: FlowElements
 	nodeContainerClass?: HTMLAttributes['class']
 }>()
@@ -69,7 +69,7 @@ const activeElementIndex = computed(() => {
 
 const elements = computed({
 	get: () => {
-		const _elements = props.modelValue
+		const _elements = modelValue
 
 		// Add data to each element
 		for (const _element of _elements) {

package/src/components/StateEditor.vue

@@ -11,12 +11,12 @@ import { type HTMLAttributes, computed } from 'vue'
 import NodeEditor from '@/components/NodeEditor.vue'
 import type { EditorStates, FlowElement, FlowElements, Layout } from '@/types'
 
+const emit = defineEmits(['update:modelValue'])
 const states = defineModel<EditorStates>()
-const props = defineProps<{
+const { layout, nodeContainerClass } = defineProps<{
 	layout: Layout
 	nodeContainerClass?: HTMLAttributes['class']
 }>()
-const emit = defineEmits(['update:modelValue'])
 
 const elements = computed<FlowElements>({
 	get: () => {
@@ -29,9 +29,9 @@ const elements = computed<FlowElements>({
 			const el: Node = {
 				id: key,
 				label: key,
-				position: props.layout[key]?.position || { x: 200 * index, y: 100 },
-				targetPosition: props.layout[key]?.targetPosition || Position.Left,
-				sourcePosition: props.layout[key]?.sourcePosition || Position.Right,
+				position: layout[key]?.position || { x: 200 * index, y: 100 },
+				targetPosition: layout[key]?.targetPosition || Position.Left,
+				sourcePosition: layout[key]?.sourcePosition || Position.Right,
 			}
 
 			if (value.type === 'final') {
@@ -82,7 +82,7 @@ const elements = computed<FlowElements>({
 		// update modelValue when elements change
 		onElementsChange(newValue)
 
-		// TODO: emit('update:modelValue', props.modelValue)
+		// TODO: emit('update:modelValue', modelValue)
 	},
 })