@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/table/src/use-table-menu.ts

@@ -0,0 +1,97 @@
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  useId,
+  watch,
+  watchEffect,
+} from "vue";
+import {
+  resolveElement,
+  useFloatingLayer,
+  useReducedMotion,
+} from "../../../lib/composables";
+export function useTableMenu(changed: (open: boolean) => void) {
+  const trigger = ref<HTMLButtonElement | null>(null),
+    panel = ref<HTMLElement | null>(null),
+    coords = ref<{ top: number; left: number } | null>(null),
+    reduce = useReducedMotion(),
+    id = useId();
+  const layer = useFloatingLayer(
+    computed(() => coords.value !== null),
+    panel,
+  );
+  let disposed = false;
+  function close(restore = false) {
+    coords.value = null;
+    if (restore)
+      void nextTick(() => {
+        if (!disposed) trigger.value?.focus({ preventScroll: true });
+      });
+  }
+  function dismiss() {
+    close();
+  }
+  function escape(event: KeyboardEvent) {
+    if (layer.claimEscape(event)) close(true);
+  }
+  function toggle() {
+    if (coords.value) {
+      close();
+      return;
+    }
+    const rect = trigger.value?.getBoundingClientRect();
+    if (rect)
+      coords.value = {
+        top: rect.bottom + 4,
+        left: Math.max(8, Math.min(innerWidth - 196, rect.right - 188)),
+      };
+  }
+  function navigate(event: KeyboardEvent) {
+    if (event.key === "Tab") {
+      close();
+      return;
+    }
+    if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const buttons = Array.from(
+        resolveElement<HTMLElement>(
+          panel.value,
+        )?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+      ),
+      index = buttons.indexOf(document.activeElement as HTMLButtonElement);
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? buttons.length - 1
+          : (index + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) %
+            buttons.length;
+    buttons[next]?.focus();
+  }
+  watch(coords, (value) => changed(!!value), { flush: "sync" });
+  watchEffect((cleanup) => {
+    if (!coords.value) return;
+    let active = true;
+    window.addEventListener("scroll", dismiss, true);
+    window.addEventListener("resize", dismiss);
+    window.addEventListener("keydown", escape);
+    void nextTick(() => {
+      if (active && !disposed)
+        resolveElement<HTMLElement>(panel.value)
+          ?.querySelector<HTMLButtonElement>("button")
+          ?.focus({ preventScroll: true });
+    });
+    cleanup(() => {
+      active = false;
+      window.removeEventListener("scroll", dismiss, true);
+      window.removeEventListener("resize", dismiss);
+      window.removeEventListener("keydown", escape);
+    });
+  });
+  onBeforeUnmount(() => {
+    disposed = true;
+  });
+  return { trigger, panel, coords, reduce, id, close, toggle, navigate };
+}

package/src/motion/table/src/use-table.ts

@@ -0,0 +1,309 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import {
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  ArrowUpToLine,
+  ArrowDownToLine,
+  Trash2,
+} from "lucide-vue-next";
+import { useMotionState } from "../../state";
+import { useReducedMotion } from "../../../lib/composables";
+import { useTableColumns, absoluteColumnWidth } from "./useTableColumns";
+import type { TableProps, SortState } from "./types";
+export function useTable(
+  props: TableProps<any> & {
+    defaultSelectedRowIds: string[];
+    defaultSort: SortState | null;
+    minColumnWidth: number;
+    rowHeight: number;
+    overscan: number;
+    selectable: boolean;
+  },
+  emit: (name: any, ...args: any[]) => void,
+) {
+  const selected = useMotionState<string[]>(
+      props,
+      emit,
+      "selectedRowIds",
+      props.defaultSelectedRowIds,
+    ),
+    sort = useMotionState<SortState | null>(
+      props,
+      emit,
+      "sort",
+      props.defaultSort,
+    );
+  const headers = ref<Record<string, HTMLElement | null>>({}),
+    rowElements = ref<Record<string, HTMLElement | null>>({}),
+    viewport = ref<HTMLElement | null>(null),
+    reduce = useReducedMotion(),
+    rootFontSize = ref(16);
+  const controller = useTableColumns(
+      () => props.columns,
+      headers,
+      () => props.minColumnWidth,
+      emit,
+    ),
+    columns = controller.ordered,
+    widths = controller.widths;
+  onMounted(() => {
+    const measured = parseFloat(
+      getComputedStyle(document.documentElement).fontSize,
+    );
+    if (measured > 0) rootFontSize.value = measured;
+  });
+  const rows = computed(() => {
+    const entries = props.data.map((row, index) => ({
+        row,
+        id: props.getRowId?.(row, index) ?? String(index),
+      })),
+      sorting = sort.value;
+    const column = sorting
+      ? props.columns.find((column) => column.key === sorting.key)
+      : undefined;
+    if (!sorting || !column) return entries;
+    const read = (row: any) =>
+      column.sortValue ? column.sortValue(row) : row[column.key];
+    return entries.sort((a, b) => {
+      const first = read(a.row),
+        second = read(b.row);
+      return (
+        (sorting.direction === "asc" ? 1 : -1) *
+        (typeof first === "number" && typeof second === "number"
+          ? first - second
+          : String(first).localeCompare(String(second)))
+      );
+    });
+  });
+  const selectedSet = computed(() => new Set(selected.value)),
+    allSelected = computed(
+      () =>
+        rows.value.length > 0 &&
+        rows.value.every((entry) => selectedSet.value.has(entry.id)),
+    ),
+    someSelected = computed(() =>
+      rows.value.some((entry) => selectedSet.value.has(entry.id)),
+    );
+  function select(ids: Set<string>) {
+    const next = Array.from(ids);
+    selected.value = next;
+    emit("selectionChange", next);
+  }
+  function toggleAll() {
+    const ids = new Set(selectedSet.value),
+      remove = allSelected.value;
+    for (const { id } of rows.value)
+      if (remove) ids.delete(id);
+      else ids.add(id);
+    select(ids);
+  }
+  function toggleRow(id: string) {
+    const ids = new Set(selectedSet.value);
+    if (ids.has(id)) ids.delete(id);
+    else ids.add(id);
+    select(ids);
+  }
+  function toggleSort(key: string) {
+    const current = sort.value,
+      next =
+        current?.key !== key
+          ? { key, direction: "asc" as const }
+          : current.direction === "asc"
+            ? { key, direction: "desc" as const }
+            : null;
+    sort.value = next;
+    emit("sortChange", next);
+  }
+  const virtualizer = useVirtualizer(
+    computed(() => ({
+      count: rows.value.length,
+      getScrollElement: () => viewport.value,
+      estimateSize: () => props.rowHeight,
+      overscan: props.overscan,
+      getItemKey: (index: number) => rows.value[index]?.id ?? index,
+    })),
+  );
+  // A filtered data set can render before the virtualizer receives its new count.
+  const virtualRows = computed(() =>
+      virtualizer.value
+        .getVirtualItems()
+        .filter((item) => item.index < rows.value.length),
+    ),
+    total = computed(() => virtualizer.value.getTotalSize()),
+    paddingTop = computed(() => virtualRows.value[0]?.start ?? 0),
+    paddingBottom = computed(() =>
+      virtualRows.value.length
+        ? total.value - virtualRows.value.at(-1)!.end
+        : 0,
+    );
+  const sized = computed(
+    () =>
+      columns.value.length > 0 &&
+      columns.value.every((column) => widths.value[column.key] != null),
+  );
+  const minWidth = computed(() =>
+    Math.round(
+      columns.value.reduce(
+        (sum, column) =>
+          sum +
+          (widths.value[column.key] ??
+            absoluteColumnWidth(column.width, rootFontSize.value) ??
+            (props.onColumnRename || (!column.cell && column.editable)
+              ? Math.max(props.minColumnWidth, 120)
+              : props.minColumnWidth)),
+        props.selectable ? 48 : 0,
+      ),
+    ),
+  );
+  const colSpan = computed(
+    () => columns.value.length + (props.selectable ? 1 : 0) + 1,
+  );
+  let reached = false;
+  watch(
+    () => props.loading,
+    (loading) => {
+      if (!loading) reached = false;
+    },
+  );
+  function scroll() {
+    const node = viewport.value;
+    if (
+      node &&
+      !props.loading &&
+      !reached &&
+      node.scrollHeight - node.scrollTop - node.clientHeight <
+        props.rowHeight * 4
+    ) {
+      reached = true;
+      emit("endReached");
+    }
+  }
+  const activeColumn = ref<string | null>(null),
+    activeRow = ref<{ id: string; index: number } | null>(null);
+  let columnTimer: ReturnType<typeof setTimeout> | undefined,
+    rowTimer: ReturnType<typeof setTimeout> | undefined;
+  function activateColumn(key: string) {
+    if (!props.onInsertColumn && !props.onDeleteColumn) return;
+    clearTimeout(columnTimer);
+    activeColumn.value = key;
+  }
+  function deactivateColumn() {
+    clearTimeout(columnTimer);
+    columnTimer = setTimeout(() => {
+      activeColumn.value = null;
+    }, 100);
+  }
+  function activateRow(id: string, index: number) {
+    if (!props.onInsertRow && !props.onDeleteRow) return;
+    clearTimeout(rowTimer);
+    activeRow.value = { id, index };
+  }
+  function deactivateRow() {
+    clearTimeout(rowTimer);
+    rowTimer = setTimeout(() => {
+      activeRow.value = null;
+    }, 100);
+  }
+  onBeforeUnmount(() => {
+    clearTimeout(columnTimer);
+    clearTimeout(rowTimer);
+  });
+  const activeColumnIndex = computed(() =>
+    columns.value.findIndex((column) => column.key === activeColumn.value),
+  );
+  const columnItems = computed(() => {
+    const index = activeColumnIndex.value,
+      column = columns.value[index];
+    if (!column) return [];
+    return [
+      ...(props.onInsertColumn
+        ? [
+            {
+              label: "Insert before",
+              icon: ArrowLeftToLine,
+              onSelect: () => emit("insertColumn", index, "before"),
+            },
+            {
+              label: "Insert after",
+              icon: ArrowRightToLine,
+              onSelect: () => emit("insertColumn", index, "after"),
+            },
+          ]
+        : []),
+      ...(props.onDeleteColumn
+        ? [
+            {
+              label: "Delete column",
+              icon: Trash2,
+              destructive: true,
+              onSelect: () => emit("deleteColumn", column.key, index),
+            },
+          ]
+        : []),
+    ];
+  });
+  const rowItems = computed(() => {
+    const row = activeRow.value;
+    if (!row) return [];
+    return [
+      ...(props.onInsertRow
+        ? [
+            {
+              label: "Insert before",
+              icon: ArrowUpToLine,
+              onSelect: () => emit("insertRow", row.index, "before"),
+            },
+            {
+              label: "Insert after",
+              icon: ArrowDownToLine,
+              onSelect: () => emit("insertRow", row.index, "after"),
+            },
+          ]
+        : []),
+      ...(props.onDeleteRow
+        ? [
+            {
+              label: "Delete row",
+              icon: Trash2,
+              destructive: true,
+              onSelect: () => emit("deleteRow", row.id, row.index),
+            },
+          ]
+        : []),
+    ];
+  });
+  return {
+    headers,
+    rowElements,
+    viewport,
+    reduce,
+    controller,
+    columns,
+    widths,
+    rows,
+    selectedSet,
+    allSelected,
+    someSelected,
+    toggleAll,
+    toggleRow,
+    toggleSort,
+    sort,
+    virtualRows,
+    paddingTop,
+    paddingBottom,
+    sized,
+    minWidth,
+    colSpan,
+    scroll,
+    activeColumn,
+    activeRow,
+    activeColumnIndex,
+    columnItems,
+    rowItems,
+    activateColumn,
+    deactivateColumn,
+    activateRow,
+    deactivateRow,
+  };
+}

package/src/motion/table/src/useTableColumns.ts

@@ -0,0 +1,176 @@
+import { computed, onBeforeUnmount, ref, type Ref } from "vue";
+import type { TableColumn } from "./types";
+export function absoluteColumnWidth(width: string | undefined, rem: number) {
+  const value = parseFloat(width ?? "");
+  if (!Number.isFinite(value)) return null;
+  return width?.endsWith("px")
+    ? value
+    : width?.endsWith("rem")
+      ? value * rem
+      : null;
+}
+export function useTableColumns(
+  source: () => TableColumn<any>[],
+  headers: Ref<Record<string, HTMLElement | null>>,
+  minimum: () => number,
+  emit: (event: "columnResize" | "columnOrderChange", ...args: any[]) => void,
+) {
+  const sequence = ref(source().map((column) => column.key)),
+    widths = ref<Record<string, number>>({}),
+    dragKey = ref<string | null>(null),
+    dropIndex = ref<number | null>(null);
+  const ordered = computed(() => {
+    const columns = source(),
+      byKey = new Map(columns.map((column) => [column.key, column])),
+      keys = sequence.value.filter((key) => byKey.has(key)),
+      included = new Set(keys);
+    for (let index = 0; index < columns.length; index++) {
+      const key = columns[index].key;
+      if (included.has(key)) continue;
+      const previous = index ? keys.indexOf(columns[index - 1].key) : -1;
+      keys.splice(
+        index === 0 ? 0 : previous < 0 ? index : previous + 1,
+        0,
+        key,
+      );
+      included.add(key);
+    }
+    return keys.map((key) => byKey.get(key)!);
+  });
+  let resizing: { key: string; x: number; width: number } | undefined,
+    capture: { element: HTMLElement; pointer: number } | undefined;
+  function grab(event: PointerEvent) {
+    capture = {
+      element: event.currentTarget as HTMLElement,
+      pointer: event.pointerId,
+    };
+    try {
+      capture.element.setPointerCapture(capture.pointer);
+    } catch {}
+  }
+  function release() {
+    const pointer = capture;
+    capture = undefined;
+    if (pointer)
+      try {
+        pointer.element.releasePointerCapture(pointer.pointer);
+      } catch {}
+  }
+  function begin(event: PointerEvent) {
+    if (event.button !== 0) return false;
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
+  function snapshot(round: boolean) {
+    return Object.fromEntries(
+      ordered.value.map((column) => {
+        const measured =
+          headers.value[column.key]?.getBoundingClientRect().width ?? 0;
+        return [
+          column.key,
+          (round ? Math.round(measured) : measured) || minimum(),
+        ];
+      }),
+    );
+  }
+  function startResize(key: string, event: PointerEvent) {
+    if (!begin(event)) return;
+    const measured = snapshot(true),
+      next = { ...widths.value };
+    for (const column of ordered.value)
+      if (next[column.key] == null) next[column.key] = measured[column.key];
+    widths.value = next;
+    resizing = { key, x: event.clientX, width: next[key] };
+    grab(event);
+  }
+  function moveResize(event: PointerEvent) {
+    if (resizing)
+      widths.value = {
+        ...widths.value,
+        [resizing.key]: Math.max(
+          minimum(),
+          resizing.width + event.clientX - resizing.x,
+        ),
+      };
+  }
+  function endResize() {
+    const state = resizing;
+    resizing = undefined;
+    release();
+    if (state)
+      emit("columnResize", state.key, widths.value[state.key] ?? state.width);
+  }
+  function startReorder(key: string, event: PointerEvent) {
+    if (!begin(event)) return;
+    dragKey.value = key;
+    grab(event);
+  }
+  function moveReorder(event: PointerEvent) {
+    if (!dragKey.value) return;
+    const index = ordered.value.findIndex((column) => {
+      const rect = headers.value[column.key]?.getBoundingClientRect();
+      return rect ? event.clientX < rect.left + rect.width / 2 : false;
+    });
+    dropIndex.value = index < 0 ? ordered.value.length : index;
+  }
+  function commit(keys: string[]) {
+    sequence.value = keys;
+    emit("columnOrderChange", keys);
+  }
+  function endReorder() {
+    const key = dragKey.value,
+      target = dropIndex.value;
+    if (key && target !== null) {
+      const keys = ordered.value.map((column) => column.key),
+        from = keys.indexOf(key);
+      if (from >= 0) {
+        keys.splice(from, 1);
+        keys.splice(target - (from < target ? 1 : 0), 0, key);
+        commit(keys);
+      }
+    }
+    dragKey.value = null;
+    dropIndex.value = null;
+    release();
+  }
+  function cancel() {
+    resizing = undefined;
+    dragKey.value = null;
+    dropIndex.value = null;
+    release();
+  }
+  function keyboardResize(key: string, direction: -1 | 1) {
+    if (!Object.keys(widths.value).length) widths.value = snapshot(false);
+    const width = Math.max(
+      minimum(),
+      (widths.value[key] ?? minimum()) + 10 * direction,
+    );
+    widths.value = { ...widths.value, [key]: width };
+    emit("columnResize", key, width);
+  }
+  function keyboardReorder(key: string, direction: -1 | 1) {
+    const keys = ordered.value.map((column) => column.key),
+      from = keys.indexOf(key),
+      to = Math.max(0, Math.min(keys.length - 1, from + direction));
+    if (from < 0 || from === to) return;
+    keys.splice(to, 0, keys.splice(from, 1)[0]);
+    commit(keys);
+  }
+  onBeforeUnmount(cancel);
+  return {
+    ordered,
+    widths,
+    dragKey,
+    dropIndex,
+    startResize,
+    moveResize,
+    endResize,
+    startReorder,
+    moveReorder,
+    endReorder,
+    cancel,
+    keyboardResize,
+    keyboardReorder,
+  };
+}

package/src/motion/table-of-contents/index.ts

@@ -0,0 +1,3 @@
+export { default as TableOfContents } from "./src/TableOfContents.vue";
+export type * from "./src/types";
+export type * from "./src/api-types";