@cobre-npm/ds-v3 0.140.0 → 0.142.0

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

@@ -51,6 +51,31 @@ export interface CobreTableProps<T> {
      * focus, keyboard handling).
      */
     enableColumnReorder?: boolean;
+    /**
+     * Enable pinning columns to the left or right edge of the table, staying visible during
+     * horizontal scroll. Requires the table to also control columnPinning state
+     * (state: { columnPinning } + onColumnPinningChange) for the pin to persist — this prop only
+     * toggles the sticky rendering/affordances.
+     */
+    enableColumnPinning?: boolean;
+    /**
+     * Labels for the pin/unpin actions in each column's kebab menu (shown when
+     * enableColumnPinning is on). Defaults to Spanish, matching this component's other
+     * built-in text (e.g. emptyStateProps) — pass overrides to localize.
+     */
+    pinMenuLabels?: {
+        pinLeft?: string;
+        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<{
@@ -65,7 +90,14 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             columnId: string;
             method: ColumnReorderMethod;
         }) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onColumn-reorder" | "onColumn-reorder-cancel"> & CobreTableProps<T> & Partial<{}>> & import("vue").PublicProps;
+        readonly "onColumn-pin"?: ((payload: {
+            columnId: string;
+            side: "left" | "right";
+        }) => any) | undefined;
+        readonly "onColumn-unpin"?: ((payload: {
+            columnId: string;
+        }) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onColumn-reorder" | "onColumn-reorder-cancel" | "onColumn-pin" | "onColumn-unpin"> & CobreTableProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
@@ -85,6 +117,11 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     }) => void) & ((evt: "column-reorder-cancel", payload: {
         columnId: string;
         method: ColumnReorderMethod;
+    }) => void) & ((evt: "column-pin", payload: {
+        columnId: string;
+        side: "left" | "right";
+    }) => void) & ((evt: "column-unpin", payload: {
+        columnId: string;
     }) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -0,0 +1,33 @@
+import type { ComputedRef, CSSProperties } from 'vue';
+import type { Column, Table as TanStackTable, ColumnPinningPosition } from '@tanstack/vue-table';
+export interface ColumnPinningEmits {
+    (event: 'column-pin', payload: {
+        columnId: string;
+        side: 'left' | 'right';
+    }): void;
+    (event: 'column-unpin', payload: {
+        columnId: string;
+    }): void;
+}
+/**
+ * Column pinning for CobreTable, wired to a TanStack table instance. Requires the table to
+ * control columnPinning state (state: { columnPinning } + onColumnPinningChange) for pin
+ * changes to persist — this composable only mutates table.setColumnPinning(); persistence
+ * 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. 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>, 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>, emit: ColumnReorderEmits): {
-    orderedColumnIds: import("vue").Ref<string[], string[]>;
+export declare function useColumnReorder<T>(table: TanStackTable<T>, isEnabled: ComputedRef<boolean>, isPinningEnabled: ComputedRef<boolean>, emit: ColumnReorderEmits): {
+    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.140.0",
+  "version": "0.142.0",
   "type": "module",
   "packageManager": "pnpm@11.0.4",
   "engines": {