@sellmate/design-system 1.20.1 → 1.22.0

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -3,38 +3,65 @@ import { nanoid } from "nanoid/non-secure";
 import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS } from "./sd-file-picker.config";
 export class SdFilePicker {
     el;
+    /** 선택된 파일 값 */
     value = null;
+    /** 파일 미선택 시 표시할 placeholder */
     placeholder = 'Click to upload';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** sd-field 없이 인라인으로 표시하는 모드 여부 */
     inline = false;
+    /** 다중 파일 선택 여부 */
     multiple = false;
+    /** 허용할 파일 타입 (input accept 속성과 동일) */
     accept;
+    /** 파일 한 개의 최대 크기 (bytes) */
     maxFileSize;
+    /** 전체 파일의 최대 용량 합계 (bytes) */
     maxTotalSize;
+    /** 최대 파일 개수 */
     maxFiles;
     // sd-field 패스스루 props
+    /** 폼 연동용 name 속성 */
     name = nanoid();
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 유효성 검사 규칙 목록 */
     rules;
+    /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 호버 상태 여부 */
     hovered = false;
     internalValue = null;
     showTooltip = false;
     fileInputRef;
     fileNamesRef;
     formField;
+    /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
     update;
+    /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
     reject;
     valueChanged(newValue) {
         this.internalValue = newValue;
@@ -45,9 +72,11 @@ export class SdFilePicker {
     componentDidUpdate() {
         this.checkOverflow();
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         return this.formField?.sdValidate() ?? Promise.resolve(true);
     }
+    /** 파일 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         const clearedValue = this.multiple ? [] : null;
         this.value = clearedValue;
@@ -57,6 +86,7 @@ export class SdFilePicker {
         }
         await this.formField?.sdResetValidation();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         await this.formField?.sdResetValidation();
     }
@@ -244,7 +274,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uD30C\uC77C \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -262,7 +292,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD30C\uC77C \uBBF8\uC120\uD0DD \uC2DC \uD45C\uC2DC\uD560 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -282,7 +312,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -302,7 +332,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "sd-field \uC5C6\uC774 \uC778\uB77C\uC778\uC73C\uB85C \uD45C\uC2DC\uD558\uB294 \uBAA8\uB4DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -322,7 +352,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2E4\uC911 \uD30C\uC77C \uC120\uD0DD \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -342,7 +372,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD5C8\uC6A9\uD560 \uD30C\uC77C \uD0C0\uC785 (input accept \uC18D\uC131\uACFC \uB3D9\uC77C)"
                 },
                 "getter": false,
                 "setter": false,
@@ -361,7 +391,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD30C\uC77C \uD55C \uAC1C\uC758 \uCD5C\uB300 \uD06C\uAE30 (bytes)"
                 },
                 "getter": false,
                 "setter": false,
@@ -380,7 +410,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC804\uCCB4 \uD30C\uC77C\uC758 \uCD5C\uB300 \uC6A9\uB7C9 \uD569\uACC4 (bytes)"
                 },
                 "getter": false,
                 "setter": false,
@@ -399,7 +429,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD5C\uB300 \uD30C\uC77C \uAC1C\uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -418,7 +448,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -438,7 +468,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -458,7 +488,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -478,7 +508,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -505,7 +535,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -525,7 +555,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -545,7 +575,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -565,7 +595,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -592,7 +622,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false
@@ -609,7 +639,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -629,7 +659,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -653,7 +683,7 @@ export class SdFilePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -671,7 +701,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -698,7 +728,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -716,7 +746,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -736,7 +766,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -761,7 +791,7 @@ export class SdFilePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD30C\uC77C \uC120\uD0DD \uB610\uB294 \uC0AD\uC81C \uC2DC \uD604\uC7AC \uD30C\uC77C \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "File[] | File | null",
@@ -781,7 +811,7 @@ export class SdFilePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD30C\uC77C\uC774 \uD06C\uAE30\u00B7\uAC1C\uC218 \uC81C\uD55C\uC744 \uCD08\uACFC\uD558\uC5EC \uAC70\uBD80\uB410\uC744 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{\n    files: File[];\n    reason: 'max-file-size' | 'max-total-size' | 'max-files';\n  }",
@@ -810,7 +840,7 @@ export class SdFilePicker {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -827,7 +857,7 @@ export class SdFilePicker {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD30C\uC77C \uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -844,7 +874,7 @@ export class SdFilePicker {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
 export class SdFloatingPopover {
     el;
+    /** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
     to = 'body';
+    /** 위치 기준이 되는 부모 엘리먼트 */
     parentRef = null;
+    /** [x, y] 오프셋 (px) */
     offset = [0, 0];
-    zIndex = 998;
+    /** z-index */
+    zIndex = 996;
+    /** 콘텐츠를 표시할 방향 */
     placement = 'bottom';
+    /** 표시 여부 */
     open = false;
+    /** 외부 클릭 등으로 닫힐 때 발생합니다. */
     close;
     container;
     wrapper;
@@ -61,11 +68,25 @@ export class SdFloatingPopover {
         const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
         return el instanceof HTMLElement ? el : document.body;
     }
+    /**
+     * 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
+     * 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
+     */
+    resolveZIndex() {
+        const base = this.zIndex ?? 996;
+        const layer = this.parentRef?.closest('.sd-modal-container__layer');
+        if (!layer)
+            return base;
+        const container = layer.closest('.sd-modal-container');
+        const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
+        const modalZIndex = Number.isFinite(z) ? z : 997;
+        return Math.max(base, modalZIndex + 1);
+    }
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'fixed',
-            zIndex: (this.zIndex ?? 998).toString(),
+            zIndex: this.resolveZIndex().toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -152,7 +173,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '77829bed54180a72d233738d1f82d9996ae29cae' });
+        return h("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {
@@ -184,7 +205,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uD0C8 \uCF58\uD150\uCE20\uB97C \uB9C8\uC6B4\uD2B8\uD560 \uB300\uC0C1 (CSS \uC120\uD0DD\uC790 \uB610\uB294 HTMLElement)"
                 },
                 "getter": false,
                 "setter": false,
@@ -209,7 +230,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC704\uCE58 \uAE30\uC900\uC774 \uB418\uB294 \uBD80\uBAA8 \uC5D8\uB9AC\uBA3C\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -227,7 +248,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "[x, y] \uC624\uD504\uC14B (px)"
                 },
                 "getter": false,
                 "setter": false,
@@ -245,13 +266,13 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "z-index"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "z-index",
-                "defaultValue": "998"
+                "defaultValue": "996"
             },
             "placement": {
                 "type": "string",
@@ -265,7 +286,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20\uB97C \uD45C\uC2DC\uD560 \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -285,7 +306,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -304,7 +325,7 @@ export class SdFloatingPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC678\uBD80 \uD074\uB9AD \uB4F1\uC73C\uB85C \uB2EB\uD790 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/sd-form/sd-form.js

@@ -1,8 +1,11 @@
 import { h } from "@stencil/core";
 export class SdForm {
+    /** form 엘리먼트에 추가할 클래스 */
     formClass = '';
     fields = [];
+    /** 유효성 검사 통과 후 submit 시 발생합니다. */
     sdSubmit;
+    /** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
     sdValidationError;
     sortFieldsByDomOrder() {
         this.fields.sort((a, b) => {
@@ -20,6 +23,7 @@ export class SdForm {
             return 0;
         });
     }
+    /** 폼에 필드를 등록합니다. */
     async sdRegisterField(field) {
         if (field.name === '') {
             console.warn('[sd-form] field.name is required');
@@ -30,6 +34,7 @@ export class SdForm {
         this.fields.push(field);
         this.sortFieldsByDomOrder();
     }
+    /** 폼에서 필드를 제거합니다. */
     async sdUnregisterField(fieldOrName) {
         if (typeof fieldOrName === 'string') {
             const index = this.fields.findIndex(field => field.name === fieldOrName);
@@ -50,13 +55,16 @@ export class SdForm {
         }
         return { valid: invalidFields.length === 0, invalidFields };
     }
+    /** 모든 등록된 필드의 유효성 검사를 실행합니다. */
     async sdValidate() {
         const { valid } = await this.runValidation();
         return valid;
     }
+    /** 모든 필드의 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.fields.forEach(f => f.sdReset());
     }
+    /** 모든 필드의 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.fields.forEach(f => f.sdResetValidation());
     }
@@ -70,7 +78,7 @@ export class SdForm {
         this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: 'd64dc85bce08da6a18f7dac5038a89f8bd7b5f01', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'a0c6d177cc4c656369714ff0ebc5269255d2c2b5' })));
+        return (h("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {
@@ -87,7 +95,7 @@ export class SdForm {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "form \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -106,7 +114,7 @@ export class SdForm {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uD1B5\uACFC \uD6C4 submit \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -121,7 +129,7 @@ export class SdForm {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uC2E4\uD328 \uC2DC \uC2E4\uD328\uD55C \uD544\uB4DC name \uBAA9\uB85D\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ names: string[] }",
@@ -154,7 +162,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD3FC\uC5D0 \uD544\uB4DC\uB97C \uB4F1\uB85D\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -180,7 +188,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD3FC\uC5D0\uC11C \uD544\uB4DC\uB97C \uC81C\uAC70\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -197,7 +205,7 @@ export class SdForm {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uBAA8\uB4E0 \uB4F1\uB85D\uB41C \uD544\uB4DC\uC758 \uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -214,7 +222,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uBAA8\uB4E0 \uD544\uB4DC\uC758 \uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -231,7 +239,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uBAA8\uB4E0 \uD544\uB4DC\uC758 \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }