@3r1s_s/erisui 1.0.6 → 1.0.8
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.
- package/dist/erisui.js +16 -16
- package/dist/erisui.mjs +88 -81
- package/package.json +3 -2
package/dist/erisui.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(p,
|
|
1
|
+
(function(p,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(p=typeof globalThis<"u"?globalThis:p||self,b(p.eui={}))})(this,(function(p){"use strict";class b extends HTMLElement{static get observedAttributes(){return["size","border-radius","name","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
aspect-ratio: 1 / 1;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<slot></slot>
|
|
44
44
|
<span id="initials"></span>
|
|
45
45
|
</div>
|
|
46
|
-
`}connectedCallback(){this.avatar=this.shadowRoot.querySelector(".avatar"),this.initials=this.shadowRoot.querySelector("#initials");const t=this.shadowRoot.querySelector("slot"),i=t&&t.assignedNodes().length>0;if(i){const e=t.assignedNodes()[0];e&&e.tagName==="IMG"&&(this.initials.style.display="none",this.avatar.style.backgroundColor="transparent")}else this.hasAttribute("color")&&(this.avatar.style.backgroundColor=this.getAttribute("color"));if(this.hasAttribute("color")&&(this.avatar.style.backgroundColor=this.getAttribute("color")),this.hasAttribute("size")){const e=this.getAttribute("size");this.avatar.style.width=e+"px",this.avatar.style.height=e+"px",this.initials.style.fontSize=e/2+"px"}if(this.hasAttribute("border-radius")&&(this.avatar.style.borderRadius=this.getAttribute("border-radius")+"px"),this.hasAttribute("name")&&(this.avatar.title=this.getAttribute("name")),!i&&this.hasAttribute("name")){const r=this.getAttribute("name").trim().split(/\s+/);let
|
|
46
|
+
`}connectedCallback(){this.avatar=this.shadowRoot.querySelector(".avatar"),this.initials=this.shadowRoot.querySelector("#initials");const t=this.shadowRoot.querySelector("slot"),i=t&&t.assignedNodes().length>0;if(i){const e=t.assignedNodes()[0];e&&e.tagName==="IMG"&&(this.initials.style.display="none",this.avatar.style.backgroundColor="transparent")}else this.hasAttribute("color")&&(this.avatar.style.backgroundColor=this.getAttribute("color"));if(this.hasAttribute("color")&&(this.avatar.style.backgroundColor=this.getAttribute("color")),this.hasAttribute("size")){const e=this.getAttribute("size");this.avatar.style.width=e+"px",this.avatar.style.height=e+"px",this.initials.style.fontSize=e/2+"px"}if(this.hasAttribute("border-radius")&&(this.avatar.style.borderRadius=this.getAttribute("border-radius")+"px"),this.hasAttribute("name")&&(this.avatar.title=this.getAttribute("name")),!i&&this.hasAttribute("name")){const r=this.getAttribute("name").trim().split(/\s+/);let n="";r.length===1?n=r[0][0]||"":n=(r[0][0]||"")+(r[r.length-1][0]||""),this.initials.textContent=n.toUpperCase()}}}customElements.define("eui-avatar",b);const f=(()=>{let o={};return{register(t,i){o[t]=i},get(t){return o[t]||""}}})();f.register("menu",'<svg width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"></path></svg>'),f.register("home",'<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5258 0.204649C11.2291 -0.0682165 10.7709 -0.0682161 10.4742 0.204649L0.249923 9.68588C-0.266994 10.1612 0.0714693 11.0197 0.775759 11.0197L3.48971 11.0197V18.6923C3.48971 19.542 4.18295 20.2308 5.03811 20.2308H16.9619C17.8171 20.2308 18.5103 19.542 18.5103 18.6923V11.0197L21.2242 11.0197C21.9285 11.0197 22.267 10.1612 21.7501 9.68588L11.5258 0.204649Z" fill="currentColor"/></svg>'),f.register("kit",'<svg width="26" height="28" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="m13.118 14.831c0.433 0 1.257-0.024 1.795-0.344l9.151-4.057c0.869-0.59 1.051-1.255 1.067-1.773 0.02-0.662-0.313-1.634-1.181-2.15l-8.515-3.921c-0.537-0.309-2.096-0.552-2.529-0.552-0.444 0-1.958 0.42-2.496 0.73l-8.643 4.034c-0.85 0.602-1.022 1.284-0.951 1.942 0.098 0.887 0.206 0.857 0.889 1.503l9.577 4.212c0.537 0.32 1.391 0.376 1.836 0.376zm-0.12 5.467c0.403 0 1.443-0.068 1.928-0.345l8.858-3.991c0.497-0.3 1.448-1.117 1.382-1.952-0.091-1.138-0.598-1.7-0.948-1.906l-9.22 3.888c-0.454 0.261-1.417 0.478-1.916 0.478-0.542 0-1.539-0.228-1.766-0.362l-9.395-4.012c-0.462 0.022-1.174 0.911-1.201 1.642-0.03 0.761 0.7 1.62 1.135 1.839l9.408 4.384c0.485 0.278 1.322 0.337 1.735 0.337zm0.09 5.344c0.403 0 1.296-0.053 1.781-0.342l9.147-4.299c0.485-0.289 1.129-0.789 1.053-1.879-0.056-0.794-0.071-1.123-0.918-1.765l-9.203 4.113c-0.228 0.134-0.948 0.39-1.853 0.39-0.939 0-1.603-0.224-1.831-0.359l-9.451-4.017c-0.979 0.247-1.005 1.45-1.005 1.947 0 0.455 0.403 1.279 0.9 1.568l9.465 4.262c0.486 0.29 1.502 0.381 1.915 0.381z" fill="currentColor"></path></svg>');const S=Object.freeze(Object.defineProperty({__proto__:null,icon:f},Symbol.toStringTag,{value:"Module"}));class L extends HTMLElement{static get observedAttributes(){return["name","width","height"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const t=this.getAttribute("name"),i=f.get(t);if(!i){this.shadowRoot.innerHTML='<span style="color:red;">?</span>';return}const e=document.createElement("template");e.innerHTML=i.trim();const r=e.content.cloneNode(!0),n=r.firstElementChild;if(n&&n.style){const a=this.getAttribute("width"),l=this.getAttribute("height");a&&n.setAttribute("width",a),l&&n.setAttribute("height",l),n.style.display="block"}this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(r)}}customElements.define("eui-icon",L);class z extends HTMLElement{static get observedAttributes(){return["label","value","id","type","filled"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
47
47
|
<style>
|
|
48
48
|
.form {
|
|
49
49
|
display: flex;
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
<input class="form-input" placeholder=" ">
|
|
144
144
|
<label></label>
|
|
145
145
|
</div>
|
|
146
|
-
`}connectedCallback(){this.form=this.shadowRoot.querySelector(".form"),this.inputEl=this.shadowRoot.querySelector(".form-input"),this.labelEl=this.shadowRoot.querySelector("label"),this.hasAttribute("value")&&(this.inputEl.value=this.getAttribute("value")),this.hasAttribute("id")&&(this.inputEl.id=this.getAttribute("id")),this.hasAttribute("label")&&(this.labelEl.textContent=this.getAttribute("label")),this.hasAttribute("type")&&(this.inputEl.type=this.getAttribute("type")),this.hasAttribute("filled")&&this.form.classList.add("filled"),this.inputEl.addEventListener("input",()=>{this.setAttribute("value",this.inputEl.value)})}attributeChangedCallback(t,i,e){if(!(!this.inputEl||!this.labelEl))switch(t){case"value":this.inputEl.value!==e&&(this.inputEl.value=e);break;case"id":this.inputEl.id=e;break;case"label":this.labelEl.textContent=e;break}}get value(){return this.inputEl.value}set value(t){this.setAttribute("value",t)}}customElements.define("eui-input",
|
|
146
|
+
`}connectedCallback(){this.form=this.shadowRoot.querySelector(".form"),this.inputEl=this.shadowRoot.querySelector(".form-input"),this.labelEl=this.shadowRoot.querySelector("label"),this.hasAttribute("value")&&(this.inputEl.value=this.getAttribute("value")),this.hasAttribute("id")&&(this.inputEl.id=this.getAttribute("id")),this.hasAttribute("label")&&(this.labelEl.textContent=this.getAttribute("label")),this.hasAttribute("type")&&(this.inputEl.type=this.getAttribute("type")),this.hasAttribute("filled")&&this.form.classList.add("filled"),this.inputEl.addEventListener("input",()=>{this.setAttribute("value",this.inputEl.value)})}attributeChangedCallback(t,i,e){if(!(!this.inputEl||!this.labelEl))switch(t){case"value":this.inputEl.value!==e&&(this.inputEl.value=e);break;case"id":this.inputEl.id=e;break;case"label":this.labelEl.textContent=e;break}}get value(){return this.inputEl.value}set value(t){this.setAttribute("value",t)}}customElements.define("eui-input",z);class T extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
147
147
|
<style>
|
|
148
148
|
.loader {
|
|
149
149
|
width: 24px;
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
<div class="progressbar">
|
|
233
233
|
<span class="progress"></span>
|
|
234
234
|
</div>
|
|
235
|
-
`}set value(t){this.setAttribute("value",t)}attributeChangedCallback(){this.connectedCallback()}connectedCallback(){const t=this.shadowRoot.querySelector(".progress");this.hasAttribute("id")&&(this.progress.id=this.getAttribute("id")),this.hasAttribute("intermediate")&&t.classList.add("intermediate"),this.hasAttribute("value")&&(t.style.width=this.getAttribute("value")+"%")}}customElements.define("eui-progressbar",M);const
|
|
235
|
+
`}set value(t){this.setAttribute("value",t)}attributeChangedCallback(){this.connectedCallback()}connectedCallback(){const t=this.shadowRoot.querySelector(".progress");this.hasAttribute("id")&&(this.progress.id=this.getAttribute("id")),this.hasAttribute("intermediate")&&t.classList.add("intermediate"),this.hasAttribute("value")&&(t.style.width=this.getAttribute("value")+"%")}}customElements.define("eui-progressbar",M);const v={is:{iPhone:/iPhone/.test(navigator.userAgent),iPad:/iPad/.test(navigator.userAgent),iOS:/iPhone|iPad|iPod/.test(navigator.userAgent),android:/Android/.test(navigator.userAgent),mobile:/Mobi|Android/i.test(navigator.userAgent)},prefers:{language:navigator.language||navigator.userLanguage,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,reducedTransparency:window.matchMedia("(prefers-reduced-transparency: reduce)").matches},supports:{share:typeof navigator.share=="function",directDownload:"download"in document.createElement("a"),haptics:"vibrate"in navigator||"Vibrate"in window||typeof window.navigator.vibrate=="function"},userAgent:navigator.userAgent},R=Object.freeze(Object.defineProperty({__proto__:null,device:v},Symbol.toStringTag,{value:"Module"}));function $(){try{const o=document.createElement("label");o.ariaHidden="true",o.style.display="none";const t=document.createElement("input");t.type="checkbox",t.setAttribute("switch",""),o.appendChild(t),document.head.appendChild(o),o.click(),document.head.removeChild(o)}catch{}}function x(o){v.supports.haptics?navigator.vibrate(o||50):v.is.iPhone&&$()}const H=Object.freeze(Object.defineProperty({__proto__:null,haptic:x},Symbol.toStringTag,{value:"Module"})),E=(()=>{let o={},t;try{o=JSON.parse(localStorage.getItem(t)||"{}")}catch(i){console.error(i)}return{get(i){return o[i]},set(i,e){o[i]=e,localStorage.setItem(t,JSON.stringify(o))},delete(i){delete o[i],localStorage.setItem(t,JSON.stringify(o))},all(){return o},clear(){o={},localStorage.setItem(t,JSON.stringify(o))},name(i){t=i;try{o=JSON.parse(localStorage.getItem(t)||"{}")}catch(e){console.error(e)}},settings:{get(i){return o&&o.settings&&o.settings[i]},set(i,e){o.settings||(o.settings={}),o.settings[i]=e,localStorage.setItem(t,JSON.stringify(o))},delete(i){o.settings&&(delete o.settings[i],localStorage.setItem(t,JSON.stringify(o)))},all(){return o.settings||{}},clear(){o.settings&&(o.settings={},localStorage.setItem(t,JSON.stringify(o)))}}}})(),A=E.settings,_=Object.freeze(Object.defineProperty({__proto__:null,settings:A,storage:E},Symbol.toStringTag,{value:"Module"}));class I extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
236
236
|
<style>
|
|
237
237
|
.switch {
|
|
238
238
|
background-color: var(--app-200);
|
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
<input type="checkbox" role="switch">
|
|
302
302
|
<span class="handle"></span>
|
|
303
303
|
</div>
|
|
304
|
-
`}connectedCallback(){this.inputEl=this.shadowRoot.querySelector("input"),this.switchEl=this.shadowRoot.querySelector(".switch"),this.updateFromAttribute(),this.switchEl.addEventListener("click",()=>this.toggle())}toggle(){this.selected=!this.selected,
|
|
304
|
+
`}connectedCallback(){this.inputEl=this.shadowRoot.querySelector("input"),this.switchEl=this.shadowRoot.querySelector(".switch"),this.updateFromAttribute(),this.switchEl.addEventListener("click",()=>this.toggle())}toggle(){this.selected=!this.selected,x()}updateFromAttribute(){const t=this.hasAttribute("selected");this.inputEl.checked=t,this.switchEl.classList.toggle("selected",t)}attributeChangedCallback(t,i,e){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-switch",I);class F extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.innerHTML=`
|
|
305
305
|
<style>
|
|
306
306
|
:host {
|
|
307
307
|
display: inline-flex;
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
}
|
|
347
347
|
</style>
|
|
348
348
|
<slot></slot>
|
|
349
|
-
`,this.addEventListener("pointerdown",t=>{const i=document.createElement("span"),e=t.currentTarget,r=Math.max(e.offsetWidth,e.offsetHeight);i.classList.add("ripple"),i.style.left=t.clientX-e.getBoundingClientRect().left-r/2+"px",i.style.top=t.clientY-e.getBoundingClientRect().top-r/2+"px",i.style.width=r+"px",i.style.height=r+"px",this.shadowRoot.appendChild(i),setTimeout(()=>{i.remove()},600)})}}customElements.define("eui-chip",
|
|
349
|
+
`,this.addEventListener("pointerdown",t=>{const i=document.createElement("span"),e=t.currentTarget,r=Math.max(e.offsetWidth,e.offsetHeight);i.classList.add("ripple"),i.style.left=t.clientX-e.getBoundingClientRect().left-r/2+"px",i.style.top=t.clientY-e.getBoundingClientRect().top-r/2+"px",i.style.width=r+"px",i.style.height=r+"px",this.shadowRoot.appendChild(i),setTimeout(()=>{i.remove()},600)})}}customElements.define("eui-chip",F);const m="",w=(()=>{const o=[];function t(s,d){const h=[],g=s.replace(/:([^/]+)/g,(y,k)=>(h.push(k),"([^/]+)")).replace(/\//g,"\\/"),u=new RegExp(`^${m}${g}$`);o.push({regex:u,paramNames:h,renderFn:d})}function i(s){for(const{regex:d,paramNames:h,renderFn:g}of o){const u=s.match(d);if(u){const y={};return h.forEach((k,G)=>{y[k]=decodeURIComponent(u[G+1])}),{renderFn:g,params:y}}}return null}function e(s,d=!0){s.startsWith(m)||(s=m+(s.startsWith("/")?"":"/")+s);const h=s.split(/[?#]/)[0];if(h===window.location.pathname&&s.includes("#")){d&&history.pushState({},"",s);const u="#"+s.split("#")[1];r(u);return}const g=i(h);if(g)if(d&&history.pushState({},"",s),g.renderFn(g.params),window.dispatchEvent(new CustomEvent("route-changed",{detail:{path:s}})),s.includes("#")){const u="#"+s.split("#")[1];setTimeout(()=>r(u),100)}else{const u=document.getElementById("main");u&&u.scrollTo(0,0)}else n?(d&&history.pushState({},"",s),n()):console.warn(`No route found for ${h}`)}function r(s){if(s)try{const d=document.querySelector(s);d&&d.scrollIntoView({behavior:"smooth"})}catch{console.warn("Invalid hash:",s)}}let n=null;function a(s){n=s}function l(){history.back()}function c(){return window.location.pathname.replace(m,"")||"/"}return window.addEventListener("popstate",()=>{const s=window.location.pathname+window.location.search+window.location.hash;e(s,!1)}),window.addEventListener("click",s=>{if(s.button!==0||s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;const d=s.target.closest("a");if(!d||d.hasAttribute("download")||d.getAttribute("target")==="_blank")return;const h=d.getAttribute("href");if(!(!h||h.startsWith("http")&&!h.startsWith(window.location.origin))){if(s.preventDefault(),h.startsWith("#")){history.pushState({},"",h),r(h);return}e(h)}}),{add:t,navigate:e,back:l,location:c,setNotFound:a}})();async function j(o){try{const t=document.getElementById("main");t.classList.add("fade-out"),await new Promise(e=>setTimeout(e,200));const i=await fetch(`/src/pages/${o}.html`).then(e=>e.text());t.innerHTML=i,t.classList.remove("fade-out"),t.classList.add("fade-in"),window.location.hash?setTimeout(()=>{try{const e=document.querySelector(window.location.hash);e&&e.scrollIntoView({behavior:"smooth"})}catch{}},100):t&&t.scrollTo(0,0),setTimeout(()=>{t.classList.remove("fade-in")},200)}catch(t){console.error("Page load failed:",t)}}class q extends HTMLElement{static get observedAttributes(){return["path","icon","label","badge","active","avatar-src","avatar-name"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasRendered||(this.render(),this.setupEventListeners(),this.hasRendered=!0),this.updateContent(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(t,i,e){if(i!==e&&this.hasRendered){if(t==="active")return;this.updateContent()}}handleClick=()=>{const t=this.getAttribute("path");t&&w.navigate(t)};setupEventListeners(){this.addEventListener("pointerdown",t=>{const i=document.createElement("span"),e=t.currentTarget,r=e.getBoundingClientRect(),n=Math.max(e.offsetWidth,e.offsetHeight),a=n/2;i.classList.add("ripple"),i.style.width=`${n}px`,i.style.height=`${n}px`,i.style.left=`${t.clientX-r.left-a}px`,i.style.top=`${t.clientY-r.top-a}px`,this.shadowRoot.appendChild(i),i.addEventListener("animationend",()=>{i.remove()})})}updateContent(){const t=this.getAttribute("icon"),i=this.getAttribute("avatar-src"),e=this.getAttribute("avatar-name"),r=this.getAttribute("label")||"",n=this.getAttribute("badge"),a=this.shadowRoot.querySelector(".badge");if(n)if(a)a.textContent=n;else{const s=document.createElement("span");s.className="badge",s.textContent=n,this.shadowRoot.appendChild(s)}else a&&a.remove();const l=this.shadowRoot.querySelector("slot[name='icon']");if(l)if(i||e){let s='<eui-avatar size="24"';e&&(s+=` name="${e}"`),s+=">",i&&(s+=`<img src="${i}" alt="${e||"Avatar"}" />`),s+="</eui-avatar>",l.innerHTML=s}else{const s=l.querySelector("eui-icon");t&&s?s.getAttribute("name")!==t&&s.setAttribute("name",t):t?l.innerHTML=`<eui-icon width="24" height="24" name="${t}"></eui-icon>`:l.innerHTML=""}const c=this.shadowRoot.querySelector(".label");c&&(c.textContent=r)}render(){this.shadowRoot.innerHTML=`
|
|
350
350
|
<style>
|
|
351
351
|
:host {
|
|
352
352
|
position: relative;
|
|
@@ -451,7 +451,7 @@
|
|
|
451
451
|
</slot>
|
|
452
452
|
</div>
|
|
453
453
|
<span class="label"></span>
|
|
454
|
-
`}}customElements.define("eui-nav-item",q);class
|
|
454
|
+
`}}customElements.define("eui-nav-item",q);class N extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),window.addEventListener("route-changed",()=>this.updateActiveState()),window.addEventListener("toggle-nav",()=>this.classList.toggle("expanded"))}render(){this.shadowRoot.innerHTML=`
|
|
455
455
|
<style>
|
|
456
456
|
:host {
|
|
457
457
|
position: fixed;
|
|
@@ -553,7 +553,7 @@
|
|
|
553
553
|
${this.navItems.map(t=>{if(t.type==="divider")return'<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';const i=t.avatar?.src||"",e=t.avatar?.name||"";return`<eui-nav-item path="${t.path}" icon="${t.icon}" avatar-src="${i}" avatar-name="${e}" label="${t.label}"></eui-nav-item>`}).join("")}
|
|
554
554
|
</div>
|
|
555
555
|
</div>
|
|
556
|
-
`}set navItems(t){this._navItems=t,this.render(),this.updateActiveState()}get navItems(){return this._navItems||[]}updateActiveState(t){t||(t=
|
|
556
|
+
`}set navItems(t){this._navItems=t,this.render(),this.updateActiveState()}get navItems(){return this._navItems||[]}updateActiveState(t){t||(t=w.location()),t.startsWith("/")||(t="/"+t),this.shadowRoot.querySelectorAll("eui-nav-item").forEach(e=>{e.getAttribute("path")===t?e.setAttribute("active",""):e.removeAttribute("active")})}}customElements.define("eui-app-nav",N);class B extends HTMLElement{static get observedAttributes(){return["type","title","subtitle","img"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
557
557
|
<style>
|
|
558
558
|
:host {
|
|
559
559
|
border-radius: 24px;
|
|
@@ -622,7 +622,7 @@
|
|
|
622
622
|
<p></p>
|
|
623
623
|
</div>
|
|
624
624
|
</div>
|
|
625
|
-
`}connectedCallback(){this.hd=this.shadowRoot.querySelector(".header"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}attributeChangedCallback(t,i,e){const r=this.shadowRoot.querySelector("h1"),
|
|
625
|
+
`}connectedCallback(){this.hd=this.shadowRoot.querySelector(".header"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}attributeChangedCallback(t,i,e){const r=this.shadowRoot.querySelector("h1"),n=this.shadowRoot.querySelector("p"),a=this.shadowRoot.querySelector(".img");t==="title"&&(r.textContent=e),t==="subtitle"&&(n.textContent=e),t==="img"&&(a.style.backgroundImage=e?`url(${e})`:"")}}customElements.define("eui-header",B);class O extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
626
626
|
<style>
|
|
627
627
|
:host {
|
|
628
628
|
display: block;
|
|
@@ -705,7 +705,7 @@
|
|
|
705
705
|
<rect class="mark long"></rect>
|
|
706
706
|
</svg>
|
|
707
707
|
</div>
|
|
708
|
-
`}connectedCallback(){this.inputEl=this.shadowRoot.querySelector("input"),this.checkEl=this.shadowRoot.querySelector(".checkbox"),this.updateFromAttribute(),this.checkEl.addEventListener("click",()=>this.toggle())}toggle(){this.selected=!this.selected,
|
|
708
|
+
`}connectedCallback(){this.inputEl=this.shadowRoot.querySelector("input"),this.checkEl=this.shadowRoot.querySelector(".checkbox"),this.updateFromAttribute(),this.checkEl.addEventListener("click",()=>this.toggle())}toggle(){this.selected=!this.selected,x();const t=this.selected,i=this.dataset.setting;i&&A.set(i,t)}updateFromAttribute(){const t=this.hasAttribute("selected");this.inputEl.checked=t,this.checkEl.classList.toggle("selected",t)}attributeChangedCallback(t,i,e){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-checkbox",O);class P extends HTMLElement{static observedAttributes=["type","width","height","border-radius","icon","link","href"];constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){const t=this.getAttribute("href"),i=t?"a":"button";this.shadowRoot.innerHTML=`
|
|
709
709
|
<style>
|
|
710
710
|
button, a {
|
|
711
711
|
display: flex;
|
|
@@ -811,7 +811,7 @@
|
|
|
811
811
|
<${i}>
|
|
812
812
|
<slot></slot>
|
|
813
813
|
</${i}>
|
|
814
|
-
`;const e=this.shadowRoot.querySelector(i);t&&e.setAttribute("href",t),this.hasAttribute("type")&&e.classList.add(this.getAttribute("type")),this.hasAttribute("icon")&&e.classList.add("icon"),this.hasAttribute("width")&&(e.style.width=this.getAttribute("width")+"px"),this.hasAttribute("height")&&(e.style.height=this.getAttribute("height")+"px"),this.hasAttribute("border-radius")&&(e.style.borderRadius=this.getAttribute("border-radius")+"px"),e.addEventListener("pointerdown",r=>{const
|
|
814
|
+
`;const e=this.shadowRoot.querySelector(i);t&&e.setAttribute("href",t),this.hasAttribute("type")&&e.classList.add(this.getAttribute("type")),this.hasAttribute("icon")&&e.classList.add("icon"),this.hasAttribute("width")&&(e.style.width=this.getAttribute("width")+"px"),this.hasAttribute("height")&&(e.style.height=this.getAttribute("height")+"px"),this.hasAttribute("border-radius")&&(e.style.borderRadius=this.getAttribute("border-radius")+"px"),e.addEventListener("pointerdown",r=>{const n=document.createElement("span"),a=r.currentTarget,l=a.getBoundingClientRect(),c=Math.max(a.offsetWidth,a.offsetHeight),s=c/2;n.classList.add("ripple"),n.style.width=`${c}px`,n.style.height=`${c}px`,n.style.left=`${r.clientX-l.left-s}px`,n.style.top=`${r.clientY-l.top-s}px`,e.appendChild(n),n.addEventListener("animationend",()=>{n.remove()})})}}customElements.define("eui-button",P);class U extends HTMLElement{static get observedAttributes(){return["type","anchor"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.hd=this.shadowRoot.querySelector(".hd"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}render(){this.shadowRoot.innerHTML=`
|
|
815
815
|
<style>
|
|
816
816
|
:host {
|
|
817
817
|
display: block;
|
|
@@ -869,7 +869,7 @@
|
|
|
869
869
|
<span class="anchor-hash">#</span>
|
|
870
870
|
</a>
|
|
871
871
|
`:""}
|
|
872
|
-
`}}customElements.define("eui-heading",
|
|
872
|
+
`}}customElements.define("eui-heading",U);function D(o){const e=Date.now()-o,r=Math.floor(e/1e3),n=Math.floor(r/60),a=Math.floor(n/60),l=Math.floor(a/24),c=Math.floor(l/30),s=Math.floor(c/12);return s>0?`${s}y`:c>0?`${c}mo`:l>0?`${l}d`:a>0?`${a}h`:n>0?`${n}m`:`${r}s`}function X(o){const e=Date.now()-o,r=Math.floor(e/1e3),n=Math.floor(r/60),a=Math.floor(n/60),l=Math.floor(a/24),c=Math.floor(l/30),s=Math.floor(c/12);return s>0?`${s} year${s>1?"s":""} ago`:c>0?`${c} month${c>1?"s":""} ago`:l>0?`${l} day${l>1?"s":""} ago`:a>0?`${a} hour${a>1?"s":""} ago`:n>0?`${n} minute${n>1?"s":""} ago`:`${r} second${r>1?"s":""} ago`}function W(o){return o.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/`/g,"`").replace(/'/g,"'")}function C(o){const t=document.createElement("input");t.value=o,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}const J=Object.freeze(Object.defineProperty({__proto__:null,copystr:C,joinedAgo:X,sanitize:W,timeAgo:D},Symbol.toStringTag,{value:"Module"}));class V extends HTMLElement{static get observedAttributes(){return["copy","id","type"]}constructor(){super(),this.attachShadow({mode:"open"}),this._boundCopy=this._onCopy.bind(this),this._isRendered=!1}connectedCallback(){this._isRendered||(this.render(),this._isRendered=!0)}render(){const t=this.hasAttribute("copy");this.shadowRoot.innerHTML=`
|
|
873
873
|
<style>
|
|
874
874
|
:host {
|
|
875
875
|
position: relative;
|
|
@@ -903,8 +903,8 @@
|
|
|
903
903
|
|
|
904
904
|
<pre class="${t?"g":""}"><code></code></pre>
|
|
905
905
|
`,this.copyBtn=this.shadowRoot.querySelector(".copy"),this.codeEl=this.shadowRoot.querySelector("code"),this.codeEl.textContent=this._getFormattedText(),t?this.copyBtn.addEventListener("click",this._boundCopy):this.copyBtn.style.display="none"}_getFormattedText(){let t=this.textContent||"";t=t.replace(/^\s*\n/,"").replace(/\n\s*$/,""),t=t.replace(/[ \t]+$/gm,"");const i=t.split(`
|
|
906
|
-
`),e=i.filter(
|
|
907
|
-
`),t}_onCopy(){
|
|
906
|
+
`),e=i.filter(n=>n.trim()).map(n=>n.match(/^\s*/)[0].length),r=e.length?Math.min(...e):0;return t=i.map(n=>n.slice(r)).join(`
|
|
907
|
+
`),t}_onCopy(){C(this._getFormattedText())}disconnectedCallback(){this.copyBtn&&this.copyBtn.removeEventListener("click",this._boundCopy)}}customElements.define("eui-code",V);class Y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["name"]}attributeChangedCallback(t,i,e){t==="name"&&(this.render(),this.setupEventListeners())}setupEventListeners(){const t=this.shadowRoot.querySelector("#nav-toggle");t&&t.addEventListener("click",()=>{window.dispatchEvent(new CustomEvent("toggle-nav"))})}render(){const t=this.getAttribute("name")||"Title";this.shadowRoot.innerHTML=`
|
|
908
908
|
<style>
|
|
909
909
|
:host {
|
|
910
910
|
display: block;
|
|
@@ -996,7 +996,7 @@
|
|
|
996
996
|
<slot></slot>
|
|
997
997
|
</div>
|
|
998
998
|
</div>
|
|
999
|
-
`}}customElements.define("eui-app-titlebar",
|
|
999
|
+
`}}customElements.define("eui-app-titlebar",Y);class K extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._handleMouseDown=this._addRipple.bind(this)}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["elevated","interactive","ripple"]}attributeChangedCallback(t,i,e){i!==e&&t==="ripple"&&this.setupEventListeners()}setupEventListeners(){this.removeEventListener("mousedown",this._handleMouseDown),this.hasAttribute("ripple")&&this.addEventListener("mousedown",this._handleMouseDown)}_addRipple(t){const i=this.getBoundingClientRect(),e=document.createElement("span"),r=Math.max(i.width,i.height),n=r/2;e.style.width=e.style.height=`${r}px`,e.style.left=`${t.clientX-i.left-n}px`,e.style.top=`${t.clientY-i.top-n}px`,e.classList.add("ripple"),this.shadowRoot.querySelector(".surface").appendChild(e),e.addEventListener("animationend",()=>{e.remove()})}render(){this.shadowRoot.innerHTML=`
|
|
1000
1000
|
<style>
|
|
1001
1001
|
:host {
|
|
1002
1002
|
display: block;
|
|
@@ -1057,4 +1057,4 @@
|
|
|
1057
1057
|
<div class="surface">
|
|
1058
1058
|
<slot></slot>
|
|
1059
1059
|
</div>
|
|
1060
|
-
`}}customElements.define("eui-surface",
|
|
1060
|
+
`}}customElements.define("eui-surface",K),typeof window<"u"&&console.log("ErisUI loaded successfully"),p.device=R,p.haptics=H,p.icons=S,p.loadPage=j,p.router=w,p.storage=_,p.utils=J,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/erisui.mjs
CHANGED
|
@@ -63,14 +63,31 @@ class C extends HTMLElement {
|
|
|
63
63
|
this.avatar.style.width = e + "px", this.avatar.style.height = e + "px", this.initials.style.fontSize = e / 2 + "px";
|
|
64
64
|
}
|
|
65
65
|
if (this.hasAttribute("border-radius") && (this.avatar.style.borderRadius = this.getAttribute("border-radius") + "px"), this.hasAttribute("name") && (this.avatar.title = this.getAttribute("name")), !i && this.hasAttribute("name")) {
|
|
66
|
-
const
|
|
67
|
-
let
|
|
68
|
-
|
|
66
|
+
const n = this.getAttribute("name").trim().split(/\s+/);
|
|
67
|
+
let r = "";
|
|
68
|
+
n.length === 1 ? r = n[0][0] || "" : r = (n[0][0] || "") + (n[n.length - 1][0] || ""), this.initials.textContent = r.toUpperCase();
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
customElements.define("eui-avatar", C);
|
|
73
|
-
const
|
|
73
|
+
const g = /* @__PURE__ */ (() => {
|
|
74
|
+
let o = {};
|
|
75
|
+
return {
|
|
76
|
+
register(t, i) {
|
|
77
|
+
o[t] = i;
|
|
78
|
+
},
|
|
79
|
+
get(t) {
|
|
80
|
+
return o[t] || "";
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
})();
|
|
84
|
+
g.register("menu", '<svg width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"></path></svg>');
|
|
85
|
+
g.register("home", '<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5258 0.204649C11.2291 -0.0682165 10.7709 -0.0682161 10.4742 0.204649L0.249923 9.68588C-0.266994 10.1612 0.0714693 11.0197 0.775759 11.0197L3.48971 11.0197V18.6923C3.48971 19.542 4.18295 20.2308 5.03811 20.2308H16.9619C17.8171 20.2308 18.5103 19.542 18.5103 18.6923V11.0197L21.2242 11.0197C21.9285 11.0197 22.267 10.1612 21.7501 9.68588L11.5258 0.204649Z" fill="currentColor"/></svg>');
|
|
86
|
+
g.register("kit", '<svg width="26" height="28" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="m13.118 14.831c0.433 0 1.257-0.024 1.795-0.344l9.151-4.057c0.869-0.59 1.051-1.255 1.067-1.773 0.02-0.662-0.313-1.634-1.181-2.15l-8.515-3.921c-0.537-0.309-2.096-0.552-2.529-0.552-0.444 0-1.958 0.42-2.496 0.73l-8.643 4.034c-0.85 0.602-1.022 1.284-0.951 1.942 0.098 0.887 0.206 0.857 0.889 1.503l9.577 4.212c0.537 0.32 1.391 0.376 1.836 0.376zm-0.12 5.467c0.403 0 1.443-0.068 1.928-0.345l8.858-3.991c0.497-0.3 1.448-1.117 1.382-1.952-0.091-1.138-0.598-1.7-0.948-1.906l-9.22 3.888c-0.454 0.261-1.417 0.478-1.916 0.478-0.542 0-1.539-0.228-1.766-0.362l-9.395-4.012c-0.462 0.022-1.174 0.911-1.201 1.642-0.03 0.761 0.7 1.62 1.135 1.839l9.408 4.384c0.485 0.278 1.322 0.337 1.735 0.337zm0.09 5.344c0.403 0 1.296-0.053 1.781-0.342l9.147-4.299c0.485-0.289 1.129-0.789 1.053-1.879-0.056-0.794-0.071-1.123-0.918-1.765l-9.203 4.113c-0.228 0.134-0.948 0.39-1.853 0.39-0.939 0-1.603-0.224-1.831-0.359l-9.451-4.017c-0.979 0.247-1.005 1.45-1.005 1.947 0 0.455 0.403 1.279 0.9 1.568l9.465 4.262c0.486 0.29 1.502 0.381 1.915 0.381z" fill="currentColor"></path></svg>');
|
|
87
|
+
const X = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
88
|
+
__proto__: null,
|
|
89
|
+
icon: g
|
|
90
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
74
91
|
class S extends HTMLElement {
|
|
75
92
|
static get observedAttributes() {
|
|
76
93
|
return ["name", "width", "height"];
|
|
@@ -81,34 +98,23 @@ class S extends HTMLElement {
|
|
|
81
98
|
connectedCallback() {
|
|
82
99
|
this.render();
|
|
83
100
|
}
|
|
84
|
-
attributeChangedCallback(
|
|
85
|
-
|
|
101
|
+
attributeChangedCallback() {
|
|
102
|
+
this.render();
|
|
86
103
|
}
|
|
87
|
-
|
|
88
|
-
const t = this.getAttribute("name");
|
|
89
|
-
if (!
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
const a = await fetch(`/icons/${t}.svg`);
|
|
94
|
-
if (a.ok)
|
|
95
|
-
i = await a.text(), x.set(t, i);
|
|
96
|
-
else {
|
|
97
|
-
console.error(`Icon "${t}" not found`), this.shadowRoot.innerHTML = '<span style="color:red;">?</span>';
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
} catch (a) {
|
|
101
|
-
console.error(`Error loading icon "${t}":`, a), this.shadowRoot.innerHTML = '<span style="color:red;">?</span>';
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
+
render() {
|
|
105
|
+
const t = this.getAttribute("name"), i = g.get(t);
|
|
106
|
+
if (!i) {
|
|
107
|
+
this.shadowRoot.innerHTML = '<span style="color:red;">?</span>';
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
104
110
|
const e = document.createElement("template");
|
|
105
111
|
e.innerHTML = i.trim();
|
|
106
|
-
const
|
|
107
|
-
if (
|
|
112
|
+
const n = e.content.cloneNode(!0), r = n.firstElementChild;
|
|
113
|
+
if (r && r.style) {
|
|
108
114
|
const a = this.getAttribute("width"), l = this.getAttribute("height");
|
|
109
|
-
a &&
|
|
115
|
+
a && r.setAttribute("width", a), l && r.setAttribute("height", l), r.style.display = "block";
|
|
110
116
|
}
|
|
111
|
-
this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(
|
|
117
|
+
this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(n);
|
|
112
118
|
}
|
|
113
119
|
}
|
|
114
120
|
customElements.define("eui-icon", S);
|
|
@@ -246,7 +252,7 @@ class L extends HTMLElement {
|
|
|
246
252
|
}
|
|
247
253
|
}
|
|
248
254
|
customElements.define("eui-input", L);
|
|
249
|
-
class
|
|
255
|
+
class z extends HTMLElement {
|
|
250
256
|
constructor() {
|
|
251
257
|
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
|
|
252
258
|
<style>
|
|
@@ -296,7 +302,7 @@ class T extends HTMLElement {
|
|
|
296
302
|
`;
|
|
297
303
|
}
|
|
298
304
|
}
|
|
299
|
-
customElements.define("eui-loader",
|
|
305
|
+
customElements.define("eui-loader", z);
|
|
300
306
|
class M extends HTMLElement {
|
|
301
307
|
static get observedAttributes() {
|
|
302
308
|
return ["value", "intermediate", "id"];
|
|
@@ -360,7 +366,7 @@ class M extends HTMLElement {
|
|
|
360
366
|
}
|
|
361
367
|
}
|
|
362
368
|
customElements.define("eui-progressbar", M);
|
|
363
|
-
const
|
|
369
|
+
const v = {
|
|
364
370
|
is: {
|
|
365
371
|
iPhone: /iPhone/.test(navigator.userAgent),
|
|
366
372
|
iPad: /iPad/.test(navigator.userAgent),
|
|
@@ -380,11 +386,11 @@ const m = {
|
|
|
380
386
|
haptics: "vibrate" in navigator || "Vibrate" in window || typeof window.navigator.vibrate == "function"
|
|
381
387
|
},
|
|
382
388
|
userAgent: navigator.userAgent
|
|
383
|
-
},
|
|
389
|
+
}, W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
384
390
|
__proto__: null,
|
|
385
|
-
device:
|
|
391
|
+
device: v
|
|
386
392
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
387
|
-
function
|
|
393
|
+
function T() {
|
|
388
394
|
try {
|
|
389
395
|
const o = document.createElement("label");
|
|
390
396
|
o.ariaHidden = "true", o.style.display = "none";
|
|
@@ -393,12 +399,12 @@ function z() {
|
|
|
393
399
|
} catch {
|
|
394
400
|
}
|
|
395
401
|
}
|
|
396
|
-
function
|
|
397
|
-
|
|
402
|
+
function x(o) {
|
|
403
|
+
v.supports.haptics ? navigator.vibrate(o || 50) : v.is.iPhone && T();
|
|
398
404
|
}
|
|
399
|
-
const
|
|
405
|
+
const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
400
406
|
__proto__: null,
|
|
401
|
-
haptic:
|
|
407
|
+
haptic: x
|
|
402
408
|
}, Symbol.toStringTag, { value: "Module" })), w = (() => {
|
|
403
409
|
let o = {}, t;
|
|
404
410
|
try {
|
|
@@ -448,7 +454,7 @@ const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
448
454
|
}
|
|
449
455
|
}
|
|
450
456
|
};
|
|
451
|
-
})(), y = w.settings,
|
|
457
|
+
})(), y = w.settings, V = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
452
458
|
__proto__: null,
|
|
453
459
|
settings: y,
|
|
454
460
|
storage: w
|
|
@@ -533,7 +539,7 @@ class R extends HTMLElement {
|
|
|
533
539
|
this.inputEl = this.shadowRoot.querySelector("input"), this.switchEl = this.shadowRoot.querySelector(".switch"), this.updateFromAttribute(), this.switchEl.addEventListener("click", () => this.toggle());
|
|
534
540
|
}
|
|
535
541
|
toggle() {
|
|
536
|
-
this.selected = !this.selected,
|
|
542
|
+
this.selected = !this.selected, x();
|
|
537
543
|
}
|
|
538
544
|
updateFromAttribute() {
|
|
539
545
|
const t = this.hasAttribute("selected");
|
|
@@ -601,8 +607,8 @@ class $ extends HTMLElement {
|
|
|
601
607
|
</style>
|
|
602
608
|
<slot></slot>
|
|
603
609
|
`, this.addEventListener("pointerdown", (t) => {
|
|
604
|
-
const i = document.createElement("span"), e = t.currentTarget,
|
|
605
|
-
i.classList.add("ripple"), i.style.left = t.clientX - e.getBoundingClientRect().left -
|
|
610
|
+
const i = document.createElement("span"), e = t.currentTarget, n = Math.max(e.offsetWidth, e.offsetHeight);
|
|
611
|
+
i.classList.add("ripple"), i.style.left = t.clientX - e.getBoundingClientRect().left - n / 2 + "px", i.style.top = t.clientY - e.getBoundingClientRect().top - n / 2 + "px", i.style.width = n + "px", i.style.height = n + "px", this.shadowRoot.appendChild(i), setTimeout(() => {
|
|
606
612
|
i.remove();
|
|
607
613
|
}, 600);
|
|
608
614
|
});
|
|
@@ -612,17 +618,17 @@ customElements.define("eui-chip", $);
|
|
|
612
618
|
const b = "", k = (() => {
|
|
613
619
|
const o = [];
|
|
614
620
|
function t(s, d) {
|
|
615
|
-
const h = [], u = s.replace(/:([^/]+)/g, (
|
|
621
|
+
const h = [], u = s.replace(/:([^/]+)/g, (m, f) => (h.push(f), "([^/]+)")).replace(/\//g, "\\/"), p = new RegExp(`^${b}${u}$`);
|
|
616
622
|
o.push({ regex: p, paramNames: h, renderFn: d });
|
|
617
623
|
}
|
|
618
624
|
function i(s) {
|
|
619
625
|
for (const { regex: d, paramNames: h, renderFn: u } of o) {
|
|
620
626
|
const p = s.match(d);
|
|
621
627
|
if (p) {
|
|
622
|
-
const
|
|
628
|
+
const m = {};
|
|
623
629
|
return h.forEach((f, A) => {
|
|
624
|
-
|
|
625
|
-
}), { renderFn: u, params:
|
|
630
|
+
m[f] = decodeURIComponent(p[A + 1]);
|
|
631
|
+
}), { renderFn: u, params: m };
|
|
626
632
|
}
|
|
627
633
|
}
|
|
628
634
|
return null;
|
|
@@ -633,21 +639,21 @@ const b = "", k = (() => {
|
|
|
633
639
|
if (h === window.location.pathname && s.includes("#")) {
|
|
634
640
|
d && history.pushState({}, "", s);
|
|
635
641
|
const p = "#" + s.split("#")[1];
|
|
636
|
-
|
|
642
|
+
n(p);
|
|
637
643
|
return;
|
|
638
644
|
}
|
|
639
645
|
const u = i(h);
|
|
640
646
|
if (u)
|
|
641
647
|
if (d && history.pushState({}, "", s), u.renderFn(u.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: s } })), s.includes("#")) {
|
|
642
648
|
const p = "#" + s.split("#")[1];
|
|
643
|
-
setTimeout(() =>
|
|
649
|
+
setTimeout(() => n(p), 100);
|
|
644
650
|
} else {
|
|
645
651
|
const p = document.getElementById("main");
|
|
646
652
|
p && p.scrollTo(0, 0);
|
|
647
653
|
}
|
|
648
|
-
else
|
|
654
|
+
else r ? (d && history.pushState({}, "", s), r()) : console.warn(`No route found for ${h}`);
|
|
649
655
|
}
|
|
650
|
-
function
|
|
656
|
+
function n(s) {
|
|
651
657
|
if (s)
|
|
652
658
|
try {
|
|
653
659
|
const d = document.querySelector(s);
|
|
@@ -656,9 +662,9 @@ const b = "", k = (() => {
|
|
|
656
662
|
console.warn("Invalid hash:", s);
|
|
657
663
|
}
|
|
658
664
|
}
|
|
659
|
-
let
|
|
665
|
+
let r = null;
|
|
660
666
|
function a(s) {
|
|
661
|
-
|
|
667
|
+
r = s;
|
|
662
668
|
}
|
|
663
669
|
function l() {
|
|
664
670
|
history.back();
|
|
@@ -676,14 +682,14 @@ const b = "", k = (() => {
|
|
|
676
682
|
const h = d.getAttribute("href");
|
|
677
683
|
if (!(!h || h.startsWith("http") && !h.startsWith(window.location.origin))) {
|
|
678
684
|
if (s.preventDefault(), h.startsWith("#")) {
|
|
679
|
-
history.pushState({}, "", h),
|
|
685
|
+
history.pushState({}, "", h), n(h);
|
|
680
686
|
return;
|
|
681
687
|
}
|
|
682
688
|
e(h);
|
|
683
689
|
}
|
|
684
690
|
}), { add: t, navigate: e, back: l, location: c, setNotFound: a };
|
|
685
691
|
})();
|
|
686
|
-
async function
|
|
692
|
+
async function Y(o) {
|
|
687
693
|
try {
|
|
688
694
|
const t = document.getElementById("main");
|
|
689
695
|
t.classList.add("fade-out"), await new Promise((e) => setTimeout(e, 200));
|
|
@@ -727,20 +733,20 @@ class H extends HTMLElement {
|
|
|
727
733
|
};
|
|
728
734
|
setupEventListeners() {
|
|
729
735
|
this.addEventListener("pointerdown", (t) => {
|
|
730
|
-
const i = document.createElement("span"), e = t.currentTarget,
|
|
731
|
-
i.classList.add("ripple"), i.style.width = `${
|
|
736
|
+
const i = document.createElement("span"), e = t.currentTarget, n = e.getBoundingClientRect(), r = Math.max(e.offsetWidth, e.offsetHeight), a = r / 2;
|
|
737
|
+
i.classList.add("ripple"), i.style.width = `${r}px`, i.style.height = `${r}px`, i.style.left = `${t.clientX - n.left - a}px`, i.style.top = `${t.clientY - n.top - a}px`, this.shadowRoot.appendChild(i), i.addEventListener("animationend", () => {
|
|
732
738
|
i.remove();
|
|
733
739
|
});
|
|
734
740
|
});
|
|
735
741
|
}
|
|
736
742
|
updateContent() {
|
|
737
|
-
const t = this.getAttribute("icon"), i = this.getAttribute("avatar-src"), e = this.getAttribute("avatar-name"),
|
|
738
|
-
if (
|
|
743
|
+
const t = this.getAttribute("icon"), i = this.getAttribute("avatar-src"), e = this.getAttribute("avatar-name"), n = this.getAttribute("label") || "", r = this.getAttribute("badge"), a = this.shadowRoot.querySelector(".badge");
|
|
744
|
+
if (r)
|
|
739
745
|
if (a)
|
|
740
|
-
a.textContent =
|
|
746
|
+
a.textContent = r;
|
|
741
747
|
else {
|
|
742
748
|
const s = document.createElement("span");
|
|
743
|
-
s.className = "badge", s.textContent =
|
|
749
|
+
s.className = "badge", s.textContent = r, this.shadowRoot.appendChild(s);
|
|
744
750
|
}
|
|
745
751
|
else a && a.remove();
|
|
746
752
|
const l = this.shadowRoot.querySelector("slot[name='icon']");
|
|
@@ -753,7 +759,7 @@ class H extends HTMLElement {
|
|
|
753
759
|
t && s ? s.getAttribute("name") !== t && s.setAttribute("name", t) : t ? l.innerHTML = `<eui-icon width="24" height="24" name="${t}"></eui-icon>` : l.innerHTML = "";
|
|
754
760
|
}
|
|
755
761
|
const c = this.shadowRoot.querySelector(".label");
|
|
756
|
-
c && (c.textContent =
|
|
762
|
+
c && (c.textContent = n);
|
|
757
763
|
}
|
|
758
764
|
render() {
|
|
759
765
|
this.shadowRoot.innerHTML = `
|
|
@@ -1075,8 +1081,8 @@ class I extends HTMLElement {
|
|
|
1075
1081
|
this.hd = this.shadowRoot.querySelector(".header"), this.hasAttribute("type") && this.hd.classList.add(this.getAttribute("type"));
|
|
1076
1082
|
}
|
|
1077
1083
|
attributeChangedCallback(t, i, e) {
|
|
1078
|
-
const
|
|
1079
|
-
t === "title" && (
|
|
1084
|
+
const n = this.shadowRoot.querySelector("h1"), r = this.shadowRoot.querySelector("p"), a = this.shadowRoot.querySelector(".img");
|
|
1085
|
+
t === "title" && (n.textContent = e), t === "subtitle" && (r.textContent = e), t === "img" && (a.style.backgroundImage = e ? `url(${e})` : "");
|
|
1080
1086
|
}
|
|
1081
1087
|
}
|
|
1082
1088
|
customElements.define("eui-header", I);
|
|
@@ -1174,7 +1180,7 @@ class F extends HTMLElement {
|
|
|
1174
1180
|
this.inputEl = this.shadowRoot.querySelector("input"), this.checkEl = this.shadowRoot.querySelector(".checkbox"), this.updateFromAttribute(), this.checkEl.addEventListener("click", () => this.toggle());
|
|
1175
1181
|
}
|
|
1176
1182
|
toggle() {
|
|
1177
|
-
this.selected = !this.selected,
|
|
1183
|
+
this.selected = !this.selected, x();
|
|
1178
1184
|
const t = this.selected, i = this.dataset.setting;
|
|
1179
1185
|
i && y.set(i, t);
|
|
1180
1186
|
}
|
|
@@ -1311,10 +1317,10 @@ class q extends HTMLElement {
|
|
|
1311
1317
|
</${i}>
|
|
1312
1318
|
`;
|
|
1313
1319
|
const e = this.shadowRoot.querySelector(i);
|
|
1314
|
-
t && e.setAttribute("href", t), this.hasAttribute("type") && e.classList.add(this.getAttribute("type")), this.hasAttribute("icon") && e.classList.add("icon"), this.hasAttribute("width") && (e.style.width = this.getAttribute("width") + "px"), this.hasAttribute("height") && (e.style.height = this.getAttribute("height") + "px"), this.hasAttribute("border-radius") && (e.style.borderRadius = this.getAttribute("border-radius") + "px"), e.addEventListener("pointerdown", (
|
|
1315
|
-
const
|
|
1316
|
-
|
|
1317
|
-
|
|
1320
|
+
t && e.setAttribute("href", t), this.hasAttribute("type") && e.classList.add(this.getAttribute("type")), this.hasAttribute("icon") && e.classList.add("icon"), this.hasAttribute("width") && (e.style.width = this.getAttribute("width") + "px"), this.hasAttribute("height") && (e.style.height = this.getAttribute("height") + "px"), this.hasAttribute("border-radius") && (e.style.borderRadius = this.getAttribute("border-radius") + "px"), e.addEventListener("pointerdown", (n) => {
|
|
1321
|
+
const r = document.createElement("span"), a = n.currentTarget, l = a.getBoundingClientRect(), c = Math.max(a.offsetWidth, a.offsetHeight), s = c / 2;
|
|
1322
|
+
r.classList.add("ripple"), r.style.width = `${c}px`, r.style.height = `${c}px`, r.style.left = `${n.clientX - l.left - s}px`, r.style.top = `${n.clientY - l.top - s}px`, e.appendChild(r), r.addEventListener("animationend", () => {
|
|
1323
|
+
r.remove();
|
|
1318
1324
|
});
|
|
1319
1325
|
});
|
|
1320
1326
|
}
|
|
@@ -1394,12 +1400,12 @@ class j extends HTMLElement {
|
|
|
1394
1400
|
}
|
|
1395
1401
|
customElements.define("eui-heading", j);
|
|
1396
1402
|
function N(o) {
|
|
1397
|
-
const e = Date.now() - o,
|
|
1398
|
-
return s > 0 ? `${s}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : a > 0 ? `${a}h` :
|
|
1403
|
+
const e = Date.now() - o, n = Math.floor(e / 1e3), r = Math.floor(n / 60), a = Math.floor(r / 60), l = Math.floor(a / 24), c = Math.floor(l / 30), s = Math.floor(c / 12);
|
|
1404
|
+
return s > 0 ? `${s}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : a > 0 ? `${a}h` : r > 0 ? `${r}m` : `${n}s`;
|
|
1399
1405
|
}
|
|
1400
1406
|
function B(o) {
|
|
1401
|
-
const e = Date.now() - o,
|
|
1402
|
-
return s > 0 ? `${s} year${s > 1 ? "s" : ""} ago` : c > 0 ? `${c} month${c > 1 ? "s" : ""} ago` : l > 0 ? `${l} day${l > 1 ? "s" : ""} ago` : a > 0 ? `${a} hour${a > 1 ? "s" : ""} ago` :
|
|
1407
|
+
const e = Date.now() - o, n = Math.floor(e / 1e3), r = Math.floor(n / 60), a = Math.floor(r / 60), l = Math.floor(a / 24), c = Math.floor(l / 30), s = Math.floor(c / 12);
|
|
1408
|
+
return s > 0 ? `${s} year${s > 1 ? "s" : ""} ago` : c > 0 ? `${c} month${c > 1 ? "s" : ""} ago` : l > 0 ? `${l} day${l > 1 ? "s" : ""} ago` : a > 0 ? `${a} hour${a > 1 ? "s" : ""} ago` : r > 0 ? `${r} minute${r > 1 ? "s" : ""} ago` : `${n} second${n > 1 ? "s" : ""} ago`;
|
|
1403
1409
|
}
|
|
1404
1410
|
function O(o) {
|
|
1405
1411
|
return o.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'").replace(/`/g, "`").replace(/'/g, "'");
|
|
@@ -1408,7 +1414,7 @@ function E(o) {
|
|
|
1408
1414
|
const t = document.createElement("input");
|
|
1409
1415
|
t.value = o, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
|
|
1410
1416
|
}
|
|
1411
|
-
const
|
|
1417
|
+
const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1412
1418
|
__proto__: null,
|
|
1413
1419
|
copystr: E,
|
|
1414
1420
|
joinedAgo: B,
|
|
@@ -1466,8 +1472,8 @@ class P extends HTMLElement {
|
|
|
1466
1472
|
let t = this.textContent || "";
|
|
1467
1473
|
t = t.replace(/^\s*\n/, "").replace(/\n\s*$/, ""), t = t.replace(/[ \t]+$/gm, "");
|
|
1468
1474
|
const i = t.split(`
|
|
1469
|
-
`), e = i.filter((
|
|
1470
|
-
return t = i.map((
|
|
1475
|
+
`), e = i.filter((r) => r.trim()).map((r) => r.match(/^\s*/)[0].length), n = e.length ? Math.min(...e) : 0;
|
|
1476
|
+
return t = i.map((r) => r.slice(n)).join(`
|
|
1471
1477
|
`), t;
|
|
1472
1478
|
}
|
|
1473
1479
|
_onCopy() {
|
|
@@ -1612,8 +1618,8 @@ class D extends HTMLElement {
|
|
|
1612
1618
|
this.removeEventListener("mousedown", this._handleMouseDown), this.hasAttribute("ripple") && this.addEventListener("mousedown", this._handleMouseDown);
|
|
1613
1619
|
}
|
|
1614
1620
|
_addRipple(t) {
|
|
1615
|
-
const i = this.getBoundingClientRect(), e = document.createElement("span"),
|
|
1616
|
-
e.style.width = e.style.height = `${
|
|
1621
|
+
const i = this.getBoundingClientRect(), e = document.createElement("span"), n = Math.max(i.width, i.height), r = n / 2;
|
|
1622
|
+
e.style.width = e.style.height = `${n}px`, e.style.left = `${t.clientX - i.left - r}px`, e.style.top = `${t.clientY - i.top - r}px`, e.classList.add("ripple"), this.shadowRoot.querySelector(".surface").appendChild(e), e.addEventListener("animationend", () => {
|
|
1617
1623
|
e.remove();
|
|
1618
1624
|
});
|
|
1619
1625
|
}
|
|
@@ -1685,10 +1691,11 @@ class D extends HTMLElement {
|
|
|
1685
1691
|
customElements.define("eui-surface", D);
|
|
1686
1692
|
typeof window < "u" && console.log("ErisUI loaded successfully");
|
|
1687
1693
|
export {
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1694
|
+
W as device,
|
|
1695
|
+
J as haptics,
|
|
1696
|
+
X as icons,
|
|
1697
|
+
Y as loadPage,
|
|
1691
1698
|
k as router,
|
|
1692
|
-
|
|
1693
|
-
|
|
1699
|
+
V as storage,
|
|
1700
|
+
K as utils
|
|
1694
1701
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@3r1s_s/erisui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "an awesome ui library for web apps",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
"scripts": {
|
|
21
21
|
"dev": "vite",
|
|
22
22
|
"build": "vite build",
|
|
23
|
-
"preview": "vite preview"
|
|
23
|
+
"preview": "vite preview",
|
|
24
|
+
"prepublishOnly": "npm run build"
|
|
24
25
|
},
|
|
25
26
|
"author": "Eris S",
|
|
26
27
|
"license": "Apache-2.0",
|