feat(randomizer): add lora pool Vue widget

vue-widgets/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp, type App as VueApp } from 'vue'
 import PrimeVue from 'primevue/config'
 import DemoWidget from '@/components/DemoWidget.vue'
+import LoraPoolWidget from '@/components/LoraPoolWidget.vue'
 
 // @ts-ignore - ComfyUI external module
 import { app } from '../../../scripts/app.js'
@@ -13,7 +14,6 @@ function createVueWidget(node) {
   container.id = `lora-manager-demo-widget-${node.id}`
   container.style.width = '100%'
   container.style.height = '100%'
-  container.style.minHeight = '300px'
   container.style.display = 'flex'
   container.style.flexDirection = 'column'
   container.style.overflow = 'hidden'
@@ -34,7 +34,55 @@ function createVueWidget(node) {
     node
   })
 
-  vueApp.use(PrimeVue)
+  vueApp.use(PrimeVue, {
+    unstyled: true,
+    ripple: false
+  })
+
+  vueApp.mount(container)
+  vueApps.set(node.id, vueApp)
+
+  widget.onRemove = () => {
+    const vueApp = vueApps.get(node.id)
+    if (vueApp) {
+      vueApp.unmount()
+      vueApps.delete(node.id)
+    }
+  }
+
+  return { widget }
+}
+
+// @ts-ignore
+function createLoraPoolWidget(node) {
+  const container = document.createElement('div')
+  container.id = `lora-pool-widget-${node.id}`
+  container.style.width = '100%'
+  container.style.height = '100%'
+  container.style.display = 'flex'
+  container.style.flexDirection = 'column'
+  container.style.overflow = 'hidden'
+
+  const widget = node.addDOMWidget(
+    'pool_config',
+    'LORA_POOL_CONFIG',
+    container,
+    {
+      getMinHeight: () => 680,
+      hideOnZoom: false,
+      serialize: true
+    }
+  )
+
+  const vueApp = createApp(LoraPoolWidget, {
+    widget,
+    node
+  })
+
+  vueApp.use(PrimeVue, {
+    unstyled: true,
+    ripple: false
+  })
 
   vueApp.mount(container)
   vueApps.set(node.id, vueApp)
@@ -51,23 +99,18 @@ function createVueWidget(node) {
 }
 
 app.registerExtension({
-  name: 'comfyui.loramanager.demo',
+  name: 'LoraManager.VueWidgets',
 
   getCustomWidgets() {
     return {
       // @ts-ignore
       LORA_DEMO_WIDGET(node) {
         return createVueWidget(node)
+      },
+      // @ts-ignore
+      LORA_POOL_CONFIG(node) {
+        return createLoraPoolWidget(node)
       }
     }
-  },
-
-  // @ts-ignore
-  nodeCreated(node) {
-    if (node.constructor?.comfyClass !== 'LoraManagerDemoNode') return
-
-    const [oldWidth, oldHeight] = node.size
-
-    node.setSize([Math.max(oldWidth, 350), Math.max(oldHeight, 400)])
   }
 })