@sellmate/design-system 1.28.0 → 1.31.0

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -1,381 +0,0 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { TABLE_ID_ATTR } from "../constants";
-export class SdTd {
-    el;
-    /** 데이터 필드명 (슬롯 이름 생성에 사용) */
-    field;
-    /** 행 식별 키 */
-    rowKey;
-    /** 셀 내용 정렬 */
-    align;
-    /** 행 병합 수 */
-    rowspan;
-    /** 열 병합 수 */
-    colspan;
-    // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
-    // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
-    // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
-    /** td에 병합할 사용자 클래스 */
-    sdClass;
-    /** 좌측 구분선 표시 여부 */
-    dividerLeft = false;
-    /** 우측 구분선 표시 여부 */
-    dividerRight = false;
-    // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
-    /** frame 레이아웃 사용 여부 */
-    useFrame = false;
-    handleFieldChange(_newField, oldField) {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration(oldField);
-        this.syncUseFrameRegistration(oldField);
-    }
-    handleRowKeyChange(_newKey, oldKey) {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration(undefined, oldKey);
-        this.syncUseFrameRegistration(undefined, oldKey);
-    }
-    handleSpanChange() {
-        this.syncSpanRegistration();
-    }
-    handleSdClassChange() {
-        this.syncCellClassRegistration();
-    }
-    handleDividerChange() {
-        this.syncCellClassRegistration();
-    }
-    handleUseFrameChange() {
-        this.syncUseFrameRegistration();
-        this.requestParentTrUpdate();
-    }
-    componentWillLoad() {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration();
-        this.syncUseFrameRegistration();
-        // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
-        const parentTr = this.el.parentElement;
-        if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
-            forceUpdate(parentTr);
-        }
-    }
-    componentDidLoad() {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration();
-        this.syncUseFrameRegistration();
-    }
-    // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
-    // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
-    // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
-    connectedCallback() {
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration();
-        this.syncUseFrameRegistration();
-    }
-    disconnectedCallback() {
-        const table = this.findTable();
-        if (table != null && this.field !== '' && this.rowKey != null) {
-            table.unregisterSpanSync?.(String(this.rowKey), this.field);
-            table.unregisterCellClassSync?.(String(this.rowKey), this.field);
-            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
-            this.requestParentTrUpdate();
-        }
-    }
-    findTable() {
-        return this.el.closest('sd-table');
-    }
-    requestParentTrUpdate() {
-        const parentTr = this.el.parentElement;
-        if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
-            return;
-        const trAny = parentTr;
-        if (typeof trAny.bumpSpansVersion === 'function') {
-            trAny.bumpSpansVersion();
-        }
-        else {
-            forceUpdate(parentTr);
-        }
-    }
-    syncSpanRegistration() {
-        const table = this.findTable();
-        if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
-            return;
-        const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
-        const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
-        table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
-        this.requestParentTrUpdate();
-    }
-    // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
-    syncCellClassRegistration(prevField, prevRowKey) {
-        const table = this.findTable();
-        if (!table)
-            return;
-        const oldField = prevField ?? this.field;
-        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField !== '' && oldRowKey != null) {
-            table.unregisterCellClassSync?.(oldRowKey, oldField);
-        }
-        if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
-            return;
-        const combinedClass = [
-            this.sdClass,
-            this.dividerLeft && 'td--divider-left',
-            this.dividerRight && 'td--divider-right',
-        ]
-            .filter(Boolean)
-            .join(' ') || undefined;
-        table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
-        this.requestParentTrUpdate();
-    }
-    syncUseFrameRegistration(prevField, prevRowKey) {
-        const table = this.findTable();
-        if (!table)
-            return;
-        const oldField = prevField ?? this.field;
-        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField !== '' && oldRowKey != null) {
-            table.unregisterUseFrameSync?.(oldRowKey, oldField);
-        }
-        if (this.field === '' || this.rowKey == null)
-            return;
-        if (this.useFrame) {
-            table.registerUseFrameSync?.(String(this.rowKey), this.field);
-        }
-        else {
-            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
-        }
-    }
-    syncSlotName() {
-        const table = this.el.closest('sd-table');
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
-            this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
-        }
-    }
-    render() {
-        return (h(Host, { key: 'b2037351ddf7c9a8998befd477ffb81b7f204c99', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f9d2bd1433c737fc6cb209f45e773c5317cf3cde' })));
-    }
-    static get is() { return "sd-td"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-td.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-td.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "field": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uB370\uC774\uD130 \uD544\uB4DC\uBA85 (\uC2AC\uB86F \uC774\uB984 \uC0DD\uC131\uC5D0 \uC0AC\uC6A9)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "field"
-            },
-            "rowKey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uC2DD\uBCC4 \uD0A4"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "row-key"
-            },
-            "align": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'left' | 'center' | 'right'",
-                    "resolved": "\"center\" | \"left\" | \"right\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC140 \uB0B4\uC6A9 \uC815\uB82C"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "align"
-            },
-            "rowspan": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uBCD1\uD569 \uC218"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "rowspan"
-            },
-            "colspan": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC5F4 \uBCD1\uD569 \uC218"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "colspan"
-            },
-            "sdClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "td\uC5D0 \uBCD1\uD569\uD560 \uC0AC\uC6A9\uC790 \uD074\uB798\uC2A4"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "sd-class"
-            },
-            "dividerLeft": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC88C\uCE21 \uAD6C\uBD84\uC120 \uD45C\uC2DC \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "divider-left",
-                "defaultValue": "false"
-            },
-            "dividerRight": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC6B0\uCE21 \uAD6C\uBD84\uC120 \uD45C\uC2DC \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "divider-right",
-                "defaultValue": "false"
-            },
-            "useFrame": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "frame \uB808\uC774\uC544\uC6C3 \uC0AC\uC6A9 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-frame",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "field",
-                "methodName": "handleFieldChange"
-            }, {
-                "propName": "rowKey",
-                "methodName": "handleRowKeyChange"
-            }, {
-                "propName": "rowspan",
-                "methodName": "handleSpanChange"
-            }, {
-                "propName": "colspan",
-                "methodName": "handleSpanChange"
-            }, {
-                "propName": "sdClass",
-                "methodName": "handleSdClassChange"
-            }, {
-                "propName": "dividerLeft",
-                "methodName": "handleDividerChange"
-            }, {
-                "propName": "dividerRight",
-                "methodName": "handleDividerChange"
-            }, {
-                "propName": "useFrame",
-                "methodName": "handleUseFrameChange"
-            }];
-    }
-}

package/dist/collection/components/sd-table/sd-thead/sd-thead.css

@@ -1,186 +0,0 @@
-sd-thead {
-  display: contents;
-}
-sd-thead * {
-  box-sizing: border-box;
-}
-
-.thead {
-  display: table-header-group;
-  height: var(--table-header-height, 36px);
-}
-.thead--sticky {
-  position: sticky;
-  top: 0;
-  z-index: 120;
-}
-
-.tr {
-  display: table-row;
-  width: 100%;
-}
-
-.th {
-  display: table-cell;
-  background: var(--table-header-bg, #F5FAFF);
-  height: var(--table-header-height, 36px);
-  padding: 0 var(--table-header-padding-x, 16px);
-  font-family: var(--table-header-font-family, inherit);
-  font-weight: var(--table-header-font-weight, 500);
-  font-size: var(--table-header-font-size, 12px);
-  line-height: var(--table-header-line-height, 20px);
-  text-decoration: var(--table-header-text-decoration, none);
-  vertical-align: middle;
-  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
-  -webkit-user-select: none;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
-.th--selected {
-  position: relative;
-  width: var(--table-selectable-width, 48px) !important;
-  max-width: var(--table-selectable-width, 48px) !important;
-  min-width: var(--table-selectable-width, 48px) !important;
-  text-align: center;
-}
-.th--selected sd-checkbox label {
-  position: relative;
-}
-.th--selected sd-checkbox label:before {
-  content: "";
-  position: absolute;
-  inset: -6px;
-}
-.th.sticky-left {
-  position: sticky;
-  background-color: var(--table-header-bg, #F5FAFF);
-  z-index: 110 !important;
-  left: var(--sticky-left-offset, 0);
-}
-.th.sticky-right {
-  position: sticky;
-  background-color: var(--table-header-bg, #F5FAFF);
-  z-index: 110 !important;
-  right: var(--sticky-right-offset, 0);
-}
-.th.sticky-left-edge:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 100%;
-  right: -20px;
-  width: 20px;
-  height: 100%;
-  z-index: 101 !important;
-  box-shadow: inset 12px 0 20px -25px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s;
-}
-.th.sticky-right-edge:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -20px;
-  width: 20px;
-  height: 100%;
-  z-index: 101 !important;
-  box-shadow: inset -12px 0 20px -25px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s;
-}
-
-.th.sticky-left-edge.is-scrolled-left {
-  overflow: visible;
-}
-
-.th.sticky-left-edge.is-scrolled-left:after {
-  opacity: 1;
-}
-
-.th.sticky-right-edge.is-scrolled-right {
-  overflow: visible;
-}
-
-.th.sticky-right-edge.is-scrolled-right:after {
-  opacity: 1;
-}
-
-.th__content {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: var(--table-header-gap, 4px);
-}
-.th__content--left {
-  justify-content: flex-start;
-}
-.th__content--center {
-  justify-content: center;
-}
-.th__content--right {
-  justify-content: flex-end;
-}
-.th__content--label {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
-
-.th__bar {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: var(--table-border-width, 1px);
-  height: var(--table-header-resizer-height, 16px);
-  z-index: 3;
-  background-color: var(--table-header-resizer-color, #CCCCCC);
-}
-
-.th--has-dropdown {
-  cursor: pointer;
-}
-
-.th__dropdown-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: inherit;
-  border-radius: 2px;
-}
-.th__dropdown-trigger sd-icon {
-  transition: transform 0.15s ease;
-}
-.th__dropdown-trigger--open sd-icon {
-  transform: rotate(180deg);
-}
-
-.th__resizer {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: 4px;
-  height: var(--table-header-resizer-height, 16px);
-  cursor: col-resize;
-  z-index: 3;
-  border-left: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
-  border-right: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
-}
-.th__resizer--left {
-  right: auto;
-  left: 0;
-}