refactor: replace withDefaults with Vue 3.5 props destructuring (#9150)

## Summary
- Replace all `withDefaults(defineProps<...>())` with Vue 3.5 reactive
props destructuring across 14 components
- Update `props.xxx` references to use destructured variables directly
in script and template

- Fixes #2334

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9150-refactor-replace-withDefaults-with-Vue-3-5-props-destructuring-3116d73d365081e7a721db3369600671)
by [Unito](https://www.unito.io)

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -161,15 +161,10 @@ import { formatTime } from '../../utils/audioUtils'
 const { t } = useI18n()
 const toast = useToast()
 
-const props = withDefaults(
-  defineProps<{
-    hideWhenEmpty?: boolean
-    showOptionsButton?: boolean
-  }>(),
-  {
-    hideWhenEmpty: true
-  }
-)
+const { hideWhenEmpty = true, showOptionsButton } = defineProps<{
+  hideWhenEmpty?: boolean
+  showOptionsButton?: boolean
+}>()
 
 // Refs
 const audioRef = useTemplateRef('audioRef')

src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue

@@ -58,11 +58,13 @@ interface Emits {
   'update:modelValue': [value: ModelValue]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  optionLabel: 'label',
-  optionValue: 'value'
-})
+const {
+  modelValue,
+  options,
+  optionLabel = 'label',
+  optionValue = 'value',
+  disabled = false
+} = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
 
@@ -72,7 +74,7 @@ const getOptionValue = (option: T, index: number): ModelValue => {
     return option as ModelValue
   }
 
-  const valueField = props.optionValue
+  const valueField = optionValue
   const optionRecord = option as Record<string, unknown>
   const value =
     optionRecord[valueField] ??
@@ -86,7 +88,7 @@ const getOptionValue = (option: T, index: number): ModelValue => {
 // for display with PrimeVue compatibility
 const getOptionLabel = (option: T): string => {
   if (typeof option === 'object' && option !== null) {
-    const labelField = props.optionLabel
+    const labelField = optionLabel
     const optionRecord = option as Record<string, unknown>
     return String(
       optionRecord[labelField] ??
@@ -100,14 +102,14 @@ const getOptionLabel = (option: T): string => {
 }
 
 const isSelected = (index: number): boolean => {
-  const optionValue = getOptionValue(props.options[index], index)
-  return String(optionValue) === String(props.modelValue ?? '')
+  const optVal = getOptionValue(options[index], index)
+  return String(optVal) === String(modelValue ?? '')
 }
 
 const handleSelect = (index: number) => {
-  if (props.disabled) return
+  if (disabled) return
 
-  const optionValue = getOptionValue(props.options[index], index)
-  emit('update:modelValue', optionValue)
+  const optVal = getOptionValue(options[index], index)
+  emit('update:modelValue', optVal)
 }
 </script>

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

@@ -19,10 +19,17 @@ interface Props {
   accept?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  isOpen: false,
-  placeholder: 'Select...'
-})
+const {
+  isOpen = false,
+  placeholder = 'Select...',
+  items,
+  displayItems,
+  selected,
+  maxSelectable,
+  uploadable,
+  disabled,
+  accept
+} = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'select-click', event: MouseEvent): void
@@ -30,14 +37,14 @@ const emit = defineEmits<{
 }>()
 
 const selectedItems = computed(() => {
-  const itemsToSearch = props.displayItems ?? props.items
-  return itemsToSearch.filter((item) => props.selected.has(item.id))
+  const itemsToSearch = displayItems ?? items
+  return itemsToSearch.filter((item) => selected.has(item.id))
 })
 
 const theButtonStyle = computed(() =>
   cn(
     'border-0 bg-component-node-widget-background outline-none text-text-secondary',
-    props.disabled
+    disabled
       ? 'cursor-not-allowed'
       : 'hover:bg-component-node-widget-background-hovered cursor-pointer',
     selectedItems.value.length > 0 && 'text-text-primary'