@rchemist/listgrid 0.2.6

package/dist/listgrid/components/list/ui/ViewColumn.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getAlignClassName } from '../../../common/func';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { useEffect, useState } from 'react';
+import { useListGridTheme } from '../context/ListGridThemeContext';
+export const ViewColumn = ({ fields, item, index, router, path, entityForm, viewFields, viewMode, onSelect, clickAccordion, }) => {
+    const [views, setViews] = useState();
+    const { classNames: themeClasses } = useListGridTheme();
+    const viewUrl = path + '/' + item.id;
+    // 테마에서 데이터 셀 클래스 가져오기
+    const dataCellClass = themeClasses.cell?.dataCell ?? '';
+    const baseCellClass = themeClasses.cell?.cell ?? '';
+    useEffect(() => {
+        (async () => {
+            const views = [];
+            for (const field of fields) {
+                if (viewFields.length === 0 || viewFields.includes(field.getName())) {
+                    const viewListResult = await field.viewListItem({
+                        entityForm,
+                        item,
+                        router,
+                        viewUrl,
+                    });
+                    const linkOnCell = isTrue(viewListResult.linkOnCell, true);
+                    const tdIndex = fields.indexOf(field);
+                    const alignClassName = getAlignClassName(field.getListFieldAlignType());
+                    views.push(_jsx("td", { className: `${baseCellClass} ${dataCellClass} ${alignClassName} whitespace-nowrap ${linkOnCell ? 'cursor-pointer' : ''}`, onClick: () => {
+                            if (linkOnCell) {
+                                if (clickAccordion !== undefined) {
+                                    clickAccordion();
+                                }
+                                else {
+                                    if (onSelect !== undefined) {
+                                        onSelect(item);
+                                    }
+                                    else {
+                                        if (viewMode === 'page') {
+                                            router.push(viewUrl);
+                                        }
+                                        else {
+                                            window.open(viewUrl, `${item.id}`);
+                                        }
+                                    }
+                                }
+                            }
+                        }, children: viewListResult.result }, `td_${index}_${tdIndex}`));
+                }
+            }
+            setViews(views);
+        })();
+    }, [viewFields]);
+    if (views === undefined)
+        return null;
+    return _jsx(_Fragment, { children: views });
+};

package/dist/listgrid/components/list/ui/ViewListGridSkeleton.d.ts

@@ -0,0 +1,20 @@
+import { ListableFormField } from '../../fields/abstract';
+interface ViewListGridSkeletonProps {
+    /** 표시할 스켈레톤 행 수 (pageSize 기반) */
+    pageSize?: number;
+    /** 컬럼 필드 정보 */
+    fields?: ListableFormField<any>[];
+    /** SubCollection 모드 여부 */
+    isSubCollection?: boolean;
+    /** 체크박스 컬럼 표시 여부 */
+    showCheckbox?: boolean;
+    /** 팝업 모드 여부 */
+    isPopup?: boolean;
+}
+/**
+ * ViewListGrid용 스켈레톤 컴포넌트
+ *
+ * pageSize와 컬럼 정보를 기반으로 실제 테이블 레이아웃과 동일한 스켈레톤을 생성합니다.
+ */
+export declare const ViewListGridSkeleton: ({ pageSize, fields, isSubCollection, showCheckbox, isPopup, }: ViewListGridSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewListGridSkeleton;

package/dist/listgrid/components/list/ui/ViewListGridSkeleton.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useListGridTheme } from '../context/ListGridThemeContext';
+// Inline sizing for skeleton rects; library CSS owns pulse/color.
+const size = (height, width) => ({
+    height: `${height}px`,
+    ...(width !== undefined ? { width: typeof width === 'number' ? `${width}px` : width } : {}),
+});
+/**
+ * ViewListGrid용 스켈레톤 컴포넌트
+ *
+ * pageSize와 컬럼 정보를 기반으로 실제 테이블 레이아웃과 동일한 스켈레톤을 생성합니다.
+ */
+export const ViewListGridSkeleton = ({ pageSize = 10, fields = [], isSubCollection = false, showCheckbox = true, isPopup = false, }) => {
+    const { classNames: themeClasses } = useListGridTheme();
+    const columnCount = fields.length > 0 ? fields.length : 5;
+    const rowCount = Math.max(3, Math.min(pageSize, 20));
+    return (_jsxs("div", { className: "rcm-pulse", children: [!isSubCollection && (_jsxs("div", { className: "rcm-row-between rcm-skeleton-row", children: [_jsx("div", { className: "rcm-skeleton-search-input", children: _jsx("div", { className: "rcm-skeleton", style: size(40) }) }), _jsx("div", { className: "rcm-row", children: _jsx("div", { className: "rcm-skeleton", style: size(40, 80) }) })] })), isSubCollection && (_jsxs("div", { className: "rcm-row-between rcm-skeleton-subcollection-bar", children: [_jsxs("div", { className: "rcm-row", children: [_jsx("div", { className: "rcm-skeleton", style: size(20, 64) }), _jsx("div", { className: "rcm-skeleton", style: size(20, 32) })] }), _jsx("div", { className: "rcm-row", children: _jsx("div", { className: "rcm-skeleton rcm-skeleton-accent", style: size(32, 64) }) })] })), _jsx("div", { className: isPopup ? (themeClasses.popup?.container ?? 'rcm-skeleton-popup-container') : '', children: _jsx("div", { className: themeClasses.table?.container ?? 'rcm-scroll-y', children: _jsx("div", { className: themeClasses.table?.responsiveWrapper ?? 'rcm-skeleton-table-wrapper', children: _jsxs("table", { className: themeClasses.table?.table ?? 'rcm-table', children: [_jsx("thead", { className: themeClasses.table?.thead ?? 'rcm-skeleton-thead', children: _jsxs("tr", { children: [showCheckbox && (_jsx("th", { className: "rcm-skeleton-th-checkbox", children: _jsx("div", { className: "rcm-skeleton", style: size(16, 16) }) })), fields.length > 0
+                                                ? fields.map((field, index) => (_jsx("th", { className: "rcm-skeleton-th", children: _jsx("div", { className: "rcm-skeleton", style: { height: '16px', width: getColumnWidth(field, index) } }) }, field.getName())))
+                                                : Array.from({ length: columnCount }).map((_, index) => (_jsx("th", { className: "rcm-skeleton-th", children: _jsx("div", { className: "rcm-skeleton", style: { height: '16px', width: `${60 + (index % 3) * 20}px` } }) }, index)))] }) }), _jsx("tbody", { children: Array.from({ length: rowCount }).map((_, rowIndex) => (_jsxs("tr", { className: "rcm-skeleton-tr", children: [showCheckbox && (_jsx("td", { className: "rcm-skeleton-td-checkbox", children: _jsxs("div", { className: "rcm-row rcm-gap-xs", children: [_jsx("div", { className: "rcm-skeleton", style: size(16, 16) }), _jsx("div", { className: "rcm-skeleton", style: size(16, 24) })] }) })), fields.length > 0
+                                                ? fields.map((field, colIndex) => (_jsx("td", { className: "rcm-skeleton-td", children: _jsx(SkeletonCell, { field: field, rowIndex: rowIndex, colIndex: colIndex }) }, field.getName())))
+                                                : Array.from({ length: columnCount }).map((_, colIndex) => (_jsx("td", { className: "rcm-skeleton-td", children: _jsx("div", { className: "rcm-skeleton", style: {
+                                                            height: '20px',
+                                                            width: `${40 + ((rowIndex + colIndex) % 4) * 20}%`,
+                                                            maxWidth: '200px',
+                                                        } }) }, colIndex)))] }, rowIndex))) })] }) }) }) }), !isPopup && !isSubCollection && (_jsx("div", { className: "rcm-skeleton-pagination", children: _jsx("div", { className: "rcm-row rcm-gap-xs", children: Array.from({ length: 5 }).map((_, index) => (_jsx("div", { className: index === 2 ? 'rcm-skeleton rcm-skeleton-accent' : 'rcm-skeleton', style: size(32, 32) }, index))) }) }))] }));
+};
+/**
+ * 컬럼 너비 계산 (필드 타입 기반)
+ * constructor.name을 사용하여 필드 클래스 타입 감지
+ */
+function getColumnWidth(field, index) {
+    const fieldClassName = field.constructor.name.toLowerCase();
+    if (fieldClassName.includes('date'))
+        return '100px';
+    if (fieldClassName.includes('boolean') || fieldClassName.includes('checkbox'))
+        return '60px';
+    if (fieldClassName.includes('number') ||
+        fieldClassName.includes('integer') ||
+        fieldClassName.includes('decimal'))
+        return '80px';
+    if (fieldClassName.includes('email'))
+        return '140px';
+    if (fieldClassName.includes('url'))
+        return '160px';
+    return index === 0 ? '120px' : '80px';
+}
+const SkeletonCell = ({ field, rowIndex, colIndex }) => {
+    const fieldClassName = field.constructor.name.toLowerCase();
+    if (fieldClassName.includes('boolean') || fieldClassName.includes('checkbox')) {
+        return (_jsx("div", { className: "rcm-row-center", children: _jsx("div", { className: "rcm-skeleton", style: size(20, 20) }) }));
+    }
+    if (fieldClassName.includes('image') || fieldClassName.includes('thumbnail')) {
+        return _jsx("div", { className: "rcm-skeleton", style: size(40, 40) });
+    }
+    if (fieldClassName.includes('datetime')) {
+        return _jsx("div", { className: "rcm-skeleton", style: size(20, 112) });
+    }
+    if (fieldClassName.includes('date')) {
+        return _jsx("div", { className: "rcm-skeleton", style: size(20, 80) });
+    }
+    if (fieldClassName.includes('number') ||
+        fieldClassName.includes('integer') ||
+        fieldClassName.includes('decimal') ||
+        fieldClassName.includes('currency')) {
+        return _jsx("div", { className: "rcm-skeleton rcm-ml-auto", style: size(20, 64) });
+    }
+    if (fieldClassName.includes('tag') || fieldClassName.includes('badge')) {
+        return (_jsx("div", { className: "rcm-row rcm-gap-xs", children: _jsx("div", { className: "rcm-skeleton rcm-radius-full rcm-bg-info-surface", style: size(20, 48) }) }));
+    }
+    if (fieldClassName.includes('enum') || fieldClassName.includes('select')) {
+        return _jsx("div", { className: "rcm-skeleton", style: size(24, 64) });
+    }
+    const widthPercent = 40 + ((rowIndex + colIndex) % 4) * 15;
+    return (_jsx("div", { className: "rcm-skeleton", style: {
+            height: '20px',
+            width: `${widthPercent}%`,
+            maxWidth: colIndex === 0 ? '180px' : '140px',
+            minWidth: '40px',
+        } }));
+};
+export default ViewListGridSkeleton;

package/dist/listgrid/components/list/ui/ViewRows.d.ts

@@ -0,0 +1,15 @@
+import { InlineExpansionState, ViewRowItemProps } from '../types/RowItem.types';
+import { SelectionOptions } from '../types/ViewListGrid.types';
+export interface ViewRowsProps extends ViewRowItemProps {
+    item: any;
+    index: number;
+    checkItem: (id: string) => void;
+    draggable: boolean;
+    totalCount: number;
+    sortableList: any[];
+    selectionOptions?: SelectionOptions;
+    showCheckboxInput?: boolean;
+    /** SubCollection 인라인 확장 상태 */
+    inlineExpansion?: InlineExpansionState;
+}
+export declare const ViewRows: (props: ViewRowsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/listgrid/components/list/ui/ViewRows.js

@@ -0,0 +1,283 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '../../../ui';
+import { useLoadingStore } from '../../../loading';
+import { Icon } from '@iconify/react';
+import { IconBaselineDensityMedium, IconChevronUp, IconExternalLink, IconEye, } from '@tabler/icons-react';
+import React, { useEffect, useState } from 'react';
+import { ViewColumn } from './ViewColumn';
+import { usePathname, useRouter } from '../../../router';
+import { showAlert } from '../../../message';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { useModalManagerStore } from '../../../store';
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+import { useListGridTheme } from '../context/ListGridThemeContext';
+import { SubCollectionInlineView } from './SubCollectionInlineView';
+export const ViewRows = (props) => {
+    const managePriority = props.managePriority;
+    const { enableCheckItem, sortableList, checkedItems, onDrag, item, index, checkItem, totalCount, draggable, startNumber, selectionOptions, showCheckboxInput, openInNewWindow, isAdmin, onSelect, entityForm, inlineExpansion, isSubCollection, mappedBy, inlineViewReadonly, } = props;
+    // Check if this item is expanded inline
+    const isInlineExpanded = inlineExpansion?.isExpanded(item.id) ?? false;
+    const [accordionView, setAccordionView] = useState();
+    const [showAccordion, setShowAccordion] = useState(false);
+    const [key, setKey] = useState('init');
+    const [isMobile, setIsMobile] = useState(false);
+    const { setOpenBaseLoading } = useLoadingStore();
+    const { openModal, closeModal } = useModalManagerStore();
+    const { classNames: themeClasses } = useListGridTheme();
+    // 모바일 감지 (768px 이하)
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    const router = useRouter();
+    const pathname = usePathname();
+    const accordionMode = props.useAccordion ?? false;
+    const openInNewWindowEnabled = isTrue(openInNewWindow?.enabled);
+    // 검색/선택 모드 여부 (ManyToOne 등에서 사용)
+    const isSearchMode = !!onSelect;
+    // 새창 열기 버튼 표시 여부 결정 (관리자 권한 필요, 검색 모드가 아닐 때만)
+    const showOpenInNewWindowButton = openInNewWindowEnabled &&
+        isAdmin &&
+        !isSearchMode &&
+        (!openInNewWindow?.showFilter || openInNewWindow.showFilter(item));
+    // 검색 모드에서 보기 버튼 표시 여부
+    const showViewButton = isSearchMode && entityForm;
+    // 새창으로 엔티티 열기
+    const handleOpenInNewWindow = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!item.id)
+            return;
+        // 현재 pathname 기반으로 상세 페이지 URL 생성 (쿼리 파라미터로 popup 모드 전달)
+        const entityPath = pathname || '';
+        const popupUrl = `${entityPath}/${item.id}?popup=true`;
+        // localStorage에서 저장된 팝업 크기 읽기 (경로별로 별도 저장)
+        const storageKey = `popup_size:${entityPath}`;
+        let width;
+        let height;
+        try {
+            const saved = localStorage.getItem(storageKey);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                width = Math.min(parsed.width || 1200, window.screen.availWidth);
+                height = Math.min(parsed.height || 800, window.screen.availHeight);
+            }
+            else {
+                width = Math.min(openInNewWindow?.windowFeatures?.width || 1200, window.screen.availWidth);
+                height = Math.min(openInNewWindow?.windowFeatures?.height || 800, window.screen.availHeight);
+            }
+        }
+        catch {
+            width = Math.min(openInNewWindow?.windowFeatures?.width || 1200, window.screen.availWidth);
+            height = Math.min(openInNewWindow?.windowFeatures?.height || 800, window.screen.availHeight);
+        }
+        const left = Math.max(0, (window.screen.availWidth - width) / 2);
+        const top = Math.max(0, (window.screen.availHeight - height) / 2);
+        const windowFeatures = `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`;
+        // entity ID를 윈도우 이름으로 사용하여 중복 창 방지
+        const windowName = `entity_${item.id}`;
+        const popup = window.open(popupUrl, windowName, windowFeatures);
+        // 팝업 창 크기 변경을 감지하여 localStorage에 저장
+        if (popup) {
+            let lastWidth = width;
+            let lastHeight = height;
+            const sizeTracker = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(sizeTracker);
+                    return;
+                }
+                try {
+                    const w = popup.outerWidth;
+                    const h = popup.outerHeight;
+                    if (w > 0 && h > 0 && (w !== lastWidth || h !== lastHeight)) {
+                        lastWidth = w;
+                        lastHeight = h;
+                        localStorage.setItem(storageKey, JSON.stringify({ width: w, height: h }));
+                    }
+                }
+                catch {
+                    clearInterval(sizeTracker);
+                }
+            }, 1000);
+        }
+    };
+    // 검색 모드에서 엔티티 상세 보기 (모달)
+    const handleViewEntity = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!item.id || !entityForm)
+            return;
+        const modalId = `search-view-entity-${item.id}`;
+        const viewEntityForm = entityForm.clone(true).withId(item.id).withTitle('상세 정보');
+        const titleStr = typeof entityForm.title === 'string' ? entityForm.title : entityForm.title?.title || '정보';
+        openModal({
+            modalId,
+            title: `${titleStr} 조회`,
+            size: '5xl',
+            content: (_jsx(ViewEntityForm, { entityForm: viewEntityForm, buttonLinks: {
+                    onClickList: async () => closeModal(modalId),
+                }, subCollection: true, readonly: true })),
+        });
+    };
+    async function toggleAccordion() {
+        setShowAccordion(!showAccordion);
+        setOpenBaseLoading(true);
+        if (accordionView === null || accordionView === undefined) {
+            const view = await props.useAccordion.render(item, () => {
+                if (props.onRefresh) {
+                    props.onRefresh();
+                }
+                else {
+                    router.refresh?.();
+                    setTimeout(() => {
+                        setOpenBaseLoading(false);
+                    }, 100);
+                }
+            });
+            setAccordionView(view);
+            setKey(new Date().toTimeString());
+            setOpenBaseLoading(false);
+        }
+        else {
+            setKey(new Date().toTimeString());
+            setAccordionView(null);
+            setOpenBaseLoading(false);
+        }
+    }
+    // Toggle inline expansion for SubCollection (모바일에서는 모달로 표시)
+    function toggleInlineExpansion() {
+        if (!inlineExpansion || !entityForm)
+            return;
+        // 모바일: 모달로 표시
+        if (isMobile) {
+            const modalId = `inline-view-entity-${item.id}`;
+            const viewEntityForm = entityForm.clone(true).withId(item.id).withTitle('상세 정보');
+            const mobileTitleStr = typeof entityForm.title === 'string' ? entityForm.title : entityForm.title?.title || '정보';
+            openModal({
+                modalId,
+                title: `${mobileTitleStr} 조회`,
+                size: '5xl',
+                content: (_jsx(ViewEntityForm, { entityForm: viewEntityForm, buttonLinks: {
+                        onClickList: async () => closeModal(modalId),
+                        ...(props.onRefresh
+                            ? {
+                                onSave: {
+                                    success: () => {
+                                        props.onRefresh();
+                                    },
+                                },
+                                onDelete: {
+                                    success: () => {
+                                        props.onRefresh();
+                                        closeModal(modalId);
+                                    },
+                                },
+                            }
+                            : {}),
+                    }, subCollection: true, readonly: props.viewMode === 'popup' || inlineViewReadonly === true, ...(mappedBy !== undefined ? { hideMappedByFields: mappedBy } : {}) })),
+            });
+            return;
+        }
+        // 데스크톱: 인라인 확장
+        inlineExpansion.toggleExpansion(item.id);
+    }
+    // 테마에서 행 및 셀 클래스 가져오기
+    const baseRowClass = `${themeClasses.row?.row ?? ''} ${themeClasses.row?.hover ?? 'hover:bg-gray-50 dark:hover:bg-dark/30'} ${themeClasses.row?.clickable ?? 'cursor-pointer'}`;
+    // 확장된 행 스타일 - 배경색으로 연결감 표현 (데스크톱 전용)
+    const expandedRowClass = isInlineExpanded && !isMobile ? 'bg-gray-200 !hover:bg-gray-200' : '';
+    const rowClass = `${baseRowClass} ${expandedRowClass} transition-all duration-200`;
+    const cellClass = themeClasses.cell?.cell ?? '';
+    const checkboxCellClass = themeClasses.cell?.checkboxCell ?? 'w-[50px]';
+    const dragHandleCellClass = themeClasses.cell?.dragHandleCell ?? 'w-[30px] cursor-grab';
+    const openNewWindowCellClass = themeClasses.cell?.openNewWindowCell ?? 'hidden md:table-cell';
+    return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: rowClass, children: [managePriority && (_jsx("td", { className: dragHandleCellClass, children: _jsx(IconBaselineDensityMedium, { className: 'w-4 h-4' }) })), enableCheckItem && (_jsx("td", { className: `${checkboxCellClass} whitespace-nowrap space-x-1`, children: (() => {
+                            // showCheckboxInput이 false면 번호만 표시
+                            if (!showCheckboxInput) {
+                                return _jsx("span", { className: 'font-normal', children: startNumber - index });
+                            }
+                            // 선택 가능 여부 체크
+                            const isSelectable = !selectionOptions?.selectableFilter || selectionOptions.selectableFilter(item);
+                            return (_jsxs("label", { htmlFor: `${item.id}`, className: 'font-normal', children: [_jsx("input", { type: 'checkbox', className: 'form-checkbox', id: `${item.id}`, checked: checkedItems.includes(item.id), disabled: !isSelectable, onChange: () => {
+                                            // 선택 제한 검증
+                                            if (selectionOptions?.maxSelection && !checkedItems.includes(item.id)) {
+                                                if (checkedItems.length >= selectionOptions.maxSelection) {
+                                                    showAlert({
+                                                        message: `최대 ${selectionOptions.maxSelection}개까지만 선택 가능합니다.`,
+                                                        topLayer: true,
+                                                    });
+                                                    return;
+                                                }
+                                            }
+                                            // 선택 검증
+                                            if (selectionOptions?.validateSelection) {
+                                                const newCheckedItems = checkedItems.includes(item.id)
+                                                    ? checkedItems.filter((id) => id !== item.id)
+                                                    : [...checkedItems, item.id];
+                                                const validation = selectionOptions.validateSelection(newCheckedItems);
+                                                if (!validation.valid) {
+                                                    showAlert({
+                                                        message: validation.message || '선택할 수 없습니다.',
+                                                        topLayer: true,
+                                                    });
+                                                    return;
+                                                }
+                                            }
+                                            checkItem(item.id);
+                                            // 선택 변경 콜백
+                                            if (selectionOptions?.onSelectionChange) {
+                                                const newCheckedItems = checkedItems.includes(item.id)
+                                                    ? checkedItems.filter((id) => id !== item.id)
+                                                    : [...checkedItems, item.id];
+                                                selectionOptions.onSelectionChange(newCheckedItems, props.list);
+                                            }
+                                        } }), startNumber - index] }));
+                        })() })), showOpenInNewWindowButton && (_jsx("td", { className: `${openNewWindowCellClass} whitespace-nowrap`, children: _jsx(Tooltip, { label: openInNewWindow?.tooltip || '새창에서 열기', children: _jsx("button", { className: 'btn btn-outline-secondary btn-sm p-1 min-w-[32px] min-h-[32px] flex items-center justify-center', onClick: handleOpenInNewWindow, children: _jsx(IconExternalLink, { className: 'w-4 h-4' }) }) }) })), inlineExpansion && (_jsx("td", { className: `${themeClasses.cell?.selectCell ?? ''} whitespace-nowrap`, children: _jsx(Tooltip, { label: isInlineExpanded ? '접기' : '펼치기', children: _jsx("button", { className: `btn btn-sm p-1 min-w-[32px] min-h-[32px] flex items-center justify-center ${isInlineExpanded ? 'btn-secondary' : 'btn-outline-info'}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleInlineExpansion();
+                                }, children: isInlineExpanded ? (_jsx(IconChevronUp, { className: 'w-4 h-4' })) : (_jsx(IconEye, { className: 'w-4 h-4' })) }) }) })), showViewButton && !inlineExpansion && (_jsx("td", { className: `${themeClasses.cell?.selectCell ?? ''} whitespace-nowrap`, children: _jsx(Tooltip, { label: '상세 보기', children: _jsx("button", { className: 'btn btn-outline-info btn-sm p-1 min-w-[32px] min-h-[32px] flex items-center justify-center', onClick: handleViewEntity, children: _jsx(IconEye, { className: 'w-4 h-4' }) }) }) })), openInNewWindowEnabled && isAdmin && !showOpenInNewWindowButton && !isSearchMode && (_jsx("td", { className: `${openNewWindowCellClass} whitespace-nowrap` })), _jsx(ViewColumn, { ...props, ...(() => {
+                            // Priority: inline expansion > accordion > undefined
+                            const clickAccordion = inlineExpansion
+                                ? toggleInlineExpansion
+                                : accordionMode
+                                    ? toggleAccordion
+                                    : undefined;
+                            return clickAccordion !== undefined ? { clickAccordion } : {};
+                        })(), viewMode: props.viewMode }), draggable && (_jsx("td", { className: 'whitespace-nowrap space-x-1', children: (function () {
+                            const sortButtons = [];
+                            if (totalCount < 1) {
+                                return sortButtons;
+                            }
+                            if (index < totalCount) {
+                                // 아래로 내리기
+                                sortButtons.push(_jsx(Tooltip, { label: `아래로 내리기`, children: _jsx("button", { className: 'btn-outline-secondary', onClick: () => {
+                                            const items = [...sortableList];
+                                            const temp = items[index + 1];
+                                            items[index + 1] = items[index];
+                                            items[index] = temp;
+                                            onDrag(items);
+                                        }, children: _jsx(Icon, { icon: "mingcute:arrow-down-circle-fill", className: `h-[24px] w-[24px]` }) }) }, `btn_down_${index}`));
+                            }
+                            if (index > 0) {
+                                // 위로 올리기
+                                sortButtons.push(_jsx(Tooltip, { label: `위로 올리기`, children: _jsx("button", { className: 'btn-outline-secondary', onClick: () => {
+                                            const items = [...sortableList];
+                                            const temp = items[index - 1];
+                                            items[index - 1] = items[index];
+                                            items[index] = temp;
+                                            onDrag(items);
+                                        }, children: _jsx(Icon, { icon: "mingcute:arrow-up-circle-fill", className: `h-[24px] w-[24px]` }) }) }, `btn_up_${index}`));
+                            }
+                            return sortButtons;
+                        })() }))] }, `tr_${index}_${key}`), showAccordion && (_jsx("tr", { children: _jsx("td", { colSpan: props.fields.length + 2, className: `${accordionView && 'p-2'}`, children: _jsx("div", { className: 'w-full', children: accordionView }) }) }, `row_accordion_${index}`)), isInlineExpanded && inlineExpansion && !isMobile && (_jsx("tr", { children: _jsx("td", { colSpan: props.fields.length +
+                        (enableCheckItem ? 1 : 0) +
+                        (showOpenInNewWindowButton ? 1 : 0) +
+                        (inlineExpansion ? 1 : 0) +
+                        (showViewButton && !inlineExpansion ? 1 : 0) +
+                        (managePriority ? 1 : 0) +
+                        (draggable ? 1 : 0), className: "rcm-row-expansion-cell", style: { maxWidth: '1px' }, children: _jsx(SubCollectionInlineView, { entityForm: entityForm.clone(true).withId(item.id), itemId: item.id, isExpanded: true, onCollapse: () => inlineExpansion.collapseItem(item.id), readonly: props.viewMode === 'popup' || inlineViewReadonly === true, ...(props.onRefresh !== undefined ? { onSave: props.onRefresh } : {}), ...(props.onRefresh !== undefined ? { onDelete: props.onRefresh } : {}), ...(mappedBy !== undefined ? { mappedBy } : {}) }) }) }, `row_inline_${index}`))] }));
+};

package/dist/listgrid/components/list/ui/buttons/CacheClearButton.d.ts

@@ -0,0 +1,9 @@
+import { EntityForm } from '../../../../config/EntityForm';
+interface CacheClearButtonProps {
+    entityForm: EntityForm;
+    setNotifications: (notifications: string[]) => void;
+    setErrors: (errors: string[]) => void;
+    onRefresh: () => void;
+}
+export declare const CacheClearButton: React.FC<CacheClearButtonProps>;
+export {};

package/dist/listgrid/components/list/ui/buttons/CacheClearButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { showConfirm } from '../../../../message';
+import { isTrue } from '../../../../utils/BooleanUtil';
+import { getExternalApiData } from '../../../../misc';
+import { getRuntimeConfig } from '../../../../config/RuntimeConfig';
+const cacheControl = isTrue(getRuntimeConfig().cacheControl, false);
+export const CacheClearButton = ({ entityForm, setNotifications, setErrors, onRefresh, }) => {
+    if (!cacheControl) {
+        return null;
+    }
+    const handleCacheDelete = () => {
+        showConfirm({
+            title: '서버의 데이터 캐시를 제거하시겠습니까?',
+            message: '캐시 정보를 제거하고 최신의 데이터를 DB에서 새로 FETCH 할 수 있습니다.',
+            confirmButtonText: '캐시 삭제하기',
+            cancelButtonText: '취소',
+            onConfirm: async () => {
+                const response = await getExternalApiData({
+                    url: `${entityForm.getUrl()}/clear-cache`,
+                    method: 'POST',
+                });
+                if (response) {
+                    setNotifications(['캐시가 정상적으로 삭제 되었습니다.']);
+                    setErrors([]);
+                    onRefresh();
+                }
+                else {
+                    setNotifications([]);
+                    setErrors(['캐시 삭제 중 오류가 발생했습니다.']);
+                }
+            },
+        });
+    };
+    return (_jsx("button", { type: 'button', className: "rcm-button", "data-variant": "outline", onClick: handleCacheDelete, children: "\uCE90\uC2DC \uC0AD\uC81C" }));
+};

package/dist/listgrid/components/list/ui/buttons/CreateButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SubCollectionBaseButtonProps } from '../../types/SubCollectionButtons.type';
+export interface CreateButtonProps {
+    ableDelete: boolean;
+    activeTrashIcon: boolean;
+    deleteItems: () => void;
+    buttons?: ((props: SubCollectionBaseButtonProps) => React.ReactNode)[];
+    buttonProps: SubCollectionBaseButtonProps;
+    ableAdd: boolean;
+    setOpen: (open: boolean) => void;
+    setRenderKey: (key: number) => void;
+}
+export declare const CreateButton: React.FC<CreateButtonProps>;

package/dist/listgrid/components/list/ui/buttons/CreateButton.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useListGridTheme } from '../../context/ListGridThemeContext';
+export const CreateButton = ({ ableDelete, activeTrashIcon, deleteItems, buttons, buttonProps, ableAdd, setOpen, setRenderKey, }) => {
+    const { classNames: themeClasses } = useListGridTheme();
+    const deleteButtonClass = themeClasses.subCollectionButtons?.deleteButton ?? 'rcm-button';
+    const addButtonClass = themeClasses.subCollectionButtons?.addButton ?? 'rcm-button';
+    return (_jsxs(_Fragment, { children: [ableDelete && activeTrashIcon && (_jsx("button", { className: deleteButtonClass, "data-variant": "outline", "data-color": "error", "data-size": "sm", onClick: deleteItems, children: "\uC0AD\uC81C" })), buttons?.map((buttonFunc, index) => (_jsx(React.Fragment, { children: buttonFunc(buttonProps) }, index))), ableAdd && (_jsx("button", { className: addButtonClass, "data-variant": "primary", "data-size": "sm", onClick: () => {
+                    setRenderKey(new Date().getTime());
+                    setOpen(true);
+                }, children: "\uC2E0\uADDC \uC785\uB825" }))] }));
+};

package/dist/listgrid/components/list/ui/buttons/PriorityButton.d.ts

@@ -0,0 +1,11 @@
+import { EntityForm } from '../../../../config/EntityForm';
+export interface PriorityButtonsProps {
+    managePriority: boolean;
+    setManagePriority: (value: boolean) => void;
+    setParentManagePriority: () => void;
+    rows?: any[];
+    entityForm: EntityForm;
+    setNotifications: (notifications: string[]) => void;
+    setErrors: (errors: string[]) => void;
+}
+export declare const PriorityButtons: React.FC<PriorityButtonsProps>;

package/dist/listgrid/components/list/ui/buttons/PriorityButton.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '../../../../ui';
+import { showConfirm } from '../../../../message';
+import { getExternalApiData } from '../../../../misc';
+export const PriorityButtons = ({ managePriority, setManagePriority, setParentManagePriority, rows, entityForm, setNotifications, setErrors, }) => {
+    const handlePriorityToggle = () => {
+        if (managePriority) {
+            showConfirm({
+                title: '우선순위 변경을 완료하시겠습니까?',
+                message: '우선순위 변경을 완료하면 변경된 우선순위가 저장되어 목록에 반영됩니다.',
+                confirmButtonText: '우선순위 변경 완료',
+                cancelButtonText: '취소',
+                onConfirm: async () => {
+                    const priorities = new Map();
+                    rows?.forEach((row, index) => {
+                        priorities.set(row.id, index + 1);
+                    });
+                    const response = await getExternalApiData({
+                        url: `${entityForm.getUrl()}/priority`,
+                        method: 'PUT',
+                        formData: {
+                            priorities: Object.fromEntries(priorities),
+                        },
+                    });
+                    if (response) {
+                        setNotifications(['우선순위 변경이 완료되었습니다.']);
+                        setManagePriority(false);
+                        setParentManagePriority();
+                    }
+                    else {
+                        setNotifications([]);
+                        setErrors(['우선순위 변경 중 오류가 발생했습니다.']);
+                    }
+                },
+            });
+        }
+        else {
+            setParentManagePriority();
+            setManagePriority(true);
+        }
+    };
+    const handleCancelPriorityChange = () => {
+        setParentManagePriority();
+        setManagePriority(false);
+    };
+    return (_jsxs("div", { className: "rcm-row", children: [_jsx(Tooltip, { label: managePriority
+                    ? '리스트에서 우선순위를 변경한 후 버튼을 누르면 변경된 우선순위가 저장되어 목록에 반영됩니다.'
+                    : '리스트 각 행의 맨 좌측 열을 드래그해 우선순위를 변경할 수 있습니다', children: _jsx("button", { type: 'button', className: "rcm-button", "data-variant": managePriority ? 'primary' : 'outline', onClick: handlePriorityToggle, children: managePriority ? '우선순위 변경 완료' : '우선순위 변경' }) }), managePriority && (_jsx("button", { type: 'button', className: 'btn btn-outline-danger', onClick: handleCancelPriorityChange, children: "\uC6B0\uC120\uC21C\uC704 \uBCC0\uACBD \uCDE8\uC18C" }))] }));
+};

package/dist/listgrid/components/list/ui/headerFilterStore.d.ts

@@ -0,0 +1,8 @@
+interface HeaderFilterState {
+    openFilterId: string | null;
+    openFilter: (filterId: string) => void;
+    closeFilter: () => void;
+    isFilterOpen: (filterId: string) => boolean;
+}
+export declare const useHeaderFilterStore: import("zustand").UseBoundStore<import("zustand").StoreApi<HeaderFilterState>>;
+export {};

package/dist/listgrid/components/list/ui/headerFilterStore.js

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+export const useHeaderFilterStore = create((set, get) => ({
+    openFilterId: null,
+    openFilter: (filterId) => {
+        set({ openFilterId: filterId });
+    },
+    closeFilter: () => {
+        set({ openFilterId: null });
+    },
+    isFilterOpen: (filterId) => {
+        return get().openFilterId === filterId;
+    },
+}));