fix: refactor(litegraph): localize hardcoded 'Value' prompt titles in NumberWidget.ts via vue-i18n (#9389)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/common/VirtualGrid.vue

@@ -4,7 +4,7 @@
     class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface) h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable]"
   >
     <div :style="topSpacerStyle" />
-    <div :class="gridClass" :style="mergedGridStyle">
+    <div :style="mergedGridStyle">
       <div
         v-for="(item, i) in renderedItems"
         :key="item.key"
@@ -32,7 +32,6 @@ type GridState = {
 const {
   items,
   gridStyle,
-  gridClass,
   bufferRows = 1,
   scrollThrottle = 64,
   resizeDebounce = 64,
@@ -41,8 +40,7 @@ const {
   maxColumns = Infinity
 } = defineProps<{
   items: (T & { key: string })[]
-  gridStyle?: CSSProperties
-  gridClass?: string
+  gridStyle: CSSProperties
   bufferRows?: number
   scrollThrottle?: number
   resizeDebounce?: number
@@ -73,7 +71,7 @@ const cols = computed(() => {
 })
 
 const mergedGridStyle = computed<CSSProperties>(() => {
-  if (maxColumns === Infinity) return gridStyle ?? {}
+  if (maxColumns === Infinity) return gridStyle
   return {
     ...gridStyle,
     gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`

src/lib/litegraph/src/widgets/NumberWidget.ts

@@ -1,3 +1,4 @@
+import { t } from '@/i18n'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
 import { evaluateInput, getWidgetStep } from '@/lib/litegraph/src/utils/widget'
 
@@ -65,7 +66,7 @@ export class NumberWidget
 
     // Handle center click - show prompt
     canvas.prompt(
-      'Value',
+      t('widgets.valuePromptTitle'),
       this.value,
       (v: string) => {
         const parsed = evaluateInput(v)

src/lib/litegraph/src/widgets/TextWidget.ts

@@ -1,3 +1,4 @@
+import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IStringWidget } from '@/lib/litegraph/src/types/widgets'
 
@@ -40,7 +41,7 @@ export class TextWidget
   override onClick({ e, node, canvas }: WidgetEventOptions) {
     // Show prompt dialog for text input
     canvas.prompt(
-      'Value',
+      t('widgets.valuePromptTitle'),
       this.value,
       (v: string) => {
         if (v !== null) {

src/locales/en/main.json

@@ -2545,6 +2545,7 @@
     },
     "node2only": "Node 2.0 only",
     "selectModel": "Select model",
+    "valuePromptTitle": "Value",
     "uploadSelect": {
       "placeholder": "Select...",
       "placeholderImage": "Select image...",

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { MaybeRefOrGetter } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter } from 'vue'
 import { computed } from 'vue'
 
-import { cn } from '@/utils/tailwindUtil'
-
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 
 import type {
@@ -60,7 +58,7 @@ type LayoutConfig = {
   maxColumns: number
   itemHeight: number
   itemWidth: number
-  gapClass: string
+  gap: string
 }
 
 const LAYOUT_CONFIGS: Record<LayoutMode, LayoutConfig> = {
@@ -68,19 +66,19 @@ const LAYOUT_CONFIGS: Record<LayoutMode, LayoutConfig> = {
     maxColumns: 4,
     itemHeight: 120,
     itemWidth: 89,
-    gapClass: 'gap-x-2 gap-y-4'
+    gap: 'var(--spacing-4) var(--spacing-2)'
   },
   list: {
     maxColumns: 1,
     itemHeight: 64,
     itemWidth: 380,
-    gapClass: 'gap-2'
+    gap: 'var(--spacing-2)'
   },
   'list-small': {
     maxColumns: 1,
     itemHeight: 40,
     itemWidth: 380,
-    gapClass: 'gap-1'
+    gap: 'var(--spacing-1)'
   }
 }
 
@@ -88,9 +86,12 @@ const layoutConfig = computed<LayoutConfig>(
   () => LAYOUT_CONFIGS[layoutMode.value ?? 'grid']
 )
 
-const gridClass = computed(() =>
-  cn('grid w-full p-4', layoutConfig.value.gapClass)
-)
+const gridStyle = computed<CSSProperties>(() => ({
+  display: 'grid',
+  gap: layoutConfig.value.gap,
+  padding: '1rem',
+  width: '100%'
+}))
 
 type VirtualDropdownItem = FormDropdownItem & { key: string }
 const virtualItems = computed<VirtualDropdownItem[]>(() =>
@@ -138,7 +139,7 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
       v-else
       :key="layoutMode"
       :items="virtualItems"
-      :grid-class="gridClass"
+      :grid-style
       :max-columns="layoutConfig.maxColumns"
       :default-item-height="layoutConfig.itemHeight"
       :default-item-width="layoutConfig.itemWidth"