mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-05 05:00:03 +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>
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<WidgetLayoutField :widget="widget">
|
|
<TreeSelect
|
|
v-model="localValue"
|
|
v-bind="combinedProps"
|
|
:disabled="readonly"
|
|
class="w-full text-xs"
|
|
size="small"
|
|
@update:model-value="onChange"
|
|
/>
|
|
</WidgetLayoutField>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import TreeSelect from 'primevue/treeselect'
|
|
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<any>
|
|
modelValue: any
|
|
readonly?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
// Use the composable for consistent widget value handling
|
|
const { localValue, onChange } = useWidgetValue({
|
|
widget: props.widget,
|
|
modelValue: props.modelValue,
|
|
defaultValue: null,
|
|
emit
|
|
})
|
|
|
|
// Transform compatibility props for overlay positioning
|
|
const transformCompatProps = useTransformCompatOverlayProps()
|
|
|
|
// TreeSelect specific excluded props
|
|
const TREE_SELECT_EXCLUDED_PROPS = [
|
|
...PANEL_EXCLUDED_PROPS,
|
|
'inputClass',
|
|
'inputStyle'
|
|
] as const
|
|
|
|
const combinedProps = computed(() => ({
|
|
...filterWidgetProps(props.widget.options, TREE_SELECT_EXCLUDED_PROPS),
|
|
...transformCompatProps.value
|
|
}))
|
|
</script>
|