mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
fix(manager): refactor PackTryUpdateButton to use Button component (#7638)
## Summary - Refactors `PackTryUpdateButton` to use standard `Button` component instead of deprecated `IconTextButton` - Fixes broken import in `InfoPanelMultiItem.vue` (IconTextButton no longer exists) - Follows same pattern as `PackUninstallButton` and `PackInstallButton` ## Test plan - [ ] Verify "Try Update" button appears and functions correctly for nightly packs in the manager info panel - [ ] Verify multi-select update button works in InfoPanelMultiItem - [ ] Verify DotSpinner shows during update operation ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7638-fix-manager-refactor-PackTryUpdateButton-to-use-Button-component-2ce6d73d3650816da271c2c0f442d59e) by [Unito](https://www.unito.io)
This commit is contained in:
committed by
GitHub
parent
14fdbdf793
commit
7724558e7b
@@ -1,35 +1,35 @@
|
||||
<template>
|
||||
<IconTextButton
|
||||
<Button
|
||||
v-tooltip.top="$t('manager.tryUpdateTooltip')"
|
||||
v-bind="$attrs"
|
||||
type="transparent"
|
||||
:label="computedLabel"
|
||||
:border="true"
|
||||
:size="size"
|
||||
variant="textonly"
|
||||
:size
|
||||
:disabled="isUpdating"
|
||||
@click="tryUpdate"
|
||||
>
|
||||
<template v-if="isUpdating" #icon>
|
||||
<DotSpinner duration="1s" :size="size === 'sm' ? 12 : 16" />
|
||||
</template>
|
||||
</IconTextButton>
|
||||
<DotSpinner
|
||||
v-if="isUpdating"
|
||||
duration="1s"
|
||||
:size="size === 'sm' ? 12 : 16"
|
||||
/>
|
||||
<span>{{ isUpdating ? t('g.updating') : t('manager.tryUpdate') }}</span>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import IconTextButton from '@/components/button/IconTextButton.vue'
|
||||
import DotSpinner from '@/components/common/DotSpinner.vue'
|
||||
import type { ButtonSize } from '@/types/buttonTypes'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import type { ButtonVariants } from '@/components/ui/button/button.variants'
|
||||
import type { components } from '@/types/comfyRegistryTypes'
|
||||
import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
|
||||
|
||||
type NodePack = components['schemas']['Node']
|
||||
|
||||
const { nodePack, size = 'sm' } = defineProps<{
|
||||
const { nodePack, size } = defineProps<{
|
||||
nodePack: NodePack
|
||||
size?: ButtonSize
|
||||
size?: ButtonVariants['size']
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -56,8 +56,4 @@ async function tryUpdate() {
|
||||
isUpdating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const computedLabel = computed(() =>
|
||||
isUpdating.value ? t('g.updating') : t('manager.tryUpdate')
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -23,20 +23,17 @@
|
||||
v-else-if="isAllInstalled"
|
||||
class="flex w-full justify-center gap-2"
|
||||
>
|
||||
<IconTextButton
|
||||
<Button
|
||||
v-if="hasNightlyPacks"
|
||||
v-tooltip.top="$t('manager.tryUpdateTooltip')"
|
||||
type="transparent"
|
||||
:label="updateSelectedLabel"
|
||||
:border="true"
|
||||
variant="textonly"
|
||||
size="md"
|
||||
:disabled="isUpdatingSelected"
|
||||
@click="updateSelectedNightlyPacks"
|
||||
>
|
||||
<template v-if="isUpdatingSelected" #icon>
|
||||
<DotSpinner duration="1s" :size="16" />
|
||||
</template>
|
||||
</IconTextButton>
|
||||
<DotSpinner v-if="isUpdatingSelected" duration="1s" :size="16" />
|
||||
<span>{{ updateSelectedLabel }}</span>
|
||||
</Button>
|
||||
<PackUninstallButton size="md" :node-packs="installedPacks" />
|
||||
</div>
|
||||
<!-- None installed: Show install button -->
|
||||
@@ -73,8 +70,8 @@ import { useAsyncState } from '@vueuse/core'
|
||||
import { computed, onUnmounted, provide, ref, toRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import IconTextButton from '@/components/button/IconTextButton.vue'
|
||||
import DotSpinner from '@/components/common/DotSpinner.vue'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
|
||||
import type { components } from '@/types/comfyRegistryTypes'
|
||||
import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'
|
||||
|
||||
Reference in New Issue
Block a user