@sellmate/design-system-vue 1.0.17 → 1.0.19

package/dist/SdTable.d.ts

@@ -0,0 +1,241 @@
+import { 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;
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<SdTableColumn[]>;
+        required: true;
+    };
+    rows: {
+        type: PropType<SdTableRow[]>;
+        required: true;
+    };
+    modelValue: {
+        type: PropType<SdTableRow[]>;
+        default: any;
+    };
+    selected: {
+        type: PropType<SdTableRow[]>;
+        default: any;
+    };
+    rowKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: StringConstructor;
+        default: any;
+    };
+    height: {
+        type: StringConstructor;
+        default: any;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyColumn: {
+        type: PropType<{
+            left?: number;
+            right?: number;
+        }>;
+        default: () => {
+            left: number;
+            right: number;
+        };
+    };
+    noDataLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pagination: {
+        type: PropType<TablePagination | undefined>;
+        default: any;
+    };
+    useInternalPagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    useRowsPerPageSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowsPerPageOption: {
+        type: PropType<SelectOption[]>;
+        default: () => {
+            label: string;
+            value: number;
+        }[];
+    };
+    useVirtualScroll: {
+        type: PropType<TableVirtualScroll>;
+        default: () => {};
+    };
+    virtualRowHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualColumnWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualBufferSize: {
+        type: PropType<TableVirtualBufferSize>;
+        default: () => {
+            vertical: number;
+            horizontal: number;
+        };
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "sdSelectChange" | "sdPageChange" | "sdRowsPerPageChange")[], "update:modelValue" | "sdSelectChange" | "sdPageChange" | "sdRowsPerPageChange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<SdTableColumn[]>;
+        required: true;
+    };
+    rows: {
+        type: PropType<SdTableRow[]>;
+        required: true;
+    };
+    modelValue: {
+        type: PropType<SdTableRow[]>;
+        default: any;
+    };
+    selected: {
+        type: PropType<SdTableRow[]>;
+        default: any;
+    };
+    rowKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: StringConstructor;
+        default: any;
+    };
+    height: {
+        type: StringConstructor;
+        default: any;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyColumn: {
+        type: PropType<{
+            left?: number;
+            right?: number;
+        }>;
+        default: () => {
+            left: number;
+            right: number;
+        };
+    };
+    noDataLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pagination: {
+        type: PropType<TablePagination | undefined>;
+        default: any;
+    };
+    useInternalPagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    useRowsPerPageSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowsPerPageOption: {
+        type: PropType<SelectOption[]>;
+        default: () => {
+            label: string;
+            value: number;
+        }[];
+    };
+    useVirtualScroll: {
+        type: PropType<TableVirtualScroll>;
+        default: () => {};
+    };
+    virtualRowHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualColumnWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualBufferSize: {
+        type: PropType<TableVirtualBufferSize>;
+        default: () => {
+            vertical: number;
+            horizontal: number;
+        };
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onSdSelectChange?: (...args: any[]) => any;
+    onSdPageChange?: (...args: any[]) => any;
+    onSdRowsPerPageChange?: (...args: any[]) => any;
+}>, {
+    modelValue: SdTableRow[];
+    selected: SdTableRow[];
+    rowKey: string;
+    selectable: boolean;
+    resizable: boolean;
+    width: string;
+    height: string;
+    stickyHeader: boolean;
+    stickyColumn: {
+        left?: number;
+        right?: number;
+    };
+    noDataLabel: string;
+    isLoading: boolean;
+    pagination: TablePagination;
+    useInternalPagination: boolean;
+    useRowsPerPageSelect: boolean;
+    rowsPerPageOption: SelectOption[];
+    useVirtualScroll: TableVirtualScroll;
+    virtualRowHeight: number;
+    virtualColumnWidth: number;
+    virtualBufferSize: TableVirtualBufferSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/SdTable.js

@@ -0,0 +1,191 @@
+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/components.d.ts

@@ -31,7 +31,6 @@ export declare const SdSelectMultipleGroup: StencilVueComponent<JSX.SdSelectMult
 export declare const SdSelectOption: StencilVueComponent<JSX.SdSelectOption>;
 export declare const SdSelectOptionGroup: StencilVueComponent<JSX.SdSelectOptionGroup>;
 export declare const SdSelectSearchInput: StencilVueComponent<JSX.SdSelectSearchInput>;
-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 SdTextarea: StencilVueComponent<JSX.SdTextarea, JSX.SdTextarea["value"]>;

package/dist/components.js

@@ -19,11 +19,14 @@ export const SdButton = /*@__PURE__*/ defineContainer('sd-button', undefined, [
     'iconSize',
     'iconRight',
     'noHover',
-    'class'
+    'sdClass',
+    'sdClick'
+], [
+    'sdClick'
 ]);
 export const SdCard = /*@__PURE__*/ defineContainer('sd-card', undefined, [
     'bordered',
-    'cardClassName'
+    'sdClass'
 ]);
 export const SdCheckbox = /*@__PURE__*/ defineContainer('sd-checkbox', undefined, [
     'value',
@@ -171,7 +174,7 @@ export const SdModalCard = /*@__PURE__*/ defineContainer('sd-modal-card', undefi
     'buttonFlexDirection',
     'buttonProps',
     'message',
-    'modalClass',
+    'sdClass',
     'sdClose',
     'sdConfirm'
 ], [
@@ -338,7 +341,6 @@ export const SdSelectMultiple = /*@__PURE__*/ defineContainer('sd-select-multipl
     'useLabelRequired',
     'labelTooltip',
     'labelTooltipProps',
-    'name',
     'rules',
     'error',
     'optionRenderer',
@@ -366,7 +368,6 @@ export const SdSelectMultipleGroup = /*@__PURE__*/ defineContainer('sd-select-mu
     'useLabelRequired',
     'labelTooltip',
     'labelTooltipProps',
-    'name',
     'rules',
     'error',
     'containerStyle',
@@ -416,37 +417,6 @@ export const SdSelectSearchInput = /*@__PURE__*/ defineContainer('sd-select-sear
     'sdSearchInput',
     'sdSearchFocus'
 ]);
-export const SdTable = /*@__PURE__*/ defineContainer('sd-table', undefined, [
-    'columns',
-    'rows',
-    'selected',
-    'rowKey',
-    'selectable',
-    'resizable',
-    'width',
-    'height',
-    'stickyHeader',
-    'stickyColumn',
-    'noDataLabel',
-    'isLoading',
-    'pagination',
-    'headerCellRenderer',
-    'bodyCellRenderer',
-    'useInternalPagination',
-    'useRowsPerPageSelect',
-    'rowsPerPageOption',
-    'useVirtualScroll',
-    'virtualRowHeight',
-    'virtualColumnWidth',
-    'virtualBufferSize',
-    'sdSelectChange',
-    'sdPageChange',
-    'sdRowsPerPageChange'
-], [
-    'sdSelectChange',
-    'sdPageChange',
-    'sdRowsPerPageChange'
-], 'selected', 'sdSelectChange', undefined);
 export const SdTabs = /*@__PURE__*/ defineContainer('sd-tabs', undefined, [
     'value',
     'tabs',

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './plugin';
+export { default as SdTable } from './SdTable';
 export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagColor, TagSize, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './plugin';
+export { default as SdTable } from './SdTable';

package/lib/SdTable.ts

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

package/lib/components.ts

@@ -27,13 +27,16 @@ export const SdButton: StencilVueComponent<JSX.SdButton> = /*@__PURE__*/ defineC
   'iconSize',
   'iconRight',
   'noHover',
-  'class'
+  'sdClass',
+  'sdClick'
+], [
+  'sdClick'
 ]);
 
 
 export const SdCard: StencilVueComponent<JSX.SdCard> = /*@__PURE__*/ defineContainer<JSX.SdCard>('sd-card', undefined, [
   'bordered',
-  'cardClassName'
+  'sdClass'
 ]);
 
 
@@ -212,7 +215,7 @@ export const SdModalCard: StencilVueComponent<JSX.SdModalCard> = /*@__PURE__*/ d
   'buttonFlexDirection',
   'buttonProps',
   'message',
-  'modalClass',
+  'sdClass',
   'sdClose',
   'sdConfirm'
 ], [
@@ -407,7 +410,6 @@ export const SdSelectMultiple: StencilVueComponent<JSX.SdSelectMultiple, JSX.SdS
   'useLabelRequired',
   'labelTooltip',
   'labelTooltipProps',
-  'name',
   'rules',
   'error',
   'optionRenderer',
@@ -438,7 +440,6 @@ export const SdSelectMultipleGroup: StencilVueComponent<JSX.SdSelectMultipleGrou
   'useLabelRequired',
   'labelTooltip',
   'labelTooltipProps',
-  'name',
   'rules',
   'error',
   'containerStyle',
@@ -497,40 +498,6 @@ export const SdSelectSearchInput: StencilVueComponent<JSX.SdSelectSearchInput> =
 ]);
 
 
-export const SdTable: StencilVueComponent<JSX.SdTable, JSX.SdTable["selected"]> = /*@__PURE__*/ defineContainer<JSX.SdTable, JSX.SdTable["selected"]>('sd-table', undefined, [
-  'columns',
-  'rows',
-  'selected',
-  'rowKey',
-  'selectable',
-  'resizable',
-  'width',
-  'height',
-  'stickyHeader',
-  'stickyColumn',
-  'noDataLabel',
-  'isLoading',
-  'pagination',
-  'headerCellRenderer',
-  'bodyCellRenderer',
-  'useInternalPagination',
-  'useRowsPerPageSelect',
-  'rowsPerPageOption',
-  'useVirtualScroll',
-  'virtualRowHeight',
-  'virtualColumnWidth',
-  'virtualBufferSize',
-  'sdSelectChange',
-  'sdPageChange',
-  'sdRowsPerPageChange'
-], [
-  'sdSelectChange',
-  'sdPageChange',
-  'sdRowsPerPageChange'
-],
-'selected', 'sdSelectChange', undefined);
-
-
 export const SdTabs: StencilVueComponent<JSX.SdTabs, JSX.SdTabs["value"]> = /*@__PURE__*/ defineContainer<JSX.SdTabs, JSX.SdTabs["value"]>('sd-tabs', undefined, [
   'value',
   'tabs',
@@ -573,7 +540,7 @@ export const SdTextarea: StencilVueComponent<JSX.SdTextarea, JSX.SdTextarea["val
 'value', 'sdUpdate', undefined);
 
 
-export const SdToastMessage: StencilVueComponent<JSX.SdToastMessage> = /*@__PURE__*/ defineContainer<JSX.SdToastMessage>('sd-toast-message', undefined, [
+export const SdToast: StencilVueComponent<JSX.SdToast> = /*@__PURE__*/ defineContainer<JSX.SdToast>('sd-toast', undefined, [
   'icon',
   'message',
   'link',

package/lib/index.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './plugin';
+export { default as SdTable } from './SdTable';
 
 // Export commonly used types for Vue usage
 export type {

package/package.json

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