@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.1

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

@@ -1,315 +0,0 @@
-<template>
-  <VcContainer
-    no-padding
-    class="vc-gridstack-dashboard"
-  >
-    <div
-      ref="gridRef"
-      class="grid-stack vc-gridstack-dashboard__grid"
-      role="list"
-      :aria-label="ariaLabel"
-    >
-      <div
-        v-for="(widget, index) in widgets"
-        :key="widget.id"
-        class="grid-stack-item"
-        :gs-id="widget.id"
-        :gs-x="getPosition(widget.id)?.x ?? widget.position?.x ?? 0"
-        :gs-y="getPosition(widget.id)?.y ?? widget.position?.y ?? 0"
-        :gs-w="widget.size.width"
-        :gs-h="widget.size.height"
-        :gs-min-w="2"
-        :gs-min-h="2"
-        role="listitem"
-        :aria-label="getWidgetAriaLabel(widget, index)"
-      >
-        <div class="grid-stack-item-content">
-          <!-- Drag handle (optional) -->
-          <div
-            v-if="showDragHandles"
-            class="vc-gridstack-dashboard__drag-handle"
-            aria-hidden="true"
-          >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-            >
-              <circle cx="5" cy="3" r="1.5" />
-              <circle cx="11" cy="3" r="1.5" />
-              <circle cx="5" cy="8" r="1.5" />
-              <circle cx="11" cy="8" r="1.5" />
-              <circle cx="5" cy="13" r="1.5" />
-              <circle cx="11" cy="13" r="1.5" />
-            </svg>
-          </div>
-
-          <!-- Widget content -->
-          <component
-            :is="widget.component"
-            v-bind="widget.props || {}"
-            class="vc-gridstack-dashboard__widget-content"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Screen reader announcements -->
-    <div
-      class="vc-gridstack-dashboard__live-region"
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-    >
-      {{ liveAnnouncement }}
-    </div>
-  </VcContainer>
-</template>
-
-<script setup lang="ts">
-/**
- * GridstackDashboard Component
- *
- * A flexible dashboard powered by Gridstack.js that allows widgets to be
- * dragged and arranged in a grid layout.
- *
- * Features:
- * - Drag and drop interface for arranging widgets
- * - Optional widget resizing
- * - Automatic layout persistence in localStorage
- * - Support for built-in widget positions
- * - Accessibility support
- */
-import { ref, computed, onMounted, watch, nextTick } from "vue";
-import type { IDashboardWidget, DashboardWidgetPosition } from "@shared/components/draggable-dashboard/types";
-import { useDashboard } from "@core/composables/useDashboard";
-import { useGridstack } from "@shared/components/draggable-dashboard/composables/useGridstack";
-import VcContainer from "@ui/components/atoms/vc-container/vc-container.vue";
-import "gridstack/dist/gridstack.min.css";
-
-// Props
-interface Props {
-  /** Show drag handle icons on widgets */
-  showDragHandles?: boolean;
-  /** Enable widget resizing */
-  resizable?: boolean;
-  /** Aria label for the dashboard container */
-  ariaLabel?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showDragHandles: false,
-  resizable: false,
-  ariaLabel: "Dashboard widgets. Drag widgets to rearrange.",
-});
-
-// Refs
-const gridRef = ref<HTMLElement | null>(null);
-const liveAnnouncement = ref("");
-
-// Dashboard service
-const dashboard = useDashboard();
-const widgets = computed(() => dashboard.getWidgets() as IDashboardWidget[]);
-
-// Gridstack integration
-const {
-  layout,
-  isInitialized,
-  initGrid,
-  saveLayout,
-  resetToDefaults,
-} = useGridstack(widgets, {
-  resizable: props.resizable,
-  autoSave: true,
-  gridOptions: {
-    draggable: {
-      handle: props.showDragHandles
-        ? ".vc-gridstack-dashboard__drag-handle"
-        : ".grid-stack-item-content",
-    },
-  },
-  onLayoutChange: (newLayout) => {
-    // Sync with dashboard service
-    for (const [widgetId, position] of newLayout) {
-      dashboard.updateWidgetPosition(widgetId, position);
-    }
-    announceToScreenReader("Widget positions updated");
-  },
-});
-
-// Helper to get widget position
-const getPosition = (widgetId: string): DashboardWidgetPosition | undefined => {
-  return layout.value.get(widgetId);
-};
-
-// Accessibility helpers
-const getWidgetAriaLabel = (widget: IDashboardWidget, index: number): string => {
-  const name = widget.name || widget.id;
-  return `${name}, widget ${index + 1} of ${widgets.value.length}. Drag to reorder.`;
-};
-
-const announceToScreenReader = (message: string): void => {
-  liveAnnouncement.value = message;
-  setTimeout(() => {
-    liveAnnouncement.value = "";
-  }, 1000);
-};
-
-// Initialize grid on mount
-onMounted(async () => {
-  await nextTick();
-  if (gridRef.value && !isInitialized.value) {
-    initGrid(gridRef.value);
-  }
-});
-
-// Public methods
-const rearrangeWidgets = (): void => {
-  resetToDefaults();
-};
-
-const recalculateLayout = (): void => {
-  // Gridstack handles this automatically
-};
-
-const useBuiltInPositions = (): boolean => {
-  resetToDefaults();
-  return true;
-};
-
-// Expose public methods
-defineExpose({
-  rearrangeWidgets,
-  recalculateLayout,
-  saveLayout,
-  useBuiltInPositions,
-});
-</script>
-
-<style lang="scss">
-@import "gridstack/dist/gridstack.min.css";
-
-:root {
-  --gridstack-dashboard-background: var(--additional-50);
-  --gridstack-widget-background: var(--additional-50);
-  --gridstack-widget-border-radius: 8px;
-  --gridstack-widget-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  --gridstack-widget-shadow-dragging: 0 8px 24px rgba(0, 0, 0, 0.15);
-  --gridstack-placeholder-background: rgba(59, 130, 246, 0.1);
-  --gridstack-placeholder-border: rgba(59, 130, 246, 0.5);
-  --gridstack-drag-handle-color: var(--neutrals-400);
-  --gridstack-drag-handle-color-hover: var(--neutrals-600);
-}
-
-.vc-gridstack-dashboard {
-  background-color: var(--gridstack-dashboard-background);
-  min-height: 100%;
-
-  &__grid {
-    padding: 24px 18px;
-    min-height: calc(80px * 8 + 24px * 2); // 8 rows minimum
-  }
-
-  // Widget item styling
-  .grid-stack-item {
-    &-content {
-      background: var(--gridstack-widget-background);
-      border-radius: var(--gridstack-widget-border-radius);
-      box-shadow: var(--gridstack-widget-shadow);
-      overflow: hidden;
-      // Note: Don't set height: 100% - Gridstack uses position: absolute with inset for margins
-      transition: box-shadow 0.2s ease;
-    }
-
-    // Dragging state
-    &.ui-draggable-dragging {
-      .grid-stack-item-content {
-        box-shadow: var(--gridstack-widget-shadow-dragging);
-      }
-    }
-
-    // Resizing state
-    &.ui-resizable-resizing {
-      .grid-stack-item-content {
-        box-shadow: var(--gridstack-widget-shadow-dragging);
-      }
-    }
-  }
-
-  // Placeholder styling
-  .grid-stack-placeholder {
-    > .placeholder-content {
-      background: var(--gridstack-placeholder-background);
-      border: 2px dashed var(--gridstack-placeholder-border);
-      border-radius: var(--gridstack-widget-border-radius);
-    }
-  }
-
-  // Drag handle
-  &__drag-handle {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 10;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--gridstack-drag-handle-color);
-    cursor: grab;
-    border-radius: 4px;
-    transition: color 0.15s ease, background-color 0.15s ease;
-
-    &:hover {
-      color: var(--gridstack-drag-handle-color-hover);
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  // Widget content
-  &__widget-content {
-    width: 100%;
-    height: 100%;
-  }
-
-  // Screen reader only
-  &__live-region {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-}
-
-// Respect reduced motion preference
-@media (prefers-reduced-motion: reduce) {
-  .vc-gridstack-dashboard {
-    .grid-stack-item {
-      transition: none !important;
-
-      &-content {
-        transition: none !important;
-      }
-    }
-  }
-
-  .grid-stack {
-    &.grid-stack-animate {
-      .grid-stack-item {
-        transition: none !important;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,380 +0,0 @@
-/**
- * Gridstack Integration Composable
- *
- * Provides Vue 3 integration with Gridstack.js library.
- * Handles initialization, event binding, and cleanup.
- */
-
-import { ref, shallowRef, onUnmounted, watch, nextTick, type Ref, type ShallowRef } from "vue";
-import { GridStack, type GridStackOptions, type GridStackNode } from "gridstack";
-import type { IDashboardWidget, DashboardWidgetPosition } from "@shared/components/draggable-dashboard/types";
-import {
-  toGridstackWidget,
-  fromGridstackNode,
-  loadLayoutFromStorage,
-  saveLayoutToStorage,
-  mergeLayoutWithWidgets,
-} from "@shared/components/draggable-dashboard/composables/useGridstackAdapter";
-
-/**
- * Default Gridstack configuration
- */
-const DEFAULT_OPTIONS: GridStackOptions = {
-  column: 12,
-  cellHeight: 80,
-  margin: "10px",
-  float: false,
-  animate: true,
-  // Disable responsive column changes - always use 12 columns
-  columnOpts: {
-    breakpoints: [{ w: 0, c: 12 }], // Always 12 columns regardless of width
-  },
-  draggable: {
-    handle: ".grid-stack-item-content",
-  },
-  resizable: {
-    handles: "se", // Only bottom-right corner
-  },
-};
-
-/**
- * Options for useGridstack composable
- */
-export interface UseGridstackOptions {
-  /** Gridstack configuration options */
-  gridOptions?: Partial<GridStackOptions>;
-  /** Enable widget resizing */
-  resizable?: boolean;
-  /** Auto-save layout to localStorage */
-  autoSave?: boolean;
-  /** Callback when layout changes */
-  onLayoutChange?: (layout: Map<string, DashboardWidgetPosition>) => void;
-}
-
-/**
- * Return type for useGridstack composable
- */
-export interface UseGridstackReturn {
-  /** Reference to GridStack instance */
-  grid: ShallowRef<GridStack | null>;
-  /** Current layout map */
-  layout: Ref<Map<string, DashboardWidgetPosition>>;
-  /** Whether grid is initialized */
-  isInitialized: Ref<boolean>;
-  /** Initialize grid on element */
-  initGrid: (element: HTMLElement) => void;
-  /** Destroy grid instance */
-  destroyGrid: () => void;
-  /** Add a widget to the grid */
-  addWidget: (widget: IDashboardWidget) => void;
-  /** Remove a widget from the grid */
-  removeWidget: (widgetId: string) => void;
-  /** Update widget position */
-  updateWidgetPosition: (widgetId: string, position: DashboardWidgetPosition) => void;
-  /** Save current layout */
-  saveLayout: () => void;
-  /** Load layout from storage */
-  loadLayout: () => void;
-  /** Reset to built-in positions */
-  resetToDefaults: () => void;
-  /** Batch update mode (disable animations) */
-  batchUpdate: (fn: () => void) => void;
-}
-
-/**
- * Vue 3 composable for Gridstack integration
- */
-export function useGridstack(
-  widgets: Ref<IDashboardWidget[]>,
-  options: UseGridstackOptions = {},
-): UseGridstackReturn {
-  const {
-    gridOptions = {},
-    resizable = false,
-    autoSave = true,
-    onLayoutChange,
-  } = options;
-
-  // State
-  const grid = shallowRef<GridStack | null>(null);
-  const layout = ref<Map<string, DashboardWidgetPosition>>(new Map());
-  const isInitialized = ref(false);
-  const isUpdating = ref(false);
-
-  /**
-   * Merge options with defaults
-   */
-  const mergedOptions: GridStackOptions = {
-    ...DEFAULT_OPTIONS,
-    ...gridOptions,
-    disableResize: !resizable,
-  };
-
-  /**
-   * Initialize the grid on a DOM element
-   */
-  const initGrid = (element: HTMLElement): void => {
-    if (grid.value) {
-      console.warn("[useGridstack] Grid already initialized");
-      return;
-    }
-
-    // Load saved layout
-    const savedLayout = loadLayoutFromStorage();
-    layout.value = mergeLayoutWithWidgets(widgets.value, savedLayout);
-
-    // Initialize Gridstack
-    grid.value = GridStack.init(mergedOptions, element);
-
-    // Bind event handlers
-    grid.value.on("change", handleChange);
-    grid.value.on("added", handleAdded);
-    grid.value.on("removed", handleRemoved);
-
-    // Explicitly load widgets with their positions to ensure proper layout
-    // This is needed because Vue renders DOM after Gridstack.init() processes children
-    const widgetData = widgets.value.map((widget) => {
-      const position = layout.value.get(widget.id);
-      return toGridstackWidget(widget, position);
-    });
-
-    // Use load() to apply positions - this updates existing items
-    grid.value.load(widgetData);
-
-    isInitialized.value = true;
-  };
-
-  /**
-   * Handle grid change events (drag/resize)
-   */
-  const handleChange = (_event: Event, nodes: GridStackNode[]): void => {
-    if (isUpdating.value) return;
-
-    for (const node of nodes) {
-      const { id, position } = fromGridstackNode(node);
-      if (id) {
-        layout.value.set(id, position);
-      }
-    }
-
-    // Trigger reactivity
-    layout.value = new Map(layout.value);
-
-    // Notify callback
-    onLayoutChange?.(layout.value);
-
-    // Auto-save
-    if (autoSave) {
-      saveLayout();
-    }
-  };
-
-  /**
-   * Handle widget added event
-   */
-  const handleAdded = (_event: Event, nodes: GridStackNode[]): void => {
-    for (const node of nodes) {
-      const { id, position } = fromGridstackNode(node);
-      if (id && !layout.value.has(id)) {
-        layout.value.set(id, position);
-      }
-    }
-    layout.value = new Map(layout.value);
-  };
-
-  /**
-   * Handle widget removed event
-   */
-  const handleRemoved = (_event: Event, nodes: GridStackNode[]): void => {
-    for (const node of nodes) {
-      if (node.id) {
-        layout.value.delete(node.id);
-      }
-    }
-    layout.value = new Map(layout.value);
-  };
-
-  /**
-   * Destroy the grid instance
-   */
-  const destroyGrid = (): void => {
-    if (grid.value) {
-      grid.value.off("change");
-      grid.value.off("added");
-      grid.value.off("removed");
-      grid.value.destroy(false); // false = don't remove DOM elements
-      grid.value = null;
-      isInitialized.value = false;
-    }
-  };
-
-  /**
-   * Add a widget to the grid
-   */
-  const addWidget = (widget: IDashboardWidget): void => {
-    if (!grid.value) return;
-
-    const position = layout.value.get(widget.id) ?? widget.position;
-    const gsWidget = toGridstackWidget(widget, position);
-
-    // Find the DOM element for this widget
-    const element = document.querySelector(`[gs-id="${widget.id}"]`);
-    if (element) {
-      grid.value.makeWidget(element as HTMLElement, gsWidget);
-    }
-  };
-
-  /**
-   * Remove a widget from the grid
-   */
-  const removeWidget = (widgetId: string): void => {
-    if (!grid.value) return;
-
-    const element = document.querySelector(`[gs-id="${widgetId}"]`);
-    if (element) {
-      grid.value.removeWidget(element as HTMLElement, false);
-    }
-    layout.value.delete(widgetId);
-  };
-
-  /**
-   * Update widget position programmatically
-   */
-  const updateWidgetPosition = (widgetId: string, position: DashboardWidgetPosition): void => {
-    if (!grid.value) return;
-
-    const element = document.querySelector(`[gs-id="${widgetId}"]`);
-    if (element) {
-      isUpdating.value = true;
-      grid.value.update(element as HTMLElement, { x: position.x, y: position.y });
-      layout.value.set(widgetId, position);
-      layout.value = new Map(layout.value);
-      isUpdating.value = false;
-    }
-  };
-
-  /**
-   * Save current layout to localStorage
-   */
-  const saveLayout = (): void => {
-    saveLayoutToStorage(widgets.value, layout.value);
-  };
-
-  /**
-   * Load layout from localStorage
-   */
-  const loadLayout = (): void => {
-    const savedLayout = loadLayoutFromStorage();
-    if (savedLayout) {
-      layout.value = mergeLayoutWithWidgets(widgets.value, savedLayout);
-      applyLayoutToGrid();
-    }
-  };
-
-  /**
-   * Reset to built-in widget positions
-   */
-  const resetToDefaults = (): void => {
-    layout.value = new Map();
-    for (const widget of widgets.value) {
-      if (widget.position) {
-        layout.value.set(widget.id, { ...widget.position });
-      }
-    }
-    applyLayoutToGrid();
-    saveLayout();
-  };
-
-  /**
-   * Apply current layout to grid
-   */
-  const applyLayoutToGrid = (): void => {
-    if (!grid.value) return;
-
-    isUpdating.value = true;
-    grid.value.batchUpdate();
-
-    for (const widget of widgets.value) {
-      const position = layout.value.get(widget.id);
-      if (position) {
-        const element = document.querySelector(`[gs-id="${widget.id}"]`);
-        if (element) {
-          grid.value.update(element as HTMLElement, {
-            x: position.x,
-            y: position.y,
-          });
-        }
-      }
-    }
-
-    grid.value.batchUpdate(false);
-    isUpdating.value = false;
-  };
-
-  /**
-   * Execute function in batch update mode
-   */
-  const batchUpdate = (fn: () => void): void => {
-    if (!grid.value) {
-      fn();
-      return;
-    }
-
-    isUpdating.value = true;
-    grid.value.batchUpdate();
-    fn();
-    grid.value.batchUpdate(false);
-    isUpdating.value = false;
-  };
-
-  // Watch for widget changes
-  watch(
-    widgets,
-    async (newWidgets, oldWidgets) => {
-      if (!grid.value || !isInitialized.value) return;
-
-      await nextTick();
-
-      // Find added widgets
-      const addedWidgets = newWidgets.filter(
-        (w) => !oldWidgets?.some((ow) => ow.id === w.id),
-      );
-
-      // Find removed widgets
-      const removedWidgetIds = oldWidgets
-        ?.filter((w) => !newWidgets.some((nw) => nw.id === w.id))
-        .map((w) => w.id) ?? [];
-
-      // Remove old widgets
-      for (const id of removedWidgetIds) {
-        removeWidget(id);
-      }
-
-      // Add new widgets
-      for (const widget of addedWidgets) {
-        addWidget(widget);
-      }
-    },
-    { deep: false },
-  );
-
-  // Cleanup on unmount
-  onUnmounted(() => {
-    destroyGrid();
-  });
-
-  return {
-    grid,
-    layout,
-    isInitialized,
-    initGrid,
-    destroyGrid,
-    addWidget,
-    removeWidget,
-    updateWidgetPosition,
-    saveLayout,
-    loadLayout,
-    resetToDefaults,
-    batchUpdate,
-  };
-}