@indielayer/ui 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/select/Select.vue

@@ -26,7 +26,7 @@ const selectProps = {
   },
   virtualListOverscan: {
     type: Number,
-    default: 5,
+    default: 10,
   },
   placement: String as PropType<PopoverPlacement>,
 }
@@ -78,7 +78,7 @@ import XInput from '../input/Input.vue'
 
 const props = defineProps(selectProps)
 
-const emit = defineEmits([...useInputtable.emits(), 'close'])
+const emit = defineEmits([...useInputtable.emits(), 'close', 'open'])
 
 const internalMultiple = computed(() => props.multiple || props.multipleCheckbox)
 
@@ -189,6 +189,7 @@ watch(isOpen, (isOpenValue) => {
       })
     }, 50)
 
+    emit('open')
   } else {
     if (props.filterable) filter.value = ''
     emit('close')

package/src/components/table/Table.vue

@@ -41,7 +41,7 @@ const tableProps = {
   },
   virtualListOverscan: {
     type: Number,
-    default: 5,
+    default: 10,
   },
   keyProp: String,
   selectable: Boolean,

package/src/composables/useVirtualList.ts

@@ -21,7 +21,7 @@ export type UseVirtualListOptions = {
   /**
    * the extra buffer items outside of the view area
    *
-   * @default 5
+   * @default 10
    */
   overscan?: number;
 }

package/src/index.ts

@@ -3,6 +3,7 @@ export { default as version } from './version'
 export * from './components'
 export * from './composables'
 export * from './themes'
+export * from './virtual'
 export type { UITheme, ComponentThemes } from './theme'
 
 export { default as createUI, type UIOptions } from './create'

package/src/install.ts

@@ -1,8 +1,14 @@
 import * as components from './components'
+import { XVirtualGrid, XVirtualList, XInfiniteLoader } from './virtual'
 import create from './create'
 
 export default create({
-  components: Object.keys(components).map(
-    (key) => components[key as keyof object],
-  ),
+  components: [
+    ...Object.keys(components).map(
+      (key) => components[key as keyof object],
+    ),
+    XVirtualList,
+    XVirtualGrid,
+    XInfiniteLoader,
+  ],
 })

package/src/version.ts

@@ -1 +1 @@
-export default '1.16.0'
+export default '1.17.0'

package/src/virtual/README.md

@@ -0,0 +1,285 @@
+# Indielayer - Virtual Vue
+
+Vue 3 port of [react-window](https://github.com/bvaughn/react-window) - Efficient virtualized list and grid components using the Composition API.
+
+## Overview
+
+High-performance virtualized list and grid components for Vue 3 applications. It renders only the visible items in large datasets, dramatically improving performance when dealing with thousands of rows or cells.
+
+## Quick Start
+
+### List Example
+
+```vue
+<script setup lang="ts">
+import { XVirtualList } from '@indielayer/ui'
+
+const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`)
+</script>
+
+<template>
+  <XVirtualList
+    :row-count="items.length"
+    :row-height="50"
+    :style="{ height: '400px' }"
+  >
+    <template #row="{ index, style }">
+      <div :style="style" class="row">
+        {{ items[index] }}
+      </div>
+    </template>
+  </XVirtualList>
+</template>
+
+<style scoped>
+.row {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### Grid Example
+
+```vue
+<script setup lang="ts">
+import { XVirtualGrid } from '@indielayer/ui'
+</script>
+
+<template>
+  <XVirtualGrid
+    :row-count="1000"
+    :column-count="1000"
+    :row-height="50"
+    :column-width="100"
+    :style="{ height: '500px', width: '800px' }"
+  >
+    <template #cell="{ rowIndex, columnIndex, style }">
+      <div :style="style" class="cell">
+        Row {{ rowIndex }}, Col {{ columnIndex }}
+      </div>
+    </template>
+  </XVirtualGrid>
+</template>
+
+<style scoped>
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ddd;
+}
+</style>
+```
+
+## Features
+
+- ⚡️ **Virtual scrolling** - Only renders visible items
+- 📏 **Variable sizes** - Fixed, variable, or dynamic item sizes  
+- 📐 **Dynamic measurement** - Automatic height measurement with `useDynamicRowHeight`
+- 🌐 **RTL support** - Right-to-left language support
+- 🖥️ **SSR compatible** - Works with server-side rendering
+- 📝 **TypeScript** - Full type definitions included
+- 🎯 **Imperative API** - Programmatic scrolling via template refs
+- ♿️ **ARIA support** - Accessibility attributes built-in
+- 🔄 **Overscan** - Render extra items to reduce flicker
+- ♾️ **Infinite loading** - Built-in support for infinite scroll/pagination
+
+## Components & Composables
+
+### List
+
+Virtualized list component for rendering large datasets with many rows.
+
+```vue
+<script setup lang="ts">
+import { XVirtualList } from '@indielayer/ui'
+
+const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`)
+</script>
+
+<template>
+  <XVirtualList
+    :row-count="items.length"
+    :row-height="50"
+    :style="{ height: '400px' }"
+  >
+    <template #row="{ index, style }">
+      <div :style="style">
+        {{ items[index] }}
+      </div>
+    </template>
+  </XVirtualList>
+</template>
+```
+
+### Grid
+
+Virtualized grid component for rendering data with rows and columns.
+
+```vue
+<script setup lang="ts">
+import { XVirtualGrid } from '@indielayer/ui'
+
+const rowCount = 1000
+const columnCount = 1000
+</script>
+
+<template>
+  <XVirtualGrid
+    :row-count="rowCount"
+    :column-count="columnCount"
+    :row-height="50"
+    :column-width="100"
+    :style="{ height: '400px', width: '600px' }"
+  >
+    <template #cell="{ rowIndex, columnIndex, style }">
+      <div :style="style">
+        Row {{ rowIndex }}, Col {{ columnIndex }}
+      </div>
+    </template>
+  </XVirtualGrid>
+</template>
+```
+
+### Infinite Loader
+
+Utility for loading data on-demand as users scroll through lists.
+
+**Using the composable (recommended):**
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { XVirtualList, useInfiniteLoader } from '@indielayer/ui'
+
+const items = ref<string[]>([])
+const hasMoreData = ref(true)
+
+const isRowLoaded = (index: number) => index < items.value.length
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  
+  for (let i = startIndex; i <= stopIndex; i++) {
+    items.value[i] = `Item ${i}`
+  }
+  
+  if (items.value.length >= 1000) {
+    hasMoreData.value = false
+  }
+}
+
+const { onRowsRendered } = useInfiniteLoader({
+  isRowLoaded,
+  loadMoreRows,
+  rowCount: hasMoreData.value ? items.value.length + 50 : items.value.length,
+  minimumBatchSize: 20,
+  threshold: 15,
+})
+</script>
+
+<template>
+  <XVirtualList
+    :row-count="hasMoreData ? items.length + 50 : items.length"
+    :row-height="50"
+    :style="{ height: '400px' }"
+    :on-rows-rendered="onRowsRendered"
+  >
+    <template #row="{ index, style }">
+      <div :style="style">
+        {{ items[index] || 'Loading...' }}
+      </div>
+    </template>
+  </XVirtualList>
+</template>
+```
+
+**Using the component:**
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { XVirtualList, XInfiniteLoader } from '@indielayer/ui'
+
+const items = ref<string[]>([])
+
+const isRowLoaded = (index: number) => index < items.value.length
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  for (let i = startIndex; i <= stopIndex; i++) {
+    items.value[i] = `Item ${i}`
+  }
+}
+</script>
+
+<template>
+  <XInfiniteLoader
+    :is-row-loaded="isRowLoaded"
+    :load-more-rows="loadMoreRows"
+    :row-count="1000"
+  >
+    <template #default="{ onRowsRendered }">
+      <XVirtualList
+        :row-count="1000"
+        :row-height="50"
+        :style="{ height: '400px' }"
+        :on-rows-rendered="onRowsRendered"
+      >
+        <template #row="{ index, style }">
+          <div :style="style">
+            {{ items[index] || 'Loading...' }}
+          </div>
+        </template>
+      </XVirtualList>
+    </template>
+  </XInfiniteLoader>
+</template>
+```
+
+## API
+
+### XVirtualList Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `rowCount` | `number` | ✅ | Number of rows in the list |
+| `rowHeight` | `number \| string \| function` | ✅ | Row height (px, %, or function) |
+| `style` | `CSSProperties` | ❌ | Container styles (should include height) |
+| `rowProps` | `object` | ❌ | Additional props passed to row slot |
+| `overscanCount` | `number` | ❌ | Extra rows to render (default: 3) |
+| `defaultHeight` | `number` | ❌ | Default height for SSR |
+| `onRowsRendered` | `function` | ❌ | Callback when visible rows change |
+| `onResize` | `function` | ❌ | Callback when container resizes |
+
+### XVirtualGrid Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `rowCount` | `number` | ✅ | Number of rows |
+| `columnCount` | `number` | ✅ | Number of columns |
+| `rowHeight` | `number \| string \| function` | ✅ | Row height |
+| `columnWidth` | `number \| string \| function` | ✅ | Column width |
+| `style` | `CSSProperties` | ❌ | Container styles |
+| `cellProps` | `object` | ❌ | Additional props passed to cell slot |
+| `overscanCount` | `number` | ❌ | Extra rows/columns (default: 3) |
+| `dir` | `'ltr' \| 'rtl' \| 'auto'` | ❌ | Text direction |
+| `onCellsRendered` | `function` | ❌ | Callback when visible cells change |
+| `onResize` | `function` | ❌ | Callback when container resizes |
+
+### Infinite Loader Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `isRowLoaded` | `(index: number) => boolean` | ✅ | - | Function to check if a row is loaded |
+| `loadMoreRows` | `(start: number, stop: number) => Promise<void>` | ✅ | - | Async function to load more rows |
+| `rowCount` | `number` | ✅ | - | Total row count (can be estimated) |
+| `minimumBatchSize` | `number` | ❌ | 10 | Min rows to load per request |
+| `threshold` | `number` | ❌ | 15 | Pre-fetch distance in rows |
+
+## Credits
+
+This library is a Vue 3 port of [react-window](https://github.com/bvaughn/react-window) by Brian Vaughn. All credit for the original design and virtualization algorithms goes to the original author and contributors.

package/src/virtual/components/infiniteLoader/InfiniteLoader.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, test, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import InfiniteLoader from './InfiniteLoader.vue'
+import type { InfiniteLoaderProps } from '../../composables/infinite-loader/types'
+
+interface InfiniteLoaderSlotProps {
+  onRowsRendered: (props: { startIndex: number; stopIndex: number; }) => void;
+}
+
+describe('InfiniteLoader', () => {
+  test('should render slot with onRowsRendered callback', () => {
+    const isRowLoaded = vi.fn(() => true)
+    const loadMoreRows = vi.fn(() => Promise.resolve())
+
+    const wrapper = mount(InfiniteLoader, {
+      props: {
+        isRowLoaded,
+        loadMoreRows,
+        rowCount: 10,
+      } as InfiniteLoaderProps,
+      slots: {
+        default: (slotProps: InfiniteLoaderSlotProps) => {
+          return h('div', { 'data-testid': 'slot-content' }, [
+            `Callback type: ${typeof slotProps.onRowsRendered}`,
+          ])
+        },
+      },
+    })
+
+    expect(wrapper.html()).toContain('Callback type: function')
+  })
+
+  test('should pass through onRowsRendered callback that triggers loadMoreRows', () => {
+    const loadMoreRows = vi.fn(() => Promise.resolve())
+
+    let capturedCallback: ((props: { startIndex: number; stopIndex: number; }) => void) | null = null
+
+    mount(InfiniteLoader, {
+      props: {
+        isRowLoaded: (index) => index <= 2,
+        loadMoreRows,
+        rowCount: 10,
+        threshold: 0, // Disable threshold for this test
+        minimumBatchSize: 0, // Disable minimum batch size for this test
+      } as InfiniteLoaderProps,
+      slots: {
+        default: (slotProps: InfiniteLoaderSlotProps) => {
+          capturedCallback = slotProps.onRowsRendered
+
+          return h('div')
+        },
+      },
+    })
+
+    expect(capturedCallback).toBeDefined()
+    expect(typeof capturedCallback).toBe('function')
+
+    // Call the callback if it is defined
+    if (capturedCallback) {
+      (capturedCallback as (props: { startIndex: number; stopIndex: number; }) => void)({ startIndex: 0, stopIndex: 5 })
+    } else {
+      throw new Error('capturedCallback is null')
+    }
+
+    // Should have triggered loadMoreRows for unloaded rows 3-5
+    expect(loadMoreRows).toHaveBeenCalled()
+    expect(loadMoreRows).toHaveBeenCalledWith(3, 5)
+  })
+
+  test('should work with VList integration pattern', () => {
+    const loadMoreRows = vi.fn(() => Promise.resolve())
+    const loadedRows = new Set([0, 1, 2])
+
+    const wrapper = mount(InfiniteLoader, {
+      props: {
+        isRowLoaded: (index) => loadedRows.has(index),
+        loadMoreRows,
+        rowCount: 10,
+        minimumBatchSize: 5,
+      } as InfiniteLoaderProps,
+      slots: {
+        default: (slotProps: InfiniteLoaderSlotProps) => {
+          // Simulate VList calling onRowsRendered
+          slotProps.onRowsRendered({ startIndex: 0, stopIndex: 7 })
+
+          return h('div', 'List content')
+        },
+      },
+    })
+
+    // Should load rows 3-7 with minimum batch size of 5
+    expect(loadMoreRows).toHaveBeenCalled()
+    expect(wrapper.html()).toContain('List content')
+  })
+})

package/src/virtual/components/infiniteLoader/InfiniteLoader.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+export default {
+  name: 'XInfiniteLoader',
+}
+</script>
+
+<script setup lang="ts">
+import { useInfiniteLoader } from '../../composables/infinite-loader/useInfiniteLoader'
+import type { InfiniteLoaderProps } from '../../composables/infinite-loader/types'
+
+const props = defineProps<InfiniteLoaderProps>()
+
+const { onRowsRendered } = useInfiniteLoader(props)
+</script>
+
+<template>
+  <slot :on-rows-rendered="onRowsRendered" ></slot>
+</template>