gnui 1.2.17 → 1.2.19

package/styleguide/assets/js/gnui.js

@@ -16930,7 +16930,10 @@
 	        // 이벤트 삭제
 	        delete this._eventMap[uid];
 	    }
-	    dispatch(uid, name, params) {
+	    /**
+	     * lifeCycle 핸들러 실행
+	     */
+	    cyclepatch(uid, name, params) {
 	        const _events = this._getEvent(uid, name);
 	        if (_events.length) {
 	            _events.forEach((_event) => {
@@ -16939,6 +16942,28 @@
 	            });
 	        }
 	    }
+	    /**
+	     * 등록된 이벤트 핸들러 실행
+	     *
+	     * - sync/async 핸들러를 모두 지원한다.
+	     * - 모든 핸들러를 순차 실행한 뒤, 하나라도 `false` 를 반환한 경우 `true`(cancelled)를 반환한다.
+	     *   (첫 false 에서 중단하지 않고, 나머지 핸들러도 계속 실행한다)
+	     */
+	    async dispatch(uid, name, params) {
+	        const _events = this._getEvent(uid, name);
+	        let cancelled = false;
+	        if (_events.length) {
+	            for (const _event of _events) {
+	                const _target = _event.target || this;
+	                // sync/async 둘 다 지원: Promise.resolve 로 감싸서 await
+	                const result = await Promise.resolve(params ? _event.handler.call(_target, ...params) : _event.handler.call(_target));
+	                if (result === false) {
+	                    cancelled = true;
+	                }
+	            }
+	        }
+	        return cancelled;
+	    }
 	    _getEvent(uid, name) {
 	        // parameters에 해당하는 이벤트 반환
 	        return this._eventMap[uid]
@@ -17023,7 +17048,7 @@
 	        });
 	        return _findComponent;
 	    }
-	    // 등록된 컴포넌트 제거
+	    // 등록된 컴포넌트 제거 (selector 기반)
 	    _removeComponent(selector) {
 	        if (!selector) {
 	            return;
@@ -17032,10 +17057,30 @@
 	        Object.values(this._componentMap).forEach(n => {
 	            // 동일한 selector 인지 비교해서 동일한 component의 selector이면 제거 처리
 	            if (isEquals(n.selector, _selector)) {
-	                delete this._componentMap[_selector._uid];
+	                // componentMap에서 완전히 제거
+	                delete this._componentMap[n.uid];
+	                // 컴포넌트 내부 참조도 제거 (메모리 누수 방지)
+	                if (n.component) {
+	                    n.component = null;
+	                }
+	                n.selector = null;
 	            }
 	        });
 	    }
+	    // 등록된 컴포넌트 제거 (uid 기반 - 더 효율적)
+	    _removeComponentByUid(uid) {
+	        if (!uid || !this._componentMap[uid]) {
+	            return;
+	        }
+	        // 컴포넌트 내부 참조 제거 (메모리 누수 방지)
+	        const componentInfo = this._componentMap[uid];
+	        if (componentInfo.component) {
+	            componentInfo.component = null;
+	        }
+	        componentInfo.selector = null;
+	        // componentMap에서 완전히 제거
+	        delete this._componentMap[uid];
+	    }
 	    // 컴포넌트 life cycle에 따른 eventManager dispatch
 	    _detectedCycle(uid, name) {
 	        // component 마지막 status 업데이트
@@ -17045,7 +17090,7 @@
 	        // event manager를 이용해 해당 uid 이벤트 dispatch
 	        const eventManager = GNCoreEventManager.getInstance();
 	        // 호출 후
-	        eventManager.dispatch(uid, name, '');
+	        eventManager.cyclepatch(uid, name, '');
 	        // 이벤트 해제 - life cycle 은 컴포넌트 별로 한번씩만 존재하므로..
 	        eventManager.remove(uid, name);
 	    }
@@ -17059,6 +17104,7 @@
 	        function _removedNode(removed) {
 	            Array.prototype.forEach.call(removed, (rm) => {
 	                // 삭제노드 연관 컴포넌트 (ex. tooltip) 삭제
+	                var _a;
 	                const dependents = findAll('[data-gnui]', rm);
 	                each(dependents, (dependent) => {
 	                    if (isElement$2(dependent)) {
@@ -17071,12 +17117,19 @@
 	                if (isElement$2(rm) && attr(rm, 'data-gnui')) {
 	                    remove($('#' + attr(rm, 'data-gnui')));
 	                }
+	                const childComponents = $$('[data-gn-uid]', rm);
+	                each(childComponents, (childComponent) => {
+	                    if (isElement$2(childComponent)) {
+	                        const findComponent = closerThis._getComponent($(childComponent));
+	                        if (findComponent && findComponent._uid && findComponent.$el && findComponent.$name !== 'modal') {
+	                            // $destroy 내부에서 removeAll과 _removeComponentByUid를 처리하므로 직접 호출만
+	                            findComponent.$destroy(findComponent, false);
+	                        }
+	                    }
+	                });
 	                const findComponent = closerThis._getComponent($(rm));
-	                if (findComponent && findComponent._uid && !findComponent.$el.parentNode && findComponent.$name !== 'modal') {
-	                    // state manager 에서 component 삭제
-	                    closerThis._removeComponent(rm);
-	                    // event manager 에서 unbind
-	                    GNCoreEventManager.getInstance().removeAll(findComponent._uid);
+	                if (findComponent && findComponent._uid && !((_a = findComponent.$el) === null || _a === void 0 ? void 0 : _a.parentNode) && findComponent.$name !== 'modal') {
+	                    findComponent.$destroy(findComponent, false);
 	                }
 	            });
 	        }
@@ -17232,6 +17285,7 @@
 	            if (tmpRole) {
 	                attr(this.$el, 'role', tmpRole);
 	            }
+	            attr(this.$el, 'data-gn-uid', this._uid);
 	            // inherit selector class
 	            selector.className && addClass(this.$el, selector.className);
 	        }
@@ -17271,25 +17325,48 @@
 	    }
 	    // eslint-disable-next-line @typescript-eslint/no-unused-vars
 	    $update(element = this.$el, e) { }
-	    $event(component, name, ...params) {
+	    /**
+	     * 컴포넌트 이벤트 디스패치 헬퍼
+	     *
+	     * - sync/async 핸들러 모두 지원한다.
+	     * - 하나 이상의 핸들러에서 `false`를 반환하면 `true`(cancelled) 를 반환한다.
+	     * - 단순 알림용(fire-and-forget) 이벤트는 반환값/await 없이 호출해도 된다.
+	     */
+	    async $event(component, name, ...params) {
 	        const eventManager = GNCoreEventManager.getInstance();
-	        eventManager.dispatch(component._uid, name, params);
+	        return eventManager.dispatch(component._uid, name, params);
 	    }
 	    $destroy(component = this, removeEl = true) {
+	        var _a;
 	        const stateManager = GNUIState.getInstance();
 	        // state manager 를 통해 destroy 상태 dispatch
 	        stateManager._detectedCycle(component._uid, 'destroy');
-	        // remove Component in state manager
-	        stateManager._removeComponent(component.$selector);
 	        // remove DOM (by removeEl)
 	        if (removeEl) {
 	            style(component.$el, 'display', 'none');
 	            remove(component.$el);
 	        }
+	        if (((_a = component.$options) === null || _a === void 0 ? void 0 : _a._destroy) && isFunction(component.$options._destroy)) {
+	            component.$options._destroy();
+	        }
 	        // state manager 를 통해 destroy 상태 dispatch
 	        stateManager._detectedCycle(component._uid, 'destroyed');
-	        // event manager 에서 등록 해제가 가장 마지막..
+	        // event manager 에서 등록 해제
 	        GNCoreEventManager.getInstance().removeAll(component._uid);
+	        // state manager에서 component 제거 (uid 기반으로 효율적 제거)
+	        stateManager._removeComponentByUid(component._uid);
+	        // 메모리 누수 방지: component의 모든 hasOwnProperty 제거
+	        // config, events, methods, _hidden 등 동적으로 추가된 속성 포함
+	        Object.keys(component).forEach((key) => {
+	            try {
+	                component[key] = null;
+	                delete component[key];
+	            }
+	            catch (e) {
+	                // readonly 속성 등 삭제 불가능한 경우 무시
+	            }
+	        });
+	        component = null;
 	    }
 	}
 
@@ -33490,8 +33567,19 @@
 	                });
 	                if (this.$options.value) {
 	                    if (this.$options.multiple) {
-	                        const values = this.$options.value.split(',');
-	                        this.$options.value = this.$options.flatData.filter((opt) => values.includes(opt.value) && opt.text);
+	                        // multiple 모드에서 다양한 타입의 value를 문자열 배열로 변환
+	                        // 지원 타입: 문자열(쉼표 구분), 객체 배열, 단일 객체, 문자열 배열
+	                        const values = typeof this.$options.value === 'string'
+	                            ? this.$options.value.split(',') // 케이스 1: 'item1,item2,item3'
+	                            : Array.isArray(this.$options.value)
+	                                ? this.$options.value.map((v) => (typeof v === 'object' && v !== null && 'value' in v ? String(v.value) : String(v))) // 케이스 3: [{value:'item1', text:'항목1'}, ...] 또는 ['item1', 'item2']
+	                                : typeof this.$options.value === 'object' && this.$options.value !== null && 'value' in this.$options.value
+	                                    ? [String(this.$options.value.value)] // 케이스 2: {value:'item1', text:'항목1'}
+	                                    : [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;
+	                        });
 	                    }
 	                    else {
 	                        this.$options.value = this.$options.flatData.find((opt) => opt.value + '' === this.$options.value + '' && opt.text);
@@ -37006,26 +37094,8 @@
 	                }
 	                this.$event(this, 'onSort', column);
 	            },
-	            renderHeader: (columns) => {
-	                this.$options.hasOrder &&
-	                    !this.$options.readonly &&
-	                    columns.push({
-	                        label: this.$options.textSets.orderLabel,
-	                        key: 'btnOrder',
-	                        style: {
-	                            width: '50px'
-	                        }
-	                    });
-	                this.$options.hasDelete &&
-	                    !this.$options.readonly &&
-	                    columns.push({
-	                        label: this.$options.textSets.deleteLabel,
-	                        key: 'btnDelete',
-	                        style: {
-	                            width: '30px'
-	                        }
-	                    });
-	                this._setColumnsTemplate();
+	            renderHeader: (columns, isReset = false) => {
+	                this._setColumnsTemplate(isReset);
 	                return (createElement$1("div", { className: "gn-datagrid-header-row", style: {
 	                        'grid-template-columns': this._columnsTemplate.join(' ')
 	                    } },
@@ -37064,6 +37134,10 @@
 	                    column.draggable && (this.$options.headers ? idx < this.$options.headers.length - 1 : true) && createElement$1("span", { className: "is-handle", "data-index": idx })));
 	            },
 	            renderBody: (data, columns) => {
+	                // 헤더가 숨겨진 경우에도 body 렌더 전에 템플릿 폭을 준비한다
+	                if (!this._columnsTemplate || !this._columnsTemplate.length) {
+	                    this._setColumnsTemplate();
+	                }
 	                rowIdx$1 = 0;
 	                return (createElement$1("div", { className: "gn-datagrid-body", style: {
 	                        maxHeight: this.$options.bodyHeight ? this.$options.bodyHeight : 'auto'
@@ -37077,7 +37151,6 @@
 	                });
 	            },
 	            renderRow: (row, columns, depth = 0, hasChild, isOpened, isCheck = false) => {
-	                row._depth = depth;
 	                const _index = rowIdx$1++;
 	                if (row.isChecked) {
 	                    isCheck = true;
@@ -37211,8 +37284,9 @@
 	                    e.stopPropagation();
 	                    toggler = parents(e.currentTarget, '.gn-datagrid-body-row');
 	                }
-	                const children = nextUntil(toggler, '.gn-datagrid-body-row[data-depth="' + row._depth + '"]').filter((x) => {
-	                    return x.dataset.depth > row._depth;
+	                const rowDepth = Number(attr(toggler, 'data-depth')) || 0;
+	                const children = nextUntil(toggler, '.gn-datagrid-body-row[data-depth="' + rowDepth + '"]').filter((x) => {
+	                    return Number(attr(x, 'data-depth')) > rowDepth;
 	                });
 	                type = type ? type : hasClass(toggler, 'is-collapsed') ? 'expand' : 'collapse';
 	                if (type === 'collapse') {
@@ -37228,7 +37302,7 @@
 	                    //show childs
 	                    removeClass(toggler, 'is-collapsed');
 	                    removeClass(children.filter((x) => {
-	                        return x.dataset.depth == row._depth + 1;
+	                        return Number(attr(x, 'data-depth')) == rowDepth + 1;
 	                    }), 'is-hidden');
 	                    this.$event(this, 'onToggle', 'expanded', row, index$1(toggler));
 	                }
@@ -37286,13 +37360,15 @@
 	                e.stopPropagation();
 	                const checker = parents(e.currentTarget, '.gn-datagrid-body-row');
 	                const checkerState = e.target.checked;
-	                find('.is-allChecker', this.$el).checked = false;
+	                const allChecker = find('.is-allChecker', this.$el);
+	                allChecker && (allChecker.checked = false);
+	                const rowDepth = Number(attr(checker, 'data-depth')) || 0;
 	                // 1. row에 자식노드가 있는지 확인한다.
 	                if (this.$options.checkCapturing && row[this.$options.childField] && row[this.$options.childField].length) {
 	                    // 2. 자식노드가 있는경우 자식 체크박스도 함께 토글한다.
-	                    nextUntil(checker, '.gn-datagrid-body-row[data-depth="' + row._depth + '"]')
+	                    nextUntil(checker, '.gn-datagrid-body-row[data-depth="' + rowDepth + '"]')
 	                        .filter((x) => {
-	                        return x.dataset.depth > row._depth;
+	                        return Number(attr(x, 'data-depth')) > rowDepth;
 	                    })
 	                        .forEach((x) => {
 	                        const _checker = find('.is-rowChecker', x);
@@ -37302,17 +37378,17 @@
 	                    });
 	                }
 	                // 3. 체크 해제인 경우만 부모노드가 있는지 확인한다.
-	                if (this.$options.checkCapturing && row._depth > 0 && !checkerState) {
+	                if (this.$options.checkCapturing && rowDepth > 0 && !checkerState) {
 	                    // 4. 부모노드가 체크되어 있는지 확인한다
 	                    const exeDepth = [];
 	                    prevUntil(checker, '.gn-datagrid-body-row[data-depth="0"]')
 	                        .filter((x) => {
-	                        const _thisDepth = x.dataset.depth;
+	                        const _thisDepth = attr(x, 'data-depth');
 	                        if (exeDepth.includes(_thisDepth)) {
 	                            return false;
 	                        }
 	                        exeDepth.push(_thisDepth);
-	                        return _thisDepth < row._depth;
+	                        return Number(_thisDepth) < rowDepth;
 	                    })
 	                        .forEach((x) => {
 	                        const _checker = find('.is-rowChecker', x);
@@ -37328,9 +37404,21 @@
 	                    if (hasCheck === undefined) {
 	                        hasCheck = this.$options.hasCheck;
 	                    }
-	                    this.$options.headers = headers;
+	                    const prevHeaders = [...(this.$options.headers || [])];
+	                    // _prepareHeaders가 배열을 변경하므로 비교용(prevHeaders)과 가공용(baseHeaders)을 분리한다
+	                    const baseHeaders = headers ? [...headers] : [...prevHeaders];
+	                    const preparedHeaders = this._prepareHeaders(baseHeaders);
+	                    // 헤더 배열의 내용(길이, key)이 바뀐 경우에만 DOM 기반 폭 계산을 리셋한다
+	                    const isReset = prevHeaders.length !== preparedHeaders.length || prevHeaders.some((header, idx) => { var _a; return header.key !== ((_a = preparedHeaders[idx]) === null || _a === void 0 ? void 0 : _a.key); });
 	                    this.$options.hasCheck = hasCheck;
-	                    this.$template.reRender(find('.gn-datagrid-header-row', this.$el), this._hidden.renderHeader(this.$options.headers));
+	                    const headerRow = find('.gn-datagrid-header-row', this.$el);
+	                    // 헤더가 없을 때도 컬럼 수/폭 변경을 반영하기 위해 템플릿을 갱신한다
+	                    if (this.$options.hasHeader && headerRow) {
+	                        this.$template.reRender(headerRow, this._hidden.renderHeader(preparedHeaders, isReset));
+	                    }
+	                    else {
+	                        this._setColumnsTemplate(isReset);
+	                    }
 	                    this._hidden.resetData(data ? arrClone(data) : this.$options.data);
 	                    this.$render(this.$options);
 	                    isFunction(resolve) && resolve();
@@ -37345,6 +37433,10 @@
 	                });
 	            },
 	            awaitData: (data) => {
+	                // asyncData 콜백 실행 중 컴포넌트가 destroy된 경우 안전하게 종료
+	                if (!this.$options || !this._hidden) {
+	                    return;
+	                }
 	                if (this.$options.asyncData && this.$options.paginator && !this._paginator) {
 	                    this._paginator = new Pagination('pagination', find('.gn-datagrid-footer', this.$el), {
 	                        total: this.$options.paginator.total || 0,
@@ -37369,7 +37461,8 @@
 	                    this._fixCellStyleOnDraggable();
 	                    // 체크박스가 있는경우 전체 체크항목을 해제해준다
 	                    if (this.$options.hasCheck) {
-	                        find('.is-allChecker', this.$el).checked = false;
+	                        const allChecker = find('.is-allChecker', this.$el);
+	                        allChecker && (allChecker.checked = false);
 	                    }
 	                    isFunction(resolve) && resolve();
 	                });
@@ -37404,8 +37497,18 @@
 	            stopRowSelectEvent: (e) => {
 	                e.stopPropagation();
 	            },
-	            deleteRow: (index) => {
-	                this.$options.data = this.$options.data.filter((_data, idx) => index !== idx);
+	            deleteRow: async (index) => {
+	                var _a;
+	                const confirmMessage = (_a = this.$options.textSets) === null || _a === void 0 ? void 0 : _a.deleteConfirmMessage;
+	                if (confirmMessage && !window.confirm(confirmMessage)) {
+	                    return;
+	                }
+	                const removedData = this._hidden.findData(index);
+	                const cancelled = await this.$event(this, 'onDelete', removedData, index);
+	                if (cancelled) {
+	                    return;
+	                }
+	                this._hidden.deleteData(index);
 	                this._hidden.resetData(this.$options.data);
 	                this.$event(this, 'onChange', this.$options.data);
 	            },
@@ -37440,22 +37543,38 @@
 	                col.offHover && col.offHover.call(this, row, col, index, e);
 	            },
 	            findData: (index) => {
-	                let deter = 0, indexData = null;
-	                const findIndex = (datas, index) => {
-	                    return datas.some((data) => {
-	                        if (index === deter) {
-	                            indexData = data;
+	                return this._hidden.walkByIndex(index, 'find');
+	            },
+	            deleteData: (index) => {
+	                return this._hidden.walkByIndex(index, 'delete');
+	            },
+	            walkByIndex: (index, action) => {
+	                let deter = 0;
+	                let result = null;
+	                const findIndex = (datas) => {
+	                    for (let i = 0; i < datas.length; i++) {
+	                        if (deter === index) {
+	                            switch (action) {
+	                                case 'find':
+	                                    result = datas[i];
+	                                    break;
+	                                case 'delete':
+	                                    result = datas.splice(i, 1)[0];
+	                                    break;
+	                            }
 	                            return true;
 	                        }
-	                        ++deter;
-	                        if (isArray$1(data[this.$options.childField]) && data[this.$options.childField].length) {
-	                            return findIndex(data[this.$options.childField], index);
+	                        deter++;
+	                        const children = datas[i][this.$options.childField];
+	                        if (Array.isArray(children) && children.length) {
+	                            if (findIndex(children))
+	                                return true;
 	                        }
-	                        return false;
-	                    });
+	                    }
+	                    return false;
 	                };
-	                findIndex(this.$options.data, index);
-	                return indexData;
+	                findIndex(this.$options.data);
+	                return result;
 	            },
 	            getChecked: () => {
 	                return findAll('.is-rowChecker', this.$el)
@@ -37542,11 +37661,13 @@
 	            hasOrder: false,
 	            hasDelete: false,
 	            isEllipsis: false,
+	            hasHeader: true,
 	            data: [],
 	            textSets: {
 	                noData: 'No records available.',
 	                orderLabel: '',
-	                deleteLabel: ''
+	                deleteLabel: '',
+	                deleteConfirmMessage: ''
 	            },
 	            childField: 'child',
 	            checkCapturing: true,
@@ -37564,7 +37685,8 @@
 	            onCheck: true,
 	            onDoubleClick: true,
 	            onChange: true,
-	            onDragEnd: true
+	            onDragEnd: true,
+	            onDelete: true
 	        };
 	        this.methods = {
 	            reRender(options) {
@@ -37624,18 +37746,21 @@
 	        this.$selector = this.$selector;
 	        this.$init(this, options);
 	    }
-	    _setColumnsTemplate() {
+	    _setColumnsTemplate(isReset = false) {
 	        // header cell의 각 넓이를 배열로 가져온다
 	        // ! 모든 컬럼의 넓이가 지정된 경우 이동(btnOrder), 삭제(btnDelete) 컬럼을 제외한 마지막 컬럼은 1fr로 고정
 	        const _isfixedAllWidth = this.$options.headers.every((header) => { var _a; return ((_a = header.style) === null || _a === void 0 ? void 0 : _a.width) !== undefined; });
 	        const _fixedTemplateColumn = this.$options.headers.findLast((header) => !this._isSystemAddedColumn(header.key) && !header.isHidden);
+	        // 헤더 DOM이 없거나 모든 일반 컬럼이 숨겨진 경우에도 안전하게 비교할 수 있도록 key만 옵셔널하게 캐싱한다
+	        const _fixedTemplateKey = _fixedTemplateColumn === null || _fixedTemplateColumn === void 0 ? void 0 : _fixedTemplateColumn.key;
 	        const columns = findAll('.gn-datagrid-header-cell', this.$el);
-	        if (this.$el && columns.length) {
+	        // isReset이면 기존 DOM 폭을 재사용하지 않고 헤더 정의로 재계산
+	        if (this.$el && columns.length && !isReset) {
 	            this._columnsTemplate = findAll('.gn-datagrid-header-cell', this.$el).map((header, idx) => {
 	                if (this.$options.headers[idx].isHidden) {
 	                    return '';
 	                }
-	                else if (_isfixedAllWidth && this.$options.headers[idx].key === _fixedTemplateColumn.key) {
+	                else if (_isfixedAllWidth && _fixedTemplateKey && this.$options.headers[idx].key === _fixedTemplateKey) {
 	                    return '1fr';
 	                }
 	                else {
@@ -37649,7 +37774,7 @@
 	                if (header.isHidden) {
 	                    return '';
 	                }
-	                else if (_isfixedAllWidth && header.key === _fixedTemplateColumn.key) {
+	                else if (_isfixedAllWidth && _fixedTemplateKey && header.key === _fixedTemplateKey) {
 	                    return '1fr';
 	                }
 	                else {
@@ -37670,18 +37795,45 @@
 	    _isSystemAddedColumn(key) {
 	        return ['btnOrder', 'btnDelete'].includes(key);
 	    }
+	    // 옵션에 따른 추가 해더 구성
+	    _prepareHeaders(headers = []) {
+	        const hasOrderColumn = headers.some((header) => header.key === 'btnOrder');
+	        const hasDeleteColumn = headers.some((header) => header.key === 'btnDelete');
+	        if (this.$options.hasOrder && !this.$options.readonly && !hasOrderColumn) {
+	            headers.push({
+	                label: this.$options.textSets.orderLabel,
+	                key: 'btnOrder',
+	                style: {
+	                    width: '50px'
+	                }
+	            });
+	        }
+	        if (this.$options.hasDelete && !this.$options.readonly && !hasDeleteColumn) {
+	            headers.push({
+	                label: this.$options.textSets.deleteLabel,
+	                key: 'btnDelete',
+	                style: {
+	                    width: '30px'
+	                }
+	            });
+	        }
+	        this.$options.headers = headers;
+	        return headers;
+	    }
 	    template(config) {
 	        const styles = {};
+	        const headers = this._prepareHeaders(config.headers);
 	        return (createElement$1("div", { id: this._uid, className: 'gn-datagrid' +
 	                (config.style ? ' is-' + config.style : '') +
 	                (config.isEllipsis ? ' is-ellipsis' : '') +
 	                (config.bodyHeight ? ' has-fixed-body' : '') +
 	                (config.fixHeader ? ' has-fixed-header' : '') +
 	                (config.fixFooter ? ' has-fixed-footer' : '') +
+	                (!config.hasHeader ? ' is-headless' : '') +
 	                (config.data.some((d) => isArray$1(d[this.$options.childField])) ? ' has-left-padding' : '') +
 	                (config.disabled ? ' is-disabled' : ''), style: styles },
-	            createElement$1("div", { className: "gn-datagrid-header" }, this._hidden.renderHeader(config.headers)),
-	            createElement$1("div", { className: "gn-datagrid-contents", style: { marginTop: this.$options.bodyTopMargin ? this.$options.bodyTopMargin : '0', marginBottom: this.$options.bodyBottomMargin ? this.$options.bodyBottomMargin : '0' } }, this._hidden.renderBody(arrClone(config.data), config.headers)),
+	            config.hasHeader && createElement$1("div", { className: "gn-datagrid-header" }, this._hidden.renderHeader(headers)),
+	            createElement$1("div", { className: "gn-datagrid-contents", style: { marginTop: this.$options.bodyTopMargin ? this.$options.bodyTopMargin : '0', marginBottom: this.$options.bodyBottomMargin ? this.$options.bodyBottomMargin : '0' } }, this._hidden.renderBody(arrClone(config.data), headers)),
 	            config.paginator /* 페이지네이터 옵션 확인 */ && createElement$1("div", { className: "gn-datagrid-footer" })));
 	    }
 	    // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37698,18 +37850,20 @@
 	        }
 	    }
 	    completed() {
-	        if (this.$options.fixHeader) {
+	        if (this.$options.fixHeader && this.$options.hasHeader) {
 	            const body = find('.gn-datagrid-contents', this.$el);
 	            const header = find('.gn-datagrid-header', this.$el);
-	            const _offset = offset(header);
-	            this.$options.bodyTopMargin = _offset.height ? _offset.height - 1 + 'px' : '2.4rem';
-	            css$1(body, 'margin-top', this.$options.bodyTopMargin);
+	            if (header) {
+	                const _offset = offset(header);
+	                this.$options.bodyTopMargin = _offset.height ? _offset.height - 1 + 'px' : '2.4rem';
+	                css$1(body, 'margin-top', this.$options.bodyTopMargin);
+	            }
 	            if (this.$options.paginator) {
 	                this.$options.bodyBottomMargin = '2.4rem';
 	                css$1(body, 'margin-bottom', this.$options.bodyBottomMargin);
 	            }
 	        }
-	        if (this.$options.fixHeader || this.$options.bodyHeight) {
+	        if ((this.$options.fixHeader && this.$options.hasHeader) || this.$options.bodyHeight) {
 	            this._hidden.setBlankHeader();
 	            on(window, 'resize', this._hidden.setBlankHeader);
 	        }
@@ -39054,7 +39208,9 @@
 	        super(name, selector, options);
 	        this._hidden = {
 	            open: () => {
-	                addClass(this.$el, 'is-open');
+	                if (!this.$options.disabled) {
+	                    addClass(this.$el, 'is-open');
+	                }
 	            },
 	            close: () => {
 	                removeClass(this.$el, 'is-open');
@@ -39066,6 +39222,62 @@
 	            changeText: (buttonText) => {
 	                this.$options.textSets.buttonText = buttonText;
 	                html(find('.menuButton-text', this.$el), buttonText);
+	            },
+	            disable: () => {
+	                this.$options.disabled = true;
+	                const buttonEl = find('button', this.$el);
+	                if (buttonEl) {
+	                    attr(buttonEl, 'disabled', true);
+	                }
+	                addClass(this.$el, 'is-disabled');
+	                this._hidden.close();
+	            },
+	            enable: () => {
+	                this.$options.disabled = false;
+	                const buttonEl = find('button', this.$el);
+	                if (buttonEl) {
+	                    removeAttr(buttonEl, 'disabled');
+	                }
+	                removeClass(this.$el, 'is-disabled');
+	            },
+	            renderMenus: (menus, depth = 0, parentPath = '') => {
+	                return (createElement$1("ul", { className: depth > 0 ? 'menuButton-submenu' : '' }, menus.map((menu, index) => {
+	                    const hasChild = menu.child && isArray$1(menu.child) && menu.child.length > 0;
+	                    const hasHtml = !!menu.html;
+	                    // html이 있으면 innerHTML이 모든 자식 요소를 덮어쓰므로 서브메뉴를 렌더링하지 않음
+	                    const canRenderChild = hasChild && depth < 2 && !hasHtml; // 최대 2단계까지만 허용
+	                    const isDisabled = menu.disabled === true;
+	                    const isActived = menu.actived === true;
+	                    // 부모 경로를 포함한 고유한 ID 생성
+	                    const currentPath = parentPath ? `${parentPath}-${index}` : `${index}`;
+	                    const uniqueId = `${this._uid}-${currentPath}`;
+	                    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) => {
+	                            // disabled 상태이거나 자식 메뉴가 있는 경우 클릭 이벤트 처리하지 않음
+	                            if (isDisabled) {
+	                                e.stopPropagation();
+	                                e.preventDefault();
+	                                return;
+	                            }
+	                            // 자식 메뉴가 없는 경우에만 select 이벤트 발생
+	                            if (!canRenderChild) {
+	                                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),
+	                            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)));
+	                })));
+	            },
+	            renderSub: (data) => {
+	                return createElement$1("div", null, isArray$1(data) && data.length && isArray$1(data[0]) ? data.map((menus) => this._hidden.renderMenus.call(this, menus)) : this._hidden.renderMenus.call(this, data));
 	            }
 	        };
 	        this.config = {
@@ -39085,6 +39297,19 @@
 	            },
 	            buttonText(text) {
 	                this._hidden.changeText(text);
+	            },
+	            reRender(data) {
+	                this.$options.data = data;
+	                const menuMenusEl = find('.menuButton-menus > div', this.$el);
+	                if (menuMenusEl && this.$template) {
+	                    this.$template.reRender(menuMenusEl, this._hidden.renderSub.call(this, data));
+	                }
+	            },
+	            disabled() {
+	                this._hidden.disable();
+	            },
+	            enabled() {
+	                this._hidden.enable();
 	            }
 	        };
 	        this.$selector = this.$selector;
@@ -39095,23 +39320,19 @@
 	        if (config.width) {
 	            styles.width = getUnit('width', config.width);
 	        }
-	        const renderMenus = (menus) => {
-	            return (createElement$1("ul", null, menus.map((menu, index) => (createElement$1("li", { id: this._uid + '-' + index, className: 'menuButton-menu' + (config.align ? ' has-text-' + config.align : ''), "on-click": (e) => {
-	                    this._hidden.select.call(this, menu, e);
-	                }, innerHTML: menu.html ? menu.html : '' }, menu.html ? '' : menu.text)))));
-	        };
-	        const renderSub = (data) => {
-	            return createElement$1("div", null, isArray$1(data) && data.length && isArray$1(data[0]) ? data.map((menus) => renderMenus(menus)) : renderMenus(data));
-	        };
-	        return (createElement$1("div", { id: this._uid, className: 'gn-menuButton' + (config.color ? ' is-' + config.color : '') + (config.style ? ' is-' + config.style : '') + (config.size ? ' is-' + config.size : ''), style: styles },
-	            createElement$1("button", { type: "button", className: config.align ? 'has-text-' + config.align : '', "on-click": this._hidden.open },
+	        return (createElement$1("div", { id: this._uid, className: 'gn-menuButton' +
+	                (config.color ? ' is-' + config.color : '') +
+	                (config.style ? ' is-' + config.style : '') +
+	                (config.size ? ' is-' + config.size : '') +
+	                (config.disabled ? ' is-disabled' : ''), style: styles },
+	            createElement$1("button", { type: "button", className: config.align ? 'has-text-' + config.align : '', disabled: config.disabled, "on-click": this._hidden.open },
 	                config.icon && (createElement$1("span", { className: 'gn-icon is-' + (config.size === 'large' ? 'medium' : config.size === 'medium' ? 'normal' : 'small') },
 	                    createElement$1("i", { className: 'fas fa-' + config.icon }),
 	                    ' ')),
 	                createElement$1("span", { className: "gn-icon is-small menuButton-icon" },
 	                    createElement$1("i", { className: "fas fa-caret-down" })),
 	                createElement$1("span", { className: "menuButton-text" }, config.textSets.buttonText)),
-	            createElement$1("div", { className: "menuButton-menus" }, renderSub(config.data))));
+	            createElement$1("div", { className: "menuButton-menus" }, this._hidden.renderSub.call(this, config.data))));
 	    }
 	    completed() {
 	        // 해당 컴포넌트 외 클릭 시 menu panel 숨김
@@ -39322,6 +39543,7 @@
 	    }
 	}
 
+	library$1.add(icons$1, icons);
 	class Picklist extends GNCoreInstance {
 	    constructor(name, selector, options = {}) {
 	        super(name, selector, options);
@@ -39463,17 +39685,26 @@
 	            },
 	            renderSub: (item) => {
 	                const items = this.$options.data[item] || [];
-	                return (createElement$1("ul", null, items.map((option, index) => (createElement$1("li", { id: this._uid + '_opt_' + index, className: 'dropdown-item' + (option.selected ? ' is-active' : ''), "data-value": option.value, "on-click": this._hidden.toggle.bind(this), "on-dblclick": this._hidden.move.bind(this, item === 'source' ? 'add' : 'remove', [
-	                        {
-	                            value: option.value,
-	                            text: option.text
-	                        }
-	                    ]) },
-	                    createElement$1("span", { className: "dropdown-text" }, option.text))))));
+	                return (createElement$1("ul", null, 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
+	                            ? null
+	                            : this._hidden.move.bind(this, item === 'source' ? 'add' : 'remove', [
+	                                {
+	                                    value: option.value,
+	                                    text: option.text,
+	                                    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)))));
+	                })));
 	            },
 	            getSelection: (target) => {
 	                return findAll('.is-active', this.$options.delegates[target]).map((select) => {
-	                    return { value: attr(select, 'data-value'), text: text$1(select) };
+	                    return this.$options.data[target].find((option) => option.value === attr(select, 'data-value'));
 	                });
 	            },
 	            disable: () => {
@@ -39633,6 +39864,11 @@
 	            style(find('.picklist-target .dropdown-items', this.$el), 'height', getUnit('height', getNumber(this.$options.height) - getNumber(style(find('.picklist-target .picklist-caption', this.$el), 'height'))));
 	        }
 	    }
+	    isBrandIcon(iconName) {
+	        const iconLookup = { prefix: 'fab', iconName: iconName };
+	        const iconDefinition = findIconDefinition$1(iconLookup);
+	        return iconDefinition !== undefined;
+	    }
 	}
 
 	class Progressbar extends GNCoreInstance {
@@ -39791,6 +40027,409 @@
 	    }
 	}
 
+	const CLASS_DRAGGING = 'is-dragging';
+	const CLASS_GROUP_DRAGGING = 'is-group-dragging';
+	const CLASS_DRAG_OVER_TOP = 'is-drag-over-top';
+	const CLASS_DRAG_OVER_BOTTOM = 'is-drag-over-bottom';
+	const DEFAULT_NO_DATA = 'No records available.';
+	const DRAG_STATE_CLASSES = [CLASS_DRAGGING, CLASS_GROUP_DRAGGING, CLASS_DRAG_OVER_TOP, CLASS_DRAG_OVER_BOTTOM];
+	class SortableList extends GNCoreInstance {
+	    constructor(name, selector, options = {}) {
+	        super(name, selector, options);
+	        this._dragging = null;
+	        this._selection = new Set();
+	        this.DRAG_IMAGE_OFFSET_X = 0;
+	        this.DRAG_IMAGE_OFFSET_Y = 0;
+	        this.DRAG_OVER_THRESHOLD_RATIO = 0.5;
+	        this._hidden = {
+	            toggle: (e) => {
+	                if (this.$options.disabled) {
+	                    return;
+	                }
+	                const value = attr(e.currentTarget, 'data-value');
+	                const hasItem = this.$options.data.some((option) => option.value === value);
+	                if (!value || !hasItem) {
+	                    return;
+	                }
+	                if (this._selection.has(value)) {
+	                    this._selection.delete(value);
+	                    removeClass(e.currentTarget, 'is-active');
+	                }
+	                else {
+	                    this._selection.add(value);
+	                    addClass(e.currentTarget, 'is-active');
+	                }
+	            },
+	            sort: (dir) => {
+	                const items = this.$options.data || [];
+	                const selected = this._hidden.getSelection();
+	                if (!selected.length || selected.length === items.length) {
+	                    return;
+	                }
+	                const selectedValues = new Set(selected.map((item) => item.value));
+	                // dir: up/down → 이동, up-all/down-all → 맨 위/맨 아래로 보내기
+	                if (dir.indexOf('all') > -1) {
+	                    this.$options.data = items.slice().sort((a, b) => {
+	                        const _sort = dir === 'up-all' ? -1 : 1;
+	                        const aSel = selectedValues.has(a.value);
+	                        const bSel = selectedValues.has(b.value);
+	                        if (aSel && bSel) {
+	                            return 0;
+	                        }
+	                        else if (aSel) {
+	                            return _sort;
+	                        }
+	                        else if (bSel) {
+	                            return _sort * -1;
+	                        }
+	                        return 0;
+	                    });
+	                }
+	                else {
+	                    if (dir === 'up') {
+	                        const reordered = items.slice();
+	                        // 한 번에 한 칸씩만 올려 상대 순서를 유지한다
+	                        for (let i = 1; i < reordered.length; i++) {
+	                            if (!selectedValues.has(reordered[i].value) || selectedValues.has(reordered[i - 1].value)) {
+	                                continue;
+	                            }
+	                            const temp = reordered[i - 1];
+	                            reordered[i - 1] = reordered[i];
+	                            reordered[i] = temp;
+	                        }
+	                        this.$options.data = reordered;
+	                    }
+	                    else {
+	                        let reordered = [];
+	                        let itemsToMoveDown = [];
+	                        items.forEach((option) => {
+	                            // reordered: 최종 순서를 쌓는 버퍼, itemsToMoveDown: 아래로 밀어야 할 선택 항목 임시 저장
+	                            // 비선택 항목은 흐름대로 push, 선택 항목은 dir에 따라 위/아래로 밀어 넣음
+	                            if (!selectedValues.has(option.value)) {
+	                                reordered.push(option);
+	                                if (itemsToMoveDown.length) {
+	                                    reordered = reordered.concat(itemsToMoveDown);
+	                                    itemsToMoveDown = [];
+	                                }
+	                            }
+	                            else if (dir === 'down') {
+	                                itemsToMoveDown.push(option);
+	                            }
+	                        });
+	                        if (itemsToMoveDown.length) {
+	                            reordered = reordered.concat(itemsToMoveDown);
+	                            itemsToMoveDown = [];
+	                        }
+	                        this.$options.data = reordered.slice();
+	                    }
+	                }
+	                this._hidden.reRender();
+	                this._hidden.updateControls();
+	                this.$event(this, 'onChange', this.$options.data);
+	            },
+	            renderSub: () => {
+	                var _a, _b;
+	                const items = this.$options.data || [];
+	                const hasCols = items.some((item) => isArray$1(item.cols) && item.cols.length);
+	                if (!items.length) {
+	                    return (createElement$1("ul", { className: "sortablelist-rows" },
+	                        createElement$1("li", { className: "dropdown-item is-empty" }, (_b = (_a = this.$options.textSets) === null || _a === void 0 ? void 0 : _a.noData) !== null && _b !== void 0 ? _b : DEFAULT_NO_DATA)));
+	                }
+	                return (createElement$1("ul", { className: 'sortablelist-rows' + (hasCols ? ' is-cols' : '') }, items.map((option, index) => {
+	                    var _a;
+	                    return (createElement$1("li", { id: this._uid + '_opt_' + index, className: 'dropdown-item' + (this._selection.has(option.value) ? ' is-active' : ''), "data-value": option.value, draggable: this.$options.draggable && !this.$options.disabled ? true : null, "on-click": this._hidden.toggle.bind(this), "on-dragstart": this.$options.draggable ? this._hidden.dragStart.bind(this) : null, "on-dragover": this.$options.draggable ? this._hidden.dragOver.bind(this) : null, "on-dragleave": this.$options.draggable ? this._hidden.dragLeave.bind(this) : null, "on-drop": this.$options.draggable ? this._hidden.drop.bind(this) : null, "on-dragend": this.$options.draggable ? this._hidden.dragEnd.bind(this) : null }, hasCols && isArray$1(option.cols) && option.cols.length ? (createElement$1("div", { className: "sortablelist-cols" }, option.cols.map((col, colIndex) => (createElement$1("span", { className: "sortablelist-col", "data-col": colIndex }, escapeEntity(col)))))) : (createElement$1("span", { className: "dropdown-text" }, escapeEntity((_a = option.text) !== null && _a !== void 0 ? _a : option.value)))));
+	                })));
+	            },
+	            getSelection: () => {
+	                return this.$options.data.filter((option) => this._selection.has(option.value));
+	            },
+	            reRender: () => {
+	                const listContainer = find('ul', this.$options.delegates.list);
+	                listContainer && this.$template.reRender(listContainer, this._hidden.renderSub());
+	            },
+	            syncSelection: () => {
+	                const values = new Set(this.$options.data.map((item) => item.value));
+	                this._selection.forEach(val => {
+	                    if (!values.has(val)) {
+	                        this._selection.delete(val);
+	                    }
+	                });
+	            },
+	            hydrateSelection: (items) => {
+	                this._selection.clear();
+	                items.forEach((item) => {
+	                    if (item.selected) {
+	                        this._selection.add(item.value);
+	                    }
+	                });
+	            },
+	            validateData: (items) => {
+	                if (!isArray$1(items)) {
+	                    throw new TypeError('Invalid SortableList data: data must be an array');
+	                }
+	                const seen = new Set();
+	                items.forEach((item) => {
+	                    if (!item || typeof item.value !== 'string') {
+	                        throw new TypeError('Invalid SortableList data: value must be string');
+	                    }
+	                    if (item.value === '') {
+	                        throw new TypeError('Invalid SortableList data: value cannot be empty');
+	                    }
+	                    if (seen.has(item.value)) {
+	                        throw new TypeError(`Invalid SortableList data: duplicate value '${item.value}'`);
+	                    }
+	                    seen.add(item.value);
+	                });
+	            },
+	            updateControls: () => {
+	                const hasData = (this.$options.data || []).length > 0;
+	                const disableButtons = this.$options.disabled || !hasData;
+	                if (disableButtons) {
+	                    attr(findAll('button', this.$el), 'disabled', true);
+	                }
+	                else {
+	                    removeAttr(findAll('button', this.$el), 'disabled');
+	                }
+	                if (!hasData) {
+	                    addClass(this.$el, 'is-empty');
+	                }
+	                else {
+	                    removeClass(this.$el, 'is-empty');
+	                }
+	            },
+	            clearDragState: () => {
+	                var _a;
+	                DRAG_STATE_CLASSES.forEach(className => {
+	                    removeClass(findAll(`.${className}`, this.$el), className);
+	                });
+	                if ((_a = this._dragging) === null || _a === void 0 ? void 0 : _a.preview) {
+	                    this._dragging.preview.remove();
+	                }
+	                this._dragging = null;
+	            },
+	            dragStart: (e) => {
+	                if (this.$options.disabled || !this.$options.draggable) {
+	                    return;
+	                }
+	                // 기존 드래그 상태 정리 (이전 드래그가 중단된 경우 대비)
+	                this._hidden.clearDragState();
+	                const value = attr(e.currentTarget, 'data-value');
+	                if (!value) {
+	                    return;
+	                }
+	                const selected = this._hidden.getSelection().map((item) => item.value);
+	                const isGroup = selected.length > 1 && selected.includes(value);
+	                const dragValues = isGroup ? selected : [value];
+	                this._dragging = { values: dragValues, isGroup: isGroup, preview: null };
+	                if (e.dataTransfer) {
+	                    e.dataTransfer.setData('text/plain', value);
+	                    e.dataTransfer.effectAllowed = 'move';
+	                    if (isGroup) {
+	                        const preview = document.createElement('div');
+	                        preview.className = 'sortablelist-drag-preview';
+	                        preview.setAttribute('data-count', String(dragValues.length));
+	                        const list = document.createElement('div');
+	                        list.className = 'sortablelist-drag-preview-list';
+	                        dragValues.forEach((dragValue) => {
+	                            const itemEl = find(`[data-value="${CSS.escape(dragValue)}"]`, this.$options.delegates.list);
+	                            if (!(itemEl instanceof HTMLElement)) {
+	                                return;
+	                            }
+	                            const clone = itemEl.cloneNode(true);
+	                            removeClass(clone, CLASS_DRAGGING);
+	                            removeClass(clone, CLASS_GROUP_DRAGGING);
+	                            removeClass(clone, CLASS_DRAG_OVER_TOP);
+	                            removeClass(clone, CLASS_DRAG_OVER_BOTTOM);
+	                            addClass(clone, 'is-ghost');
+	                            list.appendChild(clone);
+	                        });
+	                        preview.appendChild(list);
+	                        document.body.appendChild(preview);
+	                        e.dataTransfer.setDragImage(preview, this.DRAG_IMAGE_OFFSET_X, this.DRAG_IMAGE_OFFSET_Y);
+	                        this._dragging.preview = preview;
+	                    }
+	                }
+	                findAll('.dropdown-item', this.$options.delegates.list).forEach((node) => {
+	                    const itemValue = attr(node, 'data-value');
+	                    if (dragValues.includes(itemValue)) {
+	                        addClass(node, CLASS_DRAGGING);
+	                        if (isGroup) {
+	                            addClass(node, CLASS_GROUP_DRAGGING);
+	                        }
+	                    }
+	                });
+	            },
+	            dragOver: (e) => {
+	                if (!this._dragging || this.$options.disabled || !this.$options.draggable) {
+	                    return;
+	                }
+	                e.preventDefault();
+	                if (!(e.currentTarget instanceof HTMLElement)) {
+	                    return;
+	                }
+	                const target = e.currentTarget;
+	                const value = attr(target, 'data-value');
+	                if (this._dragging.values.includes(value)) {
+	                    return;
+	                }
+	                removeClass(target, CLASS_DRAG_OVER_TOP);
+	                removeClass(target, CLASS_DRAG_OVER_BOTTOM);
+	                const rect = target.getBoundingClientRect();
+	                const midpoint = rect.top + rect.height * this.DRAG_OVER_THRESHOLD_RATIO;
+	                if (e.clientY > midpoint) {
+	                    addClass(target, CLASS_DRAG_OVER_BOTTOM);
+	                }
+	                else {
+	                    addClass(target, CLASS_DRAG_OVER_TOP);
+	                }
+	            },
+	            dragLeave: (e) => {
+	                if (e.currentTarget instanceof HTMLElement) {
+	                    removeClass(e.currentTarget, 'is-drag-over-top');
+	                    removeClass(e.currentTarget, 'is-drag-over-bottom');
+	                }
+	            },
+	            drop: (e) => {
+	                if (!this._dragging || this.$options.disabled || !this.$options.draggable) {
+	                    return;
+	                }
+	                e.preventDefault();
+	                if (!(e.currentTarget instanceof HTMLElement)) {
+	                    return;
+	                }
+	                const targetEl = e.currentTarget;
+	                const targetValue = attr(targetEl, 'data-value');
+	                const dragValues = this._dragging.values;
+	                if (!targetValue || dragValues.includes(targetValue)) {
+	                    this._hidden.clearDragState();
+	                    return;
+	                }
+	                const items = this.$options.data;
+	                const dragItems = items.filter((item) => dragValues.includes(item.value));
+	                const remain = items.filter((item) => !dragValues.includes(item.value));
+	                const targetIndex = remain.findIndex((item) => item.value === targetValue);
+	                const rect = targetEl.getBoundingClientRect();
+	                const midpoint = rect.top + rect.height * this.DRAG_OVER_THRESHOLD_RATIO;
+	                const insertAfter = e.clientY > midpoint;
+	                const insertIndex = targetIndex === -1 ? remain.length : insertAfter ? targetIndex + 1 : targetIndex;
+	                remain.splice(insertIndex, 0, ...dragItems);
+	                this.$options.data = remain;
+	                this._hidden.reRender();
+	                this._hidden.updateControls();
+	                this.$event(this, 'onChange', this.$options.data);
+	                this._hidden.clearDragState();
+	            },
+	            dragEnd: () => {
+	                this._hidden.clearDragState();
+	            },
+	            setData: (data) => {
+	                // 드래그 중일 경우 상태 정리 (DOM 요소가 제거되면 dragend 이벤트가 발생하지 않을 수 있음)
+	                this._hidden.clearDragState();
+	                this._hidden.validateData(data);
+	                this.$options.data = data;
+	                this._hidden.hydrateSelection(data);
+	                this._hidden.syncSelection();
+	                this._hidden.reRender();
+	                this._hidden.updateControls();
+	                this.$event(this, 'onChange', this.$options.data);
+	            },
+	            disable: () => {
+	                // 드래그 중일 경우 상태 정리
+	                this._hidden.clearDragState();
+	                this.$options.disabled = true;
+	                addClass(this.$el, 'is-disabled');
+	                this._hidden.reRender();
+	                this._hidden.updateControls();
+	            },
+	            enable: () => {
+	                // 드래그 중일 경우 상태 정리
+	                this._hidden.clearDragState();
+	                this.$options.disabled = false;
+	                removeClass(this.$el, 'is-disabled');
+	                this._hidden.reRender();
+	                this._hidden.updateControls();
+	            }
+	        };
+	        this.config = {
+	            name: this.$selector.name || this._uid,
+	            data: [],
+	            delegates: {
+	                list: '.sortablelist-items'
+	            },
+	            buttonPosition: 'left',
+	            draggable: false,
+	            textSets: {
+	                noData: DEFAULT_NO_DATA
+	            },
+	            height: 150
+	        };
+	        this.events = {
+	            onChange: true
+	        };
+	        this.methods = {
+	            getData() {
+	                return this.$options.data;
+	            },
+	            setData(data) {
+	                const next = isArray$1(data) ? data : data && 'data' in data ? data.data : null;
+	                if (!isArray$1(next)) {
+	                    throw new TypeError('Invalid SortableList data: data must be an array');
+	                }
+	                this._hidden.setData(next);
+	            },
+	            disable() {
+	                this._hidden.disable();
+	            },
+	            enable() {
+	                this._hidden.enable();
+	            }
+	        };
+	        this.$selector = this.$selector;
+	        this.$init(this, options);
+	    }
+	    template(config) {
+	        const styles = {};
+	        if (config.width) {
+	            styles.width = getUnit('width', config.width);
+	        }
+	        const listStyles = {};
+	        if (config.height) {
+	            const heightValue = getUnit('height', config.height);
+	            styles.height = heightValue;
+	            listStyles.height = heightValue;
+	            listStyles.maxHeight = heightValue;
+	        }
+	        const controlClass = 'sortablelist-controls gn-control is-small has-arrange is-vertical is-center' + (config.buttonPosition === 'right' ? ' is-right' : '');
+	        const buttonDisabled = config.disabled || (config.data || []).length === 0;
+	        return (createElement$1("div", { id: this._uid, className: 'gn-sortablelist' + (config.disabled ? ' is-disabled' : ''), style: styles },
+	            createElement$1("div", { className: controlClass },
+	                createElement$1("button", { type: "button", className: "gn-button is-outline", "on-click": this._hidden.sort.bind(this, 'up-all'), disabled: buttonDisabled },
+	                    createElement$1("span", { className: "gn-icon" },
+	                        createElement$1("i", { className: "fa fa-light fa-angle-double-up" }))),
+	                createElement$1("button", { type: "button", className: "gn-button is-outline", "on-click": this._hidden.sort.bind(this, 'up'), disabled: buttonDisabled },
+	                    createElement$1("span", { className: "gn-icon" },
+	                        createElement$1("i", { className: "fa fa-light fa-angle-up" }))),
+	                createElement$1("button", { type: "button", className: "gn-button is-outline", "on-click": this._hidden.sort.bind(this, 'down'), disabled: buttonDisabled },
+	                    createElement$1("span", { className: "gn-icon" },
+	                        createElement$1("i", { className: "fa fa-light fa-angle-down" }))),
+	                createElement$1("button", { type: "button", className: "gn-button is-outline", "on-click": this._hidden.sort.bind(this, 'down-all'), disabled: buttonDisabled },
+	                    createElement$1("span", { className: "gn-icon" },
+	                        createElement$1("i", { className: "fa fa-light fa-angle-double-down" })))),
+	            createElement$1("div", { className: "gn-dropdown is-opened sortablelist-items" },
+	                createElement$1("div", { className: "dropdown-items", style: listStyles }, this._hidden.renderSub()))));
+	    }
+	    beforeMount() {
+	        this._hidden.validateData(this.$options.data);
+	        this._hidden.hydrateSelection(this.$options.data);
+	    }
+	    completed() {
+	        this._hidden.updateControls();
+	    }
+	    destroyed() {
+	        this._hidden.clearDragState();
+	    }
+	}
+
 	class Splitter extends GNCoreInstance {
 	    constructor(name, selector, options = {}) {
 	        super(name, selector, options);
@@ -40438,6 +41077,7 @@
 	    picklist: Picklist,
 	    progressbar: Progressbar,
 	    selectbutton: SelectButton,
+	    sortablelist: SortableList,
 	    splitter: Splitter,
 	    switch: Switch,
 	    syntaxinput: SyntaxInput,