@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -0,0 +1,245 @@
+/**
+ * Gridstack Type Adapter
+ *
+ * Converts between our IDashboardWidget types and Gridstack's GridStackWidget types.
+ * Handles localStorage format migration for backwards compatibility.
+ */
+
+import type { GridStackWidget, GridStackNode } from "gridstack";
+import type { IDashboardWidget, DashboardWidgetPosition, DashboardWidgetSize } from "../types";
+
+/**
+ * LocalStorage key for layout persistence
+ */
+export const LAYOUT_STORAGE_KEY = "vc-dashboard-layout";
+
+/**
+ * Old localStorage format (Map serialized as object)
+ */
+interface LegacyLayoutFormat {
+  [widgetId: string]: DashboardWidgetPosition;
+}
+
+/**
+ * Converts our widget type to Gridstack widget format
+ */
+export function toGridstackWidget(
+  widget: IDashboardWidget,
+  position?: DashboardWidgetPosition,
+): GridStackWidget {
+  const pos = position ?? widget.position;
+  return {
+    id: widget.id,
+    x: pos?.x ?? 0,
+    y: pos?.y ?? 0,
+    w: widget.size.width,
+    h: widget.size.height,
+    minW: 2,
+    minH: 2,
+  };
+}
+
+/**
+ * Extracts position from Gridstack node
+ */
+export function fromGridstackNode(node: GridStackNode): {
+  id: string;
+  position: DashboardWidgetPosition;
+  size: DashboardWidgetSize;
+} {
+  return {
+    id: node.id ?? "",
+    position: {
+      x: node.x ?? 0,
+      y: node.y ?? 0,
+    },
+    size: {
+      width: node.w ?? 1,
+      height: node.h ?? 1,
+    },
+  };
+}
+
+/**
+ * Converts Gridstack nodes array to our layout Map format
+ */
+export function gridstackNodesToLayoutMap(
+  nodes: GridStackNode[],
+): Map<string, DashboardWidgetPosition> {
+  const layout = new Map<string, DashboardWidgetPosition>();
+
+  for (const node of nodes) {
+    if (node.id) {
+      layout.set(node.id, {
+        x: node.x ?? 0,
+        y: node.y ?? 0,
+      });
+    }
+  }
+
+  return layout;
+}
+
+/**
+ * Loads layout from localStorage with legacy format support
+ */
+export function loadLayoutFromStorage(): Map<string, DashboardWidgetPosition> | null {
+  try {
+    const stored = localStorage.getItem(LAYOUT_STORAGE_KEY);
+    if (!stored) return null;
+
+    const parsed = JSON.parse(stored);
+
+    // Check if it's the new Gridstack array format
+    if (Array.isArray(parsed)) {
+      return gridstackNodesToLayoutMap(parsed as GridStackNode[]);
+    }
+
+    // Legacy format: object with widget IDs as keys
+    if (typeof parsed === "object" && parsed !== null) {
+      const layout = new Map<string, DashboardWidgetPosition>();
+      for (const [id, pos] of Object.entries(parsed as LegacyLayoutFormat)) {
+        if (pos && typeof pos.x === "number" && typeof pos.y === "number") {
+          layout.set(id, { x: pos.x, y: pos.y });
+        }
+      }
+      return layout;
+    }
+
+    return null;
+  } catch (error) {
+    console.warn("[GridstackAdapter] Failed to load layout from storage:", error);
+    return null;
+  }
+}
+
+/**
+ * Saves layout to localStorage in Gridstack format
+ */
+export function saveLayoutToStorage(
+  widgets: IDashboardWidget[],
+  layout: Map<string, DashboardWidgetPosition>,
+): void {
+  try {
+    const gridstackFormat: GridStackWidget[] = widgets.map((widget) => {
+      const pos = layout.get(widget.id);
+      return {
+        id: widget.id,
+        x: pos?.x ?? widget.position?.x ?? 0,
+        y: pos?.y ?? widget.position?.y ?? 0,
+        w: widget.size.width,
+        h: widget.size.height,
+      };
+    });
+
+    localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(gridstackFormat));
+  } catch (error) {
+    console.warn("[GridstackAdapter] Failed to save layout to storage:", error);
+  }
+}
+
+/**
+ * Clears layout from localStorage
+ */
+export function clearLayoutStorage(): void {
+  try {
+    localStorage.removeItem(LAYOUT_STORAGE_KEY);
+  } catch (error) {
+    console.warn("[GridstackAdapter] Failed to clear layout storage:", error);
+  }
+}
+
+/**
+ * Auto-arrange widgets in a grid layout
+ * Places widgets side by side when possible, wrapping to next row
+ */
+function autoArrangeWidgets(
+  widgets: IDashboardWidget[],
+  columns: number = 12,
+): Map<string, DashboardWidgetPosition> {
+  const layout = new Map<string, DashboardWidgetPosition>();
+
+  // Track occupied cells in each row
+  const rowOccupancy: Map<number, number[]> = new Map();
+
+  const isPositionFree = (x: number, y: number, width: number, height: number): boolean => {
+    for (let row = y; row < y + height; row++) {
+      const occupied = rowOccupancy.get(row) || [];
+      for (let col = x; col < x + width; col++) {
+        if (occupied.includes(col)) return false;
+      }
+    }
+    return true;
+  };
+
+  const occupyPosition = (x: number, y: number, width: number, height: number): void => {
+    for (let row = y; row < y + height; row++) {
+      const occupied = rowOccupancy.get(row) || [];
+      for (let col = x; col < x + width; col++) {
+        occupied.push(col);
+      }
+      rowOccupancy.set(row, occupied);
+    }
+  };
+
+  const findFreePosition = (width: number, height: number): DashboardWidgetPosition => {
+    let y = 0;
+    while (true) {
+      for (let x = 0; x <= columns - width; x++) {
+        if (isPositionFree(x, y, width, height)) {
+          return { x, y };
+        }
+      }
+      y++;
+      // Safety limit
+      if (y > 100) break;
+    }
+    return { x: 0, y };
+  };
+
+  for (const widget of widgets) {
+    const position = findFreePosition(widget.size.width, widget.size.height);
+    layout.set(widget.id, position);
+    occupyPosition(position.x, position.y, widget.size.width, widget.size.height);
+  }
+
+  return layout;
+}
+
+/**
+ * Merges saved layout with widget defaults
+ * Handles cases where widgets have been added/removed
+ * Auto-arranges widgets that don't have positions
+ */
+export function mergeLayoutWithWidgets(
+  widgets: IDashboardWidget[],
+  savedLayout: Map<string, DashboardWidgetPosition> | null,
+): Map<string, DashboardWidgetPosition> {
+  // If we have a saved layout with positions, use it
+  if (savedLayout && savedLayout.size > 0) {
+    const layout = new Map<string, DashboardWidgetPosition>();
+
+    for (const widget of widgets) {
+      const savedPos = savedLayout.get(widget.id);
+      const builtInPos = widget.position;
+      const position = savedPos ?? builtInPos ?? { x: 0, y: 0 };
+      layout.set(widget.id, position);
+    }
+
+    return layout;
+  }
+
+  // Check if all widgets have built-in positions
+  const allHavePositions = widgets.every((w) => w.position !== undefined);
+
+  if (allHavePositions) {
+    const layout = new Map<string, DashboardWidgetPosition>();
+    for (const widget of widgets) {
+      layout.set(widget.id, widget.position!);
+    }
+    return layout;
+  }
+
+  // Auto-arrange widgets
+  return autoArrangeWidgets(widgets);
+}

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

@@ -1 +1,34 @@
+// Main component
 export { default as DraggableDashboard } from "./DraggableDashboard.vue";
+
+// Types
+export type {
+  IDashboardWidget,
+  DashboardWidgetPosition,
+  DashboardWidgetSize,
+  DashboardDragEvent,
+  DashboardGridConfig,
+} from "./types";
+
+// Gridstack composables (for advanced usage)
+export { useGridstack } from "./composables/useGridstack";
+export type { UseGridstackOptions, UseGridstackReturn } from "./composables/useGridstack";
+
+// Import and re-export to avoid Storybook docgen issues with direct re-exports
+import {
+  toGridstackWidget as _toGridstackWidget,
+  fromGridstackNode as _fromGridstackNode,
+  loadLayoutFromStorage as _loadLayoutFromStorage,
+  saveLayoutToStorage as _saveLayoutToStorage,
+  mergeLayoutWithWidgets as _mergeLayoutWithWidgets,
+  clearLayoutStorage as _clearLayoutStorage,
+  LAYOUT_STORAGE_KEY as _LAYOUT_STORAGE_KEY,
+} from "./composables/useGridstackAdapter";
+
+export const toGridstackWidget = _toGridstackWidget;
+export const fromGridstackNode = _fromGridstackNode;
+export const loadLayoutFromStorage = _loadLayoutFromStorage;
+export const saveLayoutToStorage = _saveLayoutToStorage;
+export const mergeLayoutWithWidgets = _mergeLayoutWithWidgets;
+export const clearLayoutStorage = _clearLayoutStorage;
+export const LAYOUT_STORAGE_KEY = _LAYOUT_STORAGE_KEY;

package/shared/components/generic-dropdown/generic-dropdown.vue

@@ -1,84 +1,68 @@
 <template>
-  <div class="vc-dropdown">
-    <div
+  <VcDropdown
+    :model-value="props.opened && !props.disabled"
+    :items="props.items"
+    :empty-text="props.emptyText"
+    :item-text="props.itemText"
+    :is-item-active="props.isItemActive"
+    :floating="props.floating"
+    :placement="props.placement"
+    :variant="props.variant"
+    :offset="props.offset"
+    :max-height="props.maxHeight"
+    @item-click="onItemClick"
+    @update:model-value="onUpdateOpened"
+  >
+    <template
       v-if="$slots.trigger"
-      ref="referenceEl"
-      class="vc-dropdown__trigger"
+      #trigger="{ isActive, toggle, open, close }"
     >
       <slot
         name="trigger"
-        :is-active="opened"
-      ></slot>
-    </div>
-
-    <teleport
-      to=".vc-app"
-      defer
-      :disabled="!floating"
+        :is-active="isActive"
+        :toggle="toggle"
+        :open="open"
+        :close="close"
+      />
+    </template>
+
+    <template
+      v-if="$slots['items-container']"
+      #items-container="{ items: slotItems, close }"
+    >
+      <slot
+        name="items-container"
+        :items="slotItems"
+        :close="close"
+      />
+    </template>
+
+    <template
+      v-if="$slots.item"
+      #item="{ item, click }"
+    >
+      <slot
+        name="item"
+        :item="item"
+        :click="click"
+      />
+    </template>
+
+    <template
+      v-if="$slots.empty"
+      #empty
     >
-      <div
-        v-if="opened"
-        ref="floatingEl"
-        v-on-click-outside="[() => $emit('update:opened', false), { ignore: [referenceEl] }]"
-        class="vc-dropdown__dropdown"
-        :style="{
-          maxHeight: calcHeight,
-          ...floatingStyle,
-        }"
-        :class="dropdownClasses"
-      >
-        <div class="vc-dropdown__content">
-          <slot
-            name="items-container"
-            :items="items"
-            :close="() => $emit('update:opened', false)"
-          >
-            <div
-              v-if="items && items.length"
-              class="vc-dropdown__items-container"
-            >
-              <div
-                v-for="(item, index) in items"
-                :key="index"
-                class="vc-dropdown__item"
-                :class="{
-                  'vc-dropdown__item--mobile': $isMobile.value,
-                  'vc-dropdown__item--active': isItemActive?.(item),
-                }"
-                @click="() => $emit('item-click', item)"
-              >
-                <slot
-                  name="item"
-                  :item="item"
-                  :click="() => $emit('item-click', item)"
-                >
-                  {{ itemText?.(item) }}
-                </slot>
-              </div>
-            </div>
-            <div
-              v-else
-              class="vc-dropdown__empty"
-            >
-              <slot name="empty">
-                {{ emptyText }}
-              </slot>
-            </div>
-          </slot>
-        </div>
-      </div>
-    </teleport>
-  </div>
+      <slot name="empty" />
+    </template>
+  </VcDropdown>
 </template>
 
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T">
-import { ref, computed, Ref, inject } from "vue";
-import { useFloating, shift, autoUpdate, offset as floatingOffset, flip } from "@floating-ui/vue";
-import { vOnClickOutside } from "@vueuse/components";
+import { VcDropdown } from "../../../ui/components";
 
 export interface Props<T> {
   opened?: boolean;
+  disabled?: boolean;
   items: T[];
   emptyText?: string;
   itemText?: (item: T) => string;
@@ -95,6 +79,7 @@ export interface Props<T> {
 
 const props = withDefaults(defineProps<Props<T>>(), {
   opened: false,
+  disabled: false,
   items: () => [],
   floating: false,
   placement: "bottom",
@@ -106,147 +91,32 @@ const props = withDefaults(defineProps<Props<T>>(), {
   }),
 });
 
-defineEmits<{
-  (e: "item-click", item: T): void;
-  (e: "update:opened", opened: boolean): void;
+const emit = defineEmits<{
+  (event: "item-click", item: T): void;
+  (event: "update:opened", opened: boolean): void;
 }>();
 
 defineSlots<{
-  item?: (args: { item: T; click: () => void }) => any;
-  empty?: () => any;
-  trigger?: (args: { isActive: boolean }) => any;
-  "items-container"?: (args: { items: T[]; close: () => void }) => any;
+  item?: (args: { item: T; click: () => void }) => unknown;
+  empty?: () => unknown;
+  trigger?: (args: { isActive: boolean; toggle: () => void; open: () => void; close: () => void }) => unknown;
+  "items-container"?: (args: { items: T[]; close: () => void }) => unknown;
 }>();
 
-const isMobile = inject<Ref<boolean>>("isMobile", ref(false));
-
-const referenceEl = ref<HTMLElement | null>(null);
-const floatingEl = ref<HTMLElement | null>(null);
-
-const { floatingStyles, placement, update, x, y } = useFloating(referenceEl, floatingEl, {
-  placement: props.placement,
-  whileElementsMounted: props.floating ? autoUpdate : undefined,
-  middleware: [shift({ padding: 8 }), flip({ padding: 8 }), floatingOffset(props.offset)],
-});
-
-const floater = {
-  placement,
-  x,
-  y,
-};
-
-const dropdownClasses = computed(() => {
-  const placement = floater.placement.value;
-  return [
-    {
-      "vc-dropdown__dropdown--mobile": isMobile.value,
-      "vc-dropdown__dropdown--floating": props.floating,
-    },
-    `vc-dropdown__dropdown--${props.variant}`,
-    `vc-dropdown__dropdown--${placement}`,
-  ];
-});
-
-const floatingStyle = computed(() => {
-  if (!props.floating) return {};
-
-  return {
-    position: "absolute" as const,
-    top: `${floater.y.value ?? 0}px`,
-    left: `${floater.x.value ?? 0}px`,
-    zIndex: 10000,
-    width: "max-content",
-  };
-});
-
-const calcHeight = computed(() => {
-  if (!props.maxHeight) return "";
-  return typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
-});
-</script>
-
-<style lang="scss">
-:root {
-  --dropdown-bg-color: var(--neutrals-50);
-  --dropdown-text-color: var(--neutrals-950);
-  --dropdown-border-color: var(--app-bar-divider-color);
-  --dropdown-hover-bg-color: var(--primary-50);
-  --dropdown-divider-color: var(--neutrals-200);
-  --dropdown-divider-item-color: var(--neutrals-100);
-
-  --dropdown-bg-color-light: var(--additional-50);
-  --dropdown-divider-item-color-light: var(--neutrals-200);
-}
-
-.vc-dropdown {
-  @apply tw-relative tw-flex tw-w-full tw-h-full;
-
-  &__trigger {
-    @apply tw-flex tw-items-center tw-justify-center;
-  }
-
-  &__dropdown {
-    @apply tw-rounded-[6px] tw-w-full tw-overflow-auto tw-flex tw-flex-col tw-relative;
-
-    &--mobile {
-      @apply tw-w-full;
-      display: flex !important;
-    }
-
-    &--floating {
-      box-shadow:
-        0px 2px 10px 0px rgb(0 0 0 / 0.1),
-        0px 14px 25px -5px rgb(0 0 0 / 0.1);
-    }
-
-    &--secondary {
-      @apply tw-bg-[color:var(--dropdown-bg-color-light)];
-
-      .vc-dropdown__item {
-        @apply tw-border-b-[color:var(--dropdown-divider-item-color-light)];
-      }
-    }
-
-    &--default {
-      @apply tw-bg-[color:var(--dropdown-bg-color)];
-      .vc-dropdown__item {
-        @apply tw-border-b-[color:var(--dropdown-divider-item-color)];
-      }
-    }
+function onUpdateOpened(value: boolean) {
+  if (props.disabled) {
+    emit("update:opened", false);
+    return;
   }
 
-  &__content {
-    @apply tw-w-full tw-h-full;
-  }
-
-  &__items-container {
-    @apply tw-overflow-y-auto;
-    // max-height: v-bind('typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight');
-  }
-
-  &__item {
-    @apply tw-truncate tw-flex tw-items-center tw-text-sm tw-text-[color:var(--dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b;
-    transition: background-color 0.2s;
-
-    &:last-of-type {
-      @apply tw-border-b-0;
-    }
-
-    &:hover {
-      background-color: var(--dropdown-hover-bg-color);
-    }
-
-    &--active {
-      @apply tw-bg-[color:var(--dropdown-hover-bg-color)];
-    }
+  emit("update:opened", value);
+}
 
-    &--mobile:not(:last-of-type) {
-      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--dropdown-divider-color)];
-    }
+function onItemClick(item: T) {
+  if (props.disabled) {
+    return;
   }
 
-  &__empty {
-    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
-  }
+  emit("item-click", item);
 }
-</style>
+</script>

package/shared/components/generic-dropdown/index.ts

@@ -1 +1,7 @@
-export { default as GenericDropdown } from "./generic-dropdown.vue";
+import GenericDropdownComponent from "./generic-dropdown.vue";
+
+/**
+ * @deprecated Use `VcDropdown` from `framework/ui/components` instead.
+ * This wrapper is kept for backward compatibility and may be removed in a future release.
+ */
+export const GenericDropdown = GenericDropdownComponent;

package/shared/components/index.ts

@@ -8,11 +8,17 @@ export * from "./language-selector";
 export * from "./user-dropdown-button";
 export * from "./notification-dropdown";
 export * from "./notification-template";
-export * from "./sidebar";
+/**
+ * @deprecated Use `VcSidebar` from `framework/ui/components` instead.
+ */
+export { Sidebar } from "./sidebar";
 export * from "./theme-selector";
 export * from "./sign-in";
 export * from "./settings-menu-item";
-export * from "./generic-dropdown";
+/**
+ * @deprecated Use `VcDropdown` from `framework/ui/components` instead.
+ */
+export { GenericDropdown } from "./generic-dropdown";
 export * from "./draggable-dashboard";
 export * from "./dashboard-widget-card";
 export * from "./multilanguage-selector";

package/shared/components/language-selector/language-selector.vue

@@ -20,8 +20,8 @@
     </template>
 
     <template #content>
-      <GenericDropdown
-        :opened="opened"
+      <VcDropdown
+        :model-value="opened"
         :items="languageItems"
         :is-item-active="(lang) => lang.lang === currentLocale"
         @item-click="handleLanguageSelect"
@@ -39,7 +39,7 @@
             <span class="vc-language-selector__item-title">{{ lang.title }}</span>
           </div>
         </template>
-      </GenericDropdown>
+      </VcDropdown>
     </template>
   </SettingsMenuItem>
 </template>
@@ -47,10 +47,9 @@
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import { useLanguages } from "../../../core/composables";
-import { GenericDropdown } from "../generic-dropdown";
 import { watch, ref } from "vue";
 import { SettingsMenuItem } from "../settings-menu-item";
-import { VcImage } from "../../../ui/components";
+import { VcDropdown, VcImage } from "../../../ui/components";
 
 interface ILanguage {
   lang: string;