gnui 1.2.20 → 1.2.22

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 };
@@ -34555,7 +34644,7 @@
 	        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);
@@ -37225,6 +37314,13 @@
 	                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(' ')
@@ -37265,15 +37361,24 @@
 	            },
 	            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)]
@@ -37282,6 +37387,23 @@
 	            },
 	            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;
 	                }
@@ -37291,76 +37413,114 @@
 	                    }, "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)));
@@ -37446,7 +37606,10 @@
 	                });
 	                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')) {
@@ -37533,6 +37696,7 @@
 	            },
 	            reRender: ({ headers, data, hasCheck }) => {
 	                return new Promise(resolve => {
+	                    this._refreshOrientationState(this.$options);
 	                    if (hasCheck === undefined) {
 	                        hasCheck = this.$options.hasCheck;
 	                    }
@@ -37741,8 +37905,8 @@
 	                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');
@@ -37787,6 +37951,13 @@
 	                removeClass(this.$el, 'is-disabled');
 	            }
 	        };
+	        this._orientationState = {
+	            orientation: 'vertical',
+	            columns: 1,
+	            gap: 0,
+	            minWidth: 240,
+	            hasGap: false
+	        };
 	        this.config = {
 	            width: '100%',
 	            hasCheck: false,
@@ -37801,6 +37972,7 @@
 	                deleteLabel: '',
 	                deleteConfirmMessage: ''
 	            },
+	            orientation: 'vertical',
 	            childField: 'child',
 	            checkCapturing: true,
 	            sort: {
@@ -37821,10 +37993,10 @@
 	            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 = [];
@@ -37833,45 +38005,60 @@
 	                }
 	                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();
 	            }
 	        };
@@ -37924,6 +38111,34 @@
 	            });
 	        }
 	    }
+	    // 렌더에서 바로 쓸 수 있는 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);
 	    }
@@ -37931,6 +38146,10 @@
 	    _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,
@@ -37940,7 +38159,7 @@
 	                }
 	            });
 	        }
-	        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',
@@ -37953,9 +38172,14 @@
 	        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' : '') +
@@ -37965,7 +38189,7 @@
 	                (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
@@ -37982,7 +38206,12 @@
 	        }
 	    }
 	    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) {
@@ -37995,7 +38224,7 @@
 	                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);
 	        }
@@ -38473,6 +38702,10 @@
 	            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 = {
@@ -38490,6 +38723,7 @@
 	            hasClose: true,
 	            hasConfirm: false,
 	            hasCancel: false,
+	            extraButtons: [],
 	            isModal: true,
 	            minimized: false,
 	            resizable: false,
@@ -38500,7 +38734,8 @@
 	        this.events = {
 	            onClose: true,
 	            onConfirm: true,
-	            onOpen: true
+	            onOpen: true,
+	            onExtra: true
 	        };
 	        this.methods = {
 	            close() {
@@ -38542,7 +38777,10 @@
 	                            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)))))));
 	    }
@@ -39581,15 +39819,124 @@
 	}
 
 	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);
 	            },
@@ -39606,7 +39953,7 @@
 	                    }
 	                    const textInput = find(`[data-lang=${lang}]`, this.$el);
 	                    val(textInput, value[lang]);
-	                    trigger(textInput, 'keyup');
+	                    trigger(textInput, 'input');
 	                });
 	            },
 	            disable: () => {
@@ -39625,6 +39972,10 @@
 	        this.config = {
 	            lang: ['en', 'ko'],
 	            value: {},
+	            useMaxLengthMessage: false,
+	            textSets: {
+	                maxLengthMessage: '{{maxlength}}자 입력 가능합니다.'
+	            },
 	            delegates: {}
 	        };
 	        this.events = {
@@ -39649,6 +40000,12 @@
 	    }
 	    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);
 	        }
@@ -39657,11 +40014,14 @@
 	                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) {
@@ -39872,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', [
 	                                {
@@ -39905,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 = {
@@ -39939,7 +40373,8 @@
 	            hasSourceSearch: false,
 	            hasTargetSearch: false,
 	            orderable: true,
-	            height: 150
+	            height: 150,
+	            optionTooltip: undefined
 	        };
 	        this.events = {
 	            onChange: true,
@@ -40048,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 };
@@ -40952,41 +41403,56 @@
 	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));
@@ -41017,38 +41483,59 @@
 	            },
 	            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 [];
@@ -41072,14 +41559,53 @@
 	                        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('/');
@@ -41158,34 +41684,46 @@
 	                }
 	                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 });
 	                });
 	            }
 	        };
@@ -41196,10 +41734,11 @@
 	            data: [],
 	            childField: 'child',
 	            hasCheck: false,
-	            multiple: false,
+	            checkChild: true,
 	            checkPath: false,
 	            showIcon: false,
-	            hideIcon: false
+	            hideIcon: false,
+	            disabled: false
 	        };
 	        this.events = {
 	            onSelect: true,
@@ -41224,15 +41763,20 @@
 	                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);
 	            },
@@ -41244,14 +41788,29 @@
 	            },
 	            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)));
 	    }