@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/table/src/Table.vue

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import Checkbox from "../../checkbox/src/Checkbox.vue";
+import { cn } from "../../../lib/utils";
+import RenderContent from "../../../lib/RenderContent";
+import { useTable } from "./use-table";
+import type { TableProps } from "./types";
+import TableHeader from "./TableHeader.vue";
+import TableHandle from "./TableHandle.vue";
+import EditableCell from "./EditableCell.vue";
+import SkeletonRows from "./SkeletonRows.vue";
+const props = withDefaults(defineProps<TableProps<any>>(), {
+  selectable: false,
+  defaultSelectedRowIds: () => [],
+  defaultSort: null,
+  resizable: false,
+  minColumnWidth: 64,
+  reorderable: false,
+  rowHeight: 48,
+  height: 440,
+  overscan: 10,
+  loading: false,
+  skeletonRows: 3,
+  emptyState: "No data",
+});
+const emit = defineEmits([
+  "update:selectedRowIds",
+  "selectionChange",
+  "update:sort",
+  "sortChange",
+  "columnResize",
+  "columnOrderChange",
+  "cellEdit",
+  "columnRename",
+  "insertRow",
+  "deleteRow",
+  "insertColumn",
+  "deleteColumn",
+  "endReached",
+]);
+const {
+  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,
+} = useTable(props, emit);
+function rowRef(id: string) {
+  // Capture the rendered identity; unmount callbacks run after props.data changes.
+  return (node: unknown) => {
+    rowElements.value[id] = node as HTMLElement | null;
+  };
+}
+const alignment = (align?: string) =>
+  align === "right"
+    ? "text-right"
+    : align === "center"
+      ? "text-center"
+      : "text-left";
+</script>
+<template>
+  <div
+    :class="
+      cn(
+        'w-full overflow-hidden border border-border bg-background text-sm',
+        className,
+      )
+    "
+  >
+    <div
+      ref="viewport"
+      class="overflow-auto"
+      :style="{ height: height + 'px' }"
+      @scroll.passive="scroll"
+    >
+      <table
+        :aria-rowcount="rows.length + 1"
+        :aria-colcount="columns.length + (selectable ? 1 : 0)"
+        :aria-busy="loading || undefined"
+        :class="cn('border-collapse', sized && 'w-max')"
+        :style="{ tableLayout: 'fixed', minWidth: `max(100%, ${minWidth}px)` }"
+      >
+        <colgroup>
+          <col v-if="selectable" style="width: 48px" />
+          <col
+            v-for="column in columns"
+            :key="column.key"
+            :style="
+              widths[column.key] != null
+                ? { width: widths[column.key] + 'px' }
+                : column.width
+                  ? { width: column.width }
+                  : undefined
+            "
+          />
+          <col />
+        </colgroup>
+        <TableHeader
+          :columns="columns"
+          :row-height="rowHeight"
+          :reduce="reduce"
+          :headers="headers"
+          :controller="controller"
+          :selectable="selectable"
+          :all-selected="allSelected"
+          :some-selected="someSelected"
+          :sort="sort"
+          :resizable="resizable"
+          :reorderable="reorderable"
+          :active-column="activeColumn"
+          :renamable="!!onColumnRename"
+          @toggle-all="toggleAll"
+          @toggle-sort="toggleSort"
+          @rename="(key, value) => emit('columnRename', key, value)"
+          @activate="activateColumn"
+          @deactivate="deactivateColumn"
+        />
+        <tbody>
+          <template v-if="!rows.length"
+            ><SkeletonRows
+              v-if="loading"
+              :count="Math.max(1, Math.ceil(height / rowHeight))"
+              :columns="columns"
+              :selectable="selectable"
+              :row-height="rowHeight" />
+            <tr v-else>
+              <td
+                :colspan="colSpan"
+                class="p-10 text-center text-muted-foreground"
+              >
+                <slot name="empty"><RenderContent :node="emptyState" /></slot>
+              </td></tr
+          ></template>
+          <template v-else
+            ><tr
+              v-if="paddingTop > 0"
+              aria-hidden="true"
+              :style="{ height: paddingTop + 'px' }"
+            >
+              <td :colspan="colSpan" />
+            </tr>
+            <tr
+              v-for="virtual in virtualRows"
+              :key="String(virtual.key)"
+              :ref="rowRef(rows[virtual.index].id)"
+              :data-index="virtual.index"
+              :data-selected="selectedSet.has(rows[virtual.index].id)"
+              :aria-rowindex="virtual.index + 2"
+              :aria-selected="
+                selectable ? selectedSet.has(rows[virtual.index].id) : undefined
+              "
+              :style="{ height: rowHeight + 'px' }"
+              class="border-border/60 border-b transition-colors data-[selected=true]:bg-muted/60 hover:bg-muted/50"
+              @pointerenter="activateRow(rows[virtual.index].id, virtual.index)"
+              @pointerleave="deactivateRow"
+              @focusin="activateRow(rows[virtual.index].id, virtual.index)"
+            >
+              <td v-if="selectable" class="text-center">
+                <div class="flex items-center justify-center">
+                  <Checkbox
+                    :model-value="selectedSet.has(rows[virtual.index].id)"
+                    :aria-label="'Select row ' + (virtual.index + 1)"
+                    @update:model-value="toggleRow(rows[virtual.index].id)"
+                  />
+                </div>
+              </td>
+              <td
+                v-for="column in columns"
+                :key="column.key"
+                :class="[
+                  'truncate px-4 text-foreground',
+                  alignment(column.align),
+                ]"
+              >
+                <slot
+                  :name="'cell-' + column.key"
+                  :row="rows[virtual.index].row"
+                  :value="rows[virtual.index].row[column.key]"
+                  :row-id="rows[virtual.index].id"
+                  ><EditableCell
+                    v-if="!column.cell && column.editable"
+                    :value="String(rows[virtual.index].row[column.key] ?? '')"
+                    :label="column.key + ' for row ' + (virtual.index + 1)"
+                    @change="
+                      emit(
+                        'cellEdit',
+                        rows[virtual.index].id,
+                        column.key,
+                        $event,
+                      )
+                    " /><RenderContent
+                    v-else
+                    :node="
+                      column.cell
+                        ? column.cell(rows[virtual.index].row)
+                        : rows[virtual.index].row[column.key]
+                    "
+                /></slot>
+              </td>
+              <td aria-hidden="true" />
+            </tr>
+            <tr
+              v-if="paddingBottom > 0"
+              aria-hidden="true"
+              :style="{ height: paddingBottom + 'px' }"
+            >
+              <td :colspan="colSpan" />
+            </tr>
+            <SkeletonRows
+              v-if="loading"
+              :count="skeletonRows"
+              :columns="columns"
+              :selectable="selectable"
+              :row-height="rowHeight"
+          /></template>
+        </tbody>
+      </table>
+    </div>
+    <TableHandle
+      v-if="activeColumn && activeColumnIndex >= 0"
+      :anchor="headers[activeColumn] ?? null"
+      orientation="column"
+      :label="activeColumn + ' column options'"
+      :items="columnItems"
+      @enter="activateColumn(activeColumn)"
+      @leave="deactivateColumn"
+    /><TableHandle
+      v-if="activeRow"
+      :anchor="rowElements[activeRow.id] ?? null"
+      orientation="row"
+      :label="'Row ' + (activeRow.index + 1) + ' options'"
+      :items="rowItems"
+      @enter="activateRow(activeRow.id, activeRow.index)"
+      @leave="deactivateRow"
+    />
+  </div>
+</template>

package/src/motion/table/src/TableHandle.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { MoreHorizontal, MoreVertical } from "lucide-vue-next";
+import TableMenu, { type TableMenuItem } from "./TableMenu.vue";
+const props = defineProps<{
+    anchor: HTMLElement | null;
+    orientation: "row" | "column";
+    label: string;
+    items: TableMenuItem[];
+  }>(),
+  emit = defineEmits(["enter", "leave"]);
+const menuOpen = ref(false),
+  rect = computed(() => props.anchor?.getBoundingClientRect());
+const position = computed(() => {
+  const box = rect.value;
+  if (!box) return undefined;
+  const row = props.orientation === "row";
+  return {
+    position: "fixed" as const,
+    top: (row ? box.top + box.height / 2 : box.top) + "px",
+    left: (row ? box.left : box.left + box.width / 2) + "px",
+    transform: "translate(-50%,-50%)",
+    zIndex: 40,
+  };
+});
+function leave() {
+  emit("leave");
+}
+function menuChange(open: boolean) {
+  menuOpen.value = open;
+  emit(open ? "enter" : "leave");
+}
+onMounted(() => {
+  window.addEventListener("scroll", leave, true);
+  window.addEventListener("resize", leave);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", leave, true);
+  window.removeEventListener("resize", leave);
+});
+</script>
+<template>
+  <Teleport v-if="rect" to="body"
+    ><div
+      :style="position"
+      @pointerenter="emit('enter')"
+      @pointerleave="!menuOpen && emit('leave')"
+    >
+      <TableMenu
+        :ariaLabel="label"
+        :items="items"
+        :trigger-class-name="
+          orientation === 'row'
+            ? 'flex h-6 w-2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'
+            : 'flex h-2 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'
+        "
+        @open-change="menuChange"
+        ><component
+          :is="orientation === 'row' ? MoreVertical : MoreHorizontal"
+          class="h-3 w-3"
+      /></TableMenu></div
+  ></Teleport>
+</template>

package/src/motion/table/src/TableHeader.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { GripVertical, ChevronUp } from "lucide-vue-next";
+import { SPRING_PRESS, EASE_OUT } from "../../../lib/ease";
+import Checkbox from "../../checkbox/src/Checkbox.vue";
+import RenderContent from "../../../lib/RenderContent";
+import { cn } from "../../../lib/utils";
+import type { TableColumn, SortState } from "./types";
+import type { useTableColumns } from "./useTableColumns";
+defineProps<{
+  columns: TableColumn<any>[];
+  rowHeight: number;
+  reduce: boolean;
+  selectable: boolean;
+  allSelected: boolean;
+  someSelected: boolean;
+  sort: SortState | null;
+  resizable: boolean;
+  reorderable: boolean;
+  activeColumn: string | null;
+  headers: Record<string, HTMLElement | null>;
+  controller: ReturnType<typeof useTableColumns>;
+  renamable: boolean;
+}>();
+const emit = defineEmits<{
+  toggleAll: [];
+  toggleSort: [key: string];
+  rename: [key: string, value: string];
+  activate: [key: string];
+  deactivate: [];
+}>();
+const gesture =
+  "select-none [-webkit-touch-callout:none] [-webkit-user-select:none]";
+const justify = (align?: string) =>
+  align === "right"
+    ? "justify-end"
+    : align === "center"
+      ? "justify-center"
+      : "justify-start";
+const align = (align?: string) =>
+  align === "right"
+    ? "text-right"
+    : align === "center"
+      ? "text-center"
+      : "text-left";
+</script>
+<template>
+  <thead>
+    <tr :style="{ height: rowHeight + 'px' }">
+      <th
+        v-if="selectable"
+        class="sticky top-0 z-10 border-border border-b bg-muted"
+      >
+        <div class="flex items-center justify-center">
+          <Checkbox
+            :model-value="allSelected"
+            :indeterminate="!allSelected && someSelected"
+            aria-label="Select all rows"
+            class="size-6"
+            @update:model-value="emit('toggleAll')"
+          />
+        </div>
+      </th>
+      <th
+        v-for="(column, index) in columns"
+        :key="column.key"
+        :ref="
+          (node) => {
+            headers[column.key] = node as HTMLElement | null;
+          }
+        "
+        :style="
+          activeColumn === column.key
+            ? { boxShadow: 'inset 0 1px 0 var(--color-primary)' }
+            : undefined
+        "
+        :aria-sort="
+          sort?.key === column.key
+            ? sort.direction === 'asc'
+              ? 'ascending'
+              : 'descending'
+            : undefined
+        "
+        :data-drop="
+          controller.dragKey.value
+            ? controller.dropIndex.value === index
+            : undefined
+        "
+        :data-dropend="
+          controller.dragKey.value
+            ? controller.dropIndex.value === columns.length &&
+              index === columns.length - 1
+            : undefined
+        "
+        class="group sticky top-0 z-10 border-border border-b bg-muted p-0 font-medium text-muted-foreground data-[drop=true]:before:absolute data-[drop=true]:before:inset-y-0 data-[drop=true]:before:left-0 data-[drop=true]:before:w-0.5 data-[drop=true]:before:bg-primary data-[dropend=true]:after:absolute data-[dropend=true]:after:inset-y-0 data-[dropend=true]:after:right-0 data-[dropend=true]:after:w-0.5 data-[dropend=true]:after:bg-primary"
+        @pointerenter="emit('activate', column.key)"
+        @pointerleave="emit('deactivate')"
+      >
+        <motion.div
+          :class="['flex h-full items-center', justify(column.align)]"
+          :style="{ height: rowHeight + 'px' }"
+          :animate="
+            reduce
+              ? { opacity: controller.dragKey.value === column.key ? 0.5 : 1 }
+              : {
+                  scale: controller.dragKey.value === column.key ? 1.04 : 1,
+                  opacity: controller.dragKey.value === column.key ? 0.5 : 1,
+                }
+          "
+          :transition="SPRING_PRESS"
+        >
+          <button
+            v-if="reorderable"
+            type="button"
+            :aria-label="'Reorder ' + column.key + ' column'"
+            :class="
+              cn(
+                'flex h-full w-6 cursor-grab touch-none items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground active:cursor-grabbing',
+                gesture,
+              )
+            "
+            @pointerdown="controller.startReorder(column.key, $event)"
+            @pointermove="controller.moveReorder"
+            @pointerup="controller.endReorder"
+            @pointercancel="controller.cancel"
+            @keydown.left.prevent="controller.keyboardReorder(column.key, -1)"
+            @keydown.right.prevent="controller.keyboardReorder(column.key, 1)"
+          >
+            <GripVertical class="h-3.5 w-3.5" />
+          </button>
+          <button
+            v-if="column.sortable"
+            type="button"
+            :class="
+              cn(
+                'flex h-full min-w-0 flex-1 select-none items-center gap-1 px-4 transition-colors hover:text-foreground',
+                justify(column.align),
+                sort?.key === column.key && 'text-primary',
+              )
+            "
+            @click="emit('toggleSort', column.key)"
+          >
+            <span class="truncate"><RenderContent :node="column.header" /></span
+            ><motion.span
+              aria-hidden="true"
+              class="inline-flex shrink-0"
+              :animate="{
+                rotate:
+                  sort?.key === column.key && sort.direction === 'desc'
+                    ? 180
+                    : 0,
+                opacity: sort?.key === column.key ? 1 : 0.35,
+              }"
+              :transition="
+                reduce ? { duration: 0 } : { duration: 0.18, ease: EASE_OUT }
+              "
+              ><ChevronUp class="h-3.5 w-3.5"
+            /></motion.span>
+          </button>
+          <input
+            v-else-if="renamable"
+            :value="typeof column.header === 'string' ? column.header : ''"
+            :aria-label="'Rename ' + column.key + ' column'"
+            :size="1"
+            :class="
+              cn(
+                'min-w-0 flex-1 truncate appearance-none rounded-md border-0 bg-transparent px-4 font-medium text-muted-foreground outline-none transition-colors focus:bg-muted focus:text-foreground',
+                align(column.align),
+              )
+            "
+            @input="
+              emit(
+                'rename',
+                column.key,
+                ($event.target as HTMLInputElement).value,
+              )
+            " /><span
+            v-else
+            :class="['min-w-0 flex-1 truncate px-4', align(column.align)]"
+            ><RenderContent :node="column.header" /></span
+        ></motion.div>
+        <button
+          v-if="resizable"
+          type="button"
+          :aria-label="'Resize ' + column.key + ' column'"
+          :class="
+            cn(
+              'absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none bg-transparent transition-colors hover:bg-muted',
+              gesture,
+            )
+          "
+          @pointerdown="controller.startResize(column.key, $event)"
+          @pointermove="controller.moveResize"
+          @pointerup="controller.endResize"
+          @pointercancel="controller.cancel"
+          @keydown.right.prevent="controller.keyboardResize(column.key, 1)"
+          @keydown.left.prevent="controller.keyboardResize(column.key, -1)"
+        />
+      </th>
+      <th
+        aria-hidden="true"
+        class="sticky top-0 z-10 border-border border-b bg-muted"
+      />
+    </tr>
+  </thead>
+</template>

package/src/motion/table/src/TableMenu.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { SPRING_PANEL } from "../../../lib/ease";
+import RenderContent from "../../../lib/RenderContent";
+import { cn } from "../../../lib/utils";
+import { useTableMenu } from "./use-table-menu";
+export interface TableMenuItem {
+  label: string;
+  icon?: any;
+  onSelect: () => void;
+  destructive?: boolean;
+}
+defineProps<{
+  items: TableMenuItem[];
+  ariaLabel: string;
+  triggerClassName?: string;
+}>();
+const emit = defineEmits<{ openChange: [open: boolean] }>();
+const { trigger, panel, coords, reduce, id, close, toggle, navigate } =
+  useTableMenu((open) => emit("openChange", open));
+</script>
+<template>
+  <button
+    ref="trigger"
+    type="button"
+    :aria-label="ariaLabel"
+    aria-haspopup="menu"
+    :aria-controls="coords ? id : undefined"
+    :aria-expanded="!!coords"
+    :class="triggerClassName"
+    @click.stop="toggle"
+  >
+    <slot /></button
+  ><Teleport v-if="coords" to="body"
+    ><div class="fixed inset-0 z-40" @pointerdown="close()" />
+    <motion.div
+      ref="panel"
+      :id="id"
+      role="menu"
+      :aria-label="ariaLabel"
+      class="fixed z-50 overflow-hidden rounded-xl border border-border bg-background p-1 shadow-xl"
+      :style="{
+        top: coords.top + 'px',
+        left: coords.left + 'px',
+        width: '188px',
+      }"
+      :initial="reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: -4 }"
+      :animate="reduce ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }"
+      :transition="reduce ? { duration: 0 } : SPRING_PANEL"
+      @keydown="navigate"
+      ><button
+        v-for="item in items"
+        :key="item.label"
+        type="button"
+        role="menuitem"
+        :class="
+          cn(
+            'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors outline-none [&_svg]:h-4 [&_svg]:w-4',
+            item.destructive
+              ? 'text-rose-500 hover:bg-rose-500/10 focus:bg-rose-500/10'
+              : 'text-foreground hover:bg-muted focus:bg-muted',
+          )
+        "
+        @click="
+          close(true);
+          item.onSelect();
+        "
+      >
+        <RenderContent v-if="item.icon" :node="item.icon" />{{ item.label }}
+      </button></motion.div
+    ></Teleport
+  >
+</template>

package/src/motion/table/src/types.ts

@@ -0,0 +1,86 @@
+import type { VNodeChild } from "vue";
+
+export type SortDirection = "asc" | "desc";
+
+export type SortState = {
+  key: string;
+  direction: SortDirection;
+};
+
+export type TableColumn<T> = {
+  /** Stable key; also the default object property read for the cell + sort value. */
+  key: string;
+  /** Header content. */
+  header: VNodeChild;
+  /** Allow clicking the header to sort by this column. */
+  sortable?: boolean;
+  /** Cell text alignment. */
+  align?: "left" | "center" | "right";
+  /** Column width as a CSS length, e.g. "160px" or "20%". Omit to share remaining space equally. */
+  width?: string;
+  /** Custom cell renderer. Falls back to `row[key]`. */
+  cell?: (row: T) => VNodeChild;
+  /** Render an inline text input for this column's cells (ignored when `cell` is set). */
+  editable?: boolean;
+  /** Value used for sorting. Falls back to `row[key]`. */
+  sortValue?: (row: T) => string | number;
+};
+
+export type InsertPosition = "before" | "after";
+
+export interface TableProps<T> {
+  data: T[];
+  columns: TableColumn<T>[];
+  /** Stable id per row, required for correct selection across sorts. Defaults to row index. */
+  getRowId?: (row: T, index: number) => string;
+  /** Render a leading checkbox column with select-all in the header. */
+  selectable?: boolean;
+  selectedRowIds?: string[];
+  defaultSelectedRowIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  sort?: SortState | null;
+  defaultSort?: SortState | null;
+  onSortChange?: (sort: SortState | null) => void;
+  /** Allow dragging the right edge of a header to resize that column. */
+  resizable?: boolean;
+  /** Minimum column width in px when resizing. */
+  minColumnWidth?: number;
+  onColumnResize?: (key: string, width: number) => void;
+  /** Allow dragging a header grip to reorder columns. */
+  reorderable?: boolean;
+  onColumnOrderChange?: (keys: string[]) => void;
+  /** Called when an `editable` cell changes. */
+  onCellEdit?: (rowId: string, columnKey: string, value: string) => void;
+  /** When set, non-sortable headers become editable inputs for the column name. */
+  onColumnRename?: (columnKey: string, value: string) => void;
+  /** Enables the row menu (Insert before / after). Receives the target index. */
+  onInsertRow?: (index: number, position: InsertPosition) => void;
+  /** Enables Delete in the row menu. */
+  onDeleteRow?: (rowId: string, index: number) => void;
+  /** Enables the column menu (Insert before / after). Receives the target column index. */
+  onInsertColumn?: (index: number, position: InsertPosition) => void;
+  /** Enables Delete in the column menu. */
+  onDeleteColumn?: (columnKey: string, index: number) => void;
+  /** Fixed row height in px — required for virtualization. */
+  rowHeight?: number;
+  /** Scroll viewport height in px. */
+  height?: number;
+  /** Rows rendered above/below the viewport. */
+  overscan?: number;
+  /** Fires when the viewport scrolls near the bottom — load the next page. */
+  onEndReached?: () => void;
+  /** Currently fetching — shows skeleton rows and pauses `onEndReached`. */
+  loading?: boolean;
+  /** How many skeleton rows to show while loading more (default 3). */
+  skeletonRows?: number;
+  emptyState?: VNodeChild;
+  className?: string;
+}
+
+/** A data row paired with its stable id. */
+export type TableRow<T> = { row: T; id: string };
+
+/** Ref map from column key to its header cell, shared across the resize/reorder hooks. */
+export type HeaderCellRefs = {
+  current: Record<string, HTMLTableCellElement | null>;
+};