@ncds/ui-admin 1.8.11 → 1.8.13

package/dist/cjs/src/components/data-display/table/dnd-preview.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildDragPreview = exports.TABLE_DND_ID_SLICE_START = exports.TABLE_DND_ID_SLICE_END = exports.TABLE_DND_ID_RADIX = exports.PREVIEW_BADGE_SIZE = void 0;
+const TABLE_DND_ID_RADIX = exports.TABLE_DND_ID_RADIX = 36;
+const TABLE_DND_ID_SLICE_START = exports.TABLE_DND_ID_SLICE_START = 2;
+const TABLE_DND_ID_SLICE_END = exports.TABLE_DND_ID_SLICE_END = 9;
+const PREVIEW_MAX_ROWS = 3;
+const PREVIEW_STACK_OFFSET = 5;
+const PREVIEW_MAX_STACK_OFFSET = PREVIEW_STACK_OFFSET * PREVIEW_MAX_ROWS;
+const PREVIEW_BADGE_SIZE = exports.PREVIEW_BADGE_SIZE = 24;
+const PREVIEW_BADGE_HALF = PREVIEW_BADGE_SIZE / 2;
+// hover의 color-mix 반투명 배경을 우회해 불투명 RGB 배경색을 클래스 기반으로 직접 결정
+const getRowBackground = rowEl => {
+  const resolveCssVar = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  const isSelected = rowEl.classList.contains('ncua-table__row--selected');
+  const isError = rowEl.classList.contains('ncua-table__row--error');
+  const isWarning = rowEl.classList.contains('ncua-table__row--warning');
+  if (isSelected && isError) return resolveCssVar('--primary-red-50');
+  if (isSelected && isWarning) return resolveCssVar('--orange-50');
+  if (isSelected) return resolveCssVar('--gray-50');
+  return resolveCssVar('--base-white');
+};
+// cloneNode는 HTML attribute만 복사하므로 checkbox.checked를 직접 동기화
+const cloneRowWithState = sourceRow => {
+  const clone = sourceRow.cloneNode(true);
+  const srcInputs = sourceRow.querySelectorAll('input[type="checkbox"]');
+  const clnInputs = clone.querySelectorAll('input[type="checkbox"]');
+  srcInputs.forEach((src, i) => {
+    const cln = clnInputs[i];
+    if (cln) cln.checked = src.checked;
+  });
+  clone.style.backgroundColor = getRowBackground(sourceRow);
+  // 열 너비는 테이블 레이아웃 컨텍스트에서 결정되므로 직접 복사 — ceil로 올림해 프리뷰 셀이 실제보다 좁아지지 않게 함
+  const srcCells = Array.from(sourceRow.querySelectorAll('td, th'));
+  const clnCells = Array.from(clone.querySelectorAll('td, th'));
+  srcCells.forEach((src, i) => {
+    const cln = clnCells[i];
+    if (!cln) return;
+    const w = `${Math.ceil(src.getBoundingClientRect().width)}px`;
+    cln.style.width = w;
+    cln.style.minWidth = w;
+    cln.style.maxWidth = w;
+  });
+  return clone;
+};
+const buildCountBadge = count => {
+  const badge = document.createElement('div');
+  badge.className = 'ncua-table-dnd-preview__badge';
+  badge.textContent = String(count);
+  return badge;
+};
+const buildSummaryCard = rowRect => {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'ncua-table-dnd-preview__summary';
+  Object.assign(wrapper.style, {
+    top: `${Math.round(PREVIEW_BADGE_HALF + PREVIEW_MAX_STACK_OFFSET)}px`,
+    left: `${Math.round(PREVIEW_BADGE_HALF + PREVIEW_MAX_STACK_OFFSET)}px`,
+    width: `${Math.round(rowRect.width) - PREVIEW_MAX_STACK_OFFSET}px`,
+    height: `${Math.round(rowRect.height)}px`
+  });
+  return wrapper;
+};
+const buildRowCard = _ref => {
+  let {
+    row,
+    cardLeft,
+    cardTop,
+    cardWidth,
+    rowHeight,
+    zIndex,
+    parentTable
+  } = _ref;
+  const wrapper = document.createElement('div');
+  wrapper.className = 'ncua-table-dnd-preview__card';
+  Object.assign(wrapper.style, {
+    zIndex: String(zIndex),
+    top: `${cardTop}px`,
+    left: `${cardLeft}px`,
+    width: `${cardWidth}px`,
+    height: `${rowHeight}px`,
+    backgroundColor: getRowBackground(row)
+  });
+  const table = document.createElement('table');
+  if (parentTable) table.className = parentTable.className;
+  table.style.width = `${cardWidth}px`;
+  const tbody = document.createElement('tbody');
+  tbody.className = 'ncua-table__body';
+  tbody.appendChild(cloneRowWithState(row));
+  table.appendChild(tbody);
+  wrapper.appendChild(table);
+  return wrapper;
+};
+const buildDragPreview = (rows, rowRect) => {
+  const visibleCount = Math.min(rows.length, PREVIEW_MAX_ROWS);
+  const hasSummary = rows.length > visibleCount;
+  const totalCards = visibleCount + (hasSummary ? 1 : 0);
+  const isMulti = rows.length > 1;
+  const parentTable = rows[0]?.closest('table') ?? null;
+  const rowWidth = Math.round(rowRect.width);
+  const rowHeight = Math.round(rowRect.height);
+  const container = document.createElement('div');
+  container.className = 'ncua-table-dnd-preview';
+  Object.assign(container.style, {
+    width: `${PREVIEW_BADGE_HALF + rowWidth}px`,
+    height: `${PREVIEW_BADGE_HALF + rowHeight + PREVIEW_STACK_OFFSET * (totalCards - 1)}px`
+  });
+  if (isMulti) container.appendChild(buildCountBadge(rows.length));
+  if (hasSummary) container.appendChild(buildSummaryCard(rowRect));
+  // 뒤쪽 행 카드부터 렌더해서 앞쪽이 위로 올라오게
+  for (let i = visibleCount - 1; i >= 0; i--) {
+    const stackShift = isMulti ? i * PREVIEW_STACK_OFFSET : 0;
+    container.appendChild(buildRowCard({
+      row: rows[i],
+      cardLeft: Math.round(PREVIEW_BADGE_HALF + stackShift),
+      cardTop: Math.round(PREVIEW_BADGE_HALF + stackShift),
+      cardWidth: rowWidth - stackShift,
+      rowHeight,
+      zIndex: visibleCount - i,
+      parentTable
+    }));
+  }
+  return container;
+};
+exports.buildDragPreview = buildDragPreview;

package/dist/esm/src/components/data-display/data-grid/DataGrid.js

@@ -75,7 +75,8 @@ const DataGridTable = /*#__PURE__*/forwardRef((_ref5, ref) => {
     hoverable,
     selectable,
     horizontalScroll,
-    minWidth
+    minWidth,
+    draggable
   } = _ref5;
   return _jsx("div", {
     ref: ref,
@@ -89,6 +90,7 @@ const DataGridTable = /*#__PURE__*/forwardRef((_ref5, ref) => {
       selectable: selectable,
       horizontalScroll: horizontalScroll,
       minWidth: minWidth,
+      draggable: draggable,
       children: children
     })
   });
@@ -139,7 +141,7 @@ const sortChildren = children => {
   });
   return result;
 };
-const hasTableWrapperContent = sorted => sorted.filterBar.length > 0 || sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || sorted.bottomActionBar.length > 0;
+const hasTableWrapperContent = (sorted, actionBarVisible) => sorted.filterBar.length > 0 || actionBarVisible && sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || actionBarVisible && sorted.bottomActionBar.length > 0;
 const isTableSelectable = dataTable => dataTable.some(child => /*#__PURE__*/isValidElement(child) && child.props.selectable === true);
 // ──────────────────────────────────────────────
 // Main DataGrid component
@@ -149,17 +151,19 @@ const DataGridComponent = /*#__PURE__*/forwardRef((_ref7, ref) => {
     variant = 'search-result',
     children,
     className,
+    showActionBar,
     ...rest
   } = _ref7;
   const sorted = sortChildren(children);
-  const needsEmptyBottomBar = sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
+  const actionBarVisible = showActionBar !== false;
+  const needsEmptyBottomBar = actionBarVisible && sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
   return _jsxs("div", {
     ref: ref,
     className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`),
     ...rest,
-    children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && _jsxs("div", {
+    children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted, actionBarVisible) && _jsxs("div", {
       className: "ncua-data-grid__table-wrapper",
-      children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", {
+      children: [sorted.filterBar, actionBarVisible && sorted.topActionBar, sorted.dataTable, actionBarVisible && sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", {
         className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom"
       })]
     }), sorted.pagination]