@nu-grid/nuxt 0.1.1

package/dist/runtime/components/NuGridLazyCell.d.vue.ts

@@ -0,0 +1,62 @@
+type __VLS_Props = {
+    /**
+     * Distance in pixels before the viewport to start loading content
+     * Higher values preload more aggressively
+     * @default 100
+     */
+    preloadDistance?: number;
+    /**
+     * Whether to wait for scroll to settle before showing content
+     * If false, content shows immediately when in viewport
+     * @default true
+     */
+    waitForSettle?: boolean;
+    /**
+     * Minimum time in ms to show placeholder (prevents flash)
+     * @default 0
+     */
+    minPlaceholderTime?: number;
+    /**
+     * Transition duration in ms for content appearance
+     * @default 150
+     */
+    transitionDuration?: number;
+    /**
+     * Height hint for placeholder to prevent layout shift
+     * Can be a number (px) or CSS string
+     */
+    height?: number | string;
+    /**
+     * Width hint for placeholder
+     * Can be a number (px) or CSS string
+     */
+    width?: number | string;
+    /**
+     * Keep content mounted after first load (don't re-hide on scroll)
+     * @default true
+     */
+    keepMounted?: boolean;
+};
+type __VLS_Slots = {
+    /** Content to render when visible and settled */
+    default: () => any;
+    /** Placeholder shown while loading (optional) */
+    placeholder: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: number | string;
+    height: number | string;
+    preloadDistance: number;
+    waitForSettle: boolean;
+    minPlaceholderTime: number;
+    transitionDuration: number;
+    keepMounted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NuGridLazyCell.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+const props = defineProps({
+  preloadDistance: { type: Number, required: false, default: 100 },
+  waitForSettle: { type: Boolean, required: false, default: true },
+  minPlaceholderTime: { type: Number, required: false, default: 0 },
+  transitionDuration: { type: Number, required: false, default: 150 },
+  height: { type: [Number, String], required: false, default: void 0 },
+  width: { type: [Number, String], required: false, default: void 0 },
+  keepMounted: { type: Boolean, required: false, default: true }
+});
+defineSlots();
+const scrollStateContext = inject("nugrid-scroll-state", null);
+const elementRef = ref(null);
+const isIntersecting = ref(false);
+const hasBeenVisible = ref(false);
+const showStartTime = ref(null);
+const isReady = ref(false);
+const shouldShowContent = computed(() => {
+  if (props.keepMounted && hasBeenVisible.value) {
+    return true;
+  }
+  if (!isIntersecting.value) {
+    return false;
+  }
+  if (!props.waitForSettle) {
+    return true;
+  }
+  if (!scrollStateContext) {
+    return true;
+  }
+  return scrollStateContext.isSettled.value;
+});
+watch(shouldShowContent, (show) => {
+  if (show && !hasBeenVisible.value) {
+    hasBeenVisible.value = true;
+    showStartTime.value = Date.now();
+    if (props.minPlaceholderTime > 0) {
+      setTimeout(() => {
+        isReady.value = true;
+      }, props.minPlaceholderTime);
+    } else {
+      isReady.value = true;
+    }
+  }
+});
+const showContent = computed(() => {
+  if (!shouldShowContent.value) return false;
+  if (props.minPlaceholderTime > 0 && !isReady.value) return false;
+  return true;
+});
+let observer = null;
+const setupObserver = () => {
+  if (!elementRef.value) return;
+  if (observer) {
+    observer.disconnect();
+  }
+  observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (entry) {
+        isIntersecting.value = entry.isIntersecting;
+      }
+    },
+    {
+      // Use viewport as root (null) for reliable intersection detection
+      root: null,
+      // Preload distance creates a margin around the viewport
+      rootMargin: `${props.preloadDistance}px`,
+      threshold: 0
+    }
+  );
+  observer.observe(elementRef.value);
+};
+onMounted(() => {
+  setupObserver();
+});
+watch(elementRef, (el) => {
+  if (el) {
+    setupObserver();
+  }
+});
+watch(
+  () => props.preloadDistance,
+  () => {
+    setupObserver();
+  }
+);
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+});
+const dimensionStyle = computed(() => {
+  const style = {};
+  if (props.height !== void 0) {
+    style.height = typeof props.height === "number" ? `${props.height}px` : props.height;
+  }
+  if (props.width !== void 0) {
+    style.width = typeof props.width === "number" ? `${props.width}px` : props.width;
+  }
+  return style;
+});
+const transitionStyle = computed(() => ({
+  transition: `opacity ${props.transitionDuration}ms ease-out`
+}));
+</script>
+
+<template>
+  <div ref="elementRef" class="lazy-cell" :style="dimensionStyle">
+    <!-- Actual content (with fade-in transition) -->
+    <div
+      v-if="showContent"
+      class="lazy-cell-content"
+      :style="{ ...transitionStyle, opacity: showContent ? 1 : 0 }"
+    >
+      <slot />
+    </div>
+
+    <!-- Placeholder (shown while waiting) -->
+    <div v-else class="lazy-cell-placeholder" :style="dimensionStyle">
+      <slot name="placeholder">
+        <!-- Default placeholder: subtle skeleton -->
+        <div class="lazy-cell-skeleton" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lazy-cell{min-height:1em;position:relative}.lazy-cell-content{height:100%;width:100%}.lazy-cell-placeholder{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.lazy-cell-skeleton{animation:lazy-cell-shimmer 1.5s infinite;background:linear-gradient(90deg,hsla(0,0%,50%,.1) 25%,hsla(0,0%,50%,.2) 50%,hsla(0,0%,50%,.1) 75%);background-size:200% 100%;border-radius:4px;height:100%;min-height:1em;width:100%}@keyframes lazy-cell-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
+</style>

package/dist/runtime/components/NuGridLazyCell.vue.d.ts

@@ -0,0 +1,62 @@
+type __VLS_Props = {
+    /**
+     * Distance in pixels before the viewport to start loading content
+     * Higher values preload more aggressively
+     * @default 100
+     */
+    preloadDistance?: number;
+    /**
+     * Whether to wait for scroll to settle before showing content
+     * If false, content shows immediately when in viewport
+     * @default true
+     */
+    waitForSettle?: boolean;
+    /**
+     * Minimum time in ms to show placeholder (prevents flash)
+     * @default 0
+     */
+    minPlaceholderTime?: number;
+    /**
+     * Transition duration in ms for content appearance
+     * @default 150
+     */
+    transitionDuration?: number;
+    /**
+     * Height hint for placeholder to prevent layout shift
+     * Can be a number (px) or CSS string
+     */
+    height?: number | string;
+    /**
+     * Width hint for placeholder
+     * Can be a number (px) or CSS string
+     */
+    width?: number | string;
+    /**
+     * Keep content mounted after first load (don't re-hide on scroll)
+     * @default true
+     */
+    keepMounted?: boolean;
+};
+type __VLS_Slots = {
+    /** Content to render when visible and settled */
+    default: () => any;
+    /** Placeholder shown while loading (optional) */
+    placeholder: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: number | string;
+    height: number | string;
+    preloadDistance: number;
+    waitForSettle: boolean;
+    minPlaceholderTime: number;
+    transitionDuration: number;
+    keepMounted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/_internal/NuGridAddRow.d.vue.ts

@@ -0,0 +1,36 @@
+import type { TableData } from '@nuxt/ui';
+import type { Row } from '@tanstack/vue-table';
+import type { ComponentPublicInstance } from 'vue';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        row: Row<T>;
+        style?: Record<string, any>;
+        minHeight?: number;
+        dataIndex?: number;
+        measureRef?: (el: Element | ComponentPublicInstance | null) => void;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            cell: any;
+            row: Row<T>;
+            cellIndex: number;
+        }) => any;
+        expanded?: (props: {
+            row: Row<T>;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/_internal/NuGridAddRow.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { computed, inject } from "vue";
+import { resolveStyleObject, resolveValue } from "../../composables/_internal";
+import NuGridCellContent from "./NuGridCellContent.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  row: { type: Object, required: true },
+  style: { type: Object, required: false },
+  minHeight: { type: Number, required: false },
+  dataIndex: { type: Number, required: false },
+  measureRef: { type: Function, required: false }
+});
+const slots = defineSlots();
+const coreContext = inject("nugrid-core");
+const focusContext = inject("nugrid-focus");
+const performanceContext = inject("nugrid-performance");
+const addRowContext = inject("nugrid-add-row");
+const interactionRouterContext = inject(
+  "nugrid-interaction-router"
+);
+if (!coreContext || !focusContext || !performanceContext || !addRowContext || !interactionRouterContext) {
+  throw new Error("NuGridAddRow must be used within a NuGrid component.");
+}
+const { tableApi, ui, propsUi } = coreContext;
+const { focusFns, cellEditingFns } = focusContext;
+const { getVisibleCells, shouldHaveBorder } = performanceContext;
+const { interactionRouter } = interactionRouterContext;
+const isAddRow = computed(() => addRowContext.isAddRowRow(props.row));
+const showIndicator = computed(() => addRowContext.addRowState.value === "idle" && isAddRow.value);
+const indicatorText = computed(() => addRowContext.addNewText.value);
+const indicatorLeftOffset = computed(() => {
+  if (!showIndicator.value) return 0;
+  const cells = getVisibleCells(props.row);
+  let offset = 0;
+  for (const cell of cells) {
+    const isEditable = cellEditingFns.isCellEditable(props.row, cell);
+    if (isEditable) {
+      break;
+    }
+    offset += cell.column.getSize();
+  }
+  return offset;
+});
+</script>
+
+<template>
+  <div
+    :ref="measureRef"
+    :data-index="dataIndex"
+    :data-add-row="isAddRow"
+    :data-row-id="row.id"
+    :data-selected="false"
+    data-selectable="false"
+    :data-expanded="row.getIsExpanded()"
+    :data-active-row="focusFns.isActiveRow(row)"
+    :data-focused-row="focusFns.isFocusedRow(row)"
+    :tabindex="focusFns.getRowTabIndex(row)"
+    :class="[
+  ui.tr({
+    class: [propsUi?.tr, resolveValue(tableApi.options.meta?.class?.tr, row)],
+    focusRow: !!focusFns.isFocusedRow(row),
+    gridFocused: focusFns.gridHasFocus.value
+  })
+]"
+    :style="[
+  resolveValue(tableApi.options.meta?.style?.tr, row),
+  style,
+  minHeight ? { minHeight: `${minHeight}px` } : {},
+  showIndicator ? { position: 'relative' } : {}
+]"
+    @click.stop
+    @pointerenter.stop
+    @pointerleave.stop
+    @contextmenu.prevent
+  >
+    <!-- Add row indicator overlay - shown when idle -->
+    <div
+      v-if="showIndicator"
+      :class="ui.addRowIndicator({ class: propsUi?.addRowIndicator })"
+      :style="
+  !addRowContext.indicatorSlot && indicatorLeftOffset ? { left: `${indicatorLeftOffset}px` } : {}
+"
+    >
+      <component
+        :is="() => addRowContext.indicatorSlot?.({ row, text: indicatorText })"
+        v-if="addRowContext.indicatorSlot"
+      />
+      <template v-else>{{ indicatorText }}</template>
+    </div>
+
+    <div
+      v-for="(cell, cellIndex) in getVisibleCells(row)"
+      :key="cell.id"
+      :data-cell-index="cellIndex"
+      :data-column-id="cell.column.id"
+      :data-pinned="cell.column.getIsPinned()"
+      :data-focused="focusFns.isFocusedCell(row, cellIndex)"
+      :tabindex="focusFns.getCellTabIndex(row, cellIndex)"
+      :class="[
+  cellEditingFns.isEditingCell(row, cell.column.id) && cell.column.columnDef.cellDataType !== 'boolean' ? 'p-3!' : '',
+  ui.td({
+    class: [propsUi?.td, resolveValue(cell.column.columnDef.meta?.class?.td, cell)],
+    pinned: !!cell.column.getIsPinned(),
+    hasLeftBorder: shouldHaveBorder(row, cellIndex, 'left'),
+    hasRightBorder: shouldHaveBorder(row, cellIndex, 'right'),
+    focusCell: !!focusFns.isFocusedCell(row, cellIndex) && !cellEditingFns.isEditingCell(row, cell.column.id),
+    focusRow: !!focusFns.isFocusedRow(row),
+    activeRow: focusFns.isActiveRow(row) && !focusFns.isFocusedRow(row),
+    gridFocused: focusFns.gridHasFocus.value
+  })
+]"
+      :style="{
+  ...resolveStyleObject(cell.column.columnDef.meta?.style?.td, cell),
+  width: `${cell.column.getSize()}px`,
+  minWidth: `${cell.column.getSize()}px`,
+  maxWidth: `${cell.column.getSize()}px`,
+  ...cell.column.getIsPinned() === 'left' ? { left: `${cell.column.getStart('left')}px` } : {},
+  ...cell.column.getIsPinned() === 'right' ? { right: `${cell.column.getAfter('right')}px` } : {},
+  ...resolveValue(cell.column.columnDef.meta?.colspan?.td, cell) ? { flexGrow: resolveValue(cell.column.columnDef.meta?.colspan?.td, cell) } : {}
+}"
+      @click="
+  (e) => interactionRouter.routeCellClick({
+    event: e,
+    row,
+    cell,
+    cellIndex
+  })
+"
+      @dblclick="cellEditingFns.onCellDoubleClick($event, row, cell)"
+    >
+      <slot :cell="cell" :row="row" :cell-index="cellIndex">
+        <NuGridCellContent :cell="cell" :row="row" :cell-editing-fns="cellEditingFns" />
+      </slot>
+    </div>
+  </div>
+
+  <div v-if="row.getIsExpanded() && !!slots.expanded" :class="ui.tr({ class: [propsUi?.tr] })">
+    <div :class="ui.td({ class: [propsUi?.td] })">
+      <slot name="expanded" :row="row" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/_internal/NuGridAddRow.vue.d.ts

@@ -0,0 +1,36 @@
+import type { TableData } from '@nuxt/ui';
+import type { Row } from '@tanstack/vue-table';
+import type { ComponentPublicInstance } from 'vue';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        row: Row<T>;
+        style?: Record<string, any>;
+        minHeight?: number;
+        dataIndex?: number;
+        measureRef?: (el: Element | ComponentPublicInstance | null) => void;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            cell: any;
+            row: Row<T>;
+            cellIndex: number;
+        }) => any;
+        expanded?: (props: {
+            row: Row<T>;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/_internal/NuGridBase.d.vue.ts

@@ -0,0 +1,20 @@
+import type { TableData, TableSlots } from '@nuxt/ui';
+import type { NuGridProps } from '../../types/index.js';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<NuGridProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TableSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};