@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/cjs/src/components/switch/Switch.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b,
+    left = _a.left,
+    right = _a.right,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    value = _a.value,
+    _d = _a.defaultValue,
+    defaultValue = _d === void 0 ? left.value : _d,
+    onChange = _a.onChange,
+    className = _a.className,
+    name = _a.name,
+    refs = _a.refs;
+  // 값을 문자열로 정규화하는 함수
+  var normalizeValue = function (val) {
+    return typeof val === 'boolean' ? String(val) : val;
+  };
+  // 유효한 사이즈인지 확인하는 함수
+  var getValidSize = function (size) {
+    var validSizes = ['xxs', 'xs', 'sm', 'md'];
+    return size && validSizes.includes(size) ? size : 'xs';
+  };
+  var isBooleanType = typeof left.value === 'boolean' && typeof right.value === 'boolean';
+  // 현재 값 처리
+  var getCurrentValue = function () {
+    if (value === undefined) return undefined;
+    if (isBooleanType && typeof value === 'boolean') {
+      return normalizeValue(value ? left.value : right.value);
+    }
+    return normalizeValue(value);
+  };
+  var isControlled = getCurrentValue() !== undefined;
+  var _e = (0, _react.useState)(normalizeValue(defaultValue)),
+    internalValue = _e[0],
+    setInternalValue = _e[1];
+  var currentValue = isControlled ? getCurrentValue() : internalValue;
+  var handleChange = function (newValue) {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    if (!onChange) return;
+    // 선택된 옵션 찾기
+    var selectedOption = newValue === normalizeValue(left.value) ? left : right;
+    if (isBooleanType && typeof value === 'boolean') {
+      onChange(newValue === normalizeValue(left.value));
+    } else {
+      onChange(selectedOption.value);
+    }
+  };
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-switch', "ncua-switch--".concat(getValidSize(size)), {
+      'ncua-switch--disabled': disabled
+    }, className)
+  }, {
+    children: [(0, _jsxRuntime.jsxs)("label", __assign({
+      className: (0, _classnames.default)('ncua-switch__option', 'ncua-switch__option--left', {
+        'ncua-switch__option--active': currentValue === normalizeValue(left.value),
+        'ncua-switch__option--inactive': currentValue !== normalizeValue(left.value)
+      })
+    }, {
+      children: [(0, _jsxRuntime.jsx)("input", {
+        type: "radio",
+        ref: refs === null || refs === void 0 ? void 0 : refs[0],
+        name: name,
+        value: normalizeValue(left.value),
+        checked: currentValue === normalizeValue(left.value),
+        disabled: disabled,
+        className: "ncua-switch__radio ncua-switch__radio--left",
+        onChange: function () {
+          return handleChange(normalizeValue(left.value));
+        }
+      }), (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-switch__label"
+      }, {
+        children: left.label
+      }))]
+    })), (0, _jsxRuntime.jsxs)("label", __assign({
+      className: (0, _classnames.default)('ncua-switch__option', 'ncua-switch__option--right', {
+        'ncua-switch__option--active': currentValue === normalizeValue(right.value),
+        'ncua-switch__option--inactive': currentValue !== normalizeValue(right.value)
+      })
+    }, {
+      children: [(0, _jsxRuntime.jsx)("input", {
+        type: "radio",
+        ref: refs === null || refs === void 0 ? void 0 : refs[1],
+        name: name,
+        value: normalizeValue(right.value),
+        checked: currentValue === normalizeValue(right.value),
+        disabled: disabled,
+        className: "ncua-switch__radio ncua-switch__radio--right",
+        onChange: function () {
+          return handleChange(normalizeValue(right.value));
+        }
+      }), (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-switch__label"
+      }, {
+        children: right.label
+      }))]
+    }))]
+  }));
+});
+Switch.displayName = 'Switch';

package/dist/cjs/src/components/switch/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _Switch.Switch;
+  }
+});
+var _Switch = require("./Switch");

package/dist/cjs/src/components/tab/HorizontalTab.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.HorizontalTab = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _lodash = require("lodash");
+var _lodashEs = require("lodash-es");
 var _react = require("swiper/react");
 var _TabButton = require("./TabButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,7 +26,6 @@ var HorizontalTab = function (_a) {
     _c = _a.size,
     size = _c === void 0 ? 'sm' : _c,
     activeTab = _a.activeTab,
-    onClick = _a.onClick,
     _d = _a.fullWidth,
     fullWidth = _d === void 0 ? false : _d,
     _e = _a.menus,
@@ -49,27 +48,16 @@ var HorizontalTab = function (_a) {
       spaceBetween: getTabGap(type)
     }, {
       children: menus.map(function (menu) {
-        var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
-        var commonProps = {
-          id: menu.id,
-          label: menu.label,
-          badgeInfo: menu.badgeInfo,
-          isActive: isActive,
-          tabButtonType: type,
-          size: size,
-          onClick: function () {
-            var _a;
-            return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
-          }
-        };
+        var isActive = 'href' in menu && menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
         return (0, _jsxRuntime.jsx)(_react.SwiperSlide, __assign({
           className: "ncua-horizontal-tab__item"
         }, {
-          children: menu.href ? (0, _jsxRuntime.jsx)(_TabButton.TabButton, __assign({}, commonProps, {
-            href: menu.href,
-            target: menu.target
-          })) : (0, _jsxRuntime.jsx)(_TabButton.TabButton, __assign({}, commonProps))
-        }), (0, _lodash.uniqueId)('horizontal-tab'));
+          children: (0, _jsxRuntime.jsx)(_TabButton.TabButton, __assign({}, menu, {
+            isActive: isActive,
+            tabButtonType: type,
+            size: size
+          }))
+        }), (0, _lodashEs.uniqueId)('horizontal-tab'));
       })
     }))
   }));

package/dist/cjs/src/components/tab/TabButton.js

@@ -7,6 +7,7 @@ exports.TabButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Badge = require("../badge/Badge");
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -27,7 +28,8 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 var TabButton = function (_a) {
-  var label = _a.label,
+  var id = _a.id,
+    label = _a.label,
     _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
@@ -37,9 +39,8 @@ var TabButton = function (_a) {
     badgeInfo = _a.badgeInfo,
     className = _a.className,
     children = _a.children,
-    props = __rest(_a, ["label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
-  var tabType = tabButtonType || type;
-  var componentClassName = (0, _classnames.default)('ncua-tab-button', "ncua-tab-button--".concat(size), "ncua-tab-button--".concat(tabType || 'button-primary'), {
+    props = __rest(_a, ["id", "label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
+  var componentClassName = (0, _classnames.default)('ncua-tab-button', {
     'is-active': isActive
   }, className);
   if ('href' in props && props.href) {
@@ -52,8 +53,7 @@ var TabButton = function (_a) {
     return (0, _jsxRuntime.jsxs)("a", __assign({
       className: componentClassName,
       href: href,
-      target: target,
-      onClick: onClick_1
+      target: target
     }, anchorProps, {
       children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, __assign({}, badgeInfo, {
         size: "xs"
@@ -62,15 +62,32 @@ var TabButton = function (_a) {
   }
   var _f = props,
     onClick = _f.onClick,
-    buttonProps = __rest(_f, ["onClick"]);
-  return (0, _jsxRuntime.jsxs)("button", __assign({
-    type: "button",
-    className: componentClassName,
-    onClick: onClick
-  }, buttonProps, {
-    children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, __assign({}, badgeInfo, {
-      size: "xs"
-    })), children]
-  }));
+    onClose = _f.onClose,
+    buttonProps = __rest(_f, ["onClick", "onClose"]);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("button", __assign({
+      type: "button",
+      className: componentClassName,
+      onClick: function () {
+        return onClick === null || onClick === void 0 ? void 0 : onClick(id !== null && id !== void 0 ? id : '');
+      }
+    }, buttonProps, {
+      children: [label, badgeInfo && (0, _jsxRuntime.jsx)(_Badge.Badge, __assign({}, badgeInfo, {
+        size: "xs"
+      })), children]
+    })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
+      type: "button",
+      className: "ncua-tab-close",
+      onClick: function () {
+        return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : '');
+      }
+    }, {
+      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
+        name: "x-close",
+        width: 14,
+        height: 14
+      })
+    }))]
+  });
 };
 exports.TabButton = TabButton;

package/dist/cjs/src/components/tab/VerticalTab.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.VerticalTab = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
 var _Select = require("../select/Select");
 var _TabButton = require("./TabButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,9 +26,9 @@ var VerticalTab = function (_a) {
     breakPoint = _c === void 0 ? 'pc' : _c,
     activeTab = _a.activeTab,
     menus = _a.menus,
-    onClick = _a.onClick;
+    onSelect = _a.onSelect;
   var handleSelectChange = function (e) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(e.target.value);
   };
   var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
     return {
@@ -37,38 +36,24 @@ var VerticalTab = function (_a) {
       label: menu.label || ''
     };
   })) || [];
+  if (breakPoint === 'mobile') {
+    return (0, _jsxRuntime.jsx)(_Select.Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
   return (0, _jsxRuntime.jsx)("div", __assign({
     className: (0, _classnames.default)('ncua-vertical-tab', "ncua-vertical-tab--".concat(type))
   }, {
-    children: breakPoint === 'mobile' ? (0, _jsxRuntime.jsx)("div", __assign({
-      className: "ncua-vertical-tab__select"
-    }, {
-      children: (0, _jsxRuntime.jsx)(_Select.Select, {
-        value: activeTab,
-        onChange: handleSelectChange,
-        optionItems: optionItems,
-        size: "md"
-      })
-    })) : menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
-      var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
-      var commonProps = {
-        id: menu.id,
-        label: menu.label,
-        badgeInfo: menu.badgeInfo,
+    children: menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
+      var isActive = 'href' in menu && menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
+      return (0, _jsxRuntime.jsx)(_TabButton.TabButton, __assign({}, menu, {
         isActive: isActive,
         tabButtonType: type,
-        size: 'md',
-        onClick: function () {
-          var _a;
-          return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
-        }
-      };
-      return (0, _jsxRuntime.jsx)(_react.Fragment, {
-        children: menu.href ? (0, _jsxRuntime.jsx)(_TabButton.TabButton, __assign({}, commonProps, {
-          href: menu.href,
-          target: menu.target
-        })) : (0, _jsxRuntime.jsx)(_TabButton.TabButton, __assign({}, commonProps))
-      }, menu.id);
+        size: "md"
+      }), menu.id);
     })
   }));
 };

package/dist/cjs/src/components/tag/Tag.js

@@ -7,6 +7,7 @@ exports.Tag = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,6 +21,42 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = 60;
+// 위치 계산 로직
+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 = {
+    top: triggerRect.top,
+    bottom: viewportHeight - triggerRect.bottom,
+    left: triggerRect.left,
+    right: viewportWidth - triggerRect.right
+  };
+  // 위/아래 공간을 먼저 확인하고 우선순위 결정
+  var 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 정렬: 툴팁이 오른쪽으로 펼쳐짐
+    : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
+    if (hasVerticalSpace && hasHorizontalSpace) {
+      return position;
+    }
+  }
+  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  return fallbackPosition;
+};
 var Tag = function (_a) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -27,11 +64,49 @@ var Tag = function (_a) {
     text = _a.text,
     count = _a.count,
     close = _a.close,
-    onButtonClick = _a.onButtonClick;
+    onButtonClick = _a.onButtonClick,
+    _c = _a.maxLength,
+    maxLength = _c === void 0 ? 20 : _c;
+  var _d = (0, _react.useState)(false),
+    isTooltipVisible = _d[0],
+    setIsTooltipVisible = _d[1];
+  var _e = (0, _react.useState)('top-right'),
+    calculatedPosition = _e[0],
+    setCalculatedPosition = _e[1];
+  var tagRef = (0, _react.useRef)(null);
+  var tooltipRef = (0, _react.useRef)(null);
   var iconSize = {
     sm: 14,
     md: 16
   };
+  // 텍스트 길이 체크 및 말줄임 처리
+  var shouldTruncate = text.length > maxLength;
+  var displayText = shouldTruncate ? "".concat(text.slice(0, maxLength - 2), "...") : text;
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    if (shouldTruncate) {
+      setIsTooltipVisible(true);
+      // 간단한 위치 계산 - 기본값 사용
+      if (tagRef.current && tooltipRef.current) {
+        var optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+        setCalculatedPosition(optimalPosition);
+      } else {
+        // ref가 없으면 다음 렌더링 사이클에서 시도
+        setTimeout(function () {
+          if (tagRef.current) {
+            // tooltipRef가 없어도 tagRef만으로 계산
+            var dummyTooltipElement = document.createElement('div');
+            dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
+            dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
+            var optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
+            setCalculatedPosition(optimalPosition);
+          }
+        }, 0);
+      }
+    }
+  }, [shouldTruncate]);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    setIsTooltipVisible(false);
+  }, []);
   var sideSlotRender = function (slot) {
     var _a;
     if (slot.type === 'icon') {
@@ -51,12 +126,17 @@ var Tag = function (_a) {
     return slot.children;
   };
   return (0, _jsxRuntime.jsxs)("span", __assign({
-    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size))
+    ref: tagRef,
+    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--truncated': shouldTruncate
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, {
     children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-tag__text"
     }, {
-      children: text
+      children: displayText
     })), count && (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-tag__count"
     }, {
@@ -72,6 +152,15 @@ var Tag = function (_a) {
         width: iconSize[size],
         height: iconSize[size]
       })
+    })), shouldTruncate && isTooltipVisible && (0, _jsxRuntime.jsx)("span", __assign({
+      ref: tooltipRef,
+      className: (0, _classnames.default)('ncua-tag__tooltip', "ncua-tag__tooltip--".concat(calculatedPosition))
+    }, {
+      children: (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-tag__tooltip-content"
+      }, {
+        children: text
+      }))
     }))]
   }));
 };