nexa-ui-kit 0.6.2 → 0.7.0

package/src/components/NScrollView.nexa

@@ -0,0 +1,136 @@
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  onRefresh: { type: Function, default: null },
+  onEndReached: { type: Function, default: null },
+  endReachedThreshold: { type: Number, default: 80 },
+  horizontal: { type: Boolean, default: false }
+})
+
+const isRefreshing = signal(false)
+const pullDelta = signal(0)
+const refreshThreshold = 60
+let touchStartY = 0
+let startScrollTop = 0
+
+const pullProgress = computed(() =>
+  Math.min(1, pullDelta.value / refreshThreshold)
+)
+
+const spinnerScale = computed(() =>
+  `scale(${pullProgress.value})`
+)
+
+const onTouchStart = (e) => {
+  const container = e.currentTarget
+  startScrollTop = container.scrollTop
+  touchStartY = e.touches[0].clientY
+}
+
+const onTouchMove = (e) => {
+  if (isRefreshing.value || !props.onRefresh) return
+  const container = e.currentTarget
+  const dy = e.touches[0].clientY - touchStartY
+  if (container.scrollTop === 0 && dy > 0 && startScrollTop === 0) {
+    pullDelta.value = Math.min(dy * 0.5, refreshThreshold * 1.5)
+  }
+}
+
+const onTouchEnd = async () => {
+  if (!props.onRefresh || pullDelta.value < refreshThreshold) {
+    pullDelta.value = 0
+    return
+  }
+  isRefreshing.value = true
+  pullDelta.value = 0
+  try {
+    await props.onRefresh()
+  } finally {
+    isRefreshing.value = false
+  }
+}
+
+const onScroll = (e) => {
+  if (!props.onEndReached) return
+  const el = e.target
+  const distanceFromBottom = props.horizontal
+    ? el.scrollWidth - el.scrollLeft - el.clientWidth
+    : el.scrollHeight - el.scrollTop - el.clientHeight
+  if (distanceFromBottom <= props.endReachedThreshold) {
+    props.onEndReached()
+  }
+}
+</script>
+
+<template>
+  <div
+    class="n-scroll-view"
+    :class="{ 'n-scroll-view--horizontal': horizontal }"
+    @scroll="onScroll"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <div
+      v-if="onRefresh"
+      class="n-scroll-view-ptr"
+      :class="{ 'is-refreshing': isRefreshing.value }"
+      :style="{ height: pullDelta.value + 'px' }"
+    >
+      <div
+        class="n-scroll-view-spinner"
+        :style="{ transform: isRefreshing.value ? 'scale(1)' : spinnerScale.value }"
+      >
+        ⟳
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.n-scroll-view {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  position: relative;
+}
+
+.n-scroll-view--horizontal {
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+}
+
+.n-scroll-view-ptr {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.1s;
+}
+
+.n-scroll-view-ptr.is-refreshing {
+  height: 52px !important;
+}
+
+.n-scroll-view-spinner {
+  font-size: 24px;
+  color: var(--n-color-primary, #6366f1);
+  transition: transform 0.1s;
+  line-height: 1;
+  transform-origin: center;
+}
+
+.n-scroll-view-ptr.is-refreshing .n-scroll-view-spinner {
+  animation: n-spin 0.8s linear infinite;
+}
+
+@keyframes n-spin {
+  to { transform: rotate(360deg) scale(1); }
+}
+</style>

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'