@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/esm/assets/scripts/table/Table.js

@@ -0,0 +1,370 @@
+import { TABLE_CLASS_NAMES } from './const/classNames';
+const TABLE_DIMENSIONS = {
+  CHECKBOX_CELL_WIDTH: '56px',
+  HEADER_HEIGHT: 40,
+  ROW_MIN_HEIGHT: 48,
+  CHECKBOX_PADDING: '16px'
+};
+const SORT_SVG = {
+  none: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 6L8 2.5L11.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 10L8 13.5L11.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  asc: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9.5L8 6L11.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  desc: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 6.5L8 10L11.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+};
+const ARIA_SORT_VALUES = {
+  asc: 'ascending',
+  desc: 'descending',
+  none: 'none'
+};
+export class Table {
+  constructor(options) {
+    this.theadElement = null;
+    this.sortState = new Map();
+    this.selectedIndices = new Set();
+    this.abortController = new AbortController();
+    this.options = {
+      type: 'horizontal',
+      hoverable: true,
+      selectable: false,
+      fixedHeader: false,
+      emptyText: '등록된 게시물이 없습니다.',
+      ...options
+    };
+    this.createElement();
+  }
+  createElement() {
+    this.createOuterElement();
+    this.createTableElement();
+    this.renderBody();
+    this.wrapWithScrollContainer();
+  }
+  createOuterElement() {
+    this.element = document.createElement('div');
+    this.updateOuterClasses();
+  }
+  createTableElement() {
+    this.tableElement = document.createElement('table');
+    this.tableElement.className = TABLE_CLASS_NAMES.tableElement;
+    this.tableElement.setAttribute('role', 'table');
+    if (this.options.columns) {
+      this.createColGroup();
+      if (this.options.type === 'horizontal') {
+        this.createHeader();
+      }
+    }
+    this.tbodyElement = document.createElement('tbody');
+    this.tbodyElement.className = TABLE_CLASS_NAMES.body;
+    this.tableElement.appendChild(this.tbodyElement);
+  }
+  wrapWithScrollContainer() {
+    if (this.options.fixedHeader && this.options.maxHeight) {
+      const scrollContainer = document.createElement('div');
+      scrollContainer.className = TABLE_CLASS_NAMES.scrollContainer;
+      scrollContainer.style.maxHeight = this.options.maxHeight;
+      scrollContainer.appendChild(this.tableElement);
+      this.element.appendChild(scrollContainer);
+    } else {
+      this.element.appendChild(this.tableElement);
+    }
+  }
+  updateOuterClasses() {
+    const classes = [TABLE_CLASS_NAMES.table];
+    if (this.options.type === 'horizontal') {
+      classes.push(TABLE_CLASS_NAMES.horizontal);
+    } else {
+      classes.push(TABLE_CLASS_NAMES.vertical);
+    }
+    if (this.options.hoverable && this.options.type === 'horizontal') {
+      classes.push(TABLE_CLASS_NAMES.hoverable);
+    }
+    if (this.options.fixedHeader) {
+      classes.push(TABLE_CLASS_NAMES.fixedHeader);
+    }
+    this.element.className = classes.join(' ');
+  }
+  createColGroup() {
+    const colgroup = document.createElement('colgroup');
+    if (this.options.selectable) {
+      const column = document.createElement('col');
+      column.style.width = TABLE_DIMENSIONS.CHECKBOX_CELL_WIDTH;
+      colgroup.appendChild(column);
+    }
+    for (const columnConfig of this.options.columns ?? []) {
+      const column = document.createElement('col');
+      if (columnConfig.width) {
+        column.style.width = columnConfig.width;
+      }
+      colgroup.appendChild(column);
+    }
+    this.tableElement.appendChild(colgroup);
+  }
+  createHeader() {
+    this.theadElement = document.createElement('thead');
+    this.theadElement.className = TABLE_CLASS_NAMES.header;
+    const tableRow = document.createElement('tr');
+    if (this.options.selectable) {
+      tableRow.appendChild(this.createHeaderCheckboxCell());
+    }
+    for (const column of this.options.columns ?? []) {
+      tableRow.appendChild(this.createHeaderDataCell(column));
+    }
+    this.theadElement.appendChild(tableRow);
+    this.tableElement.appendChild(this.theadElement);
+  }
+  createHeaderCheckboxCell() {
+    const headerCell = document.createElement('th');
+    headerCell.className = `${TABLE_CLASS_NAMES.checkboxCell} ${TABLE_CLASS_NAMES.checkboxCellHeader}`;
+    const wrapper = document.createElement('span');
+    wrapper.className = 'ncua-checkbox-input ncua-checkbox-input--sm';
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.setAttribute('aria-label', '전체 선택');
+    checkbox.addEventListener('change', () => this.handleSelectAll(checkbox.checked), {
+      signal: this.abortController.signal
+    });
+    wrapper.appendChild(checkbox);
+    headerCell.appendChild(wrapper);
+    return headerCell;
+  }
+  createHeaderDataCell(column) {
+    const headerCell = document.createElement('th');
+    headerCell.className = TABLE_CLASS_NAMES.headerCell;
+    if (column.width) {
+      headerCell.style.width = column.width;
+    }
+    const innerContainer = document.createElement('span');
+    innerContainer.className = 'ncua-table__header-cell-inner';
+    const textSpan = document.createElement('span');
+    textSpan.className = 'ncua-table__header-cell-text';
+    textSpan.textContent = column.label;
+    innerContainer.appendChild(textSpan);
+    if (column.sortable) {
+      headerCell.classList.add(TABLE_CLASS_NAMES.headerCellSortable);
+      this.sortState.set(column.key, 'none');
+      const sortIcon = document.createElement('span');
+      sortIcon.className = TABLE_CLASS_NAMES.sortIcon;
+      sortIcon.innerHTML = SORT_SVG.none;
+      innerContainer.appendChild(sortIcon);
+      headerCell.addEventListener('click', () => this.handleSort(column.key, headerCell), {
+        signal: this.abortController.signal
+      });
+    }
+    headerCell.appendChild(innerContainer);
+    return headerCell;
+  }
+  renderBody() {
+    this.tbodyElement.innerHTML = '';
+    const data = this.options.data || [];
+    if (data.length === 0) {
+      this.renderEmptyState();
+      return;
+    }
+    if (this.options.type === 'vertical') {
+      this.renderVerticalBody(data);
+      return;
+    }
+    this.renderHorizontalBody(data);
+  }
+  renderEmptyState() {
+    const columnCount = (this.options.columns?.length || 1) + (this.options.selectable ? 1 : 0);
+    const tableRow = document.createElement('tr');
+    const tableCell = document.createElement('td');
+    tableCell.colSpan = columnCount;
+    tableCell.className = TABLE_CLASS_NAMES.empty;
+    tableCell.setAttribute('role', 'status');
+    tableCell.setAttribute('aria-live', 'polite');
+    tableCell.textContent = this.options.emptyText;
+    tableRow.appendChild(tableCell);
+    this.tbodyElement.appendChild(tableRow);
+  }
+  renderHorizontalBody(data) {
+    for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
+      const tableRow = this.createHorizontalRow(data[rowIndex], rowIndex);
+      this.tbodyElement.appendChild(tableRow);
+    }
+  }
+  createRowCheckboxCell(rowIndex) {
+    const tableCell = document.createElement('td');
+    tableCell.className = `${TABLE_CLASS_NAMES.checkboxCell} ${TABLE_CLASS_NAMES.checkboxCellBody}`;
+    const wrapper = document.createElement('span');
+    wrapper.className = 'ncua-checkbox-input ncua-checkbox-input--sm';
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.checked = this.selectedIndices.has(rowIndex);
+    checkbox.setAttribute('aria-label', '행 선택');
+    checkbox.addEventListener('change', () => this.handleRowSelect(rowIndex, checkbox.checked), {
+      signal: this.abortController.signal
+    });
+    if (this.selectedIndices.has(rowIndex)) {
+      wrapper.classList.add('has-checked');
+    }
+    wrapper.appendChild(checkbox);
+    tableCell.appendChild(wrapper);
+    return tableCell;
+  }
+  createHorizontalRow(row, rowIndex) {
+    const tableRow = document.createElement('tr');
+    tableRow.className = TABLE_CLASS_NAMES.row;
+    if (this.selectedIndices.has(rowIndex)) {
+      tableRow.classList.add(TABLE_CLASS_NAMES.rowSelected);
+    }
+    if (this.options.selectable) {
+      tableRow.appendChild(this.createRowCheckboxCell(rowIndex));
+    }
+    for (const column of this.options.columns ?? []) {
+      const tableCell = document.createElement('td');
+      tableCell.className = TABLE_CLASS_NAMES.cell;
+      if (column.align) {
+        tableCell.style.textAlign = column.align;
+      }
+      if (column.render) {
+        const rendered = column.render(row[column.key], row, rowIndex);
+        if (typeof rendered === 'string') {
+          tableCell.textContent = rendered;
+        } else {
+          tableCell.appendChild(rendered);
+        }
+      } else {
+        const value = row[column.key];
+        tableCell.textContent = value != null ? String(value) : '-';
+      }
+      tableRow.appendChild(tableCell);
+    }
+    return tableRow;
+  }
+  renderVerticalBody(data) {
+    const row = data[0] || {};
+    for (const column of this.options.columns ?? []) {
+      const tableRow = this.createVerticalRow(column, row);
+      this.tbodyElement.appendChild(tableRow);
+    }
+  }
+  createVerticalRow(column, row) {
+    const tableRow = document.createElement('tr');
+    tableRow.className = TABLE_CLASS_NAMES.row;
+    const labelCell = document.createElement('td');
+    labelCell.className = TABLE_CLASS_NAMES.cell;
+    labelCell.textContent = column.label;
+    tableRow.appendChild(labelCell);
+    const valueCell = this.createVerticalValueCell(column, row);
+    tableRow.appendChild(valueCell);
+    return tableRow;
+  }
+  createVerticalValueCell(column, row) {
+    const valueCell = document.createElement('td');
+    valueCell.className = TABLE_CLASS_NAMES.cell;
+    if (column.render) {
+      const rendered = column.render(row[column.key], row, 0);
+      if (typeof rendered === 'string') {
+        valueCell.textContent = rendered;
+      } else {
+        valueCell.appendChild(rendered);
+      }
+    } else {
+      const value = row[column.key];
+      valueCell.textContent = value != null ? String(value) : '-';
+    }
+    return valueCell;
+  }
+  handleSort(key, thElement) {
+    const nextDirection = this.getNextSortDirection(key);
+    for (const [sortKey] of this.sortState) {
+      this.sortState.set(sortKey, 'none');
+    }
+    this.sortState.set(key, nextDirection);
+    this.updateSortIcons(thElement, nextDirection);
+    thElement.setAttribute('aria-sort', this.getAriaSortValue(nextDirection));
+    this.options.onSort?.(key, nextDirection);
+  }
+  getNextSortDirection(key) {
+    const currentDirection = this.sortState.get(key) || 'none';
+    if (currentDirection === 'none') {
+      return 'asc';
+    }
+    if (currentDirection === 'asc') {
+      return 'desc';
+    }
+    return 'none';
+  }
+  updateSortIcons(thElement, direction) {
+    const allHeaders = this.theadElement?.querySelectorAll(`.${TABLE_CLASS_NAMES.headerCell}`);
+    allHeaders?.forEach(header => {
+      const icon = header.querySelector(`.${TABLE_CLASS_NAMES.sortIcon}`);
+      if (icon) {
+        icon.innerHTML = SORT_SVG.none;
+      }
+    });
+    const sortIcon = thElement.querySelector(`.${TABLE_CLASS_NAMES.sortIcon}`);
+    if (sortIcon) {
+      sortIcon.innerHTML = SORT_SVG[direction];
+    }
+  }
+  getAriaSortValue(direction) {
+    return ARIA_SORT_VALUES[direction];
+  }
+  handleSelectAll(checked) {
+    this.selectedIndices.clear();
+    if (checked && this.options.data) {
+      for (let index = 0; index < this.options.data.length; index++) {
+        this.selectedIndices.add(index);
+      }
+    }
+    this.updateRowSelectionStyles();
+    this.updateHeaderCheckbox();
+    this.options.onSelect?.([...this.selectedIndices]);
+  }
+  handleRowSelect(index, checked) {
+    if (checked) {
+      this.selectedIndices.add(index);
+    } else {
+      this.selectedIndices.delete(index);
+    }
+    this.updateRowSelectionStyles();
+    this.updateHeaderCheckbox();
+    this.options.onSelect?.([...this.selectedIndices]);
+  }
+  updateRowSelectionStyles() {
+    const rows = this.tbodyElement.querySelectorAll(`.${TABLE_CLASS_NAMES.row}`);
+    rows.forEach((row, index) => {
+      const isSelected = this.selectedIndices.has(index);
+      row.classList.toggle(TABLE_CLASS_NAMES.rowSelected, isSelected);
+      const checkbox = row.querySelector('input[type="checkbox"]');
+      if (checkbox) {
+        checkbox.checked = isSelected;
+      }
+      const wrapper = row.querySelector('.ncua-checkbox-input');
+      if (wrapper) {
+        wrapper.classList.toggle('has-checked', isSelected);
+      }
+    });
+  }
+  updateHeaderCheckbox() {
+    const headerWrapper = this.theadElement?.querySelector('.ncua-checkbox-input');
+    const headerCheckbox = headerWrapper?.querySelector('input[type="checkbox"]');
+    if (!headerWrapper || !headerCheckbox || !this.options.data) return;
+    const total = this.options.data.length;
+    const selectedCount = this.selectedIndices.size;
+    const isAllSelected = selectedCount === total && total > 0;
+    const isIndeterminate = selectedCount > 0 && selectedCount < total;
+    headerCheckbox.checked = isAllSelected;
+    headerCheckbox.indeterminate = isIndeterminate;
+    headerWrapper.classList.toggle('has-checked', isAllSelected);
+    headerWrapper.classList.toggle('has-indeterminate', isIndeterminate);
+  }
+  // ──────── Public API ────────
+  getElement() {
+    return this.element;
+  }
+  setData(data) {
+    this.options.data = data;
+    this.selectedIndices.clear();
+    this.renderBody();
+    this.updateHeaderCheckbox();
+  }
+  getSelectedIndices() {
+    return [...this.selectedIndices];
+  }
+  destroy() {
+    this.abortController.abort();
+    this.element.remove();
+  }
+}

package/dist/esm/assets/scripts/table/const/classNames.js

@@ -0,0 +1,27 @@
+export const TABLE_CLASS_NAMES = {
+  table: 'ncua-table',
+  horizontal: 'ncua-table--horizontal',
+  vertical: 'ncua-table--vertical',
+  hoverable: 'ncua-table--hoverable',
+  fixedHeader: 'ncua-table--fixed-header',
+  scrollContainer: 'ncua-table__scroll-container',
+  tableElement: 'ncua-table__table',
+  header: 'ncua-table__header',
+  headerCell: 'ncua-table__header-cell',
+  headerCellSortable: 'ncua-table__header-cell--sortable',
+  sortIcon: 'ncua-table__sort-icon',
+  body: 'ncua-table__body',
+  row: 'ncua-table__row',
+  rowSelected: 'ncua-table__row--selected',
+  rowWarning: 'ncua-table__row--warning',
+  rowError: 'ncua-table__row--error',
+  cell: 'ncua-table__cell',
+  checkboxCell: 'ncua-table__checkbox-cell',
+  checkboxCellHeader: 'ncua-table__checkbox-cell--header',
+  checkboxCellBody: 'ncua-table__checkbox-cell--body',
+  footer: 'ncua-table__footer',
+  footerRow: 'ncua-table__footer-row',
+  pagination: 'ncua-table__pagination',
+  empty: 'ncua-table__empty',
+  required: 'ncua-table__required'
+};

package/dist/esm/assets/scripts/table/const/index.js

@@ -0,0 +1,2 @@
+export * from './classNames';
+export * from './types';

package/dist/esm/assets/scripts/table/const/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/assets/scripts/table/index.js

@@ -0,0 +1,8 @@
+import { Table } from './Table';
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Table = Table;
+}
+export * from './const/classNames';
+export * from './const/types';
+export { Table } from './Table';