@ncds/ui-admin 1.3.0 → 1.4.1

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

@@ -0,0 +1,268 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _classNames = require("./const/classNames");
+var _sizes = require("./const/sizes");
+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);
+};
+// CSS 변수 값을 가져오는 유틸리티 함수
+var getCSSVariable = function (variableName, fallback) {
+  if (fallback === void 0) {
+    fallback = '';
+  }
+  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 || _sizes.DEFAULT_TOOLTIP_WIDTH;
+  var tooltipHeight = tooltipRect.height || _sizes.DEFAULT_TOOLTIP_HEIGHT;
+  var spaces = {
+    top: triggerRect.top,
+    bottom: viewportHeight - triggerRect.bottom,
+    left: triggerRect.left,
+    right: viewportWidth - triggerRect.right
+  };
+  // 위/아래 공간을 먼저 확인하고 우선순위 결정
+  var hasTopSpace = spaces.top >= tooltipHeight + _sizes.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 + _sizes.MARGIN : spaces.bottom >= tooltipHeight + _sizes.MARGIN;
+    var hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + _sizes.MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+    : spaces.left >= tooltipWidth + _sizes.MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
+    if (hasVerticalSpace && hasHorizontalSpace) {
+      return position;
+    }
+  }
+  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  return fallbackPosition;
+};
+var Tag = exports.Tag = /** @class */function () {
+  function Tag(options) {
+    var _this = this;
+    this.isTooltipVisible = false;
+    this.calculatedPosition = 'top-right';
+    this.tooltipElement = null;
+    this.handleMouseEnter = function () {
+      if (!_this.shouldTruncate()) return;
+      _this.isTooltipVisible = true;
+      // 위치 계산
+      if (_this.tooltipElement) {
+        var optimalPosition = calculateOptimalPosition(_this.element, _this.tooltipElement);
+        _this.calculatedPosition = optimalPosition;
+      } else {
+        // 툴팁이 없으면 더미 요소로 계산
+        var dummyTooltipElement = document.createElement('div');
+        dummyTooltipElement.style.width = "".concat(_sizes.DEFAULT_TOOLTIP_WIDTH, "px");
+        dummyTooltipElement.style.height = "".concat(_sizes.DEFAULT_TOOLTIP_HEIGHT, "px");
+        var optimalPosition = calculateOptimalPosition(_this.element, dummyTooltipElement);
+        _this.calculatedPosition = optimalPosition;
+      }
+      _this.createTooltip();
+    };
+    this.handleMouseLeave = function () {
+      _this.removeTooltip(); // removeTooltip에서 isTooltipVisible을 false로 설정
+    };
+    this.options = __assign({
+      size: 'sm',
+      maxLength: 20
+    }, options);
+    this.createElement();
+  }
+  Tag.prototype.createElement = function () {
+    // 메인 태그 요소 생성
+    this.element = document.createElement('span');
+    this.element.className = this.getTagClasses();
+    // 텍스트 길이 체크 및 말줄임 처리
+    var shouldTruncate = this.shouldTruncate();
+    var displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
+    // 아이콘 추가
+    if (this.options.icon) {
+      var iconElement = this.createSideSlot(this.options.icon);
+      if (iconElement) {
+        this.element.appendChild(iconElement);
+      }
+    }
+    // 텍스트 요소 생성
+    var textElement = document.createElement('span');
+    textElement.className = _classNames.TAG_CLASS_NAMES.text;
+    textElement.textContent = displayText;
+    this.element.appendChild(textElement);
+    // 카운트 추가
+    if (this.options.count) {
+      var countElement = document.createElement('span');
+      countElement.className = _classNames.TAG_CLASS_NAMES.count;
+      countElement.textContent = this.options.count;
+      this.element.appendChild(countElement);
+    }
+    // 닫기 버튼 추가
+    if (this.options.close) {
+      var closeButton = this.createCloseButton();
+      this.element.appendChild(closeButton);
+    }
+    // 툴팁 이벤트 리스너 추가 (텍스트가 잘린 경우에만)
+    if (shouldTruncate) {
+      this.element.addEventListener('mouseenter', this.handleMouseEnter);
+      this.element.addEventListener('mouseleave', this.handleMouseLeave);
+    }
+  };
+  Tag.prototype.getTagClasses = function () {
+    var classes = [_classNames.TAG_CLASS_NAMES.tag, (0, _classNames.getTagSizeClassName)(this.options.size)];
+    if (this.shouldTruncate()) {
+      classes.push(_classNames.TAG_CLASS_NAMES.truncated);
+    }
+    return classes.join(' ');
+  };
+  Tag.prototype.shouldTruncate = function () {
+    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) {
+    if (slot.type === 'icon') {
+      // 아이콘 SVG 문자열을 DOM 요소로 변환 (DOMParser 사용)
+      var iconSVG = this.createIconSVG(slot.icon, _sizes.iconSize[this.options.size], slot.color);
+      var parser = new DOMParser();
+      var 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');
+      if (slot.color) {
+        dotElement.style.backgroundColor = slot.color;
+      }
+      return dotElement;
+    }
+    // 커스텀 요소는 그대로 반환
+    return slot.children;
+  };
+  Tag.prototype.createIconSVG = function (iconName, size, color) {
+    var colorStyle = color ? " style=\"color: ".concat(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>");
+    }
+    // 기본 빈 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 () {
+    // react와 동일한 구조로 직접 구현
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = _classNames.TAG_CLASS_NAMES.close;
+    // React 버전과 동일한 SVG 생성 (문자열 방식)
+    var grayColor = getCSSVariable('--gray-300', '#a4a5a8');
+    var svgString = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(_sizes.iconSize[this.options.size], "\" height=\"").concat(_sizes.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>");
+    // DOMParser로 SVG 문자열을 DOM 요소로 변환
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgString, 'image/svg+xml');
+    var svg = doc.documentElement;
+    button.appendChild(svg);
+    // 이벤트 리스너 추가
+    if (this.options.onButtonClick) {
+      button.addEventListener('click', this.options.onButtonClick);
+    }
+    return button;
+  };
+  Tag.prototype.createTooltip = function () {
+    if (this.tooltipElement || !this.isTooltipVisible) {
+      return; // 이미 생성됨 또는 표시하지 않음
+    }
+    this.tooltipElement = document.createElement('span');
+    this.tooltipElement.className = "".concat(_classNames.TAG_CLASS_NAMES.tooltip, " ").concat((0, _classNames.getTooltipPositionClassName)(this.calculatedPosition));
+    var tooltipContent = document.createElement('span');
+    tooltipContent.className = _classNames.TAG_CLASS_NAMES.tooltipContent;
+    tooltipContent.textContent = this.options.text;
+    this.tooltipElement.appendChild(tooltipContent);
+    this.element.appendChild(this.tooltipElement);
+  };
+  Tag.prototype.removeTooltip = function () {
+    if (this.tooltipElement) {
+      this.element.removeChild(this.tooltipElement);
+      this.tooltipElement = null;
+    }
+    this.isTooltipVisible = false;
+  };
+  Tag.prototype.getElement = function () {
+    return this.element;
+  };
+  Tag.prototype.isTooltipShown = function () {
+    return this.isTooltipVisible;
+  };
+  Tag.prototype.setText = function (text) {
+    this.options.text = text;
+    this.updateTextElement();
+  };
+  Tag.prototype.setCount = function (count) {
+    this.options.count = count;
+    this.updateCountElement();
+  };
+  Tag.prototype.updateTextElement = function () {
+    var textElement = this.element.querySelector(".".concat(_classNames.TAG_CLASS_NAMES.text));
+    if (textElement) {
+      var shouldTruncate = this.shouldTruncate();
+      var displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
+      textElement.textContent = displayText;
+      // 클래스 업데이트
+      if (shouldTruncate) {
+        this.element.classList.add(_classNames.TAG_CLASS_NAMES.truncated);
+      } else {
+        this.element.classList.remove(_classNames.TAG_CLASS_NAMES.truncated);
+      }
+    }
+  };
+  Tag.prototype.updateCountElement = function () {
+    var existingCount = this.element.querySelector(".".concat(_classNames.TAG_CLASS_NAMES.count));
+    if (this.options.count) {
+      if (existingCount) {
+        existingCount.textContent = this.options.count;
+      } else {
+        // 카운트 요소 새로 생성
+        var countElement = document.createElement('span');
+        countElement.className = _classNames.TAG_CLASS_NAMES.count;
+        countElement.textContent = this.options.count;
+        // 닫기 버튼 앞에 삽입
+        var closeButton = this.element.querySelector(".".concat(_classNames.TAG_CLASS_NAMES.close));
+        if (closeButton) {
+          this.element.insertBefore(countElement, closeButton);
+        } else {
+          this.element.appendChild(countElement);
+        }
+      }
+    } else {
+      // 카운트 제거
+      if (existingCount) {
+        this.element.removeChild(existingCount);
+      }
+    }
+  };
+  Tag.prototype.destroy = function () {
+    this.element.removeEventListener('mouseenter', this.handleMouseEnter);
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave);
+    if (this.tooltipElement) {
+      this.removeTooltip();
+    }
+  };
+  return Tag;
+}();

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTooltipPositionClassName = exports.getTagSizeClassName = exports.TAG_CLASS_NAMES = void 0;
+// Tag 관련 CSS 클래스명 상수
+var TAG_CLASS_NAMES = exports.TAG_CLASS_NAMES = {
+  tag: 'ncua-tag',
+  text: 'ncua-tag__text',
+  count: 'ncua-tag__count',
+  close: 'ncua-tag__close',
+  tooltip: 'ncua-tag__tooltip',
+  tooltipContent: 'ncua-tag__tooltip-content',
+  truncated: 'ncua-tag--truncated'
+};
+var getTagSizeClassName = function (size) {
+  return "ncua-tag--".concat(size);
+};
+exports.getTagSizeClassName = getTagSizeClassName;
+var getTooltipPositionClassName = function (position) {
+  return "ncua-tag__tooltip--".concat(position);
+};
+exports.getTooltipPositionClassName = getTooltipPositionClassName;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _classNames = require("./classNames");
+Object.keys(_classNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _classNames[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _classNames[key];
+    }
+  });
+});
+var _sizes = require("./sizes");
+Object.keys(_sizes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sizes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sizes[key];
+    }
+  });
+});

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconSize = exports.MARGIN = exports.DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_HEIGHT = void 0;
+var iconSize = exports.iconSize = {
+  sm: 14,
+  md: 16
+};
+var MARGIN = exports.MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = exports.DEFAULT_TOOLTIP_HEIGHT = 60;

package/dist/cjs/assets/scripts/tag/const/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tag: true
+};
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function () {
+    return _Tag.Tag;
+  }
+});
+var _Tag = require("./Tag");
+var _types = require("./const/types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _classNames = require("./const/classNames");
+Object.keys(_classNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _classNames[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _classNames[key];
+    }
+  });
+});
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Tag = _Tag.Tag;
+}