gnui 1.2.18 → 1.2.20

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,12 +17126,19 @@ class GNUIState {
                 if (isElement$2(rm) && attr(rm, 'data-gnui')) {
                     remove($('#' + attr(rm, 'data-gnui')));
                 }
+                const childComponents = $$('[data-component-id]', rm);
+                each(childComponents, (childComponent) => {
+                    if (isElement$2(childComponent)) {
+                        const findComponent = closerThis._getComponent($(childComponent));
+                        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') {
-                    // state manager 에서 component 삭제
-                    closerThis._removeComponent(rm);
-                    // event manager 에서 unbind
-                    GNCoreEventManager.getInstance().removeAll(findComponent._uid);
+                if (findComponent && findComponent._cid && !((_a = findComponent.$el) === null || _a === void 0 ? void 0 : _a.parentNode) && findComponent.$name !== 'modal') {
+                    findComponent.$destroy(findComponent, false);
                 }
             });
         }
@@ -17148,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) {
@@ -17158,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
@@ -17227,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);
@@ -17272,12 +17295,17 @@ class GNCoreInstance {
             if (tmpRole) {
                 attr(this.$el, 'role', tmpRole);
             }
+            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)) {
@@ -17297,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);
                 }
             });
         }
@@ -17320,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');
@@ -17336,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) => {
@@ -33297,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) {
@@ -33393,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);
                 }
@@ -33426,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);
@@ -33485,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) => {
@@ -33509,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 생성
@@ -33564,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);
+                        });
                     }
                 }
             },
@@ -37142,9 +37280,11 @@ class DataGrid extends GNCoreInstance {
                     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);
+                        var _a;
+                        ((_a = this === null || this === void 0 ? void 0 : this.$options) === null || _a === void 0 ? void 0 : _a.onDoubleClick) && !this.$options.disabled && this._hidden.doubleSelect.call(this, row, _index, e);
                     }, className: 'gn-datagrid-body-row' + (hasChild ? ' has-child' : '') + (row.isOpened ? '' : ' is-collapsed') + (depth > 0 && !isOpened ? ' is-hidden' : '') + (row.color ? ` ${row.color}` : ''), style: {
                         'grid-template-columns': this._columnsTemplate.join(' ')
                     }, id: this._uid + '-row-' + _index, "data-depth": depth }, columns.map((col, idx) => {
@@ -37195,11 +37335,11 @@ class DataGrid extends GNCoreInstance {
                             (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);
+                            col.onSelect && !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);
+                            col.onHover && !this.$options.disabled && 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.tipField && row[col.tipField] ? row[col.tipField] : !col.template && row[col.key] ? row[col.key] : '' }, this._hidden.renderCell(row, col, idx, hasChild, isCheck, _index)));
                 })));
             },
@@ -37885,7 +38025,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 = {};
@@ -37914,9 +38054,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" },
@@ -39191,6 +39331,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: () => {
@@ -39202,7 +39343,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) => {
@@ -39237,12 +39380,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();
@@ -39251,12 +39398,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)));
@@ -39268,9 +39419,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'
         };
@@ -39548,9 +39701,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);
                     }
                 });
             },
@@ -39659,9 +39830,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) => {
@@ -39671,21 +39853,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) => {
@@ -40822,19 +41015,32 @@ class Tree extends GNCoreInstance {
                 findAll('.is-checker', parents(target, 'li')[0]).forEach((c) => {
                     c.checked = target.checked;
                 });
-                if (this.$options.checkPath && target.checked) {
+                if (this.$options.checkPath) {
                     parents(target, 'ul')
                         .map((list) => siblings(list, '.tree-item').pop())
                         .filter((item) => item)
                         .forEach((item) => {
-                        find('.is-checker', item).checked = true;
+                        const parentChecker = find('.is-checker', item);
+                        if (!parentChecker) {
+                            return;
+                        }
+                        const parentLi = parents(item, 'li')[0];
+                        if (!parentLi) {
+                            return;
+                        }
+                        // 자식 중 하나라도 체크면 부모 체크, 전부 해제되면 부모도 해제
+                        const descendantCheckers = findAll('.is-checker', parentLi).filter((checker) => checker !== parentChecker);
+                        if (!descendantCheckers.length) {
+                            return;
+                        }
+                        parentChecker.checked = descendantCheckers.some((checker) => checker.checked);
                     });
                 }
                 this.$event(this, 'onCheck', item, target.checked, this._hidden.getItemIndex(target), e);
             },
-            checkAll: () => {
+            checkAll: (isChecked) => {
                 findAll('.is-checker', this.$el).forEach((c) => {
-                    c.checked = true;
+                    c.checked = isChecked;
                 });
             },
             getChecked: (withStatus = false) => {
@@ -41012,7 +41218,14 @@ class Tree extends GNCoreInstance {
                 this._hidden.collapseAll();
             },
             checkAll() {
-                this._hidden.checkAll();
+                if (!this.$options.hasCheck)
+                    return;
+                this._hidden.checkAll(true);
+            },
+            uncheckAll() {
+                if (!this.$options.hasCheck)
+                    return;
+                this._hidden.checkAll(false);
             },
             getChecked(withStatus = false) {
                 return this._hidden.getChecked(withStatus);