@alaarab/ogrid-vue-vuetify 2.1.2 → 2.1.4

package/dist/esm/index.js

@@ -1,15 +1,860 @@
-// Re-export all from base package for consumer convenience.
-// Note: This prevents tree-shaking of unused utilities.
-// Consider explicit named exports in a future major version.
-export * from '@alaarab/ogrid-vue';
-// Components
-export { OGrid } from './OGrid/OGrid';
-export { DataGridTable } from './DataGridTable/DataGridTable';
-export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
-export { ColumnChooser } from './ColumnChooser/ColumnChooser';
-export { PaginationControls } from './PaginationControls/PaginationControls';
-export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
-// Re-export shared components from base
-export { StatusBar, MarchingAntsOverlay } from '@alaarab/ogrid-vue';
-export { GridContextMenu } from './DataGridTable/GridContextMenu';
-export { InlineCellEditor } from './DataGridTable/InlineCellEditor';
+import { useColumnHeaderFilterState, getColumnHeaderMenuItems, createInlineCellEditor, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, createDataGridTable, useColumnChooserState, getPaginationViewModel, createOGrid } from '@alaarab/ogrid-vue';
+export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, MAX_PAGE_BUTTONS, MarchingAntsOverlay, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, StatusBar, UndoRedoStack, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, createDataGridTable, createInlineCellEditor, createOGrid, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnHeaderMenuState, useColumnPinning, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableSetup, useDateFilterState, useDebounce, useDebouncedCallback, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useMultiSelectFilterState, useOGrid, usePeopleFilterState, useRichSelectState, useRowSelection, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll, validateColumns, validateRowIds } from '@alaarab/ogrid-vue';
+import { defineComponent, h, computed } from 'vue';
+import { VTextField, VBtn, VProgressCircular, VCheckbox, VDivider, VAvatar, VIcon, VTooltip, VMenu, VCard, VList, VListItem, VSelect } from 'vuetify/components';
+
+// src/index.ts
+var _VBtn = VBtn;
+var _VTextField = VTextField;
+var TextFilterPopover = defineComponent({
+  name: "TextFilterPopover",
+  props: {
+    value: { type: String, required: true },
+    onValueChange: { type: Function, required: true },
+    onApply: { type: Function, required: true },
+    onClear: { type: Function, required: true }
+  },
+  setup(props) {
+    return () => h("div", { style: { width: "260px" } }, [
+      h(
+        "div",
+        { style: { padding: "12px" } },
+        h(_VTextField, {
+          modelValue: props.value,
+          "onUpdate:modelValue": (v) => props.onValueChange(v),
+          placeholder: "Enter search term...",
+          density: "compact",
+          variant: "outlined",
+          hideDetails: true,
+          autocomplete: "off",
+          prependInnerIcon: "mdi-magnify",
+          onKeydown: (e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") {
+              e.preventDefault();
+              props.onApply();
+            }
+          }
+        })
+      ),
+      h("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px", padding: "0 12px 12px" } }, [
+        h(_VBtn, { size: "small", variant: "text", disabled: !props.value, onClick: props.onClear }, () => "Clear"),
+        h(_VBtn, { size: "small", variant: "flat", color: "primary", onClick: props.onApply }, () => "Apply")
+      ])
+    ]);
+  }
+});
+var _VBtn2 = VBtn;
+var _VTextField2 = VTextField;
+var _VCheckbox = VCheckbox;
+var _VProgressCircular = VProgressCircular;
+var _VDivider = VDivider;
+var MultiSelectFilterPopover = defineComponent({
+  name: "MultiSelectFilterPopover",
+  props: {
+    searchText: { type: String, required: true },
+    onSearchChange: { type: Function, required: true },
+    options: { type: Array, required: true },
+    filteredOptions: { type: Array, required: true },
+    selected: { type: Object, required: true },
+    onOptionToggle: { type: Function, required: true },
+    onSelectAll: { type: Function, required: true },
+    onClearSelection: { type: Function, required: true },
+    onApply: { type: Function, required: true },
+    isLoading: { type: Boolean, default: false }
+  },
+  setup(props) {
+    return () => h("div", { style: { width: "280px" } }, [
+      // Search
+      h("div", { style: { padding: "12px 12px 4px" } }, [
+        h(_VTextField2, {
+          modelValue: props.searchText,
+          "onUpdate:modelValue": (v) => props.onSearchChange(v),
+          placeholder: "Search...",
+          density: "compact",
+          variant: "outlined",
+          hideDetails: true,
+          autocomplete: "off",
+          prependInnerIcon: "mdi-magnify",
+          onKeydown: (e) => e.stopPropagation()
+        }),
+        h("span", {
+          style: { display: "block", marginTop: "4px", fontSize: "0.75rem", color: "rgba(0,0,0,0.6)" }
+        }, `${props.filteredOptions.length} of ${props.options.length} options`)
+      ]),
+      // Select all / clear
+      h("div", { style: { display: "flex", justifyContent: "space-between", padding: "4px 12px" } }, [
+        h(
+          _VBtn2,
+          { size: "small", variant: "text", onClick: props.onSelectAll },
+          () => `Select All (${props.filteredOptions.length})`
+        ),
+        h(_VBtn2, { size: "small", variant: "text", onClick: props.onClearSelection }, () => "Clear")
+      ]),
+      // Options list
+      h(
+        "div",
+        { style: { maxHeight: "240px", overflowY: "auto", padding: "0 4px" } },
+        props.isLoading ? h(
+          "div",
+          { style: { display: "flex", justifyContent: "center", padding: "16px 0" } },
+          h(_VProgressCircular, { size: 24, indeterminate: true })
+        ) : props.filteredOptions.length === 0 ? h("div", { style: { padding: "16px 0", textAlign: "center", fontSize: "0.875rem", color: "rgba(0,0,0,0.6)" } }, "No options found") : props.filteredOptions.map(
+          (option) => h(
+            "div",
+            { key: option, style: { display: "flex", alignItems: "center", minHeight: "32px" } },
+            h(_VCheckbox, {
+              modelValue: props.selected.has(option),
+              label: option,
+              density: "compact",
+              hideDetails: true,
+              "onUpdate:modelValue": (checked) => props.onOptionToggle(option, checked)
+            })
+          )
+        )
+      ),
+      // Footer
+      h(_VDivider),
+      h("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px", padding: "8px 12px" } }, [
+        h(_VBtn2, { size: "small", variant: "text", onClick: props.onClearSelection }, () => "Clear"),
+        h(_VBtn2, { size: "small", variant: "flat", color: "primary", onClick: props.onApply }, () => "Apply")
+      ])
+    ]);
+  }
+});
+var _VBtn3 = VBtn;
+var _VTextField3 = VTextField;
+var _VProgressCircular2 = VProgressCircular;
+var _VAvatar = VAvatar;
+var _VIcon = VIcon;
+var _VDivider2 = VDivider;
+var PeopleFilterPopover = defineComponent({
+  name: "PeopleFilterPopover",
+  props: {
+    selectedUser: { type: Object, default: void 0 },
+    searchText: { type: String, required: true },
+    onSearchChange: { type: Function, required: true },
+    suggestions: { type: Array, required: true },
+    isLoading: { type: Boolean, default: false },
+    onUserSelect: { type: Function, required: true },
+    onClearUser: { type: Function, required: true }
+  },
+  setup(props) {
+    return () => h("div", { style: { width: "300px" } }, [
+      // Selected user display
+      ...props.selectedUser ? [
+        h("div", { style: { padding: "12px 12px 8px", borderBottom: "1px solid rgba(0,0,0,0.12)" } }, [
+          h("span", { style: { fontSize: "0.75rem", color: "rgba(0,0,0,0.6)" } }, "Currently filtered by:"),
+          h("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginTop: "4px" } }, [
+            h(
+              _VAvatar,
+              { size: 32, image: props.selectedUser.photo },
+              () => props.selectedUser?.displayName?.[0] ?? ""
+            ),
+            h("div", { style: { flex: "1", minWidth: "0" } }, [
+              h("div", { style: { fontSize: "0.875rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, props.selectedUser?.displayName),
+              h("div", { style: { fontSize: "0.75rem", color: "rgba(0,0,0,0.6)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, props.selectedUser?.email)
+            ]),
+            h(_VBtn3, {
+              icon: true,
+              size: "x-small",
+              variant: "text",
+              "aria-label": "Remove filter",
+              onClick: props.onClearUser
+            }, () => h(_VIcon, { size: "16" }, () => "mdi-close"))
+          ])
+        ])
+      ] : [],
+      // Search input
+      h(
+        "div",
+        { style: { padding: "12px 12px 4px" } },
+        h(_VTextField3, {
+          modelValue: props.searchText,
+          "onUpdate:modelValue": (v) => props.onSearchChange(v),
+          placeholder: "Search for a person...",
+          density: "compact",
+          variant: "outlined",
+          hideDetails: true,
+          autocomplete: "off",
+          prependInnerIcon: "mdi-magnify",
+          onKeydown: (e) => e.stopPropagation()
+        })
+      ),
+      // Suggestions list
+      h(
+        "div",
+        { style: { maxHeight: "240px", overflowY: "auto" } },
+        props.isLoading && props.searchText.trim() ? h(
+          "div",
+          { style: { display: "flex", justifyContent: "center", padding: "16px 0" } },
+          h(_VProgressCircular2, { size: 24, indeterminate: true })
+        ) : props.suggestions.length === 0 && props.searchText.trim() ? h("div", { style: { padding: "16px 0", textAlign: "center", fontSize: "0.875rem", color: "rgba(0,0,0,0.6)" } }, "No results found") : props.searchText.trim() ? props.suggestions.map(
+          (user) => h("div", {
+            key: user.id || user.email || user.displayName,
+            style: { display: "flex", alignItems: "center", gap: "8px", padding: "8px 12px", cursor: "pointer" },
+            onClick: () => props.onUserSelect(user),
+            onMouseenter: (e) => {
+              e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.04)";
+            },
+            onMouseleave: (e) => {
+              e.currentTarget.style.backgroundColor = "";
+            }
+          }, [
+            h(
+              _VAvatar,
+              { size: 32, image: user.photo },
+              () => user.displayName?.[0] ?? ""
+            ),
+            h("div", { style: { flex: "1", minWidth: "0" } }, [
+              h("div", { style: { fontSize: "0.875rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, user.displayName),
+              h("div", { style: { fontSize: "0.75rem", color: "rgba(0,0,0,0.6)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, user.email)
+            ])
+          ])
+        ) : h("div", { style: { padding: "16px 0", textAlign: "center", fontSize: "0.875rem", color: "rgba(0,0,0,0.6)" } }, "Type to search...")
+      ),
+      // Clear filter button
+      ...props.selectedUser ? [
+        h(_VDivider2),
+        h(
+          "div",
+          { style: { padding: "8px 12px" } },
+          h(_VBtn3, { size: "small", variant: "text", block: true, onClick: props.onClearUser }, () => "Clear Filter")
+        )
+      ] : []
+    ]);
+  }
+});
+
+// src/ColumnHeaderFilter/ColumnHeaderFilter.ts
+var _VBtn4 = VBtn;
+var _VIcon2 = VIcon;
+var _VMenu = VMenu;
+var _VTooltip = VTooltip;
+var _VCard = VCard;
+var ColumnHeaderFilter = defineComponent({
+  name: "ColumnHeaderFilter",
+  props: {
+    columnKey: { type: String, required: true },
+    columnName: { type: String, required: true },
+    filterType: { type: String, required: true },
+    isSorted: { type: Boolean, default: false },
+    isSortedDescending: { type: Boolean, default: false },
+    onSort: { type: Function, default: void 0 },
+    selectedValues: { type: Array, default: void 0 },
+    onFilterChange: { type: Function, default: void 0 },
+    options: { type: Array, default: () => [] },
+    isLoadingOptions: { type: Boolean, default: false },
+    textValue: { type: String, default: "" },
+    onTextChange: { type: Function, default: void 0 },
+    selectedUser: { type: Object, default: void 0 },
+    onUserChange: { type: Function, default: void 0 },
+    peopleSearch: { type: Function, default: void 0 },
+    dateValue: { type: Object, default: void 0 },
+    onDateChange: { type: Function, default: void 0 }
+  },
+  setup(props) {
+    const state = useColumnHeaderFilterState(props);
+    const renderPopoverContent = () => {
+      if (props.filterType === "multiSelect") {
+        return h(MultiSelectFilterPopover, {
+          searchText: state.searchText.value,
+          onSearchChange: state.setSearchText,
+          options: props.options ?? [],
+          filteredOptions: state.filteredOptions.value,
+          selected: state.tempSelected.value,
+          onOptionToggle: state.handlers.handleCheckboxChange,
+          onSelectAll: state.handlers.handleSelectAll,
+          onClearSelection: state.handlers.handleClearSelection,
+          onApply: state.handlers.handleApplyMultiSelect,
+          isLoading: props.isLoadingOptions
+        });
+      }
+      if (props.filterType === "text") {
+        return h(TextFilterPopover, {
+          value: state.tempTextValue.value ?? "",
+          onValueChange: state.setTempTextValue,
+          onApply: state.handlers.handleTextApply,
+          onClear: state.handlers.handleTextClear
+        });
+      }
+      if (props.filterType === "people") {
+        return h(PeopleFilterPopover, {
+          selectedUser: props.selectedUser,
+          searchText: state.peopleSearchText.value,
+          onSearchChange: state.setPeopleSearchText,
+          suggestions: state.peopleSuggestions.value,
+          isLoading: state.isPeopleLoading.value,
+          onUserSelect: state.handlers.handleUserSelect,
+          onClearUser: state.handlers.handleClearUser
+        });
+      }
+      if (props.filterType === "date") {
+        return h("div", { style: { padding: "12px", display: "flex", flexDirection: "column", gap: "8px" } }, [
+          h("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, [
+            h("span", { style: { minWidth: "36px", fontSize: "0.75rem" } }, "From:"),
+            h("input", {
+              type: "date",
+              value: state.tempDateFrom.value ?? "",
+              onInput: (e) => state.setTempDateFrom(e.target.value),
+              style: { flex: "1", padding: "4px 6px" }
+            })
+          ]),
+          h("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, [
+            h("span", { style: { minWidth: "36px", fontSize: "0.75rem" } }, "To:"),
+            h("input", {
+              type: "date",
+              value: state.tempDateTo.value ?? "",
+              onInput: (e) => state.setTempDateTo(e.target.value),
+              style: { flex: "1", padding: "4px 6px" }
+            })
+          ]),
+          h("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "4px" } }, [
+            h("button", {
+              onClick: state.handlers.handleDateClear,
+              disabled: !state.tempDateFrom.value && !state.tempDateTo.value,
+              style: { padding: "4px 12px", cursor: "pointer" }
+            }, "Clear"),
+            h("button", {
+              onClick: state.handlers.handleDateApply,
+              style: { padding: "4px 12px", cursor: "pointer" }
+            }, "Apply")
+          ])
+        ]);
+      }
+      return null;
+    };
+    return () => {
+      return h("div", {
+        ref: (el) => {
+          state.headerRef.value = el;
+        },
+        style: { display: "flex", alignItems: "center", width: "100%", minWidth: "0" }
+      }, [
+        // Column name with tooltip
+        h(
+          "div",
+          { style: { flex: "1", minWidth: "0", overflow: "hidden" } },
+          h(_VTooltip, { text: props.columnName, location: "top" }, {
+            activator: ({ props: tipProps }) => h("span", {
+              ...tipProps,
+              "data-header-label": "",
+              style: {
+                fontWeight: "600",
+                fontSize: "0.875rem",
+                lineHeight: "1.4",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                display: "block"
+              }
+            }, props.columnName)
+          })
+        ),
+        // Sort + filter buttons
+        h("div", { style: { display: "flex", alignItems: "center", marginLeft: "4px", flexShrink: "0" } }, [
+          // Filter icon + menu
+          ...props.filterType !== "none" ? [
+            h(_VMenu, {
+              modelValue: state.isFilterOpen.value,
+              "onUpdate:modelValue": (v) => state.setFilterOpen(v),
+              closeOnContentClick: false,
+              location: "bottom start"
+            }, {
+              activator: ({ props: menuProps }) => h("div", { style: { position: "relative" } }, [
+                h(_VBtn4, {
+                  ...menuProps,
+                  icon: true,
+                  size: "x-small",
+                  variant: state.hasActiveFilter.value || state.isFilterOpen.value ? "tonal" : "text",
+                  color: state.hasActiveFilter.value || state.isFilterOpen.value ? "primary" : "default",
+                  "aria-label": `Filter ${props.columnName}`,
+                  title: `Filter ${props.columnName}`,
+                  style: {
+                    opacity: state.hasActiveFilter.value || state.isFilterOpen.value ? "1" : "0.7"
+                  }
+                }, () => h(_VIcon2, { size: "16" }, () => "mdi-filter-variant")),
+                ...state.hasActiveFilter.value ? [
+                  h("div", {
+                    style: {
+                      position: "absolute",
+                      top: "2px",
+                      right: "2px",
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      backgroundColor: "rgb(var(--v-theme-primary))",
+                      zIndex: "1"
+                    }
+                  })
+                ] : []
+              ]),
+              default: () => h(_VCard, {
+                elevation: 8,
+                ref: (el) => {
+                  state.popoverRef.value = el;
+                },
+                onClick: (e) => e.stopPropagation()
+              }, () => [
+                h("div", {
+                  style: {
+                    borderBottom: "1px solid rgba(0,0,0,0.12)",
+                    padding: "8px 12px",
+                    fontWeight: "600",
+                    fontSize: "0.875rem",
+                    backgroundColor: "rgb(var(--v-theme-surface))"
+                  }
+                }, `Filter: ${props.columnName}`),
+                renderPopoverContent()
+              ])
+            })
+          ] : []
+        ])
+      ]);
+    };
+  }
+});
+var ColumnHeaderMenu = defineComponent({
+  name: "ColumnHeaderMenu",
+  props: {
+    isOpen: { type: Boolean, required: true },
+    anchorElement: { type: Object, default: null },
+    onClose: { type: Function, required: true },
+    onPinLeft: { type: Function, required: true },
+    onPinRight: { type: Function, required: true },
+    onUnpin: { type: Function, required: true },
+    onSortAsc: { type: Function, required: true },
+    onSortDesc: { type: Function, required: true },
+    onClearSort: { type: Function, required: true },
+    onAutosizeThis: { type: Function, required: true },
+    onAutosizeAll: { type: Function, required: true },
+    canPinLeft: { type: Boolean, required: true },
+    canPinRight: { type: Boolean, required: true },
+    canUnpin: { type: Boolean, required: true },
+    currentSort: { type: String, default: null },
+    isSortable: { type: Boolean, default: true },
+    isResizable: { type: Boolean, default: true }
+  },
+  setup(props) {
+    const handleOpenChange = (open) => {
+      if (!open) {
+        props.onClose();
+      }
+    };
+    const items = computed(
+      () => getColumnHeaderMenuItems({
+        canPinLeft: props.canPinLeft,
+        canPinRight: props.canPinRight,
+        canUnpin: props.canUnpin,
+        currentSort: props.currentSort,
+        isSortable: props.isSortable,
+        isResizable: props.isResizable
+      })
+    );
+    const handlers = {
+      pinLeft: props.onPinLeft,
+      pinRight: props.onPinRight,
+      unpin: props.onUnpin,
+      sortAsc: props.onSortAsc,
+      sortDesc: props.onSortDesc,
+      clearSort: props.onClearSort,
+      autosizeThis: props.onAutosizeThis,
+      autosizeAll: props.onAutosizeAll
+    };
+    const getHandler = (itemId) => handlers[itemId] || (() => {
+    });
+    return () => {
+      if (!props.anchorElement) return null;
+      return h(VMenu, {
+        modelValue: props.isOpen,
+        "onUpdate:modelValue": handleOpenChange,
+        location: "bottom start",
+        // Use target prop instead of activator for programmatic positioning
+        target: props.anchorElement
+      }, {
+        default: () => h(VList, { density: "compact", "aria-label": "Column options" }, () => {
+          const children = [];
+          items.value.forEach((item) => {
+            children.push(
+              h(VListItem, {
+                key: item.id,
+                disabled: item.disabled,
+                onClick: () => {
+                  getHandler(item.id)();
+                }
+              }, () => item.label)
+            );
+            if (item.divider) {
+              children.push(h(VDivider, { key: `divider-${item.id}` }));
+            }
+          });
+          return children;
+        })
+      });
+    };
+  }
+});
+var InlineCellEditor = createInlineCellEditor({
+  renderCheckbox: ({ checked, onChange, onCancel }) => h(VCheckbox, {
+    modelValue: checked,
+    hideDetails: true,
+    density: "compact",
+    "onUpdate:modelValue": (c) => onChange(c),
+    onKeydown: (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    }
+  }),
+  renderDatePicker: ({ value, onChange, onCancel }) => h("input", {
+    type: "date",
+    value,
+    style: { width: "100%", height: "100%", border: "none", outline: "none", padding: "0 4px", fontSize: "inherit" },
+    onKeydown: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onChange(e.target.value);
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        onChange(e.target.value);
+      }
+    },
+    onBlur: (e) => onChange(e.target.value)
+  })
+});
+var GridContextMenu = defineComponent({
+  name: "GridContextMenu",
+  props: {
+    x: { type: Number, required: true },
+    y: { type: Number, required: true },
+    hasSelection: { type: Boolean, required: true },
+    canUndo: { type: Boolean, required: true },
+    canRedo: { type: Boolean, required: true },
+    onUndo: { type: Function, required: true },
+    onRedo: { type: Function, required: true },
+    onCopy: { type: Function, required: true },
+    onCut: { type: Function, required: true },
+    onPaste: { type: Function, required: true },
+    onSelectAll: { type: Function, required: true },
+    onClose: { type: Function, required: true }
+  },
+  setup(props) {
+    const handlers = getContextMenuHandlers(props);
+    const isDisabled = (item) => {
+      if (item.disabledWhenNoSelection && !props.hasSelection) return true;
+      if (item.id === "undo" && !props.canUndo) return true;
+      if (item.id === "redo" && !props.canRedo) return true;
+      return false;
+    };
+    return () => h(VMenu, {
+      modelValue: true,
+      "onUpdate:modelValue": (v) => {
+        if (!v) props.onClose();
+      },
+      target: [props.x, props.y],
+      location: "bottom start"
+    }, {
+      default: () => h(
+        VList,
+        { density: "compact", "aria-label": "Grid context menu" },
+        () => GRID_CONTEXT_MENU_ITEMS.map((item) => [
+          ...item.dividerBefore ? [h(VDivider, { key: `${item.id}-div` })] : [],
+          h(
+            VListItem,
+            {
+              key: item.id,
+              disabled: isDisabled(item),
+              onClick: () => {
+                handlers[item.id]();
+              }
+            },
+            () => h("div", { style: { display: "flex", alignItems: "center", width: "100%" } }, [
+              h("span", { style: { flex: "1" } }, item.label),
+              ...item.shortcut ? [
+                h("span", {
+                  style: { marginLeft: "24px", color: "rgba(0,0,0,0.4)", fontSize: "0.8em" }
+                }, formatShortcut(item.shortcut))
+              ] : []
+            ])
+          )
+        ]).flat()
+      )
+    });
+  }
+});
+function renderEmptyState({ emptyState }) {
+  return h(
+    "div",
+    { class: "ogrid-empty-state" },
+    emptyState.render ? [emptyState.render()] : [
+      h("div", { class: "ogrid-empty-state-title" }, "No results found"),
+      h(
+        "div",
+        { class: "ogrid-empty-state-message" },
+        emptyState.message != null ? String(emptyState.message) : emptyState.hasActiveFilters ? [
+          "No items match your current filters. Try adjusting your search or ",
+          h(VBtn, {
+            variant: "text",
+            size: "small",
+            onClick: emptyState.onClearAll
+          }, () => "clear all filters"),
+          " to see all items."
+        ] : "There are no items available at this time."
+      )
+    ]
+  );
+}
+
+// src/DataGridTable/DataGridTable.ts
+var DataGridTable = createDataGridTable({
+  renderCheckbox: ({ modelValue, indeterminate, ariaLabel, onChange }) => h(VCheckbox, {
+    modelValue,
+    indeterminate,
+    hideDetails: true,
+    density: "compact",
+    "aria-label": ariaLabel,
+    "onUpdate:modelValue": (c) => onChange(!!c)
+  }),
+  renderSpinner: (message) => h("div", { class: "ogrid-loading-inner" }, [
+    h(VProgressCircular, { size: 24, indeterminate: true }),
+    h("span", { class: "ogrid-loading-message" }, message)
+  ]),
+  ColumnHeaderFilter,
+  ColumnHeaderMenu,
+  InlineCellEditor,
+  GridContextMenu,
+  renderEmptyState: (emptyState) => renderEmptyState({ emptyState })
+});
+var ColumnChooser = defineComponent({
+  name: "ColumnChooser",
+  props: {
+    columns: { type: Array, required: true },
+    visibleColumns: { type: Object, required: true },
+    onVisibilityChange: { type: Function, required: true }
+  },
+  setup(props) {
+    const columnsRef = computed(() => props.columns);
+    const visibleColumnsRef = computed(() => props.visibleColumns);
+    const state = useColumnChooserState({
+      columns: columnsRef,
+      visibleColumns: visibleColumnsRef,
+      onVisibilityChange: props.onVisibilityChange
+    });
+    return () => {
+      return h(VMenu, {
+        modelValue: state.open.value,
+        "onUpdate:modelValue": (v) => {
+          state.setOpen(v);
+        },
+        closeOnContentClick: false,
+        location: "bottom end"
+      }, {
+        activator: ({ props: activatorProps }) => h(VBtn, {
+          ...activatorProps,
+          variant: "outlined",
+          size: "small",
+          prependIcon: "mdi-view-column",
+          appendIcon: state.open.value ? "mdi-chevron-up" : "mdi-chevron-down"
+        }, () => `Column Visibility (${state.visibleCount.value} of ${state.totalCount.value})`),
+        default: () => h("div", { style: { minWidth: "220px" } }, [
+          // Header
+          h("div", {
+            style: {
+              padding: "8px 12px",
+              borderBottom: "1px solid rgba(0,0,0,0.12)",
+              backgroundColor: "rgba(0,0,0,0.04)",
+              fontWeight: "600",
+              fontSize: "0.875rem"
+            }
+          }, `Select Columns (${state.visibleCount.value} of ${state.totalCount.value})`),
+          // Column list
+          h(
+            VList,
+            { density: "compact", style: { maxHeight: "320px", overflowY: "auto" } },
+            () => props.columns.map(
+              (column) => h(
+                VListItem,
+                { key: column.columnId, style: { minHeight: "32px" } },
+                () => h("label", {
+                  style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", width: "100%" }
+                }, [
+                  h("input", {
+                    type: "checkbox",
+                    checked: props.visibleColumns.has(column.columnId),
+                    onChange: (e) => state.handleCheckboxChange(column.columnId)(e.target.checked)
+                  }),
+                  h("span", { style: { fontSize: "0.875rem" } }, column.name)
+                ])
+              )
+            )
+          ),
+          // Footer with actions
+          h(VDivider),
+          h("div", {
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: "8px",
+              padding: "8px 12px",
+              backgroundColor: "rgba(0,0,0,0.04)"
+            }
+          }, [
+            h(VBtn, { size: "small", variant: "text", onClick: state.handleClearAll }, () => "Clear All"),
+            h(VBtn, { size: "small", variant: "flat", color: "primary", onClick: state.handleSelectAll }, () => "Select All")
+          ])
+        ])
+      });
+    };
+  }
+});
+var PaginationControls = defineComponent({
+  name: "PaginationControls",
+  props: {
+    currentPage: { type: Number, required: true },
+    pageSize: { type: Number, required: true },
+    totalCount: { type: Number, required: true },
+    onPageChange: { type: Function, required: true },
+    onPageSizeChange: { type: Function, required: true },
+    pageSizeOptions: { type: Array, default: void 0 },
+    entityLabelPlural: { type: String, default: "items" }
+  },
+  setup(props) {
+    const vm = computed(
+      () => getPaginationViewModel(
+        props.currentPage,
+        props.pageSize,
+        props.totalCount,
+        props.pageSizeOptions ? { pageSizeOptions: props.pageSizeOptions } : void 0
+      )
+    );
+    return () => {
+      const v = vm.value;
+      if (!v) return null;
+      const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = v;
+      const label = props.entityLabelPlural ?? "items";
+      return h("div", {
+        role: "navigation",
+        "aria-label": "Pagination",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: "16px",
+          padding: "0 12px",
+          width: "100%",
+          minWidth: "0",
+          boxSizing: "border-box"
+        }
+      }, [
+        // Summary text
+        h("span", {
+          style: { fontSize: "0.875rem", color: "var(--ogrid-fg-secondary, rgba(0,0,0,0.6))" }
+        }, `Showing ${startItem} to ${endItem} of ${props.totalCount.toLocaleString()} ${label}`),
+        // Page buttons
+        h("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, [
+          // First page
+          h(VBtn, {
+            icon: "mdi-page-first",
+            size: "small",
+            variant: "text",
+            disabled: props.currentPage === 1,
+            "aria-label": "First page",
+            onClick: () => props.onPageChange(1)
+          }),
+          // Previous
+          h(VBtn, {
+            icon: "mdi-chevron-left",
+            size: "small",
+            variant: "text",
+            disabled: props.currentPage === 1,
+            "aria-label": "Previous page",
+            onClick: () => props.onPageChange(props.currentPage - 1)
+          }),
+          // Start ellipsis
+          ...showStartEllipsis ? [
+            h(VBtn, {
+              size: "small",
+              variant: "outlined",
+              "aria-label": "Page 1",
+              style: { minWidth: "32px" },
+              onClick: () => props.onPageChange(1)
+            }, () => "1"),
+            h("span", { style: { margin: "0 4px", color: "var(--ogrid-fg-secondary, rgba(0,0,0,0.6))" }, "aria-hidden": "true" }, "\u2026")
+          ] : [],
+          // Page numbers
+          ...pageNumbers.map(
+            (pageNum) => h(VBtn, {
+              key: pageNum,
+              size: "small",
+              variant: props.currentPage === pageNum ? "flat" : "outlined",
+              color: props.currentPage === pageNum ? "primary" : void 0,
+              "aria-label": `Page ${pageNum}`,
+              "aria-current": props.currentPage === pageNum ? "page" : void 0,
+              style: { minWidth: "32px" },
+              onClick: () => props.onPageChange(pageNum)
+            }, () => String(pageNum))
+          ),
+          // End ellipsis
+          ...showEndEllipsis ? [
+            h("span", { style: { margin: "0 4px", color: "var(--ogrid-fg-secondary, rgba(0,0,0,0.6))" }, "aria-hidden": "true" }, "\u2026"),
+            h(VBtn, {
+              size: "small",
+              variant: "outlined",
+              "aria-label": `Page ${totalPages}`,
+              style: { minWidth: "32px" },
+              onClick: () => props.onPageChange(totalPages)
+            }, () => String(totalPages))
+          ] : [],
+          // Next
+          h(VBtn, {
+            icon: "mdi-chevron-right",
+            size: "small",
+            variant: "text",
+            disabled: props.currentPage >= totalPages,
+            "aria-label": "Next page",
+            onClick: () => props.onPageChange(props.currentPage + 1)
+          }),
+          // Last page
+          h(VBtn, {
+            icon: "mdi-page-last",
+            size: "small",
+            variant: "text",
+            disabled: props.currentPage >= totalPages,
+            "aria-label": "Last page",
+            onClick: () => props.onPageChange(totalPages)
+          })
+        ]),
+        // Page size selector
+        h("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, [
+          h("span", { style: { fontSize: "0.875rem", color: "var(--ogrid-fg-secondary, rgba(0,0,0,0.6))" } }, "Rows"),
+          h(VSelect, {
+            modelValue: props.pageSize,
+            items: v.pageSizeOptions,
+            density: "compact",
+            hideDetails: true,
+            variant: "outlined",
+            "aria-label": "Rows per page",
+            style: { minWidth: "70px", maxWidth: "90px" },
+            "onUpdate:modelValue": (val) => props.onPageSizeChange(Number(val))
+          })
+        ])
+      ]);
+    };
+  }
+});
+
+// src/OGrid/OGrid.ts
+var OGrid = createOGrid({
+  DataGridTable,
+  ColumnChooser,
+  PaginationControls
+});
+
+export { ColumnChooser, ColumnHeaderFilter, ColumnHeaderMenu, DataGridTable, GridContextMenu, InlineCellEditor, OGrid, PaginationControls };