mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
2639248867
## Summary Replace PrimeVue `FloatLabel` + `Textarea` in `WidgetTextarea` with a CSS-only IFTA label and a new shadcn-vue Textarea component, fixing the label-obscures-content bug. <img width="965" height="754" alt="image" src="https://github.com/user-attachments/assets/cab98527-834c-496d-a0ef-942fb21fd862" /> ## Changes - **What**: Add `src/components/ui/textarea/Textarea.vue` — thin wrapper around native `<textarea>` with `cn()` class merging and `defineModel`. Rewrite `WidgetTextarea.vue` to use a plain `<div>` wrapper with an absolutely-positioned label and the new Textarea, replacing PrimeVue's `FloatLabel variant="in"`. Add Storybook stories (Default, Disabled, WithLabel). Update tests to remove PrimeVue plugin setup. ## Review Focus - The label uses `absolute left-3 top-1.5 z-10 text-xxs` positioning — verify it clears textarea content with `pt-5` padding - `filteredProps` forwards widget options to a native textarea via `v-bind="restAttrs"` — unknown attrs are silently ignored by the browser Supersedes #8536 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9076-fix-replace-PrimeVue-FloatLabel-in-WidgetTextarea-with-CSS-only-IFTA-label-30f6d73d3650816fabe5ee30de0c793e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
25 lines
672 B
Vue
25 lines
672 B
Vue
<script setup lang="ts">
|
|
import type { HTMLAttributes } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { class: className, ...restAttrs } = defineProps<{
|
|
class?: HTMLAttributes['class']
|
|
}>()
|
|
|
|
const modelValue = defineModel<string | number>()
|
|
</script>
|
|
|
|
<template>
|
|
<textarea
|
|
v-bind="restAttrs"
|
|
v-model="modelValue"
|
|
:class="
|
|
cn(
|
|
'flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
|
className
|
|
)
|
|
"
|
|
/>
|
|
</template>
|