Implement widget borders in vue

src/composables/graph/useGraphNodeManager.ts

@@ -20,7 +20,7 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { WidgetValue } from '@/types/simplifiedWidget'
+import type { BorderColor, WidgetValue } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -47,6 +47,7 @@ export interface SafeWidgetData {
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
   isDOMWidget?: boolean
+  borderColor?: BorderColor
 }
 
 export interface VueNodeData {
@@ -104,17 +105,22 @@ export function safeWidgetMapper(
       }
       const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
       const slotInfo = slotMetadata.get(widget.name)
+      const borderColor =
+        (widget.promoted && 'promoted') ||
+        (widget.advanced && 'advanced') ||
+        undefined
 
       return {
         name: widget.name,
         type: widget.type,
         value: value,
+        borderColor,
+        callback: widget.callback,
+        isDOMWidget: isDOMWidget(widget),
         label: widget.label,
         options: widget.options,
-        callback: widget.callback,
         spec,
-        slotMetadata: slotInfo,
-        isDOMWidget: isDOMWidget(widget)
+        slotMetadata: slotInfo
       }
     } catch (error) {
       return {

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -57,7 +57,14 @@
           :model-value="widget.value"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :node-type="nodeType"
-          class="flex-1 col-span-2"
+          :class="
+            cn(
+              'flex-1 col-span-2',
+              widget.borderColor && 'border rounded-lg',
+              widget.borderColor === 'promoted' && 'border-fuchsia-600/80',
+              widget.borderColor === 'advanced' && 'border-azure-400/80'
+            )
+          "
           @update:model-value="widget.updateHandler"
         />
       </div>
@@ -86,7 +93,11 @@ import {
   shouldExpand,
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
-import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+import type {
+  BorderColor,
+  SimplifiedWidget,
+  WidgetValue
+} from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 
 import InputSlot from './InputSlot.vue'
@@ -125,6 +136,7 @@ interface ProcessedWidget {
   name: string
   type: string
   vueComponent: Component
+  borderColor?: BorderColor
   simplified: SimplifiedWidget
   value: WidgetValue
   updateHandler: (value: WidgetValue) => void
@@ -184,6 +196,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       vueComponent,
       simplified,
       value: widget.value,
+      borderColor: widget.borderColor,
       updateHandler,
       tooltipConfig,
       slotMetadata

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -13,7 +13,7 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 
 <template>
   <div
-    class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
+    class="grid grid-cols-subgrid grid-rows-[30px] min-w-0 items-center justify-between gap-1 -ml-1 pl-1"
   >
     <div
       v-if="!hideLayoutField"

src/types/simplifiedWidget.ts

@@ -15,6 +15,8 @@ export type WidgetValue =
   | void
   | File[]
 
+export type BorderColor = 'advanced' | 'promoted'
+
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
   O = Record<string, any>