feat: rename Vue-only widget label to Node 2.0 only (#8025)

## Summary

Add i18n key widgets.node2only and use it in litegraph widgets that only
support vueNodes mode.

## Screenshots (if applicable)
<img width="534" height="288" alt="image"
src="https://github.com/user-attachments/assets/e0987ec7-af09-4885-adf1-0c5cd6cba356"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8025-feat-rename-Vue-only-widget-label-to-Node-2-0-only-2e76d73d3650812cb7baf763440e2452)
by [Unito](https://www.unito.io)

src/lib/litegraph/src/widgets/ChartWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IChartWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class ChartWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'Chart: Vue-only'
+    const text = `Chart: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/ColorWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IColorWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class ColorWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'Color: Vue-only'
+    const text = `Color: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/FileUploadWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IFileUploadWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class FileUploadWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'Fileupload: Vue-only'
+    const text = `Fileupload: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/GalleriaWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IGalleriaWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class GalleriaWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'Galleria: Vue-only'
+    const text = `Galleria: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/ImageCompareWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IImageCompareWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class ImageCompareWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'ImageCompare: Vue-only'
+    const text = `ImageCompare: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/MarkdownWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IMarkdownWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class MarkdownWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'Markdown: Vue-only'
+    const text = `Markdown: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/MultiSelectWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { IMultiSelectWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class MultiSelectWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'MultiSelect: Vue-only'
+    const text = `MultiSelect: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/SelectButtonWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { ISelectButtonWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class SelectButtonWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'SelectButton: Vue-only'
+    const text = `SelectButton: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/TextareaWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { ITextareaWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class TextareaWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'Textarea: Vue-only'
+    const text = `Textarea: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/lib/litegraph/src/widgets/TreeSelectWidget.ts

@@ -1,3 +1,5 @@
+import { t } from '@/i18n'
+
 import type { ITreeSelectWidget } from '../types/widgets'
 import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
@@ -29,7 +31,7 @@ export class TreeSelectWidget
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
 
-    const text = 'TreeSelect: Vue-only'
+    const text = `TreeSelect: ${t('widgets.node2only')}`
     ctx.fillText(text, width / 2, y + height / 2)
 
     Object.assign(ctx, {

src/locales/en/main.json

@@ -2083,6 +2083,7 @@
     "Set Group Nodes to Always": "Set Group Nodes to Always"
   },
   "widgets": {
+    "node2only": "Node 2.0 only",
     "selectModel": "Select model",
     "uploadSelect": {
       "placeholder": "Select...",