mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-23 16:24:06 +00:00
7f25280da4
- Fixes some options, like decrement, being off center - Fixes button being very hard to see on light themes - Moves the popover to use our fancy new reka-ui Popover component instead of primvue - Since the display control is no longer in the ValueControlPopover, loading is now actually async Most changed lines in `ValueControlPopover` are just indentation. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/5867d70c-a606-4092-a5f8-dd18ecda5b6f" /> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/7bbaf036-77da-4c98-acb0-4b142e4a4761" />| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8164-Fix-padding-color-and-move-to-reka-ui-popover-2ed6d73d3650817ea314f04699f1387f) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
113 lines
2.9 KiB
Vue
113 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import RadioButton from 'primevue/radiobutton'
|
|
import { computed } from 'vue'
|
|
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import type { ControlOptions } from '@/types/simplifiedWidget'
|
|
|
|
type ControlOption = {
|
|
description: string
|
|
mode: ControlOptions
|
|
icon?: string
|
|
text?: string
|
|
title: string
|
|
}
|
|
|
|
const settingStore = useSettingStore()
|
|
|
|
const controlOptions: ControlOption[] = [
|
|
{
|
|
mode: 'fixed',
|
|
icon: 'icon-[lucide--pencil-off]',
|
|
title: 'fixed',
|
|
description: 'fixedDesc'
|
|
},
|
|
{
|
|
mode: 'increment',
|
|
text: '+1',
|
|
title: 'increment',
|
|
description: 'incrementDesc'
|
|
},
|
|
{
|
|
mode: 'decrement',
|
|
text: '-1',
|
|
title: 'decrement',
|
|
description: 'decrementDesc'
|
|
},
|
|
{
|
|
mode: 'randomize',
|
|
icon: 'icon-[lucide--shuffle]',
|
|
title: 'randomize',
|
|
description: 'randomizeDesc'
|
|
}
|
|
]
|
|
|
|
const widgetControlMode = computed(() =>
|
|
settingStore.get('Comfy.WidgetControlMode')
|
|
)
|
|
|
|
const controlMode = defineModel<ControlOptions>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-113 max-w-md p-4 space-y-4">
|
|
<div class="text-sm text-muted-foreground leading-tight">
|
|
{{ $t('widgets.valueControl.header.prefix') }}
|
|
<span class="text-base-foreground font-medium">
|
|
{{
|
|
widgetControlMode === 'before'
|
|
? $t('widgets.valueControl.header.before')
|
|
: $t('widgets.valueControl.header.after')
|
|
}}
|
|
</span>
|
|
{{ $t('widgets.valueControl.header.postfix') }}
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="option in controlOptions"
|
|
:key="option.mode"
|
|
class="flex items-center justify-between py-2 gap-7"
|
|
>
|
|
<div class="flex items-center gap-2 flex-1 min-w-0">
|
|
<div
|
|
class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
|
|
>
|
|
<i
|
|
v-if="option.icon"
|
|
:class="option.icon"
|
|
class="text-base text-base-foreground"
|
|
/>
|
|
<span
|
|
v-if="option.text"
|
|
class="text-xs font-normal text-base-foreground"
|
|
>
|
|
{{ option.text }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
<div class="text-sm font-normal text-base-foreground leading-tight">
|
|
<span>
|
|
{{ $t(`widgets.valueControl.${option.title}`) }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="text-sm font-normal text-muted-foreground leading-tight"
|
|
>
|
|
{{ $t(`widgets.valueControl.${option.description}`) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<RadioButton
|
|
v-model="controlMode"
|
|
class="flex-shrink-0"
|
|
:input-id="option.mode"
|
|
:value="option.mode"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|