@ncds/ui-admin 1.6.3 → 1.6.4-alpha.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.
- package/mcp/bin/server.d.ts +1 -0
- package/mcp/bin/server.js +62 -0
- package/mcp/bin/server.mjs +14 -0
- package/mcp/bin/tools/getComponentHtml.d.ts +3 -0
- package/mcp/bin/tools/getComponentHtml.js +30 -0
- package/mcp/bin/tools/getComponentProps.d.ts +3 -0
- package/mcp/bin/tools/getComponentProps.js +16 -0
- package/mcp/bin/tools/listComponents.d.ts +3 -0
- package/mcp/bin/tools/listComponents.js +15 -0
- package/mcp/bin/tools/searchComponent.d.ts +3 -0
- package/mcp/bin/tools/searchComponent.js +20 -0
- package/mcp/bin/tools/validateHtml.d.ts +10 -0
- package/mcp/bin/tools/validateHtml.js +142 -0
- package/mcp/bin/types.d.ts +28 -0
- package/mcp/bin/types.js +5 -0
- package/mcp/bin/utils/dataLoader.d.ts +11 -0
- package/mcp/bin/utils/dataLoader.js +68 -0
- package/mcp/bin/utils/logger.d.ts +18 -0
- package/mcp/bin/utils/logger.js +27 -0
- package/mcp/bin/utils/response.d.ts +23 -0
- package/mcp/bin/utils/response.js +31 -0
- package/mcp/bin/version.d.ts +1 -0
- package/mcp/bin/version.js +4 -0
- package/mcp/data/.gitkeep +0 -0
- package/mcp/data/_meta.json +7 -0
- package/mcp/data/badge-group.json +73 -0
- package/mcp/data/badge.json +86 -0
- package/mcp/data/bread-crumb.json +22 -0
- package/mcp/data/breadcrumb.json +31 -0
- package/mcp/data/button-group.json +65 -0
- package/mcp/data/button.json +114 -0
- package/mcp/data/carousel-arrow.json +59 -0
- package/mcp/data/carousel-number-group.json +57 -0
- package/mcp/data/carousel.json +22 -0
- package/mcp/data/checkbox.json +31 -0
- package/mcp/data/combobox.json +114 -0
- package/mcp/data/date-picker.json +77 -0
- package/mcp/data/divider.json +56 -0
- package/mcp/data/dot.json +55 -0
- package/mcp/data/dropdown.json +81 -0
- package/mcp/data/empty-state.json +34 -0
- package/mcp/data/featured-icon.json +83 -0
- package/mcp/data/file-input.json +76 -0
- package/mcp/data/horizontal-tab.json +71 -0
- package/mcp/data/image-file-input.json +97 -0
- package/mcp/data/input.json +104 -0
- package/mcp/data/modal.json +85 -0
- package/mcp/data/notification.json +116 -0
- package/mcp/data/number-input.json +128 -0
- package/mcp/data/pagination.json +65 -0
- package/mcp/data/password-input.json +47 -0
- package/mcp/data/progress-bar.json +51 -0
- package/mcp/data/progress-circle.json +54 -0
- package/mcp/data/radio.json +31 -0
- package/mcp/data/range-date-picker-with-buttons.json +64 -0
- package/mcp/data/range-date-picker.json +55 -0
- package/mcp/data/select-dropdown.json +32 -0
- package/mcp/data/select.json +64 -0
- package/mcp/data/selectbox.json +129 -0
- package/mcp/data/slider.json +57 -0
- package/mcp/data/spinner.json +54 -0
- package/mcp/data/switch.json +71 -0
- package/mcp/data/tab.json +122 -0
- package/mcp/data/tag.json +66 -0
- package/mcp/data/textarea.json +88 -0
- package/mcp/data/toggle.json +59 -0
- package/mcp/data/tooltip.json +123 -0
- package/mcp/data/vertical-tab.json +64 -0
- package/mcp/templates/.mcp.json.example +8 -0
- package/mcp/templates/README.md +31 -0
- package/package.json +24 -3
- package/dist/cjs/assets/scripts/comboBox.js +0 -280
- package/dist/cjs/assets/scripts/datePicker.js +0 -706
- package/dist/cjs/assets/scripts/featuredIcon.js +0 -95
- package/dist/cjs/assets/scripts/fileInput/FileInput.js +0 -183
- package/dist/cjs/assets/scripts/fileInput/FileInputModel.js +0 -246
- package/dist/cjs/assets/scripts/fileInput/FileInputView.js +0 -455
- package/dist/cjs/assets/scripts/fileInput/const/classNames.js +0 -35
- package/dist/cjs/assets/scripts/fileInput/const/index.js +0 -27
- package/dist/cjs/assets/scripts/fileInput/const/types.js +0 -13
- package/dist/cjs/assets/scripts/fileInput/index.js +0 -44
- package/dist/cjs/assets/scripts/imageFileInput/ImageFileInput.js +0 -187
- package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -255
- package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputView.js +0 -354
- package/dist/cjs/assets/scripts/imageFileInput/const/classNames.js +0 -41
- package/dist/cjs/assets/scripts/imageFileInput/const/index.js +0 -27
- package/dist/cjs/assets/scripts/imageFileInput/const/types.js +0 -13
- package/dist/cjs/assets/scripts/imageFileInput/index.js +0 -44
- package/dist/cjs/assets/scripts/index.js +0 -30
- package/dist/cjs/assets/scripts/modal/Modal.js +0 -116
- package/dist/cjs/assets/scripts/modal/ModalActions.js +0 -128
- package/dist/cjs/assets/scripts/modal/ModalContent.js +0 -46
- package/dist/cjs/assets/scripts/modal/ModalHeader.js +0 -115
- package/dist/cjs/assets/scripts/modal/const/classNames.js +0 -41
- package/dist/cjs/assets/scripts/modal/const/index.js +0 -27
- package/dist/cjs/assets/scripts/modal/const/types.js +0 -5
- package/dist/cjs/assets/scripts/modal/index.js +0 -61
- package/dist/cjs/assets/scripts/modal/utils/contentUtils.js +0 -35
- package/dist/cjs/assets/scripts/notification/FloatingNotification.js +0 -180
- package/dist/cjs/assets/scripts/notification/FullWidthNotification.js +0 -120
- package/dist/cjs/assets/scripts/notification/MessageNotification.js +0 -146
- package/dist/cjs/assets/scripts/notification/Notification.js +0 -116
- package/dist/cjs/assets/scripts/notification/const/classNames.js +0 -50
- package/dist/cjs/assets/scripts/notification/const/icons.js +0 -45
- package/dist/cjs/assets/scripts/notification/const/index.js +0 -87
- package/dist/cjs/assets/scripts/notification/const/sizes.js +0 -54
- package/dist/cjs/assets/scripts/notification/const/types.js +0 -14
- package/dist/cjs/assets/scripts/notification/index.js +0 -92
- package/dist/cjs/assets/scripts/notification/utils.js +0 -92
- package/dist/cjs/assets/scripts/progress-bar/ProgressBar.js +0 -272
- package/dist/cjs/assets/scripts/progress-bar/index.js +0 -12
- package/dist/cjs/assets/scripts/selectBox.js +0 -319
- package/dist/cjs/assets/scripts/shared/ButtonCloseX.js +0 -46
- package/dist/cjs/assets/scripts/tab.js +0 -40
- package/dist/cjs/assets/scripts/tag/Tag.js +0 -268
- package/dist/cjs/assets/scripts/tag/const/classNames.js +0 -24
- package/dist/cjs/assets/scripts/tag/const/index.js +0 -38
- package/dist/cjs/assets/scripts/tag/const/sizes.js +0 -13
- package/dist/cjs/assets/scripts/tag/const/types.js +0 -5
- package/dist/cjs/assets/scripts/tag/index.js +0 -44
- package/dist/cjs/assets/scripts/tooltip/Tooltip.js +0 -380
- package/dist/cjs/assets/scripts/tooltip/TooltipLayerManager.js +0 -84
- package/dist/cjs/assets/scripts/tooltip/const/classNames.js +0 -29
- package/dist/cjs/assets/scripts/tooltip/const/constants.js +0 -56
- package/dist/cjs/assets/scripts/tooltip/const/icons.js +0 -15
- package/dist/cjs/assets/scripts/tooltip/const/index.js +0 -123
- package/dist/cjs/assets/scripts/tooltip/const/templates.js +0 -49
- package/dist/cjs/assets/scripts/tooltip/const/types.js +0 -5
- package/dist/cjs/assets/scripts/tooltip/index.js +0 -57
- package/dist/cjs/assets/scripts/tooltip/utils.js +0 -41
- package/dist/cjs/assets/scripts/utils/unifiedBox/DOMRenderer.js +0 -384
- package/dist/cjs/assets/scripts/utils/unifiedBox/DropdownModel.js +0 -368
- package/dist/cjs/assets/scripts/utils/unifiedBox/UnifiedBoxController.js +0 -681
- package/dist/cjs/assets/scripts/utils/unifiedBox/UnifiedBoxManager.js +0 -711
- package/dist/esm/assets/scripts/comboBox.js +0 -275
- package/dist/esm/assets/scripts/datePicker.js +0 -699
- package/dist/esm/assets/scripts/featuredIcon.js +0 -90
- package/dist/esm/assets/scripts/fileInput/FileInput.js +0 -178
- package/dist/esm/assets/scripts/fileInput/FileInputModel.js +0 -241
- package/dist/esm/assets/scripts/fileInput/FileInputView.js +0 -450
- package/dist/esm/assets/scripts/fileInput/const/classNames.js +0 -25
- package/dist/esm/assets/scripts/fileInput/const/index.js +0 -2
- package/dist/esm/assets/scripts/fileInput/const/types.js +0 -7
- package/dist/esm/assets/scripts/fileInput/index.js +0 -9
- package/dist/esm/assets/scripts/imageFileInput/ImageFileInput.js +0 -182
- package/dist/esm/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -250
- package/dist/esm/assets/scripts/imageFileInput/ImageFileInputView.js +0 -349
- package/dist/esm/assets/scripts/imageFileInput/const/classNames.js +0 -30
- package/dist/esm/assets/scripts/imageFileInput/const/index.js +0 -2
- package/dist/esm/assets/scripts/imageFileInput/const/types.js +0 -7
- package/dist/esm/assets/scripts/imageFileInput/index.js +0 -9
- package/dist/esm/assets/scripts/index.js +0 -28
- package/dist/esm/assets/scripts/modal/Modal.js +0 -110
- package/dist/esm/assets/scripts/modal/ModalActions.js +0 -123
- package/dist/esm/assets/scripts/modal/ModalContent.js +0 -41
- package/dist/esm/assets/scripts/modal/ModalHeader.js +0 -110
- package/dist/esm/assets/scripts/modal/const/classNames.js +0 -31
- package/dist/esm/assets/scripts/modal/const/index.js +0 -2
- package/dist/esm/assets/scripts/modal/const/types.js +0 -1
- package/dist/esm/assets/scripts/modal/index.js +0 -15
- package/dist/esm/assets/scripts/modal/utils/contentUtils.js +0 -28
- package/dist/esm/assets/scripts/notification/FloatingNotification.js +0 -176
- package/dist/esm/assets/scripts/notification/FullWidthNotification.js +0 -115
- package/dist/esm/assets/scripts/notification/MessageNotification.js +0 -141
- package/dist/esm/assets/scripts/notification/Notification.js +0 -111
- package/dist/esm/assets/scripts/notification/const/classNames.js +0 -44
- package/dist/esm/assets/scripts/notification/const/icons.js +0 -39
- package/dist/esm/assets/scripts/notification/const/index.js +0 -4
- package/dist/esm/assets/scripts/notification/const/sizes.js +0 -48
- package/dist/esm/assets/scripts/notification/const/types.js +0 -8
- package/dist/esm/assets/scripts/notification/index.js +0 -11
- package/dist/esm/assets/scripts/notification/utils.js +0 -79
- package/dist/esm/assets/scripts/progress-bar/ProgressBar.js +0 -267
- package/dist/esm/assets/scripts/progress-bar/index.js +0 -1
- package/dist/esm/assets/scripts/selectBox.js +0 -314
- package/dist/esm/assets/scripts/shared/ButtonCloseX.js +0 -38
- package/dist/esm/assets/scripts/tab.js +0 -35
- package/dist/esm/assets/scripts/tag/Tag.js +0 -263
- package/dist/esm/assets/scripts/tag/const/classNames.js +0 -16
- package/dist/esm/assets/scripts/tag/const/index.js +0 -3
- package/dist/esm/assets/scripts/tag/const/sizes.js +0 -7
- package/dist/esm/assets/scripts/tag/const/types.js +0 -1
- package/dist/esm/assets/scripts/tag/index.js +0 -9
- package/dist/esm/assets/scripts/tooltip/Tooltip.js +0 -375
- package/dist/esm/assets/scripts/tooltip/TooltipLayerManager.js +0 -79
- package/dist/esm/assets/scripts/tooltip/const/classNames.js +0 -23
- package/dist/esm/assets/scripts/tooltip/const/constants.js +0 -50
- package/dist/esm/assets/scripts/tooltip/const/icons.js +0 -9
- package/dist/esm/assets/scripts/tooltip/const/index.js +0 -4
- package/dist/esm/assets/scripts/tooltip/const/templates.js +0 -42
- package/dist/esm/assets/scripts/tooltip/const/types.js +0 -1
- package/dist/esm/assets/scripts/tooltip/index.js +0 -10
- package/dist/esm/assets/scripts/tooltip/utils.js +0 -35
- package/dist/esm/assets/scripts/utils/unifiedBox/DOMRenderer.js +0 -379
- package/dist/esm/assets/scripts/utils/unifiedBox/DropdownModel.js +0 -363
- package/dist/esm/assets/scripts/utils/unifiedBox/UnifiedBoxController.js +0 -676
- package/dist/esm/assets/scripts/utils/unifiedBox/UnifiedBoxManager.js +0 -706
- package/dist/types/assets/scripts/comboBox.d.ts +0 -91
- package/dist/types/assets/scripts/datePicker.d.ts +0 -87
- package/dist/types/assets/scripts/featuredIcon.d.ts +0 -23
- package/dist/types/assets/scripts/fileInput/FileInput.d.ts +0 -67
- package/dist/types/assets/scripts/fileInput/FileInputModel.d.ts +0 -70
- package/dist/types/assets/scripts/fileInput/FileInputView.d.ts +0 -77
- package/dist/types/assets/scripts/fileInput/const/classNames.d.ts +0 -17
- package/dist/types/assets/scripts/fileInput/const/index.d.ts +0 -3
- package/dist/types/assets/scripts/fileInput/const/types.d.ts +0 -132
- package/dist/types/assets/scripts/fileInput/index.d.ts +0 -4
- package/dist/types/assets/scripts/imageFileInput/ImageFileInput.d.ts +0 -64
- package/dist/types/assets/scripts/imageFileInput/ImageFileInputModel.d.ts +0 -74
- package/dist/types/assets/scripts/imageFileInput/ImageFileInputView.d.ts +0 -80
- package/dist/types/assets/scripts/imageFileInput/const/classNames.d.ts +0 -20
- package/dist/types/assets/scripts/imageFileInput/const/index.d.ts +0 -3
- package/dist/types/assets/scripts/imageFileInput/const/types.d.ts +0 -126
- package/dist/types/assets/scripts/imageFileInput/index.d.ts +0 -4
- package/dist/types/assets/scripts/index.d.ts +0 -33
- package/dist/types/assets/scripts/modal/Modal.d.ts +0 -28
- package/dist/types/assets/scripts/modal/ModalActions.d.ts +0 -19
- package/dist/types/assets/scripts/modal/ModalContent.d.ts +0 -14
- package/dist/types/assets/scripts/modal/ModalHeader.d.ts +0 -16
- package/dist/types/assets/scripts/modal/const/classNames.d.ts +0 -23
- package/dist/types/assets/scripts/modal/const/index.d.ts +0 -3
- package/dist/types/assets/scripts/modal/const/types.d.ts +0 -62
- package/dist/types/assets/scripts/modal/index.d.ts +0 -8
- package/dist/types/assets/scripts/modal/utils/contentUtils.d.ts +0 -11
- package/dist/types/assets/scripts/notification/FloatingNotification.d.ts +0 -25
- package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts +0 -22
- package/dist/types/assets/scripts/notification/MessageNotification.d.ts +0 -23
- package/dist/types/assets/scripts/notification/Notification.d.ts +0 -22
- package/dist/types/assets/scripts/notification/const/classNames.d.ts +0 -44
- package/dist/types/assets/scripts/notification/const/icons.d.ts +0 -26
- package/dist/types/assets/scripts/notification/const/index.d.ts +0 -6
- package/dist/types/assets/scripts/notification/const/sizes.d.ts +0 -33
- package/dist/types/assets/scripts/notification/const/types.d.ts +0 -20
- package/dist/types/assets/scripts/notification/index.d.ts +0 -8
- package/dist/types/assets/scripts/notification/utils.d.ts +0 -9
- package/dist/types/assets/scripts/progress-bar/ProgressBar.d.ts +0 -68
- package/dist/types/assets/scripts/progress-bar/index.d.ts +0 -2
- package/dist/types/assets/scripts/selectBox.d.ts +0 -77
- package/dist/types/assets/scripts/shared/ButtonCloseX.d.ts +0 -6
- package/dist/types/assets/scripts/tab.d.ts +0 -8
- package/dist/types/assets/scripts/tag/Tag.d.ts +0 -28
- package/dist/types/assets/scripts/tag/const/classNames.d.ts +0 -12
- package/dist/types/assets/scripts/tag/const/index.d.ts +0 -4
- package/dist/types/assets/scripts/tag/const/sizes.d.ts +0 -8
- package/dist/types/assets/scripts/tag/const/types.d.ts +0 -34
- package/dist/types/assets/scripts/tag/index.d.ts +0 -4
- package/dist/types/assets/scripts/tooltip/Tooltip.d.ts +0 -55
- package/dist/types/assets/scripts/tooltip/TooltipLayerManager.d.ts +0 -22
- package/dist/types/assets/scripts/tooltip/const/classNames.d.ts +0 -18
- package/dist/types/assets/scripts/tooltip/const/constants.d.ts +0 -34
- package/dist/types/assets/scripts/tooltip/const/icons.d.ts +0 -5
- package/dist/types/assets/scripts/tooltip/const/index.d.ts +0 -6
- package/dist/types/assets/scripts/tooltip/const/templates.d.ts +0 -17
- package/dist/types/assets/scripts/tooltip/const/types.d.ts +0 -15
- package/dist/types/assets/scripts/tooltip/index.d.ts +0 -7
- package/dist/types/assets/scripts/tooltip/utils.d.ts +0 -3
- package/dist/types/assets/scripts/utils/unifiedBox/DOMRenderer.d.ts +0 -108
- package/dist/types/assets/scripts/utils/unifiedBox/DropdownModel.d.ts +0 -158
- package/dist/types/assets/scripts/utils/unifiedBox/UnifiedBoxController.d.ts +0 -171
- package/dist/types/assets/scripts/utils/unifiedBox/UnifiedBoxManager.d.ts +0 -99
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SVG_ICONS = void 0;
|
|
7
|
-
// SVG 아이콘들
|
|
8
|
-
var SVG_ICONS = exports.SVG_ICONS = {
|
|
9
|
-
'help-circle-stroke': function (size) {
|
|
10
|
-
return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path>\n </svg>");
|
|
11
|
-
},
|
|
12
|
-
'help-circle-fill': function (size) {
|
|
13
|
-
return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\">\n <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m-1.093 7.271a2 2 0 0 1 3.013 1.727V10c0 .47-.365.958-1.055 1.418a6 6 0 0 1-1.262.634 1 1 0 0 0 .633 1.897l.169-.061a8.05 8.05 0 0 0 1.57-.806c.81-.54 1.944-1.55 1.945-3.081a4 4 0 0 0-7.773-1.333 1 1 0 0 0 1.886.664 2 2 0 0 1 .874-1.06M12 16a1 1 0 1 0 0 2h.01a1 1 0 0 0 0-2z\" clip-rule=\"evenodd\"></path>\n </svg>");
|
|
14
|
-
}
|
|
15
|
-
};
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "CLASS_NAMES", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _classNames.CLASS_NAMES;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "CSS_TEMPLATES", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _templates.CSS_TEMPLATES;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "DEFAULT_TOOLTIP_HEIGHT", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () {
|
|
21
|
-
return _constants.DEFAULT_TOOLTIP_HEIGHT;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(exports, "DEFAULT_TOOLTIP_WIDTH", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function () {
|
|
27
|
-
return _constants.DEFAULT_TOOLTIP_WIDTH;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
Object.defineProperty(exports, "EVENT_OPTIONS", {
|
|
31
|
-
enumerable: true,
|
|
32
|
-
get: function () {
|
|
33
|
-
return _constants.EVENT_OPTIONS;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
Object.defineProperty(exports, "FALLBACK_ICON_SVG", {
|
|
37
|
-
enumerable: true,
|
|
38
|
-
get: function () {
|
|
39
|
-
return _templates.FALLBACK_ICON_SVG;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
Object.defineProperty(exports, "HTML_TEMPLATES", {
|
|
43
|
-
enumerable: true,
|
|
44
|
-
get: function () {
|
|
45
|
-
return _templates.HTML_TEMPLATES;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
Object.defineProperty(exports, "ICON_SIZES", {
|
|
49
|
-
enumerable: true,
|
|
50
|
-
get: function () {
|
|
51
|
-
return _constants.ICON_SIZES;
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
Object.defineProperty(exports, "MARGIN", {
|
|
55
|
-
enumerable: true,
|
|
56
|
-
get: function () {
|
|
57
|
-
return _constants.MARGIN;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
Object.defineProperty(exports, "OFFSCREEN_POSITION", {
|
|
61
|
-
enumerable: true,
|
|
62
|
-
get: function () {
|
|
63
|
-
return _constants.OFFSCREEN_POSITION;
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
Object.defineProperty(exports, "OPACITY", {
|
|
67
|
-
enumerable: true,
|
|
68
|
-
get: function () {
|
|
69
|
-
return _constants.OPACITY;
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
Object.defineProperty(exports, "POSITION", {
|
|
73
|
-
enumerable: true,
|
|
74
|
-
get: function () {
|
|
75
|
-
return _constants.POSITION;
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
Object.defineProperty(exports, "POSITION_PRIORITY", {
|
|
79
|
-
enumerable: true,
|
|
80
|
-
get: function () {
|
|
81
|
-
return _constants.POSITION_PRIORITY;
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
Object.defineProperty(exports, "SVG_ICONS", {
|
|
85
|
-
enumerable: true,
|
|
86
|
-
get: function () {
|
|
87
|
-
return _icons.SVG_ICONS;
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
Object.defineProperty(exports, "TOOLTIP_DEFAULT_VALUE", {
|
|
91
|
-
enumerable: true,
|
|
92
|
-
get: function () {
|
|
93
|
-
return _constants.TOOLTIP_DEFAULT_VALUE;
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
Object.defineProperty(exports, "TOOLTIP_OFFSET", {
|
|
97
|
-
enumerable: true,
|
|
98
|
-
get: function () {
|
|
99
|
-
return _constants.TOOLTIP_OFFSET;
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
Object.defineProperty(exports, "TRANSITION_DURATION", {
|
|
103
|
-
enumerable: true,
|
|
104
|
-
get: function () {
|
|
105
|
-
return _constants.TRANSITION_DURATION;
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
Object.defineProperty(exports, "VIEWPORT_MARGIN", {
|
|
109
|
-
enumerable: true,
|
|
110
|
-
get: function () {
|
|
111
|
-
return _constants.VIEWPORT_MARGIN;
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
Object.defineProperty(exports, "Z_INDEX", {
|
|
115
|
-
enumerable: true,
|
|
116
|
-
get: function () {
|
|
117
|
-
return _constants.Z_INDEX;
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
var _icons = require("./icons");
|
|
121
|
-
var _classNames = require("./classNames");
|
|
122
|
-
var _constants = require("./constants");
|
|
123
|
-
var _templates = require("./templates");
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.HTML_TEMPLATES = exports.FALLBACK_ICON_SVG = exports.CSS_TEMPLATES = void 0;
|
|
7
|
-
var _constants = require("./constants");
|
|
8
|
-
/**
|
|
9
|
-
* 툴팁 관련 CSS 및 HTML 템플릿
|
|
10
|
-
*/
|
|
11
|
-
// CSS 템플릿
|
|
12
|
-
var CSS_TEMPLATES = exports.CSS_TEMPLATES = {
|
|
13
|
-
// 레이어 컨테이너 스타일 (클릭 통과)
|
|
14
|
-
LAYER_CONTAINER: function (zIndex) {
|
|
15
|
-
return "\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: ".concat(zIndex, ";\n display: block;\n ");
|
|
16
|
-
},
|
|
17
|
-
// 툴팁 패널 스타일 (클릭 허용)
|
|
18
|
-
TOOLTIP_PANEL: function (zIndex) {
|
|
19
|
-
return "\n position: fixed;\n left: ".concat(_constants.OFFSCREEN_POSITION, "; \n top: ").concat(_constants.OFFSCREEN_POSITION, ";\n opacity: 0;\n transition: opacity ").concat(_constants.TRANSITION_DURATION, " ease;\n pointer-events: auto;\n z-index: ").concat(zIndex, ";\n right: auto;\n bottom: auto;\n transform: none;\n ");
|
|
20
|
-
},
|
|
21
|
-
// 앵커 래퍼 스타일
|
|
22
|
-
ANCHOR_WRAPPER: "\n display: inline-flex;\n vertical-align: middle;\n margin: 0 4px;\n ",
|
|
23
|
-
// Shadow DOM 기본 스타일
|
|
24
|
-
SHADOW_DOM_HOST: "\n :host { \n all: unset; \n display: block; \n font-family: system-ui; \n color: black; \n }\n "
|
|
25
|
-
};
|
|
26
|
-
// HTML 템플릿
|
|
27
|
-
var HTML_TEMPLATES = exports.HTML_TEMPLATES = {
|
|
28
|
-
// 아이콘 래퍼
|
|
29
|
-
ICON_WRAPPER: function (className, iconSvg) {
|
|
30
|
-
return "<span class=\"".concat(className, "\">").concat(iconSvg, "</span>");
|
|
31
|
-
},
|
|
32
|
-
// 툴팁 제목
|
|
33
|
-
TOOLTIP_TITLE: function (className, title) {
|
|
34
|
-
return "<span class=\"".concat(className, "\">").concat(title, "</span>");
|
|
35
|
-
},
|
|
36
|
-
// 툴팁 콘텐츠 (일반)
|
|
37
|
-
TOOLTIP_CONTENT: function (className, content) {
|
|
38
|
-
return "<span class=\"".concat(className, "\">").concat(content, "</span>");
|
|
39
|
-
},
|
|
40
|
-
// 툴팁 콘텐츠 (Shadow DOM)
|
|
41
|
-
TOOLTIP_CONTENT_SHADOW: function (className) {
|
|
42
|
-
return "<span class=\"".concat(className, "\" data-shadow-content></span>");
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
// 폴백 아이콘 SVG
|
|
46
|
-
var FALLBACK_ICON_SVG = function (size) {
|
|
47
|
-
return "<svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" fill=\"none\"/>\n <text x=\"8\" y=\"11\" font-size=\"8\" text-anchor=\"middle\" fill=\"currentColor\">?</text>\n </svg>");
|
|
48
|
-
};
|
|
49
|
-
exports.FALLBACK_ICON_SVG = FALLBACK_ICON_SVG;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "DEFAULT_TOOLTIP_HEIGHT", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _const.DEFAULT_TOOLTIP_HEIGHT;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "DEFAULT_TOOLTIP_WIDTH", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _const.DEFAULT_TOOLTIP_WIDTH;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "MARGIN", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () {
|
|
21
|
-
return _const.MARGIN;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(exports, "POSITION_PRIORITY", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function () {
|
|
27
|
-
return _const.POSITION_PRIORITY;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
Object.defineProperty(exports, "SVG_ICONS", {
|
|
31
|
-
enumerable: true,
|
|
32
|
-
get: function () {
|
|
33
|
-
return _const.SVG_ICONS;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
Object.defineProperty(exports, "Tooltip", {
|
|
37
|
-
enumerable: true,
|
|
38
|
-
get: function () {
|
|
39
|
-
return _Tooltip.Tooltip;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
Object.defineProperty(exports, "calculateOptimalPosition", {
|
|
43
|
-
enumerable: true,
|
|
44
|
-
get: function () {
|
|
45
|
-
return _utils.calculateOptimalPosition;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
exports.default = void 0;
|
|
49
|
-
var _Tooltip = require("./Tooltip");
|
|
50
|
-
var _utils = require("./utils");
|
|
51
|
-
var _const = require("./const");
|
|
52
|
-
// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
|
|
53
|
-
if (typeof window !== 'undefined') {
|
|
54
|
-
window.ncua = window.ncua || {};
|
|
55
|
-
window.ncua.Tooltip = _Tooltip.Tooltip;
|
|
56
|
-
}
|
|
57
|
-
var _default = exports.default = _Tooltip.Tooltip;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.calculateOptimalPosition = calculateOptimalPosition;
|
|
7
|
-
var _const = require("./const");
|
|
8
|
-
function calculateOptimalPosition(triggerElement, tooltipElement, preferredPosition) {
|
|
9
|
-
if (preferredPosition === void 0) {
|
|
10
|
-
preferredPosition = 'bottom';
|
|
11
|
-
}
|
|
12
|
-
var triggerRect = triggerElement.getBoundingClientRect();
|
|
13
|
-
var tooltipRect = tooltipElement.getBoundingClientRect();
|
|
14
|
-
var viewportWidth = window.innerWidth,
|
|
15
|
-
viewportHeight = window.innerHeight;
|
|
16
|
-
var spaces = {
|
|
17
|
-
top: triggerRect.top,
|
|
18
|
-
bottom: viewportHeight - triggerRect.bottom,
|
|
19
|
-
left: triggerRect.left,
|
|
20
|
-
right: viewportWidth - triggerRect.right
|
|
21
|
-
};
|
|
22
|
-
var tooltipWidth = tooltipRect.width || _const.DEFAULT_TOOLTIP_WIDTH;
|
|
23
|
-
var tooltipHeight = tooltipRect.height || _const.DEFAULT_TOOLTIP_HEIGHT;
|
|
24
|
-
for (var _i = 0, POSITION_PRIORITY_1 = _const.POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
|
|
25
|
-
var position = POSITION_PRIORITY_1[_i];
|
|
26
|
-
var hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + _const.MARGIN : spaces[position] >= tooltipWidth + _const.MARGIN;
|
|
27
|
-
if (hasSpace) {
|
|
28
|
-
if (position === 'bottom' || position === 'top') {
|
|
29
|
-
var centerX = triggerRect.left + triggerRect.width / 2;
|
|
30
|
-
var tooltipHalfWidth = tooltipWidth / 2;
|
|
31
|
-
if (centerX - tooltipHalfWidth < _const.MARGIN) {
|
|
32
|
-
return "".concat(position, "-left");
|
|
33
|
-
} else if (centerX + tooltipHalfWidth > viewportWidth - _const.MARGIN) {
|
|
34
|
-
return "".concat(position, "-right");
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
return position;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
return preferredPosition;
|
|
41
|
-
}
|
|
@@ -1,384 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.DOMRenderer = void 0;
|
|
7
|
-
var DOMRenderer = exports.DOMRenderer = /** @class */function () {
|
|
8
|
-
function DOMRenderer() {
|
|
9
|
-
this.optionElementCache = new Map();
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* 드롭다운 컨테이너 생성 (구조만)
|
|
13
|
-
*/
|
|
14
|
-
DOMRenderer.prototype.createDropdownStructure = function (config) {
|
|
15
|
-
var dropdown = document.createElement('div');
|
|
16
|
-
dropdown.className = "ncua-select-dropdown ncua-select-dropdown--down ncua-select-dropdown--".concat(config.size);
|
|
17
|
-
dropdown.style.display = 'none';
|
|
18
|
-
var content = document.createElement('div');
|
|
19
|
-
content.className = 'ncua-select-dropdown__content';
|
|
20
|
-
var optionsList = document.createElement('ul');
|
|
21
|
-
optionsList.className = 'ncua-select-dropdown__options';
|
|
22
|
-
optionsList.setAttribute('role', 'listbox');
|
|
23
|
-
optionsList.setAttribute('id', config.listboxId);
|
|
24
|
-
optionsList.style.maxHeight = "".concat(config.maxHeight, "px");
|
|
25
|
-
optionsList.style.overflowY = 'auto'; // 스크롤 활성화
|
|
26
|
-
content.appendChild(optionsList);
|
|
27
|
-
dropdown.appendChild(content);
|
|
28
|
-
return {
|
|
29
|
-
dropdown: dropdown,
|
|
30
|
-
content: content,
|
|
31
|
-
optionsList: optionsList
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
/**
|
|
35
|
-
* 단일 옵션 엘리먼트 생성 (재사용 가능)
|
|
36
|
-
*/
|
|
37
|
-
DOMRenderer.prototype.createOptionElement = function (option, index, config) {
|
|
38
|
-
var cached = this.optionElementCache.get(option.id);
|
|
39
|
-
if (cached) {
|
|
40
|
-
this.updateOptionElement(cached, option, index, config);
|
|
41
|
-
return cached;
|
|
42
|
-
}
|
|
43
|
-
var element = document.createElement('li');
|
|
44
|
-
element.className = 'ncua-select-dropdown__option';
|
|
45
|
-
element.setAttribute('data-value', String(option.id));
|
|
46
|
-
element.setAttribute('data-index', String(index));
|
|
47
|
-
element.setAttribute('role', 'option');
|
|
48
|
-
element.id = "".concat(config.listboxId, "-").concat(option.id);
|
|
49
|
-
var span = document.createElement('span');
|
|
50
|
-
span.className = 'ncua-select-dropdown__option-text';
|
|
51
|
-
span.textContent = option.label;
|
|
52
|
-
element.appendChild(span);
|
|
53
|
-
this.updateOptionElement(element, option, index, config);
|
|
54
|
-
this.optionElementCache.set(option.id, element);
|
|
55
|
-
return element;
|
|
56
|
-
};
|
|
57
|
-
/**
|
|
58
|
-
* 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
|
|
59
|
-
*/
|
|
60
|
-
DOMRenderer.prototype.updateOptionElement = function (element, option, index, config) {
|
|
61
|
-
// 클래스 업데이트 (필요한 경우에만)
|
|
62
|
-
var shouldHaveSelected = option.selected || false;
|
|
63
|
-
var shouldHaveFocused = option.focused || false;
|
|
64
|
-
var shouldHaveDisabled = option.disabled || false;
|
|
65
|
-
this.toggleClass(element, 'ncua-select-dropdown__option--selected', shouldHaveSelected);
|
|
66
|
-
this.toggleClass(element, 'ncua-select-dropdown__option--focused', shouldHaveFocused);
|
|
67
|
-
this.toggleClass(element, 'ncua-select-dropdown__option--disabled', shouldHaveDisabled);
|
|
68
|
-
// 속성 업데이트 (필요한 경우에만)
|
|
69
|
-
element.setAttribute('aria-selected', String(shouldHaveSelected));
|
|
70
|
-
element.setAttribute('data-index', String(index));
|
|
71
|
-
};
|
|
72
|
-
/**
|
|
73
|
-
* "결과 없음" 엘리먼트 생성
|
|
74
|
-
*/
|
|
75
|
-
DOMRenderer.prototype.createNoResultsElement = function (text) {
|
|
76
|
-
if (text === void 0) {
|
|
77
|
-
text = '일치하는 결과가 없습니다.';
|
|
78
|
-
}
|
|
79
|
-
var noResults = document.createElement('li');
|
|
80
|
-
noResults.className = 'ncua-select-dropdown__no-results';
|
|
81
|
-
noResults.textContent = text;
|
|
82
|
-
return noResults;
|
|
83
|
-
};
|
|
84
|
-
/**
|
|
85
|
-
* 옵션 리스트 효율적 업데이트 (Differential Rendering)
|
|
86
|
-
*/
|
|
87
|
-
DOMRenderer.prototype.updateOptionsList = function (container, newOptions, config, showNoResults) {
|
|
88
|
-
var _this = this;
|
|
89
|
-
if (showNoResults === void 0) {
|
|
90
|
-
showNoResults = false;
|
|
91
|
-
}
|
|
92
|
-
// 스크롤 위치 저장
|
|
93
|
-
var scrollTop = container.scrollTop;
|
|
94
|
-
// 결과 없음 처리
|
|
95
|
-
if (showNoResults) {
|
|
96
|
-
container.innerHTML = '';
|
|
97
|
-
container.appendChild(this.createNoResultsElement(config.noResultsText));
|
|
98
|
-
return [];
|
|
99
|
-
}
|
|
100
|
-
var newElements = [];
|
|
101
|
-
// 새 옵션들로 엘리먼트 생성/업데이트
|
|
102
|
-
newOptions.forEach(function (option, index) {
|
|
103
|
-
var element = _this.createOptionElement(option, index, config);
|
|
104
|
-
newElements.push(element);
|
|
105
|
-
});
|
|
106
|
-
// DOM 업데이트 최소화 - 변경된 부분만 업데이트
|
|
107
|
-
this.updateContainerChildren(container, newElements);
|
|
108
|
-
// 스크롤 위치 복원 (다음 프레임에서 실행)
|
|
109
|
-
requestAnimationFrame(function () {
|
|
110
|
-
container.scrollTop = scrollTop;
|
|
111
|
-
});
|
|
112
|
-
return newElements;
|
|
113
|
-
};
|
|
114
|
-
/**
|
|
115
|
-
* 컨테이너 자식 엘리먼트 효율적 업데이트
|
|
116
|
-
*/
|
|
117
|
-
DOMRenderer.prototype.updateContainerChildren = function (container, newChildren) {
|
|
118
|
-
// 기존 엘리먼트 제거 (새 리스트에 없는 것들)
|
|
119
|
-
Array.from(container.children).forEach(function (child) {
|
|
120
|
-
if (!newChildren.includes(child)) {
|
|
121
|
-
child.remove();
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
// 새 엘리먼트 추가 (순서 유지)
|
|
125
|
-
newChildren.forEach(function (child, index) {
|
|
126
|
-
var currentChild = container.children[index];
|
|
127
|
-
if (currentChild !== child) {
|
|
128
|
-
if (currentChild) {
|
|
129
|
-
container.insertBefore(child, currentChild);
|
|
130
|
-
} else {
|
|
131
|
-
container.appendChild(child);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* 클래스 토글 (변경이 필요한 경우에만)
|
|
138
|
-
*/
|
|
139
|
-
DOMRenderer.prototype.toggleClass = function (element, className, shouldHave) {
|
|
140
|
-
var hasClass = element.classList.contains(className);
|
|
141
|
-
if (shouldHave && !hasClass) {
|
|
142
|
-
element.classList.add(className);
|
|
143
|
-
} else if (!shouldHave && hasClass) {
|
|
144
|
-
element.classList.remove(className);
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
|
-
/**
|
|
148
|
-
* 입력 필드 생성 (InputFieldUtils에서 이동)
|
|
149
|
-
*/
|
|
150
|
-
DOMRenderer.prototype.createInputField = function (config) {
|
|
151
|
-
var actualSize = config.size === 'md' ? 'sm' : config.size || 'sm';
|
|
152
|
-
// 최상위 ncua-input 컨테이너 (React 버전과 동일)
|
|
153
|
-
var inputContainer = document.createElement('div');
|
|
154
|
-
inputContainer.className = "ncua-input ncua-input--".concat(actualSize);
|
|
155
|
-
if (config.disabled) inputContainer.classList.add('is-disabled');
|
|
156
|
-
// ncua-input__content 래퍼 (React 버전과 동일)
|
|
157
|
-
var inputContent = document.createElement('div');
|
|
158
|
-
inputContent.className = 'ncua-input__content';
|
|
159
|
-
// ncua-input__field 래퍼 (React 버전과 동일, size 포함)
|
|
160
|
-
var inputField = document.createElement('div');
|
|
161
|
-
inputField.className = "ncua-input__field ncua-input__field--".concat(actualSize);
|
|
162
|
-
// 실제 입력 필드 (React 버전과 동일)
|
|
163
|
-
var input = document.createElement('input');
|
|
164
|
-
input.type = 'text';
|
|
165
|
-
input.placeholder = config.placeholder || '';
|
|
166
|
-
if (config.disabled) input.disabled = true;
|
|
167
|
-
// 이벤트 리스너
|
|
168
|
-
if (config.onInput) {
|
|
169
|
-
input.addEventListener('input', function (e) {
|
|
170
|
-
config.onInput(e.target.value);
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
if (config.onClick) {
|
|
174
|
-
input.addEventListener('click', function (event) {
|
|
175
|
-
event.stopPropagation(); // 이벤트 버블링 방지
|
|
176
|
-
config.onClick();
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
// 클리어 버튼 (React 버전의 renderClearButton과 동일)
|
|
180
|
-
var clearButton = null;
|
|
181
|
-
if (config.onClear) {
|
|
182
|
-
clearButton = document.createElement('button');
|
|
183
|
-
clearButton.type = 'button';
|
|
184
|
-
clearButton.className = 'ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear';
|
|
185
|
-
clearButton.style.display = 'none'; // 초기에는 숨김
|
|
186
|
-
clearButton.addEventListener('click', config.onClear);
|
|
187
|
-
// 클리어 아이콘 (React와 동일한 크기)
|
|
188
|
-
var iconSize = actualSize === 'xs' ? 14 : 16;
|
|
189
|
-
var clearIcon = DOMRenderer.createSvgIcon('close', iconSize);
|
|
190
|
-
clearIcon.setAttribute('class', 'ncua-input__clear-icon');
|
|
191
|
-
clearButton.appendChild(clearIcon);
|
|
192
|
-
// 입력값 변경 시 클리어 버튼 표시/숨김
|
|
193
|
-
input.addEventListener('input', function () {
|
|
194
|
-
if (clearButton) {
|
|
195
|
-
clearButton.style.display = input.value ? 'flex' : 'none';
|
|
196
|
-
}
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
// 전체 보기 버튼 (React 버전의 trailingElement와 동일)
|
|
200
|
-
var showAllButton = null;
|
|
201
|
-
if (config.onShowAll) {
|
|
202
|
-
showAllButton = document.createElement('div');
|
|
203
|
-
showAllButton.className = 'ncua-input__icon-wrap ncua-input__right-icon';
|
|
204
|
-
showAllButton.addEventListener('click', config.onShowAll);
|
|
205
|
-
// 전체 버튼 (React Button 컴포넌트와 유사한 구조)
|
|
206
|
-
var button = document.createElement('button');
|
|
207
|
-
button.type = 'button';
|
|
208
|
-
button.className = 'ncua-btn ncua-btn--xxs ncua-btn--text';
|
|
209
|
-
// 아이콘
|
|
210
|
-
var iconSize = 14;
|
|
211
|
-
var showAllIcon = DOMRenderer.createSvgIcon('chevron-selector-vertical', iconSize);
|
|
212
|
-
button.appendChild(showAllIcon);
|
|
213
|
-
// 텍스트
|
|
214
|
-
var label = document.createElement('span');
|
|
215
|
-
label.className = 'ncua-btn__label';
|
|
216
|
-
label.textContent = '전체';
|
|
217
|
-
button.appendChild(label);
|
|
218
|
-
showAllButton.appendChild(button);
|
|
219
|
-
}
|
|
220
|
-
// 검색 아이콘 (React 버전의 leadingElement와 동일)
|
|
221
|
-
var searchIcon = null;
|
|
222
|
-
if (config.showSearchIcon) {
|
|
223
|
-
searchIcon = document.createElement('div');
|
|
224
|
-
searchIcon.className = 'ncua-input__icon-wrap ncua-input__left-icon';
|
|
225
|
-
// 검색 아이콘 (React와 동일한 크기와 색상)
|
|
226
|
-
var searchSvg = DOMRenderer.createSvgIcon('search', 14);
|
|
227
|
-
searchSvg.style.color = '#98a2b3'; // gray300에 해당하는 색상
|
|
228
|
-
searchIcon.appendChild(searchSvg);
|
|
229
|
-
}
|
|
230
|
-
// 구조 조립 (React 버전과 동일한 순서)
|
|
231
|
-
if (searchIcon) inputField.appendChild(searchIcon);
|
|
232
|
-
inputField.appendChild(input);
|
|
233
|
-
if (clearButton) inputField.appendChild(clearButton);
|
|
234
|
-
if (showAllButton) inputField.appendChild(showAllButton);
|
|
235
|
-
inputContent.appendChild(inputField);
|
|
236
|
-
inputContainer.appendChild(inputContent);
|
|
237
|
-
return {
|
|
238
|
-
container: inputContainer,
|
|
239
|
-
input: input,
|
|
240
|
-
setValue: function (value) {
|
|
241
|
-
input.value = value;
|
|
242
|
-
// 클리어 버튼 표시 상태 업데이트
|
|
243
|
-
if (clearButton) {
|
|
244
|
-
clearButton.style.display = value ? 'flex' : 'none';
|
|
245
|
-
}
|
|
246
|
-
},
|
|
247
|
-
focus: function () {
|
|
248
|
-
return input.focus();
|
|
249
|
-
},
|
|
250
|
-
blur: function () {
|
|
251
|
-
return input.blur();
|
|
252
|
-
}
|
|
253
|
-
};
|
|
254
|
-
};
|
|
255
|
-
/**
|
|
256
|
-
* 캐시 정리
|
|
257
|
-
*/
|
|
258
|
-
DOMRenderer.prototype.clearCache = function () {
|
|
259
|
-
this.optionElementCache.clear();
|
|
260
|
-
};
|
|
261
|
-
/**
|
|
262
|
-
* 특정 옵션 캐시 제거
|
|
263
|
-
*/
|
|
264
|
-
DOMRenderer.prototype.removeCachedOption = function (optionId) {
|
|
265
|
-
this.optionElementCache.delete(optionId);
|
|
266
|
-
};
|
|
267
|
-
/**
|
|
268
|
-
* 공통 DOM 생성 유틸리티
|
|
269
|
-
*/
|
|
270
|
-
DOMRenderer.createElementWithClass = function (tagName, className, textContent) {
|
|
271
|
-
var element = document.createElement(tagName);
|
|
272
|
-
element.className = className;
|
|
273
|
-
if (textContent) {
|
|
274
|
-
element.textContent = textContent;
|
|
275
|
-
}
|
|
276
|
-
return element;
|
|
277
|
-
};
|
|
278
|
-
/**
|
|
279
|
-
* 버튼 엘리먼트 생성
|
|
280
|
-
*/
|
|
281
|
-
DOMRenderer.createButton = function (className, textContent, onClick) {
|
|
282
|
-
var button = document.createElement('button');
|
|
283
|
-
button.className = className;
|
|
284
|
-
// React 컴포넌트와 일치하도록 span.ncua-btn__label 구조 사용
|
|
285
|
-
var label = document.createElement('span');
|
|
286
|
-
label.className = 'ncua-btn__label';
|
|
287
|
-
label.textContent = textContent;
|
|
288
|
-
button.appendChild(label);
|
|
289
|
-
if (onClick) {
|
|
290
|
-
button.addEventListener('click', onClick);
|
|
291
|
-
}
|
|
292
|
-
return button;
|
|
293
|
-
};
|
|
294
|
-
/**
|
|
295
|
-
* SVG 아이콘 생성
|
|
296
|
-
*/
|
|
297
|
-
DOMRenderer.createSvgIcon = function (iconName, size) {
|
|
298
|
-
if (size === void 0) {
|
|
299
|
-
size = 16;
|
|
300
|
-
}
|
|
301
|
-
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
302
|
-
svg.setAttribute('width', size.toString());
|
|
303
|
-
svg.setAttribute('height', size.toString());
|
|
304
|
-
svg.setAttribute('viewBox', '0 0 24 24');
|
|
305
|
-
svg.setAttribute('fill', 'none');
|
|
306
|
-
// 기본 아이콘들
|
|
307
|
-
switch (iconName) {
|
|
308
|
-
case 'close':
|
|
309
|
-
svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 7 7 17M7 7l10 10"/>';
|
|
310
|
-
break;
|
|
311
|
-
case 'chevron-down':
|
|
312
|
-
svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>';
|
|
313
|
-
break;
|
|
314
|
-
case 'chevron-selector-vertical':
|
|
315
|
-
svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 15 5 5 5-5M7 9l5-5 5 5"/>';
|
|
316
|
-
break;
|
|
317
|
-
case 'search':
|
|
318
|
-
svg.innerHTML = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0"></path>';
|
|
319
|
-
break;
|
|
320
|
-
}
|
|
321
|
-
return svg;
|
|
322
|
-
};
|
|
323
|
-
/**
|
|
324
|
-
* 푸터 생성
|
|
325
|
-
*/
|
|
326
|
-
DOMRenderer.prototype.createFooter = function (config) {
|
|
327
|
-
// 푸터 생성
|
|
328
|
-
var footer = document.createElement('div');
|
|
329
|
-
footer.className = 'ncua-select-dropdown__footer';
|
|
330
|
-
var footerButtons = document.createElement('div');
|
|
331
|
-
footerButtons.className = 'ncua-select-dropdown__footer-buttons';
|
|
332
|
-
var footerLeft = document.createElement('div');
|
|
333
|
-
footerLeft.className = 'ncua-select-dropdown__footer-left';
|
|
334
|
-
var footerRight = document.createElement('div');
|
|
335
|
-
footerRight.className = 'ncua-select-dropdown__footer-right';
|
|
336
|
-
// 다중 선택인 경우 전체 선택 버튼 추가
|
|
337
|
-
if (config.multiple) {
|
|
338
|
-
var selectAllButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--text has-underline', config.selectAllButtonText || '전체 선택', function (e) {
|
|
339
|
-
var _a;
|
|
340
|
-
e.preventDefault();
|
|
341
|
-
e.stopPropagation();
|
|
342
|
-
(_a = config.onSelectAll) === null || _a === void 0 ? void 0 : _a.call(config);
|
|
343
|
-
});
|
|
344
|
-
footerLeft.appendChild(selectAllButton);
|
|
345
|
-
}
|
|
346
|
-
// 편집 버튼 (showFooterButtons가 true이고 onEdit가 있는 경우)
|
|
347
|
-
if (config.showFooterButtons && config.onEdit) {
|
|
348
|
-
var editButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary-gray', '편집', function (e) {
|
|
349
|
-
var _a;
|
|
350
|
-
e.preventDefault();
|
|
351
|
-
e.stopPropagation();
|
|
352
|
-
(_a = config.onEdit) === null || _a === void 0 ? void 0 : _a.call(config);
|
|
353
|
-
});
|
|
354
|
-
footerRight.appendChild(editButton);
|
|
355
|
-
}
|
|
356
|
-
// 선택 완료 버튼 (다중 선택이거나 showFooterButtons가 true인 경우)
|
|
357
|
-
if (config.multiple || config.showFooterButtons) {
|
|
358
|
-
var completeButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary', '선택 완료', function (e) {
|
|
359
|
-
var _a;
|
|
360
|
-
e.preventDefault();
|
|
361
|
-
e.stopPropagation();
|
|
362
|
-
(_a = config.onComplete) === null || _a === void 0 ? void 0 : _a.call(config);
|
|
363
|
-
});
|
|
364
|
-
footerRight.appendChild(completeButton);
|
|
365
|
-
}
|
|
366
|
-
footerButtons.appendChild(footerLeft);
|
|
367
|
-
footerButtons.appendChild(footerRight);
|
|
368
|
-
footer.appendChild(footerButtons);
|
|
369
|
-
return footer;
|
|
370
|
-
};
|
|
371
|
-
/**
|
|
372
|
-
* 전체 선택 버튼 텍스트 업데이트
|
|
373
|
-
*/
|
|
374
|
-
DOMRenderer.prototype.updateSelectAllButtonText = function (footerElement, text) {
|
|
375
|
-
var selectAllButton = footerElement.querySelector('.ncua-select-dropdown__footer-left .ncua-btn');
|
|
376
|
-
if (selectAllButton) {
|
|
377
|
-
var label = selectAllButton.querySelector('.ncua-btn__label');
|
|
378
|
-
if (label) {
|
|
379
|
-
label.textContent = text;
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
};
|
|
383
|
-
return DOMRenderer;
|
|
384
|
-
}();
|