gnui 1.2.18 → 1.2.20

package/styleguide/assets/js/gnui.js

@@ -16876,65 +16876,65 @@
 	        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;
@@ -16949,8 +16949,8 @@
 	     * - 모든 핸들러를 순차 실행한 뒤, 하나라도 `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) {
@@ -16964,17 +16964,17 @@
 	        }
 	        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}`;
 	    }
 	}
 
@@ -17018,12 +17018,12 @@
 	    }
 	    // 최초 생성 후 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'
 	            };
 	        }
@@ -17038,13 +17038,28 @@
 	        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;
 	    }
@@ -17058,7 +17073,7 @@
 	            // 동일한 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;
@@ -17067,32 +17082,32 @@
 	            }
 	        });
 	    }
-	    // 등록된 컴포넌트 제거 (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를 찾아 제거한다.
@@ -17117,12 +17132,19 @@
 	                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);
 	                }
 	            });
 	        }
@@ -17154,6 +17176,7 @@
 	            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) {
@@ -17164,14 +17187,14 @@
 	        // 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
@@ -17233,7 +17256,7 @@
 	        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);
@@ -17278,12 +17301,17 @@
 	            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)) {
@@ -17303,11 +17331,11 @@
 	            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);
 	                }
 	            });
 	        }
@@ -17326,13 +17354,13 @@
 	     */
 	    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');
@@ -17342,11 +17370,11 @@
 	            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) => {
@@ -33303,7 +33331,10 @@
 	                        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) {
@@ -33399,18 +33430,33 @@
 	                    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);
 	                }
@@ -33432,9 +33478,21 @@
 	                    }
 	                    // 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);
@@ -33491,21 +33549,76 @@
 	                    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) => {
@@ -33515,24 +33628,43 @@
 	                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 생성
@@ -33570,11 +33702,17 @@
 	                                    : [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);
+	                        });
 	                    }
 	                }
 	            },
@@ -37148,9 +37286,11 @@
 	                    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) => {
@@ -37201,11 +37341,11 @@
 	                            (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)));
 	                })));
 	            },
@@ -37891,7 +38031,7 @@
 	                    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 = {};
@@ -37920,9 +38060,9 @@
 	                                    (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" },
@@ -39197,6 +39337,7 @@
 
 	class MenuButton extends GNCoreInstance {
 	    constructor(name, selector, options = {}) {
+	        var _a, _b, _c, _d;
 	        super(name, selector, options);
 	        this._hidden = {
 	            open: () => {
@@ -39208,7 +39349,9 @@
 	                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) => {
@@ -39243,12 +39386,16 @@
 	                    // 부모 경로를 포함한 고유한 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();
@@ -39257,12 +39404,16 @@
 	                            }
 	                            // 자식 메뉴가 없는 경우에만 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)));
@@ -39274,9 +39425,11 @@
 	        };
 	        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'
 	        };
@@ -39554,9 +39707,27 @@
 	                    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);
 	                    }
 	                });
 	            },
@@ -39665,9 +39836,20 @@
 	                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) => {
@@ -39677,21 +39859,32 @@
 	            },
 	            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) => {
@@ -40828,19 +41021,32 @@
 	                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) => {
@@ -41018,7 +41224,14 @@
 	                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);