@sellmate/design-system 1.0.61 → 1.0.63

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

@@ -0,0 +1,18 @@
+:host {
+  display: contents;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+.tbody {
+  display: table-row-group;
+}
+.tbody--empty .tbody__no-data-row {
+  display: table-row;
+}
+.tbody--empty .tbody__no-data-cell {
+  display: table-cell;
+  padding: 0;
+  border-bottom: none;
+}

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

@@ -0,0 +1,105 @@
+import { h, Host } from "@stencil/core";
+import { TABLE_ID_ATTR } from "../constants";
+export class SdTbody {
+    el;
+    rows = [];
+    tableId = '';
+    topSpacerHeight = 0;
+    bottomSpacerHeight = 0;
+    tableEl = null;
+    handleRowsChange(newRows) {
+        const safeRows = newRows ?? [];
+        if (this.tableEl?.setRowCountSync) {
+            this.tableEl.setRowCountSync(safeRows.length);
+        }
+    }
+    componentWillLoad() {
+        this.syncTableContext();
+        this.rows = this.rows ?? [];
+        if (this.tableEl?.setRowCountSync) {
+            this.tableEl.setRowCountSync(this.rows.length);
+        }
+        this.el.setSpacersSync = (top, bottom) => {
+            this.topSpacerHeight = top;
+            this.bottomSpacerHeight = bottom;
+        };
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+    }
+    syncTableContext() {
+        const table = this.el.closest('sd-table');
+        this.tableEl = table;
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
+        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    render() {
+        const hasRows = this.rows.length > 0;
+        return (h(Host, { key: 'aaa6a5a3ae24728e004c769f8652c838f852aefc', slot: `${this.tableId}-body` }, h("tbody", { key: 'de2909b4fe23293abd69778aed02abdab4ee8120', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+            this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
+            h("slot", null),
+            this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
+        ]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
+    }
+    static get is() { return "sd-tbody"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-tbody.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-tbody.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Row[]",
+                    "resolved": "Row[]",
+                    "references": {
+                        "Row": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tableId": {},
+            "topSpacerHeight": {},
+            "bottomSpacerHeight": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "rows",
+                "methodName": "handleRowsChange"
+            }];
+    }
+}

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

@@ -0,0 +1,15 @@
+sd-td * {
+  box-sizing: border-box;
+}
+sd-td {
+  display: contents;
+}
+sd-td.align-left {
+  text-align: left;
+}
+sd-td.align-center {
+  text-align: center;
+}
+sd-td.align-right {
+  text-align: right;
+}

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

@@ -0,0 +1,121 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { TABLE_ID_ATTR } from "../constants";
+export class SdTd {
+    el;
+    field;
+    rowKey;
+    align;
+    handleFieldChange() {
+        this.syncSlotName();
+    }
+    handleRowKeyChange() {
+        this.syncSlotName();
+    }
+    componentWillLoad() {
+        this.syncSlotName();
+        // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
+        const parentTr = this.el.parentElement;
+        if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
+            forceUpdate(parentTr);
+        }
+    }
+    componentDidLoad() {
+        this.syncSlotName();
+    }
+    syncSlotName() {
+        const table = this.el.closest('sd-table');
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
+        const tableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : 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: '9fdf1f552785399ec47244f1d534d49070dd6fa1', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '845eddc0d15fd8bb2f2f93e146aa8fa1eb9d194f' })));
+    }
+    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": ""
+                },
+                "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": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "field",
+                "methodName": "handleFieldChange"
+            }, {
+                "propName": "rowKey",
+                "methodName": "handleRowKeyChange"
+            }];
+    }
+}

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

@@ -0,0 +1,147 @@
+sd-thead {
+  display: contents;
+}
+sd-thead * {
+  box-sizing: border-box;
+}
+
+.thead {
+  display: table-header-group;
+  height: 36px;
+}
+.thead--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+}
+
+.tr {
+  display: table-row;
+  width: 100%;
+}
+
+.th {
+  display: table-cell;
+  background: #F5FAFF;
+  height: 36px;
+  padding: 0 16px;
+  font-weight: 500;
+  vertical-align: middle;
+  border-bottom: 1px solid #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: 52px !important;
+  max-width: 52px !important;
+  min-width: 52px !important;
+  padding: 0 10px 0 24px;
+  text-align: left;
+}
+.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: #F5FAFF;
+  z-index: 110 !important;
+  left: var(--sticky-left-offset, 0);
+}
+.th.sticky-right {
+  position: sticky;
+  background-color: #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: 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__resizer {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  cursor: col-resize;
+  z-index: 3;
+  border-left: 1px solid #CCCCCC;
+  border-right: 1px solid #CCCCCC;
+}
+.th__resizer--left {
+  right: auto;
+  left: 0;
+}