@sellmate/design-system-vue 1.28.0 → 1.31.0

package/dist/SdTable.js

@@ -1,191 +0,0 @@
-import { computed, defineComponent, h, ref, useAttrs, useSlots, watch, } from 'vue';
-const SLOT_WRAPPER_STYLE = {
-    display: 'contents',
-};
-const getCellValue = (column, row) => {
-    const { field, format, name } = column;
-    const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-    return format ? format(value, row) : value;
-};
-export default defineComponent({
-    name: 'SdTable',
-    inheritAttrs: false,
-    props: {
-        columns: {
-            type: Array,
-            required: true,
-        },
-        rows: {
-            type: Array,
-            required: true,
-        },
-        modelValue: {
-            type: Array,
-            default: undefined,
-        },
-        selected: {
-            type: Array,
-            default: undefined,
-        },
-        rowKey: {
-            type: String,
-            default: 'id',
-        },
-        selectable: {
-            type: Boolean,
-            default: false,
-        },
-        resizable: {
-            type: Boolean,
-            default: false,
-        },
-        width: {
-            type: String,
-            default: undefined,
-        },
-        height: {
-            type: String,
-            default: undefined,
-        },
-        stickyHeader: {
-            type: Boolean,
-            default: false,
-        },
-        stickyColumn: {
-            type: Object,
-            default: () => ({ left: 0, right: 0 }),
-        },
-        noDataLabel: {
-            type: String,
-            default: '데이터가 없습니다.',
-        },
-        isLoading: {
-            type: Boolean,
-            default: false,
-        },
-        pagination: {
-            type: Object,
-            default: undefined,
-        },
-        useInternalPagination: {
-            type: Boolean,
-            default: false,
-        },
-        useRowsPerPageSelect: {
-            type: Boolean,
-            default: false,
-        },
-        rowsPerPageOption: {
-            type: Array,
-            default: () => [
-                { label: '10개씩 보기', value: 10 },
-                { label: '25개씩 보기', value: 25 },
-                { label: '50개씩 보기', value: 50 },
-                { label: '100개씩 보기', value: 100 },
-            ],
-        },
-        useVirtualScroll: {
-            type: Object,
-            default: () => ({}),
-        },
-        virtualRowHeight: {
-            type: Number,
-            default: 44,
-        },
-        virtualColumnWidth: {
-            type: Number,
-            default: 120,
-        },
-        virtualBufferSize: {
-            type: Object,
-            default: () => ({
-                vertical: 5,
-                horizontal: 5,
-            }),
-        },
-    },
-    emits: ['update:modelValue', 'sdSelectChange', 'sdPageChange', 'sdRowsPerPageChange'],
-    setup(props, { emit }) {
-        const attrs = useAttrs();
-        const slots = useSlots();
-        const normalizedRows = computed(() => props.rows ?? []);
-        const currentPage = ref(props.pagination?.page || 1);
-        const currentRowsPerPage = ref(props.pagination?.rowsPerPage || normalizedRows.value.length || 0);
-        watch(() => props.pagination, pagination => {
-            currentPage.value = pagination?.page || 1;
-            currentRowsPerPage.value = pagination?.rowsPerPage || normalizedRows.value.length || 0;
-        }, { immediate: true, deep: true });
-        watch(() => normalizedRows.value.length, rowLength => {
-            if (!currentRowsPerPage.value) {
-                currentRowsPerPage.value = rowLength;
-            }
-        });
-        const renderedRows = computed(() => {
-            if (!props.useInternalPagination || !currentRowsPerPage.value) {
-                return normalizedRows.value;
-            }
-            const startIndex = (currentPage.value - 1) * currentRowsPerPage.value;
-            return normalizedRows.value.slice(startIndex, startIndex + currentRowsPerPage.value);
-        });
-        return () => {
-            const slotChildren = [];
-            const noDataSlot = slots['no-data'];
-            if (noDataSlot) {
-                slotChildren.push(h('span', {
-                    key: 'no-data',
-                    slot: 'no-data',
-                    style: SLOT_WRAPPER_STYLE,
-                }, noDataSlot()));
-            }
-            props.columns.forEach(column => {
-                const headerSlot = slots[`header-${column.name}`] || slots.header;
-                if (headerSlot) {
-                    slotChildren.push(h('span', {
-                        key: `header-${column.name}`,
-                        slot: `header-cell-${column.name}`,
-                        style: SLOT_WRAPPER_STYLE,
-                    }, headerSlot({ column })));
-                }
-            });
-            renderedRows.value.forEach((row, rowIndex) => {
-                props.columns.forEach(column => {
-                    const cellSlot = slots[`cell-${column.name}`] || slots.cell;
-                    if (!cellSlot)
-                        return;
-                    slotChildren.push(h('span', {
-                        key: `cell-${column.name}-${rowIndex}`,
-                        slot: `body-cell-${column.name}-${rowIndex}`,
-                        style: SLOT_WRAPPER_STYLE,
-                    }, cellSlot({
-                        column,
-                        row,
-                        rowIndex,
-                        value: getCellValue(column, row),
-                    })));
-                });
-            });
-            return h('sd-table', {
-                ...attrs,
-                ...props,
-                rows: normalizedRows.value,
-                selected: props.modelValue ?? props.selected,
-                onSdSelectChange: (event) => {
-                    emit('update:modelValue', event.detail);
-                    emit('sdSelectChange', event);
-                },
-                onSdPageChange: (event) => {
-                    currentPage.value = event.detail;
-                    emit('sdPageChange', event);
-                },
-                onSdRowsPerPageChange: (event) => {
-                    currentRowsPerPage.value = event.detail;
-                    const lastPage = Math.max(1, Math.ceil(normalizedRows.value.length / event.detail));
-                    currentPage.value = Math.min(currentPage.value, lastPage);
-                    emit('sdRowsPerPageChange', event);
-                },
-            }, {
-                default: () => slotChildren,
-            });
-        };
-    },
-});

package/dist/composables/useSdTableVirtualScroll.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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/lib/composables/useSdTableVirtualScroll.ts

@@ -1,84 +0,0 @@
-import { ref, computed, onMounted, onUnmounted, type Ref } from 'vue';
-
-export interface VirtualRow<T = Record<string, any>> {
-  /** 전체 rows 기준 절대 인덱스 — sd-tr의 rowKey로 사용 */
-  index: number;
-  row: T;
-}
-
-interface SdVirtualUpdateDetail {
-  from: number;
-  to: number;
-}
-
-export function useSdTableVirtualScroll<T extends Record<string, any>>(
-  tableRef: Ref<any>,
-  rows: Ref<T[]>,
-) {
-  const range = ref<{ from: number; to: number } | null>(null);
-
-  let targetEl: HTMLElement | null = null;
-  let rafId = 0;
-
-  const onVirtualUpdate = (e: Event) => {
-    const { from, to } = (e as CustomEvent<SdVirtualUpdateDetail>).detail;
-    range.value = { from, to };
-  };
-
-  const syncRange = (el: HTMLElement): boolean => {
-    const currentRange = (el as any).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 as any)?.$el ?? tableRef.value;
-    const el: HTMLElement | null = 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<VirtualRow<T>[]>(() => {
-    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),
-  };
-}