@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/ui/components/organisms/vc-table/composables/useTableRowReorder.ts

@@ -0,0 +1,175 @@
+import { computed, ref, Ref } from "vue";
+import { TableItem } from "../vc-table.vue";
+
+export function useTableRowReorder<T extends TableItem | string>(
+  items: Ref<T[]>,
+  onReorder: (args: { dragIndex: number; dropIndex: number; value: T[] }) => void,
+) {
+  const internalItems = computed(() => items.value);
+  const draggedRow = ref<number>();
+  const rowDragged = ref(false);
+  const droppedRowIndex = ref<number>();
+  const draggedRowIndex = ref<number>();
+  const ghostRef = ref<HTMLElement | null>(null);
+  const dragOffset = ref({ x: 0, y: 0 });
+
+  function reorderArray(value: unknown[], from: number, to: number) {
+    if (value && from !== to) {
+      if (to >= value.length) {
+        to %= value.length;
+        from %= value.length;
+      }
+
+      value.splice(to, 0, value.splice(from, 1)[0]);
+    }
+  }
+
+  function onRowMouseDown(event: MouseEvent) {
+    if (event.currentTarget instanceof HTMLElement) {
+      const row = event.currentTarget;
+      console.log("row", row);
+      const rowRect = row.getBoundingClientRect();
+
+      dragOffset.value = {
+        x: event.clientX - rowRect.left,
+        y: event.clientY - rowRect.top,
+      };
+
+      const ghost = row.cloneNode(true) as HTMLElement;
+      ghost.style.width = `${row.offsetWidth}px`;
+      ghost.style.height = `${row.offsetHeight}px`;
+      ghost.style.position = "fixed";
+      ghost.style.pointerEvents = "none";
+      ghost.style.zIndex = "9999";
+      ghost.style.opacity = "0.8";
+      ghost.style.background = "var(--table-row-bg-odd)";
+      ghost.style.display = "none";
+      ghost.classList.add("vc-table-row__ghost-row");
+
+      document.body.appendChild(ghost);
+      ghostRef.value = ghost;
+
+      row.draggable = true;
+    }
+  }
+
+  function onRowDragStart(event: DragEvent, item: T) {
+    console.log("onRowDragStart", event, item);
+    rowDragged.value = true;
+    const index = internalItems.value.indexOf(item);
+    draggedRow.value = index;
+    draggedRowIndex.value = index;
+
+    if (event.dataTransfer) {
+      event.dataTransfer.setData("text", "row-reorder");
+      event.dataTransfer.effectAllowed = "move";
+
+      const emptyImg = document.createElement("div");
+      emptyImg.style.display = "none";
+      document.body.appendChild(emptyImg);
+      event.dataTransfer.setDragImage(emptyImg, 0, 0);
+      setTimeout(() => {
+        document.body.removeChild(emptyImg);
+      }, 0);
+    }
+  }
+
+  function onRowDragOver(event: DragEvent, item: T) {
+    if (!rowDragged.value || draggedRow.value === undefined) return;
+
+    const currentIndex = internalItems.value.indexOf(item);
+
+    if (currentIndex === draggedRow.value) return;
+
+    const rowElement = event.currentTarget as HTMLElement;
+    const tableBody = rowElement.closest(".vc-table-body");
+
+    if (!tableBody) {
+      if (ghostRef.value) {
+        ghostRef.value.style.display = "none";
+      }
+      return;
+    }
+
+    const rowRect = rowElement.getBoundingClientRect();
+    const tableRect = tableBody.getBoundingClientRect();
+    const mouseY = event.clientY;
+
+    if (ghostRef.value) {
+      ghostRef.value.style.display = "flex";
+      ghostRef.value.style.left = `${tableRect.left}px`;
+      ghostRef.value.style.width = `${tableRect.width}px`;
+      ghostRef.value.style.top = `${Math.max(tableRect.top, Math.min(tableRect.bottom - ghostRef.value.offsetHeight, mouseY - dragOffset.value.y))}px`;
+    }
+
+    const allRows = rowElement.parentElement?.querySelectorAll(".vc-table-row");
+    allRows?.forEach((row) => {
+      row.classList.remove("vc-table-row__drag-row-bottom", "vc-table-row__drag-row-top");
+    });
+
+    const relativeY = mouseY - rowRect.top;
+    const isFirstRow = currentIndex === 0;
+    const isOverUpperThird = relativeY < rowElement.offsetHeight / 3;
+
+    if (isFirstRow && isOverUpperThird) {
+      droppedRowIndex.value = 0;
+      rowElement.classList.add("vc-table-row__drag-row-top");
+    } else {
+      if (relativeY < rowElement.offsetHeight / 2) {
+        droppedRowIndex.value = currentIndex;
+        rowElement.classList.add("vc-table-row__drag-row-top");
+      } else {
+        droppedRowIndex.value = currentIndex + 1;
+        rowElement.classList.add("vc-table-row__drag-row-bottom");
+      }
+    }
+
+    event.preventDefault();
+  }
+
+  function onRowDragLeave(event: DragEvent) {
+    event.preventDefault();
+    const rowElement = event.currentTarget as HTMLElement;
+    rowElement.classList.remove("vc-table-row__drag-row-top", "vc-table-row__drag-row-bottom");
+  }
+
+  function onRowDragEnd(event: DragEvent) {
+    rowDragged.value = false;
+    draggedRow.value = undefined;
+    draggedRowIndex.value = undefined;
+    droppedRowIndex.value = undefined;
+    (event.currentTarget as HTMLElement).draggable = false;
+
+    if (ghostRef.value) {
+      document.body.removeChild(ghostRef.value);
+      ghostRef.value = null;
+    }
+  }
+
+  function onRowDrop(event: DragEvent) {
+    if (droppedRowIndex.value !== undefined && draggedRowIndex.value !== undefined) {
+      const processedItems = [...internalItems.value];
+      reorderArray(processedItems, draggedRowIndex.value, droppedRowIndex.value);
+
+      onReorder({
+        dragIndex: draggedRowIndex.value,
+        dropIndex: droppedRowIndex.value,
+        value: processedItems as T[],
+      });
+    }
+
+    onRowDragLeave(event);
+    onRowDragEnd(event);
+    event.preventDefault();
+  }
+
+  return {
+    draggedRow,
+    onRowMouseDown,
+    onRowDragStart,
+    onRowDragOver,
+    onRowDragLeave,
+    onRowDragEnd,
+    onRowDrop,
+  };
+}

package/ui/components/organisms/vc-table/composables/useTableSelection.ts

@@ -0,0 +1,118 @@
+import { computed, ref, Ref, watch } from "vue";
+import { TableItem } from "../vc-table.vue";
+import * as _ from "lodash-es";
+
+type TableItemType = TableItem | string;
+
+export interface UseTableSelectionOptions<T extends TableItemType> {
+  items: Ref<T[]>;
+  disableItemCheckbox?: (item: T) => boolean;
+  totalCount?: number;
+  onSelectionChanged?: (values: T[]) => void;
+  onSelectAll?: (selected: boolean) => void;
+}
+
+export function useTableSelection<T extends TableItemType>(options: UseTableSelectionOptions<T>) {
+  const { items, disableItemCheckbox, onSelectionChanged, onSelectAll } = options;
+
+  const selection = ref([]) as Ref<T[]>;
+  const allSelected = ref(false);
+  const disabledSelection = ref([]) as Ref<T[]>;
+
+  const headerCheckbox = computed({
+    get() {
+      return items.value && items.value.length
+        ? selection.value.length ===
+            items.value.length -
+              (disabledSelection.value.length !== items.value.length ? disabledSelection.value.length : 0)
+        : false;
+    },
+    set(checked: boolean) {
+      selection.value = checked ? items.value.filter((x) => !disabledSelection.value.includes(x)) : [];
+      allSelected.value = false;
+    },
+  });
+
+  const showSelectionChoice = computed(() => {
+    return selection.value.length === items.value.length && (options.totalCount || 0) > items.value.length;
+  });
+
+  function isSelected(item: T): boolean {
+    return selection.value.some((x) => _.isEqual(x, item));
+  }
+
+  function handleSelectAll(): void {
+    allSelected.value = !allSelected.value;
+
+    if (!allSelected.value) {
+      selection.value = [];
+    }
+
+    onSelectAll?.(allSelected.value);
+  }
+
+  function rowCheckbox(item: T): void {
+    if (disabledSelection.value.includes(item)) {
+      return;
+    }
+
+    const index = selection.value.findIndex((x) => _.isEqual(x, item));
+
+    if (index !== -1) {
+      selection.value = selection.value.filter((_, i) => i !== index);
+    } else {
+      selection.value = [...selection.value, item];
+    }
+  }
+
+  async function handleMultiselect(items: T[]): Promise<void> {
+    if (disableItemCheckbox && typeof disableItemCheckbox === "function") {
+      const disabledMultiselect: T[] = [];
+      for (const item of items) {
+        if (typeof item === "object") {
+          const element = await disableItemCheckbox(item);
+          if (element) {
+            disabledMultiselect.push(item);
+          }
+        }
+      }
+      disabledSelection.value = disabledMultiselect;
+    }
+  }
+
+  watch(
+    () => items.value,
+    (newItems) => {
+      handleMultiselect(newItems);
+      selection.value = selection.value.filter((item) => newItems.includes(item));
+    },
+    { deep: true, immediate: true },
+  );
+
+  watch(
+    () => selection.value,
+    (newSelection) => {
+      onSelectionChanged?.(newSelection);
+    },
+    { deep: true },
+  );
+
+  watch(
+    () => allSelected.value,
+    (newAllSelected) => {
+      onSelectAll?.(newAllSelected);
+    },
+  );
+
+  return {
+    selection,
+    allSelected,
+    disabledSelection,
+    headerCheckbox,
+    showSelectionChoice,
+    isSelected,
+    handleSelectAll,
+    rowCheckbox,
+    handleMultiselect,
+  };
+}

package/ui/components/organisms/vc-table/composables/useTableState.ts

@@ -0,0 +1,230 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ref, Ref, computed, toValue, toRefs, MaybeRef } from "vue";
+import { useLocalStorage } from "@vueuse/core";
+import * as _ from "lodash-es";
+import { TableColPartial } from "../vc-table.vue";
+import { ITableColumns } from "../../../../../core/types";
+
+export interface UseTableStateOptions {
+  stateKey: Ref<string, string>;
+  columnSelector: Ref<
+    "auto" | "defined" | MaybeRef<ITableColumns[]> | (() => ITableColumns[]),
+    "auto" | "defined" | MaybeRef<ITableColumns[]> | (() => ITableColumns[])
+  >;
+  expanded: Ref<boolean, boolean>;
+}
+
+export function useTableState(options: UseTableStateOptions) {
+  const { stateKey, columnSelector, expanded } = toRefs(options);
+
+  const state = useLocalStorage<TableColPartial[]>(`VC_TABLE_STATE_${stateKey.value.toUpperCase()}`, []);
+  const internalColumns = ref<TableColPartial[]>([]) as Ref<TableColPartial[]>;
+  const allColumns = ref<TableColPartial[]>([]) as Ref<TableColPartial[]>;
+  const columnsInit = ref(true);
+
+  const internalColumnsSorted = computed(() => {
+    // alphabetical order
+    return internalColumns.value /* @ts-expect-error  - toSorted is not parsed correctly by ts */
+      .toSorted((a, b) => {
+        if (a && b && a.title && b.title) {
+          return toValue(a.title).localeCompare(toValue(b.title));
+        }
+        return 0;
+      });
+  });
+
+  const filteredCols = computed<TableColPartial[]>(() => {
+    return internalColumns.value.filter((x) => {
+      if (x.visible === false) {
+        return false;
+      }
+      if (!expanded?.value) {
+        return x.alwaysVisible;
+      }
+      return x;
+    });
+  });
+
+  function saveState() {
+    console.debug("[@vc-shell/framework#vc-table.vue] - Save state");
+    const colsClone = _.cloneDeep(internalColumns.value);
+    state.value = colsClone.map((col) => _.pick(col, "id", "visible", "width", "predefined"));
+  }
+
+  function mergeColumns(storedCol: TableColPartial, predefinedCol: TableColPartial | undefined) {
+    if (predefinedCol) {
+      if (predefinedCol.predefined && !storedCol.predefined) {
+        return { ...predefinedCol, predefined: true };
+      } else {
+        return {
+          ...predefinedCol,
+          visible: storedCol.visible,
+          width: storedCol.width,
+          title: predefinedCol.title || storedCol.title || "",
+        };
+      }
+    } else {
+      return { ...storedCol, predefined: false };
+    }
+  }
+
+  function resetRemovedColumns(
+    storedState: TableColPartial[],
+    predefinedMap: Map<string | undefined, TableColPartial>,
+    mergedColumns: TableColPartial[],
+  ) {
+    storedState.forEach((storedCol) => {
+      if (storedCol.predefined && !predefinedMap.has(storedCol.id)) {
+        const existingColumnIndex = mergedColumns.findIndex((col) => col.id === storedCol.id);
+        if (existingColumnIndex !== -1) {
+          mergedColumns[existingColumnIndex] = {
+            ...mergedColumns[existingColumnIndex],
+            visible: false,
+            width: undefined,
+            predefined: false,
+          };
+        }
+      }
+    });
+  }
+
+  function setTitles(mergedColumns: TableColPartial[]) {
+    mergedColumns.forEach((col) => {
+      if (!col.title) {
+        const originalColumn = allColumns.value.find((c) => c.id === col.id);
+        if (originalColumn) {
+          col.title = originalColumn.title;
+        }
+      }
+    });
+  }
+
+  function restoreState(predefinedColumns: TableColPartial[] = []) {
+    const storedState = state.value;
+
+    if (!storedState?.length) {
+      internalColumns.value = allColumns.value;
+      return;
+    }
+
+    const predefinedMap = new Map(predefinedColumns.map((col) => [col.id, col]));
+
+    const validStoredState = storedState.filter((col) => {
+      if (col.predefined) {
+        return predefinedMap.has(col.id);
+      }
+      return true;
+    });
+
+    const mergedColumns: TableColPartial[] = validStoredState.map((storedCol) => {
+      const predefinedCol = predefinedMap.get(storedCol.id);
+      return mergeColumns(storedCol, predefinedCol);
+    });
+
+    // add predefined columns that are not in stored state
+    predefinedColumns.forEach((predefinedCol) => {
+      if (!mergedColumns.find((col) => col.id === predefinedCol.id)) {
+        mergedColumns.push({ ...predefinedCol, visible: true, predefined: true });
+      }
+    });
+
+    // add other columns to mergedColumns from allColumns array without duplicates
+    allColumns.value.forEach((col) => {
+      if (!mergedColumns.find((c) => c.id === col.id)) {
+        mergedColumns.push(col);
+      }
+    });
+
+    resetRemovedColumns(validStoredState, predefinedMap, mergedColumns);
+    setTitles(mergedColumns);
+
+    allColumns.value = [...mergedColumns];
+    internalColumns.value = allColumns.value;
+
+    saveState();
+  }
+
+  function toggleColumn(item: ITableColumns) {
+    // if item is not in internalColumns, add it
+    if (!internalColumns.value.find((x) => x.id === item.id)) {
+      internalColumns.value.push(item);
+    }
+
+    if (item) {
+      internalColumns.value = internalColumns.value.map((x) => {
+        if (x.id === item.id) {
+          x = item;
+        }
+        return x;
+      });
+    }
+
+    saveState();
+  }
+
+  function processColumns(columns: ITableColumns[], predefined: boolean, defaultVisible: boolean) {
+    return columns.map((item) => ({
+      ...item,
+      predefined,
+      visible: typeof item.visible !== "undefined" ? item.visible : defaultVisible,
+    }));
+  }
+
+  function initializeColumns(newColumns: ITableColumns[], items: any[] = []) {
+    let predefinedCols: ITableColumns[] = [];
+    let otherCols: ITableColumns[] = [];
+
+    // Process predefined columns
+    if (newColumns && newColumns.length) {
+      predefinedCols = processColumns(newColumns, true, true);
+    }
+
+    if (columnSelector.value === "auto") {
+      // Generate columns automatically from items
+      if (items && items.length) {
+        const itemKeys = Object.keys(items[0]);
+        otherCols = itemKeys.map((key) => ({
+          id: key,
+          title: key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()),
+          visible: false,
+          predefined: false,
+        }));
+      }
+
+      // Combine columns and restore state
+      allColumns.value = _.unionBy(predefinedCols, otherCols, "id");
+      restoreState(predefinedCols);
+    } else if (columnSelector.value === "defined") {
+      allColumns.value = predefinedCols;
+      restoreState(predefinedCols);
+    } else {
+      // Get columns from columnSelector
+      const getDefinedColumns = (): ITableColumns[] => {
+        if (typeof columnSelector.value === "function") {
+          return columnSelector.value();
+        }
+        return toValue(columnSelector.value as Ref<ITableColumns[]>);
+      };
+
+      const definedCols = processColumns(getDefinedColumns(), false, false);
+
+      // Combine columns and restore state
+      allColumns.value = _.unionBy(predefinedCols, definedCols, "id");
+      restoreState(allColumns.value);
+    }
+
+    columnsInit.value = false;
+  }
+
+  return {
+    internalColumns,
+    allColumns,
+    columnsInit,
+    internalColumnsSorted,
+    filteredCols,
+    saveState,
+    restoreState,
+    toggleColumn,
+    initializeColumns,
+  };
+}

package/ui/components/organisms/vc-table/composables/useTableSwipe.ts

@@ -0,0 +1,32 @@
+import { ref, provide, inject, InjectionKey, Ref } from "vue";
+
+interface TableSwipeContext {
+  activeSwipeId: Ref<string | null>;
+  setActiveSwipe: (id: string | null) => void;
+}
+
+const TableSwipeKey = Symbol() as InjectionKey<TableSwipeContext>;
+
+export function provideTableSwipe() {
+  const activeSwipeId = ref<string | null>(null);
+
+  function setActiveSwipe(id: string | null) {
+    activeSwipeId.value = id;
+  }
+
+  const context = {
+    activeSwipeId,
+    setActiveSwipe,
+  };
+
+  provide(TableSwipeKey, context);
+  return context;
+}
+
+export function useTableSwipe() {
+  const context = inject(TableSwipeKey);
+  if (!context) {
+    throw new Error("useTableSwipe must be used within a provider");
+  }
+  return context;
+}

package/ui/components/organisms/vc-table/index.ts

@@ -1 +1 @@
-export { default as VcTable } from "./vc-table.vue";
+export { default as VcTable } from "./vc-table.vue";