nexa-ui-kit 0.6.4 → 0.7.0

package/src/components/NVirtualList.nexa

@@ -0,0 +1,94 @@
+<script setup>
+import { signal, computed, onMounted, onUnmounted, effect } from 'nexa-framework'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  itemHeight: { type: Number, default: 48 },
+  overscan: { type: Number, default: 3 },
+  renderItem: { type: Function, required: true },
+  keyFn: { type: Function, default: null }
+})
+
+const containerRef = signal(null)
+const scrollTop = signal(0)
+const containerHeight = signal(400)
+
+const totalHeight = computed(() => props.items.length * props.itemHeight)
+
+const visibleRange = computed(() => {
+  const start = Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.overscan)
+  const visibleCount = Math.ceil(containerHeight.value / props.itemHeight) + props.overscan * 2
+  const end = Math.min(props.items.length, start + visibleCount)
+  return { start, end }
+})
+
+const visibleItems = computed(() => {
+  const { start, end } = visibleRange.value
+  return props.items.slice(start, end).map((item, i) => ({
+    item,
+    index: start + i,
+    top: (start + i) * props.itemHeight
+  }))
+})
+
+let resizeObserver = null
+
+onMounted(() => {
+  const el = containerRef.value
+  if (!el) return
+  containerHeight.value = el.clientHeight
+
+  resizeObserver = new ResizeObserver(entries => {
+    containerHeight.value = entries[0].contentRect.height
+  })
+  resizeObserver.observe(el)
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+})
+
+const onScroll = (e) => {
+  scrollTop.value = e.target.scrollTop
+}
+</script>
+
+<template>
+  <div
+    class="n-virtual-list"
+    @scroll="onScroll"
+    :ref="el => containerRef.value = el"
+  >
+    <div
+      class="n-virtual-list-spacer"
+      :style="{ height: totalHeight.value + 'px', position: 'relative' }"
+    >
+      <div
+        v-for="row in visibleItems.value"
+        :key="keyFn ? keyFn(row.item, row.index) : row.index"
+        class="n-virtual-list-row"
+        :style="{ position: 'absolute', top: row.top + 'px', width: '100%', height: itemHeight + 'px' }"
+      >
+        {{ renderItem(row.item, row.index) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-virtual-list {
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.n-virtual-list-spacer {
+  position: relative;
+}
+
+.n-virtual-list-row {
+  box-sizing: border-box;
+}
+</style>

package/src/index.ts

@@ -30,6 +30,9 @@ export { default as NInputNumber } from './components/NInputNumber.nexa'
 export { default as NMultiSelect } from './components/NMultiSelect.nexa'
 export { default as NDataTable } from './components/NDataTable.nexa'
 export { default as NPaginator } from './components/NPaginator.nexa'
+export { default as NVirtualList } from './components/NVirtualList.nexa'
+export { default as NScrollView } from './components/NScrollView.nexa'
+export { default as NImage } from './components/NImage.nexa'
 export * from './services/ToastService.js'
 export * from './services/FormValidation.js'
 export { installTheme } from './styles/theme.js'