npm - @ncds/ui-admin - Versions diffs - 1.7.0 → 1.8.0 - Mend

@ncds/ui-admin 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (621) hide show

package/dist/esm/assets/scripts/notification/const/icons.js CHANGED Viewed

@@ -1,39 +1,25 @@
 // SVG 아이콘들 (크기는 동적으로 설정)
-export var SVG_ICONS = {
-  'pin-02': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167\"></path></svg>");
-  },
-  'alert-triangle': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31\"></path></svg>");
-  },
-  'alert-circle': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
-  },
-  'check-circle': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
-  },
-  'info-circle': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#5720B7\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
-  },
-  'message-chat-square': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#0C111D\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z\"></path></svg>");
-  },
-  'x-close': function (size) {
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
-  }
+export const SVG_ICONS = {
+  'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
+  'alert-triangle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31"></path></svg>`,
+  'alert-circle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+  'check-circle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+  'info-circle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#5720B7" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+  'message-chat-square': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#0C111D" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z"></path></svg>`,
+  'x-close': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"></path></svg>`
 };
-export var FLOATING_ICON_MAP = {
+export const FLOATING_ICON_MAP = {
   neutral: SVG_ICONS['pin-02'],
   error: SVG_ICONS['alert-triangle'],
   warning: SVG_ICONS['alert-circle'],
   success: SVG_ICONS['check-circle']
   // info는 floating에서는 지원하지 않음
 };
-export var FULL_WIDTH_ICON_MAP = {
+export const FULL_WIDTH_ICON_MAP = {
   neutral: SVG_ICONS['message-chat-square'],
   error: SVG_ICONS['alert-triangle'],
   warning: SVG_ICONS['alert-triangle'],
   success: SVG_ICONS['check-circle'],
   info: SVG_ICONS['info-circle']
 };
-export var ICON_MAP = FULL_WIDTH_ICON_MAP;
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;

package/dist/esm/assets/scripts/notification/const/sizes.js CHANGED Viewed

@@ -1,48 +1,40 @@
 // 알림 컴포넌트 사이즈 관련 상수들
 // FeaturedIcon 사이즈
-export var FEATURED_ICON_SIZES = {
+export const FEATURED_ICON_SIZES = {
   MOBILE: 'md',
   DESKTOP: 'sm'
 };
 // SVG 아이콘 픽셀 사이즈
-export var ICON_PIXEL_SIZES = {
+export const ICON_PIXEL_SIZES = {
   MOBILE: '20',
   DESKTOP: '16',
   FULL_WIDTH: '16' // Full-width는 항상 고정
 };
 // 닫기 버튼 사이즈
-export var CLOSE_BUTTON_SIZES = {
+export const CLOSE_BUTTON_SIZES = {
   MOBILE: 'sm',
   DESKTOP: 'xs'
 };
 // 닫기 버튼 SVG 픽셀 사이즈
-export var CLOSE_BUTTON_SVG_SIZES = {
+export const CLOSE_BUTTON_SVG_SIZES = {
   xs: 16,
   sm: 20
 };
 // Full-width 알림 고정 사이즈
-export var FULL_WIDTH_SIZES = {
+export const FULL_WIDTH_SIZES = {
   ICON: '16',
   CLOSE_BUTTON: '20'
 };
 // Message 알림 고정 사이즈
-export var MESSAGE_SIZES = {
+export const MESSAGE_SIZES = {
   FEATURED_ICON: 'lg',
   ICON_PIXEL: '24',
   CLOSE_BUTTON: '20'
 };
 // 사이즈 유틸리티 함수들
-export var getSizes = {
-  featuredIcon: function (isMobile) {
-    return isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP;
-  },
-  iconPixel: function (isMobile) {
-    return isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP;
-  },
-  closeButton: function (isMobile) {
-    return isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP;
-  },
-  closeButtonSvg: function (size) {
-    return CLOSE_BUTTON_SVG_SIZES[size];
-  }
+export const getSizes = {
+  featuredIcon: isMobile => isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP,
+  iconPixel: isMobile => isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP,
+  closeButton: isMobile => isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP,
+  closeButtonSvg: size => CLOSE_BUTTON_SVG_SIZES[size]
 };

package/dist/esm/assets/scripts/notification/const/types.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // Message Notification 닫기 버튼 아이콘 색상 맵
-export var MESSAGE_CLOSE_ICON_COLORS = {
+export const MESSAGE_CLOSE_ICON_COLORS = {
   neutral: '#6B7280',
   error: '#EF4444',
   warning: '#F97316',

package/dist/esm/assets/scripts/notification/utils.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { CLASS_NAMES } from './const';
 import { BREAKPOINT } from '../../../src/constant/breakpoint';
 // 공통 유틸리티 함수들
 export function createWrapperElement(baseClass, color, className) {
-  var wrapper = document.createElement('div');
+  const wrapper = document.createElement('div');
   wrapper.className = buildClassName(baseClass, color, className);
   wrapper.setAttribute('role', 'alert');
   return wrapper;
 }
 export function buildClassName(baseClass, color, className) {
-  var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
+  const classes = [baseClass, `${baseClass}--${color}`];
   if (className) {
     classes.push(className);
   }
@@ -17,46 +17,51 @@ export function buildClassName(baseClass, color, className) {
 export function renderSupportingText(supportingText, className, supportTextLink) {
   if (!supportingText) return '';
   if (supportTextLink) {
-    return "<a href=\"".concat(supportTextLink, "\" class=\"ncua-full-width-notification__link\"><span class=\"").concat(className, "\">").concat(supportingText, "</span></a>");
+    return `<a href="${supportTextLink}" class="ncua-full-width-notification__link"><span class="${className}">${supportingText}</span></a>`;
   }
-  return "<span class=\"".concat(className, "\">").concat(supportingText, "</span>");
+  return `<span class="${className}">${supportingText}</span>`;
 }
 export function renderActions(actions, wrapperClass) {
   // 액션이 없으면 빈 문자열 반환
   if (!actions || actions.length === 0) {
     return '';
   }
-  var buttonsHtml = actions.map(function (action) {
-    var buttonHtml = "\n      <button \n        class=\"ncua-btn ncua-btn--sm ncua-btn--".concat(action.hierarchy || 'text', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
+  const buttonsHtml = actions.map(action => {
+    const buttonHtml = `
+      <button
+        class="ncua-btn ncua-btn--sm ncua-btn--${action.hierarchy || 'text'}"
+        data-action="${action.label}-${action.hierarchy}"
+      >
+        ${action.label}
+      </button>`;
     return buttonHtml;
   }).join('');
-  return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
+  return `<div class="${wrapperClass}">${buttonsHtml}</div>`;
 }
 // 공통 이벤트 처리
 export function bindNotificationEvents(element, actions, onClose, onRemove) {
-  element.addEventListener('click', function (event) {
-    var target = event.target;
+  element.addEventListener('click', event => {
+    const target = event.target;
     // 닫기 버튼 클릭 처리
-    if (target.matches(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    if (target.matches(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) || target.closest(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) || target.closest(`.${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}`)) {
+      onClose?.();
+      onRemove?.();
       return;
     }
     // 액션 버튼 클릭 처리
-    var actionButton = target.closest('.ncua-btn[data-action]');
+    const actionButton = target.closest('.ncua-btn[data-action]');
     if (actionButton && actions) {
-      var actionData = actionButton.getAttribute('data-action');
+      const actionData = actionButton.getAttribute('data-action');
       if (actionData) {
-        var matchedAction = null;
-        for (var _i = 0, actions_1 = actions; _i < actions_1.length; _i++) {
-          var action = actions_1[_i];
-          var expectedDataAction = "".concat(action.label, "-").concat(action.hierarchy || 'link');
+        let matchedAction = null;
+        for (const action of actions) {
+          const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
           if (actionData === expectedDataAction) {
             matchedAction = action;
             break;
           }
         }
-        if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
+        if (matchedAction?.onClick) {
           matchedAction.onClick();
         }
       }
@@ -66,14 +71,14 @@ export function bindNotificationEvents(element, actions, onClose, onRemove) {
 // 자동 닫기 설정
 export function setupAutoClose(autoClose, onClose, onRemove) {
   if (autoClose > 0) {
-    return window.setTimeout(function () {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    return window.setTimeout(() => {
+      onClose?.();
+      onRemove?.();
     }, autoClose);
   }
   return undefined;
 }
 // Mobile detection utility
-export var isMobile = function () {
+export const isMobile = () => {
   return window.innerWidth <= parseInt(BREAKPOINT.mobile);
 };