@sellmate/design-system 1.20.1 → 1.22.0

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js

@@ -8,10 +8,15 @@ export class SdDropdownButton extends BaseDropdownEvent {
         super();
     }
     el;
+    /** 버튼 프리셋 이름 (크기와 색상 조합) */
     name = 'primary_sm';
+    /** 버튼 레이블 */
     label = '';
+    /** 드롭다운 메뉴 아이템 목록 */
     items = [];
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
     split = false;
     static CLOSE_ANIMATION_DURATION = 150;
     isOpen = false;
@@ -21,8 +26,11 @@ export class SdDropdownButton extends BaseDropdownEvent {
     splitContainerRef;
     menuRef;
     closeAnimationTimer;
+    /** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
     click;
+    /** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
     buttonClick;
+    /** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
     dropDownShow;
     handleOpenChange(isOpen) {
         this.onDropdownToggle(isOpen);
@@ -39,11 +47,13 @@ export class SdDropdownButton extends BaseDropdownEvent {
         if (this.closeAnimationTimer)
             clearTimeout(this.closeAnimationTimer);
     }
+    /** 드롭다운 메뉴를 엽니다. */
     async sdOpen() {
         if (this.disabled || this.items.length === 0)
             return;
         this.isOpen = true;
     }
+    /** 드롭다운 메뉴를 닫습니다. */
     async sdClose() {
         this.closeDropdown();
     }
@@ -265,7 +275,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD504\uB9AC\uC14B \uC774\uB984 (\uD06C\uAE30\uC640 \uC0C9\uC0C1 \uC870\uD569)"
                 },
                 "getter": false,
                 "setter": false,
@@ -285,7 +295,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -312,7 +322,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274 \uC544\uC774\uD15C \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -330,7 +340,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -350,7 +360,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uBC84\uD2BC\uACFC \uB4DC\uB86D\uB2E4\uC6B4 \uD1A0\uAE00\uC744 \uBD84\uB9AC\uD558\uB294 split \uBAA8\uB4DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -376,7 +386,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBA54\uB274 \uC544\uC774\uD15C \uC120\uD0DD \uC2DC \uD574\uB2F9 \uC544\uC774\uD15C\uC758 value\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "DropdownButtonValue",
@@ -398,7 +408,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "split \uBAA8\uB4DC\uC5D0\uC11C \uB808\uC774\uBE14 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -413,7 +423,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uC5F4\uB9BC/\uB2EB\uD798 \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ isOpen: boolean }",
@@ -437,7 +447,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274\uB97C \uC5FD\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -454,7 +464,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274\uB97C \uB2EB\uC2B5\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -14,25 +14,44 @@ const FORM_PARENT_TAGS = [
 ];
 export class SdField {
     el;
+    /** 폼 연동용 name 속성 */
     name = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 에러 상태 여부 */
     error = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 읽기 전용 여부 */
     readonly = false;
+    /** 호버 상태 여부 */
     hovered = false;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 필드 크기 */
     size = 'sm';
     // props - label
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     errorMsg = '';
     hostElement = null;
@@ -97,6 +116,7 @@ export class SdField {
             form.sdUnregisterField(this);
         });
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         if (!this.rules || this.rules.length === 0)
             return true;
@@ -110,15 +130,18 @@ export class SdField {
         this.setError(false, '');
         return true;
     }
+    /** 필드 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         if (this.hostElement) {
             this.hostElement.value = null;
         }
         this.setError(false, '');
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.setError(false, '');
     }
+    /** 필드에 포커스를 이동하고 스크롤합니다. */
     async sdFocus() {
         this.hostElement?.focus?.();
         this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -182,21 +205,21 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '76a1a2f41cafb2a665415f4e6e7bd9561aacb57f', class: {
+        return (h("div", { key: 'baf943d77385c9c02e2fe1d938f9622bd858129c', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'b4219a5e3e80ead00b0cb67d6c5c8a1b25e59f57', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '91dd10be9bf9fe70615d6f4f0ee00601cab5ee4a', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'f5f204929ef4a4e1a260d7609bc00d9a1fe998f4', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'eff02956e5aae08691b2850bb0d1978865a446f9', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: 'd15df53ff3d76ab9f9bd5e6ffe55f98b53c1211a', class: {
+                : {} }, h("div", { key: 'bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (h("div", { key: 'fa65e5f352e20ae9f533bdf93d95b2d2f3ec4d7b', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '5c6d67ca4a72191622d14727567b8bca0975dcee', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'c4f4e9392b3e6df8bba7a0f9e39bb3847ccf5931' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: '4cef1308de0b709d5924ff7a02ee5bd3b78c1502', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '7fdfca555d80f5409082c43967224fd8108a6f29', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'c523813390db6f6f4acce3ffb8377820ffb95fad' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -229,7 +252,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -256,7 +279,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +297,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +317,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -314,7 +337,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC77D\uAE30 \uC804\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -334,7 +357,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -354,7 +377,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -374,7 +397,7 @@ export class SdField {
                 "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,
@@ -393,7 +416,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -413,7 +436,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -433,7 +456,7 @@ export class SdField {
                 "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,
@@ -460,7 +483,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -480,7 +503,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -500,7 +523,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -520,7 +543,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -547,7 +570,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -572,7 +595,7 @@ export class SdField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -590,7 +613,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -617,7 +640,7 @@ export class SdField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -645,7 +668,7 @@ export class SdField {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -662,7 +685,7 @@ export class SdField {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD544\uB4DC \uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -679,7 +702,7 @@ export class SdField {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -696,7 +719,7 @@ export class SdField {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD544\uB4DC\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD558\uACE0 \uC2A4\uD06C\uB864\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }