gnui 1.2.21 → 1.2.22

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.21",
+  "version": "1.2.22",
   "type": "module",
   "main": "dist/js/gnui.js",
   "types": "@types/gnui.d.ts",

package/styleguide/assets/components.js

@@ -342,6 +342,68 @@ const components = {
         { value: '5', cols: ['항목5', '카테고리B', '5000'] }
       ]
     });
+    Gn.create('dropdown', {
+      target: '.new-dropdown6',
+      width: '200px',
+      data: [
+        { value: 'win', text: 'Windows' },
+        { value: 'mac', text: 'macOS' },
+        { value: 'linux', text: 'Linux' },
+        { value: 'android', text: 'Android' },
+        { value: 'ios', text: 'iOS' }
+      ],
+      optionTooltip: {
+        direction: 'right',
+        content: function (option) {
+          var descriptions = {
+            win: '마이크로소프트의 데스크톱 운영체제',
+            mac: '애플의 데스크톱 운영체제',
+            linux: '오픈소스 기반 운영체제',
+            android: '구글의 모바일 운영체제',
+            ios: '애플의 모바일 운영체제'
+          };
+          var desc = descriptions[option.value] || '';
+          return '<div style="min-width:160px"><strong>' + option.text + '</strong><p style="margin:4px 0 0">' + desc + '</p></div>';
+        }
+      }
+    });
+    Gn.create('dropdown', {
+      target: '.new-dropdown7',
+      width: '200px',
+      data: [
+        { value: 'host1', text: '192.168.0.1' },
+        { value: 'host2', text: '192.168.0.2' },
+        { value: 'host3', text: '10.0.0.1' },
+        { value: 'host4', text: '10.0.0.2' }
+      ],
+      optionTooltip: {
+        direction: 'right',
+        fetch: function (option) {
+          return new Promise(function (resolve) {
+            setTimeout(function () {
+              var mockData = {
+                host1: { name: 'Server-A', os: 'Windows Server 2022', status: 'online' },
+                host2: { name: 'Server-B', os: 'Ubuntu 22.04', status: 'online' },
+                host3: { name: 'Router-1', os: 'Cisco IOS', status: 'online' },
+                host4: { name: 'Switch-1', os: 'Cisco NX-OS', status: 'offline' }
+              };
+              var d = mockData[option.value];
+              var statusColor = d.status === 'online' ? 'success' : 'danger';
+              resolve(
+                '<div style="min-width:180px">' +
+                  '<strong>' + d.name + '</strong>' +
+                  '<ul style="margin:6px 0 0;padding:0;list-style:none">' +
+                    '<li>IP: ' + option.text + '</li>' +
+                    '<li>OS: ' + d.os + '</li>' +
+                    '<li>상태: <span class="gn-tag is-' + statusColor + ' is-small">' + d.status + '</span></li>' +
+                  '</ul>' +
+                '</div>'
+              );
+            }, 500);
+          });
+        }
+      }
+    });
   },
   Datagrid: function () {
     Gn.create('datagrid', {
@@ -1659,6 +1721,26 @@ const components = {
       width: '500px',
       height: 150
     });
+    Gn.create('picklist', {
+    target: '.new-picklist-tooltip',
+    data: {
+      source: [
+        { value: '항목1', text: 'item1' },
+        { value: '항목2', text: 'item2' },
+        { value: '항목3', text: 'item3' }
+      ],
+      target: []
+    },
+    optionTooltip: {
+      direction: 'right',
+      content: function(option) {
+        return '<div style="padding: 10px; max-width: 200px;">' + option.text + '에 대한 추가 정보입니다.</div>';
+      }
+    },
+    direction: 'horizontal',
+    width: '500px',
+    height: 150
+  });
   },
   SortableList: function () {
     Gn.create('sortablelist', {

package/styleguide/assets/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 };