@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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: 'sm',
+      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/const/classNames.js

@@ -0,0 +1,22 @@
+// FileInput 관련 CSS 클래스명 상수
+export var 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 var getFileInputSizeClassName = function (size) {
+  return "ncua-file-input--".concat(size);
+};
+export var getLabelClassName = function (isRequired) {
+  return isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
+};
+export var getHintTextClassName = function (destructive) {
+  return destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';
+};

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

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

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

@@ -0,0 +1,7 @@
+// 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

@@ -0,0 +1,74 @@
+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;
+      var target = event.target;
+      var selectedFiles = target.files;
+      if (!selectedFiles || selectedFiles.length === 0) return;
+      var _c = _this.model.validateFiles(Array.from(selectedFiles)),
+        validFiles = _c.validFiles,
+        invalidFiles = _c.invalidFiles;
+      var options = _this.model.getOptions();
+      if (validFiles.length > 0) {
+        (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, validFiles);
+      }
+      if (invalidFiles.length > 0) {
+        (_b = options.onFail) === null || _b === void 0 ? void 0 : _b.call(options, invalidFiles);
+      }
+      target.value = '';
+    };
+    this.model = new FileInputModel(options);
+    this.view = new FileInputView(this.model.getOptions());
+    this.setupEventListeners();
+    if (options.container) {
+      this.appendToContainer(options.container);
+    }
+  }
+  FileInput.prototype.appendToContainer = function (container) {
+    var 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);
+    }
+  };
+  FileInput.prototype.setupEventListeners = function () {
+    var fileInput = this.view.getFileInputElement();
+    var button = this.view.getButtonElement();
+    fileInput.addEventListener('change', this.handleFileChange);
+    button.addEventListener('click', this.handleBrowseClick);
+  };
+  // Public API
+  FileInput.prototype.getElement = function () {
+    return this.view.getElement();
+  };
+  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);
+    this.view.destroy();
+  };
+  return FileInput;
+}();
+export { FileInput };

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

@@ -0,0 +1,56 @@
+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);
+};
+import { FileInputErrorType } from './const/types';
+var FileInputModel = /** @class */function () {
+  function FileInputModel(options) {
+    this.options = __assign({
+      size: 'xs',
+      multiple: false,
+      buttonLabel: '파일 찾기',
+      disabled: false
+    }, options);
+  }
+  FileInputModel.prototype.getOptions = function () {
+    return this.options;
+  };
+  FileInputModel.prototype.validateFiles = function (fileList) {
+    var validFiles = [];
+    var invalidFiles = [];
+    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+      var file = fileList_1[_i];
+      if (this.options.maxFileSize && file.size > this.options.maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        continue;
+      }
+      if (this.options.maxFileCount && validFiles.length >= this.options.maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        }));
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return {
+      validFiles: validFiles,
+      invalidFiles: invalidFiles
+    };
+  };
+  FileInputModel.prototype.setDisabled = function (disabled) {
+    this.options.disabled = disabled;
+  };
+  FileInputModel.prototype.isDisabled = function () {
+    return this.options.disabled;
+  };
+  return FileInputModel;
+}();
+export { FileInputModel };

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

@@ -0,0 +1,142 @@
+import { FILE_INPUT_CLASS_NAMES, getFileInputSizeClassName, getHintTextClassName, getLabelClassName } from './const/classNames';
+var HELP_ICON_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2\"/>\n  <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\"/>\n  <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n</svg>";
+var 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\">\n  <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\"/>\n</svg>";
+var FileInputView = /** @class */function () {
+  function FileInputView(options) {
+    this.options = options;
+    this.element = this.createElement();
+    this.fileInputElement = this.element.querySelector('input[type="file"]');
+    this.buttonElement = this.element.querySelector('button');
+  }
+  /**
+   * 메인 DOM 요소 생성
+   */
+  FileInputView.prototype.createElement = function () {
+    var container = document.createElement('div');
+    var baseClasses = "".concat(FILE_INPUT_CLASS_NAMES.fileInput, " ").concat(getFileInputSizeClassName(this.options.size));
+    var customClasses = this.options.className ? " ".concat(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 생성
+   */
+  FileInputView.prototype.createFileInput = function () {
+    var 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 생성
+   */
+  FileInputView.prototype.createInputContainer = function () {
+    var 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 생성
+   */
+  FileInputView.prototype.createLabelContainer = function () {
+    var container = document.createElement('div');
+    container.className = FILE_INPUT_CLASS_NAMES.label;
+    var 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 생성
+   */
+  FileInputView.prototype.createHelpIcon = function () {
+    var iconContainer = document.createElement('span');
+    iconContainer.className = FILE_INPUT_CLASS_NAMES.helpIcon;
+    iconContainer.innerHTML = HELP_ICON_SVG;
+    return iconContainer;
+  };
+  FileInputView.prototype.createButton = function () {
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = "ncua-btn ncua-btn--".concat(this.options.size, " ncua-btn--secondary-gray");
+    button.disabled = this.options.disabled;
+    button.insertAdjacentHTML('beforeend', SHARE_ICON_SVG);
+    var label = document.createElement('span');
+    label.className = 'ncua-btn__label';
+    label.textContent = this.options.buttonLabel;
+    button.appendChild(label);
+    return button;
+  };
+  /**
+   * Hint text 생성
+   */
+  FileInputView.prototype.createHintText = function () {
+    var hintText = document.createElement('div');
+    hintText.className = getHintTextClassName(this.options.destructive);
+    hintText.textContent = this.options.hintText;
+    return hintText;
+  };
+  /**
+   * Hint list 생성
+   */
+  FileInputView.prototype.createHintList = function () {
+    var _a;
+    var ul = document.createElement('ul');
+    ul.className = FILE_INPUT_CLASS_NAMES.hintList;
+    (_a = this.options.hintItems) === null || _a === void 0 ? void 0 : _a.forEach(function (hint) {
+      var li = document.createElement('li');
+      li.className = FILE_INPUT_CLASS_NAMES.hintItem;
+      li.textContent = hint;
+      ul.appendChild(li);
+    });
+    return ul;
+  };
+  FileInputView.prototype.setButtonDisabled = function (disabled) {
+    this.buttonElement.disabled = disabled;
+  };
+  FileInputView.prototype.getElement = function () {
+    return this.element;
+  };
+  FileInputView.prototype.getFileInputElement = function () {
+    return this.fileInputElement;
+  };
+  FileInputView.prototype.getButtonElement = function () {
+    return this.buttonElement;
+  };
+  FileInputView.prototype.destroy = function () {
+    // View 리소스 정리 - 이벤트 리스너는 FileInput에서 관리
+  };
+  return FileInputView;
+}();
+export { FileInputView };

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,182 @@
+import { ImageFileInputModel } from './ImageFileInputModel';
+import { ImageFileInputView } from './ImageFileInputView';
+var ImageFileInput = /** @class */function () {
+  function ImageFileInput(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) {
+        // 파일 추가 (maxFileCount가 1이면 교체)
+        _this.model.addFiles(validFiles);
+        // 콜백을 통해 선택된 파일 정보 전달
+        if (_this.model.isControlled()) {
+          (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, _this.model.getFiles());
+        } else {
+          (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, _this.model.getFiles());
+        }
+        // 자동 렌더링 (uncontrolled mode)
+        if (!_this.model.isControlled()) {
+          _this.render();
+        }
+      }
+      // 유효하지 않은 파일 처리
+      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 = '';
+    };
+    /**
+     * 파일 제거 핸들러
+     */
+    this.handleRemoveFile = function (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);
+    }
+  }
+  /**
+   * 컨테이너에 요소 추가
+   */
+  ImageFileInput.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("ImageFileInput: Container not found:", container);
+    }
+  };
+  /**
+   * 이벤트 리스너 설정
+   */
+  ImageFileInput.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 호출)
+   */
+  ImageFileInput.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);
+      this.render();
+    } else {
+      // Uncontrolled mode: onFileSelect 호출 및 렌더링
+      (_b = options.onFileSelect) === null || _b === void 0 ? void 0 : _b.call(options, files);
+      this.render();
+    }
+  };
+  /**
+   * 뷰 렌더링 (내부용)
+   */
+  ImageFileInput.prototype.render = function () {
+    var files = this.model.getFiles();
+    this.view.renderImagePreviews(files, this.handleRemoveFile, this.handleBrowseClick);
+  };
+  /**
+   * 이미지 프리뷰를 수동으로 렌더링
+   * 사용자가 콜백에서 직접 호출하여 프리뷰를 렌더링할 수 있음
+   */
+  ImageFileInput.prototype.renderImagePreviews = function () {
+    this.render();
+  };
+  /**
+   * DOM 요소 반환
+   */
+  ImageFileInput.prototype.getElement = function () {
+    return this.view.getElement();
+  };
+  /**
+   * 현재 파일 목록 반환
+   */
+  ImageFileInput.prototype.getFiles = function () {
+    return this.model.getFiles();
+  };
+  /**
+   * 초기 업로드된 파일 목록 설정
+   */
+  ImageFileInput.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();
+    }
+  };
+  /**
+   * 모든 파일 제거
+   */
+  ImageFileInput.prototype.clearFiles = function () {
+    this.model.clearFiles();
+    this.notifyChange();
+  };
+  /**
+   * disabled 상태 설정
+   */
+  ImageFileInput.prototype.setDisabled = function (disabled) {
+    this.model.setDisabled(disabled);
+    this.view.setButtonDisabled(disabled);
+  };
+  /**
+   * 리소스 정리
+   */
+  ImageFileInput.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 ImageFileInput;
+}();
+export { ImageFileInput };