Wip control widget state migration

src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed, defineAsyncComponent, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import type {
+  ControlOptions,
+  SimplifiedControlWidget
+} from '@/types/simplifiedWidget'
+
+const NumberControlPopover = defineAsyncComponent(
+  () => import('./NumberControlPopover.vue')
+)
+
+function useControlButtonIcon(controlMode: Ref<ControlOptions>) {
+  return computed(() => {
+    switch (controlMode.value) {
+      case 'increment':
+        return 'pi pi-plus'
+      case 'decrement':
+        return 'pi pi-minus'
+      case 'fixed':
+        return 'icon-[lucide--pencil-off]'
+      default:
+        return 'icon-[lucide--shuffle]'
+    }
+  })
+}
+
+const props = defineProps<{
+  widget: SimplifiedControlWidget<number>
+  comp: unknown
+}>()
+
+const popover = ref()
+
+const controlButtonIcon = useControlButtonIcon(props.widget.controlWidget())
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+</script>
+
+<template>
+  <component :is="comp" v-bind="$attrs" :widget>
+    <Button
+      variant="link"
+      size="small"
+      class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
+      @click="togglePopover"
+    >
+      <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
+    </Button>
+  </component>
+  <NumberControlPopover ref="popover" :control-widget="widget.controlWidget" />
+</template>