@alaarab/ogrid-vue-radix 2.5.4 → 2.5.6

package/README.md

@@ -1,103 +1,28 @@
 # @alaarab/ogrid-vue-radix
 
-Lightweight Vue 3 data grid with minimal dependencies. Built with Headless UI Vue for a clean, accessible interface.
+OGrid data grid for Vue 3, built with Headless UI Vue.
 
-## Installation
+## Install
 
 ```bash
 npm install @alaarab/ogrid-vue-radix
 ```
 
-## Quick Start
+## Usage
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue';
 import { OGrid } from '@alaarab/ogrid-vue-radix';
 
-const columns = ref([
-  { columnId: 'id', name: 'ID', type: 'numeric' },
-  { columnId: 'name', name: 'Name', type: 'text', editable: true },
-  { columnId: 'email', name: 'Email', type: 'text', editable: true },
-  { columnId: 'age', name: 'Age', type: 'numeric', editable: true }
-]);
-
-const data = ref([
-  { id: 1, name: 'Alice', email: 'alice@example.com', age: 28 },
-  { id: 2, name: 'Bob', email: 'bob@example.com', age: 32 },
-  { id: 3, name: 'Charlie', email: 'charlie@example.com', age: 25 }
-]);
+const columns = [
+  { columnId: 'name', name: 'Name', sortable: true, editable: true },
+  { columnId: 'department', name: 'Department', filterable: { type: 'multiSelect' } },
+];
 </script>
 
 <template>
-  <OGrid
-    :columns="columns"
-    :data="data"
-    :getRowId="(row) => row.id"
-    :editable="true"
-    :cellSelection="true"
-  />
+  <OGrid :columns="columns" :data="rows" :getRowId="(r) => r.id" />
 </template>
 ```
 
-## Why OGrid Vue Radix?
-
-**Lightweight alternative** to Vuetify and PrimeVue data grids:
-- 📦 Minimal bundle size (~80KB gzipped)
-- 🎨 Built with Headless UI Vue - no large component library required
-- 🚀 Same powerful features as OGrid Vue Vuetify/PrimeVue
-- 💅 Clean, modern design with CSS variables for easy customization
-
-## Features
-
-- ✅ Sorting, filtering, and pagination
-- ✅ Cell editing (inline text, select, checkbox, date)
-- ✅ Cell and row selection
-- ✅ Column resizing and reordering
-- ✅ Column pinning (sticky left/right)
-- ✅ Virtual scrolling for large datasets
-- ✅ CSV export
-- ✅ Keyboard navigation
-- ✅ Context menu (copy, cut, paste)
-- ✅ Undo/redo
-- ✅ Server-side data sources
-- ✅ Column groups (multi-level headers)
-- ✅ Sidebar panels (columns, filters)
-- ✅ TypeScript support
-
-## Documentation
-
-Full documentation: **[ogrid.dev](https://ogrid.dev)**
-- [Getting Started](https://ogrid.dev/docs/quick-start)
-- [API Reference](https://ogrid.dev/docs/api/props)
-- [Examples](https://ogrid.dev/docs/examples)
-
-## Customization
-
-Customize appearance with CSS variables:
-
-```css
-:root {
-  --ogrid-border: #e0e0e0;
-  --ogrid-bg: #ffffff;
-  --ogrid-header-bg: #f5f5f5;
-  --ogrid-primary: #0066cc;
-  --ogrid-active-cell-border: #0066cc;
-  --ogrid-selected-cell-bg: #e3f2fd;
-}
-```
-
-## Architecture
-
-OGrid Vue Radix is part of the OGrid framework family:
-- **@alaarab/ogrid-core** - Pure TypeScript types and utilities
-- **@alaarab/ogrid-vue** - Vue 3 composables and headless components
-- **@alaarab/ogrid-vue-radix** - Headless UI implementation (this package)
-- **@alaarab/ogrid-vue-vuetify** - Vuetify 3 implementation
-- **@alaarab/ogrid-vue-primevue** - PrimeVue 4 implementation
-
-All Vue packages share the same headless core and expose identical APIs.
-
-## License
-
-MIT © Ala Arab
+See the [OGrid docs](https://alaarab.github.io/ogrid/) for full documentation.

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,28 +1,15 @@
-import { h as i } from "vue";
-import { createInlineCellEditor as l } from "@alaarab/ogrid-vue";
-const p = l({
-  renderCheckbox: ({ checked: r, onChange: t, onCancel: n }) => i("input", {
+import { h as c } from "vue";
+import { createInlineCellEditor as n } from "@alaarab/ogrid-vue";
+const p = n({
+  renderCheckbox: ({ checked: o, onChange: r, onCancel: t }) => c("input", {
     type: "checkbox",
-    checked: r,
+    checked: o,
     class: "ogrid-checkbox",
     style: { width: "18px", height: "18px", cursor: "pointer", accentColor: "var(--ogrid-accent, #0078d4)" },
-    onChange: (e) => t(e.target.checked),
+    onChange: (e) => r(e.target.checked),
     onKeydown: (e) => {
-      e.key === "Escape" && (e.preventDefault(), n());
+      e.key === "Escape" && (e.preventDefault(), t());
     }
-  }),
-  renderDatePicker: ({ value: r, onChange: t, onCancel: n }) => i("input", {
-    type: "text",
-    value: r,
-    style: { width: "100%", height: "100%", border: "none", outline: "none", padding: "0 4px", fontSize: "inherit" },
-    onVnodeMounted: (e) => {
-      const o = e.el;
-      o && (o.focus(), o.select());
-    },
-    onKeydown: (e) => {
-      e.key === "Enter" && (e.preventDefault(), t(e.target.value)), e.key === "Escape" && (e.preventDefault(), n()), e.key === "Tab" && (e.preventDefault(), t(e.target.value));
-    },
-    onBlur: (e) => t(e.target.value)
   })
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-radix",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "description": "OGrid Vue Radix – Lightweight data grid with sorting, filtering, pagination, column chooser, and CSV export. Built with Headless UI Vue.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -42,7 +42,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.5.4"
+    "@alaarab/ogrid-vue": "2.5.5"
   },
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",