[Vue] Use Vue 3.5 syntax for prop default value (#3165)

src/components/actionbar/BatchCountEdit.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="batch-count"
-    :class="props.class"
     v-tooltip.bottom="{
       value: $t('menu.batchCount'),
       showDelay: 600
@@ -41,14 +40,6 @@ import { computed } from 'vue'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 
-interface Props {
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: ''
-})
-
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)
 const minQueueCount = 1

src/components/common/ComfyImage.vue

@@ -18,7 +18,7 @@
       :src="src"
       @error="handleImageError"
       class="comfy-image-main"
-      :class="[...classArray]"
+      :class="classProp"
       :alt="alt"
     />
   </span>
@@ -29,37 +29,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    src: string
-    class?: string | string[] | object
-    contain: boolean
-    alt?: string
-  }>(),
-  {
-    contain: false,
-    alt: 'Image content'
-  }
-)
+const {
+  src,
+  class: classProp,
+  contain = false,
+  alt = 'Image content'
+} = defineProps<{
+  src: string
+  class?: any
+  contain?: boolean
+  alt?: string
+}>()
 
 const imageBroken = ref(false)
 const handleImageError = () => {
   imageBroken.value = true
 }
-
-const classArray = computed(() => {
-  if (Array.isArray(props.class)) {
-    return props.class
-  } else if (typeof props.class === 'string') {
-    return props.class.split(' ')
-  } else if (typeof props.class === 'object') {
-    // @ts-expect-error fixme ts strict error
-    return Object.keys(props.class).filter((key) => props.class[key])
-  }
-  return []
-})
 </script>
 
 <style scoped>

src/components/common/EditableText.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="editable-text">
-    <span v-if="!props.isEditing">
+    <span v-if="!isEditing">
       {{ modelValue }}
     </span>
     <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
@@ -27,17 +27,13 @@
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
 
-interface EditableTextProps {
+const { modelValue, isEditing = false } = defineProps<{
   modelValue: string
   isEditing?: boolean
-}
-
-const props = withDefaults(defineProps<EditableTextProps>(), {
-  isEditing: false
-})
+}>()
 
 const emit = defineEmits(['update:modelValue', 'edit'])
-const inputValue = ref<string>(props.modelValue)
+const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
 
 const blurInputElement = () => {
@@ -48,10 +44,10 @@ const finishEditing = () => {
   emit('edit', inputValue.value)
 }
 watch(
-  () => props.isEditing,
+  () => isEditing,
   (newVal) => {
     if (newVal) {
-      inputValue.value = props.modelValue
+      inputValue.value = modelValue
       nextTick(() => {
         if (!inputRef.value) return
         const fileName = inputValue.value.includes('.')

src/components/common/RefreshButton.vue

@@ -13,9 +13,9 @@
 <template>
   <Button
     class="relative p-button-icon-only"
-    :outlined="props.outlined"
-    :severity="props.severity"
-    :disabled="active || props.disabled"
+    :outlined="outlined"
+    :severity="severity"
+    :disabled="active || disabled"
     @click="(event) => $emit('refresh', event)"
   >
     <span
@@ -34,16 +34,15 @@ import ProgressSpinner from 'primevue/progressspinner'
 
 import { VueSeverity } from '@/types/primeVueTypes'
 
-// Properties
-interface Props {
-  outlined?: boolean
+const {
+  disabled,
+  outlined = true,
+  severity = 'secondary'
+} = defineProps<{
   disabled?: boolean
+  outlined?: boolean
   severity?: VueSeverity
-}
-const props = withDefaults(defineProps<Props>(), {
-  outlined: true,
-  severity: 'secondary'
-})
+}>()
 
 // Model
 const active = defineModel<boolean>({ required: true })

src/components/common/TextDivider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center" :class="props.class">
+  <div class="flex items-center">
     <span v-if="position === 'left'" class="mr-2 shrink-0">{{ text }}</span>
     <Divider :align="align" :type="type" :layout="layout" class="flex-grow" />
     <span v-if="position === 'right'" class="ml-2 shrink-0">{{ text }}</span>
@@ -9,19 +9,17 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 
-interface Props {
+const {
+  text,
+  position = 'left',
+  align = 'center',
+  type = 'solid',
+  layout = 'horizontal'
+} = defineProps<{
   text: string
-  class?: string
   position?: 'left' | 'right'
   align?: 'left' | 'center' | 'right' | 'top' | 'bottom'
   type?: 'solid' | 'dashed' | 'dotted'
   layout?: 'horizontal' | 'vertical'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  position: 'left',
-  align: 'center',
-  type: 'solid',
-  layout: 'horizontal'
-})
+}>()
 </script>

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -15,15 +15,10 @@ import { computed } from 'vue'
 
 import { KeyComboImpl } from '@/stores/keybindingStore'
 
-const props = withDefaults(
-  defineProps<{
-    keyCombo: KeyComboImpl
-    isModified: boolean
-  }>(),
-  {
-    isModified: false
-  }
-)
+const { keyCombo, isModified = false } = defineProps<{
+  keyCombo: KeyComboImpl
+  isModified?: boolean
+}>()
 
-const keySequences = computed(() => props.keyCombo.getKeySequences())
+const keySequences = computed(() => keyCombo.getKeySequences())
 </script>

src/components/searchbox/NodeSearchBox.vue

@@ -35,7 +35,7 @@
     </Dialog>
 
     <AutoCompletePlus
-      :model-value="props.filters"
+      :model-value="filters"
       class="comfy-vue-node-search-box z-10 flex-grow"
       scrollHeight="40vh"
       :placeholder="placeholder"
@@ -99,15 +99,10 @@ const enableNodePreview = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview')
 )
 
-const props = withDefaults(
-  defineProps<{
-    filters: FilterAndValue[]
-    searchLimit?: number
-  }>(),
-  {
-    searchLimit: 64
-  }
-)
+const { filters, searchLimit = 64 } = defineProps<{
+  filters: FilterAndValue[]
+  searchLimit?: number
+}>()
 
 const nodeSearchFilterVisible = ref(false)
 const inputId = `comfy-vue-node-search-box-input-${Math.random()}`
@@ -115,19 +110,19 @@ const suggestions = ref<ComfyNodeDefImpl[]>([])
 const hoveredSuggestion = ref<ComfyNodeDefImpl | null>(null)
 const currentQuery = ref('')
 const placeholder = computed(() => {
-  return props.filters.length === 0 ? t('g.searchNodes') + '...' : ''
+  return filters.length === 0 ? t('g.searchNodes') + '...' : ''
 })
 
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
 const search = (query: string) => {
-  const queryIsEmpty = query === '' && props.filters.length === 0
+  const queryIsEmpty = query === '' && filters.length === 0
   currentQuery.value = query
   suggestions.value = queryIsEmpty
     ? nodeFrequencyStore.topNodeDefs
     : [
-        ...nodeDefStore.nodeSearchService.searchNode(query, props.filters, {
-          limit: props.searchLimit
+        ...nodeDefStore.nodeSearchService.searchNode(query, filters, {
+          limit: searchLimit
         })
       ]
 }

src/views/templates/BaseViewTemplate.vue

@@ -2,7 +2,7 @@
   <div
     class="font-sans w-screen h-screen flex flex-col"
     :class="[
-      props.dark
+      dark
         ? 'text-neutral-300 bg-neutral-900 dark-theme'
         : 'text-neutral-900 bg-neutral-300'
     ]"
@@ -26,14 +26,9 @@ import { nextTick, onMounted, ref } from 'vue'
 
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
-const props = withDefaults(
-  defineProps<{
-    dark?: boolean
-  }>(),
-  {
-    dark: false
-  }
-)
+const { dark = false } = defineProps<{
+  dark?: boolean
+}>()
 
 const darkTheme = {
   color: 'rgba(0, 0, 0, 0)',
@@ -51,7 +46,7 @@ onMounted(async () => {
     await nextTick()
 
     electronAPI().changeTheme({
-      ...(props.dark ? darkTheme : lightTheme),
+      ...(dark ? darkTheme : lightTheme),
       height: topMenuRef.value?.getBoundingClientRect().height ?? 0
     })
   }