@kupola/kupola 2.0.0-beta.1 → 2.0.0-beta.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";function t(t){const i=document.createElement("div");return i.textContent=String(t??""),i.innerHTML}let i=null,o="top-right",n=0;const e={success:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',warning:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',error:'<svg width="20" height="20" 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>',info:'<svg width="20" height="20" 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>',normal:""},s={"top-right":"","top-left":"ds-notification--top-left","bottom-right":"ds-notification--bottom-right","bottom-left":"ds-notification--bottom-left",bottom:"ds-notification--bottom"};function c(c={}){const{title:r="",message:l="",type:a="normal",duration:d=4500,closable:f=!0}=c,u=function(){if(i&&i.parentNode)return i;i=document.createElement("div"),i.className="ds-notification";const t=s[o];return t&&i.classList.add(t),document.body.appendChild(i),i}(),g=++n,h=e[a]||e.normal,v=document.createElement("div");v.className=`ds-notification__item ds-notification__item--${a}`,v.setAttribute("data-id",g);let m="";h&&(m+=`<span class="ds-notification__icon">${h}</span>`),m+='<div class="ds-notification__content">',r&&(m+=`<div class="ds-notification__title">${t(r)}</div>`),l&&(m+=`<div class="ds-notification__message">${t(l)}</div>`),m+="</div>",f&&(m+='<button class="ds-notification__close" aria-label="Close">×</button>'),v.innerHTML=m;let x=null;function y(){x&&clearTimeout(x),v.classList.add("is-exiting"),v.addEventListener("animationend",()=>{v.remove(),0===u.childNodes.length&&u.parentNode&&(u.parentNode.removeChild(u),i=null)},{once:!0})}const _=v.querySelector(".ds-notification__close");return _&&_.addEventListener("click",y),d>0&&(x=setTimeout(y,d)),u.appendChild(v),{close:y}}function r(t){return(i={})=>c({...i,type:t})}const l={open:c,success:r("success"),warning:r("warning"),error:r("error"),info:r("info"),setPosition(t){o=t,function(){if(!i)return;i.className="ds-notification";const t=s[o];t&&i.classList.add(t)}()},destroy(){i&&i.parentNode&&(i.parentNode.removeChild(i),i=null)}};exports.Notification=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
function t(t){const i=document.createElement("div");return i.textContent=String(t??""),i.innerHTML}let i=null,o="top-right",n=0;const e={success:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',warning:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',error:'<svg width="20" height="20" 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>',info:'<svg width="20" height="20" 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>',normal:""},s={"top-right":"","top-left":"ds-notification--top-left","bottom-right":"ds-notification--bottom-right","bottom-left":"ds-notification--bottom-left",bottom:"ds-notification--bottom"};function c(c={}){const{title:r="",message:l="",type:a="normal",duration:d=4500,closable:f=!0}=c,u=function(){if(i&&i.parentNode)return i;i=document.createElement("div"),i.className="ds-notification";const t=s[o];return t&&i.classList.add(t),document.body.appendChild(i),i}(),g=++n,h=e[a]||e.normal,v=document.createElement("div");v.className=`ds-notification__item ds-notification__item--${a}`,v.setAttribute("data-id",g);let m="";h&&(m+=`<span class="ds-notification__icon">${h}</span>`),m+='<div class="ds-notification__content">',r&&(m+=`<div class="ds-notification__title">${t(r)}</div>`),l&&(m+=`<div class="ds-notification__message">${t(l)}</div>`),m+="</div>",f&&(m+='<button class="ds-notification__close" aria-label="Close">×</button>'),v.innerHTML=m;let x=null;function y(){x&&clearTimeout(x),v.classList.add("is-exiting"),v.addEventListener("animationend",()=>{v.remove(),0===u.childNodes.length&&u.parentNode&&(u.parentNode.removeChild(u),i=null)},{once:!0})}const _=v.querySelector(".ds-notification__close");return _&&_.addEventListener("click",y),d>0&&(x=setTimeout(y,d)),u.appendChild(v),{close:y}}function r(t){return(i={})=>c({...i,type:t})}const l={open:c,success:r("success"),warning:r("warning"),error:r("error"),info:r("info"),setPosition(t){o=t,function(){if(!i)return;i.className="ds-notification";const t=s[o];t&&i.classList.add(t)}()},destroy(){i&&i.parentNode&&(i.parentNode.removeChild(i),i=null)}};export{l as Notification};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kupola/kupola",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.2",
|
|
4
4
|
"description": "A modern, modular UI component library for any web project. Zero framework dependencies, tree-shakeable imports. 这是一个现代、模块化的 UI 组件库，适用于任何 Web 项目。零框架依赖，支持按需引入（tree-shakeable）。",
|
|
5
5
|
"main": "dist/kupola-core.esm.js",
|
|
6
6
|
"module": "dist/kupola-core.esm.js",
|
|
@@ -17,6 +17,13 @@
|
|
|
17
17
|
|
|
18
18
|
// Notification items are created via innerHTML for simpler lifecycle (no reactive bindings needed)
|
|
19
19
|
|
|
20
|
+
/** Escape HTML special chars to prevent XSS. */
|
|
21
|
+
function _esc(str) {
|
|
22
|
+
const div = document.createElement('div');
|
|
23
|
+
div.textContent = String(str ?? '');
|
|
24
|
+
return div.innerHTML;
|
|
25
|
+
}
|
|
26
|
+
|
|
20
27
|
let _container = null;
|
|
21
28
|
let _position = 'top-right';
|
|
22
29
|
let _idCounter = 0;
|
|
@@ -89,8 +96,8 @@ function _open(options = {}) {
|
|
|
89
96
|
html_content += `<span class="ds-notification__icon">${iconHtml}</span>`;
|
|
90
97
|
}
|
|
91
98
|
html_content += '<div class="ds-notification__content">';
|
|
92
|
-
if (title) {html_content += `<div class="ds-notification__title">${title}</div>`;}
|
|
93
|
-
if (message) {html_content += `<div class="ds-notification__message">${message}</div>`;}
|
|
99
|
+
if (title) {html_content += `<div class="ds-notification__title">${_esc(title)}</div>`;}
|
|
100
|
+
if (message) {html_content += `<div class="ds-notification__message">${_esc(message)}</div>`;}
|
|
94
101
|
html_content += '</div>';
|
|
95
102
|
if (closable) {
|
|
96
103
|
html_content += '<button class="ds-notification__close" aria-label="Close">×</button>';
|