gnui 1.2.17 → 1.2.19

package/dist/js/gnui.esm.js

@@ -16924,7 +16924,10 @@ class GNCoreEventManager {
         // 이벤트 삭제
         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) => {
@@ -16933,6 +16936,28 @@ class GNCoreEventManager {
             });
         }
     }
+    /**
+     * 등록된 이벤트 핸들러 실행
+     *
+     * - 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]
@@ -17017,7 +17042,7 @@ class GNUIState {
         });
         return _findComponent;
     }
-    // 등록된 컴포넌트 제거
+    // 등록된 컴포넌트 제거 (selector 기반)
     _removeComponent(selector) {
         if (!selector) {
             return;
@@ -17026,10 +17051,30 @@ class GNUIState {
         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 업데이트
@@ -17039,7 +17084,7 @@ class GNUIState {
         // event manager를 이용해 해당 uid 이벤트 dispatch
         const eventManager = GNCoreEventManager.getInstance();
         // 호출 후
-        eventManager.dispatch(uid, name, '');
+        eventManager.cyclepatch(uid, name, '');
         // 이벤트 해제 - life cycle 은 컴포넌트 별로 한번씩만 존재하므로..
         eventManager.remove(uid, name);
     }
@@ -17053,6 +17098,7 @@ class GNUIState {
         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)) {
@@ -17065,12 +17111,19 @@ class GNUIState {
                 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);
                 }
             });
         }
@@ -17226,6 +17279,7 @@ class GNCoreInstance {
             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);
         }
@@ -17265,25 +17319,48 @@ class GNCoreInstance {
     }
     // 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;
     }
 }
 
@@ -33484,8 +33561,19 @@ class Dropdown extends GNCoreInstance {
                 });
                 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);
@@ -37000,26 +37088,8 @@ class DataGrid extends GNCoreInstance {
                 }
                 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(' ')
                     } },
@@ -37058,6 +37128,10 @@ class DataGrid extends GNCoreInstance {
                     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'
@@ -37071,7 +37145,6 @@ class DataGrid extends GNCoreInstance {
                 });
             },
             renderRow: (row, columns, depth = 0, hasChild, isOpened, isCheck = false) => {
-                row._depth = depth;
                 const _index = rowIdx$1++;
                 if (row.isChecked) {
                     isCheck = true;
@@ -37205,8 +37278,9 @@ class DataGrid extends GNCoreInstance {
                     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') {
@@ -37222,7 +37296,7 @@ class DataGrid extends GNCoreInstance {
                     //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));
                 }
@@ -37280,13 +37354,15 @@ class DataGrid extends GNCoreInstance {
                 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);
@@ -37296,17 +37372,17 @@ class DataGrid extends GNCoreInstance {
                     });
                 }
                 // 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);
@@ -37322,9 +37398,21 @@ class DataGrid extends GNCoreInstance {
                     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();
@@ -37339,6 +37427,10 @@ class DataGrid extends GNCoreInstance {
                 });
             },
             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,
@@ -37363,7 +37455,8 @@ class DataGrid extends GNCoreInstance {
                     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();
                 });
@@ -37398,8 +37491,18 @@ class DataGrid extends GNCoreInstance {
             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);
             },
@@ -37434,22 +37537,38 @@ class DataGrid extends GNCoreInstance {
                 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)
@@ -37536,11 +37655,13 @@ class DataGrid extends GNCoreInstance {
             hasOrder: false,
             hasDelete: false,
             isEllipsis: false,
+            hasHeader: true,
             data: [],
             textSets: {
                 noData: 'No records available.',
                 orderLabel: '',
-                deleteLabel: ''
+                deleteLabel: '',
+                deleteConfirmMessage: ''
             },
             childField: 'child',
             checkCapturing: true,
@@ -37558,7 +37679,8 @@ class DataGrid extends GNCoreInstance {
             onCheck: true,
             onDoubleClick: true,
             onChange: true,
-            onDragEnd: true
+            onDragEnd: true,
+            onDelete: true
         };
         this.methods = {
             reRender(options) {
@@ -37618,18 +37740,21 @@ class DataGrid extends GNCoreInstance {
         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 {
@@ -37643,7 +37768,7 @@ class DataGrid extends GNCoreInstance {
                 if (header.isHidden) {
                     return '';
                 }
-                else if (_isfixedAllWidth && header.key === _fixedTemplateColumn.key) {
+                else if (_isfixedAllWidth && _fixedTemplateKey && header.key === _fixedTemplateKey) {
                     return '1fr';
                 }
                 else {
@@ -37664,18 +37789,45 @@ class DataGrid extends GNCoreInstance {
     _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
@@ -37692,18 +37844,20 @@ class DataGrid extends GNCoreInstance {
         }
     }
     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);
         }
@@ -39048,7 +39202,9 @@ class MenuButton extends GNCoreInstance {
         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');
@@ -39060,6 +39216,62 @@ class MenuButton extends GNCoreInstance {
             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 = {
@@ -39079,6 +39291,19 @@ class MenuButton extends GNCoreInstance {
             },
             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;
@@ -39089,23 +39314,19 @@ class MenuButton extends GNCoreInstance {
         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 숨김
@@ -39316,6 +39537,7 @@ class MultiTextArea extends GNCoreInstance {
     }
 }
 
+library$1.add(icons$1, icons);
 class Picklist extends GNCoreInstance {
     constructor(name, selector, options = {}) {
         super(name, selector, options);
@@ -39457,17 +39679,26 @@ class Picklist extends GNCoreInstance {
             },
             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: () => {
@@ -39627,6 +39858,11 @@ class Picklist extends GNCoreInstance {
             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 {
@@ -39785,6 +40021,409 @@ class SelectButton extends GNCoreInstance {
     }
 }
 
+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);
@@ -40432,6 +41071,7 @@ var gnUIComp = {
     picklist: Picklist,
     progressbar: Progressbar,
     selectbutton: SelectButton,
+    sortablelist: SortableList,
     splitter: Splitter,
     switch: Switch,
     syntaxinput: SyntaxInput,