@ncds/ui-admin 0.0.22 → 0.0.24

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

@@ -13,4 +13,15 @@ Object.keys(_test).forEach(function (key) {
       return _test[key];
     }
   });
+});
+var _slider = require("./slider");
+Object.keys(_slider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slider[key];
+    }
+  });
 });

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

@@ -0,0 +1,341 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = void 0;
+var Slider = exports.Slider = /** @class */function () {
+  function Slider(element, options) {
+    var _this = this;
+    this.activeHandle = null;
+    this.isDragging = false;
+    this.handleElements = [];
+    this.progressElement = null;
+    this.trackElement = null;
+    this.handleMouseDown = function (e) {
+      var targetElement = e.target;
+      e.preventDefault();
+      _this.handleInteractionStart(e.clientX, targetElement);
+      if (_this.isDragging) {
+        // 드래그 이벤트 추가
+        document.addEventListener('mousemove', _this.handleMouseMove);
+        document.addEventListener('mouseup', _this.handleMouseUp);
+        // 텍스트 선택 방지
+        document.body.style.userSelect = 'none';
+      }
+    };
+    this.handleTouchStart = function (e) {
+      if (e.touches.length > 0) {
+        var targetElement = e.target;
+        e.preventDefault();
+        _this.handleInteractionStart(e.touches[0].clientX, targetElement);
+        if (_this.isDragging) {
+          // 드래그 이벤트 추가
+          document.addEventListener('touchmove', _this.handleTouchMove, {
+            passive: false
+          });
+          document.addEventListener('touchend', _this.handleTouchEnd);
+        }
+      }
+    };
+    this.handleMouseMove = function (e) {
+      if (_this.isDragging) {
+        _this.updateValueFromClientX(e.clientX);
+      }
+    };
+    this.handleTouchMove = function (e) {
+      if (_this.isDragging && e.touches.length > 0) {
+        e.preventDefault();
+        _this.updateValueFromClientX(e.touches[0].clientX);
+      }
+    };
+    this.handleMouseUp = function () {
+      _this.isDragging = false;
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', _this.handleMouseMove);
+      document.removeEventListener('mouseup', _this.handleMouseUp);
+    };
+    this.handleTouchEnd = function () {
+      _this.isDragging = false;
+      document.removeEventListener('touchmove', _this.handleTouchMove);
+      document.removeEventListener('touchend', _this.handleTouchEnd);
+    };
+    this.element = element;
+    this.options = Object.assign({
+      min: 0,
+      max: 100,
+      step: 1,
+      value: 0,
+      disabled: false
+    }, options);
+    this.value = this.options.value;
+    this.options.min = Number(this.options.min);
+    this.options.max = Number(this.options.max);
+    this.options.step = Number(this.options.step);
+    this.init();
+  }
+  Slider.prototype.init = function () {
+    if (this.options.disabled) {
+      this.element.style.opacity = '0.5';
+    }
+    // 기존 내용 제거
+    this.element.innerHTML = '';
+    // Track 생성
+    this.trackElement = document.createElement('div');
+    this.trackElement.className = 'ncua-slider__track';
+    this.element.appendChild(this.trackElement);
+    // Progress 생성
+    this.progressElement = document.createElement('div');
+    this.progressElement.className = 'ncua-slider__progress';
+    this.element.appendChild(this.progressElement);
+    // Handle(s) 생성
+    if (Array.isArray(this.value)) {
+      // Range slider (2 handles)
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      this.createHandle(0, leftValue);
+      this.createHandle(1, rightValue);
+    } else {
+      // Single slider (1 handle)
+      this.createHandle(0, this.value);
+    }
+    // 이벤트 리스너 추가
+    if (!this.options.disabled) {
+      this.element.addEventListener('mousedown', this.handleMouseDown);
+      this.element.addEventListener('touchstart', this.handleTouchStart, {
+        passive: false
+      });
+    }
+    // 초기 위치 설정
+    this.updateHandlePositions();
+  };
+  Slider.prototype.createHandle = function (index, value) {
+    var _this = this;
+    var handle = document.createElement('div');
+    handle.className = 'ncua-slider__handle';
+    handle.setAttribute('role', 'slider');
+    handle.setAttribute('tabindex', this.options.disabled ? '-1' : '0');
+    handle.setAttribute('aria-valuemin', Array.isArray(this.value) && index === 1 ? String(this.value[0]) : String(this.options.min));
+    handle.setAttribute('aria-valuemax', Array.isArray(this.value) && index === 0 ? String(this.value[1]) : String(this.options.max));
+    handle.setAttribute('aria-valuenow', String(value));
+    handle.setAttribute('aria-disabled', String(this.options.disabled));
+    handle.dataset.index = String(index);
+    handle.addEventListener('focus', function () {
+      _this.activeHandle = index;
+      _this.updateHandleClasses();
+    });
+    handle.addEventListener('blur', function () {
+      _this.activeHandle = null;
+      _this.updateHandleClasses();
+    });
+    if (this.options.labelPosition === 'bottom') {
+      var label = document.createElement('div');
+      label.className = "ncua-slider__label";
+      label.textContent = "".concat(value, "%");
+      handle.appendChild(label);
+    }
+    if (this.options.labelPosition === 'top-floating') {
+      var label = document.createElement('div');
+      label.className = "ncua-slider__label ncua-slider__label--tooltip";
+      label.textContent = "".concat(value, "%");
+      handle.appendChild(label);
+    }
+    this.element.appendChild(handle);
+    this.handleElements[index] = handle;
+  };
+  Slider.prototype.updateHandlePositions = function () {
+    if (Array.isArray(this.value)) {
+      // Range slider
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      var leftPosition = this.getPositionFromValue(leftValue);
+      var rightPosition = this.getPositionFromValue(rightValue);
+      this.handleElements[0].style.left = "".concat(leftPosition, "%");
+      this.handleElements[1].style.left = "".concat(rightPosition, "%");
+      if (this.options.labelPosition) {
+        var leftLabel = this.handleElements[0].querySelector('.ncua-slider__label');
+        var rightLabel = this.handleElements[1].querySelector('.ncua-slider__label');
+        if (leftLabel) leftLabel.textContent = "".concat(leftValue, "%");
+        if (rightLabel) rightLabel.textContent = "".concat(rightValue, "%");
+      }
+      if (this.progressElement) {
+        this.progressElement.style.left = "".concat(leftPosition, "%");
+        this.progressElement.style.width = "".concat(rightPosition - leftPosition, "%");
+      }
+    } else {
+      // Single slider
+      var position = this.getPositionFromValue(this.value);
+      this.handleElements[0].style.left = "".concat(position, "%");
+      if (this.options.labelPosition) {
+        var label = this.handleElements[0].querySelector('.ncua-slider__label');
+        if (label) label.textContent = "".concat(this.value, "%");
+      }
+      if (this.progressElement) {
+        this.progressElement.style.left = '0';
+        this.progressElement.style.width = "".concat(position, "%");
+      }
+    }
+    // ARIA 속성 업데이트
+    this.updateAriaAttributes();
+  };
+  Slider.prototype.updateHandleClasses = function () {
+    var _this = this;
+    this.handleElements.forEach(function (handle, index) {
+      if (index === _this.activeHandle) {
+        handle.classList.add('is-active');
+      } else {
+        handle.classList.remove('is-active');
+      }
+    });
+  };
+  Slider.prototype.updateAriaAttributes = function () {
+    if (Array.isArray(this.value)) {
+      // Range slider
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      this.handleElements[0].setAttribute('aria-valuenow', String(leftValue));
+      this.handleElements[0].setAttribute('aria-valuemax', String(rightValue));
+      this.handleElements[1].setAttribute('aria-valuenow', String(rightValue));
+      this.handleElements[1].setAttribute('aria-valuemin', String(leftValue));
+    } else {
+      // Single slider
+      this.handleElements[0].setAttribute('aria-valuenow', String(this.value));
+    }
+  };
+  Slider.prototype.getPositionFromValue = function (value) {
+    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+  };
+  Slider.prototype.getValueFromPosition = function (position) {
+    var percentage = Math.min(Math.max(position, 0), 100);
+    var exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    var steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
+    return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
+  };
+  Slider.prototype.handleInteractionStart = function (clientX, target) {
+    // 슬라이더 영역 내부를 클릭/터치한 경우
+    if (target.closest('.ncua-slider')) {
+      // 핸들을 직접 클릭/터치했는지 확인
+      var handleElement = target.closest('.ncua-slider__handle');
+      if (handleElement) {
+        if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.max) {
+          this.activeHandle = 0;
+        } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
+          this.activeHandle = 1;
+        } else {
+          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+        }
+      } else {
+        // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
+        var rect = this.element.getBoundingClientRect();
+        var position = (clientX - rect.left) / rect.width * 100;
+        if (Array.isArray(this.value)) {
+          var _a = this.value,
+            leftValue = _a[0],
+            rightValue = _a[1];
+          var leftPosition = this.getPositionFromValue(leftValue);
+          var rightPosition = this.getPositionFromValue(rightValue);
+          if (position < leftPosition) {
+            this.activeHandle = 0;
+          } else if (position > rightPosition) {
+            this.activeHandle = 1;
+          } else {
+            this.activeHandle = Math.abs(position - leftPosition) < Math.abs(position - rightPosition) ? 0 : 1;
+          }
+        } else {
+          this.activeHandle = 0;
+        }
+      }
+      this.updateHandleClasses();
+      this.isDragging = true;
+      // 클릭/터치 위치로 값 업데이트
+      this.updateValueFromClientX(clientX);
+    }
+  };
+  Slider.prototype.updateValueFromClientX = function (clientX) {
+    if (!this.element || this.activeHandle === null) return;
+    var rect = this.element.getBoundingClientRect();
+    var position = (clientX - rect.left) / rect.width * 100;
+    var newValue = this.getValueFromPosition(position);
+    var prevValue = this.value;
+    if (Array.isArray(this.value)) {
+      // Range slider
+      var _a = this.value,
+        leftValue = _a[0],
+        rightValue = _a[1];
+      if (this.activeHandle === 0) {
+        // 왼쪽 핸들
+        this.value = [Math.min(newValue, rightValue), rightValue];
+      } else if (this.activeHandle === 1) {
+        // 오른쪽 핸들
+        this.value = [leftValue, Math.max(newValue, leftValue)];
+      }
+    } else {
+      // Single slider
+      this.value = newValue;
+    }
+    this.notifyChange(prevValue);
+    this.updateHandlePositions();
+  };
+  Slider.prototype.notifyChange = function (prevValue) {
+    var _this = this;
+    var isSingle = !Array.isArray(prevValue);
+    var checkChangedSingle = function () {
+      return prevValue !== _this.value;
+    };
+    var checkChangedRange = function () {
+      return Array.isArray(prevValue) && Array.isArray(_this.value) && (prevValue[0] !== _this.value[0] || prevValue[1] !== _this.value[1]);
+    };
+    var isChanged = isSingle ? checkChangedSingle() : checkChangedRange();
+    if (this.options.onChange && isChanged) {
+      this.options.onChange(this.value);
+    }
+  };
+  Slider.prototype.setValue = function (value) {
+    this.value = value;
+    this.updateHandlePositions();
+  };
+  Slider.prototype.getValue = function () {
+    return this.value;
+  };
+  Slider.prototype.disable = function () {
+    this.options.disabled = true;
+    this.element.style.opacity = '0.5';
+    this.handleElements.forEach(function (handle) {
+      handle.setAttribute('tabindex', '-1');
+      handle.setAttribute('aria-disabled', 'true');
+    });
+    this.element.removeEventListener('mousedown', this.handleMouseDown);
+    this.element.removeEventListener('touchstart', this.handleTouchStart);
+  };
+  Slider.prototype.enable = function () {
+    this.options.disabled = false;
+    this.element.style.opacity = '1';
+    this.handleElements.forEach(function (handle) {
+      handle.setAttribute('tabindex', '0');
+      handle.setAttribute('aria-disabled', 'false');
+    });
+    this.element.addEventListener('mousedown', this.handleMouseDown);
+    this.element.addEventListener('touchstart', this.handleTouchStart, {
+      passive: false
+    });
+  };
+  Slider.prototype.destroy = function () {
+    // 모든 이벤트 리스너 제거
+    this.element.removeEventListener('mousedown', this.handleMouseDown);
+    this.element.removeEventListener('touchstart', this.handleTouchStart);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
+    // 모든 내용 제거
+    this.element.innerHTML = '';
+    // 참조 정리
+    this.handleElements = [];
+    this.progressElement = null;
+    this.trackElement = null;
+  };
+  return Slider;
+}();

package/dist/cjs/index.js

@@ -14,17 +14,6 @@ Object.keys(_badge).forEach(function (key) {
     }
   });
 });
-var _breadcrumb = require("./src/components/breadcrumb");
-Object.keys(_breadcrumb).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _breadcrumb[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _breadcrumb[key];
-    }
-  });
-});
 var _button = require("./src/components/button");
 Object.keys(_button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -69,17 +58,6 @@ Object.keys(_datePicker).forEach(function (key) {
     }
   });
 });
-var _dropdown = require("./src/components/dropdown");
-Object.keys(_dropdown).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _dropdown[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _dropdown[key];
-    }
-  });
-});
 var _input = require("./src/components/input");
 Object.keys(_input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -168,17 +146,6 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
-var _tag = require("./src/components/tag");
-Object.keys(_tag).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _tag[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _tag[key];
-    }
-  });
-});
 var _toggle = require("./src/components/toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.svgSize = exports.Button = void 0;
+exports.svgSize = exports.iconOnlySvgSize = exports.Button = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
@@ -29,10 +29,16 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 var svgSize = exports.svgSize = {
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 20
+  xxs: 12,
+  xs: 14,
+  sm: 16,
+  md: 20
+};
+var iconOnlySvgSize = exports.iconOnlySvgSize = {
+  xxs: 14,
+  xs: 16,
+  sm: 20,
+  md: 20
 };
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // NOTE: 엘리먼트 종류에 따라 props의 타입이 달라지므로 분리
@@ -72,11 +78,13 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }
   };
   var sideSlotRender = function (slot) {
+    var _a, _b;
     if (slot.type === 'icon') {
+      var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
       return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
         name: slot.icon,
-        height: svgSize[size],
-        width: svgSize[size],
+        height: (_a = slot.size) !== null && _a !== void 0 ? _a : iconSize,
+        width: (_b = slot.size) !== null && _b !== void 0 ? _b : iconSize,
         color: slot.color ? _color.COLOR[slot.color] : undefined
       });
     }

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -79,7 +79,7 @@ ButtonGroup.Item = function (_a) {
     if (!icon) return null;
     if (icon.type === 'icon') {
       return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-        name: icon.name,
+        name: icon.icon,
         width: svgSize[(_a = icon.size) !== null && _a !== void 0 ? _a : 'md'],
         height: svgSize[(_b = icon.size) !== null && _b !== void 0 ? _b : 'md'],
         color: _color.COLOR[(_c = icon.color) !== null && _c !== void 0 ? _c : 'gray500']

package/dist/cjs/src/components/date-picker/index.js

@@ -24,15 +24,4 @@ Object.keys(_RangeDatePicker).forEach(function (key) {
       return _RangeDatePicker[key];
     }
   });
-});
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
 });

package/dist/cjs/src/components/divider/Divider.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+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 Divider = exports.Divider = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var className = _a.className,
+    type = _a.type,
+    _b = _a.style,
+    style = _b === void 0 ? 'single-line' : _b,
+    children = _a.children;
+  var componentClassName = (0, _classnames.default)('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: componentClassName,
+    ref: ref
+  }, {
+    children: [style === 'single-line' && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-divider__line"
+    }), (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-divider__content"
+    }, {
+      children: children
+    })), style === 'single-line' && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-divider__line"
+    })]
+  }));
+});
+Divider.displayName = 'Divider';

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

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

package/dist/cjs/src/components/empty-state/EmptyState.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = require("../button/Button");
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var EmptyState = function (_a) {
+  var title = _a.title,
+    description = _a.description,
+    buttons = _a.buttons;
+  var emptyStateButtons = buttons ? Array.isArray(buttons) ? buttons : [buttons] : [];
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-empty-state"
+  }, {
+    children: [(0, _jsxRuntime.jsx)("p", __assign({
+      className: "ncua-empty-state__title"
+    }, {
+      children: title
+    })), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-empty-state__description"
+    }, {
+      children: description
+    })), emptyStateButtons.length > 0 && (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-empty-state__button-group"
+    }, {
+      children: emptyStateButtons.map(function (_a) {
+        var size = _a.size,
+          label = _a.label,
+          rest = __rest(_a, ["size", "label"]);
+        return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
+          size: size !== null && size !== void 0 ? size : 'xs',
+          label: label
+        }, rest), label);
+      })
+    }))]
+  }));
+};
+exports.EmptyState = EmptyState;

package/dist/cjs/src/components/empty-state/index.js

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