Fix value bindings

Author: benceruleanlu

src/components/graph/vueWidgets/WidgetColorPicker.vue

@@ -5,10 +5,11 @@
       widget.name
     }}</label>
     <ColorPicker
-      v-model="value"
+      v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       inline
+      @update:model-value="onChange"
     />
   </div>
 </template>
@@ -17,19 +18,31 @@
 import ColorPicker from 'primevue/colorpicker'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<string>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<string>
+  modelValue: string
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '#000000',
+  emit
+})
+
 // ColorPicker specific excluded props include panel/overlay classes
 const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
 

src/components/graph/vueWidgets/WidgetMultiSelect.vue

@@ -4,14 +4,15 @@
       widget.name
     }}</label>
     <MultiSelect
-      v-model="value"
+      v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       class="flex-grow min-w-[8em] max-w-[20em] text-xs"
       size="small"
       :pt="{
         option: 'text-xs'
       }"
+      @update:model-value="onChange"
     />
   </div>
 </template>
@@ -20,19 +21,31 @@
 import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<any[]>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<any[]>
+  modelValue: any[]
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: [],
+  emit
+})
+
 // MultiSelect specific excluded props include overlay styles
 const MULTISELECT_EXCLUDED_PROPS = [
   ...PANEL_EXCLUDED_PROPS,

src/components/graph/vueWidgets/WidgetSelectButton.vue

@@ -4,7 +4,7 @@
       widget.name
     }}</label>
     <SelectButton
-      v-model="value"
+      v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       class="flex-grow min-w-[8em] max-w-[20em] text-xs"
@@ -13,6 +13,7 @@
           label: 'text-xs'
         }
       }"
+      @update:model-value="onChange"
     />
   </div>
 </template>
@@ -21,19 +22,31 @@
 import SelectButton from 'primevue/selectbutton'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<any>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<any>
+  modelValue: any
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )

src/components/graph/vueWidgets/WidgetTextarea.vue

@@ -1,31 +1,44 @@
 <template>
   <Textarea
-    v-model="value"
+    v-model="localValue"
     v-bind="filteredProps"
     :disabled="readonly"
     class="w-full text-xs"
     size="small"
     rows="3"
+    @update:model-value="onChange"
   />
 </template>
 
 <script setup lang="ts">
 import Textarea from 'primevue/textarea'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   INPUT_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<string>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<string>
+  modelValue: string
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '',
+  emit
+})
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
 )

src/components/graph/vueWidgets/WidgetTreeSelect.vue

@@ -4,11 +4,12 @@
       widget.name
     }}</label>
     <TreeSelect
-      v-model="value"
+      v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       class="flex-grow min-w-[8em] max-w-[20em] text-xs"
       size="small"
+      @update:model-value="onChange"
     />
   </div>
 </template>
@@ -17,19 +18,31 @@
 import TreeSelect from 'primevue/treeselect'
 import { computed } from 'vue'
 
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-const value = defineModel<any>({ required: true })
-
 const props = defineProps<{
   widget: SimplifiedWidget<any>
+  modelValue: any
   readonly?: boolean
 }>()
 
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
 // TreeSelect specific excluded props
 const TREE_SELECT_EXCLUDED_PROPS = [
   ...PANEL_EXCLUDED_PROPS,