@sellmate/design-system 1.0.78 → 1.1.0

package/dist/cjs/sd-key-value-table.cjs.entry.js

@@ -0,0 +1,230 @@
+'use strict';
+
+var index = require('./index-BlxrCRYi.js');
+var system = require('./system-VmZRYp6V.js');
+var component_table = require('./component.table-B7brIpIQ.js');
+
+const t = component_table.tableTokens.table;
+const KEY_VALUE_TABLE_LAYOUT = {
+    rowHeight: Number(t.keyValue.height),
+    thWidth: 120,
+    borderRadius: Number(t.radius),
+    paddingX: Number(t.body.paddingX),
+    paddingY: Number(t.keyValue.body.padding),
+    helpIconSize: 16,
+    requiredIconSize: 12,
+    gap: Number(t.header.gap),
+    labelGap: Number(t.content.gap),
+    borderWidth: Number(t.border.width),
+    searchPaddingX: Number(t.keyValue.search.paddingX),
+};
+const KEY_VALUE_TABLE_COLORS = {
+    border: t.border.color,
+    thBg: t.header.bg,
+    thLabel: system.systemTokens.color.fg.primary,
+    required: system.systemTokens.color.fg.accent,
+    helpIcon: system.systemTokens.color.fg.success,
+    tdBg: system.systemTokens.color.bg.frame,
+    tdText: system.systemTokens.color.fg.primary,
+    searchBg: t.keyValue.search.bg,
+};
+const KEY_VALUE_TABLE_TYPOGRAPHY = {
+    labelFontFamily: t.header.typography.fontFamily,
+    labelFontSize: Number(t.header.typography.fontSize),
+    labelFontWeight: Number(t.header.typography.fontWeight),
+    labelLineHeight: Number(t.header.typography.lineHeight),
+    tdFontFamily: t.body.typography.fontFamily,
+    tdFontSize: Number(t.body.typography.fontSize),
+    tdFontWeight: Number(t.body.typography.fontWeight),
+    tdLineHeight: Number(t.body.typography.lineHeight),
+};
+
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding-y) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);padding:var(--sd-kvt-padding-y) var(--sd-kvt-padding-x);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+
+const SdKeyValueTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.change = index.createEvent(this, "sdChange", 7);
+        this.searchEvent = index.createEvent(this, "sdSearch", 7);
+    }
+    /**
+     * 2차원 배열. 외부 배열 = row, 내부 배열 = 한 row에 들어가는 [th|td] field들.
+     * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
+     */
+    fields = [];
+    /**
+     * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
+     */
+    search = false;
+    /**
+     * true이면 테이블 상단 border-radius를 0으로 처리.
+     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     */
+    useTop = false;
+    change;
+    searchEvent;
+    emit = (name, value) => {
+        this.change.emit({ name, value });
+    };
+    handleSearchClick = () => {
+        this.searchEvent.emit();
+    };
+    renderField(field) {
+        const onSdUpdate = (e) => this.emit(field.name, e.detail);
+        switch (field.type) {
+            case 'input':
+                return index.h("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'textarea':
+                return index.h("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'number-input':
+                return index.h("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'select':
+                return index.h("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'radio': {
+                const { value, direction, ...rest } = field.options ?? {};
+                return (index.h("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
+            }
+            case 'checkbox': {
+                const { value, ...rest } = field.options ?? {};
+                return index.h("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
+            }
+            case 'date-picker':
+                return index.h("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'date-range-picker':
+                return (index.h("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
+            case 'file-picker':
+                return index.h("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'text':
+            default:
+                return index.h("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
+        }
+    }
+    renderHelpIcon(helpText) {
+        return (index.h("span", { class: "sd-key-value-table__help" }, index.h("sd-tooltip", { icon: "helpOutline", iconSize: KEY_VALUE_TABLE_LAYOUT.helpIconSize, color: KEY_VALUE_TABLE_COLORS.helpIcon, trigger: "hover" }, helpText)));
+    }
+    /**
+     * 같은 컬럼 인덱스의 thRowSpan에 의해 가려지는 위치를 자동 계산.
+     * `skip[r][c] === true` 이면 row r의 c번째 field는 th 셀을 렌더하지 않음.
+     */
+    computeAutoSkipTh() {
+        const skips = this.fields.map(row => row.map(() => false));
+        this.fields.forEach((row, r) => {
+            row.forEach((f, c) => {
+                const span = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
+                if (span <= 1)
+                    return;
+                for (let dr = 1; dr < span; dr++) {
+                    const targetRow = skips[r + dr];
+                    if (targetRow && c < targetRow.length) {
+                        targetRow[c] = true;
+                    }
+                }
+            });
+        });
+        return skips;
+    }
+    /**
+     * 모든 row를 훑어 전체 컬럼 수를 계산.
+     * th/td 자체와 thColSpan/tdColSpan, hideTh, thRowSpan(autoSkip)을 모두 반영.
+     */
+    computeMaxCols(autoSkip) {
+        let max = 0;
+        this.fields.forEach((row, r) => {
+            let cols = 0;
+            row.forEach((f, c) => {
+                let thCols;
+                if (f.hideTh)
+                    thCols = 0;
+                else if (autoSkip[r]?.[c])
+                    thCols = 1;
+                else
+                    thCols = f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
+                const tdCols = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
+                cols += thCols + tdCols;
+            });
+            if (cols > max)
+                max = cols;
+        });
+        return max;
+    }
+    renderTh(field, r, c) {
+        const thRowSpan = field.thRowSpan && field.thRowSpan > 1 ? field.thRowSpan : undefined;
+        const thColSpan = field.thColSpan && field.thColSpan > 1 ? field.thColSpan : undefined;
+        const classObj = { 'sd-key-value-table__th': true };
+        if (typeof field.thClass === 'string') {
+            classObj[field.thClass] = true;
+        }
+        else if (Array.isArray(field.thClass)) {
+            field.thClass.forEach(cls => (classObj[cls] = true));
+        }
+        return (index.h("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, index.h("div", { class: "sd-key-value-table__th-inner" }, index.h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (index.h("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
+    }
+    renderTd(field, r, c) {
+        const tdRowSpan = field.tdRowSpan && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
+        const tdColSpan = field.tdColSpan && field.tdColSpan > 1 ? field.tdColSpan : undefined;
+        return (index.h("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, index.h("div", { class: "sd-key-value-table__td-inner" }, index.h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
+    }
+    warnDuplicateNames() {
+        const seen = new Set();
+        const dups = new Set();
+        this.fields.forEach(row => row.forEach(f => {
+            if (seen.has(f.name))
+                dups.add(f.name);
+            else
+                seen.add(f.name);
+        }));
+        if (dups.size > 0) {
+            console.warn(`[sd-key-value-table] Duplicate field name(s) detected: ${[...dups].join(', ')}. ` +
+                `Slot names ("field-{name}") and sdChange events rely on unique names.`);
+        }
+    }
+    render() {
+        if (!this.fields.length)
+            return null;
+        const cssVars = {
+            '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
+            '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
+            '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
+            '--sd-kvt-padding-x': `${KEY_VALUE_TABLE_LAYOUT.paddingX}px`,
+            '--sd-kvt-padding-y': `${KEY_VALUE_TABLE_LAYOUT.paddingY}px`,
+            '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
+            '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
+            '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
+            '--sd-kvt-border-color': KEY_VALUE_TABLE_COLORS.border,
+            '--sd-kvt-th-bg': KEY_VALUE_TABLE_COLORS.thBg,
+            '--sd-kvt-th-color': KEY_VALUE_TABLE_COLORS.thLabel,
+            '--sd-kvt-required-color': KEY_VALUE_TABLE_COLORS.required,
+            '--sd-kvt-td-bg': KEY_VALUE_TABLE_COLORS.tdBg,
+            '--sd-kvt-td-color': KEY_VALUE_TABLE_COLORS.tdText,
+            '--sd-kvt-label-font-family': KEY_VALUE_TABLE_TYPOGRAPHY.labelFontFamily,
+            '--sd-kvt-label-font-size': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelFontSize}px`,
+            '--sd-kvt-label-font-weight': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelFontWeight}`,
+            '--sd-kvt-label-line-height': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelLineHeight}px`,
+            '--sd-kvt-td-font-family': KEY_VALUE_TABLE_TYPOGRAPHY.tdFontFamily,
+            '--sd-kvt-td-font-size': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdFontSize}px`,
+            '--sd-kvt-td-font-weight': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdFontWeight}`,
+            '--sd-kvt-td-line-height': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdLineHeight}px`,
+            '--sd-kvt-search-bg': KEY_VALUE_TABLE_COLORS.searchBg,
+            '--sd-kvt-search-padding-x': `${KEY_VALUE_TABLE_LAYOUT.searchPaddingX}px`,
+        };
+        this.warnDuplicateNames();
+        const autoSkip = this.computeAutoSkipTh();
+        const maxCols = this.computeMaxCols(autoSkip);
+        const tableEl = (index.h("table", { class: {
+                'sd-key-value-table': true,
+                'sd-key-value-table--use-top': this.useTop,
+            }, style: cssVars }, index.h("colgroup", null, Array.from({ length: maxCols }, (_, i) => (index.h("col", { key: `col-${i}`, style: i % 2 === 0 ? { width: `${KEY_VALUE_TABLE_LAYOUT.thWidth}px` } : undefined })))), index.h("tbody", null, this.fields.map((row, r) => (index.h("tr", { class: "sd-key-value-table__row", key: `row-${r}` }, row.map((field, c) => {
+            const showTh = !field.hideTh && !autoSkip[r][c];
+            return [showTh ? this.renderTh(field, r, c) : null, this.renderTd(field, r, c)];
+        })))))));
+        if (!this.search)
+            return tableEl;
+        return (index.h("div", { class: {
+                'sd-key-value-table__wrapper': true,
+                'sd-key-value-table__wrapper--use-top': this.useTop,
+            }, style: cssVars }, tableEl, index.h("div", { class: "sd-key-value-table__search-panel" }, index.h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
+    }
+};
+SdKeyValueTable.style = sdKeyValueTableCss();
+
+exports.sd_key_value_table = SdKeyValueTable;

package/dist/cjs/sd-linear-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-BlxrCRYi.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
-var system = require('./system-DpTN1vBC.js');
+var system = require('./system-VmZRYp6V.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -49,7 +49,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, index.h("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, index.h("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
+        return (index.h(index.Host, { key: '58849d88024bc69ab0260bdf32f461fdfb87c93c', style: hostStyle }, index.h("div", { key: 'a4370fbc94bdf7b51d4a27f85ca86606c3770cdb', class: 'sd-linear-progress__track' }, index.h("div", { key: 'e270357433247981f8374a0345cb2d3ba8d4cfca', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'baa77fe44a7129330e8fe70b8aa2e8bc6fd4b703', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: '46a73b233ea34c1d9ac242140abe3b1e5831d484', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '91d5c9cc27960c7448706e641028bcc8f893b805', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/cjs/sd-loading-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-BlxrCRYi.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
+        return (index.h("div", { key: '1c684984ec7203edb4206690026cf8085bfadcfb', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), index.h("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '42a7d3b6c0f562cbfd1a0928a3df4df3cc962299', class: "sd-loading-container__backdrop" }), index.h("div", { key: 'ce11d0950e5047eb47ae87f41bf7c049a2e18cbc', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'e6f63c78da63cf660942137e73cef389789e83b0', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '139b648a8a8007a050f6e81374930f92d676707c', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-BlxrCRYi.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;