mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
b22ba97a13
Continuation of #6034 with - Updated synchronization for seed - Properly truncates the displayed widget value for the button - Synchronizes control after generate state with litegraph and allows for serialization Several issues from original PR have not (yet) been addressed, but are likely better moved to future PR - fix step value being 10 (legacy system) - ensure it works with COMBO (Fixed in #7095) - ensure it works with FLOAT (Fixed in #7095) - either implement or remove the config button functionality - think it should open settings? <img width="280" height="694" alt="image" src="https://github.com/user-attachments/assets/f36f1cb0-237d-4bfc-bff1-e4976775cf98" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6985-Support-control-after-generate-in-vue-2b86d73d365081d8b01ce489d887ff00) by [Unito](https://www.unito.io) --------- Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: github-actions <github-actions@github.com>
79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<template>
|
|
<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
|
|
<!-- Back button -->
|
|
<Button
|
|
v-if="currentStep !== '1'"
|
|
:label="$t('g.back')"
|
|
severity="secondary"
|
|
icon="pi pi-arrow-left"
|
|
class="font-inter rounded-lg border-0 px-6 py-2 justify-self-start"
|
|
@click="$emit('previous')"
|
|
/>
|
|
<div v-else></div>
|
|
|
|
<!-- Step indicators in center -->
|
|
<StepList class="flex justify-center items-center gap-3 select-none">
|
|
<Step value="1" :pt="stepPassthrough">
|
|
{{ $t('install.gpu') }}
|
|
</Step>
|
|
<Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
|
|
{{ $t('install.installLocation') }}
|
|
</Step>
|
|
<Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
|
|
{{ $t('install.desktopSettings') }}
|
|
</Step>
|
|
</StepList>
|
|
|
|
<!-- Next/Install button -->
|
|
<Button
|
|
:label="currentStep !== '3' ? $t('g.next') : $t('g.install')"
|
|
class="px-8 py-2 bg-brand-yellow hover:bg-brand-yellow/90 font-inter rounded-lg border-0 transition-colors justify-self-end"
|
|
:pt="{
|
|
label: { class: 'text-neutral-900 font-inter font-black' }
|
|
}"
|
|
:disabled="!canProceed"
|
|
@click="currentStep !== '3' ? $emit('next') : $emit('install')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PassThrough } from '@primevue/core'
|
|
import Button from 'primevue/button'
|
|
import Step from 'primevue/step'
|
|
import type { StepPassThroughOptions } from 'primevue/step'
|
|
import StepList from 'primevue/steplist'
|
|
|
|
defineProps<{
|
|
/** Current step index as string ('1', '2', '3', '4') */
|
|
currentStep: string
|
|
/** Whether the user can proceed to the next step */
|
|
canProceed: boolean
|
|
/** Whether the location step should be disabled */
|
|
disableLocationStep: boolean
|
|
/** Whether the settings step should be disabled */
|
|
disableSettingsStep: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
previous: []
|
|
next: []
|
|
install: []
|
|
}>()
|
|
|
|
const stepPassthrough: PassThrough<StepPassThroughOptions> = {
|
|
root: { class: 'flex-none p-0 m-0' },
|
|
header: ({ context }) => ({
|
|
class: [
|
|
'h-2.5 p-0 m-0 border-0 rounded-full transition-all duration-300',
|
|
context.active
|
|
? 'bg-brand-yellow w-8 rounded-sm'
|
|
: 'bg-neutral-700 w-2.5',
|
|
context.disabled ? 'opacity-60 cursor-not-allowed' : ''
|
|
].join(' ')
|
|
}),
|
|
number: { class: 'hidden' },
|
|
title: { class: 'hidden' }
|
|
}
|
|
</script>
|