feat: add label support to boolean toggle widgets

src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'
-import type { ToggleSwitchProps } from 'primevue/toggleswitch'
 import { describe, expect, it } from 'vitest'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -11,7 +10,7 @@ import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
 describe('WidgetToggleSwitch Value Binding', () => {
   const createMockWidget = (
     value: boolean = false,
-    options: Partial<ToggleSwitchProps> = {},
+    options: Record<string, any> = {},
     callback?: (value: boolean) => void
   ): SimplifiedWidget<boolean> => ({
     name: 'test_toggle',
@@ -149,4 +148,45 @@ describe('WidgetToggleSwitch Value Binding', () => {
       expect(emitted![3]).toContain(false)
     })
   })
+
+  describe('Label Display', () => {
+    it('displays label_off when toggle is false', () => {
+      const widget = createMockWidget(false, { on: 'Enabled', off: 'Disabled' })
+      const wrapper = mountComponent(widget, false)
+
+      expect(wrapper.text()).toContain('Disabled')
+      expect(wrapper.text()).not.toContain('Enabled')
+    })
+
+    it('displays label_on when toggle is true', () => {
+      const widget = createMockWidget(true, { on: 'Enabled', off: 'Disabled' })
+      const wrapper = mountComponent(widget, true)
+
+      expect(wrapper.text()).toContain('Enabled')
+      expect(wrapper.text()).not.toContain('Disabled')
+    })
+
+    it('updates label when toggled', async () => {
+      const widget = createMockWidget(false, {
+        on: 'Markdown',
+        off: 'Plaintext'
+      })
+      const wrapper = mountComponent(widget, false)
+
+      expect(wrapper.text()).toContain('Plaintext')
+
+      await wrapper.setProps({ modelValue: true })
+
+      expect(wrapper.text()).toContain('Markdown')
+      expect(wrapper.text()).not.toContain('Plaintext')
+    })
+
+    it('does not display label when options are not provided', () => {
+      const widget = createMockWidget(false, {})
+      const wrapper = mountComponent(widget, false)
+
+      const labelSpan = wrapper.find('span')
+      expect(labelSpan.exists()).toBe(false)
+    })
+  })
 })

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

@@ -1,11 +1,13 @@
 <template>
   <WidgetLayoutField :widget>
-    <ToggleSwitch
-      v-model="modelValue"
-      v-bind="filteredProps"
-      class="ml-auto block"
-      :aria-label="widget.name"
-    />
+    <div class="ml-auto flex items-center gap-2">
+      <ToggleSwitch
+        v-model="modelValue"
+        v-bind="filteredProps"
+        :aria-label="widget.name"
+      />
+      <span v-if="currentLabel" class="text-sm">{{ currentLabel }}</span>
+    </div>
   </WidgetLayoutField>
 </template>
 
@@ -30,4 +32,9 @@ const modelValue = defineModel<boolean>()
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )
+
+const currentLabel = computed(() => {
+  const options = widget.options as { on?: string; off?: string }
+  return modelValue.value ? options.on : options.off
+})
 </script>