@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/esm/src/components/pagination/Pagination.js

@@ -1,58 +1,36 @@
-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);
-};
-var __rest = this && this.__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;
-};
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { isFunction, range, uniqueId } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { NavButton } from './NavButton';
 // 네비게이션 버튼 설정
-export var Pagination = function (_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b,
-    totalCount = _a.totalCount,
-    _c = _a.itemCountPerPage,
-    itemCountPerPage = _c === void 0 ? 10 : _c,
-    _d = _a.pageCount,
-    pageCount = _d === void 0 ? 10 : _d,
-    currentPage = _a.currentPage,
-    _e = _a.breakPoint,
-    breakPoint = _e === void 0 ? 'pc' : _e,
-    onPageChange = _a.onPageChange,
-    restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "breakPoint", "onPageChange"]);
-  var totalPage = Math.ceil(totalCount / itemCountPerPage);
-  var _f = useState(1),
-    start = _f[0],
-    setStart = _f[1];
-  var noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
-  var noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
-  var showJumpPageButton = totalPage > pageCount;
-  var handleClickButton = function (pageNum) {
+export const Pagination = _ref => {
+  let {
+    className = '',
+    totalCount,
+    itemCountPerPage = 10,
+    pageCount = 10,
+    currentPage,
+    breakPoint = 'pc',
+    onPageChange,
+    ...restProps
+  } = _ref;
+  const totalPage = Math.ceil(totalCount / itemCountPerPage);
+  const [start, setStart] = useState(1);
+  const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+  const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
+  const showJumpPageButton = totalPage > pageCount;
+  const handleClickButton = pageNum => {
     if (isFunction(onPageChange)) {
       onPageChange(pageNum);
     }
   };
-  useEffect(function () {
+  useEffect(() => {
     if (currentPage === start + pageCount) {
       setStart(start + pageCount);
     }
     if (currentPage > start + pageCount) {
-      var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
+      const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
       setStart(newStart);
     }
     if (currentPage < start) {
@@ -62,76 +40,59 @@ export var Pagination = function (_a) {
       setStart(1);
     }
     if (currentPage === totalPage) {
-      var lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
+      const lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
       setStart(lastGroupStart);
     }
   }, [currentPage]);
-  return _jsxs("div", __assign({
-    className: classNames('ncua-pagination', "ncua-pagination--".concat(breakPoint), className)
-  }, {
+  return _jsxs("div", {
+    className: classNames('ncua-pagination', `ncua-pagination--${breakPoint}`, className),
     children: [showJumpPageButton && _jsxs(_Fragment, {
       children: [NavButton({
         type: 'first',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return handleClickButton(1);
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => handleClickButton(1)
       }), NavButton({
         type: 'prev',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return breakPoint === 'mo' ? handleClickButton(Math.max(currentPage - 1, 1)) : handleClickButton(Math.max(start - pageCount, 1));
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => breakPoint === 'mo' ? handleClickButton(Math.max(currentPage - 1, 1)) : handleClickButton(Math.max(start - pageCount, 1))
       })]
-    }), _jsx("ul", __assign({
-      className: "ncua-pagination__list"
-    }, {
-      children: range(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) {
-        return _jsx("li", __assign({
-          className: "ncua-pagination__item"
-        }, {
-          children: _jsx("button", __assign({
-            className: classNames('ncua-pagination__page-num', {
-              'is-current': pageNumber === currentPage
-            }),
-            onClick: function () {
-              return handleClickButton(start + i);
-            }
-          }, restProps, {
-            children: start + i
-          }))
-        }), uniqueId('ncua-pagination__page-num'));
-      })
-    })), _jsxs("p", __assign({
-      className: "ncua-pagination__page-info"
-    }, {
-      children: [_jsx("em", __assign({
-        className: "ncua-pagination__current-num"
-      }, {
+    }), _jsx("ul", {
+      className: "ncua-pagination__list",
+      children: range(start, Math.min(totalPage + 1, start + pageCount)).map((pageNumber, i) => _jsx("li", {
+        className: "ncua-pagination__item",
+        children: _jsx("button", {
+          className: classNames('ncua-pagination__page-num', {
+            'is-current': pageNumber === currentPage
+          }),
+          onClick: () => handleClickButton(start + i),
+          ...restProps,
+          children: start + i
+        })
+      }, uniqueId('ncua-pagination__page-num')))
+    }), _jsxs("p", {
+      className: "ncua-pagination__page-info",
+      children: [_jsx("em", {
+        className: "ncua-pagination__current-num",
         children: currentPage
-      })), " / ", totalPage]
-    })), showJumpPageButton && _jsxs(_Fragment, {
+      }), " / ", totalPage]
+    }), showJumpPageButton && _jsxs(_Fragment, {
       children: [NavButton({
         type: 'next',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return breakPoint === 'mo' ? handleClickButton(Math.min(currentPage + 1, totalPage)) : handleClickButton(Math.min(start + pageCount, totalPage));
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => breakPoint === 'mo' ? handleClickButton(Math.min(currentPage + 1, totalPage)) : handleClickButton(Math.min(start + pageCount, totalPage))
       }), NavButton({
         type: 'last',
-        breakPoint: breakPoint,
-        noPrev: noPrev,
-        noNext: noNext,
-        onClick: function () {
-          return handleClickButton(totalPage);
-        }
+        breakPoint,
+        noPrev,
+        noNext,
+        onClick: () => handleClickButton(totalPage)
       })]
     })]
-  }));
+  });
 };

package/dist/esm/src/components/password-input/PasswordInput.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Eye, EyeOff, Lock01 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+import { InputBase } from '../input-base/InputBase';
+const svgSize = {
+  xs: 14,
+  sm: 20
+};
+export const PasswordInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size = 'xs',
+    ...props
+  } = _ref;
+  const [isVisible, setIsVisible] = useState(false);
+  const svgProps = {
+    width: svgSize[size],
+    height: svgSize[size]
+  };
+  const handleVisibilityChange = () => {
+    setIsVisible(prev => !prev);
+  };
+  return _jsx(InputBase, {
+    ref: ref,
+    size: size,
+    type: isVisible ? 'text' : 'password',
+    leadingElement: {
+      type: 'icon',
+      icon: Lock01,
+      color: props.value ? 'gray600' : 'gray300'
+    },
+    trailingElement: {
+      type: 'custom',
+      placement: 'inside',
+      children: _jsx("button", {
+        className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        type: "button",
+        onClick: handleVisibilityChange,
+        children: isVisible ? _jsx(Eye, {
+          ...svgProps
+        }) : _jsx(EyeOff, {
+          ...svgProps
+        })
+      })
+    },
+    ...props
+  });
+});

package/dist/esm/src/components/password-input/index.js

@@ -0,0 +1 @@
+export * from './PasswordInput';

package/dist/esm/src/components/progress-bar/ProgressBar.js

@@ -1,115 +1,100 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SegmentBar } from './components/SegmentBar';
 import { SegmentLabels, SingleLabel } from './components/SegmentLabels';
 import { useProgressBar } from './hooks/useProgressBar';
 import { getFillColorClass } from './utils';
-export var ProgressBar = function (_a) {
-  var label = _a.label,
-    value = _a.value,
-    segments = _a.segments,
-    _b = _a.showZeroLabel,
-    showZeroLabel = _b === void 0 ? false : _b,
-    _c = _a.valueToPercent,
-    valueToPercent = _c === void 0 ? true : _c;
-  var _d = useProgressBar(label, value, segments, valueToPercent),
-    totalValue = _d.totalValue,
-    displayValue = _d.displayValue,
-    processedSegments = _d.processedSegments,
-    effectiveLabel = _d.effectiveLabel,
-    progressValueStyle = _d.progressValueStyle,
-    hasSegments = _d.hasSegments,
-    segmentCount = _d.segmentCount,
-    shouldSpaceOut = _d.shouldSpaceOut;
-  var isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
-  var containerClassName = "ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '');
-  var isRightLabel = effectiveLabel === 'right';
-  var isBottomLabel = effectiveLabel === 'bottom';
-  var isMultiSegment = hasSegments && segmentCount >= 2;
+export const ProgressBar = _ref => {
+  let {
+    label,
+    value,
+    segments,
+    showZeroLabel = false,
+    valueToPercent = true
+  } = _ref;
+  const {
+    totalValue,
+    displayValue,
+    processedSegments,
+    effectiveLabel,
+    progressValueStyle,
+    hasSegments,
+    segmentCount,
+    shouldSpaceOut
+  } = useProgressBar(label, value, segments, valueToPercent);
+  const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+  const containerClassName = `ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}`;
+  const isRightLabel = effectiveLabel === 'right';
+  const isBottomLabel = effectiveLabel === 'bottom';
+  const isMultiSegment = hasSegments && segmentCount >= 2;
   // segments가 1개일 때는 기존 value 방식과 동일하게 처리
   if (hasSegments && segmentCount === 1) {
-    var singleSegment = processedSegments[0];
-    return _jsxs("div", __assign({
+    const singleSegment = processedSegments[0];
+    return _jsxs("div", {
       className: containerClassName,
-      style: progressValueStyle
-    }, {
+      style: progressValueStyle,
       children: [isFloatingLabel && _jsx(SingleLabel, {
         labelType: effectiveLabel,
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
-      }), _jsxs("div", __assign({
-        className: "ncua-progress-bar__content"
-      }, {
-        children: [_jsx("div", __assign({
-          className: "ncua-progress-bar__bar"
-        }, {
+      }), _jsxs("div", {
+        className: "ncua-progress-bar__content",
+        children: [_jsx("div", {
+          className: "ncua-progress-bar__bar",
           children: _jsx("div", {
-            className: "ncua-progress-bar__fill ".concat(getFillColorClass(singleSegment.color)),
+            className: `ncua-progress-bar__fill ${getFillColorClass(singleSegment.color)}`,
             style: {
-              width: "".concat(totalValue, "%")
+              width: `${totalValue}%`
             },
             "aria-valuenow": totalValue,
             "aria-valuemin": 0,
             "aria-valuemax": 100
           })
-        })), isRightLabel && _jsx(SingleLabel, {
+        }), isRightLabel && _jsx(SingleLabel, {
           labelType: "right",
           displayValue: displayValue,
           totalValue: totalValue,
           showZeroLabel: showZeroLabel
         })]
-      })), isBottomLabel && _jsx(SingleLabel, {
+      }), isBottomLabel && _jsx(SingleLabel, {
         labelType: "bottom",
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
       })]
-    }));
+    });
   }
-  return _jsxs("div", __assign({
+  return _jsxs("div", {
     className: containerClassName,
-    style: progressValueStyle
-  }, {
+    style: progressValueStyle,
     children: [isFloatingLabel && _jsx(SingleLabel, {
       labelType: effectiveLabel,
       displayValue: displayValue,
       totalValue: totalValue,
       showZeroLabel: showZeroLabel
-    }), _jsxs("div", __assign({
-      className: "ncua-progress-bar__content"
-    }, {
-      children: [_jsx("div", __assign({
-        className: "ncua-progress-bar__bar ".concat(hasSegments ? 'ncua-progress-bar__bar--segments' : '')
-      }, {
+    }), _jsxs("div", {
+      className: "ncua-progress-bar__content",
+      children: [_jsx("div", {
+        className: `ncua-progress-bar__bar ${hasSegments ? 'ncua-progress-bar__bar--segments' : ''}`,
         children: hasSegments ? _jsx(SegmentBar, {
           segments: processedSegments,
           shouldSpaceOut: shouldSpaceOut
         }) : _jsx("div", {
           className: "ncua-progress-bar__fill",
           style: {
-            width: "".concat(totalValue, "%")
+            width: `${totalValue}%`
           },
           "aria-valuenow": totalValue,
           "aria-valuemin": 0,
           "aria-valuemax": 100
         })
-      })), isRightLabel && _jsx(SingleLabel, {
+      }), isRightLabel && _jsx(SingleLabel, {
         labelType: "right",
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
       })]
-    })), isMultiSegment && _jsx(SegmentLabels, {
+    }), isMultiSegment && _jsx(SegmentLabels, {
       segments: processedSegments,
       segmentCount: segmentCount,
       showZeroLabel: showZeroLabel
@@ -119,5 +104,5 @@ export var ProgressBar = function (_a) {
       totalValue: totalValue,
       showZeroLabel: showZeroLabel
     })]
-  }));
+  });
 };

package/dist/esm/src/components/progress-bar/components/SegmentBar.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { getFillColorClass } from '../utils';
-export var SegmentBar = function (_a) {
-  var segments = _a.segments,
-    shouldSpaceOut = _a.shouldSpaceOut;
+export const SegmentBar = _ref => {
+  let {
+    segments,
+    shouldSpaceOut
+  } = _ref;
   return _jsx(_Fragment, {
-    children: segments.map(function (segment, index) {
-      var isFirst = index === 0;
-      var isLast = index === segments.length - 1;
+    children: segments.map((segment, index) => {
+      const isFirst = index === 0;
+      const isLast = index === segments.length - 1;
       return _jsx("div", {
-        className: "ncua-progress-bar__fill ".concat(isFirst ? 'ncua-progress-bar__fill--first' : '', " ").concat(isLast ? 'ncua-progress-bar__fill--last' : '', " ").concat(shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : '', " ").concat(getFillColorClass(segment.color)),
+        className: `ncua-progress-bar__fill ${isFirst ? 'ncua-progress-bar__fill--first' : ''} ${isLast ? 'ncua-progress-bar__fill--last' : ''} ${shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : ''} ${getFillColorClass(segment.color)}`,
         style: {
-          width: "".concat(segment.width, "%")
+          width: `${segment.width}%`
         }
-      }, "".concat(segment.color, "-").concat(index));
+      }, `${segment.color}-${index}`);
     })
   });
 };

package/dist/esm/src/components/progress-bar/components/SegmentLabels.js

@@ -1,67 +1,56 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { getLabelColorClass } from '../utils';
-var SegmentLabels = function (_a) {
-  var segments = _a.segments,
-    segmentCount = _a.segmentCount,
-    _b = _a.showZeroLabel,
-    showZeroLabel = _b === void 0 ? false : _b;
+const SegmentLabels = _ref => {
+  let {
+    segments,
+    segmentCount,
+    showZeroLabel = false
+  } = _ref;
   if (segmentCount >= 2) {
-    return _jsx("div", __assign({
-      className: "ncua-progress-bar__labels--multiple"
-    }, {
-      children: segments.map(function (segment, index) {
+    return _jsx("div", {
+      className: "ncua-progress-bar__labels--multiple",
+      children: segments.map((segment, index) => {
         // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
         if (segment.value === 0 && !showZeroLabel) {
           return null;
         }
-        var leftPosition = 0;
-        for (var i = 0; i < index; i++) {
+        let leftPosition = 0;
+        for (let i = 0; i < index; i++) {
           leftPosition += segments[i].width;
         }
         // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
         // 그 외에는 중앙에 정렬
-        var isZero = segment.value === 0;
+        const isZero = segment.value === 0;
         // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
-        var labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
-        var transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
-        return _jsx("span", __assign({
-          className: "ncua-progress-bar__label ncua-progress-bar__label--segment ".concat(getLabelColorClass(segment.color)),
+        const labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+        const transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+        return _jsx("span", {
+          className: `ncua-progress-bar__label ncua-progress-bar__label--segment ${getLabelColorClass(segment.color)}`,
           style: {
-            left: "".concat(labelPosition, "%"),
-            transform: transform
-          }
-        }, {
-          children: "".concat(segment.value.toFixed(0), "%")
-        }), "".concat(segment.color, "-").concat(index));
+            left: `${labelPosition}%`,
+            transform
+          },
+          children: `${segment.value.toFixed(0)}%`
+        }, `${segment.color}-${index}`);
       })
-    }));
+    });
   }
   return null;
 };
-var SingleLabel = function (_a) {
-  var labelType = _a.labelType,
-    displayValue = _a.displayValue,
-    totalValue = _a.totalValue,
-    _b = _a.showZeroLabel,
-    showZeroLabel = _b === void 0 ? false : _b;
+const SingleLabel = _ref2 => {
+  let {
+    labelType,
+    displayValue,
+    totalValue,
+    showZeroLabel = false
+  } = _ref2;
   // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
   if (totalValue === 0 && !showZeroLabel) {
     return null;
   }
-  return _jsx("span", __assign({
-    className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType)
-  }, {
+  return _jsx("span", {
+    className: `ncua-progress-bar__label ncua-progress-bar__label-${labelType}`,
     children: displayValue
-  }));
+  });
 };
 export { SegmentLabels, SingleLabel };