@ncds/ui-admin 1.8.1 → 1.8.2

package/dist/temp/assets/scripts/tag/Tag.js

@@ -1,259 +0,0 @@
-import { TAG_CLASS_NAMES, getTagSizeClassName, getTooltipPositionClassName } from './const/classNames';
-import { iconSize, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, MARGIN } from './const/sizes';
-// CSS 변수 값을 가져오는 유틸리티 함수
-const getCSSVariable = (variableName, fallback = '') => {
-    return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() || fallback;
-};
-// 위치 계산 로직
-const calculateOptimalPosition = (triggerElement, tooltipElement) => {
-    const triggerRect = triggerElement.getBoundingClientRect();
-    const tooltipRect = tooltipElement.getBoundingClientRect();
-    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
-    const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-    const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-    const spaces = {
-        top: triggerRect.top,
-        bottom: viewportHeight - triggerRect.bottom,
-        left: triggerRect.left,
-        right: viewportWidth - triggerRect.right,
-    };
-    // 위/아래 공간을 먼저 확인하고 우선순위 결정
-    const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
-    // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
-    const positions = hasTopSpace
-        ? ['top-right', 'top-left', 'bottom-right', 'bottom-left']
-        : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
-    for (const position of positions) {
-        const isTop = position.includes('top');
-        const isRight = position.includes('right');
-        const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
-        const hasHorizontalSpace = isRight
-            ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
-            : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
-        if (hasVerticalSpace && hasHorizontalSpace) {
-            return position;
-        }
-    }
-    // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-    const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
-    return fallbackPosition;
-};
-export class Tag {
-    constructor(options) {
-        this.isTooltipVisible = false;
-        this.calculatedPosition = 'top-right';
-        this.tooltipElement = null;
-        this.handleMouseEnter = () => {
-            if (!this.shouldTruncate())
-                return;
-            this.isTooltipVisible = true;
-            // 위치 계산
-            if (this.tooltipElement) {
-                const optimalPosition = calculateOptimalPosition(this.element, this.tooltipElement);
-                this.calculatedPosition = optimalPosition;
-            }
-            else {
-                // 툴팁이 없으면 더미 요소로 계산
-                const dummyTooltipElement = document.createElement('div');
-                dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
-                dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
-                const optimalPosition = calculateOptimalPosition(this.element, dummyTooltipElement);
-                this.calculatedPosition = optimalPosition;
-            }
-            this.createTooltip();
-        };
-        this.handleMouseLeave = () => {
-            this.removeTooltip(); // removeTooltip에서 isTooltipVisible을 false로 설정
-        };
-        this.options = {
-            size: 'sm',
-            maxLength: 20,
-            ...options,
-        };
-        this.createElement();
-    }
-    createElement() {
-        // 메인 태그 요소 생성
-        this.element = document.createElement('span');
-        this.element.className = this.getTagClasses();
-        // 텍스트 길이 체크 및 말줄임 처리
-        const shouldTruncate = this.shouldTruncate();
-        const displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
-        // 아이콘 추가
-        if (this.options.icon) {
-            const iconElement = this.createSideSlot(this.options.icon);
-            if (iconElement) {
-                this.element.appendChild(iconElement);
-            }
-        }
-        // 텍스트 요소 생성
-        const textElement = document.createElement('span');
-        textElement.className = TAG_CLASS_NAMES.text;
-        textElement.textContent = displayText;
-        this.element.appendChild(textElement);
-        // 카운트 추가
-        if (this.options.count) {
-            const countElement = document.createElement('span');
-            countElement.className = TAG_CLASS_NAMES.count;
-            countElement.textContent = this.options.count;
-            this.element.appendChild(countElement);
-        }
-        // 닫기 버튼 추가
-        if (this.options.close) {
-            const closeButton = this.createCloseButton();
-            this.element.appendChild(closeButton);
-        }
-        // 툴팁 이벤트 리스너 추가 (텍스트가 잘린 경우에만)
-        if (shouldTruncate) {
-            this.element.addEventListener('mouseenter', this.handleMouseEnter);
-            this.element.addEventListener('mouseleave', this.handleMouseLeave);
-        }
-    }
-    getTagClasses() {
-        const classes = [TAG_CLASS_NAMES.tag, getTagSizeClassName(this.options.size)];
-        if (this.shouldTruncate()) {
-            classes.push(TAG_CLASS_NAMES.truncated);
-        }
-        return classes.join(' ');
-    }
-    shouldTruncate() {
-        return this.options.text.length > this.options.maxLength;
-    }
-    getTruncatedText() {
-        return `${this.options.text.slice(0, this.options.maxLength - 2)}...`;
-    }
-    createSideSlot(slot) {
-        if (slot.type === 'icon') {
-            // 아이콘 SVG 문자열을 DOM 요소로 변환 (DOMParser 사용)
-            const iconSVG = this.createIconSVG(slot.icon, iconSize[this.options.size], slot.color);
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(iconSVG, 'image/svg+xml');
-            return doc.documentElement;
-        }
-        if (slot.type === 'dot') {
-            const dotElement = document.createElement('span');
-            dotElement.className = `ncua-dot ncua-dot--neutral ncua-dot--${slot.size || 'sm'}`;
-            if (slot.color) {
-                dotElement.style.backgroundColor = slot.color;
-            }
-            return dotElement;
-        }
-        // 커스텀 요소는 그대로 반환
-        return slot.children;
-    }
-    createIconSVG(iconName, size, color) {
-        const colorStyle = color ? ` style="color: ${color}"` : '';
-        // 현재는 arrow-left 아이콘만 지원
-        if (iconName === 'arrow-left') {
-            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"${colorStyle}>
-        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m0 0 7 7m-7-7 7-7" />
-      </svg>`;
-        }
-        // 기본 빈 SVG
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"${colorStyle}></svg>`;
-    }
-    createCloseButton() {
-        // react와 동일한 구조로 직접 구현
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = TAG_CLASS_NAMES.close;
-        // React 버전과 동일한 SVG 생성 (문자열 방식)
-        const grayColor = getCSSVariable('--gray-300', '#a4a5a8');
-        const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize[this.options.size]}" height="${iconSize[this.options.size]}" fill="none" viewBox="0 0 24 24" stroke="none" style="color: ${grayColor}">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12" />
-    </svg>`;
-        // DOMParser로 SVG 문자열을 DOM 요소로 변환
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(svgString, 'image/svg+xml');
-        const svg = doc.documentElement;
-        button.appendChild(svg);
-        // 이벤트 리스너 추가
-        if (this.options.onButtonClick) {
-            button.addEventListener('click', this.options.onButtonClick);
-        }
-        return button;
-    }
-    createTooltip() {
-        if (this.tooltipElement || !this.isTooltipVisible) {
-            return; // 이미 생성됨 또는 표시하지 않음
-        }
-        this.tooltipElement = document.createElement('span');
-        this.tooltipElement.className = `${TAG_CLASS_NAMES.tooltip} ${getTooltipPositionClassName(this.calculatedPosition)}`;
-        const tooltipContent = document.createElement('span');
-        tooltipContent.className = TAG_CLASS_NAMES.tooltipContent;
-        tooltipContent.textContent = this.options.text;
-        this.tooltipElement.appendChild(tooltipContent);
-        this.element.appendChild(this.tooltipElement);
-    }
-    removeTooltip() {
-        if (this.tooltipElement) {
-            this.element.removeChild(this.tooltipElement);
-            this.tooltipElement = null;
-        }
-        this.isTooltipVisible = false;
-    }
-    getElement() {
-        return this.element;
-    }
-    isTooltipShown() {
-        return this.isTooltipVisible;
-    }
-    setText(text) {
-        this.options.text = text;
-        this.updateTextElement();
-    }
-    setCount(count) {
-        this.options.count = count;
-        this.updateCountElement();
-    }
-    updateTextElement() {
-        const textElement = this.element.querySelector(`.${TAG_CLASS_NAMES.text}`);
-        if (textElement) {
-            const shouldTruncate = this.shouldTruncate();
-            const displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
-            textElement.textContent = displayText;
-            // 클래스 업데이트
-            if (shouldTruncate) {
-                this.element.classList.add(TAG_CLASS_NAMES.truncated);
-            }
-            else {
-                this.element.classList.remove(TAG_CLASS_NAMES.truncated);
-            }
-        }
-    }
-    updateCountElement() {
-        const existingCount = this.element.querySelector(`.${TAG_CLASS_NAMES.count}`);
-        if (this.options.count) {
-            if (existingCount) {
-                existingCount.textContent = this.options.count;
-            }
-            else {
-                // 카운트 요소 새로 생성
-                const countElement = document.createElement('span');
-                countElement.className = TAG_CLASS_NAMES.count;
-                countElement.textContent = this.options.count;
-                // 닫기 버튼 앞에 삽입
-                const closeButton = this.element.querySelector(`.${TAG_CLASS_NAMES.close}`);
-                if (closeButton) {
-                    this.element.insertBefore(countElement, closeButton);
-                }
-                else {
-                    this.element.appendChild(countElement);
-                }
-            }
-        }
-        else {
-            // 카운트 제거
-            if (existingCount) {
-                this.element.removeChild(existingCount);
-            }
-        }
-    }
-    destroy() {
-        this.element.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.element.removeEventListener('mouseleave', this.handleMouseLeave);
-        if (this.tooltipElement) {
-            this.removeTooltip();
-        }
-    }
-}

package/dist/temp/assets/scripts/tag/const/classNames.d.ts

@@ -1,11 +0,0 @@
-export declare const TAG_CLASS_NAMES: {
-    tag: string;
-    text: string;
-    count: string;
-    close: string;
-    tooltip: string;
-    tooltipContent: string;
-    truncated: string;
-};
-export declare const getTagSizeClassName: (size: string) => string;
-export declare const getTooltipPositionClassName: (position: string) => string;

package/dist/temp/assets/scripts/tag/const/classNames.js

@@ -1,12 +0,0 @@
-// Tag 관련 CSS 클래스명 상수
-export const TAG_CLASS_NAMES = {
-    tag: 'ncua-tag',
-    text: 'ncua-tag__text',
-    count: 'ncua-tag__count',
-    close: 'ncua-tag__close',
-    tooltip: 'ncua-tag__tooltip',
-    tooltipContent: 'ncua-tag__tooltip-content',
-    truncated: 'ncua-tag--truncated',
-};
-export const getTagSizeClassName = (size) => `ncua-tag--${size}`;
-export const getTooltipPositionClassName = (position) => `ncua-tag__tooltip--${position}`;

package/dist/temp/assets/scripts/tag/const/index.d.ts

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

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

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

package/dist/temp/assets/scripts/tag/const/sizes.d.ts

@@ -1,7 +0,0 @@
-export declare const iconSize: {
-    readonly sm: 14;
-    readonly md: 16;
-};
-export declare const MARGIN = 10;
-export declare const DEFAULT_TOOLTIP_WIDTH = 200;
-export declare const DEFAULT_TOOLTIP_HEIGHT = 60;

package/dist/temp/assets/scripts/tag/const/sizes.js

@@ -1,7 +0,0 @@
-export const iconSize = {
-    sm: 14,
-    md: 16,
-};
-export const MARGIN = 10;
-export const DEFAULT_TOOLTIP_WIDTH = 200;
-export const DEFAULT_TOOLTIP_HEIGHT = 60;

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

@@ -1,33 +0,0 @@
-import { CalculatedPosition } from '../../../../src/components/tag/Tag';
-export type TagSize = 'sm' | 'md';
-export type { CalculatedPosition };
-export interface SideSlotIcon {
-    type: 'icon';
-    icon: string;
-    color?: string;
-}
-export interface SideSlotDot {
-    type: 'dot';
-    color?: string;
-    size?: 'sm' | 'md';
-}
-export interface SideSlotCustom {
-    type: 'custom';
-    children: HTMLElement;
-}
-export type SideSlotType = SideSlotIcon | SideSlotDot | SideSlotCustom;
-export interface BaseTagOptions {
-    size?: TagSize;
-    icon?: SideSlotType;
-    text: string;
-    count?: string;
-    close?: boolean;
-    onButtonClick?: (event: MouseEvent) => void;
-    maxLength?: number;
-}
-export interface RequiredTagProps extends Required<Pick<BaseTagOptions, 'text' | 'size' | 'maxLength'>> {
-    icon?: SideSlotType;
-    count?: string;
-    close?: boolean;
-    onButtonClick?: (event: MouseEvent) => void;
-}

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

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

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

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

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

@@ -1,9 +0,0 @@
-import { Tag } from './Tag';
-export { Tag } from './Tag';
-export * from './const/types';
-export * from './const/classNames';
-// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
-if (typeof window !== 'undefined') {
-    window.ncua = window.ncua || {};
-    window.ncua.Tag = Tag;
-}

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

@@ -1,54 +0,0 @@
-import { TooltipOptions } from './const';
-/**
- * Tooltip 클래스
- * 툴팁 패널 패턴을 사용하여 툴팁을 생성합니다.
- * 툴팁 패널 패턴은 바깥 컨테이너(항상 pointer-events:none) + 실제 패널(클릭 허용) 패턴을 사용합니다.
- * 레이어 1개 아래에 여러개의 패널과 툴팁이 생성되어 화면에 삽입됩니다.
- * 자동 위치조정 ( 공간이 부족하다면 상하좌우를 조절하는 기능 - 기본값: top )을 사용합니다.
- * Shadow DOM 지원
- */
-export declare class Tooltip {
-    private element;
-    private iconElement;
-    private layerManager;
-    private panelId;
-    private panel;
-    private calculatedPosition;
-    private isVisible;
-    private isMeasuring;
-    private isForceHidden;
-    private options;
-    private boundMouseEnter;
-    private boundMouseLeave;
-    private boundResizeScroll;
-    private boundPanelClick;
-    constructor(options?: TooltipOptions);
-    private createElement;
-    private buildAnchorClassName;
-    private buildPanelClassName;
-    private renderContentHTML;
-    private renderCloseButtonHTML;
-    /** 전역 레이어에 패널 생성 */
-    private createLayerAndPanel;
-    private setupShadowContent;
-    private bindEvents;
-    private enableMouseEvents;
-    private disableMouseEvents;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleResizeScroll;
-    private handlePanelClick;
-    showTooltip(): void;
-    hideTooltip(): void;
-    private updateTooltipPosition;
-    private updatePanelClass;
-    getElement(): HTMLElement;
-    updateOptions(newOptions: Partial<TooltipOptions>): void;
-    destroy(): void;
-    static create(options?: TooltipOptions): Tooltip;
-    static createShort(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
-    static createLong(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
-    static createAuto(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
-    static createAutoLong(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
-    static createAutoLongWithShadowDOM(title: string, content: string, options?: Partial<TooltipOptions>): Tooltip;
-}