@ncds/ui-admin 1.8.1 → 1.8.2

package/dist/esm/assets/scripts/progress-bar/ProgressBar.js

@@ -1,264 +0,0 @@
-/**
- * ProgressBar 클래스
- * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
- */
-/**
- * 값을 0-100 범위로 제한
- */
-function clampValue(value) {
-  return Math.min(Math.max(0, value), 100);
-}
-/**
- * 색상 이름을 fill 색상 클래스명으로 변환
- */
-function getFillColorClass(color) {
-  if (!color) return '';
-  const normalizedColor = color.toLowerCase().trim();
-  return `ncua-progress-bar__fill--color-${normalizedColor}`;
-}
-/**
- * 색상 이름을 label 색상 클래스명으로 변환
- */
-function getLabelColorClass(color) {
-  if (!color) return '';
-  const normalizedColor = color.toLowerCase().trim();
-  return `ncua-progress-bar__label--color-${normalizedColor}`;
-}
-/**
- * ProgressBar 클래스
- */
-export class ProgressBar {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this.element = null;
-    this.options = {
-      showZeroLabel: false,
-      valueToPercent: true,
-      ...options
-    };
-  }
-  /**
-   * segments 처리 로직
-   */
-  processSegments() {
-    const {
-      segments,
-      label,
-      valueToPercent
-    } = this.options;
-    const hasSegments = Boolean(segments && segments.length > 0);
-    const segmentCount = segments?.length ?? 0;
-    if (hasSegments) {
-      // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
-      const shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
-      let segmentsToProcess = segments;
-      // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
-      if (shouldApplyValueToPercent) {
-        // 원본 값들의 합계 계산
-        const originalTotal = segmentsToProcess.reduce((sum, seg) => sum + seg.value, 0);
-        if (originalTotal > 0) {
-          // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
-          segmentsToProcess = segmentsToProcess.map(segment => ({
-            value: segment.value / originalTotal * 100,
-            color: segment.color
-          }));
-        }
-      }
-      // 각 값 제한 (0-100 범위)
-      const limitedSegments = segmentsToProcess.map(segment => ({
-        value: clampValue(segment.value),
-        color: segment.color
-      }));
-      // 전체 합계 계산
-      const actualTotal = limitedSegments.reduce((sum, seg) => sum + seg.value, 0);
-      const total = Math.min(actualTotal, 100);
-      // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
-      const processed = limitedSegments.map(segment => ({
-        ...segment,
-        width: actualTotal > 0 ? segment.value / actualTotal * total : 0
-      }));
-      // segment의 개수가 2이상일때는 bottom 라벨로 고정
-      const effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
-      // floating label 스타일
-      const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
-        '--progress-value': `${total}%`
-      } : undefined;
-      return {
-        totalValue: total,
-        displayValue: `${total.toFixed(0)}%`,
-        processedSegments: processed,
-        effectiveLabel,
-        progressValueStyle
-      };
-    }
-    // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
-    if (this.options.value !== undefined) {
-      const clamped = clampValue(this.options.value);
-      const effectiveLabel = label;
-      const progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float' ? {
-        '--progress-value': `${clamped}%`
-      } : undefined;
-      return {
-        totalValue: clamped,
-        displayValue: `${clamped.toFixed(0)}%`,
-        processedSegments: [],
-        effectiveLabel,
-        progressValueStyle
-      };
-    }
-    return {
-      totalValue: 0,
-      displayValue: '0%',
-      processedSegments: [],
-      effectiveLabel: label,
-      progressValueStyle: undefined
-    };
-  }
-  /**
-   * 단일 라벨 HTML 생성
-   */
-  renderSingleLabel(labelType, displayValue, totalValue) {
-    // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
-    if (totalValue === 0 && !this.options.showZeroLabel) {
-      return '';
-    }
-    return `<span class="ncua-progress-bar__label ncua-progress-bar__label-${labelType}">${displayValue}</span>`;
-  }
-  /**
-   * segments 라벨 HTML 생성
-   */
-  renderSegmentLabels(segments, segmentCount) {
-    if (segmentCount < 2) return '';
-    const labels = [];
-    segments.forEach((segment, index) => {
-      // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
-      if (segment.value === 0 && !this.options.showZeroLabel) {
-        return;
-      }
-      let leftPosition = 0;
-      for (let i = 0; i < index; i++) {
-        leftPosition += segments[i].width;
-      }
-      // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
-      // 그 외에는 중앙에 정렬
-      const isZero = segment.value === 0;
-      // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
-      const labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
-      const transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
-      const colorClass = getLabelColorClass(segment.color);
-      labels.push(`<span class="ncua-progress-bar__label ncua-progress-bar__label--segment ${colorClass}" style="left: ${labelPosition}%; transform: ${transform};">${segment.value.toFixed(0)}%</span>`);
-    });
-    return labels.length > 0 ? `<div class="ncua-progress-bar__labels--multiple">${labels.join('')}</div>` : '';
-  }
-  /**
-   * segment bar HTML 생성
-   */
-  renderSegmentBar(segments) {
-    const fills = [];
-    segments.forEach((segment, index) => {
-      const classes = ['ncua-progress-bar__fill', index === 0 ? 'ncua-progress-bar__fill--first' : '', index === segments.length - 1 ? 'ncua-progress-bar__fill--last' : '', getFillColorClass(segment.color)].filter(Boolean).join(' ');
-      fills.push(`<div class="${classes}" style="width: ${segment.width}%;"></div>`);
-    });
-    return fills.join('');
-  }
-  /**
-   * HTML 문자열 생성
-   */
-  toHTML() {
-    const {
-      totalValue,
-      displayValue,
-      processedSegments,
-      effectiveLabel,
-      progressValueStyle
-    } = this.processSegments();
-    const hasSegments = Boolean(this.options.segments && this.options.segments.length > 0);
-    const segmentCount = this.options.segments?.length ?? 0;
-    const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
-    // 스타일 문자열 생성
-    const styleString = progressValueStyle ? `style="${Object.entries(progressValueStyle).map(_ref => {
-      let [key, value] = _ref;
-      return `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`;
-    }).join('; ')}"` : '';
-    // segment가 1개이거나 value만 있을 때는 동일하게 처리 (단일 progress bar)
-    const isSingleBar = segmentCount < 2; // segment가 0개 또는 1개일 때
-    if (isSingleBar) {
-      const fillColorClass = hasSegments && segmentCount === 1 ? getFillColorClass(processedSegments[0].color) : '';
-      const floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
-      const rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
-      const bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
-      // 단일 progress bar일 때는 text-align: left를 위한 클래스 추가
-      const singleSegmentClass = 'ncua-progress-bar--single-segment';
-      return `<div class="ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''} ${singleSegmentClass}" ${styleString}>
-  ${floatingLabel}
-  <div class="ncua-progress-bar__content">
-    <div class="ncua-progress-bar__bar">
-      <div class="ncua-progress-bar__fill ${fillColorClass}" style="width: ${totalValue}%;" aria-valuenow="${totalValue}" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    ${rightLabel}
-  </div>
-  ${bottomLabel}
-</div>`;
-    }
-    // 일반 케이스
-    const floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
-    const rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
-    const bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
-    const segmentLabels = hasSegments && segmentCount >= 2 ? this.renderSegmentLabels(processedSegments, segmentCount) : '';
-    const segmentBar = hasSegments ? this.renderSegmentBar(processedSegments) : `<div class="ncua-progress-bar__fill" style="width: ${totalValue}%;" aria-valuenow="${totalValue}" aria-valuemin="0" aria-valuemax="100"></div>`;
-    const segmentsClass = hasSegments ? 'ncua-progress-bar__bar--segments' : '';
-    return `<div class="ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}" ${styleString}>
-  ${floatingLabel}
-  <div class="ncua-progress-bar__content">
-    <div class="ncua-progress-bar__bar ${segmentsClass}">
-      ${segmentBar}
-    </div>
-    ${rightLabel}
-  </div>
-  ${hasSegments && segmentCount >= 2 ? segmentLabels : bottomLabel}
-</div>`;
-  }
-  /**
-   * DOM 요소 생성
-   */
-  toElement() {
-    const div = document.createElement('div');
-    div.innerHTML = this.toHTML();
-    this.element = div.firstElementChild;
-    return this.element;
-  }
-  /**
-   * 요소 반환
-   */
-  getElement() {
-    return this.toElement();
-  }
-  /**
-   * 옵션 업데이트
-   */
-  updateOptions(newOptions) {
-    this.options = {
-      ...this.options,
-      ...newOptions
-    };
-    if (this.element) {
-      const newElement = this.toElement();
-      if (this.element.parentNode) {
-        this.element.parentNode.replaceChild(newElement, this.element);
-      }
-      this.element = newElement;
-    }
-  }
-  /**
-   * Static factory method
-   */
-  static create(options) {
-    return new ProgressBar(options);
-  }
-  /**
-   * Static method: HTML 문자열 생성
-   */
-  static toHTML(options) {
-    return new ProgressBar(options).toHTML();
-  }
-}

package/dist/esm/assets/scripts/progress-bar/index.js

@@ -1 +0,0 @@
-export { ProgressBar } from './ProgressBar';

package/dist/esm/assets/scripts/selectBox.js

@@ -1,162 +0,0 @@
-import { BaseBox } from './baseBox';
-import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
-export class SelectBox extends BaseBox {
-  get defaultPlaceholder() {
-    return '선택하세요';
-  }
-  constructor(element) {
-    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    super(element);
-    // HTML에서 옵션 파싱 (config.options가 없을 경우)
-    const htmlOptions = this.parseOptionsFromHTML();
-    // JavaScript 옵션을 DropdownOption 형식으로 변환
-    const normalizedOptions = config.options ? this.normalizeOptions(config.options) : htmlOptions;
-    const finalOptions = normalizedOptions;
-    // HTML에서 속성 파싱
-    const htmlAttributes = this.parseAttributesFromHTML();
-    // 기존 API를 새 API로 변환
-    const unifiedConfig = {
-      ...config,
-      type: 'selectbox',
-      multiple: config.multiple ?? false,
-      showFooterButtons: config.showFooterButtons ?? false,
-      onEdit: config.onEdit,
-      onSelectAll: config.onSelectAll,
-      onComplete: config.onComplete,
-      options: finalOptions,
-      placeholder: config.placeholder || htmlAttributes.placeholder || this.defaultPlaceholder,
-      value: config.value ?? htmlAttributes.value ?? (config.multiple ? [] : ''),
-      disabled: config.disabled ?? htmlAttributes.disabled ?? false,
-      size: config.size || htmlAttributes.size || 'md',
-      onChange: value => {
-        // 초기화 중에는 동기화하지 않음 (무한 루프 방지)
-        if (this.isInitializing) {
-          this.lastValue = value; // 초기값 저장
-          return;
-        }
-        // 값이 실제로 변경되지 않았으면 동기화 생략 (무한 루프 방지)
-        if (JSON.stringify(this.lastValue) === JSON.stringify(value)) {
-          return;
-        }
-        this.lastValue = value; // 새 값 저장
-        // 타겟 select와 동기화
-        if (config.multiple) {
-          this.syncWithTargetSelectMultiple(value);
-        } else {
-          this.syncWithTargetSelect(value);
-        }
-        // onChange 콜백에는 실제 value를 전달
-        const realValue = config.multiple ? value.map(v => this.getRealValueFromId(v)) : this.getRealValueFromId(value);
-        config.onChange?.(realValue);
-      }
-    };
-    this.unifiedSelectBox = new UnifiedBoxManager(element, unifiedConfig);
-    this.completeInitialization();
-  }
-  /**
-   * JavaScript 옵션을 DropdownOption 형식으로 변환
-   */
-  normalizeOptions(options) {
-    return options.map(option => {
-      // 이미 DropdownOption 형식인 경우
-      if ('label' in option) {
-        return option;
-      }
-      // SelectBoxOptionType 형식인 경우 (text -> label 변환)
-      const selectBoxOption = option;
-      return {
-        id: selectBoxOption.id,
-        label: selectBoxOption.text,
-        disabled: selectBoxOption.disabled
-      };
-    });
-  }
-  /**
-   * HTML select에서 옵션 파싱
-   */
-  parseOptionsFromHTML() {
-    if (!this.targetSelect) return [];
-    const options = [];
-    const optionElements = this.targetSelect.querySelectorAll('option');
-    // 빈 값 옵션 개수 확인 (최적화를 위해)
-    const emptyValueCount = Array.from(optionElements).filter(opt => opt.value === '').length;
-    optionElements.forEach((optionElement, index) => {
-      const optionValue = optionElement.value;
-      // 빈 값 옵션이 1개뿐이면 단순 처리, 여러 개면 고유 ID 생성
-      let optionId;
-      if (optionValue !== '') {
-        optionId = optionValue;
-      } else if (emptyValueCount === 1) {
-        // 빈 값 옵션이 하나뿐이면 그냥 빈 문자열 사용 (단순화)
-        optionId = '';
-      } else {
-        // 빈 값 옵션이 여러 개면 고유 ID 생성 (구분 필요)
-        optionId = `__empty_option_${index}`;
-      }
-      options.push({
-        id: optionId,
-        label: optionElement.textContent || optionElement.value || this.defaultPlaceholder,
-        disabled: optionElement.disabled,
-        // 원본 value 저장 (동기화를 위해)
-        originalValue: optionValue
-      });
-    });
-    return options;
-  }
-  /**
-   * 값 변환 - originalValue 매핑
-   */
-  resolveValue(value) {
-    return this.getRealValueFromId(value);
-  }
-  /**
-   * ID로부터 실제 HTML select의 value 값을 가져오기
-   */
-  getRealValueFromId(id) {
-    const options = this.unifiedSelectBox.getOptions();
-    const option = options.find(opt => opt.id === id);
-    // originalValue가 있으면 그것을 사용, 없으면 id를 문자열로 변환
-    return option?.originalValue !== undefined ? option.originalValue : String(id);
-  }
-  /**
-   * 실제 HTML select의 value 값으로부터 내부 ID를 가져오기
-   */
-  getIdFromRealValue(value) {
-    const options = this.unifiedSelectBox.getOptions();
-    const option = options.find(opt => opt.originalValue === String(value));
-    // originalValue가 일치하는 옵션을 찾으면 그 ID를 반환, 없으면 value 그대로 반환
-    return option ? option.id : value;
-  }
-  // SelectBox 고유 API
-  getValues() {
-    const internalValue = this.unifiedSelectBox.getValues();
-    return internalValue.map(option => ({
-      ...option,
-      id: this.getRealValueFromId(option.id)
-    }));
-  }
-  setValues(value) {
-    const internalValue = value.map(v => this.getIdFromRealValue(v.id));
-    if (JSON.stringify(this.lastValue) === JSON.stringify(internalValue)) {
-      return;
-    }
-    this.lastValue = internalValue;
-    // id 배열을 옵션 객체 배열로 변환
-    const allOptions = this.unifiedSelectBox.getOptions();
-    const optionArray = internalValue.map(id => allOptions.find(opt => opt.id === id)).filter(opt => opt !== undefined);
-    this.unifiedSelectBox.setValues(optionArray);
-    // setValues 호출 시에도 타겟 select와 동기화
-    if (this.targetSelect) {
-      if (this.unifiedSelectBox.isMultiple()) {
-        this.syncWithTargetSelectMultiple(internalValue);
-      } else {
-        // 단일 선택 모드인 경우 첫 번째 값만 사용
-        this.syncWithTargetSelect(internalValue[0] || '');
-      }
-    }
-  }
-  getSelectedCount() {
-    const values = this.getValues();
-    return values.length;
-  }
-}

package/dist/esm/assets/scripts/shared/ButtonCloseX.js

@@ -1,37 +0,0 @@
-// 공통 X버튼 로직 (React ButtonCloseX 컴포넌트와 동일한 구조)
-// React ButtonCloseX와 동일한 SVG 사이즈 매핑
-export const SVG_SIZE = {
-  xs: 16,
-  sm: 20,
-  md: 20,
-  lg: 24
-};
-// X버튼 SVG 아이콘
-export const X_CLOSE_SVG = size => `<svg width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-  </svg>`;
-// X버튼 렌더링 유틸리티 (React ButtonCloseX와 동일한 인터페이스)
-export function ButtonCloseX(size) {
-  let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
-  let additionalClasses = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  let ariaLabel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '닫기';
-  let onClick = arguments.length > 4 ? arguments[4] : undefined;
-  const svgSize = SVG_SIZE[size];
-  const buttonId = `close-btn-${Math.random().toString(36).substr(2, 9)}`;
-  const buttonHTML = `
-    <button type="button" id="${buttonId}" class="ncua-button-close-x ncua-button-close-x--${size} ncua-button-close-x--${theme} ${additionalClasses}" aria-label="${ariaLabel}">
-      ${X_CLOSE_SVG(svgSize.toString())}
-    </button>
-  `;
-  // onClick이 제공된 경우 이벤트 바인딩
-  if (onClick) {
-    // DOM에 추가된 후 이벤트 바인딩을 위해 setTimeout 사용
-    setTimeout(() => {
-      const button = document.getElementById(buttonId);
-      if (button) {
-        button.addEventListener('click', onClick);
-      }
-    }, 0);
-  }
-  return buttonHTML;
-}

package/dist/esm/assets/scripts/tab.js

@@ -1,33 +0,0 @@
-import { Swiper } from 'swiper';
-export class Tab {
-  constructor(element) {
-    this.swiper = null;
-    if (!element) {
-      throw new Error('Tab element is required');
-    }
-    if (!(element instanceof HTMLElement)) {
-      throw new Error('Invalid element type provided to Tab');
-    }
-    this.element = element;
-    this.init();
-  }
-  init() {
-    this.swiper = new Swiper(this.element, {
-      slidesPerView: 'auto',
-      spaceBetween: 8,
-      grabCursor: true,
-      loop: false,
-      freeMode: {
-        enabled: true,
-        sticky: false
-      },
-      mousewheel: true
-    });
-  }
-  destroy() {
-    if (this.swiper) {
-      this.swiper.destroy();
-      this.swiper = null;
-    }
-  }
-}