@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/esm/assets/scripts/tag/Tag.js

@@ -1,116 +1,105 @@
-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 { TAG_CLASS_NAMES, getTagSizeClassName, getTooltipPositionClassName } from './const/classNames';
 import { iconSize, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, MARGIN } from './const/sizes';
 // CSS 변수 값을 가져오는 유틸리티 함수
-var getCSSVariable = function (variableName, fallback) {
-  if (fallback === void 0) {
-    fallback = '';
-  }
+const getCSSVariable = function (variableName) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() || fallback;
 };
 // 위치 계산 로직
-var calculateOptimalPosition = function (triggerElement, tooltipElement) {
-  var triggerRect = triggerElement.getBoundingClientRect();
-  var tooltipRect = tooltipElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth,
-    viewportHeight = window.innerHeight;
-  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  var spaces = {
+const calculateOptimalPosition = (triggerElement, tooltipElement) => {
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  const spaces = {
     top: triggerRect.top,
     bottom: viewportHeight - triggerRect.bottom,
     left: triggerRect.left,
     right: viewportWidth - triggerRect.right
   };
   // 위/아래 공간을 먼저 확인하고 우선순위 결정
-  var hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+  const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
   // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
-  var positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
-  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
-    var position = positions_1[_i];
-    var isTop = position.includes('top');
-    var isRight = position.includes('right');
-    var hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
-    var hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+  const positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+  for (const position of positions) {
+    const isTop = position.includes('top');
+    const isRight = position.includes('right');
+    const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+    const hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
     : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
     if (hasVerticalSpace && hasHorizontalSpace) {
       return position;
     }
   }
   // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
   return fallbackPosition;
 };
-var Tag = /** @class */function () {
-  function Tag(options) {
-    var _this = this;
+export class Tag {
+  constructor(options) {
     this.isTooltipVisible = false;
     this.calculatedPosition = 'top-right';
     this.tooltipElement = null;
-    this.handleMouseEnter = function () {
-      if (!_this.shouldTruncate()) return;
-      _this.isTooltipVisible = true;
+    this.handleMouseEnter = () => {
+      if (!this.shouldTruncate()) return;
+      this.isTooltipVisible = true;
       // 위치 계산
-      if (_this.tooltipElement) {
-        var optimalPosition = calculateOptimalPosition(_this.element, _this.tooltipElement);
-        _this.calculatedPosition = optimalPosition;
+      if (this.tooltipElement) {
+        const optimalPosition = calculateOptimalPosition(this.element, this.tooltipElement);
+        this.calculatedPosition = optimalPosition;
       } else {
         // 툴팁이 없으면 더미 요소로 계산
-        var dummyTooltipElement = document.createElement('div');
-        dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
-        dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
-        var optimalPosition = calculateOptimalPosition(_this.element, dummyTooltipElement);
-        _this.calculatedPosition = optimalPosition;
+        const dummyTooltipElement = document.createElement('div');
+        dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
+        dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
+        const optimalPosition = calculateOptimalPosition(this.element, dummyTooltipElement);
+        this.calculatedPosition = optimalPosition;
       }
-      _this.createTooltip();
+      this.createTooltip();
     };
-    this.handleMouseLeave = function () {
-      _this.removeTooltip(); // removeTooltip에서 isTooltipVisible을 false로 설정
+    this.handleMouseLeave = () => {
+      this.removeTooltip(); // removeTooltip에서 isTooltipVisible을 false로 설정
     };
-    this.options = __assign({
+    this.options = {
       size: 'sm',
-      maxLength: 20
-    }, options);
+      maxLength: 20,
+      ...options
+    };
     this.createElement();
   }
-  Tag.prototype.createElement = function () {
+  createElement() {
     // 메인 태그 요소 생성
     this.element = document.createElement('span');
     this.element.className = this.getTagClasses();
     // 텍스트 길이 체크 및 말줄임 처리
-    var shouldTruncate = this.shouldTruncate();
-    var displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
+    const shouldTruncate = this.shouldTruncate();
+    const displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
     // 아이콘 추가
     if (this.options.icon) {
-      var iconElement = this.createSideSlot(this.options.icon);
+      const iconElement = this.createSideSlot(this.options.icon);
       if (iconElement) {
         this.element.appendChild(iconElement);
       }
     }
     // 텍스트 요소 생성
-    var textElement = document.createElement('span');
+    const textElement = document.createElement('span');
     textElement.className = TAG_CLASS_NAMES.text;
     textElement.textContent = displayText;
     this.element.appendChild(textElement);
     // 카운트 추가
     if (this.options.count) {
-      var countElement = document.createElement('span');
+      const countElement = document.createElement('span');
       countElement.className = TAG_CLASS_NAMES.count;
       countElement.textContent = this.options.count;
       this.element.appendChild(countElement);
     }
     // 닫기 버튼 추가
     if (this.options.close) {
-      var closeButton = this.createCloseButton();
+      const closeButton = this.createCloseButton();
       this.element.appendChild(closeButton);
     }
     // 툴팁 이벤트 리스너 추가 (텍스트가 잘린 경우에만)
@@ -118,31 +107,31 @@ var Tag = /** @class */function () {
       this.element.addEventListener('mouseenter', this.handleMouseEnter);
       this.element.addEventListener('mouseleave', this.handleMouseLeave);
     }
-  };
-  Tag.prototype.getTagClasses = function () {
-    var classes = [TAG_CLASS_NAMES.tag, getTagSizeClassName(this.options.size)];
+  }
+  getTagClasses() {
+    const classes = [TAG_CLASS_NAMES.tag, getTagSizeClassName(this.options.size)];
     if (this.shouldTruncate()) {
       classes.push(TAG_CLASS_NAMES.truncated);
     }
     return classes.join(' ');
-  };
-  Tag.prototype.shouldTruncate = function () {
+  }
+  shouldTruncate() {
     return this.options.text.length > this.options.maxLength;
-  };
-  Tag.prototype.getTruncatedText = function () {
-    return "".concat(this.options.text.slice(0, this.options.maxLength - 2), "...");
-  };
-  Tag.prototype.createSideSlot = function (slot) {
+  }
+  getTruncatedText() {
+    return `${this.options.text.slice(0, this.options.maxLength - 2)}...`;
+  }
+  createSideSlot(slot) {
     if (slot.type === 'icon') {
       // 아이콘 SVG 문자열을 DOM 요소로 변환 (DOMParser 사용)
-      var iconSVG = this.createIconSVG(slot.icon, iconSize[this.options.size], slot.color);
-      var parser = new DOMParser();
-      var doc = parser.parseFromString(iconSVG, 'image/svg+xml');
+      const iconSVG = this.createIconSVG(slot.icon, iconSize[this.options.size], slot.color);
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(iconSVG, 'image/svg+xml');
       return doc.documentElement;
     }
     if (slot.type === 'dot') {
-      var dotElement = document.createElement('span');
-      dotElement.className = "ncua-dot ncua-dot--neutral ncua-dot--".concat(slot.size || 'sm');
+      const dotElement = document.createElement('span');
+      dotElement.className = `ncua-dot ncua-dot--neutral ncua-dot--${slot.size || 'sm'}`;
       if (slot.color) {
         dotElement.style.backgroundColor = slot.color;
       }
@@ -150,73 +139,77 @@ var Tag = /** @class */function () {
     }
     // 커스텀 요소는 그대로 반환
     return slot.children;
-  };
-  Tag.prototype.createIconSVG = function (iconName, size, color) {
-    var colorStyle = color ? " style=\"color: ".concat(color, "\"") : '';
+  }
+  createIconSVG(iconName, size, color) {
+    const colorStyle = color ? ` style="color: ${color}"` : '';
     // 현재는 arrow-left 아이콘만 지원
     if (iconName === 'arrow-left') {
-      return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"").concat(colorStyle, ">\n        <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 12H5m0 0 7 7m-7-7 7-7\" />\n      </svg>");
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"${colorStyle}>
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m0 0 7 7m-7-7 7-7" />
+      </svg>`;
     }
     // 기본 빈 SVG
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"").concat(colorStyle, "></svg>");
-  };
-  Tag.prototype.createCloseButton = function () {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"${colorStyle}></svg>`;
+  }
+  createCloseButton() {
     // react와 동일한 구조로 직접 구현
-    var button = document.createElement('button');
+    const button = document.createElement('button');
     button.type = 'button';
     button.className = TAG_CLASS_NAMES.close;
     // React 버전과 동일한 SVG 생성 (문자열 방식)
-    var grayColor = getCSSVariable('--gray-300', '#a4a5a8');
-    var svgString = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(iconSize[this.options.size], "\" height=\"").concat(iconSize[this.options.size], "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" style=\"color: ").concat(grayColor, "\">\n      <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>");
+    const grayColor = getCSSVariable('--gray-300', '#a4a5a8');
+    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize[this.options.size]}" height="${iconSize[this.options.size]}" fill="none" viewBox="0 0 24 24" stroke="none" style="color: ${grayColor}">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12" />
+    </svg>`;
     // DOMParser로 SVG 문자열을 DOM 요소로 변환
-    var parser = new DOMParser();
-    var doc = parser.parseFromString(svgString, 'image/svg+xml');
-    var svg = doc.documentElement;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const svg = doc.documentElement;
     button.appendChild(svg);
     // 이벤트 리스너 추가
     if (this.options.onButtonClick) {
       button.addEventListener('click', this.options.onButtonClick);
     }
     return button;
-  };
-  Tag.prototype.createTooltip = function () {
+  }
+  createTooltip() {
     if (this.tooltipElement || !this.isTooltipVisible) {
       return; // 이미 생성됨 또는 표시하지 않음
     }
     this.tooltipElement = document.createElement('span');
-    this.tooltipElement.className = "".concat(TAG_CLASS_NAMES.tooltip, " ").concat(getTooltipPositionClassName(this.calculatedPosition));
-    var tooltipContent = document.createElement('span');
+    this.tooltipElement.className = `${TAG_CLASS_NAMES.tooltip} ${getTooltipPositionClassName(this.calculatedPosition)}`;
+    const tooltipContent = document.createElement('span');
     tooltipContent.className = TAG_CLASS_NAMES.tooltipContent;
     tooltipContent.textContent = this.options.text;
     this.tooltipElement.appendChild(tooltipContent);
     this.element.appendChild(this.tooltipElement);
-  };
-  Tag.prototype.removeTooltip = function () {
+  }
+  removeTooltip() {
     if (this.tooltipElement) {
       this.element.removeChild(this.tooltipElement);
       this.tooltipElement = null;
     }
     this.isTooltipVisible = false;
-  };
-  Tag.prototype.getElement = function () {
+  }
+  getElement() {
     return this.element;
-  };
-  Tag.prototype.isTooltipShown = function () {
+  }
+  isTooltipShown() {
     return this.isTooltipVisible;
-  };
-  Tag.prototype.setText = function (text) {
+  }
+  setText(text) {
     this.options.text = text;
     this.updateTextElement();
-  };
-  Tag.prototype.setCount = function (count) {
+  }
+  setCount(count) {
     this.options.count = count;
     this.updateCountElement();
-  };
-  Tag.prototype.updateTextElement = function () {
-    var textElement = this.element.querySelector(".".concat(TAG_CLASS_NAMES.text));
+  }
+  updateTextElement() {
+    const textElement = this.element.querySelector(`.${TAG_CLASS_NAMES.text}`);
     if (textElement) {
-      var shouldTruncate = this.shouldTruncate();
-      var displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
+      const shouldTruncate = this.shouldTruncate();
+      const displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
       textElement.textContent = displayText;
       // 클래스 업데이트
       if (shouldTruncate) {
@@ -225,19 +218,19 @@ var Tag = /** @class */function () {
         this.element.classList.remove(TAG_CLASS_NAMES.truncated);
       }
     }
-  };
-  Tag.prototype.updateCountElement = function () {
-    var existingCount = this.element.querySelector(".".concat(TAG_CLASS_NAMES.count));
+  }
+  updateCountElement() {
+    const existingCount = this.element.querySelector(`.${TAG_CLASS_NAMES.count}`);
     if (this.options.count) {
       if (existingCount) {
         existingCount.textContent = this.options.count;
       } else {
         // 카운트 요소 새로 생성
-        var countElement = document.createElement('span');
+        const countElement = document.createElement('span');
         countElement.className = TAG_CLASS_NAMES.count;
         countElement.textContent = this.options.count;
         // 닫기 버튼 앞에 삽입
-        var closeButton = this.element.querySelector(".".concat(TAG_CLASS_NAMES.close));
+        const closeButton = this.element.querySelector(`.${TAG_CLASS_NAMES.close}`);
         if (closeButton) {
           this.element.insertBefore(countElement, closeButton);
         } else {
@@ -250,14 +243,12 @@ var Tag = /** @class */function () {
         this.element.removeChild(existingCount);
       }
     }
-  };
-  Tag.prototype.destroy = function () {
+  }
+  destroy() {
     this.element.removeEventListener('mouseenter', this.handleMouseEnter);
     this.element.removeEventListener('mouseleave', this.handleMouseLeave);
     if (this.tooltipElement) {
       this.removeTooltip();
     }
-  };
-  return Tag;
-}();
-export { Tag };
+  }
+}

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

@@ -1,5 +1,5 @@
 // Tag 관련 CSS 클래스명 상수
-export var TAG_CLASS_NAMES = {
+export const TAG_CLASS_NAMES = {
   tag: 'ncua-tag',
   text: 'ncua-tag__text',
   count: 'ncua-tag__count',
@@ -8,9 +8,5 @@ export var TAG_CLASS_NAMES = {
   tooltipContent: 'ncua-tag__tooltip-content',
   truncated: 'ncua-tag--truncated'
 };
-export var getTagSizeClassName = function (size) {
-  return "ncua-tag--".concat(size);
-};
-export var getTooltipPositionClassName = function (position) {
-  return "ncua-tag__tooltip--".concat(position);
-};
+export const getTagSizeClassName = size => `ncua-tag--${size}`;
+export const getTooltipPositionClassName = position => `ncua-tag__tooltip--${position}`;

package/dist/esm/assets/scripts/tag/const/sizes.js

@@ -1,7 +1,7 @@
-export var iconSize = {
+export const iconSize = {
   sm: 14,
   md: 16
 };
-export var MARGIN = 10;
-export var DEFAULT_TOOLTIP_WIDTH = 200;
-export var DEFAULT_TOOLTIP_HEIGHT = 60;
+export const MARGIN = 10;
+export const DEFAULT_TOOLTIP_WIDTH = 200;
+export const DEFAULT_TOOLTIP_HEIGHT = 60;