@vc-shell/framework 1.1.0-alpha.3 → 1.1.0-alpha.4

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

@@ -0,0 +1,250 @@
+import { computed, ref, watch } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition, DashboardGridConfig } from "../types";
+import { useDashboard } from "../../../../core/composables/useDashboard";
+
+// Constants for grid
+export const GRID_COLUMNS = 12;
+// Initial rows, but now it's the minimum value
+export const MIN_GRID_ROWS = 12;
+// Increase height buffer for "infinite" scroll
+const ROWS_BUFFER = 10;
+// Dynamically calculated number of rows
+const dynamicRows = ref(MIN_GRID_ROWS);
+
+// Constants for position search optimization
+const SEARCH_DIRECTIONS = [
+  { dx: 0, dy: 0 }, // Current position
+  { dx: 0, dy: 1 }, // Down
+  { dx: 1, dy: 0 }, // Right
+  { dx: 0, dy: -1 }, // Up
+  { dx: -1, dy: 0 }, // Left
+  { dx: 1, dy: 1 }, // Right-down
+  { dx: -1, dy: 1 }, // Left-down
+  { dx: 1, dy: -1 }, // Right-up
+  { dx: -1, dy: -1 }, // Left-up
+];
+
+export function useDashboardGrid() {
+  const dashboard = useDashboard();
+  const widgets = computed(() => dashboard.getWidgets());
+  const layout = computed(() => dashboard.getLayout());
+
+  // Calculate current maximum number of rows based on existing widgets
+  const currentRows = computed(() => {
+    if (widgets.value.length === 0) return MIN_GRID_ROWS;
+
+    const maxY = Math.max(
+      ...Array.from(layout.value.values()).map((pos: DashboardWidgetPosition, index) => {
+        const widget = widgets.value.find((w) => w.id === Array.from(layout.value.keys())[index]);
+        return widget ? pos.y + widget.size.height : pos.y + 1;
+      }),
+      0,
+    );
+
+    // Update dynamic number of rows with large buffer
+    dynamicRows.value = Math.max(maxY + ROWS_BUFFER, MIN_GRID_ROWS);
+    return dynamicRows.value;
+  });
+
+  // Get current number of rows
+  const getGridRows = () => currentRows.value;
+
+  // Improved collision detection function
+  const hasCollision = (
+    widget: IDashboardWidget,
+    position: DashboardWidgetPosition,
+    excludeWidgetId?: string,
+  ): boolean => {
+    // Check only bottom grid boundary
+    if (position.x < 0 || position.x + widget.size.width > GRID_COLUMNS || position.y < 0) {
+      return true;
+    }
+
+    // Create occupied cells map for optimization
+    const occupiedCells = new Set<string>();
+
+    // Fill occupied cells map
+    widgets.value.forEach((other) => {
+      if (other.id === widget.id || (excludeWidgetId && other.id === excludeWidgetId)) {
+        return;
+      }
+
+      const otherPos = layout.value.get(other.id);
+      if (!otherPos) return;
+
+      for (let x = otherPos.x; x < otherPos.x + other.size.width; x++) {
+        for (let y = otherPos.y; y < otherPos.y + other.size.height; y++) {
+          occupiedCells.add(`${x},${y}`);
+        }
+      }
+    });
+
+    // Check collisions for each widget cell
+    for (let x = position.x; x < position.x + widget.size.width; x++) {
+      for (let y = position.y; y < position.y + widget.size.height; y++) {
+        if (occupiedCells.has(`${x},${y}`)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  // Improved free position search function
+  const findFreePosition = (widget: IDashboardWidget): DashboardWidgetPosition => {
+    const currentPos = layout.value.get(widget.id);
+
+    // If current position is free, use it
+    if (currentPos && !hasCollision(widget, currentPos, widget.id)) {
+      return currentPos;
+    }
+
+    // Start search from top-left corner or current position
+    const startX = currentPos?.x || 0;
+    const startY = currentPos?.y || 0;
+
+    // Spiral search for free position
+    let layer = 0;
+    const maxLayers = Math.max(GRID_COLUMNS, currentRows.value);
+
+    while (layer < maxLayers) {
+      // Check all directions in current layer
+      for (const { dx, dy } of SEARCH_DIRECTIONS) {
+        const x = startX + dx * layer;
+        const y = startY + dy * layer;
+
+        const position = { x, y };
+
+        // Check position
+        if (!hasCollision(widget, position, widget.id)) {
+          return position;
+        }
+      }
+
+      layer++;
+    }
+
+    // If no position found, add to the end
+    return {
+      x: 0,
+      y: currentRows.value,
+    };
+  };
+
+  // Arrange widgets in rows, minimizing empty spaces
+  const arrangeWidgetsInRows = (widgetsToArrange: IDashboardWidget[]): void => {
+    if (widgetsToArrange.length === 0) return;
+
+    const sortedWidgets = [...widgetsToArrange].sort((a, b) => {
+      // Sort by size (largest first)
+      const aSize = a.size.width * a.size.height;
+      const bSize = b.size.width * b.size.height;
+      return bSize - aSize;
+    });
+
+    // Current position for placement
+    let currentX = 0;
+    let currentY = 0;
+    let rowHeight = 0;
+
+    sortedWidgets.forEach((widget) => {
+      // Check if widget fits in current row
+      if (currentX + widget.size.width > GRID_COLUMNS) {
+        // If it doesn't fit, move to the next row
+        currentX = 0;
+        currentY += rowHeight;
+        rowHeight = 0;
+      }
+
+      // Place widget on current position
+      const position = { x: currentX, y: currentY };
+      dashboard.updateWidgetPosition(widget.id, position);
+
+      // Update current position
+      currentX += widget.size.width;
+
+      // Update maximum height for current row
+      rowHeight = Math.max(rowHeight, widget.size.height);
+    });
+  };
+
+  // Initialize initial widget positions
+  const initializeLayout = () => {
+    // Check if layout rebuild is needed
+
+    // Check if not all widgets have positioned yet
+    if (widgets.value.length !== layout.value.size) {
+      arrangeWidgetsInRows(widgets.value);
+      return;
+    }
+
+    // Check if all widgets have a position
+    const hasUnpositionedWidgets = widgets.value.some((widget: IDashboardWidget) => !layout.value.has(widget.id));
+
+    // If there are widgets without a position, then rearrange
+    if (hasUnpositionedWidgets) {
+      arrangeWidgetsInRows(widgets.value);
+      return;
+    }
+
+    // Check for collisions
+    const hasCollisions = widgets.value.some((widget: IDashboardWidget) => {
+      const pos = layout.value.get(widget.id);
+      return pos && hasCollision(widget, pos, widget.id);
+    });
+
+    // If there are collisions, then rearrange
+    if (hasCollisions) {
+      arrangeWidgetsInRows(widgets.value);
+      return;
+    }
+
+    // Check if widgets are compact
+    const maxY = Math.max(...Array.from(layout.value.values()).map((pos: DashboardWidgetPosition) => pos.y + 1), 0);
+
+    // If widgets occupy many rows but are not fully occupied, then consider this placement suboptimal
+    const totalCells = GRID_COLUMNS * maxY;
+    const occupiedCells = widgets.value.reduce((sum: number, widget: IDashboardWidget) => {
+      return sum + widget.size.width * widget.size.height;
+    }, 0);
+
+    // If less than 70% of the grid is occupied and widgets occupy many rows, then rearrange
+    const fillRatio = occupiedCells / totalCells;
+    if (maxY > 1 && fillRatio < 0.7) {
+      arrangeWidgetsInRows(widgets.value);
+      return;
+    }
+
+    // For widgets with positions, check and eliminate only collisions
+    const sortedWidgets = [...widgets.value].sort((a, b) => {
+      const posA = layout.value.get(a.id);
+      const posB = layout.value.get(b.id);
+      if (!posA && !posB) return 0;
+      if (!posA) return 1;
+      if (!posB) return -1;
+      return posA.y - posB.y || posA.x - posB.x;
+    });
+
+    // Rearrange widgets, avoiding collisions
+    sortedWidgets.forEach((widget) => {
+      const currentPos = layout.value.get(widget.id);
+      if (!currentPos) {
+        const freePosition = findFreePosition(widget);
+        dashboard.updateWidgetPosition(widget.id, freePosition);
+      } else if (hasCollision(widget, currentPos, widget.id)) {
+        const freePosition = findFreePosition(widget);
+        dashboard.updateWidgetPosition(widget.id, freePosition);
+      }
+    });
+  };
+
+  return {
+    widgets,
+    layout,
+    arrangeWidgetsInRows,
+    initializeLayout,
+    GRID_COLUMNS,
+    getGridRows,
+  };
+}

package/shared/components/draggable-dashboard/index.ts

@@ -0,0 +1 @@
+export { default as DraggableDashboard } from "./DraggableDashboard.vue";

package/shared/components/draggable-dashboard/types.ts

@@ -0,0 +1,91 @@
+import type { Component } from 'vue';
+
+/**
+ * Position type for a widget on the dashboard grid
+ */
+export interface DashboardWidgetPosition {
+  /**
+   * X coordinate (left to right)
+   * @minimum 0
+   */
+  x: number;
+
+  /**
+   * Y coordinate (top to bottom)
+   * @minimum 0
+   */
+  y: number;
+}
+
+/**
+ * Widget size type
+ */
+export interface DashboardWidgetSize {
+  /**
+   * Width in grid cells
+   * @minimum 1
+   * @maximum 12
+   */
+  width: number;
+
+  /**
+   * Height in grid cells
+   * @minimum 1
+   */
+  height: number;
+}
+
+/**
+ * Dashboard widget type
+ */
+export interface IDashboardWidget {
+  /**
+   * Unique widget identifier
+   */
+  id: string;
+
+  /**
+   * Widget title
+   */
+  name?: string;
+
+  /**
+   * Rendering component
+   */
+  component: Component;
+
+  /**
+   * Component properties
+   */
+  props?: Record<string, unknown>;
+
+  /**
+   * Widget size
+   */
+  size: DashboardWidgetSize;
+}
+
+/**
+ * Drag event type
+ */
+export interface DashboardDragEvent {
+  widget: IDashboardWidget;
+  position: DashboardWidgetPosition;
+}
+
+/**
+ * Grid configuration
+ */
+export interface DashboardGridConfig {
+  /**
+   * Number of columns in the grid
+   * @default 12
+   */
+  columns: number;
+
+  /**
+   * Cell height in pixels
+   * @default 80
+   */
+  cellHeight: number;
+}

package/shared/components/index.ts

@@ -13,3 +13,5 @@ export * from "./theme-selector";
 export * from "./sign-in";
 export * from "./settings-menu-item";
 export * from "./generic-dropdown";
+export * from "./draggable-dashboard";
+export * from "./dashboard-widget-card";

package/shared/components/user-dropdown-button/_internal/user-info.vue

@@ -10,19 +10,22 @@
       icon="fas fa-user-circle"
       class="vc-user-info__icon"
     />
-    <div
-      v-if="isExpanded || $isMobile.value"
-      class="vc-user-info__info"
-    >
-      <div class="vc-user-info__name">
-        {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
-      </div>
-      <div class="vc-user-info__role">
-        {{
-          (role && $t(`SHELL.USER.ROLE.${role}`)) || (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
-        }}
+    <Transition name="opacity">
+      <div
+        v-show="isExpanded || $isMobile.value"
+        class="vc-user-info__info"
+      >
+        <div class="vc-user-info__name">
+          {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
+        </div>
+        <div class="vc-user-info__role">
+          {{
+            (role && $t(`SHELL.USER.ROLE.${role}`)) ||
+            (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
+          }}
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
@@ -79,4 +82,14 @@ const imageHandler = computed(() => {
     @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-role-color)];
   }
 }
+
+.opacity-enter-active,
+.opacity-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.opacity-enter-from,
+.opacity-leave-to {
+  opacity: 0;
+}
 </style>

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -21,7 +21,7 @@
           :avatar-url="avatarUrl"
           :name="name"
           :role="role"
-          :is-expanded="isExpanded"
+          :is-expanded="isExpanded || isHoverExpanded"
         />
         <!-- <UserActions
           :profile-menu="profileMenu"
@@ -59,7 +59,7 @@ defineProps<Props>();
 
 const { t } = useI18n({ useScope: "global" });
 const isSidebarOpened = ref(false);
-const { isExpanded } = useMenuExpanded();
+const { isExpanded, isHoverExpanded } = useMenuExpanded();
 
 function handleMenuItemClick(item: IMenuItem) {
   item.clickHandler?.();
@@ -115,7 +115,7 @@ function handleClick() {
   }
 
   &__actions {
-    @apply tw-relative tw-h-full;
+    @apply tw-h-full;
   }
 
   &__trigger {

package/shared/composables/useMenuExpanded.ts

@@ -1,16 +1,40 @@
 import { useLocalStorage } from "@vueuse/core";
+import { ref } from "vue";
 
 const STORAGE_KEY = "VC_APP_MENU_EXPANDED";
+const HOVER_DELAY = 200;
+
+const isHoverExpanded = ref(false);
 
 export const useMenuExpanded = () => {
   const isExpanded = useLocalStorage(STORAGE_KEY, true);
 
+  let expandTimeout: ReturnType<typeof setTimeout> | null = null;
+
   const toggleExpanded = () => {
     isExpanded.value = !isExpanded.value;
   };
 
+  const toggleHoverExpanded = (shouldExpand?: boolean) => {
+    if (expandTimeout) {
+      clearTimeout(expandTimeout);
+    }
+
+    if (shouldExpand) {
+      expandTimeout = setTimeout(() => {
+        if (isHoverExpanded.value !== shouldExpand) {
+          isHoverExpanded.value = shouldExpand;
+        }
+      }, HOVER_DELAY);
+    } else if (shouldExpand === false) {
+      isHoverExpanded.value = shouldExpand;
+    }
+  };
+
   return {
     isExpanded,
     toggleExpanded,
+    isHoverExpanded,
+    toggleHoverExpanded,
   };
 };

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -54,7 +54,7 @@
                         </div>
                         <VcButton
                           icon="far fa-copy"
-                          size="m"
+                          icon-size="m"
                           class="tw-ml-2"
                           text
                           :title="t('ASSETS.PAGES.DETAILS.FIELDS.COPY')"