@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,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getTooltipPositionClassName = exports.getTagSizeClassName = exports.TAG_CLASS_NAMES = void 0;
|
|
7
|
-
// Tag 관련 CSS 클래스명 상수
|
|
8
|
-
var TAG_CLASS_NAMES = exports.TAG_CLASS_NAMES = {
|
|
9
|
-
tag: 'ncua-tag',
|
|
10
|
-
text: 'ncua-tag__text',
|
|
11
|
-
count: 'ncua-tag__count',
|
|
12
|
-
close: 'ncua-tag__close',
|
|
13
|
-
tooltip: 'ncua-tag__tooltip',
|
|
14
|
-
tooltipContent: 'ncua-tag__tooltip-content',
|
|
15
|
-
truncated: 'ncua-tag--truncated'
|
|
16
|
-
};
|
|
17
|
-
var getTagSizeClassName = function (size) {
|
|
18
|
-
return "ncua-tag--".concat(size);
|
|
19
|
-
};
|
|
20
|
-
exports.getTagSizeClassName = getTagSizeClassName;
|
|
21
|
-
var getTooltipPositionClassName = function (position) {
|
|
22
|
-
return "ncua-tag__tooltip--".concat(position);
|
|
23
|
-
};
|
|
24
|
-
exports.getTooltipPositionClassName = getTooltipPositionClassName;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var _types = require("./types");
|
|
7
|
-
Object.keys(_types).forEach(function (key) {
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _types[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function () {
|
|
13
|
-
return _types[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
var _classNames = require("./classNames");
|
|
18
|
-
Object.keys(_classNames).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (key in exports && exports[key] === _classNames[key]) return;
|
|
21
|
-
Object.defineProperty(exports, key, {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function () {
|
|
24
|
-
return _classNames[key];
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
var _sizes = require("./sizes");
|
|
29
|
-
Object.keys(_sizes).forEach(function (key) {
|
|
30
|
-
if (key === "default" || key === "__esModule") return;
|
|
31
|
-
if (key in exports && exports[key] === _sizes[key]) return;
|
|
32
|
-
Object.defineProperty(exports, key, {
|
|
33
|
-
enumerable: true,
|
|
34
|
-
get: function () {
|
|
35
|
-
return _sizes[key];
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.iconSize = exports.MARGIN = exports.DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_HEIGHT = void 0;
|
|
7
|
-
var iconSize = exports.iconSize = {
|
|
8
|
-
sm: 14,
|
|
9
|
-
md: 16
|
|
10
|
-
};
|
|
11
|
-
var MARGIN = exports.MARGIN = 10;
|
|
12
|
-
var DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_WIDTH = 200;
|
|
13
|
-
var DEFAULT_TOOLTIP_HEIGHT = exports.DEFAULT_TOOLTIP_HEIGHT = 60;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var _exportNames = {
|
|
7
|
-
Tag: true
|
|
8
|
-
};
|
|
9
|
-
Object.defineProperty(exports, "Tag", {
|
|
10
|
-
enumerable: true,
|
|
11
|
-
get: function () {
|
|
12
|
-
return _Tag.Tag;
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
var _Tag = require("./Tag");
|
|
16
|
-
var _types = require("./const/types");
|
|
17
|
-
Object.keys(_types).forEach(function (key) {
|
|
18
|
-
if (key === "default" || key === "__esModule") return;
|
|
19
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
20
|
-
if (key in exports && exports[key] === _types[key]) return;
|
|
21
|
-
Object.defineProperty(exports, key, {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function () {
|
|
24
|
-
return _types[key];
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
var _classNames = require("./const/classNames");
|
|
29
|
-
Object.keys(_classNames).forEach(function (key) {
|
|
30
|
-
if (key === "default" || key === "__esModule") return;
|
|
31
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
32
|
-
if (key in exports && exports[key] === _classNames[key]) return;
|
|
33
|
-
Object.defineProperty(exports, key, {
|
|
34
|
-
enumerable: true,
|
|
35
|
-
get: function () {
|
|
36
|
-
return _classNames[key];
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
|
|
41
|
-
if (typeof window !== 'undefined') {
|
|
42
|
-
window.ncua = window.ncua || {};
|
|
43
|
-
window.ncua.Tag = _Tag.Tag;
|
|
44
|
-
}
|
|
@@ -1,380 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Tooltip = void 0;
|
|
7
|
-
var _const = require("./const");
|
|
8
|
-
var _ButtonCloseX = require("../shared/ButtonCloseX");
|
|
9
|
-
var _breakpoint = require("../../../src/constant/breakpoint");
|
|
10
|
-
var _TooltipLayerManager = require("./TooltipLayerManager");
|
|
11
|
-
var __assign = void 0 && (void 0).__assign || function () {
|
|
12
|
-
__assign = Object.assign || function (t) {
|
|
13
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
14
|
-
s = arguments[i];
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
16
|
-
}
|
|
17
|
-
return t;
|
|
18
|
-
};
|
|
19
|
-
return __assign.apply(this, arguments);
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* Tooltip 클래스
|
|
23
|
-
* 툴팁 패널 패턴을 사용하여 툴팁을 생성합니다.
|
|
24
|
-
* 툴팁 패널 패턴은 바깥 컨테이너(항상 pointer-events:none) + 실제 패널(클릭 허용) 패턴을 사용합니다.
|
|
25
|
-
* 레이어 1개 아래에 여러개의 패널과 툴팁이 생성되어 화면에 삽입됩니다.
|
|
26
|
-
* 자동 위치조정 ( 공간이 부족하다면 상하좌우를 조절하는 기능 - 기본값: top )을 사용합니다.
|
|
27
|
-
* Shadow DOM 지원
|
|
28
|
-
*/
|
|
29
|
-
var Tooltip = exports.Tooltip = /** @class */function () {
|
|
30
|
-
function Tooltip(options) {
|
|
31
|
-
if (options === void 0) {
|
|
32
|
-
options = {};
|
|
33
|
-
}
|
|
34
|
-
var _this = this;
|
|
35
|
-
this.iconElement = null;
|
|
36
|
-
// 전역 레이어 매니저 사용
|
|
37
|
-
this.layerManager = _TooltipLayerManager.TooltipLayerManager.getInstance();
|
|
38
|
-
this.panelId = null;
|
|
39
|
-
this.panel = null;
|
|
40
|
-
this.calculatedPosition = 'top';
|
|
41
|
-
this.isVisible = false;
|
|
42
|
-
this.isMeasuring = false;
|
|
43
|
-
this.isForceHidden = false;
|
|
44
|
-
// 이벤트 핸들러
|
|
45
|
-
this.boundMouseEnter = function () {
|
|
46
|
-
return _this.handleMouseEnter();
|
|
47
|
-
};
|
|
48
|
-
this.boundMouseLeave = function () {
|
|
49
|
-
return _this.handleMouseLeave();
|
|
50
|
-
};
|
|
51
|
-
this.boundResizeScroll = function () {
|
|
52
|
-
return _this.handleResizeScroll();
|
|
53
|
-
};
|
|
54
|
-
this.boundPanelClick = function (e) {
|
|
55
|
-
return _this.handlePanelClick(e);
|
|
56
|
-
};
|
|
57
|
-
/* ========== 핸들러 ========== */
|
|
58
|
-
this.handleMouseEnter = function () {
|
|
59
|
-
_this.showTooltip();
|
|
60
|
-
if (_this.options.type === 'long') {
|
|
61
|
-
// long은 X로 닫을 때까지 유지 → 재호버 방지
|
|
62
|
-
_this.disableMouseEvents();
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
this.handleMouseLeave = function () {
|
|
66
|
-
if (_this.options.type === 'short') {
|
|
67
|
-
_this.hideTooltip();
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
this.handleResizeScroll = function () {
|
|
71
|
-
if (_this.isVisible) _this.updateTooltipPosition();
|
|
72
|
-
};
|
|
73
|
-
this.handlePanelClick = function (e) {
|
|
74
|
-
var t = e.target;
|
|
75
|
-
if (t.closest(".".concat(_const.CLASS_NAMES.TOOLTIP_CLOSE_BUTTON))) {
|
|
76
|
-
e.stopPropagation();
|
|
77
|
-
e.preventDefault();
|
|
78
|
-
_this.isForceHidden = true;
|
|
79
|
-
_this.hideTooltip();
|
|
80
|
-
// long 타입에서 닫았으면 다시 hover 가능
|
|
81
|
-
if (_this.options.type === 'long') _this.enableMouseEvents();
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
this.options = __assign(__assign({}, _const.TOOLTIP_DEFAULT_VALUE), options);
|
|
85
|
-
this.element = this.createElement();
|
|
86
|
-
this.bindEvents();
|
|
87
|
-
}
|
|
88
|
-
/* ========== DOM 생성 ========== */
|
|
89
|
-
Tooltip.prototype.createElement = function () {
|
|
90
|
-
var _a, _b, _c;
|
|
91
|
-
var iconSize = _const.ICON_SIZES[(_a = this.options.size) !== null && _a !== void 0 ? _a : 'sm'];
|
|
92
|
-
var key = this.options.iconType === 'stroke' ? 'help-circle-stroke' : 'help-circle-fill';
|
|
93
|
-
var iconSvg = (_c = (_b = _const.SVG_ICONS[key]) === null || _b === void 0 ? void 0 : _b.call(_const.SVG_ICONS, iconSize)) !== null && _c !== void 0 ? _c : (0, _const.FALLBACK_ICON_SVG)(iconSize);
|
|
94
|
-
var wrapper = document.createElement('span');
|
|
95
|
-
wrapper.className = this.buildAnchorClassName();
|
|
96
|
-
wrapper.style.cssText = _const.CSS_TEMPLATES.ANCHOR_WRAPPER;
|
|
97
|
-
wrapper.innerHTML = _const.HTML_TEMPLATES.ICON_WRAPPER(_const.CLASS_NAMES.TOOLTIP_ICON, iconSvg);
|
|
98
|
-
this.iconElement = wrapper.querySelector(".".concat(_const.CLASS_NAMES.TOOLTIP_ICON));
|
|
99
|
-
// body에 레이어/패널 생성(패널 패턴)
|
|
100
|
-
this.createLayerAndPanel();
|
|
101
|
-
return wrapper;
|
|
102
|
-
};
|
|
103
|
-
// 앵커(아이콘 래퍼) 클래스
|
|
104
|
-
Tooltip.prototype.buildAnchorClassName = function () {
|
|
105
|
-
var classes = [_const.CLASS_NAMES.TOOLTIP, "".concat(_const.CLASS_NAMES.TOOLTIP, "--").concat(this.options.size), "".concat(_const.CLASS_NAMES.TOOLTIP, "--").concat(this.options.type)];
|
|
106
|
-
if (this.options.hideArrow) classes.push(_const.CLASS_NAMES.TOOLTIP_HIDDEN_ARROW);
|
|
107
|
-
if (this.options.iconType === 'stroke') classes.push(_const.CLASS_NAMES.TOOLTIP_STROKE);
|
|
108
|
-
if (this.options.position === 'auto') classes.push(_const.CLASS_NAMES.TOOLTIP_AUTO);
|
|
109
|
-
if (this.options.className) classes.push(this.options.className);
|
|
110
|
-
return classes.join(' ');
|
|
111
|
-
};
|
|
112
|
-
// 패널 클래스 (방향/테마 가짐)
|
|
113
|
-
Tooltip.prototype.buildPanelClassName = function () {
|
|
114
|
-
var finalPosition = this.options.position === 'auto' ? this.calculatedPosition : this.options.position;
|
|
115
|
-
var classes = [_const.CLASS_NAMES.TOOLTIP_PANEL, _const.CLASS_NAMES.TOOLTIP_BG, "".concat(_const.CLASS_NAMES.TOOLTIP_BG, "--").concat(this.options.tooltipType), "".concat(_const.CLASS_NAMES.TOOLTIP_BG, "--").concat(finalPosition)];
|
|
116
|
-
if (this.isVisible) classes.push(_const.CLASS_NAMES.TOOLTIP_BG_VISIBLE);
|
|
117
|
-
if (this.isMeasuring) classes.push(_const.CLASS_NAMES.TOOLTIP_BG_MEASURING);
|
|
118
|
-
if (this.isForceHidden) classes.push(_const.CLASS_NAMES.TOOLTIP_BG_FORCE_HIDDEN);
|
|
119
|
-
return classes.join(' ');
|
|
120
|
-
};
|
|
121
|
-
Tooltip.prototype.renderContentHTML = function () {
|
|
122
|
-
if (!this.options.content) return '';
|
|
123
|
-
if (this.options.useShadowDOM) {
|
|
124
|
-
return _const.HTML_TEMPLATES.TOOLTIP_CONTENT_SHADOW(_const.CLASS_NAMES.TOOLTIP_CONTENT);
|
|
125
|
-
}
|
|
126
|
-
return _const.HTML_TEMPLATES.TOOLTIP_CONTENT(_const.CLASS_NAMES.TOOLTIP_CONTENT, this.options.content);
|
|
127
|
-
};
|
|
128
|
-
Tooltip.prototype.renderCloseButtonHTML = function () {
|
|
129
|
-
if (this.options.type !== 'long') return '';
|
|
130
|
-
var theme = this.options.tooltipType === 'white' ? 'dark' : 'light';
|
|
131
|
-
var isMobile = window.matchMedia(_breakpoint.MEDIA_QUERY.mobile).matches;
|
|
132
|
-
var size = isMobile ? 'sm' : 'xs';
|
|
133
|
-
return (0, _ButtonCloseX.ButtonCloseX)(size, theme, _const.CLASS_NAMES.TOOLTIP_CLOSE_BUTTON, '툴팁 닫기');
|
|
134
|
-
};
|
|
135
|
-
/** 전역 레이어에 패널 생성 */
|
|
136
|
-
Tooltip.prototype.createLayerAndPanel = function () {
|
|
137
|
-
var _a;
|
|
138
|
-
// 기존 패널 제거
|
|
139
|
-
if (this.panelId) {
|
|
140
|
-
this.layerManager.removePanel(this.panelId);
|
|
141
|
-
}
|
|
142
|
-
// 새 패널 생성 (zIndex 전달)
|
|
143
|
-
var zIndex = (_a = this.options.zIndex) !== null && _a !== void 0 ? _a : _const.Z_INDEX.TOOLTIP_LAYER;
|
|
144
|
-
var _b = this.layerManager.createPanel(zIndex),
|
|
145
|
-
id = _b.id,
|
|
146
|
-
panel = _b.panel;
|
|
147
|
-
this.panelId = id;
|
|
148
|
-
this.panel = panel;
|
|
149
|
-
// 패널 설정
|
|
150
|
-
this.panel.className = this.buildPanelClassName();
|
|
151
|
-
// 패널 내용 구성
|
|
152
|
-
var titleHTML = this.options.title ? _const.HTML_TEMPLATES.TOOLTIP_TITLE(_const.CLASS_NAMES.TOOLTIP_TITLE, this.options.title) : '';
|
|
153
|
-
var contentHTML = this.renderContentHTML();
|
|
154
|
-
var closeButtonHTML = this.renderCloseButtonHTML();
|
|
155
|
-
this.panel.innerHTML = "".concat(titleHTML).concat(contentHTML).concat(closeButtonHTML);
|
|
156
|
-
if (this.options.useShadowDOM && this.options.content) {
|
|
157
|
-
this.setupShadowContent();
|
|
158
|
-
}
|
|
159
|
-
// 패널 클릭(닫기 버튼) 위임
|
|
160
|
-
this.panel.addEventListener('click', this.boundPanelClick);
|
|
161
|
-
};
|
|
162
|
-
Tooltip.prototype.setupShadowContent = function () {
|
|
163
|
-
if (!this.panel || !this.options.content) return;
|
|
164
|
-
var container = this.panel.querySelector('[data-shadow-content]');
|
|
165
|
-
if (!container) return;
|
|
166
|
-
var shadowRoot = container.attachShadow({
|
|
167
|
-
mode: 'open'
|
|
168
|
-
});
|
|
169
|
-
var style = document.createElement('style');
|
|
170
|
-
style.textContent = _const.CSS_TEMPLATES.SHADOW_DOM_HOST;
|
|
171
|
-
shadowRoot.appendChild(style);
|
|
172
|
-
var temp = document.createElement('div');
|
|
173
|
-
temp.innerHTML = this.options.content;
|
|
174
|
-
while (temp.firstChild) shadowRoot.appendChild(temp.firstChild);
|
|
175
|
-
};
|
|
176
|
-
/* ========== 이벤트 바인딩/해제 ========== */
|
|
177
|
-
Tooltip.prototype.bindEvents = function () {
|
|
178
|
-
this.enableMouseEvents();
|
|
179
|
-
window.addEventListener('resize', this.boundResizeScroll, _const.EVENT_OPTIONS.PASSIVE);
|
|
180
|
-
window.addEventListener('scroll', this.boundResizeScroll, _const.EVENT_OPTIONS.PASSIVE);
|
|
181
|
-
};
|
|
182
|
-
// tooltip icon위에 마우스 올리면 툴팁 보이기
|
|
183
|
-
Tooltip.prototype.enableMouseEvents = function () {
|
|
184
|
-
var _a, _b;
|
|
185
|
-
(_a = this.iconElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.boundMouseEnter);
|
|
186
|
-
(_b = this.iconElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.boundMouseLeave);
|
|
187
|
-
};
|
|
188
|
-
Tooltip.prototype.disableMouseEvents = function () {
|
|
189
|
-
var _a, _b;
|
|
190
|
-
(_a = this.iconElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.boundMouseEnter);
|
|
191
|
-
(_b = this.iconElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.boundMouseLeave);
|
|
192
|
-
};
|
|
193
|
-
/* ========== 표시/숨김/위치 ========== */
|
|
194
|
-
Tooltip.prototype.showTooltip = function () {
|
|
195
|
-
if (!this.panel) return;
|
|
196
|
-
this.isVisible = true;
|
|
197
|
-
this.isForceHidden = false; // 강제 숨김 상태 리셋
|
|
198
|
-
this.updateTooltipPosition();
|
|
199
|
-
// 보이기
|
|
200
|
-
this.panel.style.opacity = _const.OPACITY.VISIBLE;
|
|
201
|
-
this.updatePanelClass();
|
|
202
|
-
};
|
|
203
|
-
Tooltip.prototype.hideTooltip = function () {
|
|
204
|
-
if (!this.panel) return;
|
|
205
|
-
this.isVisible = false;
|
|
206
|
-
this.isForceHidden = false; // 강제 숨김 상태 리셋 (다시 표시 가능하도록)
|
|
207
|
-
this.panel.style.opacity = _const.OPACITY.HIDDEN;
|
|
208
|
-
this.updatePanelClass();
|
|
209
|
-
// long 타입에서 hideTooltip()을 호출한 경우 마우스 이벤트 다시 활성화
|
|
210
|
-
if (this.options.type === 'long') {
|
|
211
|
-
this.enableMouseEvents();
|
|
212
|
-
}
|
|
213
|
-
// 전환 종료 후 완전히 오프스크린 이동 → 히트 테스트 0
|
|
214
|
-
var el = this.panel;
|
|
215
|
-
var onEnd = function () {
|
|
216
|
-
el.style.left = _const.OFFSCREEN_POSITION;
|
|
217
|
-
el.style.top = _const.OFFSCREEN_POSITION;
|
|
218
|
-
el.removeEventListener('transitionend', onEnd);
|
|
219
|
-
};
|
|
220
|
-
el.addEventListener('transitionend', onEnd, {
|
|
221
|
-
once: true
|
|
222
|
-
});
|
|
223
|
-
};
|
|
224
|
-
Tooltip.prototype.updateTooltipPosition = function () {
|
|
225
|
-
var _a;
|
|
226
|
-
if (!this.panel) return;
|
|
227
|
-
this.isMeasuring = true;
|
|
228
|
-
this.updatePanelClass();
|
|
229
|
-
// 먼저 눈에 보이도록 화면 안쪽으로 잠깐 이동해 사이즈 측정
|
|
230
|
-
// (opacity는 showTooltip에서만 1로)
|
|
231
|
-
if (this.panel.style.left === _const.OFFSCREEN_POSITION) {
|
|
232
|
-
this.panel.style.left = _const.POSITION.INITIAL;
|
|
233
|
-
this.panel.style.top = _const.POSITION.INITIAL;
|
|
234
|
-
}
|
|
235
|
-
var tipRect = this.panel.getBoundingClientRect();
|
|
236
|
-
var anchor = (_a = this.iconElement) !== null && _a !== void 0 ? _a : this.element;
|
|
237
|
-
var rect = anchor.getBoundingClientRect();
|
|
238
|
-
var left = 0;
|
|
239
|
-
var top = 0;
|
|
240
|
-
var prefer = this.options.position;
|
|
241
|
-
if (prefer === 'auto') {
|
|
242
|
-
var enoughTop = rect.top - _const.TOOLTIP_OFFSET - tipRect.height >= _const.VIEWPORT_MARGIN;
|
|
243
|
-
prefer = enoughTop ? 'top' : 'bottom';
|
|
244
|
-
}
|
|
245
|
-
if (prefer === 'bottom') {
|
|
246
|
-
top = rect.bottom + _const.TOOLTIP_OFFSET;
|
|
247
|
-
left = rect.left + rect.width / 2 - tipRect.width / 2;
|
|
248
|
-
this.calculatedPosition = 'bottom';
|
|
249
|
-
} else if (prefer === 'top') {
|
|
250
|
-
top = rect.top - tipRect.height - _const.TOOLTIP_OFFSET;
|
|
251
|
-
left = rect.left + rect.width / 2 - tipRect.width / 2;
|
|
252
|
-
this.calculatedPosition = 'top';
|
|
253
|
-
} else if (prefer === 'left') {
|
|
254
|
-
top = rect.top + rect.height / 2 - tipRect.height / 2;
|
|
255
|
-
left = rect.left - tipRect.width - _const.TOOLTIP_OFFSET;
|
|
256
|
-
this.calculatedPosition = 'left';
|
|
257
|
-
} else if (prefer === 'right') {
|
|
258
|
-
top = rect.top + rect.height / 2 - tipRect.height / 2;
|
|
259
|
-
left = rect.right + _const.TOOLTIP_OFFSET;
|
|
260
|
-
this.calculatedPosition = 'right';
|
|
261
|
-
} else {
|
|
262
|
-
// fallback: top
|
|
263
|
-
top = rect.top - tipRect.height - _const.TOOLTIP_OFFSET;
|
|
264
|
-
left = rect.left + rect.width / 2 - tipRect.width / 2;
|
|
265
|
-
this.calculatedPosition = 'top';
|
|
266
|
-
}
|
|
267
|
-
// 화면 경계 보정
|
|
268
|
-
left = Math.max(_const.VIEWPORT_MARGIN, Math.min(left, window.innerWidth - tipRect.width - _const.VIEWPORT_MARGIN));
|
|
269
|
-
top = Math.max(_const.VIEWPORT_MARGIN, Math.min(top, window.innerHeight - tipRect.height - _const.VIEWPORT_MARGIN));
|
|
270
|
-
this.panel.style.left = "".concat(Math.round(left), "px");
|
|
271
|
-
this.panel.style.top = "".concat(Math.round(top), "px");
|
|
272
|
-
this.isMeasuring = false;
|
|
273
|
-
this.updatePanelClass();
|
|
274
|
-
};
|
|
275
|
-
Tooltip.prototype.updatePanelClass = function () {
|
|
276
|
-
if (!this.panel) return;
|
|
277
|
-
var newClassName = this.buildPanelClassName();
|
|
278
|
-
if (this.panel.className !== newClassName) {
|
|
279
|
-
this.panel.className = newClassName;
|
|
280
|
-
}
|
|
281
|
-
};
|
|
282
|
-
/* ========== Public API ========== */
|
|
283
|
-
Tooltip.prototype.getElement = function () {
|
|
284
|
-
return this.element;
|
|
285
|
-
};
|
|
286
|
-
/* 기존 옵션 업데이트 ( i18n 적용, 속성 변경 등 옵션 변경 시 사용 ) */
|
|
287
|
-
Tooltip.prototype.updateOptions = function (newOptions) {
|
|
288
|
-
var _a;
|
|
289
|
-
// 기존 리스너/DOM 정리
|
|
290
|
-
this.disableMouseEvents();
|
|
291
|
-
window.removeEventListener('resize', this.boundResizeScroll);
|
|
292
|
-
window.removeEventListener('scroll', this.boundResizeScroll);
|
|
293
|
-
(_a = this.panel) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.boundPanelClick);
|
|
294
|
-
if (this.panelId) {
|
|
295
|
-
this.layerManager.removePanel(this.panelId);
|
|
296
|
-
}
|
|
297
|
-
// 옵션 병합
|
|
298
|
-
this.options = __assign(__assign({}, this.options), newOptions);
|
|
299
|
-
// 앵커 재구성
|
|
300
|
-
var parent = this.element.parentNode;
|
|
301
|
-
var newEl = this.createElement();
|
|
302
|
-
if (parent) parent.replaceChild(newEl, this.element);
|
|
303
|
-
this.element = newEl;
|
|
304
|
-
// 리스너 재바인딩
|
|
305
|
-
this.bindEvents();
|
|
306
|
-
};
|
|
307
|
-
/* 정리 메서드 용도 */
|
|
308
|
-
Tooltip.prototype.destroy = function () {
|
|
309
|
-
var _a;
|
|
310
|
-
this.disableMouseEvents();
|
|
311
|
-
window.removeEventListener('resize', this.boundResizeScroll);
|
|
312
|
-
window.removeEventListener('scroll', this.boundResizeScroll);
|
|
313
|
-
(_a = this.panel) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.boundPanelClick);
|
|
314
|
-
if (this.panelId) {
|
|
315
|
-
this.layerManager.removePanel(this.panelId);
|
|
316
|
-
}
|
|
317
|
-
if (this.element.parentNode) this.element.parentNode.removeChild(this.element);
|
|
318
|
-
};
|
|
319
|
-
/* ========== 팩토리 메서드 ========== */
|
|
320
|
-
Tooltip.create = function (options) {
|
|
321
|
-
if (options === void 0) {
|
|
322
|
-
options = {};
|
|
323
|
-
}
|
|
324
|
-
return new Tooltip(options);
|
|
325
|
-
};
|
|
326
|
-
Tooltip.createShort = function (title, content, options) {
|
|
327
|
-
if (options === void 0) {
|
|
328
|
-
options = {};
|
|
329
|
-
}
|
|
330
|
-
return new Tooltip(__assign({
|
|
331
|
-
type: 'short',
|
|
332
|
-
title: title,
|
|
333
|
-
content: content
|
|
334
|
-
}, options));
|
|
335
|
-
};
|
|
336
|
-
Tooltip.createLong = function (title, content, options) {
|
|
337
|
-
if (options === void 0) {
|
|
338
|
-
options = {};
|
|
339
|
-
}
|
|
340
|
-
return new Tooltip(__assign({
|
|
341
|
-
type: 'long',
|
|
342
|
-
title: title,
|
|
343
|
-
content: content
|
|
344
|
-
}, options));
|
|
345
|
-
};
|
|
346
|
-
Tooltip.createAuto = function (title, content, options) {
|
|
347
|
-
if (options === void 0) {
|
|
348
|
-
options = {};
|
|
349
|
-
}
|
|
350
|
-
return new Tooltip(__assign({
|
|
351
|
-
position: 'auto',
|
|
352
|
-
title: title,
|
|
353
|
-
content: content
|
|
354
|
-
}, options));
|
|
355
|
-
};
|
|
356
|
-
Tooltip.createAutoLong = function (title, content, options) {
|
|
357
|
-
if (options === void 0) {
|
|
358
|
-
options = {};
|
|
359
|
-
}
|
|
360
|
-
return new Tooltip(__assign({
|
|
361
|
-
type: 'long',
|
|
362
|
-
position: 'auto',
|
|
363
|
-
title: title,
|
|
364
|
-
content: content
|
|
365
|
-
}, options));
|
|
366
|
-
};
|
|
367
|
-
Tooltip.createAutoLongWithShadowDOM = function (title, content, options) {
|
|
368
|
-
if (options === void 0) {
|
|
369
|
-
options = {};
|
|
370
|
-
}
|
|
371
|
-
return new Tooltip(__assign({
|
|
372
|
-
type: 'long',
|
|
373
|
-
position: 'auto',
|
|
374
|
-
title: title,
|
|
375
|
-
content: content,
|
|
376
|
-
useShadowDOM: true
|
|
377
|
-
}, options));
|
|
378
|
-
};
|
|
379
|
-
return Tooltip;
|
|
380
|
-
}();
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.TooltipLayerManager = void 0;
|
|
7
|
-
var _const = require("./const");
|
|
8
|
-
/**
|
|
9
|
-
* 툴팁 레이어 관리자
|
|
10
|
-
* 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
|
|
11
|
-
*/
|
|
12
|
-
var TooltipLayerManager = exports.TooltipLayerManager = /** @class */function () {
|
|
13
|
-
function TooltipLayerManager() {
|
|
14
|
-
this.layer = null;
|
|
15
|
-
this.panels = new Map();
|
|
16
|
-
this.nextId = 0;
|
|
17
|
-
this.maxZIndex = _const.Z_INDEX.TOOLTIP_LAYER; // 기본 z-index (가장 높은 값 추적)
|
|
18
|
-
this.createGlobalLayer();
|
|
19
|
-
}
|
|
20
|
-
TooltipLayerManager.getInstance = function () {
|
|
21
|
-
if (!this.instance) {
|
|
22
|
-
this.instance = new TooltipLayerManager();
|
|
23
|
-
}
|
|
24
|
-
return this.instance;
|
|
25
|
-
};
|
|
26
|
-
TooltipLayerManager.prototype.createGlobalLayer = function () {
|
|
27
|
-
// 기존 레이어가 있으면 제거
|
|
28
|
-
var existingLayer = document.getElementById('tooltip-global-layer');
|
|
29
|
-
if (existingLayer) {
|
|
30
|
-
existingLayer.remove();
|
|
31
|
-
}
|
|
32
|
-
this.layer = document.createElement('div');
|
|
33
|
-
this.layer.id = 'tooltip-global-layer';
|
|
34
|
-
this.layer.className = _const.CLASS_NAMES.TOOLTIP_GLOBAL_LAYER;
|
|
35
|
-
this.layer.style.zIndex = String(this.maxZIndex);
|
|
36
|
-
document.body.appendChild(this.layer);
|
|
37
|
-
};
|
|
38
|
-
TooltipLayerManager.prototype.createPanel = function (zIndex) {
|
|
39
|
-
if (zIndex === void 0) {
|
|
40
|
-
zIndex = _const.Z_INDEX.TOOLTIP_LAYER;
|
|
41
|
-
}
|
|
42
|
-
if (!this.layer) {
|
|
43
|
-
this.createGlobalLayer();
|
|
44
|
-
}
|
|
45
|
-
// 최대 z-index 추적 및 전역 레이어 업데이트
|
|
46
|
-
// 왜 이런 구현이 필요한지..? 툴팁 레이어 매니저는 바디에 무분별하게 붙는걸 방지하기 위해 하나의 전역 레이아웃입니다. 툴팁 20개씩 붙는 페이지를 위함
|
|
47
|
-
// 전역 레이어의 z-index는 자식과 일치되면 가장 좋지만, 수시로 변하는 z-index를 추적하는 것이 디버깅측면에서 좋지않고 버그를 유발할 가능성이 높아보여
|
|
48
|
-
// 툴팁은 보통은 고정된값을 사용하기에, 변동이 없다고 가정하고, 변동되는 경우에만 가장 높은 z-index를 추적하고 업데이트하는 구현을 하였습니다.
|
|
49
|
-
if (zIndex > this.maxZIndex) {
|
|
50
|
-
this.maxZIndex = zIndex;
|
|
51
|
-
if (this.layer) {
|
|
52
|
-
this.layer.style.zIndex = String(this.maxZIndex);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
var id = "tooltip-panel-".concat(++this.nextId);
|
|
56
|
-
var panel = document.createElement('span');
|
|
57
|
-
panel.id = id;
|
|
58
|
-
panel.className = _const.CLASS_NAMES.TOOLTIP_PANEL;
|
|
59
|
-
this.panels.set(id, panel);
|
|
60
|
-
this.layer.appendChild(panel);
|
|
61
|
-
return {
|
|
62
|
-
id: id,
|
|
63
|
-
panel: panel
|
|
64
|
-
};
|
|
65
|
-
};
|
|
66
|
-
TooltipLayerManager.prototype.removePanel = function (id) {
|
|
67
|
-
var panel = this.panels.get(id);
|
|
68
|
-
if (panel && panel.parentNode) {
|
|
69
|
-
panel.parentNode.removeChild(panel);
|
|
70
|
-
this.panels.delete(id);
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
TooltipLayerManager.prototype.getPanel = function (id) {
|
|
74
|
-
return this.panels.get(id) || null;
|
|
75
|
-
};
|
|
76
|
-
TooltipLayerManager.prototype.destroy = function () {
|
|
77
|
-
this.panels.clear();
|
|
78
|
-
if (this.layer && this.layer.parentNode) {
|
|
79
|
-
this.layer.parentNode.removeChild(this.layer);
|
|
80
|
-
}
|
|
81
|
-
this.layer = null;
|
|
82
|
-
};
|
|
83
|
-
return TooltipLayerManager;
|
|
84
|
-
}();
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.CLASS_NAMES = void 0;
|
|
7
|
-
// Tooltip CSS 클래스명 상수들
|
|
8
|
-
var CLASS_NAMES = exports.CLASS_NAMES = {
|
|
9
|
-
// 기본 클래스
|
|
10
|
-
TOOLTIP: 'ncua-tooltip',
|
|
11
|
-
TOOLTIP_ICON: 'ncua-tooltip__icon',
|
|
12
|
-
TOOLTIP_BG: 'ncua-tooltip__bg',
|
|
13
|
-
TOOLTIP_TITLE: 'ncua-tooltip__title',
|
|
14
|
-
TOOLTIP_CONTENT: 'ncua-tooltip__content',
|
|
15
|
-
TOOLTIP_CLOSE_BUTTON: 'ncua-tooltip__close-button',
|
|
16
|
-
// 수정자 클래스 (modifier classes)
|
|
17
|
-
TOOLTIP_HIDDEN_ARROW: 'ncua-tooltip--hidden-arrow',
|
|
18
|
-
TOOLTIP_STROKE: 'ncua-tooltip--stroke',
|
|
19
|
-
TOOLTIP_AUTO: 'ncua-tooltip--auto',
|
|
20
|
-
// 배경 상태 클래스
|
|
21
|
-
TOOLTIP_BG_VISIBLE: 'ncua-tooltip__bg--visible',
|
|
22
|
-
TOOLTIP_BG_MEASURING: 'ncua-tooltip__bg--measuring',
|
|
23
|
-
TOOLTIP_BG_FORCE_HIDDEN: 'ncua-tooltip__bg--force-hidden',
|
|
24
|
-
// 레이어 관련 클래스
|
|
25
|
-
TOOLTIP_GLOBAL_LAYER: 'ncua-tooltip-global-layer',
|
|
26
|
-
TOOLTIP_PANEL: 'ncua-tooltip-panel',
|
|
27
|
-
// 버튼 클래스
|
|
28
|
-
BUTTON_CLOSE_X: 'ncua-button-close-x'
|
|
29
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Z_INDEX = exports.VIEWPORT_MARGIN = exports.TRANSITION_DURATION = exports.TOOLTIP_OFFSET = exports.TOOLTIP_DEFAULT_VALUE = exports.POSITION_PRIORITY = exports.POSITION = exports.OPACITY = exports.OFFSCREEN_POSITION = exports.MARGIN = exports.ICON_SIZES = exports.EVENT_OPTIONS = exports.DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_HEIGHT = void 0;
|
|
7
|
-
var MARGIN = exports.MARGIN = 10;
|
|
8
|
-
var DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_WIDTH = 200;
|
|
9
|
-
var DEFAULT_TOOLTIP_HEIGHT = exports.DEFAULT_TOOLTIP_HEIGHT = 60;
|
|
10
|
-
var POSITION_PRIORITY = exports.POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
|
|
11
|
-
// 툴팁 위치 계산 관련 상수
|
|
12
|
-
var TOOLTIP_OFFSET = exports.TOOLTIP_OFFSET = 8; // 툴팁과 앵커 사이의 거리
|
|
13
|
-
var VIEWPORT_MARGIN = exports.VIEWPORT_MARGIN = 8; // 뷰포트 경계와의 최소 거리
|
|
14
|
-
// 아이콘 크기 상수
|
|
15
|
-
var ICON_SIZES = exports.ICON_SIZES = {
|
|
16
|
-
sm: 14,
|
|
17
|
-
md: 16
|
|
18
|
-
};
|
|
19
|
-
// 애니메이션 관련 상수
|
|
20
|
-
var TRANSITION_DURATION = exports.TRANSITION_DURATION = '0.18s';
|
|
21
|
-
var OFFSCREEN_POSITION = exports.OFFSCREEN_POSITION = '-99999px';
|
|
22
|
-
// 툴팁 상태 관련 상수
|
|
23
|
-
var OPACITY = exports.OPACITY = {
|
|
24
|
-
HIDDEN: '0',
|
|
25
|
-
VISIBLE: '1'
|
|
26
|
-
};
|
|
27
|
-
var POSITION = exports.POSITION = {
|
|
28
|
-
INITIAL: '0px',
|
|
29
|
-
OFFSCREEN: OFFSCREEN_POSITION
|
|
30
|
-
};
|
|
31
|
-
// z-index 관련 상수
|
|
32
|
-
var Z_INDEX = exports.Z_INDEX = {
|
|
33
|
-
TOOLTIP_LAYER: 2000 // 툴팁 전역 레이어 기본 z-index
|
|
34
|
-
};
|
|
35
|
-
// 이벤트 관련 상수
|
|
36
|
-
var EVENT_OPTIONS = exports.EVENT_OPTIONS = {
|
|
37
|
-
PASSIVE: {
|
|
38
|
-
passive: true
|
|
39
|
-
},
|
|
40
|
-
ONCE: {
|
|
41
|
-
once: true
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
var TOOLTIP_DEFAULT_VALUE = exports.TOOLTIP_DEFAULT_VALUE = {
|
|
45
|
-
tooltipType: 'white',
|
|
46
|
-
iconType: 'stroke',
|
|
47
|
-
position: 'auto',
|
|
48
|
-
size: 'sm',
|
|
49
|
-
hideArrow: false,
|
|
50
|
-
title: '',
|
|
51
|
-
content: '',
|
|
52
|
-
type: 'short',
|
|
53
|
-
zIndex: Z_INDEX.TOOLTIP_LAYER,
|
|
54
|
-
useShadowDOM: false,
|
|
55
|
-
className: '' // 커스텀 클래스명
|
|
56
|
-
};
|