@alaarab/ogrid-vue 2.1.2 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,12 +9,12 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     },
     "./styles/*": "./dist/esm/styles/*"
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/copy-css.js",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json && node scripts/copy-css.js",
     "test": "jest --passWithNoTests"
   },
   "keywords": [
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.2"
+    "@alaarab/ogrid-core": "2.1.4"
   },
   "peerDependencies": {
     "vue": "^3.3.0"

package/dist/esm/components/MarchingAntsOverlay.js

@@ -1,144 +0,0 @@
-/**
- * MarchingAntsOverlay — Renders range overlays on top of the grid:
- *
- * 1. **Selection range**: solid green border around the current selection
- * 2. **Copy/Cut range**: animated dashed border (marching ants) like Excel
- *
- * Uses SVG rects positioned via cell data-attribute measurements.
- */
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, h, toValue } from 'vue';
-import { Z_INDEX, measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
-export const MarchingAntsOverlay = defineComponent({
-    name: 'MarchingAntsOverlay',
-    props: {
-        /** Ref to the positioned container that wraps the table (must have position: relative) */
-        containerRef: { type: Object, required: true },
-        /** Current selection range — solid green border */
-        selectionRange: { type: Object, default: null },
-        /** Copy range — animated dashed border */
-        copyRange: { type: Object, default: null },
-        /** Cut range — animated dashed border */
-        cutRange: { type: Object, default: null },
-        /** Column offset — 1 when checkbox column is present, else 0 */
-        colOffset: { type: Number, required: true },
-        /** Items array — triggers re-measurement when data changes (e.g., sorting) */
-        items: { type: Array, required: true },
-        /** Visible columns — triggers re-measurement when columns are hidden/shown */
-        visibleColumns: { type: Array, default: undefined },
-        /** Column sizing overrides — triggers re-measurement when columns are resized */
-        columnSizingOverrides: { type: Object, required: true },
-        /** Column order — triggers re-measurement when columns are reordered */
-        columnOrder: { type: Array, default: undefined },
-    },
-    setup(props) {
-        const selRect = ref(null);
-        const clipRect = ref(null);
-        let rafId = 0;
-        let ro;
-        const clipRange = computed(() => props.copyRange ?? props.cutRange);
-        const measureAll = () => {
-            // Use toValue to handle both Ref<HTMLElement> and raw HTMLElement
-            // (Vue templates may auto-unwrap refs passed as props)
-            const container = toValue(props.containerRef);
-            if (!container) {
-                selRect.value = null;
-                clipRect.value = null;
-                return;
-            }
-            selRect.value = props.selectionRange ? measureRange(container, props.selectionRange, props.colOffset) : null;
-            clipRect.value = clipRange.value ? measureRange(container, clipRange.value, props.colOffset) : null;
-        };
-        // Inject keyframes on mount
-        onMounted(() => {
-            injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
-        });
-        // Measure when any range changes; re-measure on resize, column changes, data changes
-        watch([() => props.selectionRange, clipRange, () => toValue(props.containerRef), () => props.items, () => props.visibleColumns, () => props.columnSizingOverrides, () => props.columnOrder], () => {
-            if (!props.selectionRange && !clipRange.value) {
-                selRect.value = null;
-                clipRect.value = null;
-                return;
-            }
-            // Delay one frame so cells are rendered
-            rafId = requestAnimationFrame(measureAll);
-            const container = toValue(props.containerRef);
-            if (container) {
-                ro?.disconnect();
-                ro = new ResizeObserver(measureAll);
-                ro.observe(container);
-            }
-        }, { immediate: true });
-        onUnmounted(() => {
-            cancelAnimationFrame(rafId);
-            ro?.disconnect();
-        });
-        const clipRangeMatchesSel = computed(() => {
-            const sel = props.selectionRange;
-            const clip = clipRange.value;
-            return (sel != null &&
-                clip != null &&
-                sel.startRow === clip.startRow &&
-                sel.startCol === clip.startCol &&
-                sel.endRow === clip.endRow &&
-                sel.endCol === clip.endCol);
-        });
-        return () => {
-            if (!selRect.value && !clipRect.value)
-                return null;
-            return h('div', { style: { position: 'relative' } }, [
-                // Selection range: solid green border (hidden when clipboard range overlaps)
-                selRect.value && !clipRangeMatchesSel.value ? h('svg', {
-                    style: {
-                        position: 'absolute',
-                        top: `${selRect.value.top}px`,
-                        left: `${selRect.value.left}px`,
-                        width: `${selRect.value.width}px`,
-                        height: `${selRect.value.height}px`,
-                        pointerEvents: 'none',
-                        zIndex: Z_INDEX.SELECTION_OVERLAY,
-                        overflow: 'visible',
-                    },
-                    'aria-hidden': 'true',
-                }, [
-                    h('rect', {
-                        x: 1,
-                        y: 1,
-                        width: Math.max(0, selRect.value.width - 2),
-                        height: Math.max(0, selRect.value.height - 2),
-                        fill: 'none',
-                        stroke: 'var(--ogrid-selection, #217346)',
-                        'stroke-width': 2,
-                    }),
-                ]) : null,
-                // Copy/Cut range: animated marching ants
-                clipRect.value ? h('svg', {
-                    style: {
-                        position: 'absolute',
-                        top: `${clipRect.value.top}px`,
-                        left: `${clipRect.value.left}px`,
-                        width: `${clipRect.value.width}px`,
-                        height: `${clipRect.value.height}px`,
-                        pointerEvents: 'none',
-                        zIndex: Z_INDEX.CLIPBOARD_OVERLAY,
-                        overflow: 'visible',
-                    },
-                    'aria-hidden': 'true',
-                }, [
-                    h('rect', {
-                        x: 1,
-                        y: 1,
-                        width: Math.max(0, clipRect.value.width - 2),
-                        height: Math.max(0, clipRect.value.height - 2),
-                        fill: 'none',
-                        stroke: 'var(--ogrid-selection, #217346)',
-                        'stroke-width': 2,
-                        'stroke-dasharray': '4 4',
-                        style: {
-                            animation: 'ogrid-marching-ants 0.5s linear infinite',
-                        },
-                    }),
-                ]) : null,
-            ]);
-        };
-    },
-});

package/dist/esm/components/SideBar.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/StatusBar.js

@@ -1,49 +0,0 @@
-/**
- * StatusBar component — Shows row counts and aggregations at the bottom of the data grid.
- * Displays filteredCount, totalCount, and optional aggregations (sum, avg, min, max, count).
- */
-import { defineComponent, h } from 'vue';
-import { getStatusBarParts } from '@alaarab/ogrid-core';
-export const StatusBar = defineComponent({
-    name: 'StatusBar',
-    props: {
-        totalCount: { type: Number, required: true },
-        filteredCount: { type: Number, default: undefined },
-        selectedCount: { type: Number, default: undefined },
-        selectedCellCount: { type: Number, default: undefined },
-        aggregation: { type: Object, default: undefined },
-        suppressRowCount: { type: Boolean, default: false },
-    },
-    setup(props) {
-        return () => {
-            const parts = getStatusBarParts(props);
-            return h('div', {
-                role: 'status',
-                'aria-live': 'polite',
-                style: {
-                    marginTop: 'auto',
-                    padding: '6px 12px',
-                    borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                    backgroundColor: 'var(--ogrid-header-bg, rgba(0,0,0,0.04))',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '16px',
-                    fontSize: '0.875rem',
-                },
-            }, parts.map((p, i) => h('span', {
-                key: p.key,
-                style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    ...(i < parts.length - 1
-                        ? { marginRight: '16px', borderRight: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))', paddingRight: '16px' }
-                        : {}),
-                },
-            }, [
-                h('span', { style: { color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' } }, p.label),
-                h('span', { style: { fontWeight: '600' } }, p.value.toLocaleString()),
-            ])));
-        };
-    },
-});