@nu-grid/nuxt 0.1.1

package/dist/runtime/config/_internal/options-defaults.d.ts

@@ -0,0 +1,121 @@
+export declare const nuGridDefaults: {
+    focus: {
+        mode: "cell";
+        retain: false;
+        cmdArrows: "paging";
+        loopNavigation: false;
+        pageStep: number;
+        alignOnModel: "nearest";
+    };
+    editing: {
+        enabled: false;
+        startKeys: "all";
+        startClicks: "double";
+        debounce: number;
+        commitOnBlur: true;
+    };
+    validation: {
+        validateOn: "reward";
+        showErrors: "always";
+        onInvalid: "block";
+        validateOnAddRow: true;
+        icon: string;
+    };
+    selection: {
+        mode: "multi";
+        placement: "start";
+        enabled: true;
+        hidden: false;
+    };
+    actions: {
+        enabled: false;
+        placement: "end";
+        hidden: false;
+        getActions: () => never[];
+        button: {
+            icon: string;
+            color: "neutral";
+            variant: "ghost";
+            class: string;
+        };
+    };
+    layout: {
+        mode: "div";
+        stickyHeaders: false;
+        scrollbars: "scroll";
+        autoSize: false;
+        maintainWidth: false;
+    };
+    columnDefaults: {
+        sortIcons: {
+            unsorted: string;
+            asc: string;
+            desc: string;
+            unsortedHover: true;
+            position: "edge";
+        };
+        menu: {
+            visibilityToggle: true;
+            button: {
+                icon: string;
+                color: "neutral";
+                variant: "ghost";
+            };
+        };
+        lookup: {
+            valueKey: string;
+            labelKey: string;
+            searchable: true;
+            placeholder: string;
+            clearable: false;
+            autoOpen: true;
+        };
+        resize: false;
+        reorder: false;
+        wrapText: false;
+    };
+    virtualization: {
+        enabled: false;
+        estimateSize: number;
+        overscan: number;
+        dynamicRowHeights: true;
+        rowHeights: {
+            groupHeader: number;
+            columnHeader: number;
+            dataRow: number;
+            footer: number;
+        };
+    };
+    tooltip: {
+        truncatedOnly: true;
+        showDelay: number;
+        hideDelay: number;
+        mouseFollow: false;
+    };
+    multiRow: {
+        enabled: false;
+        rowCount: number;
+        alignColumns: false;
+    };
+    animation: {
+        enabled: false;
+        preset: "refresh";
+        duration: number;
+        easing: string;
+        stagger: number;
+        maxStagger: number;
+    };
+    paging: {
+        enabled: false;
+        pageSize: number;
+        pageSizeSelector: number[];
+        autoPageSize: false;
+        autoPageSizeMinimum: number;
+        suppressPanel: false;
+    };
+    skipAutoSizeColumns: never[];
+    cellTypes: never[];
+    addNewRow: false;
+    rowId: string;
+    theme: "default";
+};

package/dist/runtime/config/_internal/options-defaults.js

@@ -0,0 +1,121 @@
+export const nuGridDefaults = {
+  focus: {
+    mode: "cell",
+    retain: false,
+    cmdArrows: "paging",
+    loopNavigation: false,
+    pageStep: 10,
+    alignOnModel: "nearest"
+  },
+  editing: {
+    enabled: false,
+    startKeys: "all",
+    startClicks: "double",
+    debounce: 0,
+    commitOnBlur: true
+  },
+  validation: {
+    validateOn: "reward",
+    showErrors: "always",
+    onInvalid: "block",
+    validateOnAddRow: true,
+    icon: "i-lucide-alert-circle"
+  },
+  selection: {
+    mode: "multi",
+    placement: "start",
+    enabled: true,
+    hidden: false
+  },
+  actions: {
+    enabled: false,
+    placement: "end",
+    hidden: false,
+    getActions: () => [],
+    button: {
+      icon: "i-lucide-ellipsis-vertical",
+      color: "neutral",
+      variant: "ghost",
+      class: "ml-auto"
+    }
+  },
+  layout: {
+    mode: "div",
+    stickyHeaders: false,
+    scrollbars: "scroll",
+    autoSize: false,
+    maintainWidth: false
+  },
+  columnDefaults: {
+    sortIcons: {
+      unsorted: "i-lucide-chevrons-up-down",
+      asc: "i-lucide-arrow-up",
+      desc: "i-lucide-arrow-down",
+      unsortedHover: true,
+      position: "edge"
+    },
+    menu: {
+      visibilityToggle: true,
+      button: {
+        icon: "i-lucide-more-vertical",
+        color: "neutral",
+        variant: "ghost"
+      }
+    },
+    lookup: {
+      valueKey: "value",
+      labelKey: "label",
+      searchable: true,
+      placeholder: "Select...",
+      clearable: false,
+      autoOpen: true
+    },
+    resize: false,
+    reorder: false,
+    wrapText: false
+  },
+  virtualization: {
+    enabled: false,
+    estimateSize: 65,
+    overscan: 20,
+    dynamicRowHeights: true,
+    rowHeights: {
+      groupHeader: 50,
+      columnHeader: 50,
+      dataRow: 80,
+      footer: 45
+    }
+  },
+  tooltip: {
+    truncatedOnly: true,
+    showDelay: 500,
+    hideDelay: 100,
+    mouseFollow: false
+  },
+  multiRow: {
+    enabled: false,
+    rowCount: 1,
+    alignColumns: false
+  },
+  animation: {
+    enabled: false,
+    preset: "refresh",
+    duration: 300,
+    easing: "ease-out",
+    stagger: 15,
+    maxStagger: 120
+  },
+  paging: {
+    enabled: false,
+    pageSize: 20,
+    pageSizeSelector: [10, 20, 50, 100],
+    autoPageSize: false,
+    autoPageSizeMinimum: 5,
+    suppressPanel: false
+  },
+  skipAutoSizeColumns: [],
+  cellTypes: [],
+  addNewRow: false,
+  rowId: "id",
+  theme: "default"
+};

package/dist/runtime/config/_internal/prop-utils.d.ts

@@ -0,0 +1,54 @@
+import type { ComputedRef } from 'vue';
+import type { NuGridAnimationOptions, NuGridEditingOptions, NuGridFocusOptions, NuGridLayoutOptions, NuGridMultiRowOptions, NuGridPagingOptions, NuGridSelectionOptions, NuGridTooltipOptions, NuGridValidationOptions } from '../../types/index.js';
+import type { NuGridVirtualizerOptions } from '../../types/_internal/virtualization.js';
+import { nuGridDefaults } from './options-defaults.js';
+/**
+ * Mapping from defaults keys to their corresponding config types.
+ * Keys must match nuGridDefaults - TypeScript will error if they diverge.
+ */
+type OptionsTypeMap = {
+    [K in keyof typeof nuGridDefaults]: K extends 'focus' ? NuGridFocusOptions : K extends 'editing' ? NuGridEditingOptions : K extends 'validation' ? NuGridValidationOptions : K extends 'selection' ? NuGridSelectionOptions : K extends 'layout' ? NuGridLayoutOptions : K extends 'virtualization' ? NuGridVirtualizerOptions : K extends 'tooltip' ? NuGridTooltipOptions : K extends 'multiRow' ? NuGridMultiRowOptions : K extends 'animation' ? NuGridAnimationOptions : K extends 'paging' ? NuGridPagingOptions : never;
+};
+type DefaultsKey = {
+    [K in keyof OptionsTypeMap]: OptionsTypeMap[K] extends never ? never : K;
+}[keyof OptionsTypeMap];
+type DefaultsGroup<K extends DefaultsKey> = NonNullable<(typeof nuGridDefaults)[K]>;
+/**
+ * Type-safe accessor for nuGridDefaults groups.
+ * Returns the defaults with proper typing (NonNullable).
+ */
+export declare function getDefaults<K extends DefaultsKey>(key: K): DefaultsGroup<K>;
+/**
+ * Creates a computed ref that extracts a prop value with fallback to nuGridDefaults.
+ * Defaults are automatically sourced from the centralized nuGridDefaults.
+ *
+ * @param props - The props object (reactive)
+ * @param group - The defaults group key (e.g., 'focus', 'editing', 'validation')
+ * @param key - The key to extract from the prop group
+ * @returns ComputedRef with the resolved value
+ *
+ * @example
+ * const focusMode = usePropWithDefault(props, 'focus', 'mode')
+ * const enableEditing = usePropWithDefault(props, 'editing', 'enabled')
+ */
+export declare function usePropWithDefault<G extends DefaultsKey, K extends keyof OptionsTypeMap[G] & keyof DefaultsGroup<G>>(props: Record<string, any>, group: G, key: K): ComputedRef<NonNullable<OptionsTypeMap[G][K]>>;
+/**
+ * Creates multiple computed refs for a prop group with defaults from nuGridDefaults.
+ * Useful when extracting several properties from the same group.
+ *
+ * @param props - The props object (reactive)
+ * @param group - The defaults group key
+ * @param keys - Array of keys to extract
+ * @returns Object with computed refs for each key
+ *
+ * @example
+ * const { mode, retain, cmdArrows } = usePropsWithDefaults(
+ *   props,
+ *   'focus',
+ *   ['mode', 'retain', 'cmdArrows']
+ * )
+ */
+export declare function usePropsWithDefaults<G extends DefaultsKey, K extends keyof OptionsTypeMap[G] & keyof DefaultsGroup<G>>(props: Record<string, any>, group: G, keys: K[]): {
+    [P in K]: ComputedRef<NonNullable<OptionsTypeMap[G][P]>>;
+};
+export {};

package/dist/runtime/config/_internal/prop-utils.js

@@ -0,0 +1,21 @@
+import { computed } from "vue";
+import { nuGridDefaults } from "./options-defaults.js";
+export function getDefaults(key) {
+  return nuGridDefaults[key];
+}
+export function usePropWithDefault(props, group, key) {
+  const defaults = nuGridDefaults[group];
+  return computed(
+    () => props[group]?.[key] ?? defaults[key]
+  );
+}
+export function usePropsWithDefaults(props, group, keys) {
+  const defaults = nuGridDefaults[group];
+  const result = {};
+  for (const key of keys) {
+    result[key] = computed(
+      () => props[group]?.[key] ?? defaults[key]
+    );
+  }
+  return result;
+}

package/dist/runtime/config/config.d.ts

@@ -0,0 +1,44 @@
+import type { TableData } from '@nuxt/ui';
+import type { NuGridProps } from '../types/index.js';
+import type { NuGridCreateConfigOptions } from '../types/_internal/index.js';
+/**
+ * Create a fully typed NuGrid configuration
+ * This factory function helps with type inference and provides a convenient way to build configurations
+ *
+ * @example
+ * // Create a config with a preset
+ * const config = createNuGridConfig({
+ *   preset: 'editable',
+ *   config: {
+ *     columns: myColumns,
+ *     data: myData
+ *   }
+ * })
+ *
+ * @example
+ * // Create a config from scratch
+ * const config = createNuGridConfig({
+ *   config: {
+ *     columns: myColumns,
+ *     data: myData,
+ *     focus: { mode: 'cell' }
+ *   }
+ * })
+ */
+export declare function createNuGridConfig<T extends TableData = TableData>(options?: NuGridCreateConfigOptions<T>): Partial<NuGridProps<T>>;
+/**
+ * Merge multiple NuGrid configurations
+ * Later configurations override earlier ones
+ *
+ * @example
+ * const base = { focus: { mode: 'cell' } }
+ * const override = { focus: { retain: true } }
+ * const merged = mergeNuGridConfig(base, override)
+ * // Result: { focus: { mode: 'cell', retain: true } }
+ */
+export declare function mergeNuGridConfig<T extends TableData = TableData>(...configs: Array<Partial<NuGridProps<T>>>): Partial<NuGridProps<T>>;
+/**
+ * Get default values for NuGrid configuration
+ * Useful for documentation and understanding defaults
+ */
+export declare function getNuGridDefaults<T extends TableData = TableData>(): Partial<NuGridProps<T>>;

package/dist/runtime/config/config.js

@@ -0,0 +1,18 @@
+import { defu } from "defu";
+import { nuGridDefaults } from "./_internal/options-defaults.js";
+import { applyNuGridPreset } from "./presets.js";
+export function createNuGridConfig(options = {}) {
+  const { preset, config = {} } = options;
+  const layers = [nuGridDefaults];
+  if (preset) {
+    layers.push(applyNuGridPreset(preset));
+  }
+  layers.push(config);
+  return mergeNuGridConfig(...layers);
+}
+export function mergeNuGridConfig(...configs) {
+  return defu({}, ...configs.toReversed());
+}
+export function getNuGridDefaults() {
+  return nuGridDefaults;
+}

package/dist/runtime/config/index.d.ts

@@ -0,0 +1,2 @@
+export { createNuGridConfig, getNuGridDefaults, mergeNuGridConfig } from './config.js';
+export { applyNuGridPreset, getNuGridPreset } from './presets.js';

package/dist/runtime/config/index.js

@@ -0,0 +1,2 @@
+export { createNuGridConfig, getNuGridDefaults, mergeNuGridConfig } from "./config.js";
+export { applyNuGridPreset, getNuGridPreset } from "./presets.js";

package/dist/runtime/config/presets.d.ts

@@ -0,0 +1,15 @@
+import type { TableData } from '@nuxt/ui';
+import type { NuGridPreset, NuGridPresetOptions } from '../types/_internal/index.js';
+/**
+ * Get preset configuration for a given preset name
+ * @param preset The preset name
+ * @returns Configuration object for the preset
+ */
+export declare function getNuGridPreset<T extends TableData = TableData>(preset: NuGridPreset): NuGridPresetOptions<T>;
+/**
+ * Apply a preset with optional overrides
+ * @param preset The preset name
+ * @param overrides Optional configuration overrides
+ * @returns Merged configuration
+ */
+export declare function applyNuGridPreset<T extends TableData = TableData>(preset: NuGridPreset, overrides?: Partial<NuGridPresetOptions<T>>): NuGridPresetOptions<T>;

package/dist/runtime/config/presets.js

@@ -0,0 +1,58 @@
+import { defu } from "defu";
+const presets = {
+  /**
+   * Read-only grid with row navigation, no editing
+   */
+  readOnly: {
+    focus: { mode: "row" },
+    editing: { enabled: false }
+  },
+  /**
+   * Full-featured editable grid with cell navigation,
+   * sticky headers, and auto-sizing columns
+   */
+  editable: {
+    focus: { mode: "cell", retain: true },
+    editing: { enabled: true },
+    layout: { stickyHeaders: true, autoSize: "fitCell" }
+  },
+  /**
+   * Kanban-style grouped grid with row navigation
+   * and minimal keyboard editing triggers
+   */
+  kanban: {
+    focus: { mode: "row" },
+    editing: { enabled: true, startKeys: "minimal" },
+    layout: { mode: "group", stickyHeaders: true }
+  },
+  /**
+   * Form-like grid optimized for data entry with
+   * single-click editing and first/last navigation
+   */
+  forms: {
+    focus: { mode: "cell", retain: true, cmdArrows: "firstlast", pageStep: 5 },
+    editing: { enabled: true, startClicks: "single" },
+    validation: { validateOn: "blur" },
+    layout: { scrollbars: "native", autoSize: "fitGrid", maintainWidth: true }
+  },
+  /**
+   * Analytics grid optimized for large read-only datasets
+   * with virtualization and sticky headers
+   */
+  analytics: {
+    focus: { mode: "row" },
+    editing: { enabled: false },
+    virtualization: { estimateSize: 50, overscan: 20, dynamicRowHeights: false },
+    layout: { stickyHeaders: true }
+  }
+};
+export function getNuGridPreset(preset) {
+  return presets[preset];
+}
+export function applyNuGridPreset(preset, overrides) {
+  const baseConfig = getNuGridPreset(preset);
+  if (!overrides) {
+    return baseConfig;
+  }
+  return defu({}, overrides, baseConfig);
+}

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@source "./components";@source "./cell-types";@source "./config";@source "./themes";@theme static{--animate-nugrid-refresh:nugrid-refresh var(--nugrid-animation-duration,300ms) var(--nugrid-animation-easing,ease-out) both;@keyframes nugrid-refresh{0%{opacity:.6;translate:0 14px}to{opacity:1;translate:0 0}}--animate-nugrid-fade:nugrid-fade var(--nugrid-animation-duration,300ms) var(--nugrid-animation-easing,ease-out) both;@keyframes nugrid-fade{0%{opacity:.55}to{opacity:1}}--animate-nugrid-slide:nugrid-slide var(--nugrid-animation-duration,300ms) var(--nugrid-animation-easing,ease-out) both;@keyframes nugrid-slide{0%{opacity:.6;translate:0 28px}to{opacity:1;translate:0 0}}--animate-nugrid-scale:nugrid-scale var(--nugrid-animation-duration,300ms) var(--nugrid-animation-easing,ease-out) both;@keyframes nugrid-scale{0%{opacity:.62;scale:.92}to{opacity:1;scale:1}}}

package/dist/runtime/index.d.ts

@@ -0,0 +1 @@
+export { createColumnHelper } from './utils/columnHelper.js';

package/dist/runtime/index.js

@@ -0,0 +1 @@
+export { createColumnHelper } from "./utils/columnHelper.js";

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,5 @@
+/**
+ * NuGrid plugin - registers custom themes from app.config.ts
+ */
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin, useAppConfig } from "#app";
+import { createNuGridTheme, registerTheme } from "./themes/index.js";
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig();
+  const customThemes = appConfig.nuGrid?.themes || [];
+  for (const themeConfig of customThemes) {
+    const theme = createNuGridTheme(themeConfig);
+    registerTheme(theme);
+  }
+});

package/dist/runtime/themes/index.d.ts

@@ -0,0 +1,56 @@
+import type { NuGridThemeDefinition } from '../types/theme.js';
+export { nuGridTheme } from './nuGridTheme.js';
+export { nuGridThemeCompact } from './nuGridThemeCompact.js';
+/**
+ * Register a custom theme with NuGrid
+ * @param theme - The theme definition to register
+ */
+export declare function registerTheme(theme: NuGridThemeDefinition): void;
+/**
+ * Get a registered theme by name
+ * @param name - The theme name to retrieve
+ * @returns The theme definition or undefined if not found
+ */
+export declare function getTheme(name: string): NuGridThemeDefinition | undefined;
+/**
+ * Get all available theme names
+ * @returns Array of registered theme names
+ */
+export declare function getAvailableThemes(): string[];
+/**
+ * Get all registered themes
+ * @returns Array of theme definitions
+ */
+export declare function getAllThemes(): NuGridThemeDefinition[];
+/**
+ * Helper to create a custom NuGrid theme
+ * Supports extending existing themes with slot/variant overrides
+ *
+ * @example
+ * // Create a theme extending the compact theme
+ * const oceanTheme = createNuGridTheme({
+ *   name: 'ocean',
+ *   displayName: 'Ocean Blue',
+ *   baseTheme: 'compact',
+ *   slots: {
+ *     base: 'flex flex-col bg-cyan-50 dark:bg-cyan-950',
+ *     th: 'flex shrink-0 items-stretch overflow-hidden p-0! group bg-cyan-100 dark:bg-cyan-900 ...',
+ *   }
+ * })
+ */
+export declare function createNuGridTheme(config: {
+    /** Unique theme identifier */
+    name: string;
+    /** Human-readable display name */
+    displayName?: string;
+    /** Theme description */
+    description?: string;
+    /** Base theme to extend (e.g., 'default', 'compact', or custom theme name) */
+    baseTheme?: string;
+    /** Custom slot classes (merged with base theme) */
+    slots?: Partial<Record<string, string>>;
+    /** Custom variants (merged with base theme) */
+    variants?: Record<string, any>;
+    /** Custom compound variants (appended to base theme) */
+    compoundVariants?: any[];
+}): NuGridThemeDefinition;

package/dist/runtime/themes/index.js

@@ -0,0 +1,68 @@
+import { nuGridTheme } from "./nuGridTheme.js";
+import { nuGridThemeCompact } from "./nuGridThemeCompact.js";
+export { nuGridTheme } from "./nuGridTheme.js";
+export { nuGridThemeCompact } from "./nuGridThemeCompact.js";
+const themeRegistry = /* @__PURE__ */ new Map();
+export function registerTheme(theme) {
+  themeRegistry.set(theme.name, theme);
+}
+export function getTheme(name) {
+  return themeRegistry.get(name);
+}
+export function getAvailableThemes() {
+  return Array.from(themeRegistry.keys());
+}
+export function getAllThemes() {
+  return Array.from(themeRegistry.values());
+}
+export function createNuGridTheme(config) {
+  let baseThemeObj;
+  if (config.baseTheme) {
+    const baseThemeDef = getTheme(config.baseTheme);
+    if (baseThemeDef) {
+      baseThemeObj = baseThemeDef.theme;
+    } else if (import.meta.dev) {
+      console.warn(`[createNuGridTheme] Base theme "${config.baseTheme}" not found`);
+    }
+  }
+  const mergedSlots = {
+    ...baseThemeObj?.slots || {}
+  };
+  if (config.slots) {
+    for (const [key, value] of Object.entries(config.slots)) {
+      if (value !== void 0) {
+        mergedSlots[key] = value;
+      }
+    }
+  }
+  const theme = {
+    ...baseThemeObj || {},
+    slots: mergedSlots,
+    variants: {
+      ...baseThemeObj?.variants || {},
+      ...config.variants || {}
+    },
+    compoundVariants: [
+      ...baseThemeObj?.compoundVariants || [],
+      ...config.compoundVariants || []
+    ]
+  };
+  return {
+    name: config.name,
+    displayName: config.displayName || config.name,
+    description: config.description,
+    theme
+  };
+}
+registerTheme({
+  name: "default",
+  displayName: "Default",
+  description: "Standard NuGrid theme with primary color accents and comfortable spacing",
+  theme: nuGridTheme
+});
+registerTheme({
+  name: "compact",
+  displayName: "Compact",
+  description: "Compact theme with blue accents and tighter spacing for data-dense displays",
+  theme: nuGridThemeCompact
+});