mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 09:00:16 +00:00
ffda940e5a
| Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/3d414c6e-972e-4c87-8765-c30dc8288ddb" /> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/a3ec3eb4-f61f-42ac-bcf3-bc4c766040d7"/>| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9071-Make-the-vue-toggle-ring-surround-toggle-30f6d73d365081e0a427cf270ef2763a) by [Unito](https://www.unito.io)
86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<WidgetLayoutField v-slot="{ borderStyle }" :widget :no-border="!hasLabels">
|
|
<!-- Use ToggleGroup when explicit labels are provided -->
|
|
<ToggleGroup
|
|
v-if="hasLabels"
|
|
type="single"
|
|
:model-value="modelValue ? 'on' : 'off'"
|
|
:disabled="Boolean(widget.options?.read_only)"
|
|
:class="
|
|
cn(
|
|
WidgetInputBaseClass,
|
|
'flex w-full min-w-0 items-center justify-center gap-1 p-1'
|
|
)
|
|
"
|
|
@update:model-value="(v) => handleOptionChange(v as string)"
|
|
>
|
|
<ToggleGroupItem value="off" size="sm">
|
|
{{ widget.options?.off ?? t('widgets.boolean.false') }}
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="on" size="sm">
|
|
{{ widget.options?.on ?? t('widgets.boolean.true') }}
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
|
|
<!-- Use ToggleSwitch for implicit boolean states -->
|
|
<div
|
|
v-else
|
|
:class="
|
|
cn(
|
|
'-m-1 flex w-fit items-center gap-2 rounded-full p-1',
|
|
hideLayoutField || 'ml-auto',
|
|
borderStyle
|
|
)
|
|
"
|
|
>
|
|
<ToggleSwitch
|
|
v-model="modelValue"
|
|
v-bind="filteredProps"
|
|
:aria-label="widget.name"
|
|
/>
|
|
</div>
|
|
</WidgetLayoutField>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ToggleSwitch from 'primevue/toggleswitch'
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
|
|
import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import { useHideLayoutField } from '@/types/widgetTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
import {
|
|
STANDARD_EXCLUDED_PROPS,
|
|
filterWidgetProps
|
|
} from '@/utils/widgetPropFilter'
|
|
|
|
import { WidgetInputBaseClass } from './layout'
|
|
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
|
|
|
|
const { widget } = defineProps<{
|
|
widget: SimplifiedWidget<boolean, IWidgetOptions>
|
|
}>()
|
|
|
|
const modelValue = defineModel<boolean>()
|
|
|
|
const hideLayoutField = useHideLayoutField()
|
|
const { t } = useI18n()
|
|
|
|
const filteredProps = computed(() =>
|
|
filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
|
|
)
|
|
|
|
const hasLabels = computed(() => {
|
|
return widget.options?.on != null || widget.options?.off != null
|
|
})
|
|
|
|
function handleOptionChange(value: string | undefined) {
|
|
if (value) {
|
|
modelValue.value = value === 'on'
|
|
}
|
|
}
|
|
</script>
|