@sellmate/design-system-vue 1.28.0 → 1.29.0

package/README.md

@@ -183,7 +183,6 @@ sdLoading.show({ message: "처리 중..." });
 | `SdField`      | 폼 필드 래퍼 (label + input + error) |
 | `SdForm`       | 폼 유효성 검사 컨테이너              |
 | `SdTabs`       | 탭 네비게이션                        |
-| `SdTable`      | 데이터 테이블                        |
 | `SdPagination` | 페이지네이션                         |
 
 ### 모달 / 알림
@@ -203,9 +202,6 @@ sdLoading.show({ message: "처리 중..." });
 
 ```ts
 import type {
-  // Table
-  SdTableColumn,
-  SdTableRow,
   // Select
   SelectOption,
   // Radio
@@ -232,22 +228,6 @@ import type {
 
 ---
 
-## Composables
-
-### `useSdTableVirtualScroll`
-
-```ts
-import { useSdTableVirtualScroll } from "@sellmate/design-system-vue";
-
-const { virtualRows, totalHeight, scrollToIndex } = useSdTableVirtualScroll({
-  rowCount: data.length,
-  rowHeight: 48,
-  containerHeight: 400,
-});
-```
-
----
-
 ## Requirements
 
 - Vue 3.0.0 or higher

package/dist/components.d.ts

@@ -46,16 +46,11 @@ export declare const SdSelectListItemSearch: StencilVueComponent<JSX.SdSelectLis
 export declare const SdSelectListbox: StencilVueComponent<JSX.SdSelectListbox>;
 export declare const SdSelectTrigger: StencilVueComponent<JSX.SdSelectTrigger>;
 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 SdTooltip: StencilVueComponent<JSX.SdTooltip>;
-export declare const SdTr: StencilVueComponent<JSX.SdTr>;

package/dist/components.js

@@ -166,7 +166,6 @@ export const SdConfirmModal = /*@__PURE__*/ defineContainer('sd-confirm-modal',
     'tagPreset',
     'tagLabel',
     'slotLabel',
-    'tagContents',
     'sdClose',
     'sdCancel',
     'sdOk'
@@ -421,6 +420,7 @@ export const SdInput = /*@__PURE__*/ defineContainer('sd-input', undefined, [
 ], 'value', 'sdUpdate', undefined);
 export const SdKeyValueTable = /*@__PURE__*/ defineContainer('sd-key-value-table', undefined, [
     'fields',
+    'values',
     'search',
     'radius',
     'sdChange',
@@ -657,42 +657,6 @@ export const SdSwitch = /*@__PURE__*/ defineContainer('sd-switch', undefined, [
 ], [
     'sdUpdate'
 ], 'value', 'sdUpdate', undefined);
-export const SdTable = /*@__PURE__*/ defineContainer('sd-table', undefined, [
-    'tableId',
-    'columns',
-    'rows',
-    'selected',
-    'rowKey',
-    'selectable',
-    'resizable',
-    'width',
-    'height',
-    'stickyHeader',
-    'stickyColumn',
-    'radius',
-    'noDataLabel',
-    'isLoading',
-    'pagination',
-    'useInternalPagination',
-    'useRowsPerPageSelect',
-    'dense',
-    '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',
@@ -710,20 +674,6 @@ export const SdTag = /*@__PURE__*/ defineContainer('sd-tag', undefined, [
     'isLeft',
     'width'
 ]);
-export const SdTbody = /*@__PURE__*/ defineContainer('sd-tbody', undefined, [
-    'rows'
-]);
-export const SdTd = /*@__PURE__*/ defineContainer('sd-td', undefined, [
-    'field',
-    'rowKey',
-    'align',
-    'rowspan',
-    'colspan',
-    'sdClass',
-    'dividerLeft',
-    'dividerRight',
-    'useFrame'
-]);
 export const SdTextLink = /*@__PURE__*/ defineContainer('sd-text-link', undefined, [
     'label',
     'icon',
@@ -773,20 +723,6 @@ 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',
-    'sdColumnSort'
-], [
-    'sdColumnSort'
-]);
 export const SdToast = /*@__PURE__*/ defineContainer('sd-toast', undefined, [
     'icon',
     'message',
@@ -839,11 +775,3 @@ export const SdTooltip = /*@__PURE__*/ defineContainer('sd-tooltip', undefined,
     'triggerClass',
     'triggerStyle'
 ]);
-export const SdTr = /*@__PURE__*/ defineContainer('sd-tr', undefined, [
-    'columns',
-    'selectable',
-    'stickyColumn',
-    'rowKey',
-    'row',
-    'separator'
-]);

package/dist/define-custom-elements.js

@@ -3,11 +3,6 @@ import { defineCustomElements as defineLazyCustomElements } from '@sellmate/desi
 import { defineCustomElement as defineSdCircleProgress } from '@sellmate/design-system/dist/components/sd-circle-progress.js';
 import { defineCustomElement as defineSdLinearProgress } from '@sellmate/design-system/dist/components/sd-linear-progress.js';
 import { defineCustomElement as defineSdLoadingModal } from '@sellmate/design-system/dist/components/sd-loading-modal.js';
-import { defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
-import { defineCustomElement as defineSdTbody } from '@sellmate/design-system/dist/components/sd-tbody.js';
-import { defineCustomElement as defineSdTd } from '@sellmate/design-system/dist/components/sd-td.js';
-import { defineCustomElement as defineSdThead } from '@sellmate/design-system/dist/components/sd-thead.js';
-import { defineCustomElement as defineSdTr } from '@sellmate/design-system/dist/components/sd-tr.js';
 import { defineCustomElement as defineSdDivider } from '@sellmate/design-system/dist/components/sd-divider.js';
 export function defineCustomElements() {
     if (typeof customElements === 'undefined')
@@ -16,11 +11,6 @@ export function defineCustomElements() {
     defineSdCircleProgress();
     defineSdLinearProgress();
     defineSdLoadingModal();
-    defineSdTable();
-    defineSdTbody();
-    defineSdTd();
-    defineSdThead();
-    defineSdTr();
     defineSdDivider();
     // 나머지 컴포넌트는 Stencil loader가 lazy 등록
     defineLazyCustomElements();

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 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 { sdLoading } from '@sellmate/design-system/utils';
 export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
-export type { ButtonName, ButtonProps, ButtonType, ButtonSize, GhostButtonIntent, GhostButtonSize, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, BadgeColor, FieldAddonAlign, FieldSize, Rule, FieldIdentifier, ValidatableField, InputSize, NumberInputSize, BarcodeInputSize, ChipInputSize, SdTooltipProps, TooltipType, CalloutType, CalendarEventGroup, CheckedType, RadioValue, RadioOption, SelectOption, SelectOptionSelectDetail, SelectType, SelectValue, ConfirmModalMainButton, ConfirmModalType, ConfirmModalOptions, TagName, SdModalCreateOptions, ModalDialogRefLike, SdLoadingShowArgs, LoadingModalState, LoadingModalOptions, Type as DateBoxType, DatePickerSize, DateRangeValue, SdKeyValueField, SdKeyValueChangeDetail, LinearProgressType, CircleProgressType, PopoverButton, PopoverLink, PopupType, GuideType, TextLinkSize, TabOption, TabSize, ToastType, ToastPosition, ToastEntry, ToastNotifyOptions, SdTableColumn, Row as SdTableRow, SdTablePagination, SdTableStickyColumn, SdTableConfig, } from '@sellmate/design-system';
+export type { ButtonName, ButtonProps, ButtonType, ButtonSize, GhostButtonIntent, GhostButtonSize, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, BadgeColor, FieldAddonAlign, FieldSize, Rule, FieldIdentifier, ValidatableField, InputSize, NumberInputSize, BarcodeInputSize, ChipInputSize, SdTooltipProps, TooltipType, CalloutType, CalendarEventGroup, CheckedType, RadioValue, RadioOption, SelectOption, SelectOptionSelectDetail, SelectType, SelectValue, ConfirmModalMainButton, ConfirmModalType, ConfirmModalOptions, TagName, SdModalCreateOptions, ModalDialogRefLike, SdLoadingShowArgs, LoadingModalState, LoadingModalOptions, Type as DateBoxType, DatePickerSize, DateRangeValue, SdKeyValueField, SdKeyValueChangeDetail, LinearProgressType, CircleProgressType, PopoverButton, PopoverLink, PopupType, GuideType, TextLinkSize, TabOption, TabSize, ToastType, ToastPosition, ToastEntry, ToastNotifyOptions, } from '@sellmate/design-system';

package/dist/index.js

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

package/lib/components.ts

@@ -199,7 +199,6 @@ export const SdConfirmModal: StencilVueComponent<JSX.SdConfirmModal> = /*@__PURE
   'tagPreset',
   'tagLabel',
   'slotLabel',
-  'tagContents',
   'sdClose',
   'sdCancel',
   'sdOk'
@@ -490,6 +489,7 @@ export const SdInput: StencilVueComponent<JSX.SdInput, JSX.SdInput["value"]> = /
 
 export const SdKeyValueTable: StencilVueComponent<JSX.SdKeyValueTable> = /*@__PURE__*/ defineContainer<JSX.SdKeyValueTable>('sd-key-value-table', undefined, [
   'fields',
+  'values',
   'search',
   'radius',
   'sdChange',
@@ -771,45 +771,6 @@ export const SdSwitch: StencilVueComponent<JSX.SdSwitch, JSX.SdSwitch["value"]>
 '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',
-  'radius',
-  'noDataLabel',
-  'isLoading',
-  'pagination',
-  'useInternalPagination',
-  'useRowsPerPageSelect',
-  'dense',
-  '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',
@@ -832,24 +793,6 @@ 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',
-  'rowspan',
-  'colspan',
-  'sdClass',
-  'dividerLeft',
-  'dividerRight',
-  'useFrame'
-]);
-
-
 export const SdTextLink: StencilVueComponent<JSX.SdTextLink> = /*@__PURE__*/ defineContainer<JSX.SdTextLink>('sd-text-link', undefined, [
   'label',
   'icon',
@@ -904,22 +847,6 @@ 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',
-  'sdColumnSort'
-], [
-  'sdColumnSort'
-]);
-
-
 export const SdToast: StencilVueComponent<JSX.SdToast> = /*@__PURE__*/ defineContainer<JSX.SdToast>('sd-toast', undefined, [
   'icon',
   'message',
@@ -980,13 +907,3 @@ export const SdTooltip: StencilVueComponent<JSX.SdTooltip> = /*@__PURE__*/ defin
   'triggerStyle'
 ]);
 
-
-export const SdTr: StencilVueComponent<JSX.SdTr> = /*@__PURE__*/ defineContainer<JSX.SdTr>('sd-tr', undefined, [
-  'columns',
-  'selectable',
-  'stickyColumn',
-  'rowKey',
-  'row',
-  'separator'
-]);
-

package/lib/define-custom-elements.ts

@@ -4,11 +4,6 @@ import { defineCustomElements as defineLazyCustomElements } from '@sellmate/desi
 import { defineCustomElement as defineSdCircleProgress } from '@sellmate/design-system/dist/components/sd-circle-progress.js';
 import { defineCustomElement as defineSdLinearProgress } from '@sellmate/design-system/dist/components/sd-linear-progress.js';
 import { defineCustomElement as defineSdLoadingModal } from '@sellmate/design-system/dist/components/sd-loading-modal.js';
-import { defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
-import { defineCustomElement as defineSdTbody } from '@sellmate/design-system/dist/components/sd-tbody.js';
-import { defineCustomElement as defineSdTd } from '@sellmate/design-system/dist/components/sd-td.js';
-import { defineCustomElement as defineSdThead } from '@sellmate/design-system/dist/components/sd-thead.js';
-import { defineCustomElement as defineSdTr } from '@sellmate/design-system/dist/components/sd-tr.js';
 import { defineCustomElement as defineSdDivider } from '@sellmate/design-system/dist/components/sd-divider.js';
 
 export function defineCustomElements(): void {
@@ -18,11 +13,6 @@ export function defineCustomElements(): void {
   defineSdCircleProgress();
   defineSdLinearProgress();
   defineSdLoadingModal();
-  defineSdTable();
-  defineSdTbody();
-  defineSdTd();
-  defineSdThead();
-  defineSdTr();
   defineSdDivider();
 
   // 나머지 컴포넌트는 Stencil loader가 lazy 등록

package/lib/index.ts

@@ -2,8 +2,6 @@ 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 { sdLoading } from '@sellmate/design-system/utils';
 export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
@@ -92,10 +90,4 @@ export type {
  ToastPosition,
  ToastEntry,
  ToastNotifyOptions,
- // Table types
- SdTableColumn,
- Row as SdTableRow,
- SdTablePagination,
- SdTableStickyColumn,
- SdTableConfig,
 } from '@sellmate/design-system';

package/package.json

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

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),
-  };
-}