@cobre-npm/ds-v3 0.141.0 → 0.142.0

package/dist/types/components/organisms/CobreTable/CobreTable.vue.d.ts

@@ -68,6 +68,14 @@ export interface CobreTableProps<T> {
         pinRight?: string;
         unpin?: string;
     };
+    /**
+     * Enable dragging a column header's right edge to resize it live, respecting each column's
+     * minSize/maxSize. Requires the table to also set columnResizeMode: 'onChange' (so width
+     * updates while dragging, not just on release) and control columnSizing state
+     * (state: { columnSizing } + onColumnSizingChange) for the new size to persist — this prop
+     * only toggles the resize handle affordance.
+     */
+    enableColumnResizing?: boolean;
 }
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{

package/dist/types/components/organisms/CobreTable/useColumnGrouping.d.ts

@@ -0,0 +1,24 @@
+import type { Table as TanStackTable } from '@tanstack/vue-table';
+export interface ColumnGroupingColumnMeta {
+    /**
+     * Id of this column's "leader" column. When set, this column moves and pins as a single
+     * unit with that leader instead of independently — for columns without their own header
+     * that ride along a primary one (e.g. a currency code or country flag next to an amount
+     * column).
+     */
+    groupWith?: string;
+}
+/**
+ * Column grouping for CobreTable: reads the `meta.groupWith` primitive off each ColumnDef —
+ * no enable flag, it's always honored wherever set — so a handful of related columns without
+ * their own header move/pin as a unit with a "leader" column instead of independently. Purely
+ * derived from static ColumnDef meta plus the table's current columns, no state of its own —
+ * useColumnReorder and useColumnPinning each call `canonicalizeOrder` at the exact points
+ * where they'd otherwise commit an order that could split a group, and read `isGroupFollower`
+ * to exclude followers from independent drag/pin.
+ */
+export declare function useColumnGrouping<T>(table: TanStackTable<T>): {
+    isGroupFollower: (columnId: string) => boolean;
+    getGroupFollowerIds: (leaderId: string) => string[];
+    canonicalizeOrder: (order: string[]) => string[];
+};

package/dist/types/components/organisms/CobreTable/useColumnPinning.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, CSSProperties, Ref } from 'vue';
+import type { ComputedRef, CSSProperties } from 'vue';
 import type { Column, Table as TanStackTable, ColumnPinningPosition } from '@tanstack/vue-table';
 export interface ColumnPinningEmits {
     (event: 'column-pin', payload: {
@@ -16,12 +16,18 @@ export interface ColumnPinningEmits {
  * is the consumer's responsibility (e.g. useDataTable).
  *
  * Sticky offsets come straight from TanStack's own column.getStart/getAfter — no hand-rolled
- * offset math needed. The one thing this composable owns is repartitioning `orderedColumnIds`
- * on pin/unpin so pinned columns render at the table edges.
+ * offset math needed. Rendering pinned columns at the table edges is useColumnReorder's own
+ * orderedColumnIds computed, which reads this same columnPinning state directly — this
+ * composable only mutates it (via column.pin()), it doesn't reorder anything itself.
+ *
+ * A column with meta.groupWith (see useColumnGrouping) has no pin state of its own — pinning
+ * a leader cascades to its followers by adding all of them to columnPinning.left/right
+ * together, so TanStack's own getStart/getAfter keep working unmodified for followers too.
  */
-export declare function useColumnPinning<T>(table: TanStackTable<T>, isEnabled: ComputedRef<boolean>, orderedColumnIds: Ref<string[]>, emit: ColumnPinningEmits): {
+export declare function useColumnPinning<T>(table: TanStackTable<T>, isEnabled: ComputedRef<boolean>, emit: ColumnPinningEmits): {
     getIsPinned: (columnId: string) => ColumnPinningPosition;
     isColumnIdPinned: (columnId: string) => boolean;
     pinColumn: (columnId: string, side: ColumnPinningPosition) => void;
     pinnedStyleFor: (column: Column<T>, baseLeftOffsetPx?: number) => CSSProperties;
+    isPinnedBoundary: (column: Column<T>) => boolean;
 };

package/dist/types/components/organisms/CobreTable/useColumnReorder.d.ts

@@ -1,5 +1,5 @@
-import { type ComputedRef, type ComponentPublicInstance } from 'vue';
-import type { Table as TanStackTable, Header, HeaderGroup } from '@tanstack/vue-table';
+import { type ComponentPublicInstance, type ComputedRef } from 'vue';
+import type { Header, HeaderGroup, Table as TanStackTable } from '@tanstack/vue-table';
 /** Method used to trigger a column reorder */
 export type ColumnReorderMethod = 'pointer' | 'keyboard';
 export interface ColumnReorderEmits {
@@ -16,13 +16,22 @@ export interface ColumnReorderEmits {
     }): void;
 }
 /**
- * Drag-and-drop and keyboard column reordering for CobreTable, wired to a TanStack table
- * instance. Requires the table to control columnOrder state (state: { columnOrder } +
- * onColumnOrderChange) for the new order to persist — this composable only mutates
- * table.setColumnOrder(); persistence is the consumer's responsibility (e.g. useDataTable).
+ * Drag-and-drop and keyboard column reordering for CobreTable,
+ * wired to a TanStack table instance.
+ *
+ * Requires the table to control columnOrder state:
+ *
+ * state: { columnOrder }
+ * onColumnOrderChange
+ *
+ * Structural headers such as bulk actions and row actions are
+ * excluded from FormKit's draggable nodes through `draggable`.
+ *
+ * Actual TanStack columns that cannot be reordered are excluded
+ * through `draggableValue`.
  */
 export declare function useColumnReorder<T>(table: TanStackTable<T>, isEnabled: ComputedRef<boolean>, isPinningEnabled: ComputedRef<boolean>, emit: ColumnReorderEmits): {
-    orderedColumnIds: import("vue").Ref<string[], string[]>;
+    orderedColumnIds: ComputedRef<string[]>;
     setHeaderRowEl: (el: Element | ComponentPublicInstance | null) => void;
     setHeaderElRef: (columnId: string, el: Element | ComponentPublicInstance | null) => void;
     isColumnIdDraggable: (columnId: string) => boolean;

package/dist/types/components/organisms/CobreTable/useColumnResizing.d.ts

@@ -0,0 +1,14 @@
+import type { ComputedRef, CSSProperties } from 'vue';
+import type { Column, Header } from '@tanstack/vue-table';
+/**
+ * Column resizing for CobreTable, driven by TanStack's columnSizing state and
+ * header.getResizeHandler(). Requires the table to also set columnResizeMode: 'onChange' (so
+ * width updates while dragging, not just on release) and control columnSizing state
+ * (state: { columnSizing } + onColumnSizingChange) for the new size to persist — persistence
+ * is the consumer's responsibility (e.g. useDataTable).
+ */
+export declare function useColumnResizing<T>(isEnabled: ComputedRef<boolean>): {
+    isColumnResizable: (column: Column<T, unknown>) => boolean;
+    resizingStyleFor: (column: Column<T, unknown>) => CSSProperties;
+    handleResizeStart: (event: MouseEvent | TouchEvent, header: Header<T, unknown>) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cobre-npm/ds-v3",
-  "version": "0.141.0",
+  "version": "0.142.0",
   "type": "module",
   "packageManager": "pnpm@11.0.4",
   "engines": {