@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/assets/scripts/utils/unifiedBox/unifiedBoxManager.js

@@ -1,473 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnifiedBoxManager = void 0;
-var _debounce = require("../debounce");
-var _domRenderer = require("./domRenderer");
-var _dropdownModel = require("./dropdownModel");
-var _unifiedBoxController = require("./unifiedBoxController");
-/**
- * 통합된 UnifiedBox 클래스
- * SelectBox와 ComboBox의 기능을 모두 포함
- */
-class UnifiedBoxManager {
-  constructor(element) {
-    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    this.lastSearchValue = ''; // 이전 검색어 추적 (API 모드에서 옵션 교체를 위해)
-    this.hasInitialOptions = false; // 초기 옵션이 있는지 여부 (select 태그 등)
-    this.element = element;
-    this.isComboBox = config.type === 'combobox';
-    this.baseClass = this.isComboBox ? 'ncua-combobox' : 'ncua-selectbox';
-    this.config = {
-      options: [],
-      placeholder: this.isComboBox ? '검색하세요' : '선택하세요',
-      maxHeight: 275,
-      disabled: false,
-      size: 'md',
-      multiple: false,
-      showFooterButtons: false,
-      required: false,
-      type: 'selectbox',
-      ...config,
-      searchDebounceMs: config.searchDebounceMs ?? 500
-    };
-    this.debouncedSearch = (0, _debounce.debounce)((value, isApiMode) => {
-      if (isApiMode) {
-        this.model.updateSearchValue(value);
-      } else {
-        this.model.updateSearchAndFilter(value);
-      }
-      this.config.onSearch?.(value);
-      if (value.trim()) {
-        this.controller.open();
-      } else if (!this.model.getState().showAllItems) {
-        this.controller.close();
-      }
-    }, this.config.searchDebounceMs);
-    this.initialize();
-  }
-  initialize() {
-    this.element.innerHTML = '';
-    this.setupElementClasses();
-    // 초기 옵션이 있는지 확인 (select 태그 등에서 파싱된 옵션이 있는 경우)
-    this.hasInitialOptions = this.config.options && this.config.options.length > 0 || false;
-    const filterStrategy = this.isComboBox ? _dropdownModel.DropdownModel.comboBoxFilterStrategy : _dropdownModel.DropdownModel.defaultFilterStrategy;
-    this.model = new _dropdownModel.DropdownModel(this.config.options || [], this.config.multiple || false, filterStrategy);
-    this.renderer = new _domRenderer.DOMRenderer();
-    this.createUI();
-    this.setupController();
-    if (this.config.value) {
-      this.model.setValue(this.config.value);
-    }
-  }
-  setupElementClasses() {
-    this.element.className = `${this.baseClass} ${this.baseClass}--${this.config.size}`;
-    if (this.config.disabled) {
-      this.element.classList.add(`${this.baseClass}--disabled`);
-    }
-    if (this.config.multiple) {
-      this.element.classList.add(`${this.baseClass}--multiple`);
-    }
-  }
-  createUI() {
-    if (this.isComboBox) {
-      this.createComboBoxUI();
-    } else {
-      this.createSelectBoxUI();
-    }
-  }
-  createComboBoxUI() {
-    // 컨텐츠 컨테이너
-    const content = _domRenderer.DOMRenderer.createElementWithClass('div', 'ncua-combobox__content');
-    this.element.appendChild(content);
-    // 입력 필드 생성
-    this.inputField = this.renderer.createInputField({
-      placeholder: this.config.placeholder || '검색하세요',
-      disabled: this.config.disabled || false,
-      size: this.config.size || 'md',
-      showSearchIcon: true,
-      onInput: value => this.handleInput(value),
-      onClick: () => this.handleInputClick(),
-      onClear: () => this.handleClearInput(),
-      onShowAll: () => this.handleShowAll()
-    });
-    content.appendChild(this.inputField.container);
-    this.triggerElement = this.inputField.input;
-    // 드롭다운 생성
-    this.createDropdown(content);
-  }
-  createSelectBoxUI() {
-    // 트리거 생성
-    const trigger = _domRenderer.DOMRenderer.createElementWithClass('div', 'ncua-selectbox__content');
-    trigger.setAttribute('tabindex', this.config.disabled ? '-1' : '0');
-    trigger.setAttribute('role', 'combobox');
-    trigger.setAttribute('aria-expanded', 'false');
-    trigger.setAttribute('aria-haspopup', 'listbox');
-    const valueSpan = _domRenderer.DOMRenderer.createElementWithClass('span', 'ncua-selectbox__value', this.config.placeholder);
-    const arrow = _domRenderer.DOMRenderer.createSvgIcon('chevron-down', this.config.size === 'xs' ? 14 : 16);
-    arrow.classList.add('ncua-selectbox__arrow');
-    trigger.appendChild(valueSpan);
-    trigger.appendChild(arrow);
-    this.element.appendChild(trigger);
-    this.triggerElement = trigger;
-    this.arrowElement = arrow;
-    // 드롭다운 생성
-    this.createDropdown(this.element);
-  }
-  createDropdown(parent) {
-    const dropdownStructure = this.renderer.createDropdownStructure({
-      maxHeight: this.config.maxHeight || 275,
-      size: this.config.size || 'md',
-      listboxId: `selectbox-${Date.now()}`,
-      noResultsText: '일치하는 결과가 없습니다.'
-    });
-    this.dropdownElement = dropdownStructure.dropdown;
-    // SelectBox 단일 선택 모드일 때 특별한 클래스 추가
-    if (!this.isComboBox && !this.config.multiple) {
-      this.dropdownElement.classList.add('ncua-select-dropdown--selectbox-single');
-    }
-    // 다중 선택 모드일 때 클래스 추가
-    if (this.config.multiple) {
-      this.dropdownElement.classList.add('ncua-select-dropdown--multiple');
-    }
-    parent.appendChild(this.dropdownElement);
-    // 푸터 버튼 추가 (필요한 경우)
-    if (this.config.multiple || this.config.showFooterButtons) {
-      this.footerElement = this.renderer.createFooter({
-        multiple: this.config.multiple,
-        showFooterButtons: this.config.showFooterButtons,
-        selectAllButtonText: this.model.getSelectAllButtonText(),
-        onSelectAll: () => this.handleSelectAll(),
-        onEdit: this.config.onEdit ? () => this.config.onEdit?.() : undefined,
-        onComplete: () => this.handleComplete()
-      });
-      this.dropdownElement.appendChild(this.footerElement);
-    }
-  }
-  setupController() {
-    if (!this.triggerElement || !this.dropdownElement) {
-      throw new Error('Trigger or dropdown element not found');
-    }
-    const controllerConfig = {
-      triggerElement: this.triggerElement,
-      dropdownElement: this.dropdownElement,
-      model: this.model,
-      renderer: this.renderer,
-      renderConfig: {
-        maxHeight: this.config.maxHeight || 275,
-        size: this.config.size || 'md',
-        listboxId: `selectbox-${Date.now()}`,
-        noResultsText: '일치하는 결과가 없습니다.'
-      },
-      onOpen: () => {
-        this.element.classList.add(`${this.baseClass}--open`);
-        if (this.triggerElement) {
-          this.triggerElement.setAttribute('aria-expanded', 'true');
-        }
-        // 화살표 아이콘 회전 (selectbox 타입일 때만)
-        if (!this.isComboBox && this.arrowElement) {
-          this.arrowElement.classList.add('ncua-selectbox__arrow--up');
-        }
-      },
-      onClose: () => {
-        this.element.classList.remove(`${this.baseClass}--open`);
-        if (this.triggerElement) {
-          this.triggerElement.setAttribute('aria-expanded', 'false');
-        }
-        // 화살표 아이콘 원래대로 (selectbox 타입일 때만)
-        if (!this.isComboBox && this.arrowElement) {
-          this.arrowElement.classList.remove('ncua-selectbox__arrow--up');
-        }
-      },
-      onSelectionChange: selectedValues => {
-        this.handleSelectionChange(selectedValues);
-      },
-      onSearch: searchValue => {
-        this.config.onSearch?.(searchValue);
-      },
-      onScrollBottom: this.config.onScrollBottom,
-      disabled: this.config.disabled || false,
-      canToggle: () => this.canToggleDropdown(),
-      type: this.config.type // 타입 정보 전달
-    };
-    this.controller = new _unifiedBoxController.UnifiedBoxController(controllerConfig);
-  }
-  // 이벤트 핸들러들
-  handleInput(value) {
-    this.debouncedSearch.cancel();
-    const isApiMode = this.isComboBox && !this.hasInitialOptions;
-    // API 모드에서는 검색어 변경 추적
-    if (isApiMode && this.lastSearchValue !== value) {
-      this.lastSearchValue = value;
-    }
-    // 디바운싱이 설정되어 있으면 디바운스 유틸리티 사용
-    if (this.config.searchDebounceMs > 0) {
-      this.debouncedSearch(value, isApiMode);
-    } else {
-      // 디바운싱이 0이면 즉시 실행
-      this.model.updateSearchAndFilter(value);
-      const hasOptions = this.model.getState().options.length > 0 || this.model.getState().filteredOptions.length > 0;
-      if (value.trim() || hasOptions) {
-        this.controller.open();
-      } else if (!this.model.getState().showAllItems) {
-        this.controller.close();
-      }
-      this.config.onSearch?.(value);
-    }
-  }
-  handleInputClick() {
-    if (!this.config.disabled) {
-      this.inputField?.focus();
-      if (this.isComboBox) {
-        const currentInputValue = this.inputField?.input.value || '';
-        if (currentInputValue.trim().length > 0 || this.model.getState().showAllItems) {
-          this.controller.open();
-        }
-      }
-    }
-  }
-  handleClearInput() {
-    this.debouncedSearch.cancel();
-    // input 필드 텍스트 지우기
-    if (this.inputField) {
-      this.inputField.setValue('');
-    }
-    // 모델의 검색값도 초기화
-    this.model.clearInput();
-    // ComboBox 타입이고 초기 옵션이 없는 경우 (API 모드)
-    // Clear 버튼 클릭 시 옵션도 완전히 비우기
-    const isApiMode = this.isComboBox && !this.hasInitialOptions;
-    if (isApiMode) {
-      this.model.updateOptions([]);
-      this.lastSearchValue = '';
-    }
-    this.controller.close();
-  }
-  async handleShowAll() {
-    if (!this.config.disabled) {
-      this.inputField?.focus();
-      this.inputField?.setValue('');
-      this.model.updateSearchAndFilter('', true);
-      // onSearchAll 콜백 호출 (async 함수일 경우를 대비해 Promise.resolve로 감싸서 처리)
-      await Promise.resolve(this.config.onSearchAll?.());
-      const hasOptions = this.model.getState().options.length > 0 || this.model.getState().filteredOptions.length > 0;
-      if (hasOptions) {
-        this.controller.open();
-      }
-    }
-  }
-  handleSelectionChange(selectedValues) {
-    this.debouncedSearch.cancel();
-    const result = this.config.multiple ? selectedValues : selectedValues[0] || '';
-    this.config.onChange?.(result);
-    // UI 업데이트
-    if (!this.isComboBox) {
-      this.updateSelectBoxValue();
-    }
-    // 다중 선택인 경우 전체 선택 버튼 텍스트 업데이트
-    if (this.config.multiple) {
-      this.updateSelectAllButtonText();
-    }
-    // 단일 선택 시 드롭다운 닫기
-    if (!this.config.multiple && !this.config.showFooterButtons) {
-      this.controller.close();
-    }
-  }
-  updateSelectBoxValue() {
-    const valueSpan = this.element.querySelector('.ncua-selectbox__value');
-    if (valueSpan) {
-      if (this.config.multiple) {
-        // Multiple 모드일 때는 항상 placeholder 표시
-        valueSpan.textContent = this.config.placeholder || '';
-      } else {
-        // Single 모드일 때는 선택된 옵션 또는 placeholder 표시
-        const selectedOptions = this.model.getSelectedOptions();
-        const selectedOption = selectedOptions[0];
-        valueSpan.textContent = selectedOption ? selectedOption.label : this.config.placeholder || '';
-      }
-    }
-  }
-  canToggleDropdown() {
-    if (this.isComboBox) {
-      // ComboBox의 경우: 인풋에 텍스트가 있으면 항상 토글 가능
-      const currentInputValue = this.inputField?.input.value || '';
-      return currentInputValue.trim().length > 0 || this.model.getState().showAllItems;
-    }
-    return true; // SelectBox는 항상 토글 가능
-  }
-  // 푸터 버튼 핸들러들
-  handleSelectAll() {
-    if (this.config.multiple) {
-      this.model.toggleSelectAll();
-      this.updateSelectAllButtonText();
-      // 외부 콜백 호출
-      this.config.onSelectAll?.();
-    }
-  }
-  handleComplete() {
-    if (this.config.multiple || this.isComboBox) {
-      const currentValues = this.model.getValue();
-      // SelectBox 타입이고 multiple 모드일 때만 onChange 콜백으로 현재 선택된 값들 전달
-      if (!this.isComboBox && this.config.multiple && Array.isArray(currentValues)) {
-        this.config.onChange?.(currentValues);
-      }
-      this.config.onComplete?.();
-      // ComboBox 타입인 경우에만 값 초기화 및 검색어 초기화
-      if (this.isComboBox) {
-        this.model.setValue([]);
-        if (this.inputField) {
-          this.inputField.setValue('');
-        }
-        this.model.clearInput();
-        const isApiMode = !this.hasInitialOptions;
-        if (isApiMode) {
-          this.model.updateOptions([]);
-          this.lastSearchValue = '';
-        }
-      }
-      this.controller.close();
-    }
-  }
-  updateSelectAllButtonText() {
-    if (!this.config.multiple || !this.footerElement) return;
-    this.renderer.updateSelectAllButtonText(this.footerElement, this.model.getSelectAllButtonText());
-  }
-  // Public API
-  getValues() {
-    const selectedIds = this.model.getValue();
-    const allOptions = this.getOptions();
-    // selectedIds가 배열이 아닌 경우 배열로 변환
-    const ids = Array.isArray(selectedIds) ? selectedIds : selectedIds ? [selectedIds] : [];
-    // 선택된 id에 해당하는 옵션 객체들을 찾아서 반환
-    return ids.map(id => allOptions.find(opt => opt.id === id)).filter(opt => opt !== undefined);
-  }
-  getOptions() {
-    return this.config.options || [];
-  }
-  setValues(value) {
-    // 옵션 객체 배열에서 id 배열로 변환
-    const ids = value.map(option => option.id);
-    // 단일 선택 모드인 경우 첫 번째 값만 사용
-    const finalIds = this.config.multiple ? ids : ids[0] || '';
-    this.model.setValue(finalIds);
-    if (!this.isComboBox) {
-      this.updateSelectBoxValue();
-    } else {
-      // ComboBox의 경우 input 필드도 업데이트
-      if (this.inputField) {
-        const isEmpty = value.length === 0;
-        if (isEmpty) {
-          // 빈 값으로 설정할 때 input 필드와 검색값 모두 비우기
-          this.inputField.setValue('');
-          this.model.updateSearchAndFilter('');
-        }
-      }
-    }
-  }
-  updateOptions(newOptions) {
-    // config.options도 업데이트 (getOptions()가 이를 반환하므로)
-    this.config.options = [...newOptions];
-    this.model.updateOptions(newOptions);
-    this.controller.updateOptions(newOptions);
-  }
-  setDisabled(disabled) {
-    this.config.disabled = disabled;
-    const disabledClass = `${this.baseClass}--disabled`;
-    this.element.classList.toggle(disabledClass, disabled);
-    if (this.controller) {
-      this.controller.setDisabled(disabled);
-    }
-    if (this.isComboBox) {
-      // 입력 필드 비활성화
-      if (this.inputField?.input) {
-        this.inputField.input.disabled = disabled;
-        this.inputField.container?.classList.toggle('is-disabled', disabled);
-      }
-    } else if (this.triggerElement) {
-      this.triggerElement.setAttribute('tabindex', disabled ? '-1' : '0');
-    }
-  }
-  open() {
-    this.controller.open();
-  }
-  close() {
-    this.controller.close();
-  }
-  focus() {
-    if (this.isComboBox) {
-      this.inputField?.focus();
-    } else {
-      this.triggerElement?.focus();
-    }
-  }
-  destroy() {
-    this.debouncedSearch.cancel();
-    this.controller.destroy();
-    this.renderer.clearCache();
-    this.inputField = undefined;
-  }
-  // Multiple 모드 전용 메서드들
-  selectAll() {
-    if (this.config.multiple) {
-      const allOptionIds = this.config.options?.map(option => option.id) || [];
-      this.model.setValue(allOptionIds);
-    }
-  }
-  deselectAll() {
-    if (this.config.multiple) {
-      this.model.setValue([]);
-    }
-  }
-  isMultiple() {
-    return this.config.multiple || false;
-  }
-  toggleSelectAll() {
-    if (!this.config.multiple) return;
-    const currentValues = this.model.getValue();
-    const allOptionIds = this.config.options?.map(option => option.id) || [];
-    if (Array.isArray(currentValues) && currentValues.length === allOptionIds.length) {
-      // 모든 옵션이 선택되어 있으면 전체 해제
-      this.deselectAll();
-    } else {
-      // 일부만 선택되어 있거나 아무것도 선택되지 않았으면 전체 선택
-      this.selectAll();
-    }
-  }
-  // 디버깅용
-  getDebugInfo() {
-    return {
-      config: this.config,
-      modelState: this.model.getDebugInfo(),
-      isOpen: this.model.getState().isOpen
-    };
-  }
-  /**
-   * 드롭다운을 스크롤의 바닥으로 이동
-   * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
-   */
-  scrollToBottom() {
-    if (!this.dropdownElement) return;
-    const optionsList = this.dropdownElement.querySelector('.ncua-select-dropdown__options');
-    if (!optionsList) return;
-    // 스크롤을 바닥으로 이동
-    optionsList.scrollTop = optionsList.scrollHeight;
-  }
-  /**
-   * 전체 선택 버튼의 텍스트를 외부에서 변경
-   * @param text 버튼에 표시할 텍스트
-   */
-  setSelectAllButtonText(text) {
-    if (!this.config.multiple || !this.footerElement) return;
-    this.renderer.updateSelectAllButtonText(this.footerElement, text);
-  }
-  /**
-   * 특정 인덱스의 옵션으로 포커스 이동
-   * @param index 포커스를 이동할 옵션의 인덱스
-   */
-  setFocusIndex(index) {
-    this.controller.setFocus(index);
-  }
-}
-exports.UnifiedBoxManager = UnifiedBoxManager;

package/dist/cjs/src/components/badge/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Badge = require("./Badge");
-Object.keys(_Badge).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Badge[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Badge[key];
-    }
-  });
-});

package/dist/cjs/src/components/badge/utils.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sideSlotRender = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _color = require("../../../constant/color");
-var _Dot = require("../dot/Dot");
-const DEFAULT_DOT_COLOR = 'neutral';
-const sideSlotRender = _ref => {
-  let {
-    slot,
-    defaultIconSize
-  } = _ref;
-  if (slot.type === 'icon') {
-    const Icon = slot.icon;
-    return (0, _jsxRuntime.jsx)(Icon, {
-      height: slot.size ?? defaultIconSize,
-      width: slot.size ?? defaultIconSize,
-      color: slot.color ? _color.COLOR[slot.color] : undefined
-    });
-  }
-  if (slot.type === 'dot') {
-    return (0, _jsxRuntime.jsx)(_Dot.Dot, {
-      color: slot.color ?? DEFAULT_DOT_COLOR,
-      size: slot.size ?? 'sm'
-    });
-  }
-  return slot.children;
-};
-exports.sideSlotRender = sideSlotRender;

package/dist/cjs/src/components/button/Button.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.svgSize = exports.iconOnlySvgSize = exports.dotSize = exports.Button = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _color = require("../../../constant/color");
-var _dot = require("../dot");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const svgSize = exports.svgSize = {
-  xxs: 12,
-  xs: 14,
-  sm: 16,
-  md: 20
-};
-const iconOnlySvgSize = exports.iconOnlySvgSize = {
-  xxs: 14,
-  xs: 16,
-  sm: 20,
-  md: 20
-};
-const dotSize = exports.dotSize = {
-  xxs: 'sm',
-  xs: 'sm',
-  sm: 'md',
-  md: 'md'
-};
-const loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
-const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    size = 'xs',
-    children,
-    onlyIcon,
-    disabled,
-    loading,
-    className,
-    hierarchy = 'secondary-gray',
-    label,
-    leadingIcon,
-    trailingIcon,
-    underline = false,
-    ...restProps
-  } = props;
-  const isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
-  const isDisabled = disabled || isLoading;
-  const sideSlotRender = slot => {
-    const iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
-    if (slot.type === 'icon') {
-      const Icon = slot.icon;
-      return (0, _jsxRuntime.jsx)(Icon, {
-        height: slot.size ?? iconSize,
-        width: slot.size ?? iconSize,
-        color: slot.color ? _color.COLOR[slot.color] : undefined
-      });
-    }
-    if (slot.type === 'dot') {
-      return (0, _jsxRuntime.jsx)(_dot.Dot, {
-        color: slot.color,
-        size: slot.size ?? dotSize[size]
-      });
-    }
-    return slot.children;
-  };
-  return /*#__PURE__*/(0, _react.createElement)('button', {
-    className: (0, _classnames.default)('ncua-btn', `ncua-btn--${size}`, {
-      'only-icon': onlyIcon,
-      'is-disable': isDisabled,
-      'is-loading': isLoading,
-      'has-underline': underline
-    }, className, hierarchy && `ncua-btn--${hierarchy}`),
-    disabled: isDisabled,
-    'aria-busy': isLoading || undefined,
-    ...restProps,
-    ref
-  }, (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isLoading ? (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-btn__spinner"
-    }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-btn__label",
-      children: label
-    }), children, trailingIcon && sideSlotRender(trailingIcon)]
-  }));
-});