mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 17:30:07 +00:00
## 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)
38 lines
812 B
Vue
38 lines
812 B
Vue
<template>
|
|
<TopbarBadge
|
|
:badge="cloudBadge"
|
|
:display-mode="displayMode"
|
|
:reverse-order="reverseOrder"
|
|
:no-padding="noPadding"
|
|
:background-color="backgroundColor"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
|
|
|
|
import TopbarBadge from './TopbarBadge.vue'
|
|
|
|
const {
|
|
displayMode = 'full',
|
|
reverseOrder = false,
|
|
noPadding = false,
|
|
backgroundColor = 'var(--comfy-menu-bg)'
|
|
} = defineProps<{
|
|
displayMode?: 'full' | 'compact' | 'icon-only'
|
|
reverseOrder?: boolean
|
|
noPadding?: boolean
|
|
backgroundColor?: string
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const cloudBadge = computed<TopbarBadgeType>(() => ({
|
|
label: t('g.beta'),
|
|
text: 'Comfy Cloud'
|
|
}))
|
|
</script>
|