mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-23 08:14:06 +00:00
fa9f5fbca6
* [feat] Refactor overlay compatibility into reusable composable - Create useTransformCompatOverlayProps composable for centralized overlay prop management - Update Select, MultiSelect, TreeSelect, and FileUpload components to use composable - Provides appendTo='self' for transform inheritance in CSS-transformed parents - Enables easy future additions of other transform compatibility props - Fix duplicate v-bind attributes by combining props into single computed object * fix: Keep the canvas container from being scrolled by children * types: Align the appendTo type with primevue internals * Update test expectations [skip ci] --------- Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: github-actions <github-actions@github.com>
69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<WidgetLayoutField :widget>
|
|
<Select
|
|
v-model="localValue"
|
|
:options="selectOptions"
|
|
v-bind="combinedProps"
|
|
:disabled="readonly"
|
|
class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
|
|
size="small"
|
|
:pt="{
|
|
option: 'text-xs'
|
|
}"
|
|
@update:model-value="onChange"
|
|
/>
|
|
</WidgetLayoutField>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Select from 'primevue/select'
|
|
import { computed } from 'vue'
|
|
|
|
import { useWidgetValue } from '@/composables/graph/useWidgetValue'
|
|
import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import {
|
|
PANEL_EXCLUDED_PROPS,
|
|
filterWidgetProps
|
|
} from '@/utils/widgetPropFilter'
|
|
|
|
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
|
|
|
|
const props = defineProps<{
|
|
widget: SimplifiedWidget<string | number | undefined>
|
|
modelValue: string | number | undefined
|
|
readonly?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string | number | undefined]
|
|
}>()
|
|
|
|
// Use the composable for consistent widget value handling
|
|
const { localValue, onChange } = useWidgetValue({
|
|
widget: props.widget,
|
|
modelValue: props.modelValue,
|
|
defaultValue: props.widget.options?.values?.[0] || '',
|
|
emit
|
|
})
|
|
|
|
// Transform compatibility props for overlay positioning
|
|
const transformCompatProps = useTransformCompatOverlayProps()
|
|
|
|
const combinedProps = computed(() => ({
|
|
...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
|
|
...transformCompatProps.value
|
|
}))
|
|
|
|
// Extract select options from widget options
|
|
const selectOptions = computed(() => {
|
|
const options = props.widget.options
|
|
|
|
if (options?.values && Array.isArray(options.values)) {
|
|
return options.values
|
|
}
|
|
|
|
return []
|
|
})
|
|
</script>
|