Style: prototype with larger node text

Author: DrJKL

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

@@ -1,11 +1,32 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
-  <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
+  <div
+    v-else
+    v-tooltip.left="tooltipConfig"
+    :class="
+      cn(
+        'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
+        'cursor-crosshair',
+        props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
+        {
+          'lg-slot--connected': props.connected,
+          'lg-slot--compatible': props.compatible,
+          'opacity-40': shouldDim
+        },
+        props.socketless && 'pointer-events-none invisible'
+      )
+    "
+  >
     <!-- Connection Dot -->
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="cn('-translate-x-1/2 w-3', errorClassesDot)"
+      :class="
+        cn(
+          '-translate-x-1/2 w-3',
+          hasSlotError && 'ring-2 ring-error ring-offset-0 rounded-full'
+        )
+      "
       @click="onClick"
       @dblclick="onDoubleClick"
       @pointerdown="onPointerDown"
@@ -15,7 +36,12 @@
     <div class="h-full flex items-center min-w-0">
       <span
         v-if="!dotOnly"
-        :class="cn('truncate text-xs font-normal', labelClasses)"
+        :class="
+          cn(
+            'truncate text-node-component-slot-text',
+            hasSlotError && 'text-error font-medium'
+          )
+        "
       >
         {{ slotData.localized_name || slotData.name || `Input ${index}` }}
       </span>
@@ -65,18 +91,6 @@ const hasSlotError = computed(() => {
   )
 })
 
-const errorClassesDot = computed(() => {
-  return hasSlotError.value
-    ? 'ring-2 ring-error ring-offset-0 rounded-full'
-    : ''
-})
-
-const labelClasses = computed(() =>
-  hasSlotError.value
-    ? 'text-error font-medium'
-    : 'text-node-component-slot-text'
-)
-
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()
 
@@ -113,20 +127,6 @@ const shouldDim = computed(() => {
   return !dragState.compatible.get(slotKey.value)
 })
 
-const slotWrapperClass = computed(() =>
-  cn(
-    'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
-    'cursor-crosshair',
-    props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
-    {
-      'lg-slot--connected': props.connected,
-      'lg-slot--compatible': props.compatible,
-      'opacity-40': shouldDim.value
-    },
-    props.socketless && 'pointer-events-none invisible'
-  )
-)
-
 const connectionDotRef = ref<ComponentPublicInstance<{
   slotElRef: HTMLElement | undefined
 }> | null>(null)

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

@@ -57,7 +57,7 @@
           :model-value="widget.value"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :node-type="nodeType"
-          class="flex-1 col-span-2"
+          class="col-span-2"
           @update:model-value="widget.updateHandler"
         />
       </div>

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

@@ -3,10 +3,7 @@
   <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
     <div class="relative h-full flex items-center min-w-0">
       <!-- Slot Name -->
-      <span
-        v-if="!dotOnly"
-        class="text-xs font-normal truncate text-node-component-slot-text"
-      >
+      <span v-if="!dotOnly" class="truncate text-node-component-slot-text">
         {{ slotData.localized_name || slotData.name || `Output ${index}` }}
       </span>
     </div>

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { noop } from 'es-toolkit'
 import { inject } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -12,27 +11,19 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 </script>
 
 <template>
-  <div
-    class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
-  >
-    <div
-      v-if="!hideLayoutField"
-      class="relative flex h-full min-w-0 items-center"
-    >
-      <p
-        v-if="widget.name"
-        class="flex-1 truncate text-xs font-normal text-node-component-slot-text"
-      >
+  <div class="grid grid-cols-subgrid min-w-0 justify-between gap-1">
+    <div v-if="!hideLayoutField" class="relative flex min-w-0 items-center">
+      <p v-if="widget.name" class="truncate m-0">
         {{ widget.label || widget.name }}
       </p>
     </div>
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">
       <div
         class="cursor-default min-w-0 rounded-lg space-y-1 focus-within:ring ring-component-node-widget-background-highlighted transition-all"
-        @pointerdown.stop="noop"
-        @pointermove.stop="noop"
-        @pointerup.stop="noop"
+        @pointerdown.stop
+        @pointermove.stop
+        @pointerup.stop
       >
         <slot />
       </div>