@ncds/ui-admin 1.6.1 → 1.6.3
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.
- package/dist/cjs/assets/scripts/comboBox.js +3 -3
- package/dist/cjs/assets/scripts/selectBox.js +2 -2
- package/dist/cjs/assets/scripts/utils/{selectbox/SelectBoxController.js → unifiedBox/UnifiedBoxController.js} +38 -38
- package/dist/cjs/assets/scripts/utils/{selectbox/UnifiedSelectBox.js → unifiedBox/UnifiedBoxManager.js} +42 -42
- package/dist/cjs/src/components/button/Button.js +0 -1
- package/dist/cjs/src/components/checkbox/CheckboxInput.js +0 -3
- package/dist/cjs/src/components/date-picker/DatePicker.js +5 -1
- package/dist/cjs/src/components/dot/Dot.js +1 -1
- package/dist/cjs/src/components/pagination/Pagination.js +1 -1
- package/dist/cjs/src/components/select/Select.js +0 -3
- package/dist/cjs/src/components/tab/HorizontalTab.js +1 -1
- package/dist/cjs/src/components/tab/VerticalTab.js +1 -1
- package/dist/cjs/src/types/side-slot.js +5 -0
- package/dist/esm/assets/scripts/comboBox.js +3 -3
- package/dist/esm/assets/scripts/selectBox.js +2 -2
- package/dist/esm/assets/scripts/utils/{selectbox/SelectBoxController.js → unifiedBox/UnifiedBoxController.js} +38 -38
- package/dist/esm/assets/scripts/utils/{selectbox/UnifiedSelectBox.js → unifiedBox/UnifiedBoxManager.js} +42 -42
- package/dist/esm/src/components/button/Button.js +0 -1
- package/dist/esm/src/components/checkbox/CheckboxInput.js +0 -3
- package/dist/esm/src/components/date-picker/DatePicker.js +5 -1
- package/dist/esm/src/components/dot/Dot.js +1 -1
- package/dist/esm/src/components/pagination/Pagination.js +1 -1
- package/dist/esm/src/components/select/Select.js +0 -3
- package/dist/esm/src/components/switch/Switch.js +1 -1
- package/dist/esm/src/components/tab/HorizontalTab.js +1 -1
- package/dist/esm/src/components/tab/VerticalTab.js +1 -1
- package/dist/esm/src/types/side-slot.js +1 -0
- package/dist/types/assets/scripts/comboBox.d.ts +3 -3
- package/dist/types/assets/scripts/modal/const/types.d.ts +1 -1
- package/dist/types/assets/scripts/selectBox.d.ts +1 -1
- package/dist/types/assets/scripts/utils/{selectbox/SelectBoxController.d.ts → unifiedBox/UnifiedBoxController.d.ts} +5 -5
- package/dist/types/assets/scripts/utils/{selectbox/UnifiedSelectBox.d.ts → unifiedBox/UnifiedBoxManager.d.ts} +6 -6
- package/dist/types/src/components/badge/BadgeGroup.d.ts +1 -1
- package/dist/types/src/components/button/Button.d.ts +13 -13
- package/dist/types/src/components/checkbox/Checkbox.d.ts +1 -2
- package/dist/types/src/components/checkbox/CheckboxInput.d.ts +0 -3
- package/dist/types/src/components/combobox/ComboBox.d.ts +3 -4
- package/dist/types/src/components/dot/Dot.d.ts +1 -1
- package/dist/types/src/components/dropdown/Dropdown.d.ts +1 -5
- package/dist/types/src/components/input/InputBase.d.ts +3 -3
- package/dist/types/src/components/input/NumberInput.d.ts +1 -1
- package/dist/types/src/components/modal/Modal.d.ts +2 -2
- package/dist/types/src/components/pagination/Pagination.d.ts +1 -1
- package/dist/types/src/components/progress-bar/types.d.ts +1 -1
- package/dist/types/src/components/radio/Radio.d.ts +1 -2
- package/dist/types/src/components/select/Select.d.ts +3 -7
- package/dist/types/src/components/selectbox/SelectBox.d.ts +3 -4
- package/dist/types/src/components/spinner/Spinner.d.ts +1 -1
- package/dist/types/src/components/tag/Tag.d.ts +1 -1
- package/dist/types/src/types/side-slot.d.ts +26 -0
- package/dist/ui-admin/assets/styles/style.css +22 -40
- package/package.json +1 -1
- /package/dist/cjs/assets/scripts/utils/{selectbox → unifiedBox}/DOMRenderer.js +0 -0
- /package/dist/cjs/assets/scripts/utils/{selectbox → unifiedBox}/DropdownModel.js +0 -0
- /package/dist/esm/assets/scripts/utils/{selectbox → unifiedBox}/DOMRenderer.js +0 -0
- /package/dist/esm/assets/scripts/utils/{selectbox → unifiedBox}/DropdownModel.js +0 -0
- /package/dist/types/assets/scripts/utils/{selectbox → unifiedBox}/DOMRenderer.d.ts +0 -0
- /package/dist/types/assets/scripts/utils/{selectbox → unifiedBox}/DropdownModel.d.ts +0 -0
|
@@ -134,13 +134,13 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
|
|
|
134
134
|
};
|
|
135
135
|
import { DOMRenderer } from './DOMRenderer';
|
|
136
136
|
import { DropdownModel } from './DropdownModel';
|
|
137
|
-
import {
|
|
137
|
+
import { UnifiedBoxController } from './UnifiedBoxController';
|
|
138
138
|
/**
|
|
139
|
-
* 통합된
|
|
139
|
+
* 통합된 UnifiedBox 클래스
|
|
140
140
|
* SelectBox와 ComboBox의 기능을 모두 포함
|
|
141
141
|
*/
|
|
142
|
-
var
|
|
143
|
-
function
|
|
142
|
+
var UnifiedBoxManager = /** @class */function () {
|
|
143
|
+
function UnifiedBoxManager(element, config) {
|
|
144
144
|
if (config === void 0) {
|
|
145
145
|
config = {};
|
|
146
146
|
}
|
|
@@ -163,7 +163,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
163
163
|
});
|
|
164
164
|
this.initialize();
|
|
165
165
|
}
|
|
166
|
-
|
|
166
|
+
UnifiedBoxManager.prototype.initialize = function () {
|
|
167
167
|
this.element.innerHTML = '';
|
|
168
168
|
this.setupElementClasses();
|
|
169
169
|
// 초기 옵션이 있는지 확인 (select 태그 등에서 파싱된 옵션이 있는 경우)
|
|
@@ -180,7 +180,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
180
180
|
this.model.setValue(this.config.value);
|
|
181
181
|
}
|
|
182
182
|
};
|
|
183
|
-
|
|
183
|
+
UnifiedBoxManager.prototype.setupElementClasses = function () {
|
|
184
184
|
var baseClass = this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
|
|
185
185
|
this.element.className = "".concat(baseClass, " ").concat(baseClass, "--").concat(this.config.size);
|
|
186
186
|
if (this.config.disabled) {
|
|
@@ -190,14 +190,14 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
190
190
|
this.element.classList.add("".concat(baseClass, "--multiple"));
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
|
-
|
|
193
|
+
UnifiedBoxManager.prototype.createUI = function () {
|
|
194
194
|
if (this.config.type === 'combobox') {
|
|
195
195
|
this.createComboBoxUI();
|
|
196
196
|
} else {
|
|
197
197
|
this.createSelectBoxUI();
|
|
198
198
|
}
|
|
199
199
|
};
|
|
200
|
-
|
|
200
|
+
UnifiedBoxManager.prototype.createComboBoxUI = function () {
|
|
201
201
|
var _this = this;
|
|
202
202
|
// 컨텐츠 컨테이너
|
|
203
203
|
var content = DOMRenderer.createElementWithClass('div', 'ncua-combobox__content');
|
|
@@ -226,7 +226,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
226
226
|
// 드롭다운 생성
|
|
227
227
|
this.createDropdown(content);
|
|
228
228
|
};
|
|
229
|
-
|
|
229
|
+
UnifiedBoxManager.prototype.createSelectBoxUI = function () {
|
|
230
230
|
// 트리거 생성
|
|
231
231
|
var trigger = DOMRenderer.createElementWithClass('div', 'ncua-selectbox__content');
|
|
232
232
|
trigger.setAttribute('tabindex', this.config.disabled ? '-1' : '0');
|
|
@@ -244,7 +244,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
244
244
|
// 드롭다운 생성
|
|
245
245
|
this.createDropdown(this.element);
|
|
246
246
|
};
|
|
247
|
-
|
|
247
|
+
UnifiedBoxManager.prototype.createDropdown = function (parent) {
|
|
248
248
|
var _this = this;
|
|
249
249
|
var dropdownStructure = this.renderer.createDropdownStructure({
|
|
250
250
|
maxHeight: this.config.maxHeight || 275,
|
|
@@ -282,7 +282,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
282
282
|
this.dropdownElement.appendChild(this.footerElement);
|
|
283
283
|
}
|
|
284
284
|
};
|
|
285
|
-
|
|
285
|
+
UnifiedBoxManager.prototype.setupController = function () {
|
|
286
286
|
var _this = this;
|
|
287
287
|
if (!this.triggerElement || !this.dropdownElement) {
|
|
288
288
|
throw new Error('Trigger or dropdown element not found');
|
|
@@ -334,12 +334,12 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
334
334
|
},
|
|
335
335
|
type: this.config.type // 타입 정보 전달
|
|
336
336
|
};
|
|
337
|
-
this.controller = new
|
|
337
|
+
this.controller = new UnifiedBoxController(controllerConfig);
|
|
338
338
|
};
|
|
339
339
|
/**
|
|
340
340
|
* 디바운싱 타이머 취소
|
|
341
341
|
*/
|
|
342
|
-
|
|
342
|
+
UnifiedBoxManager.prototype.cancelDebounceTimer = function () {
|
|
343
343
|
if (this.searchDebounceTimer) {
|
|
344
344
|
clearTimeout(this.searchDebounceTimer);
|
|
345
345
|
this.searchDebounceTimer = undefined;
|
|
@@ -347,7 +347,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
347
347
|
}
|
|
348
348
|
};
|
|
349
349
|
// 이벤트 핸들러들
|
|
350
|
-
|
|
350
|
+
UnifiedBoxManager.prototype.handleInput = function (value) {
|
|
351
351
|
var _this = this;
|
|
352
352
|
var _a, _b;
|
|
353
353
|
this.cancelDebounceTimer();
|
|
@@ -413,7 +413,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
413
413
|
(_b = (_a = this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
|
|
414
414
|
}
|
|
415
415
|
};
|
|
416
|
-
|
|
416
|
+
UnifiedBoxManager.prototype.handleInputClick = function () {
|
|
417
417
|
var _a, _b;
|
|
418
418
|
if (!this.config.disabled) {
|
|
419
419
|
(_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -425,7 +425,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
425
425
|
}
|
|
426
426
|
}
|
|
427
427
|
};
|
|
428
|
-
|
|
428
|
+
UnifiedBoxManager.prototype.handleClearInput = function () {
|
|
429
429
|
this.cancelDebounceTimer();
|
|
430
430
|
// input 필드 텍스트 지우기
|
|
431
431
|
if (this.inputField) {
|
|
@@ -442,7 +442,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
442
442
|
}
|
|
443
443
|
this.controller.close();
|
|
444
444
|
};
|
|
445
|
-
|
|
445
|
+
UnifiedBoxManager.prototype.handleShowAll = function () {
|
|
446
446
|
var _a, _b, _c, _d;
|
|
447
447
|
return __awaiter(this, void 0, void 0, function () {
|
|
448
448
|
var hasOptions;
|
|
@@ -469,7 +469,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
469
469
|
});
|
|
470
470
|
});
|
|
471
471
|
};
|
|
472
|
-
|
|
472
|
+
UnifiedBoxManager.prototype.handleSelectionChange = function (selectedValues) {
|
|
473
473
|
var _a, _b;
|
|
474
474
|
this.cancelDebounceTimer();
|
|
475
475
|
var result = this.config.multiple ? selectedValues : selectedValues[0] || '';
|
|
@@ -487,7 +487,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
487
487
|
this.controller.close();
|
|
488
488
|
}
|
|
489
489
|
};
|
|
490
|
-
|
|
490
|
+
UnifiedBoxManager.prototype.updateSelectBoxValue = function () {
|
|
491
491
|
var valueSpan = this.element.querySelector('.ncua-selectbox__value');
|
|
492
492
|
if (valueSpan) {
|
|
493
493
|
if (this.config.multiple) {
|
|
@@ -501,7 +501,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
501
501
|
}
|
|
502
502
|
}
|
|
503
503
|
};
|
|
504
|
-
|
|
504
|
+
UnifiedBoxManager.prototype.canToggleDropdown = function () {
|
|
505
505
|
var _a;
|
|
506
506
|
if (this.config.type === 'combobox') {
|
|
507
507
|
// ComboBox의 경우: 인풋에 텍스트가 있으면 항상 토글 가능
|
|
@@ -511,7 +511,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
511
511
|
return true; // SelectBox는 항상 토글 가능
|
|
512
512
|
};
|
|
513
513
|
// 푸터 버튼 핸들러들
|
|
514
|
-
|
|
514
|
+
UnifiedBoxManager.prototype.handleSelectAll = function () {
|
|
515
515
|
var _a, _b;
|
|
516
516
|
if (this.config.multiple) {
|
|
517
517
|
this.model.toggleSelectAll();
|
|
@@ -520,7 +520,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
520
520
|
(_b = (_a = this.config).onSelectAll) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
521
521
|
}
|
|
522
522
|
};
|
|
523
|
-
|
|
523
|
+
UnifiedBoxManager.prototype.handleComplete = function () {
|
|
524
524
|
var _a, _b, _c, _d;
|
|
525
525
|
if (this.config.multiple || this.config.type === 'combobox') {
|
|
526
526
|
var currentValues = this.model.getValue();
|
|
@@ -545,12 +545,12 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
545
545
|
this.controller.close();
|
|
546
546
|
}
|
|
547
547
|
};
|
|
548
|
-
|
|
548
|
+
UnifiedBoxManager.prototype.updateSelectAllButtonText = function () {
|
|
549
549
|
if (!this.config.multiple || !this.footerElement) return;
|
|
550
550
|
this.renderer.updateSelectAllButtonText(this.footerElement, this.model.getSelectAllButtonText());
|
|
551
551
|
};
|
|
552
552
|
// Public API
|
|
553
|
-
|
|
553
|
+
UnifiedBoxManager.prototype.getValues = function () {
|
|
554
554
|
var selectedIds = this.model.getValue();
|
|
555
555
|
var allOptions = this.getOptions();
|
|
556
556
|
// selectedIds가 배열이 아닌 경우 배열로 변환
|
|
@@ -564,10 +564,10 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
564
564
|
return opt !== undefined;
|
|
565
565
|
});
|
|
566
566
|
};
|
|
567
|
-
|
|
567
|
+
UnifiedBoxManager.prototype.getOptions = function () {
|
|
568
568
|
return this.config.options || [];
|
|
569
569
|
};
|
|
570
|
-
|
|
570
|
+
UnifiedBoxManager.prototype.setValues = function (value) {
|
|
571
571
|
// 옵션 객체 배열에서 id 배열로 변환
|
|
572
572
|
var ids = value.map(function (option) {
|
|
573
573
|
return option.id;
|
|
@@ -589,13 +589,13 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
589
589
|
}
|
|
590
590
|
}
|
|
591
591
|
};
|
|
592
|
-
|
|
592
|
+
UnifiedBoxManager.prototype.updateOptions = function (newOptions) {
|
|
593
593
|
// config.options도 업데이트 (getOptions()가 이를 반환하므로)
|
|
594
594
|
this.config.options = __spreadArray([], newOptions, true);
|
|
595
595
|
this.model.updateOptions(newOptions);
|
|
596
596
|
this.controller.updateOptions(newOptions);
|
|
597
597
|
};
|
|
598
|
-
|
|
598
|
+
UnifiedBoxManager.prototype.setDisabled = function (disabled) {
|
|
599
599
|
var _a, _b;
|
|
600
600
|
this.config.disabled = disabled;
|
|
601
601
|
var baseClass = this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
|
|
@@ -614,13 +614,13 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
614
614
|
this.triggerElement.setAttribute('tabindex', disabled ? '-1' : '0');
|
|
615
615
|
}
|
|
616
616
|
};
|
|
617
|
-
|
|
617
|
+
UnifiedBoxManager.prototype.open = function () {
|
|
618
618
|
this.controller.open();
|
|
619
619
|
};
|
|
620
|
-
|
|
620
|
+
UnifiedBoxManager.prototype.close = function () {
|
|
621
621
|
this.controller.close();
|
|
622
622
|
};
|
|
623
|
-
|
|
623
|
+
UnifiedBoxManager.prototype.focus = function () {
|
|
624
624
|
var _a, _b;
|
|
625
625
|
if (this.config.type === 'combobox') {
|
|
626
626
|
(_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -628,14 +628,14 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
628
628
|
(_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.focus();
|
|
629
629
|
}
|
|
630
630
|
};
|
|
631
|
-
|
|
631
|
+
UnifiedBoxManager.prototype.destroy = function () {
|
|
632
632
|
this.cancelDebounceTimer();
|
|
633
633
|
this.controller.destroy();
|
|
634
634
|
this.renderer.clearCache();
|
|
635
635
|
this.inputField = undefined;
|
|
636
636
|
};
|
|
637
637
|
// Multiple 모드 전용 메서드들
|
|
638
|
-
|
|
638
|
+
UnifiedBoxManager.prototype.selectAll = function () {
|
|
639
639
|
var _a;
|
|
640
640
|
if (this.config.multiple) {
|
|
641
641
|
var allOptionIds = ((_a = this.config.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
|
|
@@ -644,15 +644,15 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
644
644
|
this.model.setValue(allOptionIds);
|
|
645
645
|
}
|
|
646
646
|
};
|
|
647
|
-
|
|
647
|
+
UnifiedBoxManager.prototype.deselectAll = function () {
|
|
648
648
|
if (this.config.multiple) {
|
|
649
649
|
this.model.setValue([]);
|
|
650
650
|
}
|
|
651
651
|
};
|
|
652
|
-
|
|
652
|
+
UnifiedBoxManager.prototype.isMultiple = function () {
|
|
653
653
|
return this.config.multiple || false;
|
|
654
654
|
};
|
|
655
|
-
|
|
655
|
+
UnifiedBoxManager.prototype.toggleSelectAll = function () {
|
|
656
656
|
var _a;
|
|
657
657
|
if (!this.config.multiple) return;
|
|
658
658
|
var currentValues = this.model.getValue();
|
|
@@ -668,7 +668,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
668
668
|
}
|
|
669
669
|
};
|
|
670
670
|
// 디버깅용
|
|
671
|
-
|
|
671
|
+
UnifiedBoxManager.prototype.getDebugInfo = function () {
|
|
672
672
|
return {
|
|
673
673
|
config: this.config,
|
|
674
674
|
modelState: this.model.getDebugInfo(),
|
|
@@ -679,7 +679,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
679
679
|
* 드롭다운을 스크롤의 바닥으로 이동
|
|
680
680
|
* 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
|
|
681
681
|
*/
|
|
682
|
-
|
|
682
|
+
UnifiedBoxManager.prototype.scrollToBottom = function () {
|
|
683
683
|
if (!this.dropdownElement) return;
|
|
684
684
|
var optionsList = this.dropdownElement.querySelector('.ncua-select-dropdown__options');
|
|
685
685
|
if (!optionsList) return;
|
|
@@ -690,7 +690,7 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
690
690
|
* 전체 선택 버튼의 텍스트를 외부에서 변경
|
|
691
691
|
* @param text 버튼에 표시할 텍스트
|
|
692
692
|
*/
|
|
693
|
-
|
|
693
|
+
UnifiedBoxManager.prototype.setSelectAllButtonText = function (text) {
|
|
694
694
|
if (!this.config.multiple || !this.footerElement) return;
|
|
695
695
|
this.renderer.updateSelectAllButtonText(this.footerElement, text);
|
|
696
696
|
};
|
|
@@ -698,9 +698,9 @@ var UnifiedSelectBox = /** @class */function () {
|
|
|
698
698
|
* 특정 인덱스의 옵션으로 포커스 이동
|
|
699
699
|
* @param index 포커스를 이동할 옵션의 인덱스
|
|
700
700
|
*/
|
|
701
|
-
|
|
701
|
+
UnifiedBoxManager.prototype.setFocusIndex = function (index) {
|
|
702
702
|
this.controller.setFocus(index);
|
|
703
703
|
};
|
|
704
|
-
return
|
|
704
|
+
return UnifiedBoxManager;
|
|
705
705
|
}();
|
|
706
|
-
export {
|
|
706
|
+
export { UnifiedBoxManager };
|
|
@@ -19,9 +19,6 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
19
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
20
|
import classNames from 'classnames';
|
|
21
21
|
import { forwardRef, useEffect, useRef } from 'react';
|
|
22
|
-
/**
|
|
23
|
-
* 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
|
|
24
|
-
*/
|
|
25
22
|
export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
26
23
|
var _b = _a.size,
|
|
27
24
|
size = _b === void 0 ? 'xs' : _b,
|
|
@@ -124,6 +124,9 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
124
124
|
var instance = flatpickrInstanceRef.current;
|
|
125
125
|
if (!instance) return;
|
|
126
126
|
if (!input || input.trim() === '') {
|
|
127
|
+
target.value = '';
|
|
128
|
+
instance.setDate('', false);
|
|
129
|
+
onChangeDate('');
|
|
127
130
|
return;
|
|
128
131
|
}
|
|
129
132
|
// 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
|
|
@@ -314,7 +317,8 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
314
317
|
enableTime = _b.enableTime,
|
|
315
318
|
enableSeconds = _b.enableSeconds,
|
|
316
319
|
noCalendar = _b.noCalendar,
|
|
317
|
-
|
|
320
|
+
render = _b.render,
|
|
321
|
+
inputProps = __rest(_b, ["allowInput", "dateFormat", "minDate", "maxDate", "enableTime", "enableSeconds", "noCalendar", "render"]);
|
|
318
322
|
return _jsx(CustomInput, __assign({}, inputProps, {
|
|
319
323
|
id: inputId,
|
|
320
324
|
iconSize: size,
|
|
@@ -17,8 +17,8 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
17
17
|
return t;
|
|
18
18
|
};
|
|
19
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
|
-
import { forwardRef } from 'react';
|
|
21
20
|
import classNames from 'classnames';
|
|
21
|
+
import { forwardRef } from 'react';
|
|
22
22
|
export var Dot = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
23
23
|
var _b = _a.color,
|
|
24
24
|
color = _b === void 0 ? 'success' : _b,
|
|
@@ -20,9 +20,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
20
20
|
import classNames from 'classnames';
|
|
21
21
|
import { forwardRef } from 'react';
|
|
22
22
|
import { HintText } from '../shared/hintText/HintText';
|
|
23
|
-
/**
|
|
24
|
-
* 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
|
|
25
|
-
*/
|
|
26
23
|
export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
27
24
|
var placeholder = _a.placeholder,
|
|
28
25
|
_b = _a.disabledPlaceholder,
|
|
@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
|
|
|
10
10
|
};
|
|
11
11
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
12
|
import classNames from 'classnames';
|
|
13
|
-
import {
|
|
13
|
+
import { forwardRef, useState } from 'react';
|
|
14
14
|
export var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
15
15
|
var _b = _a.size,
|
|
16
16
|
size = _b === void 0 ? 'xs' : _b,
|
|
@@ -41,7 +41,7 @@ export var HorizontalTab = function (_a) {
|
|
|
41
41
|
spaceBetween: getTabGap(type)
|
|
42
42
|
}, {
|
|
43
43
|
children: menus.map(function (menu) {
|
|
44
|
-
var isActive = 'href' in menu && menu.href ? menu.href
|
|
44
|
+
var isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
|
|
45
45
|
return _jsx(SwiperSlide, __assign({
|
|
46
46
|
className: "ncua-horizontal-tab__item"
|
|
47
47
|
}, {
|
|
@@ -41,7 +41,7 @@ export var VerticalTab = function (_a) {
|
|
|
41
41
|
className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type))
|
|
42
42
|
}, {
|
|
43
43
|
children: menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
|
|
44
|
-
var isActive = 'href' in menu && menu.href ? menu.href
|
|
44
|
+
var isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
|
|
45
45
|
return _jsx(TabButton, __assign({}, menu, {
|
|
46
46
|
isActive: isActive,
|
|
47
47
|
tabButtonType: type,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Size } from '@ncds/ui-admin/constant/size';
|
|
2
2
|
import { OptionValue } from '../../src/types';
|
|
3
|
-
import { DropdownOption } from './utils/
|
|
4
|
-
import {
|
|
3
|
+
import { DropdownOption } from './utils/unifiedBox/DropdownModel';
|
|
4
|
+
import { UnifiedBoxManagerConfig } from './utils/unifiedBox/UnifiedBoxManager';
|
|
5
5
|
export interface ComboBoxOptionType {
|
|
6
6
|
id: string | number;
|
|
7
7
|
label: string;
|
|
@@ -66,7 +66,7 @@ export declare class ComboBox {
|
|
|
66
66
|
destroy(): void;
|
|
67
67
|
clearInput(): void;
|
|
68
68
|
getDebugInfo(): {
|
|
69
|
-
config:
|
|
69
|
+
config: UnifiedBoxManagerConfig;
|
|
70
70
|
modelState: any;
|
|
71
71
|
isOpen: boolean;
|
|
72
72
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ModalSize, ModalHeaderAlign, ModalActionsLayout } from '../../../../src/components/modal/Modal';
|
|
2
2
|
import { FeaturedIconOptions } from '../../featuredIcon';
|
|
3
|
-
export type { ModalSize, ModalHeaderAlign,
|
|
3
|
+
export type { ModalSize, ModalHeaderAlign, ModalActionsAlign, ModalActionsLayout, ModalProps as ReactModalProps, ModalHeaderProps as ReactModalHeaderProps, ModalContentProps as ReactModalContentProps, ModalActionsProps as ReactModalActionsProps, } from '../../../../src/components/modal/Modal';
|
|
4
4
|
export type { FeaturedIconOptions } from '../../featuredIcon';
|
|
5
5
|
export interface ModalProps {
|
|
6
6
|
isOpen?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DOMRenderer, DropdownRenderConfig } from './DOMRenderer';
|
|
2
2
|
import { DropdownModel, DropdownState, StateChangeListener } from './DropdownModel';
|
|
3
|
-
export interface
|
|
3
|
+
export interface UnifiedBoxControllerConfig {
|
|
4
4
|
triggerElement: HTMLElement;
|
|
5
5
|
dropdownElement: HTMLElement;
|
|
6
6
|
model: DropdownModel;
|
|
@@ -19,7 +19,7 @@ export interface SelectBoxControllerConfig {
|
|
|
19
19
|
* SelectBox 통합 컨트롤러
|
|
20
20
|
* 이벤트 처리, UI 상태 제어, 사용자 인터랙션 담당
|
|
21
21
|
*/
|
|
22
|
-
export declare class
|
|
22
|
+
export declare class UnifiedBoxController implements StateChangeListener {
|
|
23
23
|
private config;
|
|
24
24
|
private isOpen;
|
|
25
25
|
private focusedIndex;
|
|
@@ -34,7 +34,7 @@ export declare class SelectBoxController implements StateChangeListener {
|
|
|
34
34
|
private lastFilteredOptionsHash;
|
|
35
35
|
private scrollBottomHandler?;
|
|
36
36
|
private lastScrollBottomTime;
|
|
37
|
-
constructor(config:
|
|
37
|
+
constructor(config: UnifiedBoxControllerConfig);
|
|
38
38
|
/**
|
|
39
39
|
* 상태 변경 리스너 (Observer Pattern)
|
|
40
40
|
*/
|
|
@@ -133,7 +133,7 @@ export declare class SelectBoxController implements StateChangeListener {
|
|
|
133
133
|
onOptionSelect?: (index: number) => void;
|
|
134
134
|
onKeyboardNavigation?: (isKeyboard: boolean) => void;
|
|
135
135
|
canToggle?: () => boolean;
|
|
136
|
-
}):
|
|
136
|
+
}): UnifiedBoxController;
|
|
137
137
|
/**
|
|
138
138
|
* 드롭다운 위치 조정 (화면 크기에 따라 up/down 방향 결정)
|
|
139
139
|
* 단일 선택 모드에서만 적용
|
|
@@ -168,4 +168,4 @@ export declare class SelectBoxController implements StateChangeListener {
|
|
|
168
168
|
*/
|
|
169
169
|
destroy(): void;
|
|
170
170
|
}
|
|
171
|
-
//# sourceMappingURL=
|
|
171
|
+
//# sourceMappingURL=UnifiedBoxController.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OptionValue } from '../../../../src/types';
|
|
2
2
|
import { DropdownOption } from './DropdownModel';
|
|
3
|
-
export interface
|
|
3
|
+
export interface UnifiedBoxManagerConfig {
|
|
4
4
|
options?: DropdownOption[];
|
|
5
5
|
placeholder?: string;
|
|
6
6
|
value?: OptionValue;
|
|
@@ -22,10 +22,10 @@ export interface UnifiedSelectBoxConfig {
|
|
|
22
22
|
type?: 'selectbox' | 'combobox';
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
|
-
* 통합된
|
|
25
|
+
* 통합된 UnifiedBox 클래스
|
|
26
26
|
* SelectBox와 ComboBox의 기능을 모두 포함
|
|
27
27
|
*/
|
|
28
|
-
export declare class
|
|
28
|
+
export declare class UnifiedBoxManager {
|
|
29
29
|
private element;
|
|
30
30
|
private config;
|
|
31
31
|
private model;
|
|
@@ -40,7 +40,7 @@ export declare class UnifiedSelectBox {
|
|
|
40
40
|
private triggerElement?;
|
|
41
41
|
private footerElement?;
|
|
42
42
|
private arrowElement?;
|
|
43
|
-
constructor(element: HTMLElement, config?:
|
|
43
|
+
constructor(element: HTMLElement, config?: UnifiedBoxManagerConfig);
|
|
44
44
|
private initialize;
|
|
45
45
|
private setupElementClasses;
|
|
46
46
|
private createUI;
|
|
@@ -76,7 +76,7 @@ export declare class UnifiedSelectBox {
|
|
|
76
76
|
isMultiple(): boolean;
|
|
77
77
|
toggleSelectAll(): void;
|
|
78
78
|
getDebugInfo(): {
|
|
79
|
-
config:
|
|
79
|
+
config: UnifiedBoxManagerConfig;
|
|
80
80
|
modelState: any;
|
|
81
81
|
isOpen: boolean;
|
|
82
82
|
};
|
|
@@ -96,4 +96,4 @@ export declare class UnifiedSelectBox {
|
|
|
96
96
|
*/
|
|
97
97
|
setFocusIndex(index: number): void;
|
|
98
98
|
}
|
|
99
|
-
//# sourceMappingURL=
|
|
99
|
+
//# sourceMappingURL=UnifiedBoxManager.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { type BadgeProps } from '.';
|
|
1
2
|
import type { ColorTone } from '../../../constant/color';
|
|
2
3
|
import type { Size } from '../../../constant/size';
|
|
3
4
|
import type { SideSlotType } from '../../types/side-slot';
|
|
4
|
-
import { type BadgeProps } from '.';
|
|
5
5
|
export type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
|
|
6
6
|
export type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
|
|
7
7
|
export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
|
|
@@ -2,7 +2,7 @@ import { type ComponentProps, type ReactNode } from 'react';
|
|
|
2
2
|
import type { Size } from '../../../constant/size';
|
|
3
3
|
import type { SideSlotType } from '../../types/side-slot';
|
|
4
4
|
import { type DotProps } from '../dot';
|
|
5
|
-
type
|
|
5
|
+
export type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
|
|
6
6
|
label: ReactNode;
|
|
7
7
|
className?: string;
|
|
8
8
|
hierarchy?: ButtonTheme;
|
|
@@ -14,21 +14,21 @@ type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentPr
|
|
|
14
14
|
children?: ReactNode;
|
|
15
15
|
underline?: boolean;
|
|
16
16
|
};
|
|
17
|
-
type ButtonElementProps = CommonButtonProps<Exclude<keyof HTMLElementTagNameMap, 'a'>> & {
|
|
18
|
-
as?: Exclude<keyof HTMLElementTagNameMap, 'a'>;
|
|
19
|
-
href?: never;
|
|
20
|
-
};
|
|
21
|
-
type AnchorElementProps = CommonButtonProps<'a'> & {
|
|
22
|
-
as: 'a';
|
|
23
|
-
href: string;
|
|
24
|
-
target?: HTMLAnchorElement['target'];
|
|
25
|
-
};
|
|
26
|
-
export type ButtonProps = ButtonElementProps | AnchorElementProps;
|
|
27
17
|
export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
|
|
28
18
|
export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
|
|
29
19
|
export declare const svgSize: Record<ButtonSize, number>;
|
|
30
20
|
export declare const iconOnlySvgSize: Record<ButtonSize, number>;
|
|
31
21
|
export declare const dotSize: Record<ButtonSize, DotProps['size']>;
|
|
32
|
-
export declare const Button: import("react").ForwardRefExoticComponent<
|
|
33
|
-
|
|
22
|
+
export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
23
|
+
label: ReactNode;
|
|
24
|
+
className?: string | undefined;
|
|
25
|
+
hierarchy?: ButtonTheme | undefined;
|
|
26
|
+
disabled?: boolean | undefined;
|
|
27
|
+
leadingIcon?: SideSlotType | undefined;
|
|
28
|
+
trailingIcon?: SideSlotType | undefined;
|
|
29
|
+
onlyIcon?: boolean | undefined;
|
|
30
|
+
size?: ButtonSize | undefined;
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
underline?: boolean | undefined;
|
|
33
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
34
34
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { CheckboxInputProps } from './CheckboxInput';
|
|
3
3
|
export interface CheckboxProps extends Omit<CheckboxInputProps, 'type'> {
|
|
4
4
|
text?: ReactNode;
|
|
5
5
|
supportText?: string;
|
|
6
|
-
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
7
6
|
}
|
|
8
7
|
export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
9
8
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -6,8 +6,5 @@ export interface CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>,
|
|
|
6
6
|
destructive?: boolean;
|
|
7
7
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
8
8
|
}
|
|
9
|
-
/**
|
|
10
|
-
* 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
|
|
11
|
-
*/
|
|
12
9
|
export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
13
10
|
//# sourceMappingURL=CheckboxInput.d.ts.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { Size } from '@ncds/ui/constant/size';
|
|
2
|
-
import { type ComponentPropsWithRef,
|
|
2
|
+
import { type ComponentPropsWithRef, ReactNode } from 'react';
|
|
3
3
|
import type { UseFormRegisterReturn } from 'react-hook-form';
|
|
4
4
|
import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
|
|
5
5
|
export declare const defaultMaxHeight = 275;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
export interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
|
|
7
|
+
children?: ReactNode;
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
hintText?: string;
|
|
10
10
|
destructive?: boolean;
|
|
@@ -24,5 +24,4 @@ export interface ComboBoxProps extends PropsWithChildren<BaseComboBoxProps> {
|
|
|
24
24
|
onEdit?: () => void;
|
|
25
25
|
}
|
|
26
26
|
export declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
27
|
-
export {};
|
|
28
27
|
//# sourceMappingURL=ComboBox.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'react';
|
|
2
|
-
import { Size } from '../../../constant/size';
|
|
3
2
|
import { ColorTone } from '../../../constant/color';
|
|
3
|
+
import { Size } from '../../../constant/size';
|
|
4
4
|
export type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
|
|
5
5
|
export type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
|
|
6
6
|
export interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
|