@sellmate/design-system-vue 1.0.61 → 1.0.63

package/README.md

@@ -93,7 +93,7 @@ const handleClick = () => {
 - `SdInput` - Input component
 - `SdCheckbox` - Checkbox component
 - `SdSelect` - Select dropdown component
-- `SdTable` - Table component
+- `SdTableBackup` - Table component
 - `SdTag` - Tag component
 - `SdIcon` - Icon component
 - `SdTooltip` - Tooltip component

package/dist/components.d.ts

@@ -8,6 +8,7 @@ export declare const SdButtonV2: StencilVueComponent<JSX.SdButtonV2>;
 export declare const SdCalendar: StencilVueComponent<JSX.SdCalendar>;
 export declare const SdCard: StencilVueComponent<JSX.SdCard>;
 export declare const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheckbox["value"]>;
+export declare const SdCircleProgress: StencilVueComponent<JSX.SdCircleProgress>;
 export declare const SdConfirmModal: StencilVueComponent<JSX.SdConfirmModal>;
 export declare const SdDateBox: StencilVueComponent<JSX.SdDateBox>;
 export declare const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicker["value"]>;
@@ -24,7 +25,8 @@ export declare const SdGhostButton: StencilVueComponent<JSX.SdGhostButton>;
 export declare const SdGuide: StencilVueComponent<JSX.SdGuide>;
 export declare const SdIcon: StencilVueComponent<JSX.SdIcon>;
 export declare const SdInput: StencilVueComponent<JSX.SdInput, JSX.SdInput["value"]>;
-export declare const SdLoadingSpinner: StencilVueComponent<JSX.SdLoadingSpinner>;
+export declare const SdLoadingContainer: StencilVueComponent<JSX.SdLoadingContainer>;
+export declare const SdLoadingModal: StencilVueComponent<JSX.SdLoadingModal>;
 export declare const SdModalContainer: StencilVueComponent<JSX.SdModalContainer>;
 export declare const SdNumberInput: StencilVueComponent<JSX.SdNumberInput, JSX.SdNumberInput["value"]>;
 export declare const SdPagination: StencilVueComponent<JSX.SdPagination, JSX.SdPagination["currentPage"]>;
@@ -32,7 +34,7 @@ export declare const SdPopover: StencilVueComponent<JSX.SdPopover>;
 export declare const SdPortal: StencilVueComponent<JSX.SdPortal>;
 export declare const SdProgress: StencilVueComponent<JSX.SdProgress>;
 export declare const SdRadio: StencilVueComponent<JSX.SdRadio, JSX.SdRadio["value"]>;
-export declare const SdRadioButtonGroup: StencilVueComponent<JSX.SdRadioButtonGroup, JSX.SdRadioButtonGroup["value"]>;
+export declare const SdRadioButton: StencilVueComponent<JSX.SdRadioButton, JSX.SdRadioButton["value"]>;
 export declare const SdRadioGroup: StencilVueComponent<JSX.SdRadioGroup, JSX.SdRadioGroup["value"]>;
 export declare const SdSelect: StencilVueComponent<JSX.SdSelect, JSX.SdSelect["value"]>;
 export declare const SdSelectDropdown: StencilVueComponent<JSX.SdSelectDropdown>;
@@ -47,12 +49,18 @@ export declare const SdSelectV2ListItem: StencilVueComponent<JSX.SdSelectV2ListI
 export declare const SdSelectV2ListItemSearch: StencilVueComponent<JSX.SdSelectV2ListItemSearch>;
 export declare const SdSelectV2Listbox: StencilVueComponent<JSX.SdSelectV2Listbox>;
 export declare const SdSelectV2Trigger: StencilVueComponent<JSX.SdSelectV2Trigger>;
+export declare const SdSwitch: StencilVueComponent<JSX.SdSwitch, JSX.SdSwitch["value"]>;
+export declare const SdTable: StencilVueComponent<JSX.SdTable, JSX.SdTable["selected"]>;
 export declare const SdTabs: StencilVueComponent<JSX.SdTabs, JSX.SdTabs["value"]>;
 export declare const SdTag: StencilVueComponent<JSX.SdTag>;
+export declare const SdTbody: StencilVueComponent<JSX.SdTbody>;
+export declare const SdTd: StencilVueComponent<JSX.SdTd>;
 export declare const SdTextLink: StencilVueComponent<JSX.SdTextLink>;
 export declare const SdTextarea: StencilVueComponent<JSX.SdTextarea, JSX.SdTextarea["value"]>;
+export declare const SdThead: StencilVueComponent<JSX.SdThead>;
 export declare const SdToast: StencilVueComponent<JSX.SdToast>;
 export declare const SdToastContainer: StencilVueComponent<JSX.SdToastContainer>;
 export declare const SdToggle: StencilVueComponent<JSX.SdToggle, JSX.SdToggle["value"]>;
-export declare const SdToggleButton: StencilVueComponent<JSX.SdToggleButton, JSX.SdToggleButton["value"]>;
 export declare const SdTooltip: StencilVueComponent<JSX.SdTooltip>;
+export declare const SdTr: StencilVueComponent<JSX.SdTr>;
+export declare const TableTest: StencilVueComponent<JSX.TableTest>;

package/dist/components.js

@@ -67,6 +67,7 @@ export const SdButtonV2 = /*@__PURE__*/ defineContainer('sd-button-v2', undefine
     'name',
     'label',
     'icon',
+    'rightIcon',
     'ariaLabel',
     'disabled',
     'type',
@@ -93,11 +94,17 @@ export const SdCheckbox = /*@__PURE__*/ defineContainer('sd-checkbox', undefined
     'value',
     'val',
     'disabled',
+    'inverse',
     'label',
     'sdUpdate'
 ], [
     'sdUpdate'
 ], 'value', 'sdUpdate', undefined);
+export const SdCircleProgress = /*@__PURE__*/ defineContainer('sd-circle-progress', undefined, [
+    'indeterminate',
+    'value',
+    'type'
+]);
 export const SdConfirmModal = /*@__PURE__*/ defineContainer('sd-confirm-modal', undefined, [
     'type',
     'modalTitle',
@@ -231,6 +238,7 @@ export const SdField = /*@__PURE__*/ defineContainer('sd-field', undefined, [
     'hint',
     'errorMessage',
     'width',
+    'size',
     'label',
     'addonLabel',
     'icon',
@@ -350,8 +358,16 @@ export const SdInput = /*@__PURE__*/ defineContainer('sd-input', undefined, [
     'sdFocus',
     'sdBlur'
 ], 'value', 'sdUpdate', undefined);
-export const SdLoadingSpinner = /*@__PURE__*/ defineContainer('sd-loading-spinner', undefined, [
-    'color'
+export const SdLoadingContainer = /*@__PURE__*/ defineContainer('sd-loading-container', undefined);
+export const SdLoadingModal = /*@__PURE__*/ defineContainer('sd-loading-modal', undefined, [
+    'state',
+    'message',
+    'buttonLabel',
+    'width',
+    'height',
+    'sdClick'
+], [
+    'sdClick'
 ]);
 export const SdModalContainer = /*@__PURE__*/ defineContainer('sd-modal-container', undefined);
 export const SdNumberInput = /*@__PURE__*/ defineContainer('sd-number-input', undefined, [
@@ -440,7 +456,7 @@ export const SdRadio = /*@__PURE__*/ defineContainer('sd-radio', undefined, [
 ], [
     'sdUpdate'
 ], 'value', 'sdUpdate', undefined);
-export const SdRadioButtonGroup = /*@__PURE__*/ defineContainer('sd-radio-button-group', undefined, [
+export const SdRadioButton = /*@__PURE__*/ defineContainer('sd-radio-button', undefined, [
     'value',
     'options',
     'size',
@@ -692,6 +708,48 @@ export const SdSelectV2Trigger = /*@__PURE__*/ defineContainer('sd-select-v2-tri
 ], [
     'sdTriggerClick'
 ]);
+export const SdSwitch = /*@__PURE__*/ defineContainer('sd-switch', undefined, [
+    'value',
+    'label',
+    'disabled',
+    'sdUpdate'
+], [
+    'sdUpdate'
+], 'value', 'sdUpdate', undefined);
+export const SdTable = /*@__PURE__*/ defineContainer('sd-table', undefined, [
+    'tableId',
+    'columns',
+    'rows',
+    'selected',
+    'rowKey',
+    'selectable',
+    'resizable',
+    'width',
+    'height',
+    'stickyHeader',
+    'stickyColumn',
+    'noDataLabel',
+    'isLoading',
+    'pagination',
+    'useInternalPagination',
+    'useRowsPerPageSelect',
+    'useVirtualScroll',
+    'rowHeight',
+    'virtualBuffer',
+    'virtualEndThreshold',
+    'rowsPerPageOption',
+    'sdSelectChange',
+    'sdPageChange',
+    'sdRowsPerPageChange',
+    'sdVirtualUpdate',
+    'sdVirtualReachEnd'
+], [
+    'sdSelectChange',
+    'sdPageChange',
+    'sdRowsPerPageChange',
+    'sdVirtualUpdate',
+    'sdVirtualReachEnd'
+], 'selected', 'sdSelectChange', undefined);
 export const SdTabs = /*@__PURE__*/ defineContainer('sd-tabs', undefined, [
     'value',
     'tabs',
@@ -707,6 +765,14 @@ export const SdTag = /*@__PURE__*/ defineContainer('sd-tag', undefined, [
     'icon',
     'isLeft'
 ]);
+export const SdTbody = /*@__PURE__*/ defineContainer('sd-tbody', undefined, [
+    'rows'
+]);
+export const SdTd = /*@__PURE__*/ defineContainer('sd-td', undefined, [
+    'field',
+    'rowKey',
+    'align'
+]);
 export const SdTextLink = /*@__PURE__*/ defineContainer('sd-text-link', undefined, [
     'label',
     'icon',
@@ -751,6 +817,17 @@ export const SdTextarea = /*@__PURE__*/ defineContainer('sd-textarea', undefined
     'sdFocus',
     'sdBlur'
 ], 'value', 'sdUpdate', undefined);
+export const SdThead = /*@__PURE__*/ defineContainer('sd-thead', undefined, [
+    'columns',
+    'selectable',
+    'resizable',
+    'stickyColumn',
+    'stickyHeader',
+    'scrolledLeft',
+    'scrolledRight',
+    'rows',
+    'columnWidths'
+]);
 export const SdToast = /*@__PURE__*/ defineContainer('sd-toast', undefined, [
     'icon',
     'message',
@@ -781,14 +858,6 @@ export const SdToggle = /*@__PURE__*/ defineContainer('sd-toggle', undefined, [
 ], [
     'sdUpdate'
 ], 'value', 'sdUpdate', undefined);
-export const SdToggleButton = /*@__PURE__*/ defineContainer('sd-toggle-button', undefined, [
-    'value',
-    'label',
-    'disabled',
-    'sdUpdate'
-], [
-    'sdUpdate'
-], 'value', 'sdUpdate', undefined);
 export const SdTooltip = /*@__PURE__*/ defineContainer('sd-tooltip', undefined, [
     'trigger',
     'placement',
@@ -802,3 +871,19 @@ export const SdTooltip = /*@__PURE__*/ defineContainer('sd-tooltip', undefined,
     'noHover',
     'sdClass'
 ]);
+export const SdTr = /*@__PURE__*/ defineContainer('sd-tr', undefined, [
+    'columns',
+    'selectable',
+    'stickyColumn',
+    'rowKey',
+    'row'
+]);
+export const TableTest = /*@__PURE__*/ defineContainer('table-test', undefined, [
+    'columns',
+    'rows',
+    'bordered',
+    'striped',
+    'tableReady'
+], [
+    'tableReady'
+]);

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
+export { useSdTableVirtualScroll } from './composables/useSdTableVirtualScroll';
+export type { VirtualRow } from './composables/useSdTableVirtualScroll';
 export { sdModal, SdModalVuePlugin } from './sdModal';
-export { default as SdTable } from './SdTable';
-export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
+export { sdLoading } from '@sellmate/design-system/utils';
+export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
+export type { SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';

package/dist/index.js

@@ -1,5 +1,6 @@
 import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
+export { useSdTableVirtualScroll } from './composables/useSdTableVirtualScroll';
 export { sdModal, SdModalVuePlugin } from './sdModal';
-export { default as SdTable } from './SdTable';
+export { sdLoading } from '@sellmate/design-system/utils';

package/dist/sdModal.d.ts

@@ -1,5 +1,5 @@
 import { type App, type Component } from 'vue';
-import { type ConfirmModalOptions, type ModalDialogRef, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
+import { type ConfirmModalOptions, type LoadingModalOptions, type ModalDialogRef, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
 /**
  * Vue 플러그인. `app.use(SdModalVuePlugin)` 로 설치하면
  * 이후 `sdModal.create({ component: MyModal, componentProps: { ... } })` 호출 시
@@ -36,6 +36,7 @@ export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'comp
  */
 export declare const sdModal: {
     confirm(options: ConfirmModalOptions): ModalDialogRef;
+    loading(options?: LoadingModalOptions): ModalDialogRef;
     configure(options: SdModalGlobalOptions): void;
     create(input: SdModalCreateOption): ModalDialogRef;
 };

package/dist/sdModal.js

@@ -47,6 +47,9 @@ export const sdModal = {
     confirm(options) {
         return coreSdModal.confirm(options);
     },
+    loading(options = {}) {
+        return coreSdModal.loading(options);
+    },
     configure(options) {
         coreSdModal.configure(options);
     },

package/lib/components.ts

@@ -82,6 +82,7 @@ export const SdButtonV2: StencilVueComponent<JSX.SdButtonV2> = /*@__PURE__*/ def
   'name',
   'label',
   'icon',
+  'rightIcon',
   'ariaLabel',
   'disabled',
   'type',
@@ -114,6 +115,7 @@ export const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheckbox["val
   'value',
   'val',
   'disabled',
+  'inverse',
   'label',
   'sdUpdate'
 ], [
@@ -122,6 +124,13 @@ export const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheckbox["val
 'value', 'sdUpdate', undefined);
 
 
+export const SdCircleProgress: StencilVueComponent<JSX.SdCircleProgress> = /*@__PURE__*/ defineContainer<JSX.SdCircleProgress>('sd-circle-progress', undefined, [
+  'indeterminate',
+  'value',
+  'type'
+]);
+
+
 export const SdConfirmModal: StencilVueComponent<JSX.SdConfirmModal> = /*@__PURE__*/ defineContainer<JSX.SdConfirmModal>('sd-confirm-modal', undefined, [
   'type',
   'modalTitle',
@@ -273,6 +282,7 @@ export const SdField: StencilVueComponent<JSX.SdField> = /*@__PURE__*/ defineCon
   'hint',
   'errorMessage',
   'width',
+  'size',
   'label',
   'addonLabel',
   'icon',
@@ -410,8 +420,18 @@ export const SdInput: StencilVueComponent<JSX.SdInput, JSX.SdInput["value"]> = /
 'value', 'sdUpdate', undefined);
 
 
-export const SdLoadingSpinner: StencilVueComponent<JSX.SdLoadingSpinner> = /*@__PURE__*/ defineContainer<JSX.SdLoadingSpinner>('sd-loading-spinner', undefined, [
-  'color'
+export const SdLoadingContainer: StencilVueComponent<JSX.SdLoadingContainer> = /*@__PURE__*/ defineContainer<JSX.SdLoadingContainer>('sd-loading-container', undefined);
+
+
+export const SdLoadingModal: StencilVueComponent<JSX.SdLoadingModal> = /*@__PURE__*/ defineContainer<JSX.SdLoadingModal>('sd-loading-modal', undefined, [
+  'state',
+  'message',
+  'buttonLabel',
+  'width',
+  'height',
+  'sdClick'
+], [
+  'sdClick'
 ]);
 
 
@@ -519,7 +539,7 @@ export const SdRadio: StencilVueComponent<JSX.SdRadio, JSX.SdRadio["value"]> = /
 'value', 'sdUpdate', undefined);
 
 
-export const SdRadioButtonGroup: StencilVueComponent<JSX.SdRadioButtonGroup, JSX.SdRadioButtonGroup["value"]> = /*@__PURE__*/ defineContainer<JSX.SdRadioButtonGroup, JSX.SdRadioButtonGroup["value"]>('sd-radio-button-group', undefined, [
+export const SdRadioButton: StencilVueComponent<JSX.SdRadioButton, JSX.SdRadioButton["value"]> = /*@__PURE__*/ defineContainer<JSX.SdRadioButton, JSX.SdRadioButton["value"]>('sd-radio-button', undefined, [
   'value',
   'options',
   'size',
@@ -807,6 +827,54 @@ export const SdSelectV2Trigger: StencilVueComponent<JSX.SdSelectV2Trigger> = /*@
 ]);
 
 
+export const SdSwitch: StencilVueComponent<JSX.SdSwitch, JSX.SdSwitch["value"]> = /*@__PURE__*/ defineContainer<JSX.SdSwitch, JSX.SdSwitch["value"]>('sd-switch', undefined, [
+  'value',
+  'label',
+  'disabled',
+  'sdUpdate'
+], [
+  'sdUpdate'
+],
+'value', 'sdUpdate', undefined);
+
+
+export const SdTable: StencilVueComponent<JSX.SdTable, JSX.SdTable["selected"]> = /*@__PURE__*/ defineContainer<JSX.SdTable, JSX.SdTable["selected"]>('sd-table', undefined, [
+  'tableId',
+  'columns',
+  'rows',
+  'selected',
+  'rowKey',
+  'selectable',
+  'resizable',
+  'width',
+  'height',
+  'stickyHeader',
+  'stickyColumn',
+  'noDataLabel',
+  'isLoading',
+  'pagination',
+  'useInternalPagination',
+  'useRowsPerPageSelect',
+  'useVirtualScroll',
+  'rowHeight',
+  'virtualBuffer',
+  'virtualEndThreshold',
+  'rowsPerPageOption',
+  'sdSelectChange',
+  'sdPageChange',
+  'sdRowsPerPageChange',
+  'sdVirtualUpdate',
+  'sdVirtualReachEnd'
+], [
+  'sdSelectChange',
+  'sdPageChange',
+  'sdRowsPerPageChange',
+  'sdVirtualUpdate',
+  'sdVirtualReachEnd'
+],
+'selected', 'sdSelectChange', undefined);
+
+
 export const SdTabs: StencilVueComponent<JSX.SdTabs, JSX.SdTabs["value"]> = /*@__PURE__*/ defineContainer<JSX.SdTabs, JSX.SdTabs["value"]>('sd-tabs', undefined, [
   'value',
   'tabs',
@@ -827,6 +895,18 @@ export const SdTag: StencilVueComponent<JSX.SdTag> = /*@__PURE__*/ defineContain
 ]);
 
 
+export const SdTbody: StencilVueComponent<JSX.SdTbody> = /*@__PURE__*/ defineContainer<JSX.SdTbody>('sd-tbody', undefined, [
+  'rows'
+]);
+
+
+export const SdTd: StencilVueComponent<JSX.SdTd> = /*@__PURE__*/ defineContainer<JSX.SdTd>('sd-td', undefined, [
+  'field',
+  'rowKey',
+  'align'
+]);
+
+
 export const SdTextLink: StencilVueComponent<JSX.SdTextLink> = /*@__PURE__*/ defineContainer<JSX.SdTextLink>('sd-text-link', undefined, [
   'label',
   'icon',
@@ -876,6 +956,19 @@ export const SdTextarea: StencilVueComponent<JSX.SdTextarea, JSX.SdTextarea["val
 'value', 'sdUpdate', undefined);
 
 
+export const SdThead: StencilVueComponent<JSX.SdThead> = /*@__PURE__*/ defineContainer<JSX.SdThead>('sd-thead', undefined, [
+  'columns',
+  'selectable',
+  'resizable',
+  'stickyColumn',
+  'stickyHeader',
+  'scrolledLeft',
+  'scrolledRight',
+  'rows',
+  'columnWidths'
+]);
+
+
 export const SdToast: StencilVueComponent<JSX.SdToast> = /*@__PURE__*/ defineContainer<JSX.SdToast>('sd-toast', undefined, [
   'icon',
   'message',
@@ -913,17 +1006,6 @@ export const SdToggle: StencilVueComponent<JSX.SdToggle, JSX.SdToggle["value"]>
 'value', 'sdUpdate', undefined);
 
 
-export const SdToggleButton: StencilVueComponent<JSX.SdToggleButton, JSX.SdToggleButton["value"]> = /*@__PURE__*/ defineContainer<JSX.SdToggleButton, JSX.SdToggleButton["value"]>('sd-toggle-button', undefined, [
-  'value',
-  'label',
-  'disabled',
-  'sdUpdate'
-], [
-  'sdUpdate'
-],
-'value', 'sdUpdate', undefined);
-
-
 export const SdTooltip: StencilVueComponent<JSX.SdTooltip> = /*@__PURE__*/ defineContainer<JSX.SdTooltip>('sd-tooltip', undefined, [
   'trigger',
   'placement',
@@ -938,3 +1020,23 @@ export const SdTooltip: StencilVueComponent<JSX.SdTooltip> = /*@__PURE__*/ defin
   'sdClass'
 ]);
 
+
+export const SdTr: StencilVueComponent<JSX.SdTr> = /*@__PURE__*/ defineContainer<JSX.SdTr>('sd-tr', undefined, [
+  'columns',
+  'selectable',
+  'stickyColumn',
+  'rowKey',
+  'row'
+]);
+
+
+export const TableTest: StencilVueComponent<JSX.TableTest> = /*@__PURE__*/ defineContainer<JSX.TableTest>('table-test', undefined, [
+  'columns',
+  'rows',
+  'bordered',
+  'striped',
+  'tableReady'
+], [
+  'tableReady'
+]);
+

package/lib/composables/useSdTableVirtualScroll.ts

@@ -0,0 +1,84 @@
+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),
+  };
+}

package/lib/index.ts

@@ -2,13 +2,15 @@ import '@sellmate/design-system/styles.css';
 
 export * from './components';
 export * from './plugin';
+export { useSdTableVirtualScroll } from './composables/useSdTableVirtualScroll';
+export type { VirtualRow } from './composables/useSdTableVirtualScroll';
 export { sdModal, SdModalVuePlugin } from './sdModal';
-export { default as SdTable } from './SdTable';
+export { sdLoading } from '@sellmate/design-system/utils';
+export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
 
 // Export commonly used types for Vue usage
 export type {
  // Table types
- SdTableSortDir,
  SdTableColumn,
  Row as SdTableRow,
  // Select types

package/lib/sdModal.ts

@@ -10,6 +10,7 @@ import {
   _createSdModalRef,
   _attachSdModalWithRef,
   type ConfirmModalOptions,
+  type LoadingModalOptions,
   type ModalDialogRef,
   type SdModalCreateOption as CoreSdModalCreateOption,
   type SdModalGlobalOptions,
@@ -92,6 +93,10 @@ export const sdModal = {
     return coreSdModal.confirm(options);
   },
 
+  loading(options: LoadingModalOptions = {}): ModalDialogRef {
+    return coreSdModal.loading(options);
+  },
+
   configure(options: SdModalGlobalOptions): void {
     coreSdModal.configure(options);
   },

package/package.json

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

package/lib/SdTable.ts

@@ -1,260 +0,0 @@
-import {
- computed,
- defineComponent,
- h,
- ref,
- useAttrs,
- useSlots,
- watch,
- type PropType,
-} from 'vue';
-import type { Row as SdTableRow, SdTableColumn, SelectOption } from '@sellmate/design-system';
-
-type TablePagination = {
- page: number;
- rowsPerPage: number;
- lastPage?: number;
-};
-
-type TableVirtualScroll = {
- vertical?: boolean;
- horizontal?: boolean;
-};
-
-type TableVirtualBufferSize = {
- vertical?: number;
- horizontal?: number;
-};
-
-const SLOT_WRAPPER_STYLE = {
- display: 'contents',
-};
-
-const getCellValue = (column: SdTableColumn, row: SdTableRow) => {
- 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 as PropType<SdTableColumn[]>,
-   required: true,
-  },
-  rows: {
-   type: Array as PropType<SdTableRow[]>,
-   required: true,
-  },
-  modelValue: {
-   type: Array as PropType<SdTableRow[]>,
-   default: undefined,
-  },
-  selected: {
-   type: Array as PropType<SdTableRow[]>,
-   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 as PropType<{ left?: number; right?: number }>,
-   default: () => ({ left: 0, right: 0 }),
-  },
-  noDataLabel: {
-   type: String,
-   default: '데이터가 없습니다.',
-  },
-  isLoading: {
-   type: Boolean,
-   default: false,
-  },
-  pagination: {
-   type: Object as PropType<TablePagination | undefined>,
-   default: undefined,
-  },
-  useInternalPagination: {
-   type: Boolean,
-   default: false,
-  },
-  useRowsPerPageSelect: {
-   type: Boolean,
-   default: false,
-  },
-  rowsPerPageOption: {
-   type: Array as PropType<SelectOption[]>,
-   default: () => [
-    { label: '10개씩 보기', value: 10 },
-    { label: '25개씩 보기', value: 25 },
-    { label: '50개씩 보기', value: 50 },
-    { label: '100개씩 보기', value: 100 },
-   ],
-  },
-  useVirtualScroll: {
-   type: Object as PropType<TableVirtualScroll>,
-   default: () => ({}),
-  },
-  virtualRowHeight: {
-   type: Number,
-   default: 44,
-  },
-  virtualColumnWidth: {
-   type: Number,
-   default: 120,
-  },
-  virtualBufferSize: {
-   type: Object as PropType<TableVirtualBufferSize>,
-   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: CustomEvent<SdTableRow[]>) => {
-      emit('update:modelValue', event.detail);
-      emit('sdSelectChange', event);
-     },
-     onSdPageChange: (event: CustomEvent<number>) => {
-      currentPage.value = event.detail;
-      emit('sdPageChange', event);
-     },
-     onSdRowsPerPageChange: (event: CustomEvent<number>) => {
-      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,
-    },
-   );
-  };
- },
-});