mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-01 19:20:10 +00:00
dd3e4d3edc
<img width="350" alt="image" src="https://github.com/user-attachments/assets/3ff3f83c-163b-44df-8b68-7fe18c3266c4" /> | <img width="350" alt="CleanShot 2026-01-23 at 21 25 04@2x" src="https://github.com/user-attachments/assets/c2c630f3-6990-4a55-aa8f-a19297ffee52" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8279-fix-hide-label-of-textarea-in-right-side-panel-align-switch-to-the-left-2f16d73d365081e9b932fb2be873b660) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<FloatLabel
|
|
variant="in"
|
|
:unstyled="hideLayoutField"
|
|
:class="
|
|
cn(
|
|
'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
|
|
widget.borderStyle
|
|
)
|
|
"
|
|
>
|
|
<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 v-if="!hideLayoutField" :for="id">{{ displayName }}</label>
|
|
</FloatLabel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FloatLabel from 'primevue/floatlabel'
|
|
import Textarea from 'primevue/textarea'
|
|
import { computed, useId } from 'vue'
|
|
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import { useHideLayoutField } from '@/types/widgetTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
import {
|
|
INPUT_EXCLUDED_PROPS,
|
|
filterWidgetProps
|
|
} from '@/utils/widgetPropFilter'
|
|
|
|
import { WidgetInputBaseClass } from './layout'
|
|
|
|
const { widget, placeholder = '' } = defineProps<{
|
|
widget: SimplifiedWidget<string>
|
|
placeholder?: string
|
|
}>()
|
|
|
|
const modelValue = defineModel<string>({ default: '' })
|
|
|
|
const hideLayoutField = useHideLayoutField()
|
|
|
|
const filteredProps = computed(() =>
|
|
filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)
|
|
)
|
|
|
|
const displayName = computed(() => widget.label || widget.name)
|
|
const id = useId()
|
|
</script>
|