ropav 0.2.0 → 0.3.0

package/dist/components/table/table-content.js

@@ -0,0 +1,461 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { useControllableState } from "../../composables/use-controllable-state.js";
+import { useSelectionManager } from "../../composables/use-selection-manager.js";
+import { provideVirtualizerStateContext, useVirtualizerConfigContext } from "../virtualizer/virtualizer.context.js";
+import { Size } from "../../utils/virtualizer-geometry.js";
+import { useDndPersistedKeys } from "../../composables/use-dnd-persisted-keys.js";
+import { useTypeahead } from "../../composables/use-typeahead.js";
+import { useVirtualizer } from "../../composables/use-virtualizer.js";
+import { useVirtualizerScroll } from "../../composables/use-virtualizer-scroll.js";
+import { useLocale } from "../../composables/use-locale.js";
+import { useDescription } from "../../composables/use-description.js";
+import { announce } from "../../utils/live-announcer.js";
+import { provideTableColumnLayoutContext, provideTableGridContext, provideTableVirtualizerContext, useTableContext, useTableResizableContainerContext } from "./table.context.js";
+import { useTableCollection } from "../../composables/use-table-collection.js";
+import { toTableDragCollection } from "../../composables/table-drag-collection.js";
+import { useGridKeyboard } from "../../composables/use-grid-keyboard.js";
+import { useGridSelectionAnnouncement } from "../../composables/use-grid-selection-announcement.js";
+import { buildColumnWidths, useTableColumnLayout } from "../../composables/use-table-column-layout.js";
+import { TreeDropTargetDelegate } from "../../utils/dnd-tree-drop-target-delegate.js";
+import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setInsertionState, setStaticTemplateRef, setStyle, shallowRef, template, unref, watch } from "vue";
+//#region src/components/table/table-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div role=presentation>");
+var table_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "table-content",
+	props: {
+		class: {},
+		sortDescriptor: {},
+		selectionMode: {},
+		selectionBehavior: {},
+		selectedKeys: {},
+		defaultSelectedKeys: {},
+		disabledKeys: {},
+		disabledBehavior: {},
+		disallowEmptySelection: {
+			type: Boolean,
+			default: void 0
+		},
+		treeColumn: {},
+		expandedKeys: {},
+		defaultExpandedKeys: {},
+		dragAndDropHooks: {}
+	},
+	emits: [
+		"expandedChange",
+		"selectionChange",
+		"update:expandedKeys",
+		"sortChange",
+		"update:selectedKeys",
+		"update:sortDescriptor"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { slots } = useTableContext();
+		const tableId = useId$1();
+		const collectionId = useId$1();
+		const element = shallowRef(null);
+		/**
+		* Whether the rows are windowed, which is decided by the presence of a `Virtualizer` above and
+		* nothing else — the same thing that decides it in React Aria.
+		*
+		* It has to be known here, before the children run: it is what the table's elements *are*. A
+		* `Virtualizer` whose body was given no rows renders a header and no rows, which is the honest
+		* answer to asking for a window over nothing.
+		*/
+		const virtualizerConfig = useVirtualizerConfigContext();
+		const isVirtualized = virtualizerConfig != null;
+		/** The rows' data, registered by the body. Empty until the body's own setup has run. */
+		const bodyItems = shallowRef(null);
+		const hasLoader = shallowRef(false);
+		/** The scroll box's own size, which is what the columns are divided up over. */
+		const containerSize = shallowRef(new Size());
+		const collection = useTableCollection({
+			hasLoader: isVirtualized ? () => hasLoader.value : void 0,
+			idPrefix: () => collectionId.value,
+			items: isVirtualized ? () => bodyItems.value : void 0
+		});
+		/**
+		* Selection runs on the **row** collection rather than on a collection of rows and cells, which
+		* is how React Aria has it. Nothing about a selection is two-dimensional, and keeping the manager
+		* one-dimensional is what lets the listbox's manager be reused here unchanged.
+		*/
+		const selection = useSelectionManager({
+			collection: collection.rows,
+			defaultSelectedKeys: props.defaultSelectedKeys,
+			disabledBehavior: () => props.disabledBehavior,
+			disabledKeys: () => props.disabledKeys,
+			disallowEmptySelection: () => props.disallowEmptySelection,
+			onSelectionChange: (keys) => {
+				emit("selectionChange", keys);
+				emit("update:selectedKeys", keys);
+			},
+			selectedKeys: () => props.selectedKeys,
+			selectionBehavior: () => props.selectionBehavior,
+			selectionMode: () => props.selectionMode
+		});
+		/**
+		* Column widths only exist inside a resizable container, which is what supplies the width they
+		* are laid out against. The layout is built here rather than there because it needs the
+		* collection, and only the grid has one — the same split React Aria makes.
+		*/
+		const resizableContainer = useTableResizableContainerContext();
+		const columnDefinitions = () => collection.columns.orderedKeys.value.map((key) => {
+			const column = collection.columns.getItem(key);
+			return {
+				defaultWidth: column?.defaultWidth(),
+				key,
+				maxWidth: column?.maxWidth(),
+				minWidth: column?.minWidth(),
+				width: column?.width()
+			};
+		});
+		const layout = resizableContainer ? useTableColumnLayout({
+			columns: columnDefinitions,
+			tableWidth: resizableContainer.tableWidth
+		}) : null;
+		provideTableColumnLayoutContext(layout ? {
+			...resizableContainer,
+			layout
+		} : null);
+		/**
+		* How wide each column is, for the layout to place cells at.
+		*
+		* The same numbers the browser lays a plain table out with: inside a resizable container they come
+		* from the resize state, exactly as React Aria's `TableLayout.useLayoutOptions` reads them, and
+		* otherwise they are divided out over the scroll box here.
+		*/
+		const columnWidths = computed(() => layout ? layout.columnWidths.value : buildColumnWidths(containerSize.value.width, columnDefinitions()));
+		const treeColumn = computed(() => props.treeColumn ?? null);
+		/**
+		* Which rows are open. Held as its own controllable state rather than through the selection
+		* manager: expansion is not a selection — it does not follow the selection mode, it is not
+		* announced, and a row can be open and unselected at once.
+		*/
+		const expanded = useControllableState({
+			defaultValue: new Set(props.defaultExpandedKeys ?? []),
+			onValueChange: (keys) => {
+				emit("expandedChange", keys);
+				emit("update:expandedKeys", keys);
+			},
+			value: () => props.expandedKeys === void 0 ? void 0 : new Set(props.expandedKeys)
+		});
+		const expandedKeys = computed(() => treeColumn.value == null ? /* @__PURE__ */ new Set() : expanded.state.value);
+		const toggleExpanded = (rowKey) => {
+			if (treeColumn.value == null) return;
+			const next = new Set(expanded.state.value);
+			if (next.has(rowKey)) next.delete(rowKey);
+			else next.add(rowKey);
+			expanded.setState(next);
+		};
+		/**
+		* Both halves are opt-in, and the hooks only exist when the caller asked for them.
+		*
+		* Reading them off `dragAndDropHooks` rather than importing them is what keeps the whole drag
+		* and drop layer out of a table that does not use it.
+		*
+		* Split in two: the state is built here because the persisted keys are derived from it and the
+		* virtualizer needs those, while the hooks that *use* the state need the keyboard delegate and so
+		* have to wait until below it.
+		*/
+		const dnd = props.dragAndDropHooks;
+		const dragCollection = toTableDragCollection(collection);
+		const locale = useLocale();
+		const textDirection = computed(() => locale.value.direction);
+		const dragState = dnd?.useDraggableCollectionState?.({
+			collection: dragCollection,
+			getAllowedDropOperations: dnd.options.getAllowedDropOperations,
+			getItems: (keys) => dnd.options.getItems?.(keys) ?? [],
+			isDisabled: dnd.options.isDisabled,
+			onDragEnd: (event) => dnd.options.onDragEnd?.(event),
+			onDragStart: (event) => dnd.options.onDragStart?.(event),
+			selectionManager: selection
+		});
+		const dropState = dnd?.useDroppableCollectionState?.({
+			...dnd.options,
+			collection: dragCollection,
+			selectionManager: selection
+		});
+		/**
+		* The rows kept rendered wherever they are.
+		*
+		* The focused row always, exactly as React Aria does — the roving tab stop lives on that element,
+		* and letting it leave the DOM drops focus to the document; its cells come with it, because every
+		* cell of a placed row is placed. During a keyboard or screen reader drag the drop target joins
+		* it, because that one is reached by pressing a key rather than by scrolling to it. Selected rows
+		* are deliberately *not* kept: React does not keep them either.
+		*/
+		const persistedKeys = useDndPersistedKeys(() => selection.focusedKey.value, dnd, dropState);
+		const virtualizer = isVirtualized && collection.virtualized ? useVirtualizer({
+			collection: () => collection.virtualized.value,
+			layout: () => virtualizerConfig.layout.value,
+			layoutOptions: () => ({
+				...virtualizerConfig.layoutOptions.value,
+				columnWidths: columnWidths.value
+			}),
+			persistedKeys: () => persistedKeys.value
+		}) : null;
+		const scroll = virtualizer && useVirtualizerScroll({
+			contentSize: () => virtualizer.contentSize.value,
+			element,
+			isScrolling: () => virtualizer.isScrolling.value,
+			onScrollEnd: virtualizer.endScrolling,
+			onScrollStart: virtualizer.startScrolling,
+			onSizeChange: (size) => {
+				containerSize.value = size;
+				virtualizer.setSize(size);
+			},
+			onVisibleRectChange: virtualizer.setVisibleRect
+		});
+		/**
+		* The rows inside the window. The body renders these rather than every row it was given.
+		*
+		* Rows only: the body's other child is the loading sentinel, which the layout keeps rendered
+		* wherever the window is and which `Table.LoadMore` renders itself, from its own slot.
+		*/
+		const rowViews = computed(() => {
+			if (!virtualizer || !collection.virtualized) return [];
+			const bodyKey = collection.virtualized.value.bodyKey;
+			return (virtualizer.visibleViews.value.find((view) => view.key === bodyKey)?.children ?? []).filter((view) => view.node?.type === "row");
+		});
+		/**
+		* Paging asks the layout where the rows are, not the DOM.
+		*
+		* `PageDown` in a virtualized table has to move by a viewport of *collection*, and most of that
+		* viewport is not rendered. Without a virtualizer there is no delegate and paging measures
+		* elements as before.
+		*/
+		const keyboardLayout = computed(() => virtualizer ? {
+			getContentSize: () => virtualizer.contentSize.value,
+			getItemRect: (key) => virtualizer.getLayoutInfo(key)?.rect ?? null,
+			getVisibleRect: () => virtualizer.visibleRect.value
+		} : null);
+		const keyboard = useGridKeyboard({
+			collection,
+			element,
+			expansion: {
+				hasChildRows: (rowKey) => Boolean(collection.tree.getItem(rowKey)?.hasChildRows()),
+				isExpanded: (rowKey) => expandedKeys.value.has(rowKey),
+				isTree: () => treeColumn.value != null,
+				parentKey: (rowKey) => collection.tree.getItem(rowKey)?.parentKey() ?? null,
+				toggle: toggleExpanded
+			},
+			isDisabled: () => layout?.resizingColumn.value != null,
+			layout: () => keyboardLayout.value,
+			selection
+		});
+		useGridSelectionAnnouncement({
+			collection: collection.rows,
+			selection
+		});
+		if (dnd && dragState) dnd.useDraggableCollection?.(dragState, element);
+		/**
+		* Rows in document order, which is the walk a drag makes down the table.
+		*
+		* Built here rather than reusing `keyboard`: the grid's own navigation moves through cells and
+		* column headers as well as rows, and a drag only ever lands on a row. React Aria makes the same
+		* split, constructing a fresh `ListKeyboardDelegate` for the drop side.
+		*/
+		const dropKeyboardDelegate = {
+			focusKey: (key) => keyboard.focusCell({
+				columnKey: null,
+				rowKey: key
+			}, { scroll: true }),
+			getFirstKey: () => collection.rows.getFirstKey(),
+			getKeyAbove: (key) => collection.rows.getKeyBefore(key),
+			getKeyBelow: (key) => collection.rows.getKeyAfter(key),
+			getLastKey: () => collection.rows.getLastKey()
+		};
+		/**
+		* The pointer half of dropping, attached statically below.
+		*
+		* A keyboard drag runs through the session's own document listeners, so it works without these;
+		* a pointer drag reaches nothing but the element's own `dragover`, and has to be given them.
+		*/
+		let droppable;
+		if (dnd && dropState) {
+			/**
+			* The tree delegate wraps the flat one rather than replacing it.
+			*
+			* Finding which row the pointer is over is the same problem either way; what differs is what
+			* the gap under the last child of a subtree *means*, which is the ambiguity the wrapper
+			* resolves. A flat table has no such gaps, so it costs nothing there.
+			*/
+			const pointerDelegate = dnd.dropTargetDelegate ?? (virtualizerConfig?.layout.value.getDropTargetFromPoint != null ? virtualizerConfig.layout.value : new dnd.ListDropTargetDelegate(dragCollection, element, {
+				direction: textDirection.value,
+				layout: "stack",
+				orientation: "vertical"
+			}));
+			droppable = dnd.useDroppableCollection?.({
+				...dnd.options,
+				dropTargetDelegate: new TreeDropTargetDelegate(pointerDelegate, {
+					collection: () => dragCollection,
+					direction: () => textDirection.value,
+					expandedKeys: () => expandedKeys.value
+				}),
+				keyboardDelegate: dropKeyboardDelegate,
+				/**
+				* A drag resting on a closed row opens it, so its children become reachable.
+				*
+				* Only opens for a pointer: with a keyboard or a screen reader the same gesture toggles,
+				* because there is no "rest here" to distinguish from "step past".
+				*/
+				onDropActivate(event) {
+					dnd.options.onDropActivate?.(event);
+					if (event.target.type !== "item") return;
+					const key = event.target.key;
+					if (!Boolean(collection.tree.getItem(key)?.hasChildRows())) return;
+					if (expandedKeys.value.has(key) && !dnd.isVirtualDragging?.()) return;
+					toggleExpanded(key);
+				},
+				onKeyDown(event) {
+					const target = dropState.target.value;
+					if (target?.type !== "item" || target.dropPosition !== "on") return;
+					if (!collection.tree.getItem(target.key)?.hasChildRows()) return;
+					const isExpanded = expandedKeys.value.has(target.key);
+					const expandKey = textDirection.value === "rtl" ? "ArrowLeft" : "ArrowRight";
+					const collapseKey = textDirection.value === "rtl" ? "ArrowRight" : "ArrowLeft";
+					if (event.key === expandKey && !isExpanded) toggleExpanded(target.key);
+					else if (event.key === collapseKey && isExpanded) toggleExpanded(target.key);
+				}
+			}, dropState, element);
+		}
+		/** Whether the table as a whole is the current drop target. */
+		const isRootDropTarget = computed(() => dropState?.isDropTarget({ type: "root" }) ?? false);
+		const typeahead = useTypeahead({
+			focusedKey: () => keyboard.focusedCell.value.rowKey,
+			getKeyForSearch: keyboard.getKeyForSearch,
+			onSearchMatch: (rowKey) => keyboard.focusCell({
+				columnKey: null,
+				rowKey
+			}, { scroll: true })
+		});
+		const onKeydown = (event) => {
+			typeahead.onKeydown(event);
+			if (!event.defaultPrevented) keyboard.onKeydown(event);
+		};
+		const sortDescriptor = computed(() => props.sortDescriptor ?? null);
+		const OPPOSITE_DIRECTION = {
+			ascending: "descending",
+			descending: "ascending"
+		};
+		/**
+		* Ported from react-stately's `useTableState`: sorting is entirely the caller's, so this only
+		* reports what was asked for. Pressing the column that is already sorted flips it; pressing any
+		* other column starts ascending.
+		*/
+		const sort = (columnKey, direction) => {
+			const current = sortDescriptor.value;
+			const next = {
+				column: columnKey,
+				direction: direction ?? (current?.column === columnKey ? OPPOSITE_DIRECTION[current.direction] : "ascending")
+			};
+			emit("sortChange", next);
+			emit("update:sortDescriptor", next);
+		};
+		if (virtualizer && collection.virtualized && scroll) {
+			provideTableVirtualizerContext({
+				collection: collection.virtualized,
+				contentStyle: scroll.contentStyle,
+				getLayoutInfo: virtualizer.getLayoutInfo,
+				rowViews,
+				setHasLoader: (value) => {
+					hasLoader.value = value;
+				},
+				setItems: (items) => {
+					bodyItems.value = items;
+				}
+			});
+			provideVirtualizerStateContext({
+				getDropTargetLayoutInfo: virtualizerConfig.layout.value.getDropTargetLayoutInfo?.bind(virtualizerConfig.layout.value),
+				getIndex: (key) => collection.rows.getIndex(key),
+				getLayoutInfo: virtualizer.getLayoutInfo,
+				itemCount: computed(() => collection.rows.size.value),
+				shouldObserveItemSize: virtualizerConfig.shouldObserveItemSize,
+				updateItemSize: virtualizer.updateItemSize
+			});
+		}
+		provideTableGridContext({
+			collection,
+			collectionId,
+			columnCount: computed(() => collection.columns.size.value),
+			dragAndDropHooks: dnd,
+			dragState,
+			dropState,
+			expandedKeys,
+			keyboard,
+			selection,
+			sort,
+			sortDescriptor,
+			tableId,
+			toggleExpanded,
+			treeColumn
+		});
+		/**
+		* What the table itself is described by while it is sorted. `aria-sort` on the column already
+		* says it, but only when focus is on that column — this is what tells someone landing on the
+		* table how it is ordered.
+		*/
+		const sortDescription = computed(() => {
+			const descriptor = sortDescriptor.value;
+			if (!descriptor) return void 0;
+			return `sorted by column ${collection.columns.getItem(descriptor.column)?.textValue() ?? ""} in ${descriptor.direction} order`;
+		});
+		const { describedBy } = useDescription(sortDescription);
+		watch(sortDescription, (description) => {
+			if (description) announce(description);
+		});
+		/**
+		* A CSS table lays its own columns out, and the two declarations below are how a resizable one is
+		* held to the widths it was given. Virtualized there is no CSS table to hold: the elements are
+		* divs, every cell is placed absolutely, and `min-content` on a div would collapse it.
+		*/
+		const tableStyle = computed(() => layout && !isVirtualized ? {
+			tableLayout: "fixed",
+			width: "min-content"
+		} : void 0);
+		const _on_dragenter = ($event) => unref(droppable)?.handlers.onDragenter($event);
+		const _on_dragleave = ($event) => unref(droppable)?.handlers.onDragleave($event);
+		const _on_dragover = ($event) => unref(droppable)?.handlers.onDragover($event);
+		const _on_drop = ($event) => unref(droppable)?.handlers.onDrop($event);
+		const n7 = createDynamicComponent(() => isVirtualized ? "div" : "table", {
+			id: () => unref(tableId),
+			"aria-colcount": () => isVirtualized ? unref(collection).columns.size.value : void 0,
+			"aria-describedby": () => unref(describedBy),
+			"aria-multiselectable": () => unref(selection).selectionMode.value === "multiple" ? true : void 0,
+			"aria-rowcount": () => isVirtualized ? unref(collection).rows.size.value + 1 : void 0,
+			class: () => unref(composeSlotClassName)(unref(slots).content, props.class),
+			"data-allows-dragging": () => unref(dataAttr)(unref(dragState) != null),
+			"data-collection": () => unref(collectionId),
+			"data-drop-target": () => unref(dataAttr)(isRootDropTarget.value),
+			"data-slot": "table-content",
+			role: () => treeColumn.value == null ? "grid" : "treegrid",
+			style: () => tableStyle.value,
+			tabindex: () => unref(keyboard).collectionTabIndex.value,
+			onDragenter: () => _on_dragenter,
+			onDragleave: () => _on_dragleave,
+			onDragover: () => _on_dragover,
+			onDrop: () => _on_drop,
+			onFocusin: () => unref(keyboard).onFocusin,
+			onFocusout: () => unref(keyboard).onFocusout,
+			onKeydown: () => onKeydown,
+			onKeydownCapture: () => unref(typeahead).onKeydownCapture
+		}, extend(() => {
+			return createIf(() => isVirtualized, () => {
+				const n3 = t0();
+				renderEffect(() => setStyle(n3, unref(scroll)?.contentStyle.value));
+				setInsertionState(n3);
+				createSlot();
+				return n3;
+			}, () => {
+				return createSlot("default", null, null, 36);
+			}, 389);
+		}, { _: 8 }), 1);
+		setStaticTemplateRef(n7, element, null, "element");
+		return n7;
+	}
+});
+//#endregion
+export { table_content_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/table/table-content.vue.d.vue.ts

@@ -0,0 +1,30 @@
+import type { CollectionKey } from "../../composables/use-collection";
+import type { CollectionSelection } from "../../composables/use-selection-manager";
+import type { TableContentProps, TableSortDescriptor } from "./table.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<TableContentProps & {
+        onExpandedChange?: ((keys: Set<CollectionKey>) => any) | undefined;
+        onSelectionChange?: ((keys: CollectionSelection) => any) | undefined;
+        onSortChange?: ((descriptor: TableSortDescriptor) => any) | undefined;
+        "onUpdate:expandedKeys"?: ((keys: Set<CollectionKey>) => any) | undefined;
+        "onUpdate:selectedKeys"?: ((keys: CollectionSelection) => any) | undefined;
+        "onUpdate:sortDescriptor"?: ((descriptor: TableSortDescriptor) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: ((evt: "expandedChange", keys: Set<CollectionKey>) => void) & ((evt: "selectionChange", keys: CollectionSelection) => void) & ((evt: "sortChange", descriptor: TableSortDescriptor) => void) & ((evt: "update:expandedKeys", keys: Set<CollectionKey>) => void) & ((evt: "update:selectedKeys", keys: CollectionSelection) => void) & ((evt: "update:sortDescriptor", descriptor: TableSortDescriptor) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/table/table-drag-handle.js

@@ -0,0 +1,74 @@
+import { providePressResponder } from "../../composables/press-responder.js";
+import { isVirtualClick, isVirtualPointerEvent } from "../../composables/use-press.js";
+import { useTableRowContext } from "./table.context.js";
+import { computed, createSlot, defineVaporComponent, shallowRef } from "vue";
+//#region src/components/table/table-drag-handle.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var table_drag_handle_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "table-drag-handle",
+	props: { ariaLabel: {} },
+	setup(__props) {
+		const props = __props;
+		const { drag } = useTableRowContext();
+		const element = shallowRef(null);
+		/** How the last press reached this control, which is the only thing that decides what it does. */
+		let pointerType = "mouse";
+		/**
+		* Turns whatever pressable sits inside into the row's drag control.
+		*
+		* Handed down rather than rendered here, the same way `Table.ExpandTrigger` does it: the grip
+		* stays an ordinary `Button` with its own variants and states, and only the part that makes it a
+		* drag control comes from the row.
+		*
+		* **It exists for keyboard and screen reader users, not for the mouse.** The row itself is what
+		* the browser drags, and a control sitting on top of it would swallow the press that starts the
+		* drag — so `pointer-events: none` lets a mouse fall straight through to the row. Keyboard
+		* activation and a screen reader's synthetic click both bypass hit testing, so they still land
+		* here. This is React Aria's arrangement for the same button, for the same reason.
+		*/
+		providePressResponder({
+			attrs: computed(() => ({
+				...drag?.dragButtonAttrs.value,
+				"aria-label": props.ariaLabel ?? drag?.dragButtonAttrs.value["aria-label"],
+				disabled: drag?.dragButtonAttrs.value.isDisabled || void 0,
+				style: { pointerEvents: "none" }
+			})),
+			handlers: computed(() => ({
+				onClick: (event) => {
+					const resolved = isVirtualClick(event) ? "virtual" : pointerType;
+					if (resolved !== "keyboard" && resolved !== "virtual") return;
+					event.preventDefault();
+					event.stopPropagation();
+					drag?.onDragButtonPress({
+						altKey: event.altKey,
+						continuePropagation: () => {},
+						ctrlKey: event.ctrlKey,
+						metaKey: event.metaKey,
+						pointerType: resolved,
+						shiftKey: event.shiftKey,
+						shouldStopPropagation: true,
+						target: event.currentTarget ?? element.value,
+						type: "press"
+					});
+				},
+				onDragstart: () => {},
+				onKeydown: (event) => {
+					if (event.key === "Enter" || event.key === " ") pointerType = "keyboard";
+				},
+				onMousedown: () => {},
+				onPointerdown: (event) => {
+					pointerType = isVirtualPointerEvent(event) ? "virtual" : event.pointerType;
+				},
+				onPointerenter: () => {},
+				onPointerleave: () => {},
+				onPointerup: () => {}
+			})),
+			isPressed: computed(() => false),
+			registerElement: (next) => {
+				element.value = next;
+			}
+		});
+		return createSlot();
+	}
+});
+//#endregion
+export { table_drag_handle_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/table/table-drag-handle.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { TableDragHandleProps } from "./table.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<TableDragHandleProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};