@cobre-npm/ds-v3 0.139.2 → 0.141.0

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

@@ -1,5 +1,6 @@
 import type { Table as TanStackTable, ColumnDef } from '@tanstack/vue-table';
 import type { RowAction } from '../../atoms/CobreRowActions/interfaces/CobreRowActions.interface';
+import { type ColumnReorderMethod } from './useColumnReorder';
 /**
  * Configuration for the empty state display
  */
@@ -22,6 +23,7 @@ export interface EmptyStateProps {
  * - Loading skeleton state
  * - Custom empty state display
  * - Slot-based custom cell rendering
+ * - Column reordering via drag-and-drop or keyboard (opt-in, see enableColumnReorder)
  */
 export interface CobreTableProps<T> {
     /** TanStack Vue Table instance (created with useDataTable or useVueTable) */
@@ -42,9 +44,52 @@ export interface CobreTableProps<T> {
     onRowClick?: (row: T) => void;
     /** Configuration for empty state display (title, description, icon) */
     emptyStateProps?: EmptyStateProps;
+    /**
+     * Enable drag-and-drop and keyboard column reordering. Requires the table to also control
+     * columnOrder state (state: { columnOrder } + onColumnOrderChange) for the new order to
+     * take effect and persist — this prop only toggles the UI affordances (draggable headers,
+     * 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;
+    };
 }
 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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & CobreTableProps<T> & Partial<{}>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onColumn-reorder"?: ((payload: {
+            columnId: string;
+            fromIndex: number;
+            toIndex: number;
+            columnOrder: string[];
+            method: ColumnReorderMethod;
+        }) => any) | undefined;
+        readonly "onColumn-reorder-cancel"?: ((payload: {
+            columnId: string;
+            method: ColumnReorderMethod;
+        }) => any) | undefined;
+        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: {
@@ -55,7 +100,21 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         'empty-state'?: (props: {}) => any;
     };
-    emit: {};
+    emit: ((evt: "column-reorder", payload: {
+        columnId: string;
+        fromIndex: number;
+        toIndex: number;
+        columnOrder: string[];
+        method: ColumnReorderMethod;
+    }) => 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/useColumnPinning.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, CSSProperties, Ref } 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. The one thing this composable owns is repartitioning `orderedColumnIds`
+ * on pin/unpin so pinned columns render at the table edges.
+ */
+export declare function useColumnPinning<T>(table: TanStackTable<T>, isEnabled: ComputedRef<boolean>, orderedColumnIds: Ref<string[]>, emit: ColumnPinningEmits): {
+    getIsPinned: (columnId: string) => ColumnPinningPosition;
+    isColumnIdPinned: (columnId: string) => boolean;
+    pinColumn: (columnId: string, side: ColumnPinningPosition) => void;
+    pinnedStyleFor: (column: Column<T>, baseLeftOffsetPx?: number) => CSSProperties;
+};

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

@@ -0,0 +1,32 @@
+import { type ComputedRef, type ComponentPublicInstance } from 'vue';
+import type { Table as TanStackTable, Header, HeaderGroup } from '@tanstack/vue-table';
+/** Method used to trigger a column reorder */
+export type ColumnReorderMethod = 'pointer' | 'keyboard';
+export interface ColumnReorderEmits {
+    (event: 'column-reorder', payload: {
+        columnId: string;
+        fromIndex: number;
+        toIndex: number;
+        columnOrder: string[];
+        method: ColumnReorderMethod;
+    }): void;
+    (event: 'column-reorder-cancel', payload: {
+        columnId: string;
+        method: ColumnReorderMethod;
+    }): 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).
+ */
+export declare function useColumnReorder<T>(table: TanStackTable<T>, isEnabled: ComputedRef<boolean>, isPinningEnabled: ComputedRef<boolean>, emit: ColumnReorderEmits): {
+    orderedColumnIds: import("vue").Ref<string[], string[]>;
+    setHeaderRowEl: (el: Element | ComponentPublicInstance | null) => void;
+    setHeaderElRef: (columnId: string, el: Element | ComponentPublicInstance | null) => void;
+    isColumnIdDraggable: (columnId: string) => boolean;
+    getHeadersForColumn: (headerGroup: HeaderGroup<T>, columnId: string) => Header<T, unknown>[];
+    grabbedColumnId: import("vue").Ref<string | null, string | null>;
+    onHeaderKeydown: (event: KeyboardEvent, columnId: string) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cobre-npm/ds-v3",
-  "version": "0.139.2",
+  "version": "0.141.0",
   "type": "module",
   "packageManager": "pnpm@11.0.4",
   "engines": {
@@ -28,6 +28,7 @@
     "test": "test-storybook"
   },
   "dependencies": {
+    "@formkit/drag-and-drop": "^0.6.1",
     "@popperjs/core": "^2.11.8",
     "@tanstack/vue-table": "^8.21.3",
     "@vueuse/components": "^10.11.0",