@ncds/ui-admin 1.8.1 → 1.8.2

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

@@ -1,363 +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() {
-    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '일치하는 결과가 없습니다.';
-    const noResults = document.createElement('li');
-    noResults.className = 'ncua-select-dropdown__no-results';
-    noResults.textContent = text;
-    return noResults;
-  }
-  /**
-   * 옵션 리스트 효율적 업데이트 (Differential Rendering)
-   */
-  updateOptionsList(container, newOptions, config) {
-    let showNoResults = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 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) {
-    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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;
-      }
-    }
-  }
-}

package/dist/esm/assets/scripts/utils/unifiedBox/dropdownModel.js

@@ -1,279 +0,0 @@
-class DropdownModel {
-  constructor(initialOptions) {
-    let multiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    let filterStrategy = arguments.length > 2 ? arguments[2] : undefined;
-    this.listeners = [];
-    this.multiple = multiple;
-    this.filterStrategy = filterStrategy ?? DropdownModel.defaultFilterStrategy;
-    this.state = {
-      isOpen: false,
-      focusedIndex: -1,
-      selectedValues: [],
-      searchValue: '',
-      showAllItems: false,
-      options: [...initialOptions],
-      filteredOptions: this.filterStrategy([...initialOptions], '', false)
-    };
-  }
-  /**
-   * 상태 변경 리스너 등록
-   */
-  addListener(listener) {
-    this.listeners.push(listener);
-  }
-  /**
-   * 상태 변경 리스너 제거
-   */
-  removeListener(listener) {
-    const index = this.listeners.indexOf(listener);
-    if (index > -1) {
-      this.listeners.splice(index, 1);
-    }
-  }
-  /**
-   * 상태 변경 알림
-   */
-  notifyListeners(changedFields) {
-    this.listeners.forEach(listener => {
-      listener.onStateChange({
-        ...this.state
-      }, changedFields);
-    });
-  }
-  /**
-   * 드롭다운 열기/닫기
-   */
-  setOpen(isOpen) {
-    if (this.state.isOpen !== isOpen) {
-      this.state.isOpen = isOpen;
-      if (!isOpen) {
-        this.state.focusedIndex = -1;
-        this.state.showAllItems = false;
-      }
-      this.notifyListeners(['isOpen', 'focusedIndex', 'showAllItems']);
-    }
-  }
-  /**
-   * 포커스 인덱스 설정
-   */
-  setFocusedIndex(index) {
-    const maxIndex = this.state.filteredOptions.length - 1;
-    const clampedIndex = Math.max(-1, Math.min(index, maxIndex));
-    if (this.state.focusedIndex !== clampedIndex) {
-      this.state.focusedIndex = clampedIndex;
-      this.notifyListeners(['focusedIndex']);
-    }
-  }
-  /**
-   * 검색어 설정 및 필터링
-   */
-  setSearchValue(searchValue) {
-    if (this.state.searchValue !== searchValue) {
-      this.state.searchValue = searchValue;
-      this.updateFilteredOptions();
-      this.notifyListeners(['searchValue', 'filteredOptions']);
-    }
-  }
-  /**
-   * 전체 보기 토글
-   */
-  setShowAllItems(showAll) {
-    if (this.state.showAllItems !== showAll) {
-      this.state.showAllItems = showAll;
-      this.updateFilteredOptions();
-      this.notifyListeners(['showAllItems', 'filteredOptions']);
-    }
-  }
-  /**
-   * 선택된 값들을 직접 설정 (protected)
-   */
-  setSelectedValues(values) {
-    this.state.selectedValues = [...values];
-    this.notifyListeners(['selectedValues']);
-  }
-  /**
-   * 옵션 선택/해제
-   */
-  toggleOption(optionId) {
-    const currentValues = [...this.state.selectedValues];
-    if (this.multiple) {
-      const index = currentValues.indexOf(optionId);
-      if (index > -1) {
-        currentValues.splice(index, 1);
-      } else {
-        currentValues.push(optionId);
-      }
-    } else {
-      currentValues.length = 0;
-      currentValues.push(optionId);
-    }
-    this.state.selectedValues = currentValues;
-    this.notifyListeners(['selectedValues']);
-  }
-  /**
-   * 옵션 업데이트
-   */
-  updateOptions(newOptions) {
-    // 현재 상태 저장
-    const wasOpen = this.state.isOpen;
-    const wasShowAllItems = this.state.showAllItems;
-    this.state.options = [...newOptions];
-    this.state.selectedValues = this.state.selectedValues.filter(value => newOptions.some(opt => opt.id === value));
-    // 드롭다운이 열려있었다면 상태 유지
-    if (wasOpen) {
-      this.state.isOpen = true;
-      this.state.showAllItems = wasShowAllItems;
-    }
-    this.updateFilteredOptions();
-    this.notifyListeners(['options', 'selectedValues', 'filteredOptions', 'isOpen', 'showAllItems']);
-  }
-  /**
-   * 필터링된 옵션 업데이트
-   */
-  updateFilteredOptions() {
-    this.state.filteredOptions = this.filterStrategy(this.state.options, this.state.searchValue, this.state.showAllItems);
-  }
-  /**
-   * 현재 상태 반환 (읽기 전용)
-   */
-  getState() {
-    return {
-      ...this.state
-    };
-  }
-  /**
-   * 다중 선택 모드 여부 반환
-   */
-  isMultiple() {
-    return this.multiple;
-  }
-  /**
-   * 선택된 옵션들 반환
-   */
-  getSelectedOptions() {
-    return this.state.options.filter(opt => this.state.selectedValues.includes(opt.id));
-  }
-  /**
-   * 옵션이 선택되었는지 확인
-   */
-  isOptionSelected(optionId) {
-    return this.state.selectedValues.includes(optionId);
-  }
-  /**
-   * 상태 리셋
-   */
-  reset() {
-    this.state.isOpen = false;
-    this.state.focusedIndex = -1;
-    this.state.selectedValues = [];
-    this.state.searchValue = '';
-    this.state.showAllItems = false;
-    this.state.filteredOptions = [];
-    this.notifyListeners(['isOpen', 'focusedIndex', 'selectedValues', 'searchValue', 'showAllItems', 'filteredOptions']);
-  }
-  /**
-   * 전체 선택/해제 토글 (MultiSelectUtils에서 이동)
-   */
-  toggleSelectAll() {
-    if (!this.multiple) return;
-    const availableOptions = this.state.options.filter(opt => !opt.disabled);
-    const allSelected = this.state.selectedValues.length === availableOptions.length;
-    let newValue;
-    if (allSelected) {
-      newValue = [];
-    } else {
-      newValue = availableOptions.map(opt => opt.id);
-    }
-    this.state.selectedValues = newValue;
-    this.notifyListeners(['selectedValues']);
-  }
-  /**
-   * 전체 선택 버튼 텍스트 반환 (MultiSelectUtils에서 이동)
-   */
-  getSelectAllButtonText() {
-    if (!this.multiple) return '전체 선택';
-    return this.isAllItemsSelected() ? '전체 해제' : '전체 선택';
-  }
-  /**
-   * 모든 항목이 선택되었는지 확인 (MultiSelectUtils에서 이동)
-   */
-  isAllItemsSelected() {
-    if (!this.multiple) return false;
-    const availableOptions = this.state.options.filter(opt => !opt.disabled);
-    if (availableOptions.length === 0) return false;
-    const availableIds = availableOptions.map(opt => opt.id);
-    return availableIds.length > 0 && availableIds.every(id => this.state.selectedValues.includes(id));
-  }
-  /**
-   * 검색 및 필터링 업데이트 (SearchFilterUtils에서 이동)
-   */
-  updateSearchAndFilter(searchValue) {
-    let showAllItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    this.state.searchValue = searchValue;
-    this.state.showAllItems = showAllItems;
-    this.updateFilteredOptions();
-    this.notifyListeners(['searchValue', 'filteredOptions', 'showAllItems']);
-  }
-  /**
-   * 검색어만 업데이트 (필터링 없이, API 모드용)
-   */
-  updateSearchValue(searchValue) {
-    this.state.searchValue = searchValue;
-    this.notifyListeners(['searchValue']);
-  }
-  /**
-   * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
-   */
-  canOpenDropdown() {
-    return this.state.showAllItems || this.state.searchValue.trim().length > 0;
-  }
-  /**
-   * 검색 결과가 없는지 확인
-   */
-  hasNoResults() {
-    return this.state.filteredOptions.length === 0 && (this.state.showAllItems || Boolean(this.state.searchValue));
-  }
-  /**
-   * 값 설정 (API 호환성)
-   */
-  setValue(value) {
-    const values = Array.isArray(value) ? value : [value];
-    this.setSelectedValues(values);
-  }
-  /**
-   * 값 가져오기 (API 호환성)
-   */
-  getValue() {
-    return this.multiple ? this.state.selectedValues : this.state.selectedValues[0] || '';
-  }
-  /**
-   * 입력 초기화 (ComboBox용)
-   */
-  clearInput() {
-    this.updateSearchAndFilter('');
-  }
-  /**
-   * 디버그 정보 (개발용)
-   */
-  getDebugInfo() {
-    return {
-      state: this.state,
-      multiple: this.multiple,
-      listeners: this.listeners.length
-    };
-  }
-}
-/** SelectBox 기본 전략: 항상 모든 옵션 표시 */
-DropdownModel.defaultFilterStrategy = options => [...options];
-/** ComboBox 전략: 검색어/전체보기 기반 필터링 */
-DropdownModel.comboBoxFilterStrategy = (options, searchValue, showAllItems) => {
-  if (!showAllItems && !searchValue) {
-    return [];
-  }
-  if (searchValue) {
-    const searchLower = searchValue.toLowerCase();
-    return options.filter(option => option.label.toLowerCase().includes(searchLower));
-  }
-  return [...options];
-};
-export { DropdownModel };