@ncds/ui-admin 1.8.1 → 1.8.2

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

@@ -1,80 +0,0 @@
-// React 컴포넌트와 동일하게 구성
-const iconSizeMap = {
-  sm: 16,
-  md: 20,
-  lg: 24,
-  xl: 28
-};
-export class FeaturedIcon {
-  constructor(options) {
-    this.options = {
-      theme: 'light-circle',
-      color: 'neutral',
-      size: 'sm',
-      className: '',
-      ...options
-    };
-    this.element = this.createElement();
-  }
-  // svgString ( ICON SVG ) 을 받아서 요소를 생성
-  createElement() {
-    const {
-      theme,
-      color,
-      size,
-      className,
-      svgString
-    } = this.options;
-    // React FeaturedIcon과 동일한 클래스 구조
-    const classes = ['ncua-featured-icon', `ncua-featured-icon--${theme}`, `ncua-featured-icon--${color}`, `ncua-featured-icon--${size}`];
-    if (className) {
-      classes.push(className);
-    }
-    const div = document.createElement('div');
-    div.className = classes.join(' ');
-    // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
-    if (theme === 'outline-circle') {
-      const innerOutline = document.createElement('div');
-      innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
-      div.appendChild(innerOutline);
-      const outerOutline = document.createElement('div');
-      outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
-      div.appendChild(outerOutline);
-    }
-    // SVG 아이콘 추가
-    const iconSize = iconSizeMap[size];
-    const svgWithSize = this.addSizeToSvg(svgString, iconSize);
-    div.innerHTML += svgWithSize;
-    return div;
-  }
-  addSizeToSvg(svgString, size) {
-    return svgString.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
-  }
-  // Public methods
-  getElement() {
-    return this.element;
-  }
-  updateColor(color) {
-    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, `ncua-featured-icon--${color}`);
-    this.options.color = color;
-  }
-  updateSize(size) {
-    const iconSize = iconSizeMap[size];
-    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, `ncua-featured-icon--${size}`);
-    const svgIcon = this.element.querySelector('svg');
-    if (svgIcon) {
-      svgIcon.setAttribute('width', String(iconSize));
-      svgIcon.setAttribute('height', String(iconSize));
-    }
-    this.options.size = size;
-  }
-  destroy() {
-    if (this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
-  }
-  // Static factory method
-  static create(options) {
-    return new FeaturedIcon(options);
-  }
-}

package/dist/esm/assets/scripts/fileInput/const/classNames.js

@@ -1,16 +0,0 @@
-// FileInput 관련 CSS 클래스명 상수
-export const FILE_INPUT_CLASS_NAMES = {
-  fileInput: 'ncua-file-input',
-  inputContainer: 'ncua-file-input__input-container',
-  label: 'ncua-file-input__label',
-  helpIcon: 'ncua-input__help-icon',
-  hintText: 'ncua-input__hint-text',
-  hintList: 'ncua-file-input__hint-list',
-  hintItem: 'ncua-file-input__hint-item',
-  fileTags: 'ncua-file-input__file-tags',
-  fileTagContainer: 'ncua-file-input__file-tag-container',
-  fileImage: 'ncua-file-input__file-image'
-};
-export const getFileInputSizeClassName = size => `ncua-file-input--${size}`;
-export const getLabelClassName = isRequired => isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
-export const getHintTextClassName = destructive => destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';

package/dist/esm/assets/scripts/fileInput/const/index.js

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

package/dist/esm/assets/scripts/fileInput/const/types.js

@@ -1,7 +0,0 @@
-// FileInput 관련 타입 정의 (React FileInput.tsx와 동일)
-export var FileInputErrorType;
-(function (FileInputErrorType) {
-  FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
-  FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
-  FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
-})(FileInputErrorType || (FileInputErrorType = {}));

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

@@ -1,71 +0,0 @@
-import { FileInputModel } from './fileInputModel';
-import { FileInputView } from './fileInputView';
-export class FileInput {
-  constructor(options) {
-    this.handleBrowseClick = () => {
-      if (!this.model.isDisabled()) {
-        this.view.getFileInputElement().click();
-      }
-    };
-    this.handleFileChange = event => {
-      const target = event.target;
-      const selectedFiles = target.files;
-      if (!selectedFiles || selectedFiles.length === 0) return;
-      const {
-        validFiles,
-        invalidFiles
-      } = this.model.validateFiles(Array.from(selectedFiles));
-      const options = this.model.getOptions();
-      if (validFiles.length > 0) {
-        options.onChange?.(validFiles);
-      }
-      if (invalidFiles.length > 0) {
-        options.onFail?.(invalidFiles);
-      }
-      target.value = '';
-    };
-    this.model = new FileInputModel(options);
-    this.view = new FileInputView(this.model.getOptions());
-    this.setupEventListeners();
-    if (options.container) {
-      this.appendToContainer(options.container);
-    }
-  }
-  appendToContainer(container) {
-    let containerElement = null;
-    if (typeof container === 'string') {
-      containerElement = document.getElementById(container);
-      if (!containerElement) {
-        containerElement = document.querySelector(container);
-      }
-    } else {
-      containerElement = container;
-    }
-    if (containerElement) {
-      containerElement.appendChild(this.getElement());
-    } else {
-      console.warn(`FileInput: Container not found:`, container);
-    }
-  }
-  setupEventListeners() {
-    const fileInput = this.view.getFileInputElement();
-    const button = this.view.getButtonElement();
-    fileInput.addEventListener('change', this.handleFileChange);
-    button.addEventListener('click', this.handleBrowseClick);
-  }
-  // Public API
-  getElement() {
-    return this.view.getElement();
-  }
-  setDisabled(disabled) {
-    this.model.setDisabled(disabled);
-    this.view.setButtonDisabled(disabled);
-  }
-  destroy() {
-    const fileInput = this.view.getFileInputElement();
-    const button = this.view.getButtonElement();
-    fileInput.removeEventListener('change', this.handleFileChange);
-    button.removeEventListener('click', this.handleBrowseClick);
-    this.view.destroy();
-  }
-}

package/dist/esm/assets/scripts/fileInput/fileInputModel.js

@@ -1,46 +0,0 @@
-import { FileInputErrorType } from './const/types';
-export class FileInputModel {
-  constructor(options) {
-    this.options = {
-      size: 'xs',
-      multiple: false,
-      buttonLabel: '파일 찾기',
-      disabled: false,
-      ...options
-    };
-  }
-  getOptions() {
-    return this.options;
-  }
-  validateFiles(fileList) {
-    const validFiles = [];
-    const invalidFiles = [];
-    for (const file of fileList) {
-      if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
-        invalidFiles.push({
-          ...file,
-          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
-        });
-        continue;
-      }
-      if (this.options.maxFileCount && validFiles.length >= this.options.maxFileCount) {
-        invalidFiles.push({
-          ...file,
-          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
-        });
-        continue;
-      }
-      validFiles.push(file);
-    }
-    return {
-      validFiles,
-      invalidFiles
-    };
-  }
-  setDisabled(disabled) {
-    this.options.disabled = disabled;
-  }
-  isDisabled() {
-    return this.options.disabled;
-  }
-}

package/dist/esm/assets/scripts/fileInput/fileInputView.js

@@ -1,145 +0,0 @@
-import { FILE_INPUT_CLASS_NAMES, getFileInputSizeClassName, getHintTextClassName, getLabelClassName } from './const/classNames';
-const HELP_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-  <circle cx="12" cy="12" r="10" stroke-width="2"/>
-  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <line x1="12" y1="17" x2="12.01" y2="17" stroke-width="2" stroke-linecap="round"/>
-</svg>`;
-const SHARE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="none" class="ncua-btn__icon">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12v4.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V12m13-5-4-4m0 0L8 7m4-4v12"/>
-</svg>`;
-export class FileInputView {
-  constructor(options) {
-    this.options = options;
-    this.element = this.createElement();
-    this.fileInputElement = this.element.querySelector('input[type="file"]');
-    this.buttonElement = this.element.querySelector('button');
-  }
-  /**
-   * 메인 DOM 요소 생성
-   */
-  createElement() {
-    const container = document.createElement('div');
-    const baseClasses = `${FILE_INPUT_CLASS_NAMES.fileInput} ${getFileInputSizeClassName(this.options.size)}`;
-    const customClasses = this.options.className ? ` ${this.options.className}` : '';
-    container.className = baseClasses + customClasses;
-    // Hidden file input 생성
-    container.appendChild(this.createFileInput());
-    // Input container
-    container.appendChild(this.createInputContainer());
-    // Hint list
-    if (this.options.hintItems && this.options.hintItems.length > 0) {
-      container.appendChild(this.createHintList());
-    }
-    return container;
-  }
-  /**
-   * Hidden file input 생성
-   */
-  createFileInput() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.hidden = true;
-    input.tabIndex = -1;
-    input.setAttribute('aria-hidden', 'true');
-    input.classList.add('no-filestyle');
-    if (this.options.accept) {
-      input.accept = this.options.accept;
-    }
-    if (this.options.multiple) {
-      input.multiple = true;
-    }
-    return input;
-  }
-  /**
-   * Input container 생성
-   */
-  createInputContainer() {
-    const container = document.createElement('div');
-    container.className = FILE_INPUT_CLASS_NAMES.inputContainer;
-    // Label
-    if (this.options.label) {
-      container.appendChild(this.createLabelContainer());
-    }
-    // Button
-    container.appendChild(this.createButton());
-    // Hint text
-    if (this.options.hintText) {
-      container.appendChild(this.createHintText());
-    }
-    return container;
-  }
-  /**
-   * Label container 생성
-   */
-  createLabelContainer() {
-    const container = document.createElement('div');
-    container.className = FILE_INPUT_CLASS_NAMES.label;
-    const label = document.createElement('label');
-    label.className = getLabelClassName(this.options.isRequired);
-    label.textContent = this.options.label;
-    container.appendChild(label);
-    if (this.options.showHelpIcon) {
-      container.appendChild(this.createHelpIcon());
-    }
-    return container;
-  }
-  /**
-   * Help icon 생성
-   */
-  createHelpIcon() {
-    const iconContainer = document.createElement('span');
-    iconContainer.className = FILE_INPUT_CLASS_NAMES.helpIcon;
-    iconContainer.innerHTML = HELP_ICON_SVG;
-    return iconContainer;
-  }
-  createButton() {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = `ncua-btn ncua-btn--${this.options.size} ncua-btn--secondary-gray`;
-    button.disabled = this.options.disabled;
-    button.insertAdjacentHTML('beforeend', SHARE_ICON_SVG);
-    const label = document.createElement('span');
-    label.className = 'ncua-btn__label';
-    label.textContent = this.options.buttonLabel;
-    button.appendChild(label);
-    return button;
-  }
-  /**
-   * Hint text 생성
-   */
-  createHintText() {
-    const hintText = document.createElement('div');
-    hintText.className = getHintTextClassName(this.options.destructive);
-    hintText.textContent = this.options.hintText;
-    return hintText;
-  }
-  /**
-   * Hint list 생성
-   */
-  createHintList() {
-    const ul = document.createElement('ul');
-    ul.className = FILE_INPUT_CLASS_NAMES.hintList;
-    this.options.hintItems?.forEach(hint => {
-      const li = document.createElement('li');
-      li.className = FILE_INPUT_CLASS_NAMES.hintItem;
-      li.textContent = hint;
-      ul.appendChild(li);
-    });
-    return ul;
-  }
-  setButtonDisabled(disabled) {
-    this.buttonElement.disabled = disabled;
-  }
-  getElement() {
-    return this.element;
-  }
-  getFileInputElement() {
-    return this.fileInputElement;
-  }
-  getButtonElement() {
-    return this.buttonElement;
-  }
-  destroy() {
-    // View 리소스 정리 - 이벤트 리스너는 FileInput에서 관리
-  }
-}

package/dist/esm/assets/scripts/fileInput/index.js

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

package/dist/esm/assets/scripts/imageFileInput/ImageFileInput.js

@@ -1,177 +0,0 @@
-import { ImageFileInputModel } from './ImageFileInputModel';
-import { ImageFileInputView } from './ImageFileInputView';
-export class ImageFileInput {
-  constructor(options) {
-    /**
-     * 파일 선택 버튼 클릭 핸들러
-     */
-    this.handleBrowseClick = () => {
-      if (!this.model.isDisabled()) {
-        this.view.getFileInputElement().click();
-      }
-    };
-    /**
-     * 파일 변경 핸들러
-     */
-    this.handleFileChange = event => {
-      const target = event.target;
-      const selectedFiles = target.files;
-      if (!selectedFiles || selectedFiles.length === 0) return;
-      const {
-        validFiles,
-        invalidFiles
-      } = this.model.validateFiles(Array.from(selectedFiles));
-      const options = this.model.getOptions();
-      // 유효한 파일에 대한 콜백 호출
-      if (validFiles.length > 0) {
-        // 파일 추가 (maxFileCount가 1이면 교체)
-        this.model.addFiles(validFiles);
-        // 콜백을 통해 선택된 파일 정보 전달
-        if (this.model.isControlled()) {
-          options.onChange?.(this.model.getFiles());
-        } else {
-          options.onFileSelect?.(this.model.getFiles());
-        }
-        // 자동 렌더링 (uncontrolled mode)
-        if (!this.model.isControlled()) {
-          this.render();
-        }
-      }
-      // 유효하지 않은 파일 처리
-      if (invalidFiles.length > 0) {
-        options.onFail?.(invalidFiles);
-      }
-      // Reset input value to allow re-selecting the same file
-      target.value = '';
-    };
-    /**
-     * 파일 제거 핸들러
-     */
-    this.handleRemoveFile = index => {
-      this.model.removeFile(index);
-      this.notifyChange();
-    };
-    this.model = new ImageFileInputModel(options);
-    this.view = new ImageFileInputView(this.model.getOptions(), this.model);
-    this.setupEventListeners();
-    // 초기 렌더링 (빈 슬롯 버튼 생성)
-    this.render();
-    // 컨테이너가 지정되면 자동으로 추가
-    if (options.container) {
-      this.appendToContainer(options.container);
-    }
-  }
-  /**
-   * 컨테이너에 요소 추가
-   */
-  appendToContainer(container) {
-    let containerElement = null;
-    if (typeof container === 'string') {
-      // ID로 찾기 (# 없이)
-      containerElement = document.getElementById(container);
-      // ID로 못 찾으면 CSS 셀렉터로 찾기
-      if (!containerElement) {
-        containerElement = document.querySelector(container);
-      }
-    } else {
-      containerElement = container;
-    }
-    if (containerElement) {
-      containerElement.appendChild(this.getElement());
-    } else {
-      console.warn(`ImageFileInput: Container not found:`, container);
-    }
-  }
-  /**
-   * 이벤트 리스너 설정
-   */
-  setupEventListeners() {
-    const fileInput = this.view.getFileInputElement();
-    const button = this.view.getButtonElement();
-    // 파일 선택 이벤트
-    fileInput.addEventListener('change', this.handleFileChange);
-    // 버튼 클릭 이벤트
-    button.addEventListener('click', this.handleBrowseClick);
-  }
-  /**
-   * 변경 알림 (onChange/onFileSelect 호출)
-   */
-  notifyChange() {
-    const options = this.model.getOptions();
-    const files = this.model.getFiles();
-    if (this.model.isControlled()) {
-      // Controlled mode: onChange 호출
-      options.onChange?.(files);
-      this.render();
-    } else {
-      // Uncontrolled mode: onFileSelect 호출 및 렌더링
-      options.onFileSelect?.(files);
-      this.render();
-    }
-  }
-  /**
-   * 뷰 렌더링 (내부용)
-   */
-  render() {
-    const files = this.model.getFiles();
-    this.view.renderImagePreviews(files, this.handleRemoveFile, this.handleBrowseClick);
-  }
-  /**
-   * 이미지 프리뷰를 수동으로 렌더링
-   * 사용자가 콜백에서 직접 호출하여 프리뷰를 렌더링할 수 있음
-   */
-  renderImagePreviews() {
-    this.render();
-  }
-  /**
-   * DOM 요소 반환
-   */
-  getElement() {
-    return this.view.getElement();
-  }
-  /**
-   * 현재 파일 목록 반환
-   */
-  getFiles() {
-    return this.model.getFiles();
-  }
-  /**
-   * 초기 업로드된 파일 목록 설정
-   */
-  setFiles(uploadedFiles) {
-    this.model.setFiles(uploadedFiles);
-    const options = this.model.getOptions();
-    if (this.model.isControlled()) {
-      const allFiles = this.model.getFiles();
-      options.onChange?.(allFiles);
-    } else {
-      this.render();
-    }
-  }
-  /**
-   * 모든 파일 제거
-   */
-  clearFiles() {
-    this.model.clearFiles();
-    this.notifyChange();
-  }
-  /**
-   * disabled 상태 설정
-   */
-  setDisabled(disabled) {
-    this.model.setDisabled(disabled);
-    this.view.setButtonDisabled(disabled);
-  }
-  /**
-   * 리소스 정리
-   */
-  destroy() {
-    // 이벤트 리스너 제거
-    const fileInput = this.view.getFileInputElement();
-    const button = this.view.getButtonElement();
-    fileInput.removeEventListener('change', this.handleFileChange);
-    button.removeEventListener('click', this.handleBrowseClick);
-    // View 리소스 정리
-    this.view.destroy();
-  }
-}