gnui 1.2.20 → 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 };
@@ -34549,7 +34638,7 @@ class Chart extends GNCoreInstance {
         const newOptions = merge(this.chartDefault, merge(chartOptions, typesDefault[this.$options.type] || {}));
         if (!newOptions.theme) {
             newOptions.theme = {
-                palette: 'palette4'
+                palette: 'palette1'
             };
         }
         this.$options.chart = new ApexCharts$1(this.$el, newOptions);
@@ -37219,6 +37308,13 @@ class DataGrid extends GNCoreInstance {
                 this.$event(this, 'onSort', column);
             },
             renderHeader: (columns, isReset = false) => {
+                if (this._isHorizontalState()) {
+                    return (createElement$1("div", { className: "gn-datagrid-header-row is-horizontal" },
+                        createElement$1("div", { className: "gn-datagrid-header-cell is-horizontal" }, this.$options.hasCheck && (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
+                            createElement$1("input", { type: "checkbox", className: "is-allChecker", id: this._uid + '-rows-check', "on-click": (e) => {
+                                    this._hidden.checkAll.call(this, e);
+                                }, disabled: this.$options.disabled }))))));
+                }
                 this._setColumnsTemplate(isReset);
                 return (createElement$1("div", { className: "gn-datagrid-header-row", style: {
                         'grid-template-columns': this._columnsTemplate.join(' ')
@@ -37259,15 +37355,24 @@ class DataGrid extends GNCoreInstance {
             },
             renderBody: (data, columns) => {
                 // 헤더가 숨겨진 경우에도 body 렌더 전에 템플릿 폭을 준비한다
-                if (!this._columnsTemplate || !this._columnsTemplate.length) {
+                if (!this._isHorizontalState() && (!this._columnsTemplate || !this._columnsTemplate.length)) {
                     this._setColumnsTemplate();
                 }
                 rowIdx$1 = 0;
-                return (createElement$1("div", { className: "gn-datagrid-body", style: {
+                return (createElement$1("div", { className: 'gn-datagrid-body' + (this._isHorizontalState() ? ' is-horizontal' : ''), style: {
+                        'grid-template-columns': this._isHorizontalState()
+                            ? this._orientationState.columns === 'auto-fit'
+                                ? `repeat(auto-fit, minmax(${this._orientationState.minWidth}, 1fr))`
+                                : `repeat(${this._orientationState.columns}, minmax(0, 1fr))`
+                            : '',
+                        gap: this._isHorizontalState() ? this._orientationState.gap : '',
                         maxHeight: this.$options.bodyHeight ? this.$options.bodyHeight : 'auto'
                     } }, (data === null || data === void 0 ? void 0 : data.length) ? this._hidden.renderRows(data, columns) : this._hidden.renderNodata()));
             },
             renderRows: (rows, columns, depth = 0, isOpen = false) => {
+                if (this._isHorizontalState()) {
+                    return rows.map((row) => this._hidden.renderRow(row, columns, 0, false, false));
+                }
                 return rows.map((row) => {
                     return row[this.$options.childField] && isArray$1(row[this.$options.childField])
                         ? [this._hidden.renderRow(row, columns, depth, true, isOpen), this._hidden.renderRows(row[this.$options.childField], columns, depth + 1, row.isOpened)]
@@ -37276,6 +37381,23 @@ class DataGrid extends GNCoreInstance {
             },
             renderRow: (row, columns, depth = 0, hasChild, isOpened, isCheck = false) => {
                 const _index = rowIdx$1++;
+                const getHorizontalRowClass = () => {
+                    if (!this._isHorizontalState() || this._orientationState.columns === 'auto-fit') {
+                        return '';
+                    }
+                    const classes = ['is-horizontal'];
+                    if (_index % this._orientationState.columns === 0) {
+                        classes.push('is-horizontal-first-col');
+                    }
+                    if ((_index + 1) % this._orientationState.columns === 0 || _index === this.$options.data.length - 1) {
+                        classes.push('is-horizontal-last-col');
+                    }
+                    if (_index < this._orientationState.columns) {
+                        classes.push('is-horizontal-first-row');
+                    }
+                    return ' ' + classes.join(' ');
+                };
+                const horizontalClass = getHorizontalRowClass();
                 if (row.isChecked) {
                     isCheck = true;
                 }
@@ -37285,76 +37407,114 @@ class DataGrid extends GNCoreInstance {
                     }, "on-dblclick": (e) => {
                         var _a;
                         ((_a = this === null || this === void 0 ? void 0 : this.$options) === null || _a === void 0 ? void 0 : _a.onDoubleClick) && !this.$options.disabled && this._hidden.doubleSelect.call(this, row, _index, e);
-                    }, className: 'gn-datagrid-body-row' + (hasChild ? ' has-child' : '') + (row.isOpened ? '' : ' is-collapsed') + (depth > 0 && !isOpened ? ' is-hidden' : '') + (row.color ? ` ${row.color}` : ''), style: {
-                        'grid-template-columns': this._columnsTemplate.join(' ')
-                    }, id: this._uid + '-row-' + _index, "data-depth": depth }, columns.map((col, idx) => {
-                    const cellStyle = {};
-                    if (col.bodyStyle || col.style) {
-                        each(col.bodyStyle || col.style, (value, key) => {
-                            if (key !== 'width') {
-                                cellStyle[key] = value;
-                            }
-                        });
-                    }
-                    if (idx === 0 && depth !== 0) {
-                        cellStyle.paddingLeft = depth * 15 + 10 + 'px';
-                    }
-                    if (isIE) {
-                        cellStyle.display = 'inline-block';
-                    }
-                    if (col.key === 'btnOrder') {
-                        cellStyle.display = 'flex';
-                        cellStyle.padding = '0';
-                        cellStyle['justify-content'] = 'space-evenly';
-                        cellStyle['align-items'] = 'center';
-                        return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : ''), style: cellStyle, "on-click": (e) => {
-                                this._hidden.stopRowSelectEvent(e);
-                            } },
-                            createElement$1("span", { className: 'gn-icon btn-order ' + (_index == 0 ? 'is-cancel' : 'is-info'), "on-click": () => {
-                                    !this.$options.disabled && this._hidden.moveRowUp.call(this, _index);
-                                } },
-                                createElement$1("i", { className: "fas fa-arrow-circle-up" })),
-                            createElement$1("span", { className: 'gn-icon btn-order ' + (_index == this.$options.data.length - 1 ? 'is-cancel' : 'is-info'), "on-click": () => {
-                                    !this.$options.disabled && this._hidden.moveRowDown.call(this, _index);
+                    }, className: 'gn-datagrid-body-row' +
+                        (hasChild ? ' has-child' : '') +
+                        (row.isOpened ? '' : ' is-collapsed') +
+                        (depth > 0 && !isOpened ? ' is-hidden' : '') +
+                        (row.color ? ` ${row.color}` : '') +
+                        horizontalClass, style: {
+                        'grid-template-columns': this._isHorizontalState() ? '' : this._columnsTemplate.join(' ')
+                    }, id: this._uid + '-row-' + _index, "data-depth": depth },
+                    this._isHorizontalState() && this._hidden.renderHorizontalCardHeader(row, _index, hasChild, isCheck),
+                    columns.map((col, idx) => {
+                        const cellStyle = {};
+                        if (col.bodyStyle || col.style) {
+                            each(col.bodyStyle || col.style, (value, key) => {
+                                if (key !== 'width') {
+                                    cellStyle[key] = value;
+                                }
+                            });
+                        }
+                        if (idx === 0 && depth !== 0) {
+                            cellStyle.paddingLeft = depth * 15 + 10 + 'px';
+                        }
+                        if (isIE) {
+                            cellStyle.display = 'inline-block';
+                        }
+                        if (col.key === 'btnOrder') {
+                            cellStyle.display = 'flex';
+                            cellStyle.padding = '0';
+                            cellStyle['justify-content'] = 'space-evenly';
+                            cellStyle['align-items'] = 'center';
+                            return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : '') + (this._isHorizontalState() ? ' is-horizontal' : ''), style: cellStyle, "data-key": col.key, "on-click": (e) => {
+                                    this._hidden.stopRowSelectEvent(e);
                                 } },
-                                createElement$1("i", { className: "fas fa-arrow-circle-down" }))));
-                    }
-                    if (col.key === 'btnDelete') {
-                        cellStyle.display = 'flex';
-                        cellStyle['justify-content'] = 'center';
-                        cellStyle['align-items'] = 'center';
-                        return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : ''), style: cellStyle, "on-click": (e) => {
-                                this._hidden.stopRowSelectEvent(e);
-                            } },
-                            createElement$1("span", { className: "gn-icon is-small is-mono", "on-click": () => {
-                                    !this.$options.disabled && this._hidden.deleteRow.call(this, _index);
+                                createElement$1("span", { className: 'gn-icon btn-order ' + (_index == 0 ? 'is-cancel' : 'is-info'), "on-click": () => {
+                                        !this.$options.disabled && this._hidden.moveRowUp.call(this, _index);
+                                    } },
+                                    createElement$1("i", { className: "fas fa-arrow-circle-up" })),
+                                createElement$1("span", { className: 'gn-icon btn-order ' + (_index == this.$options.data.length - 1 ? 'is-cancel' : 'is-info'), "on-click": () => {
+                                        !this.$options.disabled && this._hidden.moveRowDown.call(this, _index);
+                                    } },
+                                    createElement$1("i", { className: "fas fa-arrow-circle-down" }))));
+                        }
+                        if (col.key === 'btnDelete') {
+                            cellStyle.display = 'flex';
+                            cellStyle['justify-content'] = 'center';
+                            cellStyle['align-items'] = 'center';
+                            return (createElement$1("div", { className: 'gn-datagrid-body-cell btn-container ' + (col.key ? col.key : '') + (this._isHorizontalState() ? ' is-horizontal' : ''), style: cellStyle, "data-key": col.key, "on-click": (e) => {
+                                    this._hidden.stopRowSelectEvent(e);
                                 } },
-                                createElement$1("i", { className: "fas fa-trash" }))));
-                    }
-                    return (createElement$1("div", { className: 'gn-datagrid-body-cell ' +
-                            (col.bodyClass ? col.bodyClass : col.className ? col.className : '') +
-                            (isFunction(col.onSelect) ? ' is-selectable' : '') +
-                            (col.isHidden ? ' is-unvisible' : ''), "data-key": col.key, style: cellStyle, "on-click": (e) => {
-                            col.onSelect && !this.$options.disabled && this._hidden.selectCell.call(this, col, row, _index, e);
-                        }, "on-mouseenter": (e) => {
-                            col.onHover && !this.$options.disabled && this._hidden.hoverCell.call(this, col, row, _index, e);
-                        }, "on-mouseleave": (e) => {
-                            col.offHover && this._hidden.blurCell.call(this, col, row, _index, e);
-                        }, title: col.tipField && row[col.tipField] ? row[col.tipField] : !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild, isCheck, _index)));
-                })));
-            },
-            renderCell: (row, col, idx, hasChild, isCheck, _index) => {
+                                createElement$1("span", { className: "gn-icon is-small is-mono", "on-click": () => {
+                                        !this.$options.disabled && this._hidden.deleteRow.call(this, _index);
+                                    } },
+                                    createElement$1("i", { className: "fas fa-trash" }))));
+                        }
+                        return (createElement$1("div", { className: 'gn-datagrid-body-cell ' +
+                                (col.bodyClass ? col.bodyClass : col.className ? col.className : '') +
+                                (isFunction(col.onSelect) ? ' is-selectable' : '') +
+                                (col.isHidden ? ' is-unvisible' : '') +
+                                (this._isHorizontalState() ? ' is-horizontal' : ''), "data-key": col.key, style: cellStyle, "on-click": (e) => {
+                                col.onSelect && !this.$options.disabled && this._hidden.selectCell.call(this, col, row, _index, e);
+                            }, "on-mouseenter": (e) => {
+                                col.onHover && !this.$options.disabled && this._hidden.hoverCell.call(this, col, row, _index, e);
+                            }, "on-mouseleave": (e) => {
+                                col.offHover && this._hidden.blurCell.call(this, col, row, _index, e);
+                            }, title: col.tipField && row[col.tipField] ? row[col.tipField] : !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild, isCheck, _index)));
+                    })));
+            },
+            renderHorizontalCellLabel: (col) => {
+                if (this._isSystemAddedColumn(col.key)) {
+                    return null;
+                }
+                return createElement$1("span", { className: "gn-datagrid-cell-label" }, col.label);
+            },
+            renderHorizontalCardHeader: (row, index, hasChild, isCheck) => {
+                const hasHeader = this.$options.hasCheck || (this.$options.hasDelete && !this.$options.readonly);
+                const showCheck = this.$options.hasCheck && row.noCheck !== true && row.noCheck !== 'true';
+                const showDelete = this.$options.hasDelete && !this.$options.readonly;
+                if (!hasHeader) {
+                    return null;
+                }
+                return (createElement$1("div", { className: "gn-datagrid-card-header" },
+                    createElement$1("div", { className: "gn-datagrid-card-header-left" }, showCheck && (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
+                        createElement$1("input", { type: "checkbox", id: this._uid + '-row-check-' + index, className: "is-rowChecker", "on-click": (e) => {
+                                this._hidden.check.call(this, row, e);
+                            }, defaultChecked: isCheck, disabled: this.$options.disabled || row.disabled })))),
+                    createElement$1("div", { className: "gn-datagrid-card-header-right" }, showDelete && (createElement$1("span", { className: "gn-icon is-small is-mono", "on-click": (e) => {
+                            this._hidden.stopRowSelectEvent(e);
+                            !this.$options.disabled && this._hidden.deleteRow.call(this, index);
+                        } },
+                        createElement$1("i", { className: "fas fa-trash" }))))));
+            },
+            renderCellValue: (row, col, idx, hasChild, isCheck, _index) => {
                 return [
-                    idx === 0 && hasChild ? (createElement$1("span", { className: "is-toggler", "on-click": (e) => {
+                    idx === 0 && hasChild && !this._isHorizontalState() ? (createElement$1("span", { className: "is-toggler", "on-click": (e) => {
                             !this.$options.disabled && this._hidden.toggle.call(this, row, e);
                         } })) : (''),
-                    idx === 0 && this.$options.hasCheck && row.noCheck !== true && row.noCheck !== 'true' ? (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
+                    idx === 0 && this.$options.hasCheck && row.noCheck !== true && row.noCheck !== 'true' && !this._isHorizontalState() ? (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
                         createElement$1("input", { type: "checkbox", id: this._uid + '-row-check-' + _index, className: "is-rowChecker", "on-click": (e) => {
                                 this._hidden.check.call(this, row, e);
                             }, defaultChecked: isCheck, disabled: this.$options.disabled || row.disabled }))) : (''),
                     col.template ? createElement$1("span", { className: "gn-datagrid-cell", innerHTML: col.template(col.key, row, col) }) : row[col.key] !== undefined ? row[col.key] : ''
                 ];
             },
+            renderCell: (row, col, idx, hasChild, isCheck, _index) => {
+                if (this._isHorizontalState()) {
+                    return [this._hidden.renderHorizontalCellLabel(col), createElement$1("div", { className: "gn-datagrid-cell-value" }, this._hidden.renderCellValue(row, col, idx, hasChild, isCheck, _index))];
+                }
+                return this._hidden.renderCellValue(row, col, idx, hasChild, isCheck, _index);
+            },
             renderNodata: () => {
                 return (createElement$1("div", { className: "gn-datagrid-body-row is-nodata" },
                     createElement$1("div", { className: "gn-datagrid-body-cell has-text-center" }, this.$options.textSets.noData)));
@@ -37440,7 +37600,10 @@ class DataGrid extends GNCoreInstance {
                 });
                 this.$event(this, 'onCheckAll', e.target.checked);
             },
-            showDetail(index, headerKeys, rawDataKeys) {
+            showDetail: (index, headerKeys, rawDataKeys) => {
+                if (this._isHorizontalState()) {
+                    return;
+                }
                 const rows = findAll(`.gn-datagrid-body > .gn-datagrid-body-row`, this.$el);
                 const row = rows[+index];
                 if (next(row) && hasClass(next(row), 'gn-datagrid-body-row-detail')) {
@@ -37527,6 +37690,7 @@ class DataGrid extends GNCoreInstance {
             },
             reRender: ({ headers, data, hasCheck }) => {
                 return new Promise(resolve => {
+                    this._refreshOrientationState(this.$options);
                     if (hasCheck === undefined) {
                         hasCheck = this.$options.hasCheck;
                     }
@@ -37735,8 +37899,8 @@ class DataGrid extends GNCoreInstance {
                 visibles.forEach((visible, index) => {
                     const colNumber = index + 1;
                     !visible
-                        ? addClass(findAll('.gn-datagrid-body-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible')
-                        : removeClass(findAll('.gn-datagrid-body-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible');
+                        ? addClass(findAll(`.gn-datagrid-body-cell[data-key="${this.$options.headers[index].key}"]`, this.$el), 'is-unvisible')
+                        : removeClass(findAll(`.gn-datagrid-body-cell[data-key="${this.$options.headers[index].key}"]`, this.$el), 'is-unvisible');
                     !visible
                         ? addClass(findAll('.gn-datagrid-header-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible')
                         : removeClass(findAll('.gn-datagrid-header-cell:nth-child(' + colNumber + ')', this.$el), 'is-unvisible');
@@ -37781,6 +37945,13 @@ class DataGrid extends GNCoreInstance {
                 removeClass(this.$el, 'is-disabled');
             }
         };
+        this._orientationState = {
+            orientation: 'vertical',
+            columns: 1,
+            gap: 0,
+            minWidth: 240,
+            hasGap: false
+        };
         this.config = {
             width: '100%',
             hasCheck: false,
@@ -37795,6 +37966,7 @@ class DataGrid extends GNCoreInstance {
                 deleteLabel: '',
                 deleteConfirmMessage: ''
             },
+            orientation: 'vertical',
             childField: 'child',
             checkCapturing: true,
             sort: {
@@ -37815,10 +37987,10 @@ class DataGrid extends GNCoreInstance {
             onDelete: true
         };
         this.methods = {
-            reRender(options) {
+            reRender: (options) => {
                 return this._hidden.reRender(options);
             },
-            resetData(data) {
+            resetData: (data) => {
                 if (isFunction(data)) {
                     this.$options.asyncData = data;
                     data = [];
@@ -37827,45 +37999,60 @@ class DataGrid extends GNCoreInstance {
                 }
                 return this._hidden.resetData(arrClone(data));
             },
-            addChild(index, data) {
+            addChild: (index, data) => {
+                if (this._isHorizontalState()) {
+                    return;
+                }
                 this._hidden.addChild(index, arrClone(data));
             },
-            addRow(data) {
+            addRow: (data) => {
+                if (this._isHorizontalState()) {
+                    return;
+                }
                 this._hidden.addChild(null, arrClone(data));
                 this.$options.data = this.$options.data.concat(data);
             },
-            expand(index) {
+            expand: (index) => {
+                if (this._isHorizontalState()) {
+                    return;
+                }
                 this._hidden.expand(index);
             },
-            collapse(index) {
+            collapse: (index) => {
+                if (this._isHorizontalState()) {
+                    return;
+                }
                 this._hidden.collapse(index);
             },
-            getChecked() {
+            getChecked: () => {
                 return this._hidden.getChecked();
             },
-            hideCols(keys) {
+            hideCols: (keys) => {
                 this._hidden.hideCols(keys);
             },
-            showCols(keys) {
+            showCols: (keys) => {
                 this._hidden.showCols(keys);
             },
-            showAll() {
+            showAll: () => {
                 this._hidden.showAll();
             },
-            showDetail(index, headerKeys, rawDataKeys) {
+            showDetail: (index, headerKeys, rawDataKeys) => {
+                if (this._isHorizontalState()) {
+                    return;
+                }
                 this._hidden.showDetail.call(this, index, headerKeys, rawDataKeys);
             },
-            selectRow(index, rowData) {
+            selectRow: (index, rowData) => {
                 let row = rowData;
                 if (!row) {
                     row = this.$options.data[index];
                 }
                 !this.$options.disable && this._hidden.selectRow(row, index);
             },
-            disable() {
+            disable: () => {
                 this._hidden.disable();
             },
-            enable() {
+            enable: () => {
                 this._hidden.enable();
             }
         };
@@ -37918,6 +38105,34 @@ class DataGrid extends GNCoreInstance {
             });
         }
     }
+    // 렌더에서 바로 쓸 수 있는 orientation 상태를 만든다.
+    _resolveOrientationState(config = this.$options) {
+        var _a, _b, _c, _d, _e;
+        const orientation = (config === null || config === void 0 ? void 0 : config.orientation) === 'horizontal' ? 'horizontal' : 'vertical';
+        const optionColumns = (_a = config === null || config === void 0 ? void 0 : config.orientationOptions) === null || _a === void 0 ? void 0 : _a.columns;
+        const columns = optionColumns === 'auto-fit' ? optionColumns : Number.isInteger(Number(optionColumns)) && Number(optionColumns) > 0 ? Number(optionColumns) : 1;
+        const optionGap = (_c = (_b = config === null || config === void 0 ? void 0 : config.orientationOptions) === null || _b === void 0 ? void 0 : _b.gap) !== null && _c !== void 0 ? _c : 0;
+        const isZeroLikeGap = optionGap === 0 || optionGap === '0' || optionGap === '0px' || optionGap === '';
+        const gap = columns === 'auto-fit' && isZeroLikeGap ? '5px' : isZeroLikeGap ? 0 : typeof optionGap === 'number' ? optionGap + 'px' : optionGap;
+        const rawMinWidth = (_e = (_d = config.orientationOptions) === null || _d === void 0 ? void 0 : _d.minWidth) !== null && _e !== void 0 ? _e : 240;
+        const minWidth = typeof rawMinWidth === 'number' ? rawMinWidth + 'px' : rawMinWidth;
+        return {
+            orientation,
+            columns,
+            gap,
+            minWidth,
+            hasGap: gap !== 0
+        };
+    }
+    // 실제 옵션이 갱신될 때 내부 orientation 상태를 새로 계산한다.
+    _refreshOrientationState(config = this.$options) {
+        this._orientationState = this._resolveOrientationState(config);
+        return this._orientationState;
+    }
+    // 내부 렌더 분기에서는 orientationState만 기준으로 사용한다.
+    _isHorizontalState() {
+        return this._orientationState.orientation === 'horizontal';
+    }
     _isSystemAddedColumn(key) {
         return ['btnOrder', 'btnDelete'].includes(key);
     }
@@ -37925,6 +38140,10 @@ class DataGrid extends GNCoreInstance {
     _prepareHeaders(headers = []) {
         const hasOrderColumn = headers.some((header) => header.key === 'btnOrder');
         const hasDeleteColumn = headers.some((header) => header.key === 'btnDelete');
+        const horizontal = this._isHorizontalState();
+        if (horizontal) {
+            headers = headers.map((header) => (Object.assign(Object.assign({}, header), { sortable: false, draggable: false })));
+        }
         if (this.$options.hasOrder && !this.$options.readonly && !hasOrderColumn) {
             headers.push({
                 label: this.$options.textSets.orderLabel,
@@ -37934,7 +38153,7 @@ class DataGrid extends GNCoreInstance {
                 }
             });
         }
-        if (this.$options.hasDelete && !this.$options.readonly && !hasDeleteColumn) {
+        if (this.$options.hasDelete && !this.$options.readonly && !hasDeleteColumn && !horizontal) {
             headers.push({
                 label: this.$options.textSets.deleteLabel,
                 key: 'btnDelete',
@@ -37947,9 +38166,14 @@ class DataGrid extends GNCoreInstance {
         return headers;
     }
     template(config) {
+        const resolvedConfig = Object.assign(Object.assign({}, this.$options), config);
+        this._refreshOrientationState(resolvedConfig);
+        const contentsMarginTop = this.$options.bodyTopMargin ? this.$options.bodyTopMargin : this._isHorizontalState() && this._orientationState.hasGap ? String(this._orientationState.gap) : '0';
         const styles = {};
         const headers = this._prepareHeaders(config.headers);
         return (createElement$1("div", { id: this._uid, className: 'gn-datagrid' +
+                (this._isHorizontalState() ? ' is-horizontal' : '') +
+                (this._isHorizontalState() && this._orientationState.hasGap ? ' has-horizontal-gap' : '') +
                 (config.style ? ' is-' + config.style : '') +
                 (config.isEllipsis ? ' is-ellipsis' : '') +
                 (config.bodyHeight ? ' has-fixed-body' : '') +
@@ -37959,7 +38183,7 @@ class DataGrid extends GNCoreInstance {
                 (config.data.some((d) => isArray$1(d[this.$options.childField])) ? ' has-left-padding' : '') +
                 (config.disabled ? ' is-disabled' : ''), style: styles },
             config.hasHeader && createElement$1("div", { className: "gn-datagrid-header" }, this._hidden.renderHeader(headers)),
-            createElement$1("div", { className: "gn-datagrid-contents", style: { marginTop: this.$options.bodyTopMargin ? this.$options.bodyTopMargin : '0', marginBottom: this.$options.bodyBottomMargin ? this.$options.bodyBottomMargin : '0' } }, this._hidden.renderBody(arrClone(config.data), headers)),
+            createElement$1("div", { className: "gn-datagrid-contents", style: { marginTop: contentsMarginTop, marginBottom: this.$options.bodyBottomMargin ? this.$options.bodyBottomMargin : '0' } }, this._hidden.renderBody(arrClone(config.data), headers)),
             config.paginator /* 페이지네이터 옵션 확인 */ && createElement$1("div", { className: "gn-datagrid-footer" })));
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37976,7 +38200,12 @@ class DataGrid extends GNCoreInstance {
         }
     }
     completed() {
-        if (this.$options.fixHeader && this.$options.hasHeader) {
+        const isHorizontal = this._isHorizontalState();
+        const isVertical = !isHorizontal;
+        const usesFixedHeader = this.$options.fixHeader && this.$options.hasHeader;
+        const needsBlankHeader = usesFixedHeader || this.$options.bodyHeight;
+        isHorizontal ? addClass(this.$el, 'is-horizontal') : removeClass(this.$el, 'is-horizontal');
+        if (usesFixedHeader && isVertical) {
             const body = find('.gn-datagrid-contents', this.$el);
             const header = find('.gn-datagrid-header', this.$el);
             if (header) {
@@ -37989,7 +38218,7 @@ class DataGrid extends GNCoreInstance {
                 css$1(body, 'margin-bottom', this.$options.bodyBottomMargin);
             }
         }
-        if ((this.$options.fixHeader && this.$options.hasHeader) || this.$options.bodyHeight) {
+        if (isVertical && needsBlankHeader) {
             this._hidden.setBlankHeader();
             on(window, 'resize', this._hidden.setBlankHeader);
         }
@@ -38467,6 +38696,10 @@ class Modal extends GNCoreInstance {
             focus: () => {
                 const modal = find('.modal-content', this.$el);
                 modal.focus();
+            },
+            extra: (actionKey) => {
+                // notify page about which extra button clicked
+                this.$event(this, 'onExtra', actionKey);
             }
         };
         this.config = {
@@ -38484,6 +38717,7 @@ class Modal extends GNCoreInstance {
             hasClose: true,
             hasConfirm: false,
             hasCancel: false,
+            extraButtons: [],
             isModal: true,
             minimized: false,
             resizable: false,
@@ -38494,7 +38728,8 @@ class Modal extends GNCoreInstance {
         this.events = {
             onClose: true,
             onConfirm: true,
-            onOpen: true
+            onOpen: true,
+            onExtra: true
         };
         this.methods = {
             close() {
@@ -38536,7 +38771,10 @@ class Modal extends GNCoreInstance {
                             createElement$1("i", { className: "fas fa-times" })))))),
                 createElement$1("div", { className: "modal-body", style: styles },
                     createElement$1("div", { className: "modal-body-content", style: contStyles })),
-                (config.hasConfirm || config.hasCancel) /* 확인/취소 옵션 확인 */ && (createElement$1("div", { className: "modal-footer has-text-center" },
+                (config.hasConfirm || config.hasCancel || (Array.isArray(config.extraButtons) && config.extraButtons.length > 0)) /* 확인/취소/추가버튼 옵션 확인 */ && (createElement$1("div", { className: "modal-footer has-text-center" },
+                    Array.isArray(config.extraButtons) &&
+                        config.extraButtons.length > 0 &&
+                        config.extraButtons.map((btn) => (createElement$1("button", { type: "button", className: 'gn-button ' + (btn.className ? btn.className : 'is-mono'), "on-click": this._hidden.extra.bind(this, btn.key || btn.label) }, btn.label || btn.key))),
                     config.hasConfirm && (createElement$1("button", { type: "button", className: 'gn-button' + ` is-${config.sizeSets.confirm}`, id: this._uid + '_confirm', "on-click": this._hidden.confirm }, config.textSets.confirm)),
                     config.hasCancel && (createElement$1("button", { type: "button", className: 'gn-button btnCloseModal is-cancel' + ` is-${config.sizeSets.cancel}`, id: this._uid + '_cancel', "on-click": this._hidden.close }, config.textSets.cancel)))))));
     }
@@ -39575,15 +39813,124 @@ class Tab extends GNCoreInstance {
 }
 
 class MultiTextArea extends GNCoreInstance {
+    _isMaxLengthMessageEnabled() {
+        return !!(this.$options.maxlength && this.$options.useMaxLengthMessage);
+    }
+    _getTotalLength(valueSet) {
+        return this.$options.lang.reduce((sum, currentLang) => {
+            const currentValue = valueSet[currentLang] || '';
+            return sum + currentValue.length;
+        }, 0);
+    }
+    _getTotalLengthWithoutLang(valueSet, excludeLang) {
+        return this.$options.lang.reduce((sum, currentLang) => {
+            if (currentLang === excludeLang) {
+                return sum;
+            }
+            const currentValue = valueSet[currentLang] || '';
+            return sum + currentValue.length;
+        }, 0);
+    }
+    _getRemainMessage(remain) {
+        var _a, _b;
+        const template = ((_b = (_a = this.$options) === null || _a === void 0 ? void 0 : _a.textSets) === null || _b === void 0 ? void 0 : _b.maxLengthMessage) || '{{maxlength}}자 입력 가능합니다.';
+        return template.replace(/\{\{\s*maxlength\s*\}\}/g, String(remain));
+    }
     constructor(name, selector, options = {}) {
         super(name, selector, options);
         this._hidden = {
+            beforeInput: (e) => {
+                var _a, _b;
+                if (!this.$options.maxlength || !this._isMaxLengthMessageEnabled()) {
+                    return;
+                }
+                const target = e.target;
+                const lang = data(target, 'data-lang');
+                if (!lang) {
+                    return;
+                }
+                if (e.inputType && e.inputType.startsWith('delete')) {
+                    return;
+                }
+                const currentValue = val(target) || '';
+                const selectionStart = typeof target.selectionStart === 'number' ? target.selectionStart : currentValue.length;
+                const selectionEnd = typeof target.selectionEnd === 'number' ? target.selectionEnd : currentValue.length;
+                const selectedLength = Math.max(0, selectionEnd - selectionStart);
+                let insertValue = e.data || '';
+                if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+                    insertValue = '\n';
+                }
+                if (e.inputType === 'insertFromPaste' && !insertValue) {
+                    const pastedText = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData) === null || _b === void 0 ? void 0 : _b.call(_a, 'text/plain');
+                    insertValue = typeof pastedText === 'string' ? pastedText : '';
+                }
+                // 현재 언어를 제외한 나머지 언어들의 총 입력 길이를 기준으로 남은 입력 가능 길이를 계산한다.
+                const totalLengthWithoutCurrent = this._getTotalLengthWithoutLang(this.$options.value, lang);
+                const allowedLengthForCurrent = Math.max(0, this.$options.maxlength - totalLengthWithoutCurrent);
+                const remainingForInsert = this.$options.maxlength - totalLengthWithoutCurrent - (currentValue.length - selectedLength);
+                // paste는 "붙여넣기 내용 우선 반영 + 전체 결과의 뒤를 자르기" 정책을 적용한다.
+                if (e.inputType === 'insertFromPaste') {
+                    if (remainingForInsert <= 0) {
+                        e.preventDefault();
+                        return;
+                    }
+                    const before = currentValue.slice(0, selectionStart);
+                    const after = currentValue.slice(selectionEnd);
+                    const nextValue = `${before}${insertValue}${after}`;
+                    if (nextValue.length <= allowedLengthForCurrent) {
+                        return;
+                    }
+                    e.preventDefault();
+                    const clamped = nextValue.slice(0, allowedLengthForCurrent);
+                    val(target, clamped);
+                    const nextCaret = Math.min((before + insertValue).length, clamped.length);
+                    target.setSelectionRange(nextCaret, nextCaret);
+                    trigger(target, 'input');
+                    return;
+                }
+                if (remainingForInsert >= insertValue.length) {
+                    return;
+                }
+                if (remainingForInsert <= 0) {
+                    e.preventDefault();
+                    return;
+                }
+                // 붙여넣기/다중 입력이 한도를 넘는 경우 허용 가능한 길이만 잘라서 반영한다.
+                e.preventDefault();
+                const partial = insertValue.slice(0, remainingForInsert);
+                target.setRangeText(partial, selectionStart, selectionEnd, 'end');
+                trigger(target, 'input');
+            },
             change: (e) => {
                 const target = e.target;
                 const lang = data(target, 'data-lang');
-                this.$options.value[lang] = val(target);
-                if (this.$options.maxlength) {
-                    text$1(this.$options.delegates[lang], this.$options.value[lang].length);
+                if (!lang) {
+                    return;
+                }
+                this.$options.value[lang] = val(target) || '';
+                if (this.$options.maxlength && this._isMaxLengthMessageEnabled()) {
+                    // 총합 maxlength를 넘지 않도록 현재 언어 값만 상한선까지 보정한다.
+                    const totalLengthWithoutCurrent = this._getTotalLengthWithoutLang(this.$options.value, lang);
+                    const allowedLength = Math.max(0, this.$options.maxlength - totalLengthWithoutCurrent);
+                    const clampedValue = this.$options.value[lang].slice(0, allowedLength);
+                    if (clampedValue !== this.$options.value[lang]) {
+                        this.$options.value[lang] = clampedValue;
+                        val(target, clampedValue);
+                    }
+                }
+                if (this.$options.maxlength && this.$options.delegates[lang]) {
+                    const hasMaxLengthMessage = this._isMaxLengthMessageEnabled();
+                    if (hasMaxLengthMessage) {
+                        // 메시지 모드에서는 모든 탭에 동일한 "남은 글자 수" 안내를 동기화한다.
+                        const totalLength = this._getTotalLength(this.$options.value);
+                        const textValue = this._getRemainMessage(this.$options.maxlength - totalLength);
+                        this.$options.lang.forEach((targetLang) => {
+                            text$1(this.$options.delegates[targetLang], textValue);
+                        });
+                    }
+                    else {
+                        text$1(this.$options.delegates[lang], this.$options.value[lang].length);
+                    }
                 }
                 this.$event(this, 'onChange', this.$options.value);
             },
@@ -39600,7 +39947,7 @@ class MultiTextArea extends GNCoreInstance {
                     }
                     const textInput = find(`[data-lang=${lang}]`, this.$el);
                     val(textInput, value[lang]);
-                    trigger(textInput, 'keyup');
+                    trigger(textInput, 'input');
                 });
             },
             disable: () => {
@@ -39619,6 +39966,10 @@ class MultiTextArea extends GNCoreInstance {
         this.config = {
             lang: ['en', 'ko'],
             value: {},
+            useMaxLengthMessage: false,
+            textSets: {
+                maxLengthMessage: '{{maxlength}}자 입력 가능합니다.'
+            },
             delegates: {}
         };
         this.events = {
@@ -39643,6 +39994,12 @@ class MultiTextArea extends GNCoreInstance {
     }
     template(config) {
         const styles = {};
+        const totalLength = config.lang.reduce((sum, currentLang) => {
+            const currentValue = config.value && config.value[currentLang] ? config.value[currentLang] : '';
+            return sum + currentValue.length;
+        }, 0);
+        const hasMaxLengthMessage = this._isMaxLengthMessageEnabled();
+        const remainMessage = config.maxlength ? this._getRemainMessage(config.maxlength - totalLength) : '';
         if (config.width) {
             styles.width = getUnit('width', config.width);
         }
@@ -39651,11 +40008,14 @@ class MultiTextArea extends GNCoreInstance {
                 createElement$1("ul", null, config.lang.map((l, index) => (createElement$1("li", { className: index === 0 ? 'is-active' : '' },
                     createElement$1("a", { href: '#' + this._uid + '-' + l }, l)))))),
             createElement$1("div", { id: this._uid + '_content' }, config.lang.map((l) => (createElement$1("div", { id: this._uid + '-' + l },
-                createElement$1("textarea", { className: "gn-textarea", "data-lang": l, rows: config.rows ? config.rows : '', maxLength: config.maxlength ? config.maxlength : 524288, "on-keyup": this._hidden.change, disabled: config.disabled, readOnly: config.readonly }, config.value ? config.value[l] : ''),
-                config.maxlength && (createElement$1("p", { className: "has-text-right has-text-size6" },
-                    createElement$1("span", { className: "charLen", "data-lang": l }, config.value && config.value[l] ? config.value[l].length : 0),
-                    "/",
-                    config.maxlength))))))));
+                createElement$1("textarea", { className: "gn-textarea", "data-lang": l, rows: config.rows ? config.rows : '', maxLength: config.maxlength ? config.maxlength : 524288, "on-beforeinput": this._hidden.beforeInput, "on-input": this._hidden.change, disabled: config.disabled, readOnly: config.readonly }, config.value ? config.value[l] : ''),
+                config.maxlength && (createElement$1("div", { className: "has-text-size6" },
+                    !hasMaxLengthMessage && (createElement$1("p", null,
+                        createElement$1("span", { className: "charLen", "data-lang": l }, config.value && config.value[l] ? config.value[l].length : 0),
+                        "/",
+                        config.maxlength)),
+                    hasMaxLengthMessage && (createElement$1("p", null,
+                        createElement$1("span", { className: "charLen", "data-lang": l }, remainMessage)))))))))));
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     $render(config) {
@@ -39866,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', [
                                 {
@@ -39899,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 = {
@@ -39933,7 +40367,8 @@ class Picklist extends GNCoreInstance {
             hasSourceSearch: false,
             hasTargetSearch: false,
             orderable: true,
-            height: 150
+            height: 150,
+            optionTooltip: undefined
         };
         this.events = {
             onChange: true,
@@ -40042,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 };
@@ -40946,41 +41397,56 @@ class Tagcloud extends GNCoreInstance {
 class Tree extends GNCoreInstance {
     constructor(name, selector, options = {}) {
         super(name, selector, options);
+        this._checkerIdSeq = 0;
         this._hidden = {
             select: (item, e) => {
                 if (item.disabled) {
                     return;
                 }
+                if (hasClass(this.$el, 'is-disabled')) {
+                    return;
+                }
                 let target = e.target;
-                // 트리 아이콘을 클릭한 경우, 텍스트로 타겟 변경
                 if (this.$options.showIcon && target.tagName === 'I') {
                     target = parent(target);
                 }
-                if (!this.$options.multiple) {
+                if (this.$options.hasCheck) {
+                    // hasCheck 시: 노드 클릭으로 체크박스 토글, is-active 미적용
+                    const itemEl = hasClass(target, 'tree-item') ? target : parents(target, '.tree-item')[0];
+                    if (!itemEl)
+                        return;
+                    const checker = find('.is-checker', itemEl);
+                    if (!checker)
+                        return;
+                    // 라벨 또는 input 직접 클릭 시 여기서 토글하지 않음 → input 클릭 핸들러만 한 번 실행되게 함 (이중 토글·이중 onCheck 방지)
+                    const labelTarget = parents(e.target, 'label')[0];
+                    if (e.target === checker || (labelTarget && checker.id && labelTarget.getAttribute('for') === checker.id)) {
+                        return;
+                    }
+                    checker.checked = !checker.checked;
+                    this._hidden.check.call(this, item, { target: checker, stopPropagation: () => { } });
+                }
+                else {
+                    // hasCheck 미사용 시: 노드 클릭 시 is-active 적용, onSelect 발생
                     removeClass(findAll('.tree-item', this.$el), 'is-active');
                     addClass(target, 'is-active');
                     this.$event(this, 'onSelect', item, e);
                 }
-                else {
-                    toggleClass(target, 'is-active');
-                    if (hasClass(target, 'is-active')) {
-                        this.$event(this, 'onSelect', item, e);
-                    }
-                }
             },
             addChild: (index, addData) => {
                 const itemEl = findAll('.tree-item', this.$el)[index];
                 const itemData = this._hidden.findData(index);
+                const nextChildren = this._hidden.setPaths(addData.slice(), itemData.path);
                 if (!itemData[this.$options.childField]) {
                     itemData[this.$options.childField] = [];
                 }
-                itemData[this.$options.childField] = itemData[this.$options.childField].concat(addData);
+                itemData[this.$options.childField] = itemData[this.$options.childField].concat(nextChildren);
                 const appendTarget = siblings(itemEl, 'ul').pop();
                 if (!appendTarget) {
                     this.$template.reRender(parent(itemEl), this._hidden.renderItem(itemData));
                 }
                 else {
-                    addData.forEach((item) => {
+                    nextChildren.forEach((item) => {
                         const newItem = document.createElement('li');
                         append(appendTarget, newItem);
                         this.$template.reRender(newItem, this._hidden.renderItem(item));
@@ -41011,38 +41477,59 @@ class Tree extends GNCoreInstance {
             },
             check: (item, e) => {
                 const target = e.target;
-                e.stopPropagation();
-                findAll('.is-checker', parents(target, 'li')[0]).forEach((c) => {
-                    c.checked = target.checked;
-                });
-                if (this.$options.checkPath) {
-                    parents(target, 'ul')
-                        .map((list) => siblings(list, '.tree-item').pop())
-                        .filter((item) => item)
-                        .forEach((item) => {
-                        const parentChecker = find('.is-checker', item);
-                        if (!parentChecker) {
-                            return;
-                        }
-                        const parentLi = parents(item, 'li')[0];
-                        if (!parentLi) {
-                            return;
-                        }
-                        // 자식 중 하나라도 체크면 부모 체크, 전부 해제되면 부모도 해제
-                        const descendantCheckers = findAll('.is-checker', parentLi).filter((checker) => checker !== parentChecker);
-                        if (!descendantCheckers.length) {
-                            return;
-                        }
-                        parentChecker.checked = descendantCheckers.some((checker) => checker.checked);
-                    });
+                if (hasClass(this.$el, 'is-disabled') || item.disabled) {
+                    if (typeof e.preventDefault === 'function')
+                        e.preventDefault();
+                    target.checked = !target.checked; // 브라우저가 이미 토글했으므로 원래대로 되돌림
+                    return;
                 }
+                if (typeof e.stopPropagation === 'function')
+                    e.stopPropagation();
+                this._hidden.applyCheckedState(target, target.checked);
                 this.$event(this, 'onCheck', item, target.checked, this._hidden.getItemIndex(target), e);
             },
             checkAll: (isChecked) => {
+                if (this.$options.disabled) {
+                    return;
+                }
                 findAll('.is-checker', this.$el).forEach((c) => {
+                    if (c.disabled) {
+                        return;
+                    }
                     c.checked = isChecked;
                 });
             },
+            setChecked: (targets, checked) => {
+                if (!this.$options.hasCheck || this.$options.disabled) {
+                    return;
+                }
+                const normalizedTargets = Array.isArray(targets) ? targets : [targets];
+                const targetSet = new Set(normalizedTargets);
+                findAll('.tree-item', this.$el).forEach((itemEl, index) => {
+                    const itemData = this._hidden.findData(index);
+                    const itemValue = itemData === null || itemData === void 0 ? void 0 : itemData.value;
+                    if (itemValue === undefined || itemValue === null || itemValue === '') {
+                        return;
+                    }
+                    if (!targetSet.has(String(itemValue))) {
+                        return;
+                    }
+                    const checker = find('.is-checker', itemEl);
+                    if (!checker) {
+                        return;
+                    }
+                    if (checker.disabled || (itemData === null || itemData === void 0 ? void 0 : itemData.disabled)) {
+                        return;
+                    }
+                    checker.checked = checked;
+                    this._hidden.applyCheckedState(checker, checked);
+                });
+            },
+            setCheckersDisabled: (disabled) => {
+                findAll('.is-checker', this.$el).forEach((el) => {
+                    el.disabled = disabled;
+                });
+            },
             getChecked: (withStatus = false) => {
                 if (!this.$options.hasCheck) {
                     return [];
@@ -41066,14 +41553,53 @@ class Tree extends GNCoreInstance {
                         findData.__status.isOpened = hasClass(target, 'is-open');
                         findData.__status.isChecked = find('.is-checker', target).checked;
                         findData.__status.isSelected = hasClass(target, 'is-active');
-                        findData.__status.hasChildren = isArray$1(findData.child);
+                        findData.__status.hasChildren = isArray$1(findData[this.$options.childField]);
                     }
                     return findData;
                 });
             },
             getItemIndex: (item) => {
+                const itemEl = hasClass(item, 'tree-item') ? item : parents(item, '.tree-item')[0];
+                if (!itemEl) {
+                    return -1;
+                }
                 const itemList = findAll('.tree-item', this.$el);
-                return itemList.findIndex((el) => el == item);
+                return itemList.findIndex((el) => el == itemEl);
+            },
+            applyCheckedState: (checker, checked) => {
+                const listItem = parents(checker, 'li')[0];
+                if (!listItem) {
+                    return;
+                }
+                if (this.$options.checkChild !== false) {
+                    findAll('.is-checker', listItem).forEach((childChecker) => {
+                        if (childChecker.disabled) {
+                            return;
+                        }
+                        childChecker.checked = checked;
+                    });
+                }
+                if (!this.$options.checkPath) {
+                    return;
+                }
+                parents(checker, 'ul')
+                    .map((list) => siblings(list, '.tree-item').pop())
+                    .filter((item) => item)
+                    .forEach((item) => {
+                    const parentChecker = find('.is-checker', item);
+                    if (!parentChecker) {
+                        return;
+                    }
+                    const parentLi = parents(item, 'li')[0];
+                    if (!parentLi) {
+                        return;
+                    }
+                    const descendantCheckers = findAll('.is-checker', parentLi).filter((candidate) => candidate !== parentChecker);
+                    if (!descendantCheckers.length) {
+                        return;
+                    }
+                    parentChecker.checked = descendantCheckers.some((candidate) => candidate.checked);
+                });
             },
             getPathArray(path) {
                 const pathParts = path.split('/');
@@ -41152,34 +41678,46 @@ class Tree extends GNCoreInstance {
                 }
                 this.$event(this, 'onToggle', item, hasClass(target, 'is-open') ? 'expanded' : 'collapsed', this._hidden.getItemIndex(target), e);
             },
-            renderTree: (data) => {
-                return (createElement$1("ul", null, data.map((item) => {
-                    return this._hidden.renderItem(item);
+            renderTree: (data, keyPath = '') => {
+                return (createElement$1("ul", null, data.map((item, idx) => {
+                    const itemKeyPath = keyPath ? `${keyPath}-${idx}` : `${idx}`;
+                    return this._hidden.renderItem(item, itemKeyPath);
                 })));
             },
-            renderItem: (item) => {
+            renderItem: (item, keyPath) => {
                 var _a;
+                const resolvedKeyPath = keyPath !== null && keyPath !== void 0 ? keyPath : `seq-${this._checkerIdSeq++}`;
+                const checkerId = `${this._uid}-chk-${resolvedKeyPath}`;
                 return (createElement$1("li", null,
-                    createElement$1("div", { className: ['tree-item', item[this.$options.childField] ? 'has-child' : '', item.opened ? 'is-open' : '', item.actived ? ' is-active' : '', item.disabled ? 'is-disabled' : ''].join(' '), "on-click": this._hidden.select.bind(this, item), "data-path": (_a = item.path) !== null && _a !== void 0 ? _a : '', title: item.text },
+                    createElement$1("div", { className: [
+                            'tree-item',
+                            item[this.$options.childField] ? 'has-child' : '',
+                            item.opened ? 'is-open' : '',
+                            !this.$options.hasCheck && item.actived ? ' is-active' : '',
+                            item.disabled ? 'is-disabled' : ''
+                        ].join(' '), "on-click": this._hidden.select.bind(this, item), "data-path": (_a = item.path) !== null && _a !== void 0 ? _a : '', title: item.text },
                         // has child field - arrow toggle
                         item[this.$options.childField] ? (createElement$1("div", { className: "is-toggler", "on-click": (e) => {
                                 this._hidden.toggle.call(this, item, e);
                             } })) : (''),
                         // has checkbox
-                        this.$options.hasCheck && item.noCheck !== true && item.noCheck !== 'true' ? (createElement$1("label", { className: "gn-checkbox is-no-padding", style: { width: '20px' } },
-                            createElement$1("input", { type: "checkbox", className: "is-checker", "on-click": (e) => {
+                        this.$options.hasCheck && item.noCheck !== true && item.noCheck !== 'true' ? (createElement$1("div", { className: "gn-checks is-small is-no-padding" },
+                            createElement$1("input", { type: "checkbox", className: "is-checker", id: checkerId, disabled: !!this.$options.disabled || !!item.disabled, "on-click": (e) => {
                                     this._hidden.check.call(this, item, e);
-                                }, defaultChecked: !!item.selected }))) : (''),
+                                }, defaultChecked: !!item.selected }),
+                            createElement$1("label", { for: checkerId }, item.text))) : (''),
                         // show icon
                         this.$options.showIcon && !item.hideIcon ? (item.icon ? (createElement$1("span", { innerHTML: item.icon })) : (createElement$1("i", { style: { marginRight: '5px' }, className: 'far fa-' + (item.opened ? 'folder-open' : 'folder') }))) : (''),
-                        item.text),
-                    item[this.$options.childField] && this._hidden.renderTree(item[this.$options.childField])));
+                        !(this.$options.hasCheck && item.noCheck !== true && item.noCheck !== 'true') && item.text),
+                    item[this.$options.childField] && this._hidden.renderTree(item[this.$options.childField], resolvedKeyPath)));
             },
-            setPaths(data, basePath = '') {
+            setPaths: (data, basePath = '') => {
                 return data.map(item => {
-                    const itemPath = basePath ? `${basePath}/${item.text}` : item.text;
-                    const childPath = item.child ? this.setPaths(item.child, itemPath) : null;
-                    return Object.assign(Object.assign({}, item), { path: itemPath, child: childPath });
+                    const itemKey = (item === null || item === void 0 ? void 0 : item.value) !== undefined && (item === null || item === void 0 ? void 0 : item.value) !== null && (item === null || item === void 0 ? void 0 : item.value) !== '' ? String(item.value) : item.text;
+                    const itemPath = basePath ? `${basePath}/${itemKey}` : itemKey;
+                    const children = item[this.$options.childField];
+                    const childPath = children ? this._hidden.setPaths(children, itemPath) : null;
+                    return Object.assign(Object.assign({}, item), { path: itemPath, [this.$options.childField]: childPath });
                 });
             }
         };
@@ -41190,10 +41728,11 @@ class Tree extends GNCoreInstance {
             data: [],
             childField: 'child',
             hasCheck: false,
-            multiple: false,
+            checkChild: true,
             checkPath: false,
             showIcon: false,
-            hideIcon: false
+            hideIcon: false,
+            disabled: false
         };
         this.events = {
             onSelect: true,
@@ -41218,15 +41757,20 @@ class Tree extends GNCoreInstance {
                 this._hidden.collapseAll();
             },
             checkAll() {
-                if (!this.$options.hasCheck)
+                if (!this.$options.hasCheck || this.$options.disabled)
                     return;
                 this._hidden.checkAll(true);
             },
             uncheckAll() {
-                if (!this.$options.hasCheck)
+                if (!this.$options.hasCheck || this.$options.disabled)
                     return;
                 this._hidden.checkAll(false);
             },
+            setChecked(targets, checked) {
+                if (this.$options.disabled)
+                    return;
+                this._hidden.setChecked(targets, checked);
+            },
             getChecked(withStatus = false) {
                 return this._hidden.getChecked(withStatus);
             },
@@ -41238,14 +41782,29 @@ class Tree extends GNCoreInstance {
             },
             filter(keyword) {
                 return this._hidden.filter(keyword);
+            },
+            disable() {
+                this.$options.disabled = true;
+                addClass(this.$el, 'is-disabled');
+                this._hidden.setCheckersDisabled(true);
+            },
+            enable() {
+                this.$options.disabled = false;
+                removeClass(this.$el, 'is-disabled');
+                this._hidden.setCheckersDisabled(false);
             }
         };
+        // multiple → hasCheck 치환(동일 기능으로 지원 X)
+        if (options && options.multiple) {
+            options.hasCheck = true;
+            delete options.multiple;
+        }
         this.$init(this, options);
     }
     template(config) {
         config.data = this._hidden.setPaths(config.data);
         const styles = {};
-        return (createElement$1("div", { id: this._uid, className: 'gn-tree' + (config.color ? ' is-' + config.color : '') + (config.type ? ' is-' + config.type : '') + (config.size ? ' is-' + config.size : ''), style: styles },
+        return (createElement$1("div", { id: this._uid, className: 'gn-tree' + (config.color ? ' is-' + config.color : '') + (config.type ? ' is-' + config.type : '') + (config.size ? ' is-' + config.size : '') + (config.disabled ? ' is-disabled' : ''), style: styles },
             config.textSets.title && createElement$1("p", { className: "tree-label", innerHTML: config.textSets.title }),
             this._hidden.renderTree(config.data)));
     }