mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 04:31:58 +00:00
9ea1bf3727
* [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>
64 lines
1.6 KiB
Vue
64 lines
1.6 KiB
Vue
<template>
|
|
<WidgetLayoutField :widget="widget">
|
|
<MultiSelect
|
|
v-model="localValue"
|
|
v-bind="combinedProps"
|
|
:disabled="readonly"
|
|
class="w-full text-xs"
|
|
size="small"
|
|
display="chip"
|
|
:pt="{
|
|
option: 'text-xs'
|
|
}"
|
|
@update:model-value="onChange"
|
|
/>
|
|
</WidgetLayoutField>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MultiSelect from 'primevue/multiselect'
|
|
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: [],
|
|
emit
|
|
})
|
|
|
|
// Transform compatibility props for overlay positioning
|
|
const transformCompatProps = useTransformCompatOverlayProps()
|
|
|
|
// MultiSelect specific excluded props include overlay styles
|
|
const MULTISELECT_EXCLUDED_PROPS = [
|
|
...PANEL_EXCLUDED_PROPS,
|
|
'overlayStyle'
|
|
] as const
|
|
|
|
const combinedProps = computed(() => ({
|
|
...filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS),
|
|
...transformCompatProps.value
|
|
}))
|
|
</script>
|