@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/src/utils/dropdown/dropdownUtils.js

@@ -1,80 +1,80 @@
 /**
  * 드롭다운 위치를 계산하는 유틸리티 함수
  */
-export var calculateDropdownPosition = function (_a) {
-  var triggerRef = _a.triggerRef,
-    maxHeight = _a.maxHeight,
-    itemCount = _a.itemCount,
-    _b = _a.itemHeight,
-    itemHeight = _b === void 0 ? 40 : _b,
-    _c = _a.offset,
-    offset = _c === void 0 ? 20 : _c;
-  if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+export const calculateDropdownPosition = _ref => {
+  let {
+    triggerRef,
+    maxHeight,
+    itemCount,
+    itemHeight = 40,
+    offset = 20
+  } = _ref;
+  if (!triggerRef?.current) {
     return {
       direction: 'down',
-      maxHeight: maxHeight
+      maxHeight
     };
   }
-  var rect = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.getBoundingClientRect();
-  var viewportHeight = window.innerHeight;
-  var dropdownHeight = Math.min(maxHeight, itemCount * itemHeight);
+  const rect = triggerRef?.current.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const dropdownHeight = Math.min(maxHeight, itemCount * itemHeight);
   // 아래쪽 공간이 충분한지 확인
-  var spaceBelow = viewportHeight - rect.bottom;
+  const spaceBelow = viewportHeight - rect.bottom;
   if (spaceBelow < dropdownHeight + offset) {
     return {
       direction: 'up',
-      maxHeight: maxHeight
-    };
-  } else {
-    return {
-      direction: 'down',
-      maxHeight: maxHeight
+      maxHeight
     };
   }
+  return {
+    direction: 'down',
+    maxHeight
+  };
 };
 /**
  * 키보드 네비게이션을 위한 포커스 인덱스 계산
  */
-export var calculateNextFocusIndex = function (currentIndex, direction, validOptionsLength) {
+export const calculateNextFocusIndex = (currentIndex, direction, validOptionsLength) => {
   if (validOptionsLength === 0) return -1;
   if (direction === 'down') {
     return currentIndex < validOptionsLength - 1 ? currentIndex + 1 : 0;
-  } else {
-    return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
   }
+  return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
 };
 /**
  * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
  */
-export var adjustDropdownPosition = function (dropdownElement, triggerElement) {
-  var dropdownRect = dropdownElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth;
-  var viewportHeight = window.innerHeight;
+export const adjustDropdownPosition = dropdownElement => {
+  const dropdownRect = dropdownElement.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
   // 좌우 위치 조정
   if (dropdownRect.right > viewportWidth) {
-    var overflow = dropdownRect.right - viewportWidth;
-    dropdownElement.style.left = "".concat(-overflow - 10, "px");
+    const overflow = dropdownRect.right - viewportWidth;
+    dropdownElement.style.left = `${-overflow - 10}px`;
   }
   if (dropdownRect.left < 0) {
     dropdownElement.style.left = '10px';
   }
   // 상하 위치 조정 (이미 up/down 방향이 결정된 후 미세 조정)
   if (dropdownRect.bottom > viewportHeight) {
-    var overflow = dropdownRect.bottom - viewportHeight;
-    dropdownElement.style.maxHeight = "".concat(dropdownRect.height - overflow - 10, "px");
+    const overflow = dropdownRect.bottom - viewportHeight;
+    dropdownElement.style.maxHeight = `${dropdownRect.height - overflow - 10}px`;
   }
 };
 /**
  * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
  */
-export var findScrollableParent = function (element, boundary) {
-  var current = element;
+export const findScrollableParent = (element, boundary) => {
+  let current = element;
   while (current && current !== boundary && current !== document.body) {
-    var style = window.getComputedStyle(current);
-    var overflowY = style.overflowY;
+    const style = window.getComputedStyle(current);
+    const overflowY = style.overflowY;
     if (overflowY === 'scroll' || overflowY === 'auto') {
-      var scrollHeight = current.scrollHeight,
-        clientHeight = current.clientHeight;
+      const {
+        scrollHeight,
+        clientHeight
+      } = current;
       if (scrollHeight > clientHeight) {
         return current;
       }
@@ -83,11 +83,13 @@ export var findScrollableParent = function (element, boundary) {
   }
   // boundary 자체가 스크롤 가능한지 확인
   if (current === boundary) {
-    var style = window.getComputedStyle(boundary);
-    var overflowY = style.overflowY;
+    const style = window.getComputedStyle(boundary);
+    const overflowY = style.overflowY;
     if (overflowY === 'scroll' || overflowY === 'auto') {
-      var scrollHeight = boundary.scrollHeight,
-        clientHeight = boundary.clientHeight;
+      const {
+        scrollHeight,
+        clientHeight
+      } = boundary;
       if (scrollHeight > clientHeight) {
         return boundary;
       }

package/dist/esm/src/utils/dropdown/multiSelect.js

@@ -1,88 +1,68 @@
 /**
  * 전체 선택 상태를 확인하는 유틸 함수
  */
-export var isAllItemsSelected = function (selectedValues, options) {
+export const isAllItemsSelected = (selectedValues, options) => {
   if (options.length === 0) return false;
-  var validOptionIds = options.filter(function (option) {
-    return !option.disabled;
-  }).map(function (option) {
-    return option.id;
-  });
-  return validOptionIds.length > 0 && validOptionIds.every(function (id) {
-    return selectedValues.includes(id);
-  });
+  const validOptionIds = options.filter(option => !option.disabled).map(option => option.id);
+  return validOptionIds.length > 0 && validOptionIds.every(id => selectedValues.includes(id));
 };
 /**
  * 전체 선택 버튼 텍스트를 반환하는 유틸 함수
  */
-export var getSelectAllButtonText = function (selectedValues, options, selectText, deselectText) {
-  if (selectText === void 0) {
-    selectText = '전체 선택';
-  }
-  if (deselectText === void 0) {
-    deselectText = '전체 해제';
-  }
+export const getSelectAllButtonText = function (selectedValues, options) {
+  let selectText = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '전체 선택';
+  let deselectText = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '전체 해제';
   return isAllItemsSelected(selectedValues, options) ? deselectText : selectText;
 };
 /**
  * 전체 선택/해제를 처리하는 유틸 함수
  */
-export var handleSelectAllItems = function (selectedValues, options) {
+export const handleSelectAllItems = (selectedValues, options) => {
   if (isAllItemsSelected(selectedValues, options)) {
     // 전체 해제: 빈 배열 반환
     return [];
   }
   // 전체 선택: 비활성화되지 않은 모든 옵션 ID 반환
-  return options.filter(function (option) {
-    return !option.disabled;
-  }).map(function (option) {
-    return option.id;
-  });
+  return options.filter(option => !option.disabled).map(option => option.id);
 };
 /**
  * 선택된 항목들을 태그 데이터로 변환하는 유틸 함수
  */
-export var getSelectedTags = function (selectedValues, options) {
-  return selectedValues.map(function (value) {
-    var option = options.find(function (opt) {
-      return opt.id === value;
-    });
+export const getSelectedTags = (selectedValues, options) => {
+  return selectedValues.map(value => {
+    const option = options.find(opt => opt.id === value);
     return option ? {
       id: option.id,
       label: option.label || String(option.id)
     } : null;
-  }).filter(function (tag) {
-    return tag !== null;
-  });
+  }).filter(tag => tag !== null);
 };
 /**
  * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
  */
-export var removeTagFromSelected = function (selectedValues, tagIdToRemove) {
-  return selectedValues.filter(function (id) {
-    return id !== tagIdToRemove;
-  });
+export const removeTagFromSelected = (selectedValues, tagIdToRemove) => {
+  return selectedValues.filter(id => id !== tagIdToRemove);
 };
 /**
  * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
  */
-export var useMultiSelect = function (selectedValues, options, selectText, deselectText) {
-  var isAllSelected = isAllItemsSelected(selectedValues, options);
-  var buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
-  var toggleSelectAll = function () {
+export const useMultiSelect = (selectedValues, options, selectText, deselectText) => {
+  const isAllSelected = isAllItemsSelected(selectedValues, options);
+  const buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
+  const toggleSelectAll = () => {
     return handleSelectAllItems(selectedValues, options);
   };
-  var getSelectedTagsData = function () {
+  const getSelectedTagsData = () => {
     return getSelectedTags(selectedValues, options);
   };
-  var removeTag = function (tagId) {
+  const removeTag = tagId => {
     return removeTagFromSelected(selectedValues, tagId);
   };
   return {
-    isAllSelected: isAllSelected,
-    buttonText: buttonText,
-    toggleSelectAll: toggleSelectAll,
-    getSelectedTagsData: getSelectedTagsData,
-    removeTag: removeTag
+    isAllSelected,
+    buttonText,
+    toggleSelectAll,
+    getSelectedTagsData,
+    removeTag
   };
 };

package/dist/temp/assets/scripts/baseBox.d.ts

@@ -0,0 +1,55 @@
+import { OptionValue } from '../../src/types';
+import { DropdownOption } from './utils/unifiedBox/dropdownModel';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+/**
+ * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
+ */
+export declare abstract class BaseBox {
+    protected element: HTMLElement;
+    protected unifiedSelectBox: UnifiedBoxManager;
+    protected targetSelect: HTMLSelectElement | null;
+    protected isInitializing: boolean;
+    protected lastValue: OptionValue;
+    /** 서브클래스에서 기본 placeholder를 지정 */
+    protected abstract get defaultPlaceholder(): string;
+    constructor(element: HTMLElement);
+    /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
+    protected completeInitialization(): void;
+    /**
+     * 타겟 select 요소 찾기
+     */
+    protected findTargetSelect(element: HTMLElement): HTMLSelectElement | null;
+    /**
+     * HTML에서 속성 파싱
+     */
+    protected parseAttributesFromHTML(): {
+        placeholder?: string;
+        value?: string;
+        disabled?: boolean;
+        size?: 'xs' | 'sm' | 'md';
+    };
+    /**
+     * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
+     * 기본 동작: 그대로 문자열 변환
+     */
+    protected resolveValue(value: string | number): string;
+    /**
+     * 타겟 select와 동기화 (Single 모드)
+     */
+    protected syncWithTargetSelect(value: string | number): void;
+    /**
+     * 타겟 select와 동기화 (Multiple 모드)
+     */
+    protected syncWithTargetSelectMultiple(values: (string | number)[]): void;
+    getOptions(): DropdownOption[];
+    updateOptions(newOptions: DropdownOption[]): void;
+    setDisabled(disabled: boolean): void;
+    open(): void;
+    close(): void;
+    focus(): void;
+    destroy(): void;
+    selectAll(): void;
+    deselectAll(): void;
+    isMultiple(): boolean;
+    toggleSelectAll(): void;
+}

package/dist/temp/assets/scripts/baseBox.js

@@ -0,0 +1,140 @@
+/**
+ * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
+ */
+export class BaseBox {
+    constructor(element) {
+        this.targetSelect = null;
+        this.isInitializing = true;
+        this.lastValue = '';
+        this.element = element;
+        this.targetSelect = this.findTargetSelect(element);
+    }
+    /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
+    completeInitialization() {
+        setTimeout(() => {
+            this.isInitializing = false;
+        }, 0);
+    }
+    /**
+     * 타겟 select 요소 찾기
+     */
+    findTargetSelect(element) {
+        // 1. 직접 select 태그인 경우
+        if (element.tagName === 'SELECT') {
+            return element;
+        }
+        // 2. 자식으로 select 태그가 있는 경우
+        const selectChild = element.querySelector('select');
+        if (selectChild) {
+            return selectChild;
+        }
+        // 3. data-target 속성으로 지정된 경우
+        const targetId = element.getAttribute('data-target');
+        if (targetId) {
+            const targetElement = document.getElementById(targetId);
+            if (targetElement && targetElement.tagName === 'SELECT') {
+                return targetElement;
+            }
+        }
+        return null;
+    }
+    /**
+     * HTML에서 속성 파싱
+     */
+    parseAttributesFromHTML() {
+        const attributes = {};
+        if (this.targetSelect) {
+            // select 요소의 속성들
+            if (this.targetSelect.disabled)
+                attributes.disabled = true;
+            if (this.targetSelect.value)
+                attributes.value = this.targetSelect.value;
+            // placeholder는 첫 번째 빈 option에서 가져오기
+            const firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
+            if (firstOption) {
+                attributes.placeholder = firstOption.textContent || this.defaultPlaceholder;
+            }
+        }
+        // 컨테이너 요소의 data 속성들
+        const containerAttributes = this.element.dataset;
+        if (containerAttributes.placeholder)
+            attributes.placeholder = containerAttributes.placeholder;
+        if (containerAttributes.size)
+            attributes.size = containerAttributes.size;
+        if (containerAttributes.disabled === 'true')
+            attributes.disabled = true;
+        return attributes;
+    }
+    /**
+     * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
+     * 기본 동작: 그대로 문자열 변환
+     */
+    resolveValue(value) {
+        return String(value);
+    }
+    /**
+     * 타겟 select와 동기화 (Single 모드)
+     */
+    syncWithTargetSelect(value) {
+        if (this.targetSelect) {
+            this.targetSelect.value = this.resolveValue(value);
+            const event = new Event('change', { bubbles: true });
+            this.targetSelect.dispatchEvent(event);
+        }
+    }
+    /**
+     * 타겟 select와 동기화 (Multiple 모드)
+     */
+    syncWithTargetSelectMultiple(values) {
+        if (this.targetSelect && this.targetSelect.multiple) {
+            // 모든 옵션 선택 해제
+            Array.from(this.targetSelect.options).forEach((option) => {
+                option.selected = false;
+            });
+            // 선택된 값들에 해당하는 옵션들 선택
+            values.forEach((value) => {
+                const resolved = this.resolveValue(value);
+                const option = this.targetSelect.querySelector(`option[value="${resolved}"]`);
+                if (option) {
+                    option.selected = true;
+                }
+            });
+            const event = new Event('change', { bubbles: true });
+            this.targetSelect.dispatchEvent(event);
+        }
+    }
+    // UnifiedBoxManager 위임 메서드들
+    getOptions() {
+        return this.unifiedSelectBox.getOptions();
+    }
+    updateOptions(newOptions) {
+        this.unifiedSelectBox.updateOptions(newOptions);
+    }
+    setDisabled(disabled) {
+        this.unifiedSelectBox.setDisabled(disabled);
+    }
+    open() {
+        this.unifiedSelectBox.open();
+    }
+    close() {
+        this.unifiedSelectBox.close();
+    }
+    focus() {
+        this.unifiedSelectBox.focus();
+    }
+    destroy() {
+        this.unifiedSelectBox.destroy();
+    }
+    selectAll() {
+        this.unifiedSelectBox.selectAll();
+    }
+    deselectAll() {
+        this.unifiedSelectBox.deselectAll();
+    }
+    isMultiple() {
+        return this.unifiedSelectBox.isMultiple();
+    }
+    toggleSelectAll() {
+        this.unifiedSelectBox.toggleSelectAll();
+    }
+}

package/dist/temp/assets/scripts/comboBox.d.ts

@@ -0,0 +1,60 @@
+import type { Size } from '../../constant/size';
+import type { OptionValue } from '../../src/types';
+import { BaseBox } from './baseBox';
+import type { DropdownOption } from './utils/unifiedBox/dropdownModel';
+import { type UnifiedBoxManagerConfig } from './utils/unifiedBox/unifiedBoxManager';
+export interface ComboBoxOptionType {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboBoxConfig {
+    options?: ComboBoxOptionType[];
+    placeholder?: string;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    onSearch?: (searchValue: string) => void;
+    onEdit?: () => void;
+    onSelectAll?: () => void;
+    onSearchAll?: () => void;
+    onComplete?: () => void;
+    onTagRemove?: (tagId: string | number) => void;
+    onScrollBottom?: () => void;
+    searchDebounceMs?: number;
+    maxHeight?: number;
+    disabled?: boolean;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    label?: string;
+    required?: boolean;
+}
+export declare class ComboBox extends BaseBox {
+    protected get defaultPlaceholder(): string;
+    constructor(element: HTMLElement, config?: ComboBoxConfig);
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    private parseOptionsFromHTML;
+    getValues(): DropdownOption[];
+    setValues(value: DropdownOption[]): void;
+    clearInput(): void;
+    getDebugInfo(): {
+        config: UnifiedBoxManagerConfig;
+        modelState: any;
+        isOpen: boolean;
+    };
+    getSelectedCount(): number;
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     */
+    setFocusIndex(index: number): void;
+}

package/dist/temp/assets/scripts/comboBox.js

@@ -0,0 +1,132 @@
+import { BaseBox } from './baseBox';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+export class ComboBox extends BaseBox {
+    get defaultPlaceholder() {
+        return '검색하고 선택하세요';
+    }
+    constructor(element, config = {}) {
+        super(element);
+        // HTML에서 옵션 파싱 (config.options가 없을 경우)
+        const htmlOptions = this.parseOptionsFromHTML();
+        // JavaScript 옵션을 DropdownOption 형식으로 변환 (이제 구조가 동일하므로 단순 복사)
+        const normalizedOptions = config.options ? [...config.options] : htmlOptions;
+        const finalOptions = normalizedOptions;
+        // HTML에서 속성 파싱
+        const htmlAttributes = this.parseAttributesFromHTML();
+        // 기존 API를 새 API로 변환
+        const unifiedConfig = {
+            ...config,
+            type: 'combobox',
+            multiple: config.multiple ?? false,
+            showFooterButtons: config.showFooterButtons ?? false,
+            onSelectAll: config.onSelectAll,
+            onSearchAll: config.onSearchAll,
+            onComplete: config.onComplete,
+            onScrollBottom: config.onScrollBottom,
+            searchDebounceMs: config.searchDebounceMs,
+            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);
+                }
+                config.onChange?.(value);
+            },
+        };
+        this.unifiedSelectBox = new UnifiedBoxManager(element, unifiedConfig);
+        this.completeInitialization();
+    }
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    parseOptionsFromHTML() {
+        if (!this.targetSelect)
+            return [];
+        const options = [];
+        const optionElements = this.targetSelect.querySelectorAll('option');
+        optionElements.forEach((optionElement) => {
+            if (optionElement.value) {
+                // value가 있는 옵션만 추가
+                options.push({
+                    id: optionElement.value,
+                    label: optionElement.textContent || optionElement.value,
+                    disabled: optionElement.disabled,
+                });
+            }
+        });
+        return options;
+    }
+    // ComboBox 고유 API
+    getValues() {
+        return this.unifiedSelectBox.getValues();
+    }
+    setValues(value) {
+        // 옵션 객체 배열에서 id 배열로 변환하여 lastValue 비교
+        const ids = value.map((option) => option.id);
+        const valueForComparison = this.unifiedSelectBox.isMultiple() ? ids : ids[0] || '';
+        // 값이 변경되지 않았으면 무시
+        if (JSON.stringify(this.lastValue) === JSON.stringify(valueForComparison)) {
+            return;
+        }
+        this.lastValue = valueForComparison;
+        this.unifiedSelectBox.setValues(value);
+        // setValues 호출 시에도 타겟 select와 동기화
+        if (this.targetSelect) {
+            if (this.unifiedSelectBox.isMultiple()) {
+                this.syncWithTargetSelectMultiple(ids);
+            }
+            else {
+                this.syncWithTargetSelect(ids[0] || '');
+            }
+        }
+    }
+    clearInput() {
+        // UnifiedBoxManager의 handleClearInput과 동일한 로직
+        this.unifiedSelectBox.close();
+    }
+    getDebugInfo() {
+        return this.unifiedSelectBox.getDebugInfo();
+    }
+    getSelectedCount() {
+        const value = this.getValues();
+        if (Array.isArray(value)) {
+            return value.length;
+        }
+        return value ? 1 : 0;
+    }
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     */
+    scrollToBottom() {
+        this.unifiedSelectBox.scrollToBottom();
+    }
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     */
+    setSelectAllButtonText(text) {
+        this.unifiedSelectBox.setSelectAllButtonText(text);
+    }
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     */
+    setFocusIndex(index) {
+        this.unifiedSelectBox.setFocusIndex(index);
+    }
+}