@ncds/ui-admin 1.7.0 → 1.8.1

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

@@ -0,0 +1,378 @@
+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/temp/assets/scripts/table/const/classNames.d.ts

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

package/dist/temp/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/temp/assets/scripts/table/const/index.d.ts

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

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

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

package/dist/temp/assets/scripts/table/const/types.d.ts

@@ -0,0 +1,23 @@
+export type TableType = 'horizontal' | 'vertical';
+export type SortDirection = 'asc' | 'desc' | 'none';
+export type RowStatus = 'warning' | 'error';
+export type TableColumn = {
+    key: string;
+    label: string;
+    width?: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: unknown, row: Record<string, unknown>, rowIndex: number) => HTMLElement | string;
+};
+export type TableOptions = {
+    type?: TableType;
+    columns?: TableColumn[];
+    data?: Record<string, unknown>[];
+    hoverable?: boolean;
+    selectable?: boolean;
+    fixedHeader?: boolean;
+    maxHeight?: string;
+    emptyText?: string;
+    onSort?: (key: string, direction: SortDirection) => void;
+    onSelect?: (selectedIndices: number[]) => void;
+};

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

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

package/dist/temp/assets/scripts/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './const/classNames';
+export * from './const/types';
+export { Table } from './Table';

package/dist/temp/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';