nexa-ui-kit 0.6.4 → 0.7.0

package/dist/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/dist/components/NTabs.js

@@ -49,7 +49,7 @@ _sfc_main.render = function(ctx) {
         "\n    ",
         h('div', { class: "n-tabs-content", "data-v-339e5ee5": "" }, [
         "\n      ",
-        ctx.$slots['tab-' + activeKey.value] ? ctx.$slots['tab-' + activeKey.value]() : null,
+        ctx.$slots['tab-' + activeKey.value] ? ctx.$slots['tab-' + activeKey.value]() : ["\n        ", ctx.$slots.default ? ctx.$slots.default() : null, "\n      "],
         "\n    "
       ]),
         "\n  "

package/dist/components/NVirtualList.js

@@ -0,0 +1,91 @@
+import { signal, computed, onMounted, onUnmounted, effect, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-2d5f09ed',
+  __hmrId: 'NVirtualList_nexa',
+  props: {
+  items: { type: Array, default: () => [] },
+  itemHeight: { type: Number, default: 48 },
+  overscan: { type: Number, default: 3 },
+  renderItem: { type: Function, required: true },
+  keyFn: { type: Function, default: null }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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
+    }
+    return { containerRef, scrollTop, containerHeight, totalHeight, visibleRange, visibleItems, resizeObserver, onScroll, $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { containerRef, scrollTop, containerHeight, totalHeight, visibleRange, visibleItems, resizeObserver, onScroll, $slots, items, itemHeight, overscan, renderItem, keyFn, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-virtual-list", onScroll: onScroll, ref: el => containerRef.value = el, "data-v-2d5f09ed": "" }, [
+        "\n    ",
+        h('div', { class: "n-virtual-list-spacer", style: { height: totalHeight.value + 'px', position: 'relative' }, "data-v-2d5f09ed": "" }, [
+        "\n      ",
+        visibleItems.value.map((row, index) =>
+        h('div', { class: "n-virtual-list-row", key: keyFn ? keyFn(row.item, row.index) : row.index, style: { position: 'absolute', top: row.top + 'px', width: '100%', height: itemHeight + 'px' }, "data-v-2d5f09ed": "" }, [
+        "\n        ",
+        renderItem(row.item, row.index),
+        "\n      "
+      ])
+      ),
+        "\n    "
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-2d5f09ed'
+_sfc_main.__hmrId = 'NVirtualList_nexa'
+
+export default _sfc_main
+
+const __style = `.n-virtual-list[data-v-2d5f09ed]{
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.n-virtual-list-spacer[data-v-2d5f09ed]{
+  position: relative;
+}
+
+.n-virtual-list-row[data-v-2d5f09ed]{
+  box-sizing: border-box;
+}`
+injectStyle('data-v-2d5f09ed', __style)

package/dist/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/dist/index.d.ts

@@ -27,6 +27,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';

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,12 +18,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.6.4",
-    "nexa-mobile": "0.6.4"
+    "nexa-framework": "0.7.0",
+    "nexa-mobile": "0.7.0"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.6.4"
+    "nexa-compiler": "0.7.0"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist",

package/src/components/NDataTable.nexa

@@ -168,11 +168,28 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
     <div class="n-dt-wrapper">
       <table class="n-dt-table" :class="{ 'is-striped': stripedRows, 'is-hover': hoverRows }">
         <thead class="n-dt-thead">
-          <tr class="n-dt-head-row"><th v-if="selectionMode" class="n-dt-th is-selection"><input v-if="selectionMode === 'multiple'" class="n-dt-selectbox" type="checkbox" :checked="allVisibleSelected.value" @click.stop="toggleAllVisible" /></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="[`is-${col.align}`, col.sortable ? 'is-sortable' : '']" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }" :data-field="col.field" @click="onSortClick"><div class="n-dt-th-content"><span class="n-dt-th-text">{{ getHeaderContent(col) }}</span><span v-if="col.sortable" class="n-dt-sort" :class="{ 'is-active': internalSortField.value === col.field }"><span v-if="internalSortField.value !== col.field" class="n-dt-sort-icon">↕</span><span v-else class="n-dt-sort-icon">{{ internalSortOrder.value === 1 ? '↑' : '↓' }}</span></span></div><span v-if="resizableColumns" class="n-dt-resizer" :data-field="col.field" @mousedown="startResize"></span></th></tr>
+          <tr class="n-dt-head-row">
+            <th v-if="selectionMode" class="n-dt-th is-selection"><input v-if="selectionMode === 'multiple'" class="n-dt-selectbox" type="checkbox" :checked="allVisibleSelected.value" @click.stop="toggleAllVisible" /></th>
+            <th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="[`is-${col.align}`, col.sortable ? 'is-sortable' : '']" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }" :data-field="col.field" @click="onSortClick">
+              <div class="n-dt-th-content">
+                <span class="n-dt-th-text">{{ $slots.value && $slots.value[`header-${col.field}`] ? $slots[`header-${col.field}`]({ column: col }) : getHeaderContent(col) }}</span>
+                <span v-if="col.sortable" class="n-dt-sort" :class="{ 'is-active': internalSortField.value === col.field }">
+                  <span v-if="internalSortField.value !== col.field" class="n-dt-sort-icon">↕</span>
+                  <span v-else class="n-dt-sort-icon">{{ internalSortOrder.value === 1 ? '↑' : '↓' }}</span>
+                </span>
+              </div>
+              <span v-if="resizableColumns" class="n-dt-resizer" :data-field="col.field" @mousedown="startResize"></span>
+            </th>
+          </tr>
           <tr v-if="filterDisplay === 'row'" class="n-dt-filter-row"><th v-if="selectionMode" class="n-dt-th is-selection"></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }"><input v-if="col.filterable" class="n-dt-filter" :data-field="col.field" :value="(effectiveFilters.value[col.field]?.value) || ''" placeholder="Filter" @input="onColumnFilterInput" /></th></tr>
         </thead>
         <tbody class="n-dt-tbody">
-          <tr v-for="(row, i) in visibleRows.value" :key="getRowKey(row, i + internalFirst.value)" class="n-dt-row" :class="{ 'is-selected': isRowSelected(row, i + internalFirst.value) }" @click="toggleRowSelection(row, i + internalFirst.value)"><td v-if="selectionMode" class="n-dt-td is-selection"><input class="n-dt-selectbox" type="checkbox" :checked="isRowSelected(row, i + internalFirst.value)" @click.stop="toggleRowSelection(row, i + internalFirst.value)" /></td><td v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-td" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">{{ getCellContent(row, col, i + internalFirst.value) }}</td></tr>
+          <tr v-for="(row, i) in visibleRows.value" :key="getRowKey(row, i + internalFirst.value)" class="n-dt-row" :class="{ 'is-selected': isRowSelected(row, i + internalFirst.value) }" @click="toggleRowSelection(row, i + internalFirst.value)">
+            <td v-if="selectionMode" class="n-dt-td is-selection"><input class="n-dt-selectbox" type="checkbox" :checked="isRowSelected(row, i + internalFirst.value)" @click.stop="toggleRowSelection(row, i + internalFirst.value)" /></td>
+            <td v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-td" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">
+              {{ $slots.value && $slots.value[`body-${col.field}`] ? $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) : getCellContent(row, col, i + internalFirst.value) }}
+            </td>
+          </tr>
           <tr v-if="visibleRows.value.length === 0" class="n-dt-empty-row"><td :colspan="normalizeColumns.value.length + (selectionMode ? 1 : 0)" class="n-dt-empty">{{ emptyMessage }}</td></tr>
         </tbody>
       </table>

package/src/components/NImage.nexa

@@ -0,0 +1,112 @@
+<script setup>
+import { signal, computed, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  fallback: { type: String, default: '' },
+  fit: { type: String, default: 'cover' },
+  lazy: { type: Boolean, default: true },
+  width: { type: String, default: null },
+  height: { type: String, default: null },
+  rounded: { type: Boolean, default: false },
+  blur: { type: Boolean, default: true }
+})
+
+const loaded = signal(false)
+const error = signal(false)
+const visible = signal(!props.lazy)
+let observer = null
+let imgRef = null
+
+const currentSrc = computed(() => {
+  if (error.value && props.fallback) return props.fallback
+  return props.src
+})
+
+const wrapperStyle = computed(() => ({
+  width: props.width ?? '100%',
+  height: props.height ?? 'auto',
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'block',
+  borderRadius: props.rounded ? '50%' : undefined
+}))
+
+const imgStyle = computed(() => ({
+  width: '100%',
+  height: '100%',
+  objectFit: props.fit,
+  transition: 'opacity 0.3s ease, filter 0.4s ease',
+  opacity: loaded.value ? '1' : '0',
+  filter: (props.blur && !loaded.value) ? 'blur(8px)' : 'none'
+}))
+
+onMounted(() => {
+  if (!props.lazy) return
+  observer = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting) {
+      visible.value = true
+      observer?.disconnect()
+    }
+  }, { rootMargin: '200px' })
+  if (imgRef) observer.observe(imgRef)
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+
+const onLoad = () => { console.log('ON_LOAD_CALLED'); loaded.value = true }
+const onError = () => { console.log('ON_ERROR_CALLED'); error.value = true; loaded.value = true }
+</script>
+
+<template>
+  <span
+    class="n-image-wrapper"
+    :style="wrapperStyle.value"
+    :ref="el => imgRef = el"
+  >
+    <span v-if="!loaded.value" class="n-image-skeleton" />
+    <img
+      v-if="visible.value"
+      :src="currentSrc.value"
+      :alt="alt"
+      :style="{ width: '100%', height: '100%', objectFit: fit, transition: 'opacity 0.3s ease, filter 0.4s ease', opacity: loaded.value ? '1' : '0', filter: (blur && !loaded.value) ? 'blur(8px)' : 'none' }"
+      class="n-image"
+      @load="onLoad"
+      @error="onError"
+    />
+  </span>
+</template>
+
+<style scoped>
+.n-image-wrapper {
+  background: var(--n-color-surface-hover, #1a1a2e);
+  display: inline-block;
+}
+
+.n-image-skeleton {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--n-color-surface, #111827) 25%,
+    var(--n-color-surface-hover, #1f2937) 50%,
+    var(--n-color-surface, #111827) 75%
+  );
+  background-size: 200% 100%;
+  animation: n-img-shimmer 1.5s infinite;
+}
+
+@keyframes n-img-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.n-image {
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+</style>

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>