@ncds/ui-admin 1.8.1 → 1.8.2

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

@@ -1,378 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

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

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

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

@@ -1,23 +0,0 @@
-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

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

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

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

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

@@ -1,8 +0,0 @@
-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';

package/dist/temp/assets/scripts/tag/Tag.d.ts

@@ -1,27 +0,0 @@
-import { BaseTagOptions } from './const/types';
-export declare class Tag {
-    private element;
-    private options;
-    private isTooltipVisible;
-    private calculatedPosition;
-    private tooltipElement;
-    constructor(options: BaseTagOptions);
-    private createElement;
-    private getTagClasses;
-    private shouldTruncate;
-    private getTruncatedText;
-    private createSideSlot;
-    private createIconSVG;
-    private createCloseButton;
-    private createTooltip;
-    private removeTooltip;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    getElement(): HTMLSpanElement;
-    isTooltipShown(): boolean;
-    setText(text: string): void;
-    setCount(count: string | undefined): void;
-    private updateTextElement;
-    private updateCountElement;
-    destroy(): void;
-}