@vc-shell/framework 1.1.77 → 1.1.78

package/dist/ui/components/molecules/vc-field/vc-field.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-field.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-field/vc-field.vue"],"names":[],"mappings":"AAmHA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACvD;;OAEG;IAEH,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;;UAlBQ,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO;iBAaxC,YAAY,GAAG,UAAU;iBAIzB,CAAC,MAAM,EAAE,MAAM,CAAC;;AAsJhC,wBAOG"}
+{"version":3,"file":"vc-field.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-field/vc-field.vue"],"names":[],"mappings":"AA8GA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACvD;;OAEG;IAEH,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;;UAlBQ,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO;iBAaxC,YAAY,GAAG,UAAU;iBAIzB,CAAC,MAAM,EAAE,MAAM,CAAC;;AAmJhC,wBAOG"}

package/dist/ui/components/molecules/vc-radio-button/vc-radio-button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-radio-button.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-radio-button/vc-radio-button.vue"],"names":[],"mappings":"AA0MA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,GAAG,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;CAChD;AAyED,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAuB7C,QAAA,MAAM,eAAe;;;;;UAtHZ,MAAM;6EA8Hb,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"vc-radio-button.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-radio-button/vc-radio-button.vue"],"names":[],"mappings":"AA2MA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,GAAG,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;CAChD;AAyED,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAuB7C,QAAA,MAAM,eAAe;;;;;UAtHZ,MAAM;6EA8Hb,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.77",
+  "version": "1.1.78",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -90,9 +90,9 @@
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.77",
-    "@vc-shell/config-generator": "^1.1.77",
-    "@vc-shell/ts-config": "^1.1.77",
+    "@vc-shell/api-client-generator": "^1.1.78",
+    "@vc-shell/config-generator": "^1.1.78",
+    "@vc-shell/ts-config": "^1.1.78",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",

package/shared/components/draggable-dashboard/DraggableDashboard.vue

@@ -84,6 +84,7 @@ const {
   saveLayoutToLocalStorage,
   loadLayoutFromLocalStorage,
   initializeWithBuiltInPositions,
+  handleNewWidget,
 } = useDashboardGrid();
 
 // Initialize cellSize calculator
@@ -116,6 +117,28 @@ watch(gridContainerRef, (container) => {
   }
 });
 
+// Watch for new widgets and handle their placement
+watch(
+  widgets,
+  (newWidgets, oldWidgets) => {
+    if (!oldWidgets || newWidgets.length > oldWidgets.length) {
+      // New widgets have been added
+      const newWidgetIds = newWidgets
+        .filter(w => !oldWidgets?.some(ow => ow.id === w.id))
+        .map(w => w.id);
+      
+      newWidgetIds.forEach(widgetId => {
+        const widget = newWidgets.find(w => w.id === widgetId);
+        if (widget && !layout.value.has(widgetId)) {
+          // Widget doesn't have a position yet, find a free one
+          handleNewWidget(widget);
+        }
+      });
+    }
+  },
+  { immediate: false },
+);
+
 // Watch for layout changes and save to localStorage
 watch(
   layout,

package/shared/components/draggable-dashboard/composables/useDashboardGrid.ts

@@ -78,6 +78,15 @@ export function useDashboardGrid() {
   const initializeLayout = (): void => {
     // Priority 1: Loading from localStorage
     const layoutLoadedFromStorage = loadLayoutFromLocalStorage();
+    
+    // Check for new widgets that don't have positions in localStorage
+    const savedPositions = persistence.getSavedPositions();
+    const widgetsWithoutSavedPosition = widgets.value.filter(w => !savedPositions[w.id] && !layout.value.has(w.id));
+    
+    if (widgetsWithoutSavedPosition.length > 0) {
+      // Place new widgets without collisions
+      widgetLayout.placeNewWidgets(widgetsWithoutSavedPosition, widgets.value, layout.value);
+    }
 
     // Priority 2: Using built-in widget positions
     if (!layoutLoadedFromStorage) {
@@ -90,6 +99,21 @@ export function useDashboardGrid() {
     }
   };
 
+  /**
+   * Handles registration of new widgets after initialization
+   */
+  const handleNewWidget = (widget: IDashboardWidget): void => {
+    // Check if widget already has a valid position from localStorage
+    const savedPositions = persistence.getSavedPositions();
+    if (savedPositions[widget.id]) {
+      return; // Position already loaded from localStorage
+    }
+    
+    // Find a free position for the new widget
+    const position = widgetLayout.findFreePosition(widget, widgets.value, layout.value);
+    dashboard.updateWidgetPosition(widget.id, position);
+  };
+
   return {
     widgets,
     layout,
@@ -100,5 +124,6 @@ export function useDashboardGrid() {
     arrangeWidgetsInRows,
     initializeWithBuiltInPositions,
     initializeLayout,
+    handleNewWidget,
   };
 }

package/shared/components/draggable-dashboard/composables/useLayoutPersistence.ts

@@ -66,6 +66,15 @@ export function useLayoutPersistence(
     }
   };
 
+  /**
+   * Gets saved positions for specific widgets
+   *
+   * @returns The saved positions
+   */
+  const getSavedPositions = (): Record<string, DashboardWidgetPosition> => {
+    return savedLayout.value;
+  };
+
   /**
    * Clears the saved layout from localStorage
    */
@@ -85,5 +94,6 @@ export function useLayoutPersistence(
     loadLayout,
     clearSavedLayout,
     hasSavedLayout,
+    getSavedPositions,
   };
 }

package/shared/components/draggable-dashboard/composables/useWidgetLayout.ts

@@ -255,10 +255,49 @@ export function useWidgetLayout(updatePositionCallback: (widgetId: string, posit
     return true;
   };
 
+  /**
+   * Places new widgets without collisions with existing ones
+   *
+   * @param newWidgets The array of new widgets to place
+   * @param allWidgets The array of all widgets
+   * @param layout The map of widget positions
+   */
+  const placeNewWidgets = (
+    newWidgets: IDashboardWidget[],
+    allWidgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+  ): void => {
+    if (newWidgets.length === 0) return;
+
+    // Create a map of occupied cells from existing widgets
+    const occupiedCells = grid.createOccupiedCellsMap(allWidgets, layout);
+
+    // Sort new widgets by size (bigger first)
+    const sortedWidgets = [...newWidgets].sort((a, b) => {
+      const aSize = a.size.width * a.size.height;
+      const bSize = b.size.width * b.size.height;
+      return bSize - aSize;
+    });
+
+    // Place each new widget
+    for (const widget of sortedWidgets) {
+      const position = findOptimalPosition(widget, occupiedCells, grid.dynamicRows.value + grid.ROWS_BUFFER);
+      updatePositionCallback(widget.id, position);
+
+      // Update the map of occupied cells
+      for (let x = position.x; x < position.x + widget.size.width; x++) {
+        for (let y = position.y; y < position.y + widget.size.height; y++) {
+          occupiedCells.add(`${x},${y}`);
+        }
+      }
+    }
+  };
+
   return {
     findFreePosition,
     findOptimalPosition,
     arrangeWidgetsInRows,
     initializeWithBuiltInPositions,
+    placeNewWidgets,
   };
 }

package/ui/components/molecules/vc-field/vc-field.vue

@@ -10,7 +10,6 @@
       <!-- Field label -->
       <VcLabel
         v-if="label"
-        class="vc-field__label"
       >
         <span>{{ label }}</span>
         <template
@@ -92,17 +91,13 @@ function copy(value: string) {
   @apply tw-flex;
 
   &--vertical {
-    @apply tw-flex-col;
+    @apply tw-flex-col tw-gap-2;
   }
 
   &--horizontal {
     @apply tw-flex-row tw-items-center;
   }
 
-  &__label {
-    @apply tw-mb-2;
-  }
-
   &__copy-button {
     @apply tw-ml-2;
   }

package/ui/components/molecules/vc-radio-button/vc-radio-button.vue

@@ -118,6 +118,7 @@ function onChange() {
   }
 
   input[type="radio"] {
+    flex-shrink: 0;
     border-radius: 50%;
     appearance: none;
     height: var(--radio-size);