@sellmate/design-system 1.0.78 → 1.2.0

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ConfirmModalType, type ConfirmModalMainButton, type TagName } from './sd-confirm-modal.config';
+import { type ConfirmModalMainButton, type ConfirmModalType, type TagName } from './sd-confirm-modal.config';
 export declare class SdConfirmModal {
     el: HTMLElement;
     private hasSlottedContent;
@@ -24,6 +24,7 @@ export declare class SdConfirmModal {
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
+    private get resolvedType();
     private get resolvedMainButton();
     private get hasTagContent();
     private get showContentBox();

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonV2Name, type ButtonV2Preset } from '../sd-button-v2/sd-button-v2.config';
+import { type ButtonName, type ButtonPreset } from '../sd-button/sd-button.config';
 export interface DropdownButtonItem {
     value: string | number;
     label: string;
@@ -8,13 +8,14 @@ export interface DropdownButtonItem {
 export type DropdownButtonValue = DropdownButtonItem['value'];
 export type DropdownButtonSize = 'xs' | 'sm' | 'md';
 type UnsupportedDropdownButtonName = `${string}_lg`;
-export type DropdownButtonName = Exclude<ButtonV2Name, UnsupportedDropdownButtonName>;
-export type DropdownButtonPreset = ButtonV2Preset;
-export declare const DROPDOWN_BUTTON_CONFIG: Record<DropdownButtonName, {
-    variant: "primary" | "outline";
+export type DropdownButtonName = Exclude<ButtonName, UnsupportedDropdownButtonName>;
+export type DropdownButtonPreset = ButtonPreset;
+type DropdownButtonConfigMap = Record<DropdownButtonName, {
+    variant: 'primary' | 'outline';
     size: DropdownButtonSize;
     color: string;
 }>;
+export declare const DROPDOWN_BUTTON_CONFIG: DropdownButtonConfigMap;
 export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly primary: string;
     readonly secondary: string;

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts

@@ -26,6 +26,7 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     closeDropdown: () => void;
     protected handleDocumentClick(event: Event): void;
     protected handleDocumentKeydown(event: KeyboardEvent): void;
+    private get resolvedName();
     private get resolvedConfig();
     private getNextEnabledIndex;
     private toggleDropdown;

package/dist/types/components/sd-field/sd-field.d.ts

@@ -8,6 +8,7 @@ export declare class SdField implements ValidatableField {
     rules?: Rule[];
     error?: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     hovered?: boolean;
     focused?: boolean;
     status?: 'default' | 'pass' | 'error';

package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts

@@ -0,0 +1,105 @@
+import type { Components } from '../../components';
+export declare const KEY_VALUE_TABLE_LAYOUT: {
+    rowHeight: number;
+    thWidth: number;
+    borderRadius: number;
+    paddingX: number;
+    paddingY: number;
+    helpIconSize: number;
+    requiredIconSize: number;
+    gap: number;
+    labelGap: number;
+    borderWidth: number;
+    searchPaddingX: number;
+};
+export declare const KEY_VALUE_TABLE_COLORS: {
+    border: string;
+    thBg: string;
+    thLabel: string;
+    required: string;
+    helpIcon: string;
+    tdBg: string;
+    tdText: string;
+    searchBg: string;
+};
+export declare const KEY_VALUE_TABLE_TYPOGRAPHY: {
+    labelFontFamily: string;
+    labelFontSize: number;
+    labelFontWeight: number;
+    labelLineHeight: number;
+    tdFontFamily: string;
+    tdFontSize: number;
+    tdFontWeight: number;
+    tdLineHeight: number;
+};
+export type SdKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'date-picker' | 'date-range-picker' | 'file-picker';
+export interface SdKeyValueTextOptions {
+    value?: string | number | null;
+}
+export type SdKeyValueInputOptions = Partial<Components.SdInput>;
+export type SdKeyValueSelectOptions = Partial<Components.SdSelect>;
+export type SdKeyValueRadioOptions = Partial<Components.SdRadioGroup>;
+export type SdKeyValueCheckboxOptions = Partial<Components.SdCheckbox>;
+export type SdKeyValueDatePickerOptions = Partial<Components.SdDatePicker>;
+export type SdKeyValueDateRangePickerOptions = Partial<Components.SdDateRangePicker>;
+export type SdKeyValueTextareaOptions = Partial<Components.SdTextarea>;
+export type SdKeyValueNumberInputOptions = Partial<Components.SdNumberInput>;
+export type SdKeyValueFilePickerOptions = Partial<Components.SdFilePicker>;
+interface FieldBase {
+    name: string;
+    label?: string;
+    required?: boolean;
+    helpText?: string;
+    /** th 셀 자체를 렌더링하지 않음. 위 row의 thRowSpan으로 가려진 위치를 명시할 때 사용 */
+    hideTh?: boolean;
+    /** th 셀이 아래 row까지 확장 (HTML rowspan). 같은 컬럼 인덱스의 다음 (N-1)개 row는 th 자동 생략 */
+    thRowSpan?: number;
+    /** th 셀이 옆 컬럼까지 확장 (HTML colspan) */
+    thColSpan?: number;
+    /** td 셀이 아래 row까지 확장 (HTML rowspan) */
+    tdRowSpan?: number;
+    /** td 셀이 옆 컬럼까지 확장 (HTML colspan) */
+    tdColSpan?: number;
+    /** th 셀에 추가할 클래스 (string 또는 클래스명 배열) */
+    thClass?: string | string[];
+    /** th 셀에 적용할 인라인 스타일 */
+    thStyle?: {
+        [key: string]: string;
+    };
+}
+export type SdKeyValueField = (FieldBase & {
+    type?: 'text';
+    options?: SdKeyValueTextOptions;
+}) | (FieldBase & {
+    type: 'input';
+    options?: SdKeyValueInputOptions;
+}) | (FieldBase & {
+    type: 'textarea';
+    options?: SdKeyValueTextareaOptions;
+}) | (FieldBase & {
+    type: 'number-input';
+    options?: SdKeyValueNumberInputOptions;
+}) | (FieldBase & {
+    type: 'select';
+    options?: SdKeyValueSelectOptions;
+}) | (FieldBase & {
+    type: 'radio';
+    options?: SdKeyValueRadioOptions;
+}) | (FieldBase & {
+    type: 'checkbox';
+    options?: SdKeyValueCheckboxOptions;
+}) | (FieldBase & {
+    type: 'date-picker';
+    options?: SdKeyValueDatePickerOptions;
+}) | (FieldBase & {
+    type: 'date-range-picker';
+    options?: SdKeyValueDateRangePickerOptions;
+}) | (FieldBase & {
+    type: 'file-picker';
+    options?: SdKeyValueFilePickerOptions;
+});
+export interface SdKeyValueChangeDetail {
+    name: string;
+    value: unknown;
+}
+export {};

package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SdKeyValueField, SdKeyValueChangeDetail } from './sd-key-value-table.config';
+export declare class SdKeyValueTable {
+    /**
+     * 2차원 배열. 외부 배열 = row, 내부 배열 = 한 row에 들어가는 [th|td] field들.
+     * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
+     */
+    fields: SdKeyValueField[][];
+    /**
+     * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
+     */
+    search: boolean;
+    /**
+     * true이면 테이블 상단 border-radius를 0으로 처리.
+     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     */
+    useTop: boolean;
+    change: EventEmitter<SdKeyValueChangeDetail>;
+    searchEvent: EventEmitter<void>;
+    private emit;
+    private handleSearchClick;
+    private renderField;
+    private renderHelpIcon;
+    /**
+     * 같은 컬럼 인덱스의 thRowSpan에 의해 가려지는 위치를 자동 계산.
+     * `skip[r][c] === true` 이면 row r의 c번째 field는 th 셀을 렌더하지 않음.
+     */
+    private computeAutoSkipTh;
+    /**
+     * 모든 row를 훑어 전체 컬럼 수를 계산.
+     * th/td 자체와 thColSpan/tdColSpan, hideTh, thRowSpan(autoSkip)을 모두 반영.
+     */
+    private computeMaxCols;
+    private renderTh;
+    private renderTd;
+    private warnDuplicateNames;
+    render(): any;
+}

package/dist/types/components/sd-loading-modal/sd-loading-modal.config.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+import type { ButtonName } from '../sd-button/sd-button.config';
 export type LoadingModalState = 'loading' | 'error';
 export declare const LOADING_MODAL_LAYOUT: {
     minWidth: number;
@@ -22,4 +22,4 @@ export declare const LOADING_MODAL_TYPOGRAPHY: {
 };
 export declare const LOADING_MODAL_DEFAULT_MESSAGE: Record<LoadingModalState, string>;
 export declare const LOADING_MODAL_DEFAULT_BUTTON_LABEL: Record<LoadingModalState, string>;
-export declare const LOADING_MODAL_BUTTON_PRESET: ButtonV2Name;
+export declare const LOADING_MODAL_BUTTON_PRESET: ButtonName;

package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts

@@ -8,6 +8,7 @@ export declare class SdLoadingModal {
     width?: string | number;
     height?: string | number;
     click: EventEmitter<void>;
+    private get resolvedState();
     private get resolvedMessage();
     private get resolvedButtonLabel();
     private handleClick;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmModalType, ConfirmModalMainButton } from '../sd-confirm-modal/sd-confirm-modal.config';
+import type { ConfirmModalMainButton, ConfirmModalType } from '../sd-confirm-modal/sd-confirm-modal.config';
 import type { LoadingModalState } from '../sd-loading-modal/sd-loading-modal.config';
 import type { TagName } from '../sd-tag/sd-tag.config';
 export interface ConfirmModalOptions {

package/dist/types/components/sd-popover/sd-popover.d.ts

@@ -1,13 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
-export interface PopoverButton {
+import { type ButtonName, type ButtonType } from '../sd-button/sd-button.config';
+import type { SdButton } from '../sd-button/sd-button';
+import type { SdTextLink } from '../sd-text-link/sd-text-link';
+export type PopoverButton = Partial<Pick<SdButton, 'name' | 'icon' | 'rightIcon' | 'ariaLabel' | 'disabled' | 'type'>> & {
     label: string;
-    variant?: ButtonVariant;
-    color?: string;
-    size?: ButtonSize;
-    icon?: IconName;
     onClick?: (e: Event) => void;
-}
+};
+export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'useArrow' | 'underline' | 'disabled'>> & {
+    label: string;
+    onClick?: (e: Event) => void;
+};
 export declare class SdPopover {
     el: HTMLElement;
     show: boolean;
@@ -16,11 +18,15 @@ export declare class SdPopover {
     icon: IconName;
     iconSize: number;
     label: string;
-    buttonSize: ButtonSize;
-    buttonVariant: ButtonVariant;
+    name: ButtonName;
+    rightIcon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonType;
     menuTitle?: string;
     messages: string[];
-    buttons: PopoverButton[];
+    leftLink?: PopoverLink;
+    button?: PopoverButton;
     menuClass: string;
     useClose: boolean;
     showChange: EventEmitter<boolean>;

package/dist/types/components/sd-popup/sd-popup.config.d.ts

@@ -0,0 +1,30 @@
+export type PopupType = 'default' | 'light';
+export declare const POPUP_LAYOUT: {
+    bodyBg: string;
+};
+export declare const POPUP_HEADER: {
+    bg: {
+        default: string;
+        light: string;
+    };
+    titleColor: {
+        default: string;
+        light: string;
+    };
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: number;
+    lineHeight: number;
+    height: number;
+    paddingX: number;
+    paddingY: number;
+};
+export declare const POPUP_FOOTER: {
+    bg: string;
+    paddingX: number;
+    paddingY: number;
+    gap: number;
+    height: number;
+    slotHeight: number;
+    shadow: string;
+};

package/dist/types/components/sd-popup/sd-popup.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ButtonProps } from '../sd-button/sd-button.config';
+import { type PopupType } from './sd-popup.config';
+export declare class SdPopup {
+    popupTitle: string;
+    type: PopupType;
+    useFooter: boolean;
+    submitButtonProps?: ButtonProps;
+    submit: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/sd-table/constants.d.ts

@@ -6,6 +6,7 @@ export interface SdTableColumn {
     field: string | ((row: any) => any);
     align?: 'left' | 'center' | 'right';
     width?: string;
+    autoWidth?: boolean;
     format?: (value: any, row: any) => string;
     visible?: boolean;
     icon?: IconName;
@@ -44,4 +45,5 @@ export interface SdTableConfig {
     scrolledLeft: boolean;
     scrolledRight: boolean;
     columnWidths: number[];
+    dense: boolean;
 }

package/dist/types/components/sd-table/sd-table.config.d.ts

@@ -41,6 +41,10 @@ export declare const TABLE_BORDER: {
     color: string;
     width: string;
 };
+export declare const TABLE_SEPARATOR: {
+    color: string;
+    width: string;
+};
 export declare const TABLE_RADIUS: string;
 export declare const TABLE_CONTENT: {
     gap: string;

package/dist/types/components/sd-table/sd-table.d.ts

@@ -15,14 +15,17 @@ export declare class SdTable {
     height?: string;
     stickyHeader: boolean;
     stickyColumn: SdTableStickyColumn;
+    radius: 'default' | 'useTop';
     noDataLabel: string;
     resolvedNoDataLabel: string;
     isLoading: boolean;
     pagination?: SdTablePagination;
     useInternalPagination: boolean;
     useRowsPerPageSelect: boolean;
+    dense: boolean;
     useVirtualScroll: boolean;
-    rowHeight: number;
+    rowHeight?: number;
+    private get effectiveRowHeight();
     virtualBuffer: number;
     virtualEndThreshold: number;
     rowsPerPageOption: SelectOption[];
@@ -47,15 +50,20 @@ export declare class SdTable {
     scrolledRight: boolean;
     rowCount: number;
     loadingScrollTop: number;
+    noDataBodyHeight: number;
     autoThead: boolean;
     autoTbody: boolean;
     private vsStart;
     private vsEnd;
     private lastReachEndNotifiedRowCount;
     private scrollContainer;
+    private noDataContentEl;
+    private noDataContentResizeObserver?;
     private onScroll?;
     private spanRegistry;
+    private useFrameRegistry;
     private cellClassRegistry;
+    private separatorPrevIndices;
     private rowIndexMap;
     private rebuildRowIndexMap;
     private resolveRowIndex;
@@ -78,6 +86,8 @@ export declare class SdTable {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private syncNoDataContentObserver;
+    private observeNoDataContentHeight;
     private queryChildEl;
     private queryAllTr;
     private pushRowsToChildren;
@@ -95,6 +105,9 @@ export declare class SdTable {
         rowCount: number;
     };
     getConfigSync(): SdTableConfig;
+    registerUseFrameSync(rowKey: string, field: string): void;
+    unregisterUseFrameSync(rowKey: string, field: string): void;
+    hasUseFrameInRowSync(rowKey: string): boolean;
     isRowSelectedSync(row: Row): boolean;
     isRowSelected(row: Row): Promise<boolean>;
     updateRowSelectSync(row: Row): void;
@@ -108,20 +121,8 @@ export declare class SdTable {
     private changeRowsPerPage;
     private get lastPageNumber();
     handleResize(index: number, event: MouseEvent, reversed?: boolean): void;
-    getStickyStyleSync(colIdx: number): {
-        '--sticky-left-offset': string;
-        '--sticky-right-offset': string;
-        width: string;
-        minWidth: string;
-        maxWidth: string;
-    };
-    getStickyStyle(colIdx: number): Promise<{
-        '--sticky-left-offset': string;
-        '--sticky-right-offset': string;
-        width: string;
-        minWidth: string;
-        maxWidth: string;
-    }>;
+    getStickyStyleSync(colIdx: number): Record<string, string>;
+    getStickyStyle(colIdx: number): Promise<Record<string, string>>;
     private spanKey;
     private requestAllTrUpdate;
     registerSpanSync(rowKey: string, field: string, rowspan: number, colspan: number): void;
@@ -135,6 +136,11 @@ export declare class SdTable {
     getCellClassSync(rowKey: string, field: string): string | undefined;
     hasRowspanSync(): boolean;
     isCoveredSync(rowKey: string, colIdx: number, columns: SdTableColumn[]): boolean;
+    private resolveVisualBottom;
+    isVisualLastRowSync(rowKey: string, field: string): boolean;
+    registerSeparatorSync(prevRowKey: string): void;
+    unregisterSeparatorSync(prevRowKey: string): void;
+    isVisualLastRowBeforeSeparatorSync(rowKey: string, field: string): boolean;
     setRowCountSync(count: number): void;
     setRowCount(count: number): Promise<void>;
     calculateVisibleRange(scrollTop: number, containerHeight: number): {

package/dist/types/components/sd-table/sd-td/sd-td.d.ts

@@ -6,10 +6,15 @@ export declare class SdTd {
     rowspan?: number;
     colspan?: number;
     sdClass?: string;
+    dividerLeft: boolean;
+    dividerRight: boolean;
+    useFrame: boolean;
     handleFieldChange(_newField: string, oldField: string): void;
     handleRowKeyChange(_newKey: string, oldKey: string): void;
     handleSpanChange(): void;
     handleSdClassChange(): void;
+    handleDividerChange(): void;
+    handleUseFieldChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
@@ -18,6 +23,7 @@ export declare class SdTd {
     private requestParentTrUpdate;
     private syncSpanRegistration;
     private syncCellClassRegistration;
+    private syncUseFieldRegistration;
     private syncSlotName;
     render(): any;
 }

package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts

@@ -6,6 +6,7 @@ export declare class SdTr {
     stickyColumn?: SdTableStickyColumn;
     rowKey: string;
     row: Row;
+    separator?: boolean;
     tableId: string;
     columnWidths: number[];
     isVisible: boolean;
@@ -15,9 +16,12 @@ export declare class SdTr {
     private _stickyColumn;
     private _scrolledLeft;
     private _scrolledRight;
+    private _dense;
     private tableEl;
+    private _prevRowKey;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     private syncTableContext;
     private resolveConfig;
     refreshConfig(): Promise<void>;
@@ -35,5 +39,10 @@ export declare class SdTr {
     private getSpanFor;
     private isCovered;
     private getCellClassFor;
+    private expandCellClass;
+    private isVisualLastRow;
+    private isVisualLastRowForSelfRow;
+    private isVisualLastRowBeforeSeparator;
+    private isVisualLastRowBeforeSeparatorForSelfRow;
     render(): any;
 }

package/dist/types/components/sd-tag/sd-tag.d.ts

@@ -4,6 +4,8 @@ export declare class SdTag {
     label: string;
     icon?: IconName;
     isLeft: boolean;
+    componentWillLoad(): void;
+    private get resolvedName();
     private get resolvedConfig();
     private renderIcon;
     render(): any;

package/dist/types/components/sd-toast/sd-toast.config.d.ts

@@ -1,7 +1,11 @@
-export type ToastType = 'default' | 'danger' | 'caution' | 'complete' | 'accent';
+import type { ButtonName } from '../sd-button/sd-button.config';
+export type ToastType = 'default' | 'danger' | 'caution' | 'complete' | 'accent' | 'info';
+export declare const TOAST_BUTTON_NAME_BY_TYPE: Record<ToastType, ButtonName>;
 export declare const TOAST_TYPE_CONFIG: Record<ToastType, {
     bg: string;
     content: string;
+    icon?: string;
+    linkColor?: string;
 }>;
 export declare const TOAST_LAYOUT: {
     radius: string;

package/dist/types/components/sd-toast/sd-toast.d.ts

@@ -5,8 +5,10 @@ export declare class SdToast {
     message: string;
     link?: string;
     linkLabel?: string;
+    buttonLabel?: string;
     useClose: boolean;
     type: ToastType;
     close: EventEmitter<void>;
+    buttonClick: EventEmitter<MouseEvent>;
     render(): any;
 }

package/dist/types/components/sd-toast-container/sd-toast-container.config.d.ts

@@ -6,8 +6,10 @@ export interface ToastNotifyOptions {
     icon?: IconName;
     link?: string;
     linkLabel?: string;
+    buttonLabel?: string;
     useClose?: boolean;
     duration?: number;
+    onButtonClick?: (event: MouseEvent) => void;
 }
 export interface ToastEntry {
     id: string;

package/dist/types/components/sd-tooltip/sd-tooltip.config.d.ts

@@ -1,18 +1,7 @@
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
+import type { Components } from '../../components';
 export type TooltipType = 'default' | 'danger' | 'warning' | 'accent';
 export declare const TOOLTIP_TYPE_CONFIG: Record<TooltipType, {
     bg: string;
     content: string;
 }>;
-export interface SdTooltipProps {
-    trigger?: 'hover' | 'click';
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    color?: string;
-    tooltipType?: TooltipType;
-    icon?: IconName;
-    iconSize?: number;
-    label?: string;
-    buttonSize?: ButtonSize;
-    buttonVariant?: ButtonVariant;
-    noHover?: boolean;
-}
+export type SdTooltipProps = Partial<Components.SdTooltip>;

package/dist/types/components/sd-tooltip/sd-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
+import { type ButtonName, type ButtonType } from '../sd-button/sd-button.config';
 import { type TooltipType } from './sd-tooltip.config';
 export declare class SdTooltip {
     el: HTMLElement;
@@ -9,9 +9,11 @@ export declare class SdTooltip {
     icon: IconName;
     iconSize: number;
     label: string;
-    buttonSize: ButtonSize;
-    buttonVariant: ButtonVariant;
-    noHover: boolean;
+    name: ButtonName;
+    rightIcon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonType;
     sdClass?: string;
     showTooltip: boolean;
     slotContentHTML: string;