Feat: add floating label to textarea

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

@@ -179,8 +179,8 @@ describe('WidgetTextarea Value Binding', () => {
       const widget = createMockWidget('test')
       const wrapper = mountComponent(widget, 'test')
 
-      const textarea = wrapper.find('textarea')
-      expect(textarea.attributes('placeholder')).toBe('test_textarea')
+      const textareaLabel = wrapper.find('label')
+      expect(textareaLabel.text()).toBe('test_textarea')
     })
 
     it('uses provided placeholder when specified', () => {

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

@@ -1,24 +1,28 @@
 <template>
-  <Textarea
-    v-model="modelValue"
-    v-bind="filteredProps"
-    :class="cn(WidgetInputBaseClass, 'relative size-full text-xs resize-none')"
-    :placeholder="placeholder || widget.name || ''"
-    :aria-label="widget.name"
-    :readonly="widget.options?.read_only"
-    :disabled="widget.options?.read_only"
-    fluid
-    data-capture-wheel="true"
-    @pointerdown.capture.stop
-    @pointermove.capture.stop
-    @pointerup.capture.stop
-    @contextmenu.capture.stop
-  />
+  <FloatLabel variant="in">
+    <Textarea
+      v-bind="filteredProps"
+      :id
+      v-model="modelValue"
+      :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
+      :placeholder
+      :readonly="widget.options?.read_only"
+      :disabled="widget.options?.read_only"
+      fluid
+      data-capture-wheel="true"
+      @pointerdown.capture.stop
+      @pointermove.capture.stop
+      @pointerup.capture.stop
+      @contextmenu.capture.stop
+    />
+    <label :for="id">{{ displayName }}</label>
+  </FloatLabel>
 </template>
 
 <script setup lang="ts">
+import FloatLabel from 'primevue/floatlabel'
 import Textarea from 'primevue/textarea'
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
@@ -39,4 +43,7 @@ const modelValue = defineModel<string>({ default: '' })
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)
 )
+
+const displayName = computed(() => widget.label || widget.name)
+const id = useId()
 </script>