gnui 1.2.21 → 1.2.22

package/dist/js/gnui.esm.js

@@ -33521,11 +33521,13 @@ class Dropdown extends GNCoreInstance {
                     : find('select', this.$el).value;
             },
             changeData: (data) => {
+                var _a;
                 this.$options.data = data;
                 this._hidden.flatData();
                 this.$options.hasSearch && this._hidden.resetSearch();
                 this.$template.reRender(find('.dropdown-text', this.$el), this._hidden.renderLabel());
                 this.$template.reRender(find('.dropdown-items > div:not(.dropdown-search)', this.$el), this._hidden.renderSub(data));
+                (_a = this.$options._tooltipCache) === null || _a === void 0 ? void 0 : _a.clear();
             },
             search: (e) => {
                 clearTimeout(this.$options.timer);
@@ -33641,7 +33643,7 @@ class Dropdown extends GNCoreInstance {
                                 (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value)
                                 ? ' is-active'
                                 : '') +
-                            (this.$options.multiple ? ' has-checkbox' : ''), "on-click": isArray$1(option.value) || !displayText ? null : this._hidden.select.bind(this, option), "data-value": isArray$1(option.value) ? '' : option.value, title: displayText ? escapeEntity(String(displayText)) : '' },
+                            (this.$options.multiple ? ' has-checkbox' : ''), "on-click": isArray$1(option.value) || !displayText ? null : this._hidden.select.bind(this, option), "on-mouseenter": this.$options.optionTooltip && displayText && !isArray$1(option.value) ? this._hidden.showOptionTooltip.bind(this, option) : null, "on-mouseleave": this.$options.optionTooltip ? this._hidden.hideOptionTooltip : null, "data-value": isArray$1(option.value) ? '' : option.value, title: displayText ? escapeEntity(String(displayText)) : '' },
                         createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' },
                             option.html ? ('') : renderAsCols ? (createElement$1("div", { className: "gn-checks dropdown-cols" },
                                 this.$options.multiple && (createElement$1("div", { className: "is-small is-no-padding" },
@@ -33718,6 +33720,76 @@ class Dropdown extends GNCoreInstance {
             enable: () => {
                 this.$options.disabled = false;
                 removeClass(this.$el, 'is-disabled');
+            },
+            showOptionTooltip: (option, e) => {
+                var _a;
+                if (!this.$options.optionTooltip || !this.$options._tooltipPanel)
+                    return;
+                const panel = this.$options._tooltipPanel;
+                const direction = this.$options.optionTooltip.direction || 'right';
+                const rect = e.currentTarget.getBoundingClientRect();
+                panel.className = `gn-tooltip is-${direction}`;
+                panel.style.position = 'fixed';
+                panel.style.zIndex = '9999';
+                switch (direction) {
+                    case 'left':
+                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+                        panel.style.left = rect.left + 'px';
+                        break;
+                    case 'top':
+                        panel.style.top = rect.top + 'px';
+                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+                        break;
+                    case 'bottom':
+                        panel.style.top = rect.bottom + 'px';
+                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+                        break;
+                    default:
+                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+                        panel.style.left = (rect.right + 10) + 'px';
+                }
+                addClass(panel, 'is-active');
+                const cacheKey = String(option.value);
+                const cache = this.$options._tooltipCache;
+                if (cache.has(cacheKey)) {
+                    panel.innerHTML = (_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : '';
+                    return;
+                }
+                const { content, fetch: fetchFn } = this.$options.optionTooltip;
+                if (content) {
+                    // content()는 개발자가 제공하는 함수 — XSS 방지는 호출자 책임
+                    const html = content(option);
+                    cache.set(cacheKey, html);
+                    panel.innerHTML = html;
+                }
+                else if (fetchFn) {
+                    const requestId = ++this.$options._tooltipRequestId;
+                    panel.innerHTML = '<div class="gn-loader is-inline"></div>';
+                    try {
+                        fetchFn(option)
+                            .then((html) => {
+                            if (requestId !== this.$options._tooltipRequestId)
+                                return;
+                            cache.set(cacheKey, html);
+                            if (panel.classList.contains('is-active')) {
+                                panel.innerHTML = html;
+                            }
+                        })
+                            .catch(() => {
+                            if (requestId === this.$options._tooltipRequestId) {
+                                removeClass(panel, 'is-active');
+                            }
+                        });
+                    }
+                    catch (_b) {
+                        removeClass(panel, 'is-active');
+                    }
+                }
+            },
+            hideOptionTooltip: () => {
+                if (!this.$options._tooltipPanel)
+                    return;
+                removeClass(this.$options._tooltipPanel, 'is-active');
             }
         };
         this.config = {
@@ -33734,7 +33806,8 @@ class Dropdown extends GNCoreInstance {
             scrollHeight: 0,
             timer: 0,
             disabled: false,
-            multiple: false
+            multiple: false,
+            optionTooltip: undefined
         };
         this.events = {
             onChange: true
@@ -33818,6 +33891,22 @@ class Dropdown extends GNCoreInstance {
                 setValue(this.$options.value, options);
             }
         }
+        if (this.$options.optionTooltip) {
+            this.$options._tooltipCache = new Map();
+            this.$options._tooltipRequestId = 0;
+            const direction = this.$options.optionTooltip.direction || 'right';
+            const panel = document.createElement('div');
+            panel.className = `gn-tooltip is-${direction}`;
+            panel.style.position = 'fixed';
+            panel.style.zIndex = '9999';
+            document.body.appendChild(panel);
+            this.$options._tooltipPanel = panel;
+            this.$options._destroy = () => {
+                if (panel.parentElement) {
+                    panel.parentElement.removeChild(panel);
+                }
+            };
+        }
     }
     isBrandIcon(iconName) {
         const iconLookup = { prefix: 'fab', iconName: iconName };
@@ -40137,7 +40226,7 @@ class Picklist extends GNCoreInstance {
                         : renderAsCols
                             ? (option.cols && option.cols.length ? String(option.cols[0]) : '')
                             : (option.text || option.value);
-                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' + (renderAsCols ? ' picklist-row' : '') + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !displayText ? null : this._hidden.toggle.bind(this), "on-dblclick": !displayText
+                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' + (renderAsCols ? ' picklist-row' : '') + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !displayText ? null : this._hidden.toggle.bind(this), "on-mouseenter": this.$options.optionTooltip && displayText ? this._hidden.showOptionTooltip.bind(this, option) : null, "on-mouseleave": this.$options.optionTooltip ? this._hidden.hideOptionTooltip : null, "on-dblclick": !displayText
                             ? null
                             : this._hidden.move.bind(this, item === 'source' ? 'add' : 'remove', [
                                 {
@@ -40170,12 +40259,86 @@ class Picklist extends GNCoreInstance {
                 removeClass(this.$el, 'is-disabled');
             },
             setSource: (data) => {
+                var _a;
                 this.$options.data.source = data;
                 this._hidden.reRender('source');
+                (_a = this.$options._tooltipCache) === null || _a === void 0 ? void 0 : _a.clear();
             },
             setTarget: (data) => {
+                var _a;
                 this.$options.data.target = data;
                 this._hidden.reRender('target');
+                (_a = this.$options._tooltipCache) === null || _a === void 0 ? void 0 : _a.clear();
+            },
+            showOptionTooltip: (option, e) => {
+                var _a;
+                if (!this.$options.optionTooltip || !this.$options._tooltipPanel)
+                    return;
+                const panel = this.$options._tooltipPanel;
+                const direction = this.$options.optionTooltip.direction || 'right';
+                const rect = e.currentTarget.getBoundingClientRect();
+                panel.className = `gn-tooltip is-${direction}`;
+                panel.style.position = 'fixed';
+                panel.style.zIndex = '9999';
+                switch (direction) {
+                    case 'left':
+                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+                        panel.style.left = rect.left + 'px';
+                        break;
+                    case 'top':
+                        panel.style.top = rect.top + 'px';
+                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+                        break;
+                    case 'bottom':
+                        panel.style.top = rect.bottom + 'px';
+                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+                        break;
+                    default:
+                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+                        panel.style.left = (rect.right + 10) + 'px';
+                }
+                addClass(panel, 'is-active');
+                const cacheKey = option.value;
+                const cache = this.$options._tooltipCache;
+                if (cache.has(cacheKey)) {
+                    panel.innerHTML = (_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : '';
+                    return;
+                }
+                const { content, fetch: fetchFn } = this.$options.optionTooltip;
+                if (content) {
+                    // content()는 개발자가 제공하는 함수 — XSS 방지는 호출자 책임
+                    const html = content(option);
+                    cache.set(cacheKey, html);
+                    panel.innerHTML = html;
+                }
+                else if (fetchFn) {
+                    const requestId = ++this.$options._tooltipRequestId;
+                    panel.innerHTML = '<div class="gn-loader is-inline"></div>';
+                    try {
+                        fetchFn(option)
+                            .then((html) => {
+                            if (requestId !== this.$options._tooltipRequestId)
+                                return;
+                            cache.set(cacheKey, html);
+                            if (panel.classList.contains('is-active')) {
+                                panel.innerHTML = html;
+                            }
+                        })
+                            .catch(() => {
+                            if (requestId === this.$options._tooltipRequestId) {
+                                removeClass(panel, 'is-active');
+                            }
+                        });
+                    }
+                    catch (_b) {
+                        removeClass(panel, 'is-active');
+                    }
+                }
+            },
+            hideOptionTooltip: () => {
+                if (!this.$options._tooltipPanel)
+                    return;
+                removeClass(this.$options._tooltipPanel, 'is-active');
             }
         };
         this.config = {
@@ -40204,7 +40367,8 @@ class Picklist extends GNCoreInstance {
             hasSourceSearch: false,
             hasTargetSearch: false,
             orderable: true,
-            height: 150
+            height: 150,
+            optionTooltip: undefined
         };
         this.events = {
             onChange: true,
@@ -40313,6 +40477,22 @@ class Picklist extends GNCoreInstance {
         if (this.$options.textSets.targetCaption.length > 0) {
             style(find('.picklist-target .dropdown-items', this.$el), 'height', getUnit('height', getNumber(this.$options.height) - getNumber(style(find('.picklist-target .picklist-caption', this.$el), 'height'))));
         }
+        if (this.$options.optionTooltip) {
+            this.$options._tooltipCache = new Map();
+            this.$options._tooltipRequestId = 0;
+            const direction = this.$options.optionTooltip.direction || 'right';
+            const panel = document.createElement('div');
+            panel.className = `gn-tooltip is-${direction}`;
+            panel.style.position = 'fixed';
+            panel.style.zIndex = '9999';
+            document.body.appendChild(panel);
+            this.$options._tooltipPanel = panel;
+            this.$options._destroy = () => {
+                if (panel.parentElement) {
+                    panel.parentElement.removeChild(panel);
+                }
+            };
+        }
     }
     isBrandIcon(iconName) {
         const iconLookup = { prefix: 'fab', iconName: iconName };

package/dist/js/gnui.js

@@ -33527,11 +33527,13 @@
 	                    : find('select', this.$el).value;
 	            },
 	            changeData: (data) => {
+	                var _a;
 	                this.$options.data = data;
 	                this._hidden.flatData();
 	                this.$options.hasSearch && this._hidden.resetSearch();
 	                this.$template.reRender(find('.dropdown-text', this.$el), this._hidden.renderLabel());
 	                this.$template.reRender(find('.dropdown-items > div:not(.dropdown-search)', this.$el), this._hidden.renderSub(data));
+	                (_a = this.$options._tooltipCache) === null || _a === void 0 ? void 0 : _a.clear();
 	            },
 	            search: (e) => {
 	                clearTimeout(this.$options.timer);
@@ -33647,7 +33649,7 @@
 	                                (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value)
 	                                ? ' is-active'
 	                                : '') +
-	                            (this.$options.multiple ? ' has-checkbox' : ''), "on-click": isArray$1(option.value) || !displayText ? null : this._hidden.select.bind(this, option), "data-value": isArray$1(option.value) ? '' : option.value, title: displayText ? escapeEntity(String(displayText)) : '' },
+	                            (this.$options.multiple ? ' has-checkbox' : ''), "on-click": isArray$1(option.value) || !displayText ? null : this._hidden.select.bind(this, option), "on-mouseenter": this.$options.optionTooltip && displayText && !isArray$1(option.value) ? this._hidden.showOptionTooltip.bind(this, option) : null, "on-mouseleave": this.$options.optionTooltip ? this._hidden.hideOptionTooltip : null, "data-value": isArray$1(option.value) ? '' : option.value, title: displayText ? escapeEntity(String(displayText)) : '' },
 	                        createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' },
 	                            option.html ? ('') : renderAsCols ? (createElement$1("div", { className: "gn-checks dropdown-cols" },
 	                                this.$options.multiple && (createElement$1("div", { className: "is-small is-no-padding" },
@@ -33724,6 +33726,76 @@
 	            enable: () => {
 	                this.$options.disabled = false;
 	                removeClass(this.$el, 'is-disabled');
+	            },
+	            showOptionTooltip: (option, e) => {
+	                var _a;
+	                if (!this.$options.optionTooltip || !this.$options._tooltipPanel)
+	                    return;
+	                const panel = this.$options._tooltipPanel;
+	                const direction = this.$options.optionTooltip.direction || 'right';
+	                const rect = e.currentTarget.getBoundingClientRect();
+	                panel.className = `gn-tooltip is-${direction}`;
+	                panel.style.position = 'fixed';
+	                panel.style.zIndex = '9999';
+	                switch (direction) {
+	                    case 'left':
+	                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+	                        panel.style.left = rect.left + 'px';
+	                        break;
+	                    case 'top':
+	                        panel.style.top = rect.top + 'px';
+	                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+	                        break;
+	                    case 'bottom':
+	                        panel.style.top = rect.bottom + 'px';
+	                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+	                        break;
+	                    default:
+	                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+	                        panel.style.left = (rect.right + 10) + 'px';
+	                }
+	                addClass(panel, 'is-active');
+	                const cacheKey = String(option.value);
+	                const cache = this.$options._tooltipCache;
+	                if (cache.has(cacheKey)) {
+	                    panel.innerHTML = (_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : '';
+	                    return;
+	                }
+	                const { content, fetch: fetchFn } = this.$options.optionTooltip;
+	                if (content) {
+	                    // content()는 개발자가 제공하는 함수 — XSS 방지는 호출자 책임
+	                    const html = content(option);
+	                    cache.set(cacheKey, html);
+	                    panel.innerHTML = html;
+	                }
+	                else if (fetchFn) {
+	                    const requestId = ++this.$options._tooltipRequestId;
+	                    panel.innerHTML = '<div class="gn-loader is-inline"></div>';
+	                    try {
+	                        fetchFn(option)
+	                            .then((html) => {
+	                            if (requestId !== this.$options._tooltipRequestId)
+	                                return;
+	                            cache.set(cacheKey, html);
+	                            if (panel.classList.contains('is-active')) {
+	                                panel.innerHTML = html;
+	                            }
+	                        })
+	                            .catch(() => {
+	                            if (requestId === this.$options._tooltipRequestId) {
+	                                removeClass(panel, 'is-active');
+	                            }
+	                        });
+	                    }
+	                    catch (_b) {
+	                        removeClass(panel, 'is-active');
+	                    }
+	                }
+	            },
+	            hideOptionTooltip: () => {
+	                if (!this.$options._tooltipPanel)
+	                    return;
+	                removeClass(this.$options._tooltipPanel, 'is-active');
 	            }
 	        };
 	        this.config = {
@@ -33740,7 +33812,8 @@
 	            scrollHeight: 0,
 	            timer: 0,
 	            disabled: false,
-	            multiple: false
+	            multiple: false,
+	            optionTooltip: undefined
 	        };
 	        this.events = {
 	            onChange: true
@@ -33824,6 +33897,22 @@
 	                setValue(this.$options.value, options);
 	            }
 	        }
+	        if (this.$options.optionTooltip) {
+	            this.$options._tooltipCache = new Map();
+	            this.$options._tooltipRequestId = 0;
+	            const direction = this.$options.optionTooltip.direction || 'right';
+	            const panel = document.createElement('div');
+	            panel.className = `gn-tooltip is-${direction}`;
+	            panel.style.position = 'fixed';
+	            panel.style.zIndex = '9999';
+	            document.body.appendChild(panel);
+	            this.$options._tooltipPanel = panel;
+	            this.$options._destroy = () => {
+	                if (panel.parentElement) {
+	                    panel.parentElement.removeChild(panel);
+	                }
+	            };
+	        }
 	    }
 	    isBrandIcon(iconName) {
 	        const iconLookup = { prefix: 'fab', iconName: iconName };
@@ -40143,7 +40232,7 @@
 	                        : renderAsCols
 	                            ? (option.cols && option.cols.length ? String(option.cols[0]) : '')
 	                            : (option.text || option.value);
-	                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' + (renderAsCols ? ' picklist-row' : '') + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !displayText ? null : this._hidden.toggle.bind(this), "on-dblclick": !displayText
+	                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' + (renderAsCols ? ' picklist-row' : '') + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !displayText ? null : this._hidden.toggle.bind(this), "on-mouseenter": this.$options.optionTooltip && displayText ? this._hidden.showOptionTooltip.bind(this, option) : null, "on-mouseleave": this.$options.optionTooltip ? this._hidden.hideOptionTooltip : null, "on-dblclick": !displayText
 	                            ? null
 	                            : this._hidden.move.bind(this, item === 'source' ? 'add' : 'remove', [
 	                                {
@@ -40176,12 +40265,86 @@
 	                removeClass(this.$el, 'is-disabled');
 	            },
 	            setSource: (data) => {
+	                var _a;
 	                this.$options.data.source = data;
 	                this._hidden.reRender('source');
+	                (_a = this.$options._tooltipCache) === null || _a === void 0 ? void 0 : _a.clear();
 	            },
 	            setTarget: (data) => {
+	                var _a;
 	                this.$options.data.target = data;
 	                this._hidden.reRender('target');
+	                (_a = this.$options._tooltipCache) === null || _a === void 0 ? void 0 : _a.clear();
+	            },
+	            showOptionTooltip: (option, e) => {
+	                var _a;
+	                if (!this.$options.optionTooltip || !this.$options._tooltipPanel)
+	                    return;
+	                const panel = this.$options._tooltipPanel;
+	                const direction = this.$options.optionTooltip.direction || 'right';
+	                const rect = e.currentTarget.getBoundingClientRect();
+	                panel.className = `gn-tooltip is-${direction}`;
+	                panel.style.position = 'fixed';
+	                panel.style.zIndex = '9999';
+	                switch (direction) {
+	                    case 'left':
+	                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+	                        panel.style.left = rect.left + 'px';
+	                        break;
+	                    case 'top':
+	                        panel.style.top = rect.top + 'px';
+	                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+	                        break;
+	                    case 'bottom':
+	                        panel.style.top = rect.bottom + 'px';
+	                        panel.style.left = (rect.left + rect.width / 2) + 'px';
+	                        break;
+	                    default:
+	                        panel.style.top = (rect.top + rect.height / 2) + 'px';
+	                        panel.style.left = (rect.right + 10) + 'px';
+	                }
+	                addClass(panel, 'is-active');
+	                const cacheKey = option.value;
+	                const cache = this.$options._tooltipCache;
+	                if (cache.has(cacheKey)) {
+	                    panel.innerHTML = (_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : '';
+	                    return;
+	                }
+	                const { content, fetch: fetchFn } = this.$options.optionTooltip;
+	                if (content) {
+	                    // content()는 개발자가 제공하는 함수 — XSS 방지는 호출자 책임
+	                    const html = content(option);
+	                    cache.set(cacheKey, html);
+	                    panel.innerHTML = html;
+	                }
+	                else if (fetchFn) {
+	                    const requestId = ++this.$options._tooltipRequestId;
+	                    panel.innerHTML = '<div class="gn-loader is-inline"></div>';
+	                    try {
+	                        fetchFn(option)
+	                            .then((html) => {
+	                            if (requestId !== this.$options._tooltipRequestId)
+	                                return;
+	                            cache.set(cacheKey, html);
+	                            if (panel.classList.contains('is-active')) {
+	                                panel.innerHTML = html;
+	                            }
+	                        })
+	                            .catch(() => {
+	                            if (requestId === this.$options._tooltipRequestId) {
+	                                removeClass(panel, 'is-active');
+	                            }
+	                        });
+	                    }
+	                    catch (_b) {
+	                        removeClass(panel, 'is-active');
+	                    }
+	                }
+	            },
+	            hideOptionTooltip: () => {
+	                if (!this.$options._tooltipPanel)
+	                    return;
+	                removeClass(this.$options._tooltipPanel, 'is-active');
 	            }
 	        };
 	        this.config = {
@@ -40210,7 +40373,8 @@
 	            hasSourceSearch: false,
 	            hasTargetSearch: false,
 	            orderable: true,
-	            height: 150
+	            height: 150,
+	            optionTooltip: undefined
 	        };
 	        this.events = {
 	            onChange: true,
@@ -40319,6 +40483,22 @@
 	        if (this.$options.textSets.targetCaption.length > 0) {
 	            style(find('.picklist-target .dropdown-items', this.$el), 'height', getUnit('height', getNumber(this.$options.height) - getNumber(style(find('.picklist-target .picklist-caption', this.$el), 'height'))));
 	        }
+	        if (this.$options.optionTooltip) {
+	            this.$options._tooltipCache = new Map();
+	            this.$options._tooltipRequestId = 0;
+	            const direction = this.$options.optionTooltip.direction || 'right';
+	            const panel = document.createElement('div');
+	            panel.className = `gn-tooltip is-${direction}`;
+	            panel.style.position = 'fixed';
+	            panel.style.zIndex = '9999';
+	            document.body.appendChild(panel);
+	            this.$options._tooltipPanel = panel;
+	            this.$options._destroy = () => {
+	                if (panel.parentElement) {
+	                    panel.parentElement.removeChild(panel);
+	                }
+	            };
+	        }
 	    }
 	    isBrandIcon(iconName) {
 	        const iconLookup = { prefix: 'fab', iconName: iconName };