Fix empty combo widget for missing models in vue (#6555)
When a loaded workflow uses a model which does not exist, the combo widget would previously display as empty. This PR - Sets the placeholder value to the localValue, so that an invalid selection still displays - Sets the selection as invalid when the value is not in valid options so that it displays in red. <img width="817" height="200" alt="image" src="https://github.com/user-attachments/assets/be7d6372-3957-4fd6-ac1e-778f058ec0ba" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6555-Austin-vue-combo-missing-2a06d73d36508181a96ddd5c604efba4) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 111 KiB |
@@ -2,6 +2,7 @@
|
|||||||
<WidgetLayoutField :widget>
|
<WidgetLayoutField :widget>
|
||||||
<Select
|
<Select
|
||||||
v-model="localValue"
|
v-model="localValue"
|
||||||
|
:invalid
|
||||||
:options="selectOptions"
|
:options="selectOptions"
|
||||||
v-bind="combinedProps"
|
v-bind="combinedProps"
|
||||||
:class="cn(WidgetInputBaseClass, 'w-full text-xs')"
|
:class="cn(WidgetInputBaseClass, 'w-full text-xs')"
|
||||||
@@ -53,11 +54,6 @@ const { localValue, onChange } = useWidgetValue({
|
|||||||
// Transform compatibility props for overlay positioning
|
// Transform compatibility props for overlay positioning
|
||||||
const transformCompatProps = useTransformCompatOverlayProps()
|
const transformCompatProps = useTransformCompatOverlayProps()
|
||||||
|
|
||||||
const combinedProps = computed(() => ({
|
|
||||||
...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
|
|
||||||
...transformCompatProps.value
|
|
||||||
}))
|
|
||||||
|
|
||||||
// Extract select options from widget options
|
// Extract select options from widget options
|
||||||
const selectOptions = computed(() => {
|
const selectOptions = computed(() => {
|
||||||
const options = props.widget.options
|
const options = props.widget.options
|
||||||
@@ -68,4 +64,13 @@ const selectOptions = computed(() => {
|
|||||||
|
|
||||||
return []
|
return []
|
||||||
})
|
})
|
||||||
|
const invalid = computed(
|
||||||
|
() => !!localValue.value && !selectOptions.value.includes(localValue.value)
|
||||||
|
)
|
||||||
|
|
||||||
|
const combinedProps = computed(() => ({
|
||||||
|
...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
|
||||||
|
...transformCompatProps.value,
|
||||||
|
...(invalid.value ? { placeholder: `${localValue.value}` } : {})
|
||||||
|
}))
|
||||||
</script>
|
</script>
|
||||||
|
|||||||