npm - @sellmate/design-system - Versions diffs - 1.20.1 → 1.21.0 - Mend

@sellmate/design-system 1.20.1 → 1.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (365) hide show

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js CHANGED Viewed

@@ -4,44 +4,68 @@ import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "./sd-date-range-picker.
 export class SdDateRangePicker {
     static CLOSE_ANIMATION_DURATION = 150;
     el;
+    /** 선택된 날짜 범위 [시작일, 종료일] (YYYY-MM-DD) */
     value = null;
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 미선택 시 표시할 placeholder */
     placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] */
     selectable;
+    /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
     // sd-field 공통 props
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 에러 상태 여부 */
     error = false;
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     isOpen = false;
     isAnimatingOut = false;
     focused = false;
     hovered = false;
+    /** 날짜 범위 선택 완료 시 [시작일, 종료일]을 전달합니다. */
     update;
+    /** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
     viewChange;
     triggerRef;
     formField;
     closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
     name = nanoid();
     watchIsOpen(newValue) {
         this.focused = newValue;
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         return this.formField?.sdValidate();
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         return this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         return this.formField?.sdResetValidation();
     }
@@ -98,9 +122,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '89eaeb8978796508650aec5f3ccdeb7df16fb6f4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'f3ce583e53edbc451ab6c0592c0ab2ed87e07a06', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '53086fd3d15dc2c05364a66fdf767e09c6c19fac', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '5ee1499ee9a224a9c653095e9914ed20cbaca2a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '7c7479dacf57c996a708435857d2b5f7900509fd', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -133,7 +157,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uB0A0\uC9DC \uBC94\uC704 [\uC2DC\uC791\uC77C, \uC885\uB8CC\uC77C] (YYYY-MM-DD)"
                 },
                 "getter": false,
                 "setter": false,
@@ -158,7 +182,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -178,7 +202,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBBF8\uC120\uD0DD \uC2DC \uD45C\uC2DC\uD560 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -198,7 +222,7 @@ export class SdDateRangePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC00\uB2A5\uD55C \uB0A0\uC9DC \uBC94\uC704 [\uC2DC\uC791\uC77C, \uC885\uB8CC\uC77C]"
                 },
                 "getter": false,
                 "setter": false
@@ -215,7 +239,7 @@ export class SdDateRangePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD5C\uB300 \uC120\uD0DD \uAC00\uB2A5\uD55C \uB0A0\uC9DC \uBC94\uC704 (\uC77C \uB2E8\uC704)"
                 },
                 "getter": false,
                 "setter": false,
@@ -234,7 +258,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -254,7 +278,7 @@ export class SdDateRangePicker {
                 "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,
@@ -274,7 +298,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +318,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -314,7 +338,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -341,7 +365,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -361,7 +385,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -381,7 +405,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -408,7 +432,7 @@ export class SdDateRangePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -426,7 +450,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -451,7 +475,7 @@ export class SdDateRangePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -469,7 +493,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -496,7 +520,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -514,7 +538,7 @@ export class SdDateRangePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -541,7 +565,7 @@ export class SdDateRangePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uBC94\uC704 \uC120\uD0DD \uC644\uB8CC \uC2DC [\uC2DC\uC791\uC77C, \uC885\uB8CC\uC77C]\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "DateRangeValue",
@@ -562,7 +586,7 @@ export class SdDateRangePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EC\uB825 \uC6D4/\uB144 \uC774\uB3D9 \uC2DC \uD604\uC7AC \uBCF4\uC5EC\uC9C0\uB294 \uC5F0\u00B7\uC6D4\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ year: number; month: number }",
@@ -586,7 +610,7 @@ export class SdDateRangePicker {
                     "return": "Promise<boolean | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -603,7 +627,7 @@ export class SdDateRangePicker {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -620,7 +644,7 @@ export class SdDateRangePicker {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -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": []
                 }
             }