@sellmate/design-system 1.27.1 → 1.29.0

package/dist/collection/components/sd-table/sd-table.stories.helpers.js

@@ -1,242 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, LitElement, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
-// React/Vue의 useSdTableVirtualScroll과 동일 역할:
-// sd-table의 sdVirtualUpdate를 listen해서 vsStart..vsEnd 슬라이스만 슬롯에 꽂는다.
-// Storybook(lit-html)에는 그 역할을 할 reactive 호스트가 없어서 wrapper로 제공.
-//
-// declare + constructor 초기화 패턴: tsconfig가 target es2022라
-// class field가 native define으로 컴파일되어 lit의 accessor를 overwrite하는 문제를 회피.
-let StoryVirtualTable = class StoryVirtualTable extends LitElement {
-    static styles = css `
-    :host {
-      display: block;
-      width: 100%;
-    }
-  `;
-    tableRef = createRef();
-    detachListener;
-    syncRafId = 0;
-    constructor() {
-        super();
-        this.columns = [];
-        this.rows = [];
-        this.stickyColumn = { left: 0, right: 0 };
-        this.stickyHeader = false;
-        this.selectable = false;
-        this.resizable = false;
-        this.height = '480px';
-        this.width = '100%';
-        this.rowHeight = 44;
-        this.rowKey = 'id';
-        this.range = null;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.detachListener?.();
-        if (this.syncRafId !== undefined)
-            cancelAnimationFrame(this.syncRafId);
-    }
-    firstUpdated() {
-        const el = this.tableRef.value;
-        if (!el)
-            return;
-        const onUpdate = (e) => {
-            const detail = e.detail;
-            this.range = { from: detail.from, to: detail.to };
-        };
-        el.addEventListener('sdVirtualUpdate', onUpdate);
-        this.detachListener = () => el.removeEventListener('sdVirtualUpdate', onUpdate);
-        const trySync = () => {
-            const r = el.getVirtualScrollRangeSync?.();
-            if (r && typeof r.from === 'number' && typeof r.to === 'number') {
-                this.range = { from: r.from, to: r.to };
-            }
-            else {
-                this.syncRafId = requestAnimationFrame(trySync);
-            }
-        };
-        trySync();
-    }
-    render() {
-        const from = this.range?.from ?? 0;
-        const to = this.range?.to ?? 0;
-        const slice = this.range ? this.rows.slice(from, to) : [];
-        return html `
-      <sd-table
-        ${ref(this.tableRef)}
-        .columns=${this.columns}
-        .rows=${this.rows}
-        row-key=${this.rowKey}
-        ?selectable=${this.selectable}
-        ?resizable=${this.resizable}
-        ?sticky-header=${this.stickyHeader}
-        .stickyColumn=${this.stickyColumn}
-        width=${this.width}
-        height=${this.height}
-        ?use-virtual-scroll=${true}
-        row-height=${this.rowHeight}
-      >
-        <sd-thead></sd-thead>
-        <sd-tbody>
-          ${repeat(slice, (_row, i) => from + i, (row, i) => {
-            const absoluteIndex = from + i;
-            return html `
-                <sd-tr row-key=${String(absoluteIndex)} .row=${row}>
-                  ${this.renderRow ? this.renderRow(row, absoluteIndex) : nothing}
-                </sd-tr>
-              `;
-        })}
-        </sd-tbody>
-      </sd-table>
-    `;
-    }
-};
-__decorate([
-    property({ attribute: false })
-], StoryVirtualTable.prototype, "columns", void 0);
-__decorate([
-    property({ attribute: false })
-], StoryVirtualTable.prototype, "rows", void 0);
-__decorate([
-    property({ attribute: false })
-], StoryVirtualTable.prototype, "stickyColumn", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'sticky-header' })
-], StoryVirtualTable.prototype, "stickyHeader", void 0);
-__decorate([
-    property({ type: Boolean })
-], StoryVirtualTable.prototype, "selectable", void 0);
-__decorate([
-    property({ type: Boolean })
-], StoryVirtualTable.prototype, "resizable", void 0);
-__decorate([
-    property()
-], StoryVirtualTable.prototype, "height", void 0);
-__decorate([
-    property()
-], StoryVirtualTable.prototype, "width", void 0);
-__decorate([
-    property({ type: Number, attribute: 'row-height' })
-], StoryVirtualTable.prototype, "rowHeight", void 0);
-__decorate([
-    property({ attribute: 'row-key' })
-], StoryVirtualTable.prototype, "rowKey", void 0);
-__decorate([
-    property({ attribute: false })
-], StoryVirtualTable.prototype, "renderRow", void 0);
-__decorate([
-    state()
-], StoryVirtualTable.prototype, "range", void 0);
-StoryVirtualTable = __decorate([
-    customElement('story-virtual-table')
-], StoryVirtualTable);
-export { StoryVirtualTable };
-const DROPDOWN_STATUS_META = {
-    active: { bg: '#DCFCE7', color: '#166534', label: 'Active' },
-    reviewing: { bg: '#FEF3C7', color: '#92400E', label: 'Reviewing' },
-    archived: { bg: '#E2E8F0', color: '#475569', label: 'Archived' },
-};
-const DROPDOWN_SEED = [
-    { id: 1, name: 'Avery Kim', role: 'Owner', region: 'Seoul', status: 'active' },
-    { id: 2, name: 'Mina Park', role: 'Manager', region: 'Busan', status: 'reviewing' },
-    { id: 3, name: 'Ethan Lee', role: 'Analyst', region: 'Incheon', status: 'archived' },
-    { id: 4, name: 'Sora Choi', role: 'Owner', region: 'Daegu', status: 'active' },
-    { id: 5, name: 'Jisoo Han', role: 'Manager', region: 'Daejeon', status: 'reviewing' },
-    { id: 6, name: 'Noah Yoon', role: 'Analyst', region: 'Gwangju', status: 'active' },
-    { id: 7, name: 'Iris Jung', role: 'Manager', region: 'Suwon', status: 'active' },
-    { id: 8, name: 'Liam Seo', role: 'Owner', region: 'Ulsan', status: 'reviewing' },
-];
-const DROPDOWN_COLUMNS = [
-    { name: 'name', label: 'Customer', field: 'name', autoWidth: true },
-    { name: 'role', label: 'Role', field: 'role', align: 'center', width: '100px', hasDropdown: true },
-    { name: 'region', label: 'Region', field: 'region', width: '100px' },
-    { name: 'status', label: 'Status', field: 'status', align: 'center', width: '110px', hasDropdown: true },
-];
-const LISTBOX_STYLE = 'margin:0;padding:4px;list-style:none;min-width:140px;background:white;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.10);';
-const ITEM_BASE_STYLE = 'padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;';
-let StoryDropdownTable = class StoryDropdownTable extends LitElement {
-    // Disable shadow DOM so Stencil's slot emulation can see and move
-    // the slotted <ul> nodes without Lit's ChildPart losing track of them.
-    createRenderRoot() { return this; }
-    constructor() {
-        super();
-        this.roleFilter = 'All';
-        this.statusFilter = 'All';
-    }
-    get displayRows() {
-        return DROPDOWN_SEED.filter(row => (this.roleFilter === 'All' || row.role === this.roleFilter) &&
-            (this.statusFilter === 'All' || row.status === this.statusFilter));
-    }
-    itemStyle(active) {
-        return `${ITEM_BASE_STYLE}background:${active ? '#f0f9ff' : 'transparent'};color:${active ? '#0369a1' : '#374151'};font-weight:${active ? '600' : '400'};`;
-    }
-    render() {
-        const rows = this.displayRows;
-        const roleOptions = ['All', 'Owner', 'Manager', 'Analyst'];
-        const statusOptions = ['All', 'active', 'reviewing', 'archived'];
-        return html `
-      <div style="display:flex;flex-direction:column;gap:12px;">
-        <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;">
-          <span style="color:#64748b;">Active filters:</span>
-          ${this.roleFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Role: ${this.roleFilter}</span>` : nothing}
-          ${this.statusFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Status: ${DROPDOWN_STATUS_META[this.statusFilter]?.label}</span>` : nothing}
-          ${this.roleFilter === 'All' && this.statusFilter === 'All' ? html `<span style="color:#94a3b8;">없음</span>` : nothing}
-          ${this.roleFilter !== 'All' || this.statusFilter !== 'All' ? html `<button style="font-size:12px;color:#64748b;text-decoration:underline;background:none;border:none;cursor:pointer;" @click=${() => { this.roleFilter = 'All'; this.statusFilter = 'All'; }}>초기화</button>` : nothing}
-        </div>
-
-        <sd-table .columns=${DROPDOWN_COLUMNS} .rows=${rows} row-key="id" width="100%">
-          <sd-thead>
-            <ul slot="dropdown-role" style=${LISTBOX_STYLE}>
-              ${roleOptions.map(opt => html `
-                <li style=${this.itemStyle(this.roleFilter === opt)} @click=${() => { this.roleFilter = opt; }}>${opt}</li>
-              `)}
-            </ul>
-            <ul slot="dropdown-status" style=${LISTBOX_STYLE}>
-              ${statusOptions.map(opt => html `
-                <li style=${this.itemStyle(this.statusFilter === opt)} @click=${() => { this.statusFilter = opt; }}>
-                  ${opt === 'All' ? 'All' : DROPDOWN_STATUS_META[opt].label}
-                </li>
-              `)}
-            </ul>
-          </sd-thead>
-          <sd-tbody>
-            ${repeat(rows, row => row.id, row => {
-            const meta = DROPDOWN_STATUS_META[row.status];
-            return html `
-                  <sd-tr row-key=${String(row.id)} .row=${row}>
-                    <sd-td field="status" row-key=${String(row.id)}>
-                      <span style="display:inline-flex;min-width:88px;align-items:center;justify-content:center;border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:600;background:${meta.bg};color:${meta.color};">
-                        ${meta.label}
-                      </span>
-                    </sd-td>
-                  </sd-tr>
-                `;
-        })}
-          </sd-tbody>
-        </sd-table>
-      </div>
-    `;
-    }
-};
-__decorate([
-    state()
-], StoryDropdownTable.prototype, "roleFilter", void 0);
-__decorate([
-    state()
-], StoryDropdownTable.prototype, "statusFilter", void 0);
-StoryDropdownTable = __decorate([
-    customElement('story-dropdown-table')
-], StoryDropdownTable);
-export { StoryDropdownTable };

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

@@ -1,10 +0,0 @@
-:host {
-  display: contents;
-}
-:host * {
-  box-sizing: border-box;
-}
-
-.tbody {
-  display: table-row-group;
-}

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

@@ -1,110 +0,0 @@
-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() {
-        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
-        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
-        const closest = this.el.closest('sd-table');
-        const root = this.el.getRootNode();
-        const fromShadow = root instanceof ShadowRoot ? root.host : null;
-        const table = closest ?? fromShadow;
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    render() {
-        return (h(Host, { key: '6d4bea755b962e2f5b9f37129d0b03fd7f997e93', slot: `${this.tableId}-body` }, h("tbody", { key: '11543f7ea385458bcb57ae4e62bfd258bacb9e01', class: { tbody: true } }, [
-            this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: '515aa270f49dfd20f78de1d11c3c5b914cfda792' }),
-            this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
-        ])));
-    }
-    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": "\uB80C\uB354\uB9C1\uD560 \uD589 \uB370\uC774\uD130 \uBAA9\uB85D"
-                },
-                "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

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