fix: use factory functions for mutable defaults in defineModel

- FormDropdown: use () => new Set() and () => [] for selected, baseModelSelected, and files defaults

- WidgetSelectDropdown.test: extend interface and remove unsafe casts

Amp-Thread-ID: https://ampcode.com/threads/T-019c11bf-3df5-75ed-bca4-7685ad19885e
Co-authored-by: Amp <amp@ampcode.com>

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts

@@ -14,6 +14,8 @@ import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/compone
 interface WidgetSelectDropdownInstance extends ComponentPublicInstance {
   inputItems: FormDropdownItem[]
   outputItems: FormDropdownItem[]
+  dropdownItems: FormDropdownItem[]
+  filterSelected: string
   updateSelectedItems: (selectedSet: Set<string>) => void
 }
 
@@ -230,9 +232,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       ).toBe(false)
 
       // The missing value should be accessible via dropdownItems when filter is 'all' (default)
-      const dropdownItems = (
+      const dropdownItems = wrapper.vm.dropdownItems
-        wrapper.vm as unknown as { dropdownItems: FormDropdownItem[] }
-      ).dropdownItems
       expect(
         dropdownItems.some((item) => item.name === 'template_image.png')
       ).toBe(true)
@@ -246,15 +246,10 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       })
       const wrapper = mountComponent(widget, 'template_image.png')
 
-      const vmWithFilter = wrapper.vm as unknown as {
+      wrapper.vm.filterSelected = 'inputs'
-        filterSelected: string
-        dropdownItems: FormDropdownItem[]
-      }
-
-      vmWithFilter.filterSelected = 'inputs'
       await wrapper.vm.$nextTick()
 
-      const dropdownItems = vmWithFilter.dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
       expect(dropdownItems).toHaveLength(2)
       expect(
         dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
@@ -267,16 +262,10 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       })
       const wrapper = mountComponent(widget, 'template_image.png')
 
-      const vmWithFilter = wrapper.vm as unknown as {
+      wrapper.vm.filterSelected = 'outputs'
-        filterSelected: string
-        dropdownItems: FormDropdownItem[]
-        outputItems: FormDropdownItem[]
-      }
-
-      vmWithFilter.filterSelected = 'outputs'
       await wrapper.vm.$nextTick()
 
-      const dropdownItems = vmWithFilter.dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
       expect(dropdownItems).toHaveLength(wrapper.vm.outputItems.length)
       expect(
         dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
@@ -289,9 +278,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       })
       const wrapper = mountComponent(widget, 'img_001.png')
 
-      const dropdownItems = (
+      const dropdownItems = wrapper.vm.dropdownItems
-        wrapper.vm as unknown as { dropdownItems: FormDropdownItem[] }
-      ).dropdownItems
       expect(dropdownItems).toHaveLength(2)
       expect(
         dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
@@ -304,9 +291,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       })
       const wrapper = mountComponent(widget, undefined)
 
-      const dropdownItems = (
+      const dropdownItems = wrapper.vm.dropdownItems
-        wrapper.vm as unknown as { dropdownItems: FormDropdownItem[] }
-      ).dropdownItems
       expect(dropdownItems).toHaveLength(2)
       expect(
         dropdownItems.every((item) => !String(item.id).startsWith('missing-'))

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const selected = defineModel<Set<string>>('selected', {
-  default: new Set()
+  default: () => new Set()
 })
 const filterSelected = defineModel<string>('filterSelected', { default: '' })
 const sortSelected = defineModel<string>('sortSelected', {
@@ -67,13 +67,13 @@ const sortSelected = defineModel<string>('sortSelected', {
 const layoutMode = defineModel<LayoutMode>('layoutMode', {
   default: 'grid'
 })
-const files = defineModel<File[]>('files', { default: [] })
+const files = defineModel<File[]>('files', { default: () => [] })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
 const ownershipSelected = defineModel<OwnershipOption>('ownershipSelected', {
   default: 'all'
 })
 const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
-  default: new Set()
+  default: () => new Set()
 })
 
 const toastStore = useToastStore()