Feat: Fixed option for control after/before generate (#7517)

Followup to #7510.
- Makes `Fixed` a full option with description and swaps to radio
buttons
- Sorts the options to be the same order as litegraph
- Removes the "Edit control settings" button

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/e0e4acda-ba02-4a25-aeca-dd7f1adea0fb"
/>| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/5c4c0fbf-a949-4ce1-83e9-5acdeac3b81a"
/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7517-Austin-vue-fixed-2ca6d73d3650817ca845fb948bee73ac)
by [Unito](https://www.unito.io)

src/locales/en/main.json

@@ -2073,6 +2073,8 @@
       "incrementDesc": "Adds 1 to the value number",
       "decrement": "Decrement Value",
       "decrementDesc": "Subtracts 1 from the value number",
+      "fixed": "Fixed Value",
+      "fixedDesc": "Leaves value unchanged",
       "editSettings": "Edit control settings"
     }
   },

src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
-import ToggleSwitch from 'primevue/toggleswitch'
+import RadioButton from 'primevue/radiobutton'
 import { computed, ref } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useDialogService } from '@/services/dialogService'
 
 import { NumberControlMode } from '../composables/useStepperControl'
 
@@ -19,7 +17,6 @@ type ControlOption = {
 
 const popover = ref()
 const settingStore = useSettingStore()
-const dialogService = useDialogService()
 
 const toggle = (event: Event) => {
   popover.value.toggle(event)
@@ -40,10 +37,10 @@ const controlOptions: ControlOption[] = [
       ] as ControlOption[])
     : []),
   {
-    mode: NumberControlMode.RANDOMIZE,
-    icon: 'icon-[lucide--shuffle]',
-    title: 'randomize',
-    description: 'randomizeDesc'
+    mode: NumberControlMode.FIXED,
+    icon: 'icon-[lucide--pencil-off]',
+    title: 'fixed',
+    description: 'fixedDesc'
   },
   {
     mode: NumberControlMode.INCREMENT,
@@ -56,6 +53,12 @@ const controlOptions: ControlOption[] = [
     text: '-1',
     title: 'decrement',
     description: 'decrementDesc'
+  },
+  {
+    mode: NumberControlMode.RANDOMIZE,
+    icon: 'icon-[lucide--shuffle]',
+    title: 'randomize',
+    description: 'randomizeDesc'
   }
 ]
 
@@ -63,27 +66,7 @@ const widgetControlMode = computed(() =>
   settingStore.get('Comfy.WidgetControlMode')
 )
 
-const props = defineProps<{
-  controlMode: NumberControlMode
-}>()
-
-const emit = defineEmits<{
-  'update:controlMode': [mode: NumberControlMode]
-}>()
-
-const handleToggle = (mode: NumberControlMode) => {
-  if (props.controlMode === mode) return
-  emit('update:controlMode', mode)
-}
-
-const isActive = (mode: NumberControlMode) => {
-  return props.controlMode === mode
-}
-
-const handleEditSettings = () => {
-  popover.value.hide()
-  dialogService.showSettingsDialog()
-}
+const controlMode = defineModel<NumberControlMode>()
 </script>
 
 <template>
@@ -147,30 +130,14 @@ const handleEditSettings = () => {
             </div>
           </div>
 
-          <ToggleSwitch
-            :model-value="isActive(option.mode)"
+          <RadioButton
+            v-model="controlMode"
             class="flex-shrink-0"
-            @update:model-value="
-              (v) =>
-                v
-                  ? handleToggle(option.mode)
-                  : handleToggle(NumberControlMode.FIXED)
-            "
+            :input-id="option.mode"
+            :value="option.mode"
           />
         </div>
       </div>
-      <div class="border-t border-border-subtle"></div>
-      <Button
-        class="w-full bg-secondary-background hover:bg-secondary-background-hover border-0 rounded-lg p-2 text-sm"
-        @click="handleEditSettings"
-      >
-        <div class="flex items-center justify-center gap-1">
-          <i class="pi pi-cog text-xs text-muted-foreground" />
-          <span class="font-normal text-base-foreground">{{
-            $t('widgets.numberControl.editSettings')
-          }}</span>
-        </div>
-      </Button>
     </div>
   </Popover>
 </template>

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue

@@ -110,7 +110,7 @@ const buttonTooltip = computed(() => {
         <span class="pi pi-minus text-sm" />
       </template>
     </InputNumber>
-    <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5">
+    <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5 flex">
       <slot />
     </div>
   </WidgetLayoutField>

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent, ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import type { NumberControlMode } from '../composables/useStepperControl'
 import { useStepperControl } from '../composables/useStepperControl'
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 
@@ -32,10 +31,7 @@ const { controlMode, controlButtonIcon } = useStepperControl(
   props.widget.controlWidget!.value
 )
 
-const setControlMode = (mode: NumberControlMode) => {
-  controlMode.value = mode
-  props.widget.controlWidget!.update(mode)
-}
+watch(controlMode, props.widget.controlWidget!.update)
 
 const togglePopover = (event: Event) => {
   popover.value.toggle(event)
@@ -58,10 +54,6 @@ const togglePopover = (event: Event) => {
         <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
       </Button>
     </WidgetInputNumberInput>
-    <NumberControlPopover
-      ref="popover"
-      :control-mode
-      @update:control-mode="setControlMode"
-    />
+    <NumberControlPopover ref="popover" v-model="controlMode" />
   </div>
 </template>