@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  Table: true
-};
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _Table.Table;
-  }
-});
-var _Table = require("./Table");
-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];
-    }
-  });
-});
-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];
-    }
-  });
-});
-if (typeof window !== 'undefined') {
-  window.ncua = window.ncua || {};
-  window.ncua.Table = _Table.Table;
-}

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

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

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

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTooltipPositionClassName = exports.getTagSizeClassName = exports.TAG_CLASS_NAMES = void 0;
-// Tag 관련 CSS 클래스명 상수
-const 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'
-};
-const getTagSizeClassName = size => `ncua-tag--${size}`;
-exports.getTagSizeClassName = getTagSizeClassName;
-const getTooltipPositionClassName = position => `ncua-tag__tooltip--${position}`;
-exports.getTooltipPositionClassName = getTooltipPositionClassName;

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

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

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

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

@@ -1,44 +0,0 @@
-"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;
-}