@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputView.js

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageFileInputView = void 0;
 var _classNames = require("./const/classNames");
-var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
-  function ImageFileInputView(options, model) {
+class ImageFileInputView {
+  constructor(options, model) {
     this.renderedFiles = []; // 이미 렌더링된 파일들 추적
     this.previewUrls = new Map(); // 파일 URL 추적
     this.options = options;
     this.model = model;
     this.element = this.createElement();
-    this.previewsContainer = this.element.querySelector(".".concat(_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previews));
+    this.previewsContainer = this.element.querySelector(`.${_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previews}`);
     this.fileInputElement = this.element.querySelector('input[type="file"]');
     this.buttonElement = this.element.querySelector('button.ncua-btn');
   }
   /**
    * 메인 DOM 요소 생성
    */
-  ImageFileInputView.prototype.createElement = function () {
-    var mainContainer = document.createElement('div');
-    var baseClasses = "".concat(_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.imageFileInput, " ").concat((0, _classNames.getImageFileInputSizeClassName)(this.options.size));
-    var customClasses = this.options.className ? " ".concat(this.options.className) : '';
+  createElement() {
+    const mainContainer = document.createElement('div');
+    const baseClasses = `${_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.imageFileInput} ${(0, _classNames.getImageFileInputSizeClassName)(this.options.size)}`;
+    const customClasses = this.options.className ? ` ${this.options.className}` : '';
     mainContainer.className = baseClasses + customClasses;
     // Image previews container
-    var previewsContainer = document.createElement('div');
+    const previewsContainer = document.createElement('div');
     previewsContainer.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previews;
     mainContainer.appendChild(previewsContainer);
     // File input container
-    var fileInputContainer = document.createElement('div');
-    var fileInputClasses = "".concat(_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.fileInput, " ").concat((0, _classNames.getFileInputSizeClassName)(this.options.size));
+    const fileInputContainer = document.createElement('div');
+    const fileInputClasses = `${_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.fileInput} ${(0, _classNames.getFileInputSizeClassName)(this.options.size)}`;
     fileInputContainer.className = fileInputClasses;
     // Hidden file input 생성
     fileInputContainer.appendChild(this.createFileInput());
@@ -42,12 +42,12 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
     }
     mainContainer.appendChild(fileInputContainer);
     return mainContainer;
-  };
+  }
   /**
    * Hidden file input 생성
    */
-  ImageFileInputView.prototype.createFileInput = function () {
-    var input = document.createElement('input');
+  createFileInput() {
+    const input = document.createElement('input');
     input.type = 'file';
     input.hidden = true;
     input.tabIndex = -1;
@@ -63,12 +63,12 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
       input.name = this.options.fileInputName;
     }
     return input;
-  };
+  }
   /**
    * Input container 생성
    */
-  ImageFileInputView.prototype.createInputContainer = function () {
-    var container = document.createElement('div');
+  createInputContainer() {
+    const container = document.createElement('div');
     container.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.inputContainer;
     // Label
     if (this.options.label) {
@@ -81,14 +81,14 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
       container.appendChild(this.createHintText());
     }
     return container;
-  };
+  }
   /**
    * Label container 생성
    */
-  ImageFileInputView.prototype.createLabelContainer = function () {
-    var container = document.createElement('div');
+  createLabelContainer() {
+    const container = document.createElement('div');
     container.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.label;
-    var label = document.createElement('label');
+    const label = document.createElement('label');
     label.className = (0, _classNames.getLabelClassName)(this.options.isRequired);
     label.textContent = this.options.label;
     container.appendChild(label);
@@ -96,30 +96,30 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
       container.appendChild(this.createHelpIcon());
     }
     return container;
-  };
+  }
   /**
    * Help icon 생성
    */
-  ImageFileInputView.prototype.createHelpIcon = function () {
-    var iconContainer = document.createElement('span');
+  createHelpIcon() {
+    const iconContainer = document.createElement('span');
     iconContainer.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.helpIcon;
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('width', '16');
     svg.setAttribute('height', '16');
     svg.setAttribute('viewBox', '0 0 24 24');
     svg.setAttribute('fill', 'none');
     svg.setAttribute('stroke', 'currentColor');
-    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     circle.setAttribute('cx', '12');
     circle.setAttribute('cy', '12');
     circle.setAttribute('r', '10');
     circle.setAttribute('stroke-width', '2');
-    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     path.setAttribute('d', 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3');
     path.setAttribute('stroke-width', '2');
     path.setAttribute('stroke-linecap', 'round');
     path.setAttribute('stroke-linejoin', 'round');
-    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
     line.setAttribute('x1', '12');
     line.setAttribute('y1', '17');
     line.setAttribute('x2', '12.01');
@@ -131,28 +131,28 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
     svg.appendChild(line);
     iconContainer.appendChild(svg);
     return iconContainer;
-  };
+  }
   /**
    * Button 생성 (파일 찾기)
    */
-  ImageFileInputView.prototype.createButton = function () {
-    var button = document.createElement('button');
+  createButton() {
+    const button = document.createElement('button');
     button.type = 'button';
-    button.className = "ncua-btn ncua-btn--xs ncua-btn--secondary-gray";
+    button.className = `ncua-btn ncua-btn--xs ncua-btn--secondary-gray`;
     button.disabled = this.options.disabled;
-    var iconSvg = this.createShareIcon();
+    const iconSvg = this.createShareIcon();
     button.appendChild(iconSvg);
-    var label = document.createElement('span');
+    const label = document.createElement('span');
     label.className = 'ncua-btn__label';
     label.textContent = this.options.buttonLabel;
     button.appendChild(label);
     return button;
-  };
+  }
   /**
    * Share icon (업로드 아이콘) 생성
    */
-  ImageFileInputView.prototype.createShareIcon = function () {
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  createShareIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     svg.setAttribute('width', '14');
     svg.setAttribute('height', '14');
@@ -160,7 +160,7 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
     svg.setAttribute('fill', 'none');
     svg.setAttribute('stroke', 'none');
     svg.classList.add('ncua-btn__icon');
-    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     path.setAttribute('stroke', 'currentColor');
     path.setAttribute('stroke-linecap', 'round');
     path.setAttribute('stroke-linejoin', 'round');
@@ -168,12 +168,12 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
     path.setAttribute('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.appendChild(path);
     return svg;
-  };
+  }
   /**
    * Trash icon (삭제 아이콘) 생성
    */
-  ImageFileInputView.prototype.createTrashIcon = function () {
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  createTrashIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     svg.setAttribute('width', '20');
     svg.setAttribute('height', '20');
@@ -181,7 +181,7 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
     svg.setAttribute('fill', 'none');
     svg.setAttribute('stroke', 'currentColor');
     svg.classList.add('ncua-btn__icon');
-    var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     path1.setAttribute('stroke', 'currentColor');
     path1.setAttribute('stroke-linecap', 'round');
     path1.setAttribute('stroke-linejoin', 'round');
@@ -189,166 +189,168 @@ var ImageFileInputView = exports.ImageFileInputView = /** @class */function () {
     path1.setAttribute('d', 'M16 6v-.8c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 2 13.92 2 12.8 2h-1.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C8 3.52 8 4.08 8 5.2V6m2 5.5v5m4-5v5M3 6h18m-2 0v11.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C16.72 22 15.88 22 14.2 22H9.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C5 19.72 5 18.88 5 17.2V6');
     svg.appendChild(path1);
     return svg;
-  };
+  }
   /**
    * Hint text 생성
    */
-  ImageFileInputView.prototype.createHintText = function () {
-    var hintText = document.createElement('div');
+  createHintText() {
+    const hintText = document.createElement('div');
     hintText.className = (0, _classNames.getHintTextClassName)(this.options.destructive);
     hintText.textContent = this.options.hintText;
     return hintText;
-  };
+  }
   /**
    * Hint list 생성
    * Note: 힌트 리스트는 컴포넌트 size와 관계없이 항상 xs 사이즈로 고정됨
    */
-  ImageFileInputView.prototype.createHintList = function () {
-    var _a;
-    var ul = document.createElement('ul');
+  createHintList() {
+    const ul = document.createElement('ul');
     ul.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.hintList;
-    (_a = this.options.hintItems) === null || _a === void 0 ? void 0 : _a.forEach(function (hint) {
-      var li = document.createElement('li');
+    this.options.hintItems?.forEach(hint => {
+      const li = document.createElement('li');
       li.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.hintItem;
       li.textContent = hint;
       ul.appendChild(li);
     });
     return ul;
-  };
+  }
   /**
    * 이미지 프리뷰 렌더링
    */
-  ImageFileInputView.prototype.renderImagePreviews = function (files, onRemove, onBrowseClick) {
-    var _this = this;
+  renderImagePreviews(files, onRemove, onBrowseClick) {
     // 기존 프리뷰 정리
     this.cleanupPreviews();
     // 새로운 프리뷰 렌더링
-    files.forEach(function (file, index) {
-      var previewContainer = _this.createImagePreview(file, index, onRemove);
-      _this.previewsContainer.appendChild(previewContainer);
-      _this.renderedFiles.push(file);
+    files.forEach((file, index) => {
+      const previewContainer = this.createImagePreview(file, index, onRemove);
+      this.previewsContainer.appendChild(previewContainer);
+      this.renderedFiles.push(file);
     });
     // 빈 슬롯 표시 여부 확인
-    var showEmptySlot = this.options.maxFileCount ? files.length < this.options.maxFileCount : files.length === 0;
+    const showEmptySlot = this.options.maxFileCount ? files.length < this.options.maxFileCount : files.length === 0;
     if (showEmptySlot) {
-      var emptySlot = this.createEmptySlot(onBrowseClick);
+      const emptySlot = this.createEmptySlot(onBrowseClick);
       this.previewsContainer.appendChild(emptySlot);
     }
-  };
+  }
   /**
    * 이미지 프리뷰 생성
    */
-  ImageFileInputView.prototype.createImagePreview = function (file, index, onRemove) {
-    var container = document.createElement('div');
+  createImagePreview(file, index, onRemove) {
+    const container = document.createElement('div');
     container.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer;
     // 이미지 요소 생성
-    var img = document.createElement('img');
+    const img = document.createElement('img');
     img.className = _classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewImage;
     img.alt = file.name;
     // 이미지 URL 생성
-    var isInitialFile = this.model.isInitialFile(file);
+    const isInitialFile = this.model.isInitialFile(file);
     if (isInitialFile) {
       // 초기 파일: fileImageUrl 사용
-      var imageUrl = this.model.getInitialFileImageUrl(file);
+      const imageUrl = this.model.getInitialFileImageUrl(file);
       if (imageUrl) {
         img.src = imageUrl;
       }
     } else {
       // 새로 추가된 파일: createObjectURL 사용
-      var url = URL.createObjectURL(file);
+      const url = URL.createObjectURL(file);
       img.src = url;
       this.previewUrls.set(file, url);
     }
     container.appendChild(img);
     // 삭제 버튼 생성
-    var removeButton = document.createElement('button');
+    const removeButton = document.createElement('button');
     removeButton.type = 'button';
-    removeButton.className = "ncua-btn ncua-btn--sm ncua-btn--text ".concat(_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewRemoveButton);
+    removeButton.className = `ncua-btn ncua-btn--sm ncua-btn--text ${_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewRemoveButton}`;
     removeButton.setAttribute('aria-label', 'Remove image');
-    var trashIcon = this.createTrashIcon();
+    const trashIcon = this.createTrashIcon();
     removeButton.appendChild(trashIcon);
-    removeButton.addEventListener('click', function () {
-      return onRemove(index);
-    });
+    removeButton.addEventListener('click', () => onRemove(index));
     container.appendChild(removeButton);
     return container;
-  };
+  }
   /**
    * 빈 슬롯 생성 (파일 찾기 버튼)
    */
-  ImageFileInputView.prototype.createEmptySlot = function (onBrowseClick) {
-    var _this = this;
-    var wrapper = document.createElement('div');
+  createEmptySlot(onBrowseClick) {
+    const wrapper = document.createElement('div');
     wrapper.className = 'ncua-image-file-input__empty-slot-wrapper';
-    var button = document.createElement('button');
+    const button = document.createElement('button');
     button.type = 'button';
-    button.className = "ncua-btn ncua-btn--".concat(this.options.size, " ncua-btn--secondary-gray ").concat(_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer);
+    button.className = `ncua-btn ncua-btn--${this.options.size} ncua-btn--secondary-gray ${_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer}`;
     button.disabled = this.options.disabled;
     button.setAttribute('aria-label', this.options.imagePreviewTooltipLabel);
     button.addEventListener('click', onBrowseClick);
     wrapper.addEventListener('click', onBrowseClick);
     wrapper.appendChild(button);
     // Tooltip 생성 및 추가
-    var tooltip = this.createTooltip();
+    const tooltip = this.createTooltip();
     wrapper.appendChild(tooltip);
     // Hover 이벤트로 tooltip 표시/숨김
-    wrapper.addEventListener('mouseenter', function () {
-      if (!_this.options.disabled) {
+    wrapper.addEventListener('mouseenter', () => {
+      if (!this.options.disabled) {
         tooltip.style.display = 'block';
       }
     });
-    wrapper.addEventListener('mouseleave', function () {
+    wrapper.addEventListener('mouseleave', () => {
       tooltip.style.display = 'none';
     });
     return wrapper;
-  };
+  }
   /**
    * Tooltip 생성
    */
-  ImageFileInputView.prototype.createTooltip = function () {
-    var iconSize = this.options.size === 'xs' ? '48' : '80';
-    var tooltipHTML = "\n      <svg width=\"".concat(iconSize, "\" height=\"").concat(iconSize, "\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" style=\"opacity: 0; cursor: pointer;\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2\"></circle>\n      </svg>\n      <span class=\"ncua-tooltip__bg ncua-tooltip__bg--black ncua-tooltip__bg--bottom ncua-tooltip__bg--visible\">\n        <span class=\"ncua-tooltip__content\">").concat(this.options.imagePreviewTooltipLabel, "</span>\n      </span>\n    ");
-    var tooltip = document.createElement('span');
+  createTooltip() {
+    const iconSize = this.options.size === 'xs' ? '48' : '80';
+    const tooltipHTML = `
+      <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" style="opacity: 0; cursor: pointer;">
+        <circle cx="12" cy="12" r="10" stroke-width="2"></circle>
+      </svg>
+      <span class="ncua-tooltip__bg ncua-tooltip__bg--black ncua-tooltip__bg--bottom ncua-tooltip__bg--visible">
+        <span class="ncua-tooltip__content">${this.options.imagePreviewTooltipLabel}</span>
+      </span>
+    `;
+    const tooltip = document.createElement('span');
     tooltip.className = 'ncua-tooltip ncua-tooltip--sm ncua-tooltip--short';
     tooltip.style.display = 'none';
     tooltip.innerHTML = tooltipHTML;
     return tooltip;
-  };
+  }
   /**
    * 기존 프리뷰 정리
    */
-  ImageFileInputView.prototype.cleanupPreviews = function () {
+  cleanupPreviews() {
     // Blob URL 정리
-    this.previewUrls.forEach(function (url) {
+    this.previewUrls.forEach(url => {
       URL.revokeObjectURL(url);
     });
     this.previewUrls.clear();
     // DOM 정리
     this.previewsContainer.innerHTML = '';
     this.renderedFiles = [];
-  };
-  ImageFileInputView.prototype.setButtonDisabled = function (disabled) {
+  }
+  setButtonDisabled(disabled) {
     this.buttonElement.disabled = disabled;
     // 빈 슬롯 wrapper 내부의 버튼도 disabled 설정
-    var emptySlotWrapper = this.previewsContainer.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+    const emptySlotWrapper = this.previewsContainer.querySelector('.ncua-image-file-input__empty-slot-wrapper');
     if (emptySlotWrapper) {
-      var emptySlotButton = emptySlotWrapper.querySelector(".".concat(_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer, ".ncua-btn"));
+      const emptySlotButton = emptySlotWrapper.querySelector(`.${_classNames.IMAGE_FILE_INPUT_CLASS_NAMES.previewContainer}.ncua-btn`);
       if (emptySlotButton) {
         emptySlotButton.disabled = disabled;
       }
     }
-  };
-  ImageFileInputView.prototype.getElement = function () {
+  }
+  getElement() {
     return this.element;
-  };
-  ImageFileInputView.prototype.getFileInputElement = function () {
+  }
+  getFileInputElement() {
     return this.fileInputElement;
-  };
-  ImageFileInputView.prototype.getButtonElement = function () {
+  }
+  getButtonElement() {
     return this.buttonElement;
-  };
-  ImageFileInputView.prototype.destroy = function () {
+  }
+  destroy() {
     this.cleanupPreviews();
-  };
-  return ImageFileInputView;
-}();
+  }
+}
+exports.ImageFileInputView = ImageFileInputView;

package/dist/cjs/assets/scripts/imageFileInput/const/classNames.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getLabelClassName = exports.getImageFileInputSizeClassName = exports.getHintTextClassName = exports.getFileInputSizeClassName = exports.getButtonSizeClassName = exports.IMAGE_FILE_INPUT_CLASS_NAMES = void 0;
 // ImageFileInput 관련 CSS 클래스명 상수
-var IMAGE_FILE_INPUT_CLASS_NAMES = exports.IMAGE_FILE_INPUT_CLASS_NAMES = {
+const IMAGE_FILE_INPUT_CLASS_NAMES = exports.IMAGE_FILE_INPUT_CLASS_NAMES = {
   imageFileInput: 'ncua-image-file-input',
   previews: 'ncua-image-file-input__previews',
   previewContainer: 'ncua-image-file-input__preview-container',
@@ -19,23 +19,13 @@ var IMAGE_FILE_INPUT_CLASS_NAMES = exports.IMAGE_FILE_INPUT_CLASS_NAMES = {
   hintList: 'ncua-file-input__hint-list',
   hintItem: 'ncua-file-input__hint-item'
 };
-var getImageFileInputSizeClassName = function (size) {
-  return "ncua-image-file-input--".concat(size);
-};
+const getImageFileInputSizeClassName = size => `ncua-image-file-input--${size}`;
 exports.getImageFileInputSizeClassName = getImageFileInputSizeClassName;
-var getFileInputSizeClassName = function (size) {
-  return "ncua-file-input--".concat(size);
-};
+const getFileInputSizeClassName = size => `ncua-file-input--${size}`;
 exports.getFileInputSizeClassName = getFileInputSizeClassName;
-var getButtonSizeClassName = function (size) {
-  return "ncua-button--".concat(size);
-};
+const getButtonSizeClassName = size => `ncua-button--${size}`;
 exports.getButtonSizeClassName = getButtonSizeClassName;
-var getLabelClassName = function (isRequired) {
-  return isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
-};
+const getLabelClassName = isRequired => isRequired ? 'ncua-label ncua-label--required' : 'ncua-label';
 exports.getLabelClassName = getLabelClassName;
-var getHintTextClassName = function (destructive) {
-  return destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';
-};
+const getHintTextClassName = destructive => destructive ? 'ncua-input__hint-text ncua-input__hint-text--destructive' : 'ncua-input__hint-text';
 exports.getHintTextClassName = getHintTextClassName;

package/dist/cjs/assets/scripts/index.js

@@ -11,11 +11,13 @@ var _progressBar = require("./progress-bar");
 var _selectBox = require("./selectBox");
 var _slider = require("./slider");
 var _tab = require("./tab");
+var _table = require("./table");
 var _tag = require("./tag");
 var _tooltip = require("./tooltip");
 window.ncua = {
   Slider: _slider.Slider,
   Tab: _tab.Tab,
+  Table: _table.Table,
   Tag: _tag.Tag,
   DatePicker: _datePicker.DatePicker,
   SelectBox: _selectBox.SelectBox,

package/dist/cjs/assets/scripts/modal/Modal.js

@@ -8,43 +8,31 @@ var _classNames = require("./const/classNames");
 var _ModalHeader = require("./ModalHeader");
 var _ModalContent = require("./ModalContent");
 var _ModalActions = require("./ModalActions");
-var __assign = void 0 && (void 0).__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 Modal = exports.Modal = /** @class */function () {
-  function Modal(options) {
-    if (options === void 0) {
-      options = {};
-    }
-    var _this = this;
+class Modal {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.isOpen = false;
-    this.handleBackdropClick = function (e) {
-      if (_this.options.closeOnBackdropClick && e.target === e.currentTarget) {
-        _this.close();
+    this.handleBackdropClick = e => {
+      if (this.options.closeOnBackdropClick && e.target === e.currentTarget) {
+        this.close();
       }
     };
-    this.handleKeyDown = function (e) {
-      if (_this.isOpen && _this.options.closeOnEsc && e.key === 'Escape') {
-        _this.close();
+    this.handleKeyDown = e => {
+      if (this.isOpen && this.options.closeOnEsc && e.key === 'Escape') {
+        this.close();
       }
     };
-    this.options = __assign({
+    this.options = {
       size: 'md',
       closeOnBackdropClick: false,
       closeOnEsc: true,
       className: '',
-      onClose: function () {}
-    }, options);
+      onClose: () => {},
+      ...options
+    };
     this.createElement();
   }
-  Modal.prototype.createElement = function () {
+  createElement() {
     // 백드롭 요소 생성
     this.element = document.createElement('div');
     this.element.className = this.getBackdropClasses();
@@ -53,14 +41,14 @@ var Modal = exports.Modal = /** @class */function () {
     this.modalElement = document.createElement('div');
     this.modalElement.className = this.getModalClasses();
     this.element.appendChild(this.modalElement);
-  };
-  Modal.prototype.getBackdropClasses = function () {
-    return "".concat(_classNames.MODAL_CLASS_NAMES.backdrop, " ").concat(this.options.className); // ncua-modal-backdrop + className
-  };
-  Modal.prototype.getModalClasses = function () {
-    return "".concat(_classNames.MODAL_CLASS_NAMES.modal, " ").concat((0, _classNames.getModalSizeClassNames)(this.options.size)); // ncua-modal ncua-modal--${size}
-  };
-  Modal.prototype.open = function () {
+  }
+  getBackdropClasses() {
+    return `${_classNames.MODAL_CLASS_NAMES.backdrop} ${this.options.className}`; // ncua-modal-backdrop + className
+  }
+  getModalClasses() {
+    return `${_classNames.MODAL_CLASS_NAMES.modal} ${(0, _classNames.getModalSizeClassNames)(this.options.size)}`; // ncua-modal ncua-modal--${size}
+  }
+  open() {
     if (this.isOpen) return;
     this.isOpen = true;
     // zIndex 설정 적용 (값이 있을 때만)
@@ -70,8 +58,8 @@ var Modal = exports.Modal = /** @class */function () {
     document.body.appendChild(this.element);
     document.addEventListener('keydown', this.handleKeyDown);
     document.body.classList.add(_classNames.MODAL_CLASS_NAMES.modalOpen);
-  };
-  Modal.prototype.close = function () {
+  }
+  close() {
     if (!this.isOpen) return;
     this.isOpen = false;
     if (this.element.parentNode) {
@@ -82,35 +70,35 @@ var Modal = exports.Modal = /** @class */function () {
     if (this.options.onClose) {
       this.options.onClose();
     }
-  };
-  Modal.prototype.destroy = function () {
+  }
+  destroy() {
     this.close();
     this.element.removeEventListener('click', this.handleBackdropClick);
-  };
-  Modal.prototype.setContent = function (content) {
+  }
+  setContent(content) {
     if (typeof content === 'string') {
       this.modalElement.innerHTML = content;
     } else {
       this.modalElement.innerHTML = '';
       this.modalElement.appendChild(content);
     }
-  };
-  Modal.prototype.getElement = function () {
+  }
+  getElement() {
     return this.element;
-  };
-  Modal.prototype.getModalElement = function () {
+  }
+  getModalElement() {
     return this.modalElement;
-  };
-  Modal.prototype.isModalOpen = function () {
+  }
+  isModalOpen() {
     return this.isOpen;
-  };
+  }
   // Static factory method
-  Modal.create = function (options) {
+  static create(options) {
     return new Modal(options);
-  };
-  // Static properties for HTML usage
-  Modal.Header = _ModalHeader.ModalHeader;
-  Modal.Content = _ModalContent.ModalContent;
-  Modal.Actions = _ModalActions.ModalActions;
-  return Modal;
-}();
+  }
+}
+// Static properties for HTML usage
+exports.Modal = Modal;
+Modal.Header = _ModalHeader.ModalHeader;
+Modal.Content = _ModalContent.ModalContent;
+Modal.Actions = _ModalActions.ModalActions;