mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
6156e22bac
Adds support for displaying the "promoted" and "advanced" border indicators when in vue mode. Requires some (hopefully minor and generally beneficial) styling changes to make sure that the widgets are contained within their border. Note that the 'advanced' functionality sees minimal use and is likely to be revamped in the future. <img width="372" height="417" alt="image" src="https://github.com/user-attachments/assets/8ea1e66b-2a4e-4a16-996f-289a26e39708" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7322-Implement-widget-borders-in-vue-2c56d73d36508187b881f97e373d433b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<template>
|
|
<FloatLabel
|
|
variant="in"
|
|
: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 :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 { 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 filteredProps = computed(() =>
|
|
filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)
|
|
)
|
|
|
|
const displayName = computed(() => widget.label || widget.name)
|
|
const id = useId()
|
|
</script>
|