@sellmate/design-system-vue 1.0.59 → 1.0.60

package/dist/composables/useSdTableVirtualScroll.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from 'vue';
+export interface VirtualRow<T = Record<string, any>> {
+    /** 전체 rows 기준 절대 인덱스 — sd-tr의 rowKey로 사용 */
+    index: number;
+    row: T;
+}
+export declare function useSdTableVirtualScroll<T extends Record<string, any>>(tableRef: Ref<any>, rows: Ref<T[]>): {
+    virtualRows: import("vue").ComputedRef<VirtualRow<T>[]>;
+    from: import("vue").ComputedRef<number>;
+    to: import("vue").ComputedRef<number>;
+};

package/dist/composables/useSdTableVirtualScroll.js

@@ -0,0 +1,58 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+export function useSdTableVirtualScroll(tableRef, rows) {
+    const range = ref(null);
+    let targetEl = null;
+    let rafId = 0;
+    const onVirtualUpdate = (e) => {
+        const { from, to } = e.detail;
+        range.value = { from, to };
+    };
+    const syncRange = (el) => {
+        const currentRange = el.getVirtualScrollRangeSync?.();
+        if (currentRange &&
+            typeof currentRange.from === 'number' &&
+            typeof currentRange.to === 'number') {
+            range.value = { from: currentRange.from, to: currentRange.to };
+            return true;
+        }
+        return false;
+    };
+    const attachWhenReady = () => {
+        // Stencil Vue 래퍼는 expose()를 사용하지 않으므로 $el로 실제 custom element에 접근
+        const raw = tableRef.value?.$el ?? tableRef.value;
+        const el = raw instanceof HTMLElement ? raw : null;
+        if (!el) {
+            rafId = requestAnimationFrame(attachWhenReady);
+            return;
+        }
+        targetEl = el;
+        targetEl.addEventListener('sdVirtualUpdate', onVirtualUpdate);
+        const trySync = () => {
+            if (!targetEl)
+                return;
+            if (!syncRange(targetEl)) {
+                rafId = requestAnimationFrame(trySync);
+            }
+        };
+        trySync();
+    };
+    onMounted(() => {
+        attachWhenReady();
+    });
+    onUnmounted(() => {
+        cancelAnimationFrame(rafId);
+        targetEl?.removeEventListener('sdVirtualUpdate', onVirtualUpdate);
+        targetEl = null;
+    });
+    const virtualRows = computed(() => {
+        if (!range.value)
+            return [];
+        const { from, to } = range.value;
+        return rows.value.slice(from, to).map((row, i) => ({ index: from + i, row }));
+    });
+    return {
+        virtualRows,
+        from: computed(() => range.value?.from ?? 0),
+        to: computed(() => range.value?.to ?? 0),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-vue",
- "version": "1.0.59",
+ "version": "1.0.60",
  "description": "Design System - Vue Component Wrappers",
  "keywords": [
   "vue",
@@ -45,7 +45,7 @@
   "vue": "^3.4.38"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.59",
+  "@sellmate/design-system": "^1.0.60",
   "@stencil/vue-output-target": "^0.11.8"
  },
  "peerDependencies": {