@rowick/vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rowick contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @rowick/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue adapter for Rowick.
+
+Use this package when you want Vue bindings for the framework-agnostic core without the optional styled UI.
+
+## Install
+
+```bash
+npm install @rowick/vue vue
+```
+
+## Usage
+
+```ts
+import { computed } from "vue";
+import { createColumnHelper, useGrid, useGridSelector } from "@rowick/vue";
+
+const column = createColumnHelper<{ id: string; name: string }>();
+const options = computed(() => ({
+  data: [{ id: "1", name: "Mina" }],
+  columns: [column.accessor("name", { header: "Name" })],
+  getRowId: (row: { id: string }) => row.id,
+}));
+const { grid, state, dispose } = useGrid(options);
+const { selected: selectedRowCount } = useGridSelector(
+  grid,
+  (currentGrid) => Object.keys(currentGrid.getState().rowSelection).length,
+);
+```
+
+`state` is a shallow ref updated by core subscriptions; `dispose` is called automatically inside a Vue effect scope. Use [`@rowick/vue-ui`](https://www.npmjs.com/package/@rowick/vue-ui) for the maintained styled grid.
+
+`useGridSelector` returns a shallow `selected` ref and updates it only when the
+selected value changes. Its subscription is also disposed with the active Vue
+effect scope, or can be disposed manually through the returned `dispose` function.

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { GridOptions, GridSelectorSubscriptionOptions, Grid, GridSelector } from '@rowick/core';
+export { AccessorColumnOptions, AccessorFnColumnDef, AccessorKey, AccessorKeyColumnDef, AnyColumnDef, CellContext, CellCoordinate, CellEditEvent, CellEditEventParams, CellEditHistoryAction, CellEditHistoryState, CellEditParserContext, CellEditPhase, CellEditingState, CellEditorContext, CellFillOptions, CellInteractionEvent, CellInteractionEventParams, CellRange, CellRangeSelectionState, ClipboardCellContext, ClipboardCopyOptions, ClipboardPasteOptions, Column, ColumnDef, ColumnFilter, ColumnFiltersState, ColumnHelper, ColumnId, ColumnMovePosition, ColumnOrderState, ColumnPinningPosition, ColumnPinningState, ColumnResizeEvent, ColumnResizeEventParams, ColumnResizePhase, ColumnSizingState, ColumnVisibilityState, DisplayColumnDef, ExpandedState, FilterFn, FitColumnsToWidthOptions, Grid, GridCacheDiagnostics, GridCacheDiagnosticsEntry, GridCacheKey, GridOptions, GridSelector, GridSelectorListener, GridSelectorSubscriptionOptions, GridState, GroupColumnDef, GroupingState, Header, HeaderContext, HeaderGroup, MoveFocusOptions, PaginationState, Row, RowId, RowInteractionEvent, RowInteractionEventParams, RowModel, RowSelectionCleanupScope, RowSelectionState, SortFn, SortingRule, SortingState, Updater, createColumnHelper, createGrid, fitColumnsToWidth } from '@rowick/core';
+import { MaybeRefOrGetter, ShallowRef } from 'vue';
+
+interface VueGrid<TData> {
+    grid: Grid<TData>;
+    state: ShallowRef<ReturnType<Grid<TData>["getState"]>>;
+    dispose: () => void;
+}
+type UseGridOptions<TData> = MaybeRefOrGetter<GridOptions<TData>>;
+interface VueGridSelector<TSelected> {
+    selected: ShallowRef<TSelected>;
+    dispose: () => void;
+}
+type UseGridSelectorOptions<TSelected> = Pick<GridSelectorSubscriptionOptions<TSelected>, "equalityFn">;
+declare function useGrid<TData>(options: UseGridOptions<TData>): VueGrid<TData>;
+declare function useGridSelector<TData, TSelected>(grid: Grid<TData>, selector: GridSelector<TData, TSelected>, options?: UseGridSelectorOptions<TSelected>): VueGridSelector<TSelected>;
+
+export { type UseGridOptions, type UseGridSelectorOptions, type VueGrid, type VueGridSelector, useGrid, useGridSelector };

package/dist/index.js

@@ -0,0 +1,64 @@
+// src/index.ts
+import {
+  createGrid
+} from "@rowick/core";
+import {
+  getCurrentScope,
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  triggerRef,
+  watchEffect
+} from "vue";
+import { createColumnHelper, fitColumnsToWidth } from "@rowick/core";
+function useGrid(options) {
+  const grid = createGrid(toValue(options));
+  const state = shallowRef(grid.getState());
+  const unsubscribe = grid.subscribe(() => {
+    state.value = grid.getState();
+    triggerRef(state);
+  });
+  const stopOptions = watchEffect(() => {
+    grid.setOptions(toValue(options), { notify: false });
+    grid.reconcileState();
+    state.value = grid.getState();
+    triggerRef(state);
+  });
+  const dispose = () => {
+    stopOptions();
+    unsubscribe();
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(dispose);
+  }
+  return {
+    grid,
+    state,
+    dispose
+  };
+}
+function useGridSelector(grid, selector, options) {
+  const selected = shallowRef(selector(grid));
+  const dispose = grid.subscribeSelector(
+    selector,
+    (nextValue) => {
+      if (Object.is(selected.value, nextValue)) {
+        triggerRef(selected);
+      } else {
+        selected.value = nextValue;
+      }
+    },
+    options
+  );
+  if (getCurrentScope()) {
+    onScopeDispose(dispose);
+  }
+  return { selected, dispose };
+}
+export {
+  createColumnHelper,
+  createGrid,
+  fitColumnsToWidth,
+  useGrid,
+  useGridSelector
+};

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@rowick/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Vue adapter for Rowick.",
+  "keywords": [
+    "data-grid",
+    "grid",
+    "table",
+    "vue",
+    "adapter"
+  ],
+  "homepage": "https://github.com/Goatshave/rowick/tree/main/packages/vue#readme",
+  "bugs": {
+    "url": "https://github.com/Goatshave/rowick/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "check": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rowick/core": "0.1.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.44"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Goatshave/rowick.git",
+    "directory": "packages/vue"
+  }
+}