@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,6 +0,0 @@
-import { Tooltip } from './Tooltip';
-export { Tooltip } from './Tooltip';
-export type { TooltipOptions, CalculatedPosition } from './const';
-export { calculateOptimalPosition } from './utils';
-export { SVG_ICONS, MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
-export default Tooltip;

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

@@ -1,10 +0,0 @@
-import { Tooltip } from './Tooltip';
-export { Tooltip } from './Tooltip';
-export { calculateOptimalPosition } from './utils';
-export { SVG_ICONS, MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
-// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
-if (typeof window !== 'undefined') {
-    window.ncua = window.ncua || {};
-    window.ncua.Tooltip = Tooltip;
-}
-export default Tooltip;

package/dist/temp/assets/scripts/tooltip/utils.d.ts

@@ -1,2 +0,0 @@
-import { CalculatedPosition } from './const';
-export declare function calculateOptimalPosition(triggerElement: HTMLElement, tooltipElement: HTMLElement, preferredPosition?: string): CalculatedPosition;

package/dist/temp/assets/scripts/tooltip/utils.js

@@ -1,33 +0,0 @@
-import { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
-export function calculateOptimalPosition(triggerElement, tooltipElement, preferredPosition = 'bottom') {
-    const triggerRect = triggerElement.getBoundingClientRect();
-    const tooltipRect = tooltipElement.getBoundingClientRect();
-    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
-    const spaces = {
-        top: triggerRect.top,
-        bottom: viewportHeight - triggerRect.bottom,
-        left: triggerRect.left,
-        right: viewportWidth - triggerRect.right,
-    };
-    const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-    const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-    for (const position of POSITION_PRIORITY) {
-        const hasSpace = position === 'bottom' || position === 'top'
-            ? spaces[position] >= tooltipHeight + MARGIN
-            : spaces[position] >= tooltipWidth + MARGIN;
-        if (hasSpace) {
-            if (position === 'bottom' || position === 'top') {
-                const centerX = triggerRect.left + triggerRect.width / 2;
-                const tooltipHalfWidth = tooltipWidth / 2;
-                if (centerX - tooltipHalfWidth < MARGIN) {
-                    return `${position}-left`;
-                }
-                else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-                    return `${position}-right`;
-                }
-            }
-            return position;
-        }
-    }
-    return preferredPosition;
-}

package/dist/temp/assets/scripts/utils/debounce.d.ts

@@ -1,8 +0,0 @@
-/**
- * 디바운스 유틸리티
- * 마지막 호출 후 지정된 시간이 지나야 콜백이 실행됨
- */
-export declare function debounce<T extends (...args: any[]) => any>(fn: T, ms: number): {
-    (...args: Parameters<T>): void;
-    cancel: () => void;
-};

package/dist/temp/assets/scripts/utils/debounce.js

@@ -1,23 +0,0 @@
-/**
- * 디바운스 유틸리티
- * 마지막 호출 후 지정된 시간이 지나야 콜백이 실행됨
- */
-export function debounce(fn, ms) {
-    let timer;
-    const debounced = (...args) => {
-        if (timer !== undefined) {
-            clearTimeout(timer);
-        }
-        timer = window.setTimeout(() => {
-            timer = undefined;
-            fn(...args);
-        }, ms);
-    };
-    debounced.cancel = () => {
-        if (timer !== undefined) {
-            clearTimeout(timer);
-            timer = undefined;
-        }
-    };
-    return debounced;
-}

package/dist/temp/assets/scripts/utils/unifiedBox/domRenderer.d.ts

@@ -1,107 +0,0 @@
-export interface RenderableOption {
-    id: string | number;
-    label: string;
-    disabled?: boolean;
-    selected?: boolean;
-    focused?: boolean;
-}
-export interface DropdownRenderConfig {
-    maxHeight: number;
-    size: 'xs' | 'sm' | 'md';
-    listboxId: string;
-    noResultsText?: string;
-}
-export interface OptionElementData {
-    element: HTMLLIElement;
-    option: RenderableOption;
-    index: number;
-}
-export declare class DOMRenderer {
-    private optionElementCache;
-    /**
-     * 드롭다운 컨테이너 생성 (구조만)
-     */
-    createDropdownStructure(config: DropdownRenderConfig): {
-        dropdown: HTMLDivElement;
-        content: HTMLDivElement;
-        optionsList: HTMLUListElement;
-    };
-    /**
-     * 단일 옵션 엘리먼트 생성 (재사용 가능)
-     */
-    createOptionElement(option: RenderableOption, index: number, config: DropdownRenderConfig): HTMLLIElement;
-    /**
-     * 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
-     */
-    updateOptionElement(element: HTMLLIElement, option: RenderableOption, index: number, config: DropdownRenderConfig): void;
-    /**
-     * "결과 없음" 엘리먼트 생성
-     */
-    createNoResultsElement(text?: string): HTMLLIElement;
-    /**
-     * 옵션 리스트 효율적 업데이트 (Differential Rendering)
-     */
-    updateOptionsList(container: HTMLUListElement, newOptions: RenderableOption[], config: DropdownRenderConfig, showNoResults?: boolean): HTMLLIElement[];
-    /**
-     * 컨테이너 자식 엘리먼트 효율적 업데이트
-     */
-    private updateContainerChildren;
-    /**
-     * 클래스 토글 (변경이 필요한 경우에만)
-     */
-    private toggleClass;
-    /**
-     * 입력 필드 생성 (InputFieldUtils에서 이동)
-     */
-    createInputField(config: {
-        placeholder?: string;
-        disabled?: boolean;
-        size?: 'xs' | 'sm' | 'md';
-        showSearchIcon?: boolean;
-        onInput?: (value: string) => void;
-        onClick?: () => void;
-        onShowAll?: () => void;
-        onClear?: () => void;
-    }): {
-        container: HTMLElement;
-        input: HTMLInputElement;
-        setValue: (value: string) => void;
-        focus: () => void;
-        blur: () => void;
-    };
-    /**
-     * 캐시 정리
-     */
-    clearCache(): void;
-    /**
-     * 특정 옵션 캐시 제거
-     */
-    removeCachedOption(optionId: string | number): void;
-    /**
-     * 공통 DOM 생성 유틸리티
-     */
-    static createElementWithClass(tagName: string, className: string, textContent?: string): HTMLElement;
-    /**
-     * 버튼 엘리먼트 생성
-     */
-    static createButton(className: string, textContent: string, onClick?: (e: Event) => void): HTMLButtonElement;
-    /**
-     * SVG 아이콘 생성
-     */
-    static createSvgIcon(iconName: string, size?: number): SVGElement;
-    /**
-     * 푸터 생성
-     */
-    createFooter(config: {
-        multiple?: boolean;
-        showFooterButtons?: boolean;
-        onSelectAll?: () => void;
-        onEdit?: () => void;
-        onComplete?: () => void;
-        selectAllButtonText?: string;
-    }): HTMLElement;
-    /**
-     * 전체 선택 버튼 텍스트 업데이트
-     */
-    updateSelectAllButtonText(footerElement: HTMLElement, text: string): void;
-}

package/dist/temp/assets/scripts/utils/unifiedBox/domRenderer.js

@@ -1,367 +0,0 @@
-export class DOMRenderer {
-    constructor() {
-        this.optionElementCache = new Map();
-    }
-    /**
-     * 드롭다운 컨테이너 생성 (구조만)
-     */
-    createDropdownStructure(config) {
-        const dropdown = document.createElement('div');
-        dropdown.className = `ncua-select-dropdown ncua-select-dropdown--down ncua-select-dropdown--${config.size}`;
-        dropdown.style.display = 'none';
-        const content = document.createElement('div');
-        content.className = 'ncua-select-dropdown__content';
-        const optionsList = document.createElement('ul');
-        optionsList.className = 'ncua-select-dropdown__options';
-        optionsList.setAttribute('role', 'listbox');
-        optionsList.setAttribute('id', config.listboxId);
-        optionsList.style.maxHeight = `${config.maxHeight}px`;
-        optionsList.style.overflowY = 'auto'; // 스크롤 활성화
-        content.appendChild(optionsList);
-        dropdown.appendChild(content);
-        return { dropdown, content, optionsList };
-    }
-    /**
-     * 단일 옵션 엘리먼트 생성 (재사용 가능)
-     */
-    createOptionElement(option, index, config) {
-        const cached = this.optionElementCache.get(option.id);
-        if (cached) {
-            this.updateOptionElement(cached, option, index, config);
-            return cached;
-        }
-        const element = document.createElement('li');
-        element.className = 'ncua-select-dropdown__option';
-        element.setAttribute('data-value', String(option.id));
-        element.setAttribute('data-index', String(index));
-        element.setAttribute('role', 'option');
-        element.id = `${config.listboxId}-${option.id}`;
-        const span = document.createElement('span');
-        span.className = 'ncua-select-dropdown__option-text';
-        span.textContent = option.label;
-        element.appendChild(span);
-        this.updateOptionElement(element, option, index, config);
-        this.optionElementCache.set(option.id, element);
-        return element;
-    }
-    /**
-     * 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
-     */
-    updateOptionElement(element, option, index, config) {
-        // 클래스 업데이트 (필요한 경우에만)
-        const shouldHaveSelected = option.selected || false;
-        const shouldHaveFocused = option.focused || false;
-        const shouldHaveDisabled = option.disabled || false;
-        this.toggleClass(element, 'ncua-select-dropdown__option--selected', shouldHaveSelected);
-        this.toggleClass(element, 'ncua-select-dropdown__option--focused', shouldHaveFocused);
-        this.toggleClass(element, 'ncua-select-dropdown__option--disabled', shouldHaveDisabled);
-        // 속성 업데이트 (필요한 경우에만)
-        element.setAttribute('aria-selected', String(shouldHaveSelected));
-        element.setAttribute('data-index', String(index));
-    }
-    /**
-     * "결과 없음" 엘리먼트 생성
-     */
-    createNoResultsElement(text = '일치하는 결과가 없습니다.') {
-        const noResults = document.createElement('li');
-        noResults.className = 'ncua-select-dropdown__no-results';
-        noResults.textContent = text;
-        return noResults;
-    }
-    /**
-     * 옵션 리스트 효율적 업데이트 (Differential Rendering)
-     */
-    updateOptionsList(container, newOptions, config, showNoResults = false) {
-        // 스크롤 위치 저장
-        const scrollTop = container.scrollTop;
-        // 결과 없음 처리
-        if (showNoResults) {
-            container.innerHTML = '';
-            container.appendChild(this.createNoResultsElement(config.noResultsText));
-            return [];
-        }
-        const newElements = [];
-        // 새 옵션들로 엘리먼트 생성/업데이트
-        newOptions.forEach((option, index) => {
-            const element = this.createOptionElement(option, index, config);
-            newElements.push(element);
-        });
-        // DOM 업데이트 최소화 - 변경된 부분만 업데이트
-        this.updateContainerChildren(container, newElements);
-        // 스크롤 위치 복원 (다음 프레임에서 실행)
-        requestAnimationFrame(() => {
-            container.scrollTop = scrollTop;
-        });
-        return newElements;
-    }
-    /**
-     * 컨테이너 자식 엘리먼트 효율적 업데이트
-     */
-    updateContainerChildren(container, newChildren) {
-        // 기존 엘리먼트 제거 (새 리스트에 없는 것들)
-        Array.from(container.children).forEach((child) => {
-            if (!newChildren.includes(child)) {
-                child.remove();
-            }
-        });
-        // 새 엘리먼트 추가 (순서 유지)
-        newChildren.forEach((child, index) => {
-            const currentChild = container.children[index];
-            if (currentChild !== child) {
-                if (currentChild) {
-                    container.insertBefore(child, currentChild);
-                }
-                else {
-                    container.appendChild(child);
-                }
-            }
-        });
-    }
-    /**
-     * 클래스 토글 (변경이 필요한 경우에만)
-     */
-    toggleClass(element, className, shouldHave) {
-        const hasClass = element.classList.contains(className);
-        if (shouldHave && !hasClass) {
-            element.classList.add(className);
-        }
-        else if (!shouldHave && hasClass) {
-            element.classList.remove(className);
-        }
-    }
-    /**
-     * 입력 필드 생성 (InputFieldUtils에서 이동)
-     */
-    createInputField(config) {
-        const actualSize = config.size === 'md' ? 'sm' : config.size || 'sm';
-        // 최상위 ncua-input 컨테이너 (React 버전과 동일)
-        const inputContainer = document.createElement('div');
-        inputContainer.className = `ncua-input ncua-input--${actualSize}`;
-        if (config.disabled)
-            inputContainer.classList.add('is-disabled');
-        // ncua-input__content 래퍼 (React 버전과 동일)
-        const inputContent = document.createElement('div');
-        inputContent.className = 'ncua-input__content';
-        // ncua-input__field 래퍼 (React 버전과 동일, size 포함)
-        const inputField = document.createElement('div');
-        inputField.className = `ncua-input__field ncua-input__field--${actualSize}`;
-        // 실제 입력 필드 (React 버전과 동일)
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.placeholder = config.placeholder || '';
-        if (config.disabled)
-            input.disabled = true;
-        // 이벤트 리스너
-        if (config.onInput) {
-            input.addEventListener('input', (e) => {
-                config.onInput(e.target.value);
-            });
-        }
-        if (config.onClick) {
-            input.addEventListener('click', (event) => {
-                event.stopPropagation(); // 이벤트 버블링 방지
-                config.onClick();
-            });
-        }
-        // 클리어 버튼 (React 버전의 renderClearButton과 동일)
-        let clearButton = null;
-        if (config.onClear) {
-            clearButton = document.createElement('button');
-            clearButton.type = 'button';
-            clearButton.className = 'ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear';
-            clearButton.style.display = 'none'; // 초기에는 숨김
-            clearButton.addEventListener('click', config.onClear);
-            // 클리어 아이콘 (React와 동일한 크기)
-            const iconSize = actualSize === 'xs' ? 14 : 16;
-            const clearIcon = DOMRenderer.createSvgIcon('close', iconSize);
-            clearIcon.setAttribute('class', 'ncua-input__clear-icon');
-            clearButton.appendChild(clearIcon);
-            // 입력값 변경 시 클리어 버튼 표시/숨김
-            input.addEventListener('input', () => {
-                if (clearButton) {
-                    clearButton.style.display = input.value ? 'flex' : 'none';
-                }
-            });
-        }
-        // 전체 보기 버튼 (React 버전의 trailingElement와 동일)
-        let showAllButton = null;
-        if (config.onShowAll) {
-            showAllButton = document.createElement('div');
-            showAllButton.className = 'ncua-input__icon-wrap ncua-input__right-icon';
-            showAllButton.addEventListener('click', config.onShowAll);
-            // 전체 버튼 (React Button 컴포넌트와 유사한 구조)
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'ncua-btn ncua-btn--xxs ncua-btn--text';
-            // 아이콘
-            const iconSize = 14;
-            const showAllIcon = DOMRenderer.createSvgIcon('chevron-selector-vertical', iconSize);
-            button.appendChild(showAllIcon);
-            // 텍스트
-            const label = document.createElement('span');
-            label.className = 'ncua-btn__label';
-            label.textContent = '전체';
-            button.appendChild(label);
-            showAllButton.appendChild(button);
-        }
-        // 검색 아이콘 (React 버전의 leadingElement와 동일)
-        let searchIcon = null;
-        if (config.showSearchIcon) {
-            searchIcon = document.createElement('div');
-            searchIcon.className = 'ncua-input__icon-wrap ncua-input__left-icon';
-            // 검색 아이콘 (React와 동일한 크기와 색상)
-            const searchSvg = DOMRenderer.createSvgIcon('search', 14);
-            searchSvg.style.color = '#98a2b3'; // gray300에 해당하는 색상
-            searchIcon.appendChild(searchSvg);
-        }
-        // 구조 조립 (React 버전과 동일한 순서)
-        if (searchIcon)
-            inputField.appendChild(searchIcon);
-        inputField.appendChild(input);
-        if (clearButton)
-            inputField.appendChild(clearButton);
-        if (showAllButton)
-            inputField.appendChild(showAllButton);
-        inputContent.appendChild(inputField);
-        inputContainer.appendChild(inputContent);
-        return {
-            container: inputContainer,
-            input,
-            setValue: (value) => {
-                input.value = value;
-                // 클리어 버튼 표시 상태 업데이트
-                if (clearButton) {
-                    clearButton.style.display = value ? 'flex' : 'none';
-                }
-            },
-            focus: () => input.focus(),
-            blur: () => input.blur(),
-        };
-    }
-    /**
-     * 캐시 정리
-     */
-    clearCache() {
-        this.optionElementCache.clear();
-    }
-    /**
-     * 특정 옵션 캐시 제거
-     */
-    removeCachedOption(optionId) {
-        this.optionElementCache.delete(optionId);
-    }
-    /**
-     * 공통 DOM 생성 유틸리티
-     */
-    static createElementWithClass(tagName, className, textContent) {
-        const element = document.createElement(tagName);
-        element.className = className;
-        if (textContent) {
-            element.textContent = textContent;
-        }
-        return element;
-    }
-    /**
-     * 버튼 엘리먼트 생성
-     */
-    static createButton(className, textContent, onClick) {
-        const button = document.createElement('button');
-        button.className = className;
-        // React 컴포넌트와 일치하도록 span.ncua-btn__label 구조 사용
-        const label = document.createElement('span');
-        label.className = 'ncua-btn__label';
-        label.textContent = textContent;
-        button.appendChild(label);
-        if (onClick) {
-            button.addEventListener('click', onClick);
-        }
-        return button;
-    }
-    /**
-     * SVG 아이콘 생성
-     */
-    static createSvgIcon(iconName, size = 16) {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', size.toString());
-        svg.setAttribute('height', size.toString());
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        // 기본 아이콘들
-        switch (iconName) {
-            case 'close':
-                svg.innerHTML =
-                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 7 7 17M7 7l10 10"/>';
-                break;
-            case 'chevron-down':
-                svg.innerHTML =
-                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>';
-                break;
-            case 'chevron-selector-vertical':
-                svg.innerHTML =
-                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 15 5 5 5-5M7 9l5-5 5 5"/>';
-                break;
-            case 'search':
-                svg.innerHTML =
-                    '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0"></path>';
-                break;
-        }
-        return svg;
-    }
-    /**
-     * 푸터 생성
-     */
-    createFooter(config) {
-        // 푸터 생성
-        const footer = document.createElement('div');
-        footer.className = 'ncua-select-dropdown__footer';
-        const footerButtons = document.createElement('div');
-        footerButtons.className = 'ncua-select-dropdown__footer-buttons';
-        const footerLeft = document.createElement('div');
-        footerLeft.className = 'ncua-select-dropdown__footer-left';
-        const footerRight = document.createElement('div');
-        footerRight.className = 'ncua-select-dropdown__footer-right';
-        // 다중 선택인 경우 전체 선택 버튼 추가
-        if (config.multiple) {
-            const selectAllButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--text has-underline', config.selectAllButtonText || '전체 선택', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                config.onSelectAll?.();
-            });
-            footerLeft.appendChild(selectAllButton);
-        }
-        // 편집 버튼 (showFooterButtons가 true이고 onEdit가 있는 경우)
-        if (config.showFooterButtons && config.onEdit) {
-            const editButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary-gray', '편집', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                config.onEdit?.();
-            });
-            footerRight.appendChild(editButton);
-        }
-        // 선택 완료 버튼 (다중 선택이거나 showFooterButtons가 true인 경우)
-        if (config.multiple || config.showFooterButtons) {
-            const completeButton = DOMRenderer.createButton('ncua-btn ncua-btn--xs ncua-btn--secondary', '선택 완료', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                config.onComplete?.();
-            });
-            footerRight.appendChild(completeButton);
-        }
-        footerButtons.appendChild(footerLeft);
-        footerButtons.appendChild(footerRight);
-        footer.appendChild(footerButtons);
-        return footer;
-    }
-    /**
-     * 전체 선택 버튼 텍스트 업데이트
-     */
-    updateSelectAllButtonText(footerElement, text) {
-        const selectAllButton = footerElement.querySelector('.ncua-select-dropdown__footer-left .ncua-btn');
-        if (selectAllButton) {
-            const label = selectAllButton.querySelector('.ncua-btn__label');
-            if (label) {
-                label.textContent = text;
-            }
-        }
-    }
-}