gnui 1.2.19 → 1.2.21

package/dist/js/gnui.esm.js

@@ -16870,65 +16870,65 @@ class GNCoreEventManager {
         return GNCoreEventManager.instance;
     }
     // life cycle event add
-    stateAdd(uid, name, handler) {
-        return this.add(undefined, uid, name, handler);
+    stateAdd(cid, name, handler) {
+        return this.add(undefined, cid, name, handler);
     }
-    add(target, uid, name, handler) {
-        if (!this._eventMap[uid]) {
-            this._eventMap[uid] = []; // 해당 uid에 대한 이벤트가 없는 경우 초기화
+    add(target, cid, name, handler) {
+        if (!this._eventMap[cid]) {
+            this._eventMap[cid] = []; // 해당 cid에 대한 이벤트가 없는 경우 초기화
         }
-        const eid = this._getEventId(uid); // eventID 생성
-        this._eventMap[uid].push(target
+        const eid = this._getEventId(cid); // eventID 생성
+        this._eventMap[cid].push(target
             ? {
                 target,
                 eid,
-                uid,
+                cid,
                 name,
                 handler
             }
             : {
                 eid,
-                uid,
+                cid,
                 name,
                 handler
             });
         target && on(target, name, handler); // 이벤트 바인딩
         return eid;
     }
-    remove(uid, name) {
-        const _events = this._getEvent(uid, name);
+    remove(cid, name) {
+        const _events = this._getEvent(cid, name);
         // 이벤트 해제
         if (_events.length) {
             _events.forEach((_event) => {
                 off(_event.target, _event.name, _event.handler);
                 // eventMap에서 해당 이벤트 삭제
-                this._eventMap[uid].some(event => event.eid === _event.eid) &&
-                    this._eventMap[uid].splice(this._eventMap[uid].findIndex(event => event.eid === _event.eid), 1);
+                this._eventMap[cid].some(event => event.eid === _event.eid) &&
+                    this._eventMap[cid].splice(this._eventMap[cid].findIndex(event => event.eid === _event.eid), 1);
             });
-            // uid에 대한 이벤트가 남아있지 않은 경우 uid 키 삭제
-            if (!this._eventMap[uid].length) {
-                delete this._eventMap[uid];
+            // cid에 대한 이벤트가 남아있지 않은 경우 cid 키 삭제
+            if (!this._eventMap[cid].length) {
+                delete this._eventMap[cid];
             }
         }
     }
-    removeAll(uid) {
-        if (!this._eventMap[uid]) {
+    removeAll(cid) {
+        if (!this._eventMap[cid]) {
             return;
         }
         // 이벤트 해제
-        this._eventMap[uid].forEach(event => {
+        this._eventMap[cid].forEach(event => {
             if (event.target) {
                 off(event.target, event.name, event.handler);
             }
         });
         // 이벤트 삭제
-        delete this._eventMap[uid];
+        delete this._eventMap[cid];
     }
     /**
      * lifeCycle 핸들러 실행
      */
-    cyclepatch(uid, name, params) {
-        const _events = this._getEvent(uid, name);
+    cyclepatch(cid, name, params) {
+        const _events = this._getEvent(cid, name);
         if (_events.length) {
             _events.forEach((_event) => {
                 const _tagret = _event.target || this;
@@ -16943,8 +16943,8 @@ class GNCoreEventManager {
      * - 모든 핸들러를 순차 실행한 뒤, 하나라도 `false` 를 반환한 경우 `true`(cancelled)를 반환한다.
      *   (첫 false 에서 중단하지 않고, 나머지 핸들러도 계속 실행한다)
      */
-    async dispatch(uid, name, params) {
-        const _events = this._getEvent(uid, name);
+    async dispatch(cid, name, params) {
+        const _events = this._getEvent(cid, name);
         let cancelled = false;
         if (_events.length) {
             for (const _event of _events) {
@@ -16958,17 +16958,17 @@ class GNCoreEventManager {
         }
         return cancelled;
     }
-    _getEvent(uid, name) {
+    _getEvent(cid, name) {
         // parameters에 해당하는 이벤트 반환
-        return this._eventMap[uid]
-            ? this._eventMap[uid].filter(event => {
+        return this._eventMap[cid]
+            ? this._eventMap[cid].filter(event => {
                 return event.name === name;
             }) || []
             : [];
     }
-    _getEventId(uid) {
+    _getEventId(cid) {
         // event ID 생성
-        return `ev_${uid}${this._eventMap[uid].length}`;
+        return `ev_${cid}${this._eventMap[cid].length}`;
     }
 }
 
@@ -17012,12 +17012,12 @@ class GNUIState {
     }
     // 최초 생성 후 state에 등록 - created
     _addComponent(component) {
-        const uid = component._uid;
-        if (uid) {
-            this._componentMap[uid] = {
+        const cid = component._cid;
+        if (cid) {
+            this._componentMap[cid] = {
                 component: component,
                 selector: component.$selector,
-                uid: uid,
+                cid: cid,
                 status: 'created'
             };
         }
@@ -17032,13 +17032,28 @@ class GNUIState {
         if (!_selector) {
             return undefined;
         }
-        Object.values(this._componentMap).forEach(n => {
-            // 동일한 selector 인지 비교
-            if (isEquals(n.uid, _selector) || isEquals(_selector.id, n.uid)) {
+        // 1) cid 직접 조회 (string selector 인 경우)
+        if (typeof selector === 'string' && this._componentMap[selector]) {
+            _findComponent = this._componentMap[selector].component;
+            _findComponent._status = this._componentMap[selector].status;
+            return _findComponent;
+        }
+        // 2) data-component-id 기반 조회
+        const dataCid = (_selector === null || _selector === void 0 ? void 0 : _selector.getAttribute) && _selector.getAttribute('data-component-id');
+        if (dataCid && this._componentMap[dataCid]) {
+            _findComponent = this._componentMap[dataCid].component;
+            _findComponent._status = this._componentMap[dataCid].status;
+            return _findComponent;
+        }
+        // 3) selector/element 비교 fallback
+        Object.values(this._componentMap).some(n => {
+            var _a;
+            if (isEquals(n.selector, _selector) || isEquals((_a = n.component) === null || _a === void 0 ? void 0 : _a.$el, _selector)) {
                 _findComponent = n.component;
                 _findComponent._status = n.status;
-                return false;
+                return true;
             }
+            return false;
         });
         return _findComponent;
     }
@@ -17052,7 +17067,7 @@ class GNUIState {
             // 동일한 selector 인지 비교해서 동일한 component의 selector이면 제거 처리
             if (isEquals(n.selector, _selector)) {
                 // componentMap에서 완전히 제거
-                delete this._componentMap[n.uid];
+                delete this._componentMap[n.cid];
                 // 컴포넌트 내부 참조도 제거 (메모리 누수 방지)
                 if (n.component) {
                     n.component = null;
@@ -17061,32 +17076,32 @@ class GNUIState {
             }
         });
     }
-    // 등록된 컴포넌트 제거 (uid 기반 - 더 효율적)
-    _removeComponentByUid(uid) {
-        if (!uid || !this._componentMap[uid]) {
+    // 등록된 컴포넌트 제거 (cid 기반)
+    _removeComponentByCid(cid) {
+        if (!cid || !this._componentMap[cid]) {
             return;
         }
         // 컴포넌트 내부 참조 제거 (메모리 누수 방지)
-        const componentInfo = this._componentMap[uid];
+        const componentInfo = this._componentMap[cid];
         if (componentInfo.component) {
             componentInfo.component = null;
         }
         componentInfo.selector = null;
         // componentMap에서 완전히 제거
-        delete this._componentMap[uid];
+        delete this._componentMap[cid];
     }
     // 컴포넌트 life cycle에 따른 eventManager dispatch
-    _detectedCycle(uid, name) {
+    _detectedCycle(cid, name) {
         // component 마지막 status 업데이트
-        if (this._componentMap[uid]) {
-            this._componentMap[uid].status = name;
+        if (this._componentMap[cid]) {
+            this._componentMap[cid].status = name;
         }
-        // event manager를 이용해 해당 uid 이벤트 dispatch
+        // event manager를 이용해 해당 cid 이벤트 dispatch
         const eventManager = GNCoreEventManager.getInstance();
         // 호출 후
-        eventManager.cyclepatch(uid, name, '');
+        eventManager.cyclepatch(cid, name, '');
         // 이벤트 해제 - life cycle 은 컴포넌트 별로 한번씩만 존재하므로..
-        eventManager.remove(uid, name);
+        eventManager.remove(cid, name);
     }
     // document DOM observer 실행
     // - DOM 변환 이벤트 감지해서 removedNodes 가 생기면 해당 node와 일치하는 component를 찾아 제거한다.
@@ -17111,18 +17126,18 @@ class GNUIState {
                 if (isElement$2(rm) && attr(rm, 'data-gnui')) {
                     remove($('#' + attr(rm, 'data-gnui')));
                 }
-                const childComponents = $$('[data-gn-uid]', rm);
+                const childComponents = $$('[data-component-id]', rm);
                 each(childComponents, (childComponent) => {
                     if (isElement$2(childComponent)) {
                         const findComponent = closerThis._getComponent($(childComponent));
-                        if (findComponent && findComponent._uid && findComponent.$el && findComponent.$name !== 'modal') {
-                            // $destroy 내부에서 removeAll과 _removeComponentByUid를 처리하므로 직접 호출만
+                        if (findComponent && findComponent._cid && findComponent.$el && findComponent.$name !== 'modal') {
+                            // $destroy 내부에서 removeAll과 _removeComponentByCid를 처리하므로 직접 호출만
                             findComponent.$destroy(findComponent, false);
                         }
                     }
                 });
                 const findComponent = closerThis._getComponent($(rm));
-                if (findComponent && findComponent._uid && !((_a = findComponent.$el) === null || _a === void 0 ? void 0 : _a.parentNode) && findComponent.$name !== 'modal') {
+                if (findComponent && findComponent._cid && !((_a = findComponent.$el) === null || _a === void 0 ? void 0 : _a.parentNode) && findComponent.$name !== 'modal') {
                     findComponent.$destroy(findComponent, false);
                 }
             });
@@ -17155,6 +17170,7 @@ class GNCoreInstance {
             return generateUUID();
         };
         this._uid = ((_a = this.$options) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.$selector) === null || _b === void 0 ? void 0 : _b.id) || `${GN_CONSTANT.PREFIX}${uuid()}`;
+        this._cid = `${GN_CONSTANT.PREFIX}${uuid()}`;
     }
     $reset() { }
     $init(component, options) {
@@ -17165,14 +17181,14 @@ class GNCoreInstance {
         // component.$options.states => 사용자가 정의한 lifecycle callback handler
         this.$stateBind(component);
         // stateManager를 통해 beforeMount 상태 dispatch
-        stateManager._detectedCycle(component._uid, 'beforeMount');
+        stateManager._detectedCycle(component._cid, 'beforeMount');
         this.$mount(component, this.$selector);
         this.$render(component.$options);
         // stateManager를 통해 beforeBind 상태 dispatch
-        stateManager._detectedCycle(component._uid, 'beforeBind');
+        stateManager._detectedCycle(component._cid, 'beforeBind');
         this.$bind(component);
         // stateManager를 통해 completed 상태 dispatch
-        stateManager._detectedCycle(component._uid, 'completed');
+        stateManager._detectedCycle(component._cid, 'completed');
     }
     $create(component, options) {
         // extend options
@@ -17234,7 +17250,7 @@ class GNCoreInstance {
         const eventManager = GNCoreEventManager.getInstance();
         // lifecycle 관련 이벤트 add to eventManager
         GN_CONSTANT.LIFE_CYCLE.forEach((ev) => {
-            eventManager.stateAdd(component._uid, ev, (...args) => {
+            eventManager.stateAdd(component._cid, ev, (...args) => {
                 // 해당 life cycle 상태에 해당하는 함수가 각 컴포넌트 내부에 정의되어 있으면 호출한다.
                 if (isFunction(component[ev])) {
                     component[ev](args);
@@ -17279,13 +17295,17 @@ class GNCoreInstance {
             if (tmpRole) {
                 attr(this.$el, 'role', tmpRole);
             }
-            attr(this.$el, 'data-gn-uid', this._uid);
+            attr(this.$el, 'data-component-id', this._cid);
             // inherit selector class
             selector.className && addClass(this.$el, selector.className);
         }
         else {
             this.$el = $(this.$selector);
         }
+        // 항상 컴포넌트 cid를 DOM에 표시 (기존 DOM 사용 시에도)
+        if (this.$el) {
+            attr(this.$el, 'data-component-id', this._cid);
+        }
         // delegates 바인딩
         each(this.$options.delegates, (val, key) => {
             if (isString(val)) {
@@ -17305,11 +17325,11 @@ class GNCoreInstance {
             const eventManager = GNCoreEventManager.getInstance();
             each(events, (event, name) => {
                 if (isFunction(event)) {
-                    eventManager.add(this.$el, this._uid, event.name || name, event);
+                    eventManager.add(this.$el, this._cid, event.name || name, event);
                 }
                 else if (isPlainObject$1(event)) {
                     const delegate = isFunction(event.delegate) ? event.delegate() : event.delegate;
-                    eventManager.add(delegate, this._uid, event.name, event.handler);
+                    eventManager.add(delegate, this._cid, event.name, event.handler);
                 }
             });
         }
@@ -17328,13 +17348,13 @@ class GNCoreInstance {
      */
     async $event(component, name, ...params) {
         const eventManager = GNCoreEventManager.getInstance();
-        return eventManager.dispatch(component._uid, name, params);
+        return eventManager.dispatch(component._cid, name, params);
     }
     $destroy(component = this, removeEl = true) {
         var _a;
         const stateManager = GNUIState.getInstance();
         // state manager 를 통해 destroy 상태 dispatch
-        stateManager._detectedCycle(component._uid, 'destroy');
+        stateManager._detectedCycle(component._cid, 'destroy');
         // remove DOM (by removeEl)
         if (removeEl) {
             style(component.$el, 'display', 'none');
@@ -17344,11 +17364,11 @@ class GNCoreInstance {
             component.$options._destroy();
         }
         // state manager 를 통해 destroy 상태 dispatch
-        stateManager._detectedCycle(component._uid, 'destroyed');
+        stateManager._detectedCycle(component._cid, 'destroyed');
         // event manager 에서 등록 해제
-        GNCoreEventManager.getInstance().removeAll(component._uid);
-        // state manager에서 component 제거 (uid 기반으로 효율적 제거)
-        stateManager._removeComponentByUid(component._uid);
+        GNCoreEventManager.getInstance().removeAll(component._cid);
+        // state manager에서 component 제거 (cid 기반)
+        stateManager._removeComponentByCid(component._cid);
         // 메모리 누수 방지: component의 모든 hasOwnProperty 제거
         // config, events, methods, _hidden 등 동적으로 추가된 속성 포함
         Object.keys(component).forEach((key) => {
@@ -33305,7 +33325,10 @@ class Dropdown extends GNCoreInstance {
                         text: ''
                     };
                 }
-                this.$event(this, 'onChange', option.value, option.text, this.$options.value);
+                // 기존 의미 유지: 클릭된 옵션 기준으로 value/text 전달
+                const value = !isArray$1(option.value) ? String(option.value) : '';
+                const text = option.text || (isArray$1(option === null || option === void 0 ? void 0 : option.cols) ? option.cols : value);
+                this.$event(this, 'onChange', value, text, this.$options.value);
             },
             toggle: () => {
                 if (this.$options.disabled) {
@@ -33401,18 +33424,33 @@ class Dropdown extends GNCoreInstance {
                     const target = e instanceof Event ? $(e.currentTarget) : find(`[data-value=${option.value}]`, this.$el);
                     e instanceof Event && e.stopPropagation();
                     // toggle 처리
+                    const checkbox = find('input[type=checkbox]', target);
                     if (hasClass(target, 'is-active')) {
                         removeClass(target, 'is-active');
-                        find('input[type=checkbox]', target).checked = false;
+                        if (checkbox) {
+                            checkbox.checked = false;
+                        }
                     }
                     else {
                         addClass(target, 'is-active');
-                        find('input[type=checkbox]', target).checked = true;
+                        if (checkbox) {
+                            checkbox.checked = true;
+                        }
                     }
                     const selected = findAll('.dropdown-item.is-active', this.$el).map((item) => data(item, 'data-value'));
-                    this.$options.value = this.$options.data.filter((opt) => selected.includes(opt.value));
+                    this.$options.value = this.$options.data.filter((opt) => {
+                        // value가 배열이 아닌 경우에만 비교
+                        return !isArray$1(opt.value) && selected.includes(opt.value);
+                    });
                     // text 표시
-                    const selectText = this.$options.value.map((v) => v.text).join(',');
+                    // Implements [US-Rev-014] cols가 있는 경우 첫 번째 컬럼 값을 표시
+                    const selectText = this.$options.value.map((v) => {
+                        if (isArray$1(v === null || v === void 0 ? void 0 : v.cols)) {
+                            return v.cols[0];
+                        }
+                        // value가 배열이 아닌 경우에만 사용
+                        return v.text || (!isArray$1(v.value) ? String(v.value) : '');
+                    }).join(',');
                     text$1(find('.dropdown-text', this.$el), selectText.length ? escapeEntity(selectText) : this.$options.textSets && this.$options.textSets.selectText ? this.$options.textSets.selectText : '');
                     this._hidden.change(option);
                 }
@@ -33434,9 +33472,21 @@ class Dropdown extends GNCoreInstance {
                     }
                     // text 표시
                     const selectText = find('.dropdown-text', this.$el);
-                    text$1(selectText, escapeEntity(option.text));
+                    // Implements [US-Rev-014] cols가 있는 경우 첫 번째 컬럼 값을 표시
+                    let displayText;
+                    if (isArray$1(option === null || option === void 0 ? void 0 : option.cols)) {
+                        displayText = option.cols[0];
+                    }
+                    else {
+                        // value가 배열이 아닌 경우에만 사용
+                        displayText = option.text || (!isArray$1(option.value) ? String(option.value) : '');
+                    }
+                    text$1(selectText, escapeEntity(displayText));
                     // select 선택값 변경
-                    targetSelect.value = option.value;
+                    // value가 배열이 아닌 경우에만 설정
+                    if (!isArray$1(option.value)) {
+                        targetSelect.value = option.value;
+                    }
                     trigger(targetSelect, 'change');
                     this.$options.value = option;
                     this._hidden.change(option);
@@ -33493,21 +33543,76 @@ class Dropdown extends GNCoreInstance {
                     return;
                 }
                 findAll('.dropdown-item', this.$el).forEach((option) => {
-                    if (!includes(data(option, 'value').toUpperCase(), q.toUpperCase()) && !includes(text$1(find('.dropdown-text', option)).toUpperCase(), q.toUpperCase())) {
+                    const itemValue = data(option, 'value');
+                    // value가 배열이 아닌 항목만 검색 대상으로 처리
+                    const rowData = this.$options.flatData.find((item) => {
+                        // value가 배열이 아닌 경우에만 비교
+                        return !isArray$1(item.value) && String(item.value) === itemValue;
+                    });
+                    let match = false;
+                    // Implements [US-Rev-014] 다중 컬럼 모드: cols 배열의 값들을 검색
+                    if (isArray$1(rowData === null || rowData === void 0 ? void 0 : rowData.cols)) {
+                        match = rowData.cols.some((colValue) => {
+                            return includes(String(colValue).toUpperCase(), q.toUpperCase());
+                        });
+                        // value 필드도 검색 대상에 포함 (배열이 아닌 경우에만)
+                        if (!match && rowData.value && !isArray$1(rowData.value)) {
+                            match = includes(String(rowData.value).toUpperCase(), q.toUpperCase());
+                        }
+                    }
+                    else if (rowData) {
+                        // 단일 컬럼 모드: text 또는 value 필드 검색
+                        const textValue = rowData.text || (!isArray$1(rowData.value) ? String(rowData.value) : '');
+                        const valueStr = !isArray$1(rowData.value) ? String(rowData.value) : '';
+                        match = includes(valueStr.toUpperCase(), q.toUpperCase()) || includes(textValue.toUpperCase(), q.toUpperCase());
+                    }
+                    else {
+                        // rowData를 찾지 못한 경우 (그룹화된 항목 등), DOM에서 직접 검색
+                        const textValue = text$1(find('.dropdown-text', option));
+                        match = includes(itemValue.toUpperCase(), q.toUpperCase()) || includes(textValue.toUpperCase(), q.toUpperCase());
+                    }
+                    if (!match) {
                         css$1(option, 'display', 'none');
                     }
                 });
             },
             renderLabel: () => {
-                const _labelText = this.$options.value
-                    ? isArray$1(this.$options.value)
-                        ? this.$options.value.map((v) => v.text).join(',')
-                        : this.$options.value.text
-                    : this.$options.textSets && this.$options.textSets.selectText
-                        ? this.$options.textSets.selectText
-                        : this.$options.flatData.length
-                            ? this.$options.flatData[0].text
-                            : '';
+                // Implements [US-Rev-014] cols가 있는 경우 첫 번째 컬럼 값을 표시
+                let _labelText = '';
+                if (this.$options.value) {
+                    if (isArray$1(this.$options.value)) {
+                        _labelText = this.$options.value.map((v) => {
+                            if (isArray$1(v === null || v === void 0 ? void 0 : v.cols)) {
+                                return v.cols[0];
+                            }
+                            // value가 배열이 아닌 경우에만 사용
+                            return v.text || (!isArray$1(v.value) ? String(v.value) : '');
+                        }).join(',');
+                    }
+                    else {
+                        const value = this.$options.value;
+                        if (isArray$1(value === null || value === void 0 ? void 0 : value.cols)) {
+                            _labelText = value.cols[0];
+                        }
+                        else {
+                            // value가 배열이 아닌 경우에만 사용
+                            _labelText = value.text || (!isArray$1(value.value) ? String(value.value) : '');
+                        }
+                    }
+                }
+                else if (this.$options.textSets && this.$options.textSets.selectText) {
+                    _labelText = this.$options.textSets.selectText;
+                }
+                else if (this.$options.flatData.length) {
+                    const firstItem = this.$options.flatData[0];
+                    if (isArray$1(firstItem === null || firstItem === void 0 ? void 0 : firstItem.cols)) {
+                        _labelText = firstItem.cols[0];
+                    }
+                    else {
+                        // value가 배열이 아닌 경우에만 사용
+                        _labelText = firstItem.text || (!isArray$1(firstItem.value) ? String(firstItem.value) : '');
+                    }
+                }
                 return createElement$1("span", { className: "dropdown-text" }, escapeEntity(_labelText));
             },
             renderSub: (data) => {
@@ -33517,24 +33622,43 @@ class Dropdown extends GNCoreInstance {
                 if (this.$options.type === 'opened' && !items.length) {
                     return createElement$1("div", { className: 'dropdown-nodata' }, this.$options.textSets.noData);
                 }
-                return (createElement$1("ul", null, items.map((option, index) => (createElement$1("li", { id: this._uid + '_opt_' + index, className: 'dropdown-item' +
-                        (option.text ? '' : ' is-unselectable') +
-                        (this.$options.value &&
-                            (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) || !option.text ? null : this._hidden.select.bind(this, option), "data-value": isArray$1(option.value) ? '' : option.value, title: option.text ? escapeEntity(option.text) : '' },
-                    createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' },
-                        option.html ? ('') : this.$options.multiple ? (createElement$1("div", { className: "gn-checks is-small is-no-padding" },
-                            createElement$1("input", { type: "checkbox", id: this._uid + '_chk_' + index, defaultChecked: this.$options.value &&
-                                    (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value), disabled: this.$options.disabled }),
-                            createElement$1("label", { for: this._uid + '_chk_' + index }, escapeEntity(option.text)))) : option.icon ? (createElement$1("span", null,
-                            createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
-                                createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
-                            escapeEntity(option.text))) : (escapeEntity(option.text)),
-                        isArray$1(option.value) && (createElement$1("span", { className: "gn-icon is-small submenu-icon" },
-                            createElement$1("i", { className: "fas fa-angle-right" })))),
-                    isArray$1(option.value) && this._hidden.renderSub(option.value))))));
+                const hasCols = items.some((item) => !(item === null || item === void 0 ? void 0 : item.html) && isArray$1(item === null || item === void 0 ? void 0 : item.cols));
+                return (createElement$1("ul", { className: hasCols ? 'is-cols' : '' }, items.map((option, index) => {
+                    const hasHtml = !!option.html;
+                    const hasColsData = isArray$1(option === null || option === void 0 ? void 0 : option.cols);
+                    const renderAsCols = !hasHtml && hasColsData;
+                    // html이 있으면 text가 있는 항목만 선택 가능
+                    // cols가 있으면 첫 번째 컬럼을 displayText로 사용 (value가 비어도 선택 가능)
+                    const displayText = hasHtml
+                        ? (option.text || '')
+                        : renderAsCols
+                            ? (option.cols && option.cols.length ? String(option.cols[0]) : '')
+                            : (option.text || (!isArray$1(option.value) ? String(option.value) : ''));
+                    return (createElement$1("li", { key: index, id: this._uid + '_opt_' + index, className: 'dropdown-item' +
+                            (renderAsCols ? ' dropdown-row' : '') +
+                            (displayText ? '' : ' is-unselectable') +
+                            (this.$options.value &&
+                                (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)) : '' },
+                        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" },
+                                    createElement$1("input", { type: "checkbox", id: this._uid + '_chk_' + index, defaultChecked: this.$options.value &&
+                                            (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value), disabled: this.$options.disabled }),
+                                    createElement$1("label", { for: this._uid + '_chk_' + index }))),
+                                option.cols.map((col, colIndex) => (createElement$1("span", { key: colIndex, className: "dropdown-col" }, escapeEntity(col)))))) : this.$options.multiple ? (createElement$1("div", { className: "gn-checks is-small is-no-padding" },
+                                createElement$1("input", { type: "checkbox", id: this._uid + '_chk_' + index, defaultChecked: this.$options.value &&
+                                        (isArray$1(this.$options.value) ? this.$options.value.find((v) => v.value === option.value) : option.value === this.$options.value.value), disabled: this.$options.disabled }),
+                                createElement$1("label", { for: this._uid + '_chk_' + index }, escapeEntity(option.text || (!isArray$1(option.value) ? String(option.value) : ''))))) : option.icon ? (createElement$1("span", null,
+                                createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
+                                    createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
+                                escapeEntity(option.text || (!isArray$1(option.value) ? String(option.value) : '')))) : (escapeEntity(option.text || (!isArray$1(option.value) ? String(option.value) : ''))),
+                            isArray$1(option.value) && (createElement$1("span", { className: "gn-icon is-small submenu-icon" },
+                                createElement$1("i", { className: "fas fa-angle-right" })))),
+                        isArray$1(option.value) && this._hidden.renderSub(option.value)));
+                })));
             },
             flatData: () => {
                 // data 검색 편의성을 위해 depth를 없앤 flatdata 생성
@@ -33572,11 +33696,17 @@ class Dropdown extends GNCoreInstance {
                                     : [String(this.$options.value)]; // 기타: 숫자 등
                         this.$options.value = this.$options.flatData.filter((opt) => {
                             const optValue = typeof opt.value === 'string' ? opt.value : String(opt.value);
-                            return values.includes(optValue) && opt.text;
+                            // Implements [US-Rev-014] cols가 있으면 text 없어도 선택 가능
+                            return values.includes(optValue) && (opt.text || isArray$1(opt === null || opt === void 0 ? void 0 : opt.cols) || (!isArray$1(opt.value)));
                         });
                     }
                     else {
-                        this.$options.value = this.$options.flatData.find((opt) => opt.value + '' === this.$options.value + '' && opt.text);
+                        // Implements [US-Rev-014] cols가 있으면 text 없어도 선택 가능
+                        this.$options.value = this.$options.flatData.find((opt) => {
+                            const optValue = !isArray$1(opt.value) ? String(opt.value) : '';
+                            const compareValue = String(this.$options.value);
+                            return optValue === compareValue && (opt.text || isArray$1(opt === null || opt === void 0 ? void 0 : opt.cols) || optValue);
+                        });
                     }
                 }
             },
@@ -34419,7 +34549,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);
@@ -37089,6 +37219,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(' ')
@@ -37129,15 +37266,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)]
@@ -37146,83 +37292,140 @@ 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;
                 }
                 return (createElement$1("div", { "on-click": (e) => {
-                        !this.$options.disabled && this._hidden.selectRow.call(this, row, _index, e);
+                        var _a;
+                        ((_a = this === null || this === void 0 ? void 0 : this.$options) === null || _a === void 0 ? void 0 : _a.onSelect) && !this.$options.disabled && this._hidden.selectRow.call(this, row, _index, e);
                     }, "on-dblclick": (e) => {
-                        !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);
+                        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}` : '') +
+                        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) => {
-                            !this.$options.disabled && this._hidden.selectCell.call(this, col, row, _index, e);
-                        }, "on-mouseenter": (e) => {
-                            !this.$options.disabled && this._hidden.hoverCell.call(this, col, row, _index, e);
-                        }, "on-mouseleave": (e) => {
-                            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)));
@@ -37308,7 +37511,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')) {
@@ -37395,6 +37601,7 @@ class DataGrid extends GNCoreInstance {
             },
             reRender: ({ headers, data, hasCheck }) => {
                 return new Promise(resolve => {
+                    this._refreshOrientationState(this.$options);
                     if (hasCheck === undefined) {
                         hasCheck = this.$options.hasCheck;
                     }
@@ -37603,8 +37810,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');
@@ -37649,6 +37856,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,
@@ -37663,6 +37877,7 @@ class DataGrid extends GNCoreInstance {
                 deleteLabel: '',
                 deleteConfirmMessage: ''
             },
+            orientation: 'vertical',
             childField: 'child',
             checkCapturing: true,
             sort: {
@@ -37683,10 +37898,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 = [];
@@ -37695,45 +37910,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();
             }
         };
@@ -37786,6 +38016,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);
     }
@@ -37793,6 +38051,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,
@@ -37802,7 +38064,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',
@@ -37815,9 +38077,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' : '') +
@@ -37827,7 +38094,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
@@ -37844,7 +38111,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) {
@@ -37857,7 +38129,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);
         }
@@ -37893,7 +38165,7 @@ class DataList extends GNCoreInstance {
                     color: (this.$options.readonly ? 'info' : 'cancel')
                 };
                 return (createElement$1("div", { "on-dblclick": (e) => {
-                        this._hidden.doubleSelect.call(this, row, _index, e);
+                        this.$options.onDoubleClick && this._hidden.doubleSelect.call(this, row, _index, e);
                     }, id: this._uid + '-row-' + _index, className: 'gn-datalist-body-row' + (hasChild ? ' has-child' : '') + (row.isOpened ? '' : ' is-collapsed') + (row.isSelectedRow ? ' is-active' : '') + (depth > 0 && !isOpened ? ' is-hidden' : ''), "data-depth": depth, style: { cursor: this.$options.onSelect ? 'pointer' : 'default' } },
                     createElement$1("ol", { className: 'gn-datalist-ol-container' }, columns.map((col, idx) => {
                         const cellStyle = {};
@@ -37922,9 +38194,9 @@ class DataList extends GNCoreInstance {
                                     (col.bodyClass ? col.bodyClass : col.className ? col.className : '') +
                                     (isFunction(col.onSelect) ? ' is-selectable' : '') +
                                     (col.isHidden ? ' is-unvisible' : ''), style: cellStyle, "on-mouseenter": (e) => {
-                                    this._hidden.hoverCell.call(this, col, row, _index, e);
+                                    col.onHover && this._hidden.hoverCell.call(this, col, row, _index, e);
                                 }, "on-mouseleave": (e) => {
-                                    this._hidden.blurCell.call(this, col, row, _index, e);
+                                    col.offHover && this._hidden.blurCell.call(this, col, row, _index, e);
                                 }, title: !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild)))));
                     })),
                     createElement$1("div", { id: this._uid + '-btn-' + index, className: "gn-datalist-btn-container" },
@@ -38335,6 +38607,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 = {
@@ -38352,6 +38628,7 @@ class Modal extends GNCoreInstance {
             hasClose: true,
             hasConfirm: false,
             hasCancel: false,
+            extraButtons: [],
             isModal: true,
             minimized: false,
             resizable: false,
@@ -38362,7 +38639,8 @@ class Modal extends GNCoreInstance {
         this.events = {
             onClose: true,
             onConfirm: true,
-            onOpen: true
+            onOpen: true,
+            onExtra: true
         };
         this.methods = {
             close() {
@@ -38404,7 +38682,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)))))));
     }
@@ -39199,6 +39480,7 @@ class Message extends GNCoreInstance {
 
 class MenuButton extends GNCoreInstance {
     constructor(name, selector, options = {}) {
+        var _a, _b, _c, _d;
         super(name, selector, options);
         this._hidden = {
             open: () => {
@@ -39210,7 +39492,9 @@ class MenuButton extends GNCoreInstance {
                 removeClass(this.$el, 'is-open');
             },
             select: (menu, e) => {
-                this.$event(this, 'onSelect', menu.value, menu.text, menu, e);
+                // cols만 있고 text가 없는 경우 cols[0]을 text로 사용 (호환성 유지)
+                const menuText = menu.text || (isArray$1(menu === null || menu === void 0 ? void 0 : menu.cols) ? menu.cols[0] : menu.value || '');
+                this.$event(this, 'onSelect', menu.value, menuText, menu, e);
                 this._hidden.close();
             },
             changeText: (buttonText) => {
@@ -39245,12 +39529,16 @@ class MenuButton extends GNCoreInstance {
                     // 부모 경로를 포함한 고유한 ID 생성
                     const currentPath = parentPath ? `${parentPath}-${index}` : `${index}`;
                     const uniqueId = `${this._uid}-${currentPath}`;
+                    const hasColsData = isArray$1(menu === null || menu === void 0 ? void 0 : menu.cols);
+                    const renderAsCols = !hasHtml && hasColsData;
+                    const canSelect = !hasHtml || !!menu.text;
                     return (createElement$1("li", { id: uniqueId, className: 'menuButton-menu' +
                             (this.$options.align ? ' has-text-' + this.$options.align : '') +
                             (canRenderChild ? ' has-submenu' : '') +
                             (depth > 0 ? ' is-submenu-item' : '') +
                             (isDisabled ? ' is-disabled' : '') +
-                            (isActived ? ' is-actived' : ''), "on-click": (e) => {
+                            (isActived ? ' is-actived' : '') +
+                            (renderAsCols ? ' has-cols' : ''), "on-click": (e) => {
                             // disabled 상태이거나 자식 메뉴가 있는 경우 클릭 이벤트 처리하지 않음
                             if (isDisabled) {
                                 e.stopPropagation();
@@ -39259,12 +39547,16 @@ class MenuButton extends GNCoreInstance {
                             }
                             // 자식 메뉴가 없는 경우에만 select 이벤트 발생
                             if (!canRenderChild) {
+                                if (!canSelect) {
+                                    e.stopPropagation();
+                                    return;
+                                }
                                 e.stopPropagation();
                                 this._hidden.select.call(this, menu, e);
                             }
                         }, innerHTML: hasHtml ? menu.html : '' },
-                        hasHtml ? ('') : (createElement$1("span", { className: "menuButton-menu-content" },
-                            createElement$1("span", { className: "menuButton-menu-text" }, menu.text),
+                        hasHtml ? ('') : renderAsCols ? (createElement$1("div", { className: "menubutton-cols" }, menu.cols.map((col, colIndex) => (createElement$1("span", { key: colIndex, className: "menubutton-col" }, escapeEntity(col)))))) : (createElement$1("span", { className: "menuButton-menu-content" },
+                            createElement$1("span", { className: "menuButton-menu-text" }, menu.text || menu.value || ''),
                             canRenderChild && (createElement$1("span", { className: "menuButton-menu-arrow" },
                                 createElement$1("i", { className: "fas fa-caret-right" }))))),
                         canRenderChild && this._hidden.renderMenus.call(this, menu.child, depth + 1, currentPath)));
@@ -39276,9 +39568,11 @@ class MenuButton extends GNCoreInstance {
         };
         this.config = {
             textSets: {
-                buttonText: this.$selector.textContent
+                buttonText: ((_a = this.$selector) === null || _a === void 0 ? void 0 : _a.cols)
+                    ? (isArray$1(this.$selector.cols) ? this.$selector.cols.join(', ') : String(this.$selector.cols))
+                    : (((_b = this.$selector) === null || _b === void 0 ? void 0 : _b.textContent) || ((_c = this.$selector) === null || _c === void 0 ? void 0 : _c.text) || '')
             },
-            name: this.$selector.name,
+            name: (_d = this.$selector) === null || _d === void 0 ? void 0 : _d.name,
             data: [],
             align: 'left'
         };
@@ -39430,15 +39724,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);
             },
@@ -39455,7 +39858,7 @@ class MultiTextArea extends GNCoreInstance {
                     }
                     const textInput = find(`[data-lang=${lang}]`, this.$el);
                     val(textInput, value[lang]);
-                    trigger(textInput, 'keyup');
+                    trigger(textInput, 'input');
                 });
             },
             disable: () => {
@@ -39474,6 +39877,10 @@ class MultiTextArea extends GNCoreInstance {
         this.config = {
             lang: ['en', 'ko'],
             value: {},
+            useMaxLengthMessage: false,
+            textSets: {
+                maxLengthMessage: '{{maxlength}}자 입력 가능합니다.'
+            },
             delegates: {}
         };
         this.events = {
@@ -39498,6 +39905,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);
         }
@@ -39506,11 +39919,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) {
@@ -39556,9 +39972,27 @@ class Picklist extends GNCoreInstance {
                     return;
                 }
                 findAll(`.picklist-${obj} .dropdown-item`, this.$el).forEach((option) => {
-                    if (!includes(data(option, 'value').toUpperCase(), q.toUpperCase()) && !includes(text$1(find('.dropdown-text', option)).toUpperCase(), q.toUpperCase())) {
+                    const itemValue = data(option, 'value');
+                    const rowData = this.$options.data[obj].find((item) => item.value === itemValue);
+                    let match = false;
+                    // Implements [US-Rev-023] 다중 컬럼 모드: cols 배열의 값들을 검색
+                    if (isArray$1(rowData === null || rowData === void 0 ? void 0 : rowData.cols)) {
+                        match = rowData.cols.some((colValue) => {
+                            return includes(String(colValue).toUpperCase(), q.toUpperCase());
+                        });
+                        // value 필드도 검색 대상에 포함
+                        if (!match && rowData.value) {
+                            match = includes(String(rowData.value).toUpperCase(), q.toUpperCase());
+                        }
+                    }
+                    else {
+                        // 단일 컬럼 모드: text 또는 value 필드 검색
+                        const textValue = text$1(find('.dropdown-text', option));
+                        match = includes(data(option, 'value').toUpperCase(), q.toUpperCase()) || includes(textValue.toUpperCase(), q.toUpperCase());
+                    }
+                    if (!match) {
                         css$1(option, 'display', 'none');
-                        this.$options.data[`filtered-${obj}`] = this.$options.data[`filtered-${obj}`].filter((e) => e.value !== option.dataset.value);
+                        this.$options.data[`filtered-${obj}`] = this.$options.data[`filtered-${obj}`].filter((e) => e.value !== itemValue);
                     }
                 });
             },
@@ -39667,9 +40101,20 @@ class Picklist extends GNCoreInstance {
                 isArray$1(addArr) &&
                     addArr.forEach((option) => {
                         const _index = source.findIndex((select) => {
-                            return option.value === select.value && option.text === select.text;
+                            const valueMatch = option.value === select.value;
+                            if (isArray$1(option === null || option === void 0 ? void 0 : option.cols)) {
+                                if (!isArray$1(select === null || select === void 0 ? void 0 : select.cols) || select.cols.length !== option.cols.length) {
+                                    return false;
+                                }
+                                const colsMatch = option.cols.every((col, idx) => col === select.cols[idx]);
+                                return valueMatch && colsMatch;
+                            }
+                            return valueMatch && option.text === select.text;
                         });
-                        target.push(source.splice(_index, 1).pop());
+                        // 매칭 실패 시 (_index === -1) 마지막 항목이 제거되는 것을 방지
+                        if (_index >= 0) {
+                            target.push(source.splice(_index, 1).pop());
+                        }
                     });
             },
             reRender: (obj) => {
@@ -39679,21 +40124,32 @@ class Picklist extends GNCoreInstance {
             },
             renderSub: (item) => {
                 const items = this.$options.data[item] || [];
-                return (createElement$1("ul", null, items.map((option, index) => {
+                const hasColsForList = items.some((item) => !(item === null || item === void 0 ? void 0 : item.html) && isArray$1(item === null || item === void 0 ? void 0 : item.cols));
+                return (createElement$1("ul", { className: hasColsForList ? 'is-cols' : '' }, items.map((option, index) => {
                     var _a;
-                    return (createElement$1("li", { id: this._uid + '_opt_' + index, className: 'dropdown-item' + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": !option.text ? null : this._hidden.toggle.bind(this), "on-dblclick": !option.text
+                    const hasHtml = !!option.html;
+                    const hasColsData = isArray$1(option === null || option === void 0 ? void 0 : option.cols);
+                    const renderAsCols = !hasHtml && hasColsData;
+                    // html이 있으면 text가 있는 항목만 선택 가능
+                    // cols가 있으면 첫 번째 컬럼을 displayText로 사용 (value가 비어도 선택 가능)
+                    const displayText = hasHtml
+                        ? (option.text || '')
+                        : 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
                             ? null
                             : this._hidden.move.bind(this, item === 'source' ? 'add' : 'remove', [
                                 {
                                     value: option.value,
-                                    text: option.text,
+                                    text: renderAsCols ? undefined : option.text,
+                                    cols: hasColsData ? option.cols : undefined,
                                     html: (_a = option.html) !== null && _a !== void 0 ? _a : null
                                 }
-                            ]) },
-                        createElement$1("span", { className: "dropdown-text", innerHTML: option.html ? option.html : '' }, option.html ? ('') : option.icon ? (createElement$1("span", null,
-                            createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
-                                createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
-                            escapeEntity(option.text))) : (escapeEntity(option.text)))));
+                            ]) }, hasHtml ? (createElement$1("span", { className: "dropdown-text", innerHTML: option.html })) : renderAsCols ? (createElement$1("div", { className: "picklist-cols" }, option.cols.map((col, colIndex) => (createElement$1("span", { key: colIndex, className: "picklist-col" }, escapeEntity(col)))))) : (createElement$1("span", { className: "dropdown-text" }, option.icon ? (createElement$1("span", null,
+                        createElement$1("span", { className: 'gn-icon' + (this.$options.size ? ' is-' + this.$options.size : '') },
+                            createElement$1("i", { className: (this.isBrandIcon(option.icon) ? 'fab' : 'fa') + ` fa-${option.icon}` })),
+                        escapeEntity(option.text || option.value))) : (escapeEntity(option.text || option.value))))));
                 })));
             },
             getSelection: (target) => {
@@ -40761,41 +41217,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));
@@ -40826,23 +41297,57 @@ 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 && target.checked) {
-                    parents(target, 'ul')
-                        .map((list) => siblings(list, '.tree-item').pop())
-                        .filter((item) => item)
-                        .forEach((item) => {
-                        find('.is-checker', item).checked = true;
-                    });
+                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: () => {
+            checkAll: (isChecked) => {
+                if (this.$options.disabled) {
+                    return;
+                }
                 findAll('.is-checker', this.$el).forEach((c) => {
-                    c.checked = true;
+                    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) => {
@@ -40868,14 +41373,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('/');
@@ -40954,34 +41498,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 });
                 });
             }
         };
@@ -40992,10 +41548,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,
@@ -41020,7 +41577,19 @@ class Tree extends GNCoreInstance {
                 this._hidden.collapseAll();
             },
             checkAll() {
-                this._hidden.checkAll();
+                if (!this.$options.hasCheck || this.$options.disabled)
+                    return;
+                this._hidden.checkAll(true);
+            },
+            uncheckAll() {
+                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);
@@ -41033,14 +41602,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)));
     }