@vc-shell/framework 1.1.76 → 1.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.76",
+  "version": "1.1.78",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -65,8 +65,8 @@
     "@vee-validate/rules": "^4.12.4",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/components": "^10.7.1",
-    "@vueuse/core": "^13.9.0",
-    "@vueuse/integrations": "^13.9.0",
+    "@vueuse/core": "^10.7.1",
+    "@vueuse/integrations": "^10.7.1",
     "bootstrap-icons": "^1.11.3",
     "core-js": "^3.35.0",
     "dompurify": "^3.0.11",
@@ -78,22 +78,22 @@
     "tiptap-markdown": "^0.9.0",
     "truncate-html": "^1.1.1",
     "vee-validate": "^4.12.4",
-    "vue": "^3.5.21",
+    "vue": "^3.5.13",
     "vue-currency-input": "^3.0.5",
     "vue-i18n": "^11.1.11",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.2.5",
     "vue3-application-insights": "^1.1.0",
     "vue3-touch-events": "^4.1.8",
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^7.0.2",
-    "@laynezh/vite-plugin-lib-assets": "^2.1.3",
+    "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.76",
-    "@vc-shell/config-generator": "^1.1.76",
-    "@vc-shell/ts-config": "^1.1.76",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@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",
     "esbuild": "^0.25.3",
@@ -102,11 +102,11 @@
     "shx": "^0.3.4",
     "tsc-alias": "^1.8.8",
     "tsx": "^4.7.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.5",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
     "vitest": "^1.3.1",
-    "vue-component-type-helpers": "^3.0.6",
-    "vue-tsc": "^3.0.6"
+    "vue-component-type-helpers": "^2.2.10",
+    "vue-tsc": "^2.2.10"
   },
   "publishConfig": {
     "access": "public",

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);

package/dist/vendor-vueuse-components-CuLo31bP.js

@@ -1,219 +0,0 @@
-import { defineComponent as N, ref as M, h as j, watch as x, computed as I } from "vue";
-import { d as b, n as D, i as T, a as B, t as O, b as X, c as R, e as V } from "./vendor-vueuse-shared-B2Uva3Md.js";
-function L(t) {
-  var n;
-  const e = O(t);
-  return (n = e?.$el) != null ? n : e;
-}
-const U = B ? window : void 0;
-function g(...t) {
-  let n, e, o, u;
-  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([e, o, u] = t, n = U) : [n, e, o, u] = t, !n)
-    return D;
-  Array.isArray(e) || (e = [e]), Array.isArray(o) || (o = [o]);
-  const a = [], m = () => {
-    a.forEach((v) => v()), a.length = 0;
-  }, l = (v, p, r, s) => (v.addEventListener(p, r, s), () => v.removeEventListener(p, r, s)), d = x(
-    () => [L(n), O(u)],
-    ([v, p]) => {
-      if (m(), !v)
-        return;
-      const r = X(p) ? { ...p } : p;
-      a.push(
-        ...e.flatMap((s) => o.map((f) => l(v, s, f, r)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), c = () => {
-    d(), m();
-  };
-  return R(c), c;
-}
-let W = !1;
-function H(t, n, e = {}) {
-  const { window: o = U, ignore: u = [], capture: a = !0, detectIframe: m = !1 } = e;
-  if (!o)
-    return D;
-  T && !W && (W = !0, Array.from(o.document.body.children).forEach((r) => r.addEventListener("click", D)), o.document.documentElement.addEventListener("click", D));
-  let l = !0;
-  const d = (r) => u.some((s) => {
-    if (typeof s == "string")
-      return Array.from(o.document.querySelectorAll(s)).some((f) => f === r.target || r.composedPath().includes(f));
-    {
-      const f = L(s);
-      return f && (r.target === f || r.composedPath().includes(f));
-    }
-  }), v = [
-    g(o, "click", (r) => {
-      const s = L(t);
-      if (!(!s || s === r.target || r.composedPath().includes(s))) {
-        if (r.detail === 0 && (l = !d(r)), !l) {
-          l = !0;
-          return;
-        }
-        n(r);
-      }
-    }, { passive: !0, capture: a }),
-    g(o, "pointerdown", (r) => {
-      const s = L(t);
-      l = !d(r) && !!(s && !r.composedPath().includes(s));
-    }, { passive: !0 }),
-    m && g(o, "blur", (r) => {
-      setTimeout(() => {
-        var s;
-        const f = L(t);
-        ((s = o.document.activeElement) == null ? void 0 : s.tagName) === "IFRAME" && !f?.contains(o.document.activeElement) && n(r);
-      }, 0);
-    })
-  ].filter(Boolean);
-  return () => v.forEach((r) => r());
-}
-const ne = {
-  [b.mounted](t, n) {
-    const e = !n.modifiers.bubble;
-    if (typeof n.value == "function")
-      t.__onClickOutside_stop = H(t, n.value, { capture: e });
-    else {
-      const [o, u] = n.value;
-      t.__onClickOutside_stop = H(t, o, Object.assign({ capture: e }, u));
-    }
-  },
-  [b.unmounted](t) {
-    t.__onClickOutside_stop();
-  }
-}, $ = 500, z = 10;
-function G(t, n, e) {
-  var o, u;
-  const a = I(() => L(t));
-  let m, l, d, c = !1;
-  function v() {
-    m && (clearTimeout(m), m = void 0), l = void 0, d = void 0, c = !1;
-  }
-  function p(i) {
-    var h, y, _;
-    const [w, E, k] = [d, l, c];
-    if (v(), !e?.onMouseUp || !E || !w || (h = e?.modifiers) != null && h.self && i.target !== a.value)
-      return;
-    (y = e?.modifiers) != null && y.prevent && i.preventDefault(), (_ = e?.modifiers) != null && _.stop && i.stopPropagation();
-    const A = i.x - E.x, C = i.y - E.y, F = Math.sqrt(A * A + C * C);
-    e.onMouseUp(i.timeStamp - w, F, k);
-  }
-  function r(i) {
-    var h, y, _, w;
-    (h = e?.modifiers) != null && h.self && i.target !== a.value || (v(), (y = e?.modifiers) != null && y.prevent && i.preventDefault(), (_ = e?.modifiers) != null && _.stop && i.stopPropagation(), l = {
-      x: i.x,
-      y: i.y
-    }, d = i.timeStamp, m = setTimeout(
-      () => {
-        c = !0, n(i);
-      },
-      (w = e?.delay) != null ? w : $
-    ));
-  }
-  function s(i) {
-    var h, y, _, w;
-    if ((h = e?.modifiers) != null && h.self && i.target !== a.value || !l || e?.distanceThreshold === !1)
-      return;
-    (y = e?.modifiers) != null && y.prevent && i.preventDefault(), (_ = e?.modifiers) != null && _.stop && i.stopPropagation();
-    const E = i.x - l.x, k = i.y - l.y;
-    Math.sqrt(E * E + k * k) >= ((w = e?.distanceThreshold) != null ? w : z) && v();
-  }
-  const f = {
-    capture: (o = e?.modifiers) == null ? void 0 : o.capture,
-    once: (u = e?.modifiers) == null ? void 0 : u.once
-  }, q = [
-    g(a, "pointerdown", r, f),
-    g(a, "pointermove", s, f),
-    g(a, ["pointerup", "pointerleave"], p, f)
-  ];
-  return () => q.forEach((i) => i());
-}
-const oe = /* @__PURE__ */ N({
-  name: "OnLongPress",
-  props: ["as", "options"],
-  emits: ["trigger"],
-  setup(t, { slots: n, emit: e }) {
-    const o = M();
-    return G(
-      o,
-      (u) => {
-        e("trigger", u);
-      },
-      t.options
-    ), () => {
-      if (n.default)
-        return j(t.as || "div", { ref: o }, n.default());
-    };
-  }
-});
-function S(t) {
-  return typeof Window < "u" && t instanceof Window ? t.document.documentElement : typeof Document < "u" && t instanceof Document ? t.documentElement : t;
-}
-function Y(t) {
-  const n = window.getComputedStyle(t);
-  if (n.overflowX === "scroll" || n.overflowY === "scroll" || n.overflowX === "auto" && t.clientWidth < t.scrollWidth || n.overflowY === "auto" && t.clientHeight < t.scrollHeight)
-    return !0;
-  {
-    const e = t.parentNode;
-    return !e || e.tagName === "BODY" ? !1 : Y(e);
-  }
-}
-function J(t) {
-  const n = t || window.event, e = n.target;
-  return Y(e) ? !1 : n.touches.length > 1 ? !0 : (n.preventDefault && n.preventDefault(), !1);
-}
-const P = /* @__PURE__ */ new WeakMap();
-function K(t, n = !1) {
-  const e = M(n);
-  let o = null, u = "";
-  x(V(t), (l) => {
-    const d = S(O(l));
-    if (d) {
-      const c = d;
-      if (P.get(c) || P.set(c, c.style.overflow), c.style.overflow !== "hidden" && (u = c.style.overflow), c.style.overflow === "hidden")
-        return e.value = !0;
-      if (e.value)
-        return c.style.overflow = "hidden";
-    }
-  }, {
-    immediate: !0
-  });
-  const a = () => {
-    const l = S(O(t));
-    !l || e.value || (T && (o = g(
-      l,
-      "touchmove",
-      (d) => {
-        J(d);
-      },
-      { passive: !1 }
-    )), l.style.overflow = "hidden", e.value = !0);
-  }, m = () => {
-    const l = S(O(t));
-    !l || !e.value || (T && o?.(), l.style.overflow = u, P.delete(l), e.value = !1);
-  };
-  return R(m), I({
-    get() {
-      return e.value;
-    },
-    set(l) {
-      l ? a() : m();
-    }
-  });
-}
-function Q() {
-  let t = !1;
-  const n = M(!1);
-  return (e, o) => {
-    if (n.value = o.value, t)
-      return;
-    t = !0;
-    const u = K(e, o.value);
-    x(n, (a) => u.value = a);
-  };
-}
-Q();
-export {
-  oe as O,
-  ne as v
-};