@ncds/ui-admin 1.3.0 → 1.4.1

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

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

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

@@ -0,0 +1,178 @@
+import { FileInputModel } from './FileInputModel';
+import { FileInputView } from './FileInputView';
+var FileInput = /** @class */function () {
+  function FileInput(options) {
+    var _this = this;
+    /**
+     * 파일 선택 버튼 클릭 핸들러
+     */
+    this.handleBrowseClick = function () {
+      if (!_this.model.isDisabled()) {
+        _this.view.getFileInputElement().click();
+      }
+    };
+    /**
+     * 파일 변경 핸들러
+     */
+    this.handleFileChange = function (event) {
+      var _a, _b, _c;
+      var target = event.target;
+      var selectedFiles = target.files;
+      if (!selectedFiles || selectedFiles.length === 0) return;
+      var _d = _this.model.validateFiles(Array.from(selectedFiles)),
+        validFiles = _d.validFiles,
+        invalidFiles = _d.invalidFiles;
+      var options = _this.model.getOptions();
+      // 유효한 파일에 대한 콜백 호출 (자동 추가/렌더링 없음)
+      if (validFiles.length > 0) {
+        // 콜백을 통해 선택된 파일 정보 전달
+        if (_this.model.isControlled()) {
+          (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, validFiles);
+        } else {
+          (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, validFiles);
+        }
+      }
+      // 유효하지 않은 파일 처리
+      if (invalidFiles.length > 0) {
+        (_c = options.onFail) === null || _c === void 0 ? void 0 : _c.call(options, invalidFiles);
+      }
+      // Reset input value to allow re-selecting the same file
+      target.value = '';
+    };
+    /**
+     * 파일 제거 핸들러
+     * 주의: 이 메서드는 renderFileTags에서 사용되지만,
+     * 파일 선택 시 자동 렌더링이 비활성화되어 있으므로 수동으로 호출해야 함
+     */
+    this.handleRemoveFile = function (index) {
+      _this.model.removeFile(index);
+      _this.notifyChange();
+    };
+    this.model = new FileInputModel(options);
+    this.view = new FileInputView(this.model.getOptions(), this.model);
+    this.setupEventListeners();
+    // 파일 선택 시 자동 렌더링은 제거됨 - 사용자가 콜백에서 직접 처리
+    // 컨테이너가 지정되면 자동으로 추가
+    if (options.container) {
+      this.appendToContainer(options.container);
+    }
+  }
+  /**
+   * 컨테이너에 요소 추가
+   */
+  FileInput.prototype.appendToContainer = function (container) {
+    var 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("FileInput: Container not found:", container);
+    }
+  };
+  /**
+   * 이벤트 리스너 설정
+   */
+  FileInput.prototype.setupEventListeners = function () {
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    // 파일 선택 이벤트
+    fileInput.addEventListener('change', this.handleFileChange);
+    // 버튼 클릭 이벤트
+    button.addEventListener('click', this.handleBrowseClick);
+  };
+  /**
+   * 변경 알림 (onChange/onFileSelect 호출)
+   * 주의: 이 메서드는 setFiles 등 내부적으로 파일 목록이 변경될 때만 사용됨
+   */
+  FileInput.prototype.notifyChange = function () {
+    var _a, _b;
+    var options = this.model.getOptions();
+    var files = this.model.getFiles();
+    if (this.model.isControlled()) {
+      // Controlled mode: onChange 호출
+      (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, files);
+    } else {
+      // Uncontrolled mode: onFileSelect 호출 및 렌더링
+      (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, files);
+      this.render();
+    }
+  };
+  /**
+   * 뷰 렌더링 (내부용)
+   */
+  FileInput.prototype.render = function () {
+    var files = this.model.getFiles();
+    this.view.renderFileTags(files, this.handleRemoveFile);
+  };
+  // Public API
+  /**
+   * 파일 태그를 수동으로 렌더링
+   * 사용자가 콜백에서 직접 호출하여 태그를 렌더링할 수 있음
+   */
+  FileInput.prototype.renderFileTags = function () {
+    this.render();
+  };
+  /**
+   * DOM 요소 반환
+   */
+  FileInput.prototype.getElement = function () {
+    return this.view.getElement();
+  };
+  /**
+   * 현재 파일 목록 반환
+   */
+  FileInput.prototype.getFiles = function () {
+    return this.model.getFiles();
+  };
+  /**
+   * 초기 업로드된 파일 목록 설정
+   */
+  FileInput.prototype.setFiles = function (uploadedFiles) {
+    var _a;
+    this.model.setFiles(uploadedFiles);
+    var options = this.model.getOptions();
+    if (this.model.isControlled()) {
+      var allFiles = this.model.getFiles();
+      (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, allFiles);
+    } else {
+      this.render();
+    }
+  };
+  /**
+   * 모든 파일 제거
+   */
+  FileInput.prototype.clearFiles = function () {
+    this.model.clearFiles();
+    this.notifyChange();
+  };
+  /**
+   * disabled 상태 설정
+   */
+  FileInput.prototype.setDisabled = function (disabled) {
+    this.model.setDisabled(disabled);
+    this.view.setButtonDisabled(disabled);
+  };
+  /**
+   * 리소스 정리
+   */
+  FileInput.prototype.destroy = function () {
+    // 이벤트 리스너 제거
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    fileInput.removeEventListener('change', this.handleFileChange);
+    button.removeEventListener('click', this.handleBrowseClick);
+    // View 리소스 정리
+    this.view.destroy();
+  };
+  return FileInput;
+}();
+export { FileInput };

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

@@ -0,0 +1,241 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { FileInputErrorType } from './const/types';
+var FileInputModel = /** @class */function () {
+  function FileInputModel(options) {
+    this.internalFiles = [];
+    this.initialFiles = []; // 초기 파일 목록 (렌더링 시점의 파일)
+    this.newlyAddedFiles = new Set(); // 새로 추가된 파일 추적
+    this.deletedInitialFiles = new Set(); // 삭제 표시된 초기 파일들 (파일명으로 추적)
+    this.options = __assign({
+      size: 'xs',
+      multiple: false,
+      buttonLabel: '파일 찾기',
+      disabled: false,
+      showImagePreview: false
+    }, options);
+    // 초기 파일 설정
+    if (this.options.value && this.options.value.length > 0) {
+      this.internalFiles = __spreadArray([], this.options.value, true);
+      // value로 들어온 File[]은 새로 추가된 파일로 처리 (initialFiles는 별도로 setFiles(UploadedFile[])로 설정)
+    }
+  }
+  /**
+   * 옵션 반환
+   */
+  FileInputModel.prototype.getOptions = function () {
+    return this.options;
+  };
+  /**
+   * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
+   */
+  FileInputModel.prototype.getFiles = function () {
+    var _this = this;
+    var newFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
+    // UploadedFile을 File 객체로 변환 (삭제 표시되지 않은 것만)
+    var initialFilesAsFiles = this.initialFiles.filter(function (uploadedFile) {
+      return !_this.deletedInitialFiles.has(uploadedFile.fileName);
+    }).map(function (uploadedFile) {
+      // UploadedFile을 File 객체로 변환 (빈 데이터지만 이름과 타입 정보 유지)
+      var mimeType = _this.getMimeTypeFromFileName(uploadedFile.fileName);
+      return new File([], uploadedFile.fileName, {
+        type: mimeType
+      });
+    });
+    // 초기 파일 + 새로 추가된 파일 합치기
+    return __spreadArray(__spreadArray([], initialFilesAsFiles, true), newFiles, true);
+  };
+  /**
+   * 파일명에서 MIME 타입 추론
+   */
+  FileInputModel.prototype.getMimeTypeFromFileName = function (fileName) {
+    var _a;
+    var extension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    var mimeTypes = {
+      jpg: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      png: 'image/png',
+      gif: 'image/gif',
+      webp: 'image/webp',
+      pdf: 'application/pdf',
+      txt: 'text/plain',
+      doc: 'application/msword',
+      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      xls: 'application/vnd.ms-excel',
+      xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    };
+    return mimeTypes[extension || ''] || 'application/octet-stream';
+  };
+  /**
+   * 초기 업로드된 파일 목록 설정 (UploadedFile[] 타입만 허용)
+   */
+  FileInputModel.prototype.setFiles = function (uploadedFiles) {
+    this.initialFiles = __spreadArray([], uploadedFiles, true);
+  };
+  /**
+   * 파일 추가
+   */
+  FileInputModel.prototype.addFiles = function (files) {
+    var _this = this;
+    // getFiles()를 사용하지 않고 새로 추가된 파일만 관리
+    var currentNewFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
+    var newFiles = __spreadArray(__spreadArray([], currentNewFiles, true), files, true);
+    // 새로 추가된 파일로 표시
+    files.forEach(function (file) {
+      return _this.newlyAddedFiles.add(file);
+    });
+    // addFiles에서는 initialFiles 로직을 건드리지 않고 직접 설정
+    var isControlled = this.options.value !== undefined;
+    if (isControlled) {
+      this.options.value = newFiles;
+    } else {
+      this.internalFiles = newFiles;
+    }
+  };
+  /**
+   * 특정 인덱스의 파일 제거
+   */
+  FileInputModel.prototype.removeFile = function (index) {
+    var visibleFiles = this.getFiles(); // 현재 보이는 파일들
+    var fileToRemove = visibleFiles[index];
+    if (!fileToRemove) return;
+    // 초기 파일인지 확인
+    var isInitialFile = this.isInitialFile(fileToRemove);
+    if (isInitialFile) {
+      // 초기 파일: 삭제 표시만 함 (실제 제거하지 않음)
+      this.deletedInitialFiles.add(fileToRemove.name);
+    } else {
+      // 새로 추가된 파일: 실제 제거
+      var currentFiles = this.options.value !== undefined ? this.options.value : this.internalFiles;
+      var newFiles = currentFiles.filter(function (file) {
+        return file !== fileToRemove;
+      });
+      // newlyAddedFiles Set에서도 제거
+      this.newlyAddedFiles.delete(fileToRemove);
+      var isControlled = this.options.value !== undefined;
+      if (isControlled) {
+        this.options.value = newFiles;
+      } else {
+        this.internalFiles = newFiles;
+      }
+    }
+  };
+  /**
+   * 모든 파일 제거
+   */
+  FileInputModel.prototype.clearFiles = function () {
+    var _this = this;
+    // 초기 파일들은 모두 삭제 표시
+    this.initialFiles.forEach(function (uploadedFile) {
+      _this.deletedInitialFiles.add(uploadedFile.fileName);
+    });
+    this.newlyAddedFiles.clear();
+    var isControlled = this.options.value !== undefined;
+    if (isControlled) {
+      this.options.value = [];
+    } else {
+      this.internalFiles = [];
+    }
+  };
+  /**
+   * 파일 유효성 검사
+   */
+  FileInputModel.prototype.validateFiles = function (fileList) {
+    var validFiles = [];
+    var invalidFiles = [];
+    var currentFiles = this.getFiles();
+    var _loop_1 = function (file) {
+      // 중복 체크
+      if (currentFiles.some(function (f) {
+        return f.name === file.name && f.size === file.size;
+      })) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.ALREADY_UPLOADED
+        }));
+        return "continue";
+      }
+      // 파일 크기 체크
+      if (this_1.options.maxFileSize && file.size > this_1.options.maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        return "continue";
+      }
+      // 파일 개수 체크
+      if (this_1.options.maxFileCount && currentFiles.length + validFiles.length >= this_1.options.maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        }));
+        return "continue";
+      }
+      validFiles.push(file);
+    };
+    var this_1 = this;
+    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+      var file = fileList_1[_i];
+      _loop_1(file);
+    }
+    return {
+      validFiles: validFiles,
+      invalidFiles: invalidFiles
+    };
+  };
+  /**
+   * disabled 상태 설정
+   */
+  FileInputModel.prototype.setDisabled = function (disabled) {
+    this.options.disabled = disabled;
+  };
+  /**
+   * disabled 상태 반환
+   */
+  FileInputModel.prototype.isDisabled = function () {
+    return this.options.disabled;
+  };
+  /**
+   * Controlled mode 여부 확인
+   * onChange가 있으면 Controlled mode로 판단
+   */
+  FileInputModel.prototype.isControlled = function () {
+    return this.options.onChange !== undefined;
+  };
+  /**
+   * 파일이 초기 파일인지 확인 (UploadedFile로 설정된 기존 파일)
+   */
+  FileInputModel.prototype.isInitialFile = function (file) {
+    return this.initialFiles.some(function (uploadedFile) {
+      return uploadedFile.fileName === file.name;
+    });
+  };
+  /**
+   * 파일이 새로 추가된 파일인지 확인
+   */
+  FileInputModel.prototype.isNewlyAddedFile = function (file) {
+    return this.newlyAddedFiles.has(file);
+  };
+  /**
+   * 파일이 삭제 표시된 초기 파일인지 확인
+   */
+  FileInputModel.prototype.isDeletedInitialFile = function (file) {
+    return this.deletedInitialFiles.has(file.name);
+  };
+  return FileInputModel;
+}();
+export { FileInputModel };