@kupola/kupola 1.5.2 → 1.5.4

package/js/message.js

@@ -1,62 +1,75 @@
+import { getMessageConfig } from './kupola-config.js';
+
 const Message = {
-    normal: function(message, options = {}) {
-        this.show(message, 'normal', options);
-    },
-    success: function(message, options = {}) {
-        this.show(message, 'success', options);
-    },
-    error: function(message, options = {}) {
-        this.show(message, 'error', options);
-    },
-    warning: function(message, options = {}) {
-        this.show(message, 'warning', options);
-    },
-    info: function(message, options = {}) {
-        this.show(message, 'info', options);
-    },
-    show: function(message, type = 'normal', options = {}) {
-        const { duration = 3000 } = options;
-        
-        const msg = document.createElement('div');
-        msg.className = `ds-message__item ds-message__item--${type}`;
-        
-        const icons = {
-            normal: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
-            success: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
-            error: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
-            warning: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
-            info: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
-        };
-        
-        msg.innerHTML = `
+  normal: function (message, options = {}) {
+    this.show(message, 'normal', options);
+  },
+  success: function (message, options = {}) {
+    this.show(message, 'success', options);
+  },
+  error: function (message, options = {}) {
+    this.show(message, 'error', options);
+  },
+  warning: function (message, options = {}) {
+    this.show(message, 'warning', options);
+  },
+  info: function (message, options = {}) {
+    this.show(message, 'info', options);
+  },
+  show: function (message, type = 'normal', options = {}) {
+    const msgConfig = getMessageConfig();
+    const { duration = msgConfig.duration, position = msgConfig.position } = options;
+    const maxCount = msgConfig.maxCount || 5;
+
+    const msg = document.createElement('div');
+    msg.className = `ds-message__item ds-message__item--${type}`;
+
+    const icons = {
+      normal: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+      success: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
+      error: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+      warning: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+      info: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+    };
+
+    msg.innerHTML = `
             <div class="ds-message__icon ds-message__icon--${type}">${icons[type]}</div>
             <div class="ds-message__content"></div>
         `;
-        msg.querySelector('.ds-message__content').textContent = message;
-        
-        let container = document.querySelector('.ds-message');
-        if (!container) {
-            container = document.createElement('div');
-            container.className = 'ds-message';
-            document.body.appendChild(container);
-        }
-        
-        container.appendChild(msg);
-        
-        setTimeout(() => {
-            msg.classList.add('is-visible');
-        }, 10);
-        
-        if (duration > 0) {
-            setTimeout(() => {
-                msg.classList.remove('is-visible');
-                msg.classList.add('is-exiting');
-                setTimeout(() => msg.remove(), 300);
-            }, duration);
-        }
+    msg.querySelector('.ds-message__content').textContent = message;
+
+    let container = document.querySelector('.ds-message');
+    if (!container) {
+      container = document.createElement('div');
+      container.className = `ds-message ds-message--${position}`;
+      document.body.appendChild(container);
+    }
+
+    // Remove excess messages if maxCount exceeded
+    const existingMessages = container.querySelectorAll('.ds-message__item');
+    if (existingMessages.length >= maxCount) {
+      const oldest = existingMessages[0];
+      oldest.classList.remove('is-visible');
+      oldest.classList.add('is-exiting');
+      setTimeout(() => oldest.remove(), 300);
+    }
+
+    container.appendChild(msg);
+
+    setTimeout(() => {
+      msg.classList.add('is-visible');
+    }, 10);
+
+    if (duration > 0) {
+      setTimeout(() => {
+        msg.classList.remove('is-visible');
+        msg.classList.add('is-exiting');
+        setTimeout(() => msg.remove(), 300);
+      }, duration);
     }
+  },
 };
 
 function initMessages() {}
 
-export { Message, initMessages };
+export { Message, initMessages };

package/js/modal.js

@@ -7,10 +7,13 @@ class Modal {
     this.mask = element.querySelector('.ds-modal-mask');
     this.modal = element.querySelector('.ds-modal');
     this.closeBtn = element.querySelector('.ds-modal__close');
-    
-    // Options
+
+    // Options - use config default for backdropClick
+    const uiConfig = getUiConfig();
+    const defaultBackdropClick = uiConfig.modal?.backdropClick !== undefined ? uiConfig.modal.backdropClick : true;
+
     this.fullscreen = options.fullscreen || element.hasAttribute('data-modal-fullscreen');
-    this.closableOnMask = options.closableOnMask !== false; // default true
+    this.closableOnMask = options.closableOnMask !== undefined ? options.closableOnMask : defaultBackdropClick;
     this.escClose = options.escClose !== false;
     this.width = options.width || element.getAttribute('data-modal-width') || '';
     this.center = options.center !== false;
@@ -18,54 +21,54 @@ class Modal {
     this.onBeforeClose = options.onBeforeClose || null;
     this.onOpened = options.onOpened || null;
     this.onClosed = options.onClosed || null;
-    
+
     this._isOpen = false; // 实例级跟踪，防止 _openCount 不匹配
-    
+
     this._keydownHandler = (e) => {
       if (this.escClose && e.key === 'Escape' && this.isVisible()) {
         this.close();
       }
     };
-    
+
     this._closeBtnClickHandler = () => this.close();
-    
+
     this._maskClickHandler = (e) => {
       if (this.closableOnMask && e.target === this.mask) {
         this.close();
       }
     };
-    
+
     this.init();
   }
-  
+
   init() {
     if (this.closeBtn) {
       this.closeBtn.addEventListener('click', this._closeBtnClickHandler);
     }
-    
+
     if (this.mask) {
       this.mask.addEventListener('click', this._maskClickHandler);
     }
-    
+
     document.addEventListener('keydown', this._keydownHandler);
-    
+
     // Apply fullscreen
     if (this.fullscreen && this.modal) {
       this.modal.classList.add('ds-modal--fullscreen');
     }
-    
+
     // Apply custom width
     if (this.width && this.modal) {
       this.modal.style.maxWidth = this.width;
     }
   }
-  
+
   open() {
     if (this.onBeforeOpen) {
       const result = this.onBeforeOpen();
-      if (result === false) return;
+      if (result === false) {return;}
     }
-    
+
     if (this.mask) {
       this.mask.classList.add('is-visible');
       this.mask.classList.add('ds-modal-fade-enter');
@@ -79,26 +82,26 @@ class Modal {
         this.modal.classList.add('ds-modal-zoom-enter-active');
       });
     }
-    
+
     if (!this._isOpen) {
       Modal._openCount = (Modal._openCount || 0) + 1;
       this._isOpen = true;
     }
     document.body.style.overflow = 'hidden';
-    
+
     if (this.onOpened) {
       setTimeout(() => this.onOpened(), 300);
     }
-    
+
     this.element.dispatchEvent(new CustomEvent('kupola:modal-open', { bubbles: true }));
   }
-  
+
   close() {
     if (this.onBeforeClose) {
       const result = this.onBeforeClose();
-      if (result === false) return;
+      if (result === false) {return;}
     }
-    
+
     if (this.mask) {
       this.mask.classList.remove('ds-modal-fade-enter-active');
       this.mask.classList.add('ds-modal-fade-leave-active');
@@ -107,7 +110,7 @@ class Modal {
       this.modal.classList.remove('ds-modal-zoom-enter-active');
       this.modal.classList.add('ds-modal-zoom-leave-active');
     }
-    
+
     setTimeout(() => {
       if (this.mask) {
         this.mask.classList.remove('is-visible', 'ds-modal-fade-enter', 'ds-modal-fade-leave-active');
@@ -116,7 +119,7 @@ class Modal {
         this.modal.classList.remove('ds-modal-zoom-enter', 'ds-modal-zoom-leave-active');
       }
     }, 300);
-    
+
     if (this._isOpen) {
       Modal._openCount = Math.max(0, (Modal._openCount || 0) - 1);
       this._isOpen = false;
@@ -124,25 +127,25 @@ class Modal {
         document.body.style.overflow = '';
       }
     }
-    
+
     if (this.onClosed) {
       setTimeout(() => this.onClosed(), 300);
     }
-    
+
     this.element.dispatchEvent(new CustomEvent('kupola:modal-close', { bubbles: true }));
   }
-  
+
   toggleFullscreen() {
     this.fullscreen = !this.fullscreen;
     if (this.modal) {
       this.modal.classList.toggle('ds-modal--fullscreen', this.fullscreen);
     }
   }
-  
+
   isVisible() {
     return this.mask && this.mask.classList.contains('is-visible');
   }
-  
+
   destroy() {
     document.removeEventListener('keydown', this._keydownHandler);
     if (this.closeBtn) {
@@ -184,14 +187,14 @@ function createModal(options = {}) {
     onOpen,
     onClose,
     footer = null,
-    size = getUiConfig().defaultSize
+    size = getUiConfig().defaultSize,
   } = options;
-  
+
   const sizeClass = size === 'sm' ? 'ds-btn--sm' : size === 'lg' ? 'ds-btn--lg' : '';
-  
+
   const container = document.createElement('div');
   container.className = 'ds-modal-container';
-  
+
   let footerHTML = '';
   if (footer !== null) {
     if (typeof footer === 'string') {
@@ -203,7 +206,7 @@ function createModal(options = {}) {
       </div>`;
     }
   }
-  
+
   container.innerHTML = `
     <div class="ds-modal-mask">
       <div class="ds-modal${fullscreen ? ' ds-modal--fullscreen' : ''}" style="${!fullscreen ? 'max-width: ' + width : ''}">
@@ -220,13 +223,13 @@ function createModal(options = {}) {
       </div>
     </div>
   `;
-  
+
   document.body.appendChild(container);
-  
+
   const modal = new Modal(container, { fullscreen, closableOnMask: maskClosable });
-  
+
   const titleEl = container.querySelector('.ds-modal__title');
-  if (titleEl) titleEl.textContent = title;
+  if (titleEl) {titleEl.textContent = title;}
   const bodyEl = container.querySelector('.ds-modal__body');
   if (bodyEl) {
     if (html) {
@@ -235,12 +238,12 @@ function createModal(options = {}) {
       bodyEl.textContent = content;
     }
   }
-  
+
   const confirmBtn = container.querySelector('[data-modal-confirm]');
   const cancelBtn = container.querySelector('[data-modal-cancel]');
-  
+
   let isConfirming = false;
-  
+
   const confirmHandler = async () => {
     if (onConfirm) {
       // Support async onConfirm
@@ -253,7 +256,7 @@ function createModal(options = {}) {
           confirmBtn.classList.remove('is-loading');
           return;
         }
-      } catch(e) {
+      } catch (e) {
         confirmBtn.disabled = false;
         confirmBtn.classList.remove('is-loading');
         return;
@@ -262,34 +265,34 @@ function createModal(options = {}) {
     isConfirming = true;
     modal.close();
   };
-  
+
   const cancelHandler = () => {
-    if (onCancel) onCancel();
+    if (onCancel) {onCancel();}
     modal.close();
   };
-  
-  if (confirmBtn) confirmBtn.addEventListener('click', confirmHandler);
-  if (cancelBtn) cancelBtn.addEventListener('click', cancelHandler);
-  
+
+  if (confirmBtn) {confirmBtn.addEventListener('click', confirmHandler);}
+  if (cancelBtn) {cancelBtn.addEventListener('click', cancelHandler);}
+
   const closeAndDestroy = () => {
     setTimeout(() => {
-      if (confirmBtn) confirmBtn.removeEventListener('click', confirmHandler);
-      if (cancelBtn) cancelBtn.removeEventListener('click', cancelHandler);
+      if (confirmBtn) {confirmBtn.removeEventListener('click', confirmHandler);}
+      if (cancelBtn) {cancelBtn.removeEventListener('click', cancelHandler);}
       modal.destroy();
       container.remove();
-      if (onClose) onClose(isConfirming);
+      if (onClose) {onClose(isConfirming);}
     }, 300);
   };
-  
+
   const originalClose = modal.close.bind(modal);
   modal.close = () => {
     originalClose();
     closeAndDestroy();
   };
-  
+
   modal.open();
-  if (onOpen) setTimeout(() => onOpen(), 50);
-  
+  if (onOpen) {setTimeout(() => onOpen(), 50);}
+
   return modal;
 }
 
@@ -301,7 +304,7 @@ function confirmModal(options) {
   return createModal({
     ...options,
     showCancel: true,
-    showConfirm: true
+    showConfirm: true,
   });
 }
 
@@ -312,12 +315,12 @@ function alertModal(options) {
   return createModal({
     ...options,
     showCancel: false,
-    showConfirm: true
+    showConfirm: true,
   });
 }
 
 function initModal(element) {
-  if (element.__kupolaInitialized) return;
+  if (element.__kupolaInitialized) {return;}
 
   const modal = new Modal(element);
   element.__kupolaInstance = modal;
@@ -325,7 +328,7 @@ function initModal(element) {
 }
 
 function cleanupModal(element) {
-  if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+  if (!element.__kupolaInitialized || !element.__kupolaInstance) {return;}
 
   const modal = element.__kupolaInstance;
   modal.destroy();

package/js/notification.js

@@ -1,34 +1,37 @@
+import { getNotificationConfig } from './kupola-config.js';
+
 const Notification = {
-    normal: function(options) {
-        this.show({ ...options, type: 'normal' });
-    },
-    success: function(options) {
-        this.show({ ...options, type: 'success' });
-    },
-    error: function(options) {
-        this.show({ ...options, type: 'error' });
-    },
-    warning: function(options) {
-        this.show({ ...options, type: 'warning' });
-    },
-    info: function(options) {
-        this.show({ ...options, type: 'info' });
-    },
-    show: function(options) {
-        const { title, message, type = 'normal', duration = 4000 } = options;
-        
-        const notification = document.createElement('div');
-        notification.className = `ds-notification__item ds-notification__item--${type}`;
-        
-        const icons = {
-            normal: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
-            success: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
-            error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
-            warning: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
-            info: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
-        };
-        
-        notification.innerHTML = `
+  normal: function (options) {
+    this.show({ ...options, type: 'normal' });
+  },
+  success: function (options) {
+    this.show({ ...options, type: 'success' });
+  },
+  error: function (options) {
+    this.show({ ...options, type: 'error' });
+  },
+  warning: function (options) {
+    this.show({ ...options, type: 'warning' });
+  },
+  info: function (options) {
+    this.show({ ...options, type: 'info' });
+  },
+  show: function (options) {
+    const notifConfig = getNotificationConfig();
+    const { title, message, type = 'normal', duration = notifConfig.duration, position = notifConfig.position } = options;
+
+    const notification = document.createElement('div');
+    notification.className = `ds-notification__item ds-notification__item--${type}`;
+
+    const icons = {
+      normal: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+      success: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
+      error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+      warning: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+      info: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+    };
+
+    notification.innerHTML = `
             <div class="ds-notification__icon ds-notification__icon--${type}">${icons[type]}</div>
             <div class="ds-notification__content">
                 ${title ? '<div class="ds-notification__title"></div>' : ''}
@@ -38,38 +41,38 @@ const Notification = {
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
         `;
-        if (title) notification.querySelector('.ds-notification__title').textContent = title;
-        if (message) notification.querySelector('.ds-notification__message').textContent = message;
-        
-        let container = document.querySelector('.ds-notification');
-        if (!container) {
-            container = document.createElement('div');
-            container.className = 'ds-notification';
-            document.body.appendChild(container);
-        }
-        
-        container.appendChild(notification);
-        
-        setTimeout(() => {
-            notification.classList.add('is-visible');
-        }, 10);
-        
-        notification.querySelector('.ds-notification__close').addEventListener('click', () => {
-            notification.classList.remove('is-visible');
-            notification.classList.add('is-exiting');
-            setTimeout(() => notification.remove(), 300);
-        });
-        
-        if (duration > 0) {
-            setTimeout(() => {
-                notification.classList.remove('is-visible');
-                notification.classList.add('is-exiting');
-                setTimeout(() => notification.remove(), 300);
-            }, duration);
-        }
+    if (title) {notification.querySelector('.ds-notification__title').textContent = title;}
+    if (message) {notification.querySelector('.ds-notification__message').textContent = message;}
+
+    let container = document.querySelector('.ds-notification');
+    if (!container) {
+      container = document.createElement('div');
+      container.className = `ds-notification ds-notification--${position}`;
+      document.body.appendChild(container);
+    }
+
+    container.appendChild(notification);
+
+    setTimeout(() => {
+      notification.classList.add('is-visible');
+    }, 10);
+
+    notification.querySelector('.ds-notification__close').addEventListener('click', () => {
+      notification.classList.remove('is-visible');
+      notification.classList.add('is-exiting');
+      setTimeout(() => notification.remove(), 300);
+    });
+
+    if (duration > 0) {
+      setTimeout(() => {
+        notification.classList.remove('is-visible');
+        notification.classList.add('is-exiting');
+        setTimeout(() => notification.remove(), 300);
+      }, duration);
     }
+  },
 };
 
 function initNotifications() {}
 
-export { Notification, initNotifications };
+export { Notification, initNotifications };

package/js/security.js

@@ -58,4 +58,56 @@ export function stripHtml(html) {
   const domParser = new DOMParser();
   const doc = domParser.parseFromString(html, 'text/html');
   return doc.body.textContent || '';
+}
+
+export function maskData(value, type, options = {}) {
+  const securityConfig = getSecurityConfig();
+  const maskConfig = securityConfig?.maskData || {};
+  
+  if (!maskConfig.enabled && !options.force) {
+    return value;
+  }
+  
+  if (value === null || value === undefined) {
+    return value;
+  }
+  
+  const patterns = options.patterns || maskConfig.patterns || {};
+  const pattern = patterns[type];
+  
+  if (!pattern) {
+    return value;
+  }
+  
+  const regex = typeof pattern.regex === 'string' 
+    ? new RegExp(pattern.regex) 
+    : pattern.regex;
+  
+  return String(value).replace(regex, pattern.replace);
+}
+
+export function generateSecureId(length, prefix) {
+  const securityConfig = getSecurityConfig();
+  const secureIdConfig = securityConfig?.secureId || {};
+  
+  const idLength = length || secureIdConfig.length || 16;
+  const charset = secureIdConfig.charset || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  
+  if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+    let result = '';
+    for (let i = 0; i < idLength; i++) {
+      result += charset[Math.floor(Math.random() * charset.length)];
+    }
+    return prefix ? `${prefix}_${result}` : result;
+  }
+  
+  const array = new Uint32Array(idLength);
+  crypto.getRandomValues(array);
+  
+  let result = '';
+  for (let i = 0; i < idLength; i++) {
+    result += charset[array[i] % charset.length];
+  }
+  
+  return prefix ? `${prefix}_${result}` : result;
 }