@gridstorm/vue 0.1.2

package/README.md

@@ -0,0 +1,209 @@
+# @gridstorm/vue
+
+Vue 3 adapter for [GridStorm](https://grid-data-analytics-explorer.vercel.app/) -- a high-performance, headless data grid engine.
+
+## Installation
+
+```bash
+pnpm add @gridstorm/vue @gridstorm/core @gridstorm/dom-renderer
+```
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GridStorm } from '@gridstorm/vue';
+import type { ColumnDef, GridApi } from '@gridstorm/vue';
+import { sortingPlugin } from '@gridstorm/plugin-sorting';
+import { filterPlugin } from '@gridstorm/plugin-filtering';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  salary: number;
+}
+
+const columns: ColumnDef<Employee>[] = [
+  { field: 'name', headerName: 'Name', sortable: true },
+  { field: 'department', headerName: 'Department', filter: true },
+  { field: 'salary', headerName: 'Salary', width: 120 },
+];
+
+const rowData = ref<Employee[]>([
+  { id: 1, name: 'Alice', department: 'Engineering', salary: 95000 },
+  { id: 2, name: 'Bob', department: 'Marketing', salary: 72000 },
+  { id: 3, name: 'Charlie', department: 'Engineering', salary: 88000 },
+]);
+
+const gridRef = ref<InstanceType<typeof GridStorm>>();
+
+function onGridReady(api: GridApi<Employee>) {
+  console.log('Grid ready!', api.getDisplayedRowCount(), 'rows');
+}
+</script>
+
+<template>
+  <GridStorm
+    ref="gridRef"
+    :columns="columns"
+    :row-data="rowData"
+    :plugins="[sortingPlugin(), filterPlugin()]"
+    :get-row-id="(params) => String(params.data.id)"
+    :row-height="40"
+    theme="light"
+    height="400px"
+    @grid-ready="onGridReady"
+    @sort-changed="(e) => console.log('Sort:', e)"
+  />
+</template>
+```
+
+## Composables
+
+All composables must be used within a child component of `<GridStorm>`.
+
+### useGridApi
+
+Access the GridApi instance.
+
+```vue
+<script setup lang="ts">
+import { useGridApi } from '@gridstorm/vue';
+
+const api = useGridApi();
+
+function refresh() {
+  api.value?.refreshCells();
+}
+</script>
+```
+
+### useGridSort
+
+Reactive sort model and sort actions.
+
+```vue
+<script setup lang="ts">
+import { useGridSort } from '@gridstorm/vue';
+
+const { sortModel, isSorted, toggleSort, clearSort } = useGridSort();
+</script>
+
+<template>
+  <button @click="toggleSort('name')">Sort by Name</button>
+  <button v-if="isSorted" @click="clearSort()">Clear Sort</button>
+</template>
+```
+
+### useGridFilter
+
+Reactive filter model and filter actions.
+
+```vue
+<script setup lang="ts">
+import { useGridFilter } from '@gridstorm/vue';
+
+const { isFiltered, setQuickFilter, clearFilters } = useGridFilter();
+</script>
+
+<template>
+  <input
+    placeholder="Search..."
+    @input="(e) => setQuickFilter((e.target as HTMLInputElement).value)"
+  />
+  <button v-if="isFiltered" @click="clearFilters()">Clear</button>
+</template>
+```
+
+### useGridSelection
+
+Reactive selection state and selection actions.
+
+```vue
+<script setup lang="ts">
+import { useGridSelection } from '@gridstorm/vue';
+
+const { selectedCount, selectAll, deselectAll } = useGridSelection();
+</script>
+
+<template>
+  <p>{{ selectedCount }} rows selected</p>
+  <button @click="selectAll()">Select All</button>
+  <button @click="deselectAll()">Deselect All</button>
+</template>
+```
+
+### useGridPagination
+
+Reactive pagination state and navigation.
+
+```vue
+<script setup lang="ts">
+import { useGridPagination } from '@gridstorm/vue';
+
+const {
+  currentPage,
+  totalPages,
+  hasNextPage,
+  hasPreviousPage,
+  nextPage,
+  previousPage,
+} = useGridPagination();
+</script>
+
+<template>
+  <div class="pagination">
+    <button :disabled="!hasPreviousPage" @click="previousPage()">Prev</button>
+    <span>Page {{ currentPage + 1 }} of {{ totalPages }}</span>
+    <button :disabled="!hasNextPage" @click="nextPage()">Next</button>
+  </div>
+</template>
+```
+
+### useGridEvent
+
+Subscribe to grid events with automatic cleanup.
+
+```vue
+<script setup lang="ts">
+import { useGridEvent } from '@gridstorm/vue';
+
+useGridEvent('selection:changed', (e) => {
+  console.log('Selection changed:', e.selectedNodes);
+});
+
+useGridEvent('cell:clicked', (e) => {
+  console.log('Cell clicked:', e.colId, e.value);
+});
+</script>
+```
+
+## Template Ref API
+
+Access the grid API via a template ref:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GridStorm } from '@gridstorm/vue';
+
+const gridRef = ref<InstanceType<typeof GridStorm>>();
+
+function exportSelected() {
+  const api = gridRef.value?.getApi();
+  const rows = api?.getSelectedRows() ?? [];
+  console.log('Selected rows:', rows);
+}
+</script>
+
+<template>
+  <GridStorm ref="gridRef" :columns="columns" :row-data="rowData" />
+  <button @click="exportSelected">Export Selected</button>
+</template>
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,468 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@gridstorm/core');
+var domRenderer = require('@gridstorm/dom-renderer');
+
+// src/GridStorm.ts
+
+// src/types.ts
+var gridStormPropDefs = {
+  columns: {
+    type: Array,
+    required: true
+  },
+  rowData: {
+    type: Array,
+    required: true
+  },
+  plugins: {
+    type: Array,
+    default: () => []
+  },
+  getRowId: {
+    type: Function,
+    default: void 0
+  },
+  rowHeight: {
+    type: Number,
+    default: 40
+  },
+  headerHeight: {
+    type: Number,
+    default: void 0
+  },
+  theme: {
+    type: String,
+    default: "light"
+  },
+  density: {
+    type: String,
+    default: "normal"
+  },
+  defaultColDef: {
+    type: Object,
+    default: void 0
+  },
+  paginationPageSize: {
+    type: Number,
+    default: void 0
+  },
+  pagination: {
+    type: Boolean,
+    default: void 0
+  },
+  rowSelection: {
+    type: [String, Boolean],
+    default: void 0
+  },
+  editType: {
+    type: String,
+    default: void 0
+  },
+  ariaLabel: {
+    type: String,
+    default: void 0
+  },
+  height: {
+    type: [Number, String],
+    default: "100%"
+  },
+  width: {
+    type: [Number, String],
+    default: "100%"
+  },
+  containerClass: {
+    type: String,
+    default: void 0
+  }
+};
+var GRID_CONTEXT_KEY = /* @__PURE__ */ Symbol("gridstorm-context");
+function useGridContext() {
+  const context = vue.inject(GRID_CONTEXT_KEY, null);
+  if (!context) {
+    throw new Error(
+      "[GridStorm] Composable must be used within a <GridStorm> component."
+    );
+  }
+  return context;
+}
+function useStoreRef(context, selector) {
+  const value = vue.ref();
+  let unsubscribe = null;
+  function subscribe(ctx) {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+    if (!ctx) {
+      value.value = void 0;
+      return;
+    }
+    value.value = selector(ctx.engine);
+    unsubscribe = ctx.engine.store.subscribe(() => {
+      value.value = selector(ctx.engine);
+    });
+  }
+  vue.watch(context, (newCtx) => subscribe(newCtx), { immediate: true });
+  vue.onUnmounted(() => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+  });
+  return value;
+}
+function useGridApi() {
+  const context = useGridContext();
+  return vue.computed(() => context.value?.api);
+}
+function useGridEngine() {
+  const context = useGridContext();
+  return vue.computed(() => context.value?.engine);
+}
+function useGridSort() {
+  const context = useGridContext();
+  const sortModel = useStoreRef(
+    context,
+    (engine) => engine.store.getState().sortModel
+  );
+  const isSorted = vue.computed(() => (sortModel.value?.length ?? 0) > 0);
+  function setSortModel(model) {
+    context.value?.api.setSortModel(model);
+  }
+  function toggleSort(colId, multiSort = false) {
+    context.value?.engine.commandBus.dispatch("sort:toggle", {
+      colId,
+      multiSort
+    });
+  }
+  function clearSort() {
+    context.value?.api.setSortModel([]);
+  }
+  return {
+    sortModel,
+    isSorted,
+    setSortModel,
+    toggleSort,
+    clearSort
+  };
+}
+function useGridFilter() {
+  const context = useGridContext();
+  const filterModel = useStoreRef(
+    context,
+    (engine) => engine.store.getState().filterModel
+  );
+  const quickFilterText = useStoreRef(
+    context,
+    (engine) => engine.store.getState().quickFilterText
+  );
+  const isFiltered = vue.computed(() => {
+    const hasColumnFilters = Object.keys(filterModel.value ?? {}).length > 0;
+    const hasQuickFilter = (quickFilterText.value ?? "").length > 0;
+    return hasColumnFilters || hasQuickFilter;
+  });
+  function setFilterModel(model) {
+    context.value?.api.setFilterModel(model);
+  }
+  function setQuickFilter(text) {
+    context.value?.api.setQuickFilter(text);
+  }
+  function clearFilters() {
+    context.value?.api.setFilterModel({});
+    context.value?.api.setQuickFilter("");
+  }
+  return {
+    filterModel,
+    quickFilterText,
+    isFiltered,
+    setFilterModel,
+    setQuickFilter,
+    clearFilters
+  };
+}
+function useGridSelection() {
+  const context = useGridContext();
+  const selectedRowIds = useStoreRef(
+    context,
+    (engine) => engine.store.getState().selection.selectedRowIds
+  );
+  const selectedCount = vue.computed(() => selectedRowIds.value?.size ?? 0);
+  function getSelectedRows() {
+    return context.value?.api.getSelectedRows() ?? [];
+  }
+  function getSelectedNodes() {
+    return context.value?.api.getSelectedNodes() ?? [];
+  }
+  function isRowSelected(rowId) {
+    return selectedRowIds.value?.has(rowId) ?? false;
+  }
+  function selectAll() {
+    context.value?.api.selectAll();
+  }
+  function deselectAll() {
+    context.value?.api.deselectAll();
+  }
+  return {
+    selectedRowIds,
+    selectedCount,
+    getSelectedRows,
+    getSelectedNodes,
+    isRowSelected,
+    selectAll,
+    deselectAll
+  };
+}
+function useGridPagination() {
+  const context = useGridContext();
+  const paginationState = useStoreRef(
+    context,
+    (engine) => engine.store.getState().pagination
+  );
+  const currentPage = vue.computed(() => paginationState.value?.currentPage ?? 0);
+  const pageSize = vue.computed(() => paginationState.value?.pageSize ?? 100);
+  const totalRows = vue.computed(() => paginationState.value?.totalRows ?? 0);
+  const totalPages = vue.computed(
+    () => Math.max(1, Math.ceil(totalRows.value / pageSize.value))
+  );
+  const hasNextPage = vue.computed(() => currentPage.value < totalPages.value - 1);
+  const hasPreviousPage = vue.computed(() => currentPage.value > 0);
+  function goToPage(page) {
+    context.value?.api.paginationGoToPage(page);
+  }
+  function nextPage() {
+    if (hasNextPage.value) {
+      context.value?.api.paginationGoToPage(currentPage.value + 1);
+    }
+  }
+  function previousPage() {
+    if (hasPreviousPage.value) {
+      context.value?.api.paginationGoToPage(currentPage.value - 1);
+    }
+  }
+  function firstPage() {
+    context.value?.api.paginationGoToPage(0);
+  }
+  function lastPage() {
+    context.value?.api.paginationGoToPage(totalPages.value - 1);
+  }
+  return {
+    currentPage,
+    totalPages,
+    pageSize,
+    totalRows,
+    hasNextPage,
+    hasPreviousPage,
+    goToPage,
+    nextPage,
+    previousPage,
+    firstPage,
+    lastPage
+  };
+}
+function useGridEvent(event, handler) {
+  const context = useGridContext();
+  let unsubscribe = null;
+  vue.watch(
+    context,
+    (ctx) => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+      if (ctx) {
+        unsubscribe = ctx.engine.eventBus.on(event, handler);
+      }
+    },
+    { immediate: true }
+  );
+  vue.onUnmounted(() => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+  });
+}
+
+// src/GridStorm.ts
+var GridStorm = vue.defineComponent({
+  name: "GridStorm",
+  props: gridStormPropDefs,
+  emits: [
+    "gridReady",
+    "rowDataChanged",
+    "selectionChanged",
+    "sortChanged",
+    "filterChanged",
+    "cellValueChanged",
+    "cellClicked",
+    "cellDoubleClicked",
+    "rowClicked",
+    "paginationChanged",
+    "columnResized"
+  ],
+  setup(props, { emit, expose }) {
+    const containerRef = vue.ref(null);
+    let engine = null;
+    let renderer = null;
+    const eventUnsubscribers = [];
+    function buildConfig() {
+      return {
+        columns: props.columns,
+        rowData: props.rowData,
+        plugins: props.plugins,
+        getRowId: props.getRowId,
+        rowHeight: props.rowHeight,
+        headerHeight: props.headerHeight,
+        defaultColDef: props.defaultColDef,
+        paginationPageSize: props.paginationPageSize,
+        pagination: props.pagination,
+        rowSelection: props.rowSelection,
+        editType: props.editType,
+        ariaLabel: props.ariaLabel
+      };
+    }
+    function subscribeToEvents() {
+      if (!engine) return;
+      const eb = engine.eventBus;
+      eventUnsubscribers.push(
+        eb.on("rowData:changed", (e) => emit("rowDataChanged", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("selection:changed", (e) => emit("selectionChanged", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("column:sort:changed", (e) => emit("sortChanged", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("filter:changed", (e) => emit("filterChanged", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("cell:valueChanged", (e) => emit("cellValueChanged", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("cell:clicked", (e) => emit("cellClicked", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("cell:doubleClicked", (e) => emit("cellDoubleClicked", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("row:clicked", (e) => emit("rowClicked", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("pagination:changed", (e) => emit("paginationChanged", e))
+      );
+      eventUnsubscribers.push(
+        eb.on("column:resized", (e) => emit("columnResized", e))
+      );
+    }
+    const gridContext = vue.shallowRef(null);
+    vue.provide(GRID_CONTEXT_KEY, gridContext);
+    function initGrid() {
+      if (!containerRef.value) return;
+      const config = buildConfig();
+      engine = core.createGrid(config);
+      gridContext.value = {
+        engine,
+        api: engine.api
+      };
+      renderer = new domRenderer.DomRenderer({
+        container: containerRef.value,
+        engine
+      });
+      renderer.mount();
+      subscribeToEvents();
+      emit("gridReady", engine.api);
+    }
+    function destroyGrid() {
+      for (const unsub of eventUnsubscribers) {
+        unsub();
+      }
+      eventUnsubscribers.length = 0;
+      renderer?.destroy();
+      renderer = null;
+      engine?.destroy();
+      engine = null;
+      gridContext.value = null;
+    }
+    vue.onMounted(() => {
+      initGrid();
+    });
+    vue.onBeforeUnmount(() => {
+      destroyGrid();
+    });
+    vue.watch(
+      () => props.rowData,
+      (newData) => {
+        if (engine && newData) {
+          engine.api.setRowData(newData);
+        }
+      },
+      { deep: false }
+    );
+    vue.watch(
+      () => props.columns,
+      (newCols) => {
+        if (engine && newCols) {
+          engine.api.setColumnDefs(newCols);
+        }
+      },
+      { deep: false }
+    );
+    vue.watch(
+      () => props.theme,
+      (newTheme) => {
+        if (containerRef.value && newTheme) {
+          containerRef.value.setAttribute("data-theme", newTheme);
+        }
+      }
+    );
+    vue.watch(
+      () => props.density,
+      (newDensity) => {
+        if (containerRef.value && newDensity) {
+          containerRef.value.setAttribute("data-density", newDensity);
+        }
+      }
+    );
+    expose({
+      /**
+       * Get the GridApi instance.
+       * Returns undefined if the grid has not been initialized yet.
+       */
+      getApi: () => engine?.api,
+      /**
+       * Get the GridEngine instance.
+       * Returns undefined if the grid has not been initialized yet.
+       */
+      getEngine: () => engine
+    });
+    return () => {
+      const heightStyle = typeof props.height === "number" ? `${props.height}px` : props.height;
+      const widthStyle = typeof props.width === "number" ? `${props.width}px` : props.width;
+      return vue.h("div", {
+        ref: containerRef,
+        class: ["gridstorm-wrapper", props.containerClass].filter(Boolean).join(" "),
+        "data-theme": props.theme,
+        "data-density": props.density,
+        style: {
+          width: widthStyle,
+          height: heightStyle
+        }
+      });
+    };
+  }
+});
+
+exports.GRID_CONTEXT_KEY = GRID_CONTEXT_KEY;
+exports.GridStorm = GridStorm;
+exports.useGridApi = useGridApi;
+exports.useGridEngine = useGridEngine;
+exports.useGridEvent = useGridEvent;
+exports.useGridFilter = useGridFilter;
+exports.useGridPagination = useGridPagination;
+exports.useGridSelection = useGridSelection;
+exports.useGridSort = useGridSort;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map