@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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

@@ -0,0 +1,56 @@
+import { Ref, ref, shallowRef } from "vue";
+import { IActionBuilderResult } from "../../../../../core/types";
+import { TableItem } from "../types";
+
+export interface UseTableActionsOptions<T extends TableItem | string> {
+  enableItemActions?: boolean;
+  itemActionBuilder?: (item: T) => Promise<IActionBuilderResult[]> | IActionBuilderResult[] | undefined;
+}
+
+export function useTableActions<T extends TableItem | string>(options: UseTableActionsOptions<T>) {
+  const { enableItemActions, itemActionBuilder } = options;
+
+  const itemActions: Ref<IActionBuilderResult[][]> = ref([]);
+  const selectedRowIndex = shallowRef<number>();
+  const mobileSwipeItem = ref<string>();
+
+  async function calculateActions(items: T[]) {
+    if (enableItemActions && typeof itemActionBuilder === "function") {
+      const populatedItems: IActionBuilderResult[][] = [];
+      for (let index = 0; index < items.length; index++) {
+        if (typeof items[index] === "object") {
+          const elementWithActions = await itemActionBuilder(items[index]);
+          if (elementWithActions) {
+            populatedItems.push(elementWithActions);
+          }
+        }
+      }
+      itemActions.value = populatedItems;
+    }
+  }
+
+  function showActions(index: number) {
+    if (typeof index === "number") {
+      selectedRowIndex.value = index;
+    }
+  }
+
+  function closeActions() {
+    selectedRowIndex.value = undefined;
+  }
+
+  function handleSwipe(id: string) {
+    console.log("handleSwipe", id);
+    mobileSwipeItem.value = id;
+  }
+
+  return {
+    itemActions,
+    selectedRowIndex,
+    mobileSwipeItem,
+    calculateActions,
+    showActions,
+    closeActions,
+    handleSwipe,
+  };
+}

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

@@ -0,0 +1,255 @@
+import { ref, Ref } from "vue";
+import { TableItem, TableColPartial } from "../types";
+
+export function useTableColumnReorder<T extends TableItem | string>(
+  internalColumns: Ref<TableColPartial[]>,
+  onStateChange: () => void,
+  headerRef: Ref<HTMLElement | undefined>,
+) {
+  const draggedColumn = ref<TableColPartial | null>(null);
+  const draggedElement = ref<HTMLElement>();
+  const dropPosition = ref<number | null>(null);
+  const reorderRef = ref<HTMLElement>();
+  const ghostRef = ref<HTMLElement | null>(null);
+  const dragOffset = ref({ x: 0, y: 0 });
+
+  function findParentHeader(element: HTMLElement) {
+    if (element.classList.contains("vc-table-header__cell")) {
+      return element;
+    } else {
+      let parent = element.parentElement;
+
+      while (parent && !parent.classList.contains("vc-table-header__cell")) {
+        parent = parent.parentElement;
+        if (!parent) break;
+      }
+
+      return parent;
+    }
+  }
+
+  function getOffset(element: HTMLElement | null | undefined) {
+    if (!element || !element.getClientRects().length) {
+      return { top: 0, left: 0 };
+    }
+
+    const rect = element.getBoundingClientRect();
+    const win = element.ownerDocument.defaultView;
+    return {
+      top: rect.top + ((win && win.scrollY) ?? 0),
+      left: rect.left + ((win && win.scrollX) ?? 0),
+    };
+  }
+
+  function onColumnHeaderMouseDown(event: MouseEvent) {
+    if (event.currentTarget instanceof HTMLElement) {
+      const header = event.currentTarget;
+      const headerRect = header.getBoundingClientRect();
+
+      dragOffset.value = {
+        x: event.clientX - headerRect.left,
+        y: event.clientY - headerRect.top,
+      };
+
+      const ghost = header.cloneNode(true) as HTMLElement;
+      ghost.style.width = `${header.offsetWidth}px`;
+      ghost.style.height = `${header.offsetHeight}px`;
+      ghost.style.position = "fixed";
+      ghost.style.pointerEvents = "none";
+      ghost.style.zIndex = "9999";
+      ghost.style.opacity = "0.8";
+      ghost.style.background = "var(--table-header-bg)";
+      ghost.style.display = "none";
+      ghost.classList.add("vc-table-header__ghost-header");
+
+      document.body.appendChild(ghost);
+      ghostRef.value = ghost;
+
+      header.draggable = true;
+    }
+  }
+
+  function onColumnHeaderDragStart(event: DragEvent, item: TableColPartial) {
+    draggedColumn.value = item;
+    draggedElement.value = event.target as HTMLElement;
+
+    document.addEventListener("dragend", onDragEnd, { once: true });
+
+    if (event.dataTransfer) {
+      event.dataTransfer.setData("text", "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 onColumnHeaderDragOver(event: DragEvent) {
+    const dropHeader = findParentHeader(event.target as HTMLElement);
+    const headerRow = (event.target as HTMLElement).closest(".vc-table-header__row");
+
+    if (headerRow) {
+      const headerRowRect = headerRow.getBoundingClientRect();
+      if (event.clientX < headerRowRect.left || event.clientX > headerRowRect.right) {
+        if (reorderRef.value) {
+          reorderRef.value.style.display = "none";
+        }
+        if (ghostRef.value) {
+          ghostRef.value.style.display = "none";
+        }
+        return;
+      }
+    }
+
+    if (!headerRow || !dropHeader || !headerRef.value || !reorderRef.value || !draggedColumn.value) {
+      if (reorderRef.value) {
+        reorderRef.value.style.display = "none";
+      }
+      if (ghostRef.value) {
+        ghostRef.value.style.display = "none";
+      }
+      return;
+    }
+
+    const headerRect = headerRow.getBoundingClientRect();
+
+    if (event.clientY < headerRect.top || event.clientY > headerRect.bottom) {
+      if (reorderRef.value) {
+        reorderRef.value.style.display = "none";
+      }
+      if (ghostRef.value) {
+        ghostRef.value.style.display = "none";
+      }
+      return;
+    }
+
+    event.preventDefault();
+
+    if (ghostRef.value) {
+      ghostRef.value.style.display = "flex";
+      ghostRef.value.style.left = `${event.clientX - dragOffset.value.x}px`;
+      ghostRef.value.style.top = `${Math.max(headerRect.top, Math.min(headerRect.bottom - ghostRef.value.offsetHeight, event.clientY - dragOffset.value.y))}px`;
+    }
+
+    const containerOffset = getOffset(headerRef.value);
+    const dropHeaderOffset = getOffset(dropHeader);
+
+    if (draggedElement.value !== dropHeader) {
+      const targetLeft = dropHeaderOffset.left - containerOffset.left;
+      const columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
+
+      reorderRef.value.style.top = dropHeaderOffset.top - getOffset(headerRef.value).top + "px";
+
+      if (event.pageX > columnCenter) {
+        reorderRef.value.style.left = targetLeft + dropHeader.offsetWidth - 5 + "px";
+        dropPosition.value = 1;
+      } else {
+        reorderRef.value.style.left = targetLeft - 5 + "px";
+        dropPosition.value = -1;
+      }
+
+      reorderRef.value.style.display = "block";
+    }
+  }
+
+  function onColumnHeaderDragLeave(event: DragEvent) {
+    event.preventDefault();
+
+    if (reorderRef.value) {
+      reorderRef.value.style.display = "none";
+    }
+  }
+
+  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 onColumnHeaderDrop(event: DragEvent, item: TableColPartial) {
+    event.preventDefault();
+
+    const headerRow = (event.target as HTMLElement).closest(".vc-table-header__row");
+    if (headerRow) {
+      const headerRowRect = headerRow.getBoundingClientRect();
+      const isWithinBounds =
+        event.clientX >= headerRowRect.left &&
+        event.clientX <= headerRowRect.right &&
+        event.clientY >= headerRowRect.top &&
+        event.clientY <= headerRowRect.bottom;
+
+      if (!isWithinBounds) {
+        cleanupDrag();
+        return;
+      }
+    }
+
+    if (!draggedColumn.value) {
+      cleanupDrag();
+      return;
+    }
+
+    const dragIndex = internalColumns.value.indexOf(draggedColumn.value);
+    const dropIndex = internalColumns.value.indexOf(item);
+
+    let allowDrop = dragIndex !== dropIndex;
+
+    if (
+      allowDrop &&
+      ((dropIndex - dragIndex === 1 && dropPosition.value === -1) ||
+        (dropIndex - dragIndex === -1 && dropPosition.value === 1))
+    ) {
+      allowDrop = false;
+    }
+
+    if (allowDrop) {
+      reorderArray(internalColumns.value, dragIndex, dropIndex);
+      onStateChange();
+    }
+
+    cleanupDrag();
+  }
+
+  function onDragEnd() {
+    cleanupDrag();
+  }
+
+  function cleanupDrag() {
+    if (ghostRef.value) {
+      document.body.removeChild(ghostRef.value);
+      ghostRef.value = null;
+    }
+
+    if (reorderRef.value) {
+      reorderRef.value.style.display = "none";
+    }
+    if (draggedElement.value) {
+      draggedElement.value.draggable = false;
+    }
+    draggedColumn.value = null;
+    dropPosition.value = null;
+  }
+
+  return {
+    draggedColumn,
+    draggedElement,
+    dropPosition,
+    reorderRef,
+    headerRef,
+    onColumnHeaderMouseDown,
+    onColumnHeaderDragStart,
+    onColumnHeaderDragOver,
+    onColumnHeaderDragLeave,
+    onColumnHeaderDrop,
+  };
+}

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

@@ -0,0 +1,147 @@
+import { ref, Ref } from "vue";
+import { TableColPartial } from "../types";
+import * as _ from "lodash-es";
+
+export function useTableColumnResize(
+  internalColumns: Ref<TableColPartial[]>,
+  onStateChange: () => void,
+  headerRef: Ref<HTMLElement | undefined>,
+) {
+  const resizeColumnElement = ref<TableColPartial>();
+  const nextColumn = ref<TableColPartial>();
+  const lastResize = ref<number>();
+  const columnResizing = ref(false);
+  const resizer = ref<HTMLElement>();
+
+  let columnResizeListener: ((event: MouseEvent) => void) | null = null;
+  let columnResizeEndListener: ((event: MouseEvent) => void) | null = null;
+
+  function getOffset(element: HTMLElement) {
+    if (!element.getClientRects().length) {
+      return { top: 0, left: 0 };
+    }
+
+    const rect = element.getBoundingClientRect();
+    const win = element.ownerDocument.defaultView;
+    return {
+      top: rect.top + ((win && win.scrollY) ?? 0),
+      left: rect.left + ((win && win.scrollX) ?? 0),
+    };
+  }
+
+  function handleMouseDown(e: MouseEvent, item: TableColPartial) {
+    const containerLeft = getOffset(headerRef.value as HTMLElement).left;
+    resizeColumnElement.value = item;
+    columnResizing.value = true;
+    lastResize.value = e.pageX - containerLeft + (headerRef.value as HTMLDivElement).scrollLeft;
+
+    bindColumnResizeEvents();
+  }
+
+  function bindColumnResizeEvents() {
+    if (!columnResizeListener) {
+      columnResizeListener = (event: MouseEvent) => {
+        if (columnResizing.value) {
+          onColumnResize(event);
+        }
+      };
+      document.addEventListener("mousemove", columnResizeListener);
+    }
+    if (!columnResizeEndListener) {
+      columnResizeEndListener = () => {
+        if (columnResizing.value) {
+          columnResizing.value = false;
+          onColumnResizeEnd();
+        }
+      };
+      document.addEventListener("mouseup", columnResizeEndListener);
+    }
+  }
+
+  function unbindColumnResizeEvents() {
+    if (columnResizeListener) {
+      document.removeEventListener("mousemove", columnResizeListener);
+      columnResizeListener = null;
+    }
+    if (columnResizeEndListener) {
+      document.removeEventListener("mouseup", columnResizeEndListener);
+      columnResizeEndListener = null;
+    }
+  }
+
+  function onColumnResize(event: MouseEvent) {
+    if (columnResizing.value && resizer.value && headerRef.value) {
+      const containerLeft = getOffset(headerRef.value).left;
+      resizer.value.style.top = "0px";
+      const leftOffset = event.pageX - containerLeft + headerRef.value.scrollLeft;
+      resizer.value.style.left =
+        Math.min(leftOffset, headerRef.value.offsetWidth - resizer.value.offsetWidth - 70) + "px";
+      resizer.value.style.display = "block";
+    }
+  }
+
+  function onColumnResizeEnd() {
+    if (!resizer.value || !headerRef.value || !resizeColumnElement.value || lastResize.value === undefined) return;
+
+    const delta = resizer.value.offsetLeft - lastResize.value;
+    const columnElement = headerRef.value.querySelector(`#${resizeColumnElement.value.id}`);
+
+    if (columnElement) {
+      const columnWidth = (columnElement as HTMLElement).offsetWidth;
+      const newColumnWidth = columnWidth + delta;
+      const minWidth = 15;
+
+      if (columnWidth + delta > parseInt(minWidth.toString(), 10)) {
+        nextColumn.value = internalColumns.value[internalColumns.value.indexOf(resizeColumnElement.value) + 1];
+
+        if (nextColumn.value) {
+          const nextColElement = headerRef.value.querySelector(`#${nextColumn.value.id}`);
+
+          if (nextColElement) {
+            const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
+
+            if (newColumnWidth > minWidth && nextColumnWidth > minWidth) {
+              resizeTableCells(newColumnWidth, nextColumnWidth);
+            }
+          }
+        } else {
+          if (newColumnWidth > minWidth) {
+            resizeColumnElement.value.width = newColumnWidth + "px";
+          }
+        }
+      }
+
+      resizer.value.style.display = "none";
+      unbindColumnResizeEvents();
+      onStateChange();
+    }
+  }
+
+  function resizeTableCells(newColumnWidth: number, nextColumnWidth: number) {
+    if (!headerRef.value || !resizeColumnElement.value) return;
+
+    const colIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value?.id);
+    const widths: number[] = [];
+    const tableHeaders = headerRef.value.querySelectorAll(".vc-table-header__cell") as NodeListOf<HTMLElement>;
+
+    tableHeaders.forEach((header) => widths.push(header.offsetWidth));
+
+    internalColumns.value.forEach((col, index) => {
+      col.width = widths[index] + "px";
+    });
+
+    widths.forEach((width, index) => {
+      const colWidth =
+        index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
+
+      internalColumns.value[index].width = colWidth + "px";
+    });
+  }
+
+  return {
+    resizer,
+    columnResizing,
+    handleMouseDown,
+    unbindColumnResizeEvents,
+  };
+}

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

@@ -0,0 +1,174 @@
+import { computed, ref, Ref } from "vue";
+import { TableItem } from "../types";
+
+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) {
+    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,
+  };
+}