@3r1s_s/erisui 1.0.9 → 1.0.11
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.css +1 -1
- package/dist/erisui.js +43 -23
- package/dist/erisui.mjs +215 -176
- package/package.json +2 -1
package/dist/erisui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{-webkit-touch-callout:none;-webkit-user-callout:none;-webkit-user-drag:none;-webkit-user-modify:none;-webkit-highlight:none;-webkit-tap-highlight-color:transparent}:root{--app-text: #F2F3F6;--app-link: #549fff;--app-100: #131318;--app-200: #202027;--app-300: #2c2c34;--app-400: #35353b;--app-500: #40404a;--app-600: #4b4b55;--app-700: #575761;--app-800: #62626e;--app-900: #6e6e7b;--banner-color: #182233;--nav-width: 75px;--nav-expanded-width: 250px;--titlebar-height: 65px;--content-width: 100%;--app-accent: #6366f1;--app-accent-50: #7376ff;--app-accent-100: #6366f1;--app-accent-200: #4b4ecf;--app-blue: #3679f0;--app-red: #ee4d3c;--app-green: #4dca9a;--app-yellow: #fffc5c;--app-pink: #ff5bff;--app-purple: #895bff;--app-orange: #ff9b5b;--app-white: #fff;--app-dark-blue: #1e4d9e;--app-dark-red: #c33f33;--app-dark-green: #2c7e4b;--app-dark-yellow: #c7b200;--app-dark-pink: #c95bff;--app-dark-purple: #5f5bff;--app-dark-orange: #c86f33;--transition-function: cubic-bezier(.4, 0, .2, 1);--specular-highlight: -.5px -.5px 1px #ffffff52 inset, 1px 1px .5px #ffffff52 inset, 0 4px 24px #0000003d}:root{--card-blue: #A8C7FA;--card-cyan: #80CFFF;--card-red: #ffadb5;--card-pink: #FFADE4;--card-green: #6CD58B;--card-yellow: #fff7c1;--card-purple: #D9BAFD;--card-orange: #FFB683}.light{--app-text: #1F1F1F;--app-link: #1868f2;--app-100: #fefefe;--app-200: #F0F4FA;--app-300: #dde3f0;--app-400: #C6CFD7;--app-500: #AEB9C3;--app-600: #99A3AE;--app-700: #7F8C98;--app-800: #66717C;--app-900: #4B5563;--banner-color: #d3e3fd}body{margin:0;padding:0;background-color:var(--app-100);color:var(--app-text);overflow:hidden}a{color:var(--app-link);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:0}button{color:inherit;font-family:inherit}#app{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--app-200)}.app-wrapper{margin-left:var(--nav-width);display:flex;flex-direction:column;padding:var(--titlebar-height) .5rem .5rem 0rem;box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--app-200);transition:margin-left .2s cubic-bezier(.2,0,0,1)}eui-app-nav.expanded+.app-wrapper{margin-left:var(--nav-expanded-width)}#main{width:100%;height:100%;padding:1.5rem;box-sizing:border-box;gap:1.5rem;display:flex;overflow-y:auto;scrollbar-color:var(--app-300) var(--app-100)}.main-wrapper{width:100%;height:100%;border-radius:2rem;background-color:var(--app-100);overflow:hidden}.content{width:var(--content-width);margin:0 auto}.content-header h1{font-size:2.375rem}.content-sidebar{display:flex;flex-direction:column;gap:.5rem}.content-sidebar-inner{width:300px;margin:0 auto;border-radius:12px;background-color:var(--app-200);height:100%}@keyframes ripple{to{transform:scale(4);opacity:0;filter:blur(10px)}}#main{opacity:1;transform:translateY(0);transition:transform .3s cubic-bezier(.2,0,0,1),opacity .3s cubic-bezier(.2,0,0,1)}#main.fade-out{opacity:0;transform:translateY(1rem);transition:none}
|
|
1
|
+
:root{-webkit-touch-callout:none;-webkit-user-callout:none;-webkit-user-drag:none;-webkit-user-modify:none;-webkit-highlight:none;-webkit-tap-highlight-color:transparent}:root{--app-text: #F2F3F6;--app-link: #549fff;--app-100: #131318;--app-200: #202027;--app-300: #2c2c34;--app-400: #35353b;--app-500: #40404a;--app-600: #4b4b55;--app-700: #575761;--app-800: #62626e;--app-900: #6e6e7b;--banner-color: #182233;--nav-width: 75px;--nav-expanded-width: 250px;--titlebar-height: 65px;--content-width: 100%;--app-accent: #6366f1;--app-accent-50: #7376ff;--app-accent-100: #6366f1;--app-accent-200: #4b4ecf;--app-blue: #3679f0;--app-red: #ee4d3c;--app-green: #4dca9a;--app-yellow: #fffc5c;--app-pink: #ff5bff;--app-purple: #895bff;--app-orange: #ff9b5b;--app-white: #fff;--app-dark-blue: #1e4d9e;--app-dark-red: #c33f33;--app-dark-green: #2c7e4b;--app-dark-yellow: #c7b200;--app-dark-pink: #c95bff;--app-dark-purple: #5f5bff;--app-dark-orange: #c86f33;--transition-function: cubic-bezier(.4, 0, .2, 1);--specular-highlight: -.5px -.5px 1px #ffffff52 inset, 1px 1px .5px #ffffff52 inset, 0 4px 24px #0000003d}:root{--card-blue: #A8C7FA;--card-cyan: #80CFFF;--card-red: #ffadb5;--card-pink: #FFADE4;--card-green: #6CD58B;--card-yellow: #fff7c1;--card-purple: #D9BAFD;--card-orange: #FFB683}.light{--app-text: #1F1F1F;--app-link: #1868f2;--app-100: #fefefe;--app-200: #F0F4FA;--app-300: #dde3f0;--app-400: #C6CFD7;--app-500: #AEB9C3;--app-600: #99A3AE;--app-700: #7F8C98;--app-800: #66717C;--app-900: #4B5563;--banner-color: #d3e3fd}body{margin:0;padding:0;background-color:var(--app-100);color:var(--app-text);overflow:hidden}a{color:var(--app-link);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:0}button{color:inherit;font-family:inherit}#app{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--app-200)}.app-wrapper{margin-left:var(--nav-width);display:flex;flex-direction:column;padding:var(--titlebar-height) .5rem .5rem 0rem;box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--app-200);transition:margin-left .2s cubic-bezier(.2,0,0,1)}eui-app-nav.expanded+.app-wrapper{margin-left:var(--nav-expanded-width)}#main{width:100%;height:100%;padding:1.5rem;box-sizing:border-box;gap:1.5rem;display:flex;overflow-y:auto;scrollbar-color:var(--app-300) var(--app-100)}.main-wrapper{width:100%;height:100%;border-radius:2rem;background-color:var(--app-100);overflow:hidden}.content{width:var(--content-width);margin:0 auto}.content-header h1{font-size:2.375rem}.content-sidebar{display:flex;flex-direction:column;gap:.5rem}.content-sidebar-inner{width:300px;margin:0 auto;border-radius:12px;background-color:var(--app-200);height:100%}@keyframes ripple{to{transform:scale(4);opacity:0;filter:blur(10px)}}#main{opacity:1;transform:translateY(0);transition:transform .3s cubic-bezier(.2,0,0,1),opacity .3s cubic-bezier(.2,0,0,1)}#main.fade-out{opacity:0;transform:translateY(1rem);transition:none}@media(max-width:768px){.app-wrapper{margin-left:0;padding:0;padding-top:var(--titlebar-height)}.main-wrapper{border-radius:2rem 2rem 0 0}eui-app-nav.expanded+.app-wrapper{margin-left:0}eui-app-nav{width:0;overflow:hidden}eui-app-nav.expanded{width:var(--nav-expanded-width);border-radius:0 2rem 2rem 0}}
|
package/dist/erisui.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(h,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(h=typeof globalThis<"u"?globalThis:h||self,g(h.eui={}))})(this,(function(h){"use strict";var G=Object.defineProperty;var Q=(h,g,u)=>g in h?G(h,g,{enumerable:!0,configurable:!0,writable:!0,value:u}):h[g]=u;var C=(h,g,u)=>Q(h,typeof g!="symbol"?g+"":g,u);class g 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
|
|
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 s=this.getAttribute("name").trim().split(/\s+/);let n="";s.length===1?n=s[0][0]||"":n=(s[0][0]||"")+(s[s.length-1][0]||""),this.initials.textContent=n.toUpperCase()}}}customElements.define("eui-avatar",g);const u=(()=>{let o={};return{register(t,i){o[t]=i},get(t){return o[t]||""}}})();u.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>'),u.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>'),u.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>'),u.register("settings",'<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.644169 15.2044C0.751639 15.4175 0.866389 15.627 0.988219 15.8323C1.34503 16.445 1.76284 17.0223 2.23048 17.545C2.3967 17.7307 2.65856 17.7968 2.89375 17.7126L5.25826 16.8621C5.96645 16.608 6.74841 17.07 6.87902 17.8018L7.32018 20.2764C7.36418 20.5227 7.55119 20.7167 7.79454 20.7688C8.86201 20.9976 9.95753 21.057 11.0418 20.9452C11.427 20.9061 11.8095 20.8457 12.1863 20.7643C12.375 20.7232 12.5303 20.5969 12.6121 20.4275C12.6441 20.37 12.6671 20.3068 12.6794 20.2397L13.132 17.7739C13.1978 17.4162 13.4191 17.1252 13.7102 16.9498C13.7478 16.9275 13.7867 16.9072 13.8264 16.8889C14.1041 16.7654 14.426 16.7408 14.7301 16.8496L17.0889 17.6938C17.2068 17.7362 17.3318 17.7406 17.4482 17.7107C17.5805 17.6872 17.7044 17.6208 17.7983 17.5172C18.2857 16.9783 18.7189 16.3833 19.0875 15.7497C19.4503 15.1137 19.748 14.4403 19.9703 13.7471C20.0128 13.6142 20.0083 13.4742 19.9629 13.3481C19.9307 13.2315 19.8646 13.1245 19.7685 13.043L17.8596 11.4179C17.6114 11.2067 17.4714 10.912 17.4409 10.6065C17.4371 10.563 17.4355 10.5194 17.4361 10.4758C17.444 10.1379 17.5847 9.80337 17.8591 9.56905L19.7638 7.94348C19.8146 7.90007 19.857 7.84958 19.8904 7.7944C19.9978 7.63842 20.0299 7.43844 19.9706 7.25291C19.8534 6.88733 19.7151 6.52704 19.5572 6.17466C19.1114 5.17572 18.5115 4.2528 17.7787 3.43934C17.612 3.25429 17.3509 3.18886 17.1161 3.27382L14.7569 4.12827C14.0592 4.38082 13.2679 3.93321 13.1344 3.19155L12.6871 0.714256C12.6423 0.468053 12.4542 0.273849 12.2106 0.22246C11.5182 0.0764882 10.803 0.00250031 10.088 0.000608251C9.88769 -0.0015584 9.68739 0.002064 9.48735 0.0114648C8.92415 0.0369819 8.36389 0.107332 7.81778 0.222459C7.78135 0.230146 7.74615 0.241028 7.71249 0.2548C7.5098 0.328781 7.35888 0.505679 7.31996 0.723547L6.8788 3.19817C6.81394 3.56157 6.58834 3.85866 6.29097 4.03446C5.98991 4.2061 5.61923 4.25412 5.27153 4.12827L2.91237 3.27382C2.70694 3.1995 2.48138 3.24016 2.31657 3.37545C2.2857 3.39886 2.25676 3.42543 2.23026 3.45505C1.81793 3.91588 1.44433 4.4192 1.11714 4.95183C1.05788 5.04799 1.00019 5.14513 0.944072 5.24319C0.878302 5.35619 0.814661 5.4704 0.753186 5.58577C0.464267 6.12611 0.222113 6.69081 0.0338354 7.26739C0.0213426 7.30567 0.0127871 7.34455 0.00802709 7.38352C-0.0257478 7.59364 0.0518458 7.809 0.218337 7.94974L2.13633 9.56992C2.41146 9.80242 2.55518 10.1364 2.56469 10.4743C2.56917 10.8294 2.42529 11.1857 2.13611 11.4301L0.218115 13.0503C0.0484589 13.1937 -0.0289685 13.4145 0.00982709 13.6284C0.0147983 13.6634 0.0228404 13.6982 0.0340542 13.7326C0.198098 14.235 0.403035 14.7283 0.644169 15.2044ZM10 14.5C12.2091 14.5 14 12.7091 14 10.5C14 8.29086 12.2091 6.5 10 6.5C7.79086 6.5 6 8.29086 6 10.5C6 12.7091 7.79086 14.5 10 14.5Z" fill="currentColor"></path></svg>'),u.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>'),u.register("copy",'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 11C2 11.7956 2.31607 12.5587 2.87868 13.1213C3.44129 13.6839 4.20435 14 5 14H11C11.7956 14 12.5587 13.6839 13.1213 13.1213C13.6839 12.5587 14 11.7956 14 11V8H11.75C10.7554 8 9.80161 7.60491 9.09835 6.90165C8.39509 6.19839 8 5.24456 8 4.25V2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V11Z" fill="currentColor"/><path d="M13.7975 6.49965C13.6881 6.25457 13.5357 6.03105 13.3475 5.83965L10.16 2.65965C9.96921 2.4688 9.74565 2.31384 9.5 2.20215V4.24965C9.5 4.54512 9.5582 4.8377 9.67127 5.11069C9.78434 5.38367 9.95008 5.63171 10.159 5.84064C10.3679 6.04957 10.616 6.2153 10.889 6.32838C11.1619 6.44145 11.4545 6.49965 11.75 6.49965H13.7975Z" fill="currentColor"/></svg>'),u.register("arrow",'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"></path></svg>'),u.register("back",'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="transform: rotate(180deg)"><path d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"></path></svg>');class z 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=u.get(t);if(!i){this.shadowRoot.innerHTML='<span style="color:red;">?</span>';return}const e=document.createElement("template");e.innerHTML=i.trim();const s=e.content.cloneNode(!0),n=s.firstElementChild;if(n&&n.style){const l=this.getAttribute("width"),c=this.getAttribute("height");l&&n.setAttribute("width",l),c&&n.setAttribute("height",c),n.style.display="block"}this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(s)}}customElements.define("eui-icon",z);class M 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",M);class T extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
147
147
|
<style>
|
|
148
148
|
.loader {
|
|
149
149
|
width: 24px;
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
<span class="loader animate">
|
|
189
189
|
<svg viewBox="0 0 16 16"><circle class="loader-icon" cx="8px" cy="8px" r="7px"></circle></svg>
|
|
190
190
|
</span>
|
|
191
|
-
`}}customElements.define("eui-loader",T);class
|
|
191
|
+
`}}customElements.define("eui-loader",T);class $ extends HTMLElement{static get observedAttributes(){return["value","intermediate","id"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
192
192
|
<style>
|
|
193
193
|
.progressbar {
|
|
194
194
|
width: 100%;
|
|
@@ -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"
|
|
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",$);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 H(){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&&H()}const _=Object.freeze(Object.defineProperty({__proto__:null,haptic:x},Symbol.toStringTag,{value:"Module"})),A=(()=>{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)))}}}})(),E=A.settings,I=Object.freeze(Object.defineProperty({__proto__:null,settings:E,storage:A},Symbol.toStringTag,{value:"Module"}));class F 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,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",
|
|
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",F);class j 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,
|
|
349
|
+
`,this.addEventListener("pointerdown",t=>{const i=document.createElement("span"),e=t.currentTarget,s=Math.max(e.offsetWidth,e.offsetHeight);i.classList.add("ripple"),i.style.left=t.clientX-e.getBoundingClientRect().left-s/2+"px",i.style.top=t.clientY-e.getBoundingClientRect().top-s/2+"px",i.style.width=s+"px",i.style.height=s+"px",this.shadowRoot.appendChild(i),setTimeout(()=>{i.remove()},600)})}}customElements.define("eui-chip",j);const f="",w=(()=>{const o=[];function t(r,a){const p=[],m=r.replace(/:([^/]+)/g,(y,k)=>(p.push(k),"([^/]+)")).replace(/\//g,"\\/"),b=new RegExp(`^${f}${m}$`);o.push({regex:b,paramNames:p,renderFn:a})}function i(r){for(const{regex:a,paramNames:p,renderFn:m}of o){const b=r.match(a);if(b){const y={};return p.forEach((k,K)=>{y[k]=decodeURIComponent(b[K+1])}),{renderFn:m,params:y}}}return null}function e(r,a=!0){r.startsWith(f)||(r=f+(r.startsWith("/")?"":"/")+r);const p=r.split(/[?#]/)[0];if(p===window.location.pathname&&r.includes("#")){a&&history.pushState({},"",r);const b="#"+r.split("#")[1];s(b);return}const m=i(p);if(m)if(a&&history.pushState({},"",r),m.renderFn(m.params),window.dispatchEvent(new CustomEvent("route-changed",{detail:{path:r}})),r.includes("#")){const b="#"+r.split("#")[1];setTimeout(()=>s(b),100)}else{const b=document.getElementById("main");b&&b.scrollTo(0,0)}else n?(a&&history.pushState({},"",r),n()):console.warn(`No route found for ${p}`)}function s(r){if(r)try{const a=document.querySelector(r);a&&a.scrollIntoView({behavior:"smooth"})}catch{console.warn("Invalid hash:",r)}}let n=null;function l(r){n=r}function c(){history.back()}function d(){return window.location.pathname.replace(f,"")||"/"}return window.addEventListener("popstate",()=>{const r=window.location.pathname+window.location.search+window.location.hash;e(r,!1)}),window.addEventListener("click",r=>{if(r.button!==0||r.metaKey||r.altKey||r.ctrlKey||r.shiftKey)return;const a=r.target.closest("a");if(!a||a.hasAttribute("download")||a.getAttribute("target")==="_blank")return;const p=a.getAttribute("href");if(!(!p||p.startsWith("http")&&!p.startsWith(window.location.origin))){if(r.preventDefault(),p.startsWith("#")){history.pushState({},"",p),s(p);return}e(p)}}),{add:t,navigate:e,back:c,location:d,setNotFound:l}})();async function q(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 B extends HTMLElement{constructor(){super();C(this,"handleClick",()=>{const i=this.getAttribute("path");i&&w.navigate(i)});this.attachShadow({mode:"open"})}static get observedAttributes(){return["path","icon","label","badge","active","avatar-src","avatar-name"]}connectedCallback(){this.hasRendered||(this.render(),this.setupEventListeners(),this.hasRendered=!0),this.updateContent(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(i,e,s){if(e!==s&&this.hasRendered){if(i==="active")return;this.updateContent()}}setupEventListeners(){this.addEventListener("pointerdown",i=>{const e=document.createElement("span"),s=i.currentTarget,n=s.getBoundingClientRect(),l=Math.max(s.offsetWidth,s.offsetHeight),c=l/2;e.classList.add("ripple"),e.style.width=`${l}px`,e.style.height=`${l}px`,e.style.left=`${i.clientX-n.left-c}px`,e.style.top=`${i.clientY-n.top-c}px`,this.shadowRoot.appendChild(e),e.addEventListener("animationend",()=>{e.remove()})})}updateContent(){const i=this.getAttribute("icon"),e=this.getAttribute("avatar-src"),s=this.getAttribute("avatar-name"),n=this.getAttribute("label")||"",l=this.getAttribute("badge"),c=this.shadowRoot.querySelector(".badge");if(l)if(c)c.textContent=l;else{const a=document.createElement("span");a.className="badge",a.textContent=l,this.shadowRoot.appendChild(a)}else c&&c.remove();const d=this.shadowRoot.querySelector("slot[name='icon']");if(d)if(e||s){let a='<eui-avatar size="24"';s&&(a+=` name="${s}"`),a+=">",e&&(a+=`<img src="${e}" alt="${s||"Avatar"}" />`),a+="</eui-avatar>",d.innerHTML=a}else{const a=d.querySelector("eui-icon");i&&a?a.getAttribute("name")!==i&&a.setAttribute("name",i):i?d.innerHTML=`<eui-icon width="24" height="24" name="${i}"></eui-icon>`:d.innerHTML=""}const r=this.shadowRoot.querySelector(".label");r&&(r.textContent=n)}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",
|
|
454
|
+
`}}customElements.define("eui-nav-item",B);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;
|
|
@@ -471,6 +471,7 @@
|
|
|
471
471
|
|
|
472
472
|
.app-nav-container {
|
|
473
473
|
width: 100%;
|
|
474
|
+
min-width: var(--nav-width, 75px);
|
|
474
475
|
height: 100%;
|
|
475
476
|
box-sizing: border-box;
|
|
476
477
|
background-color: var(--app-200);
|
|
@@ -550,10 +551,10 @@
|
|
|
550
551
|
<div class="app-nav-container">
|
|
551
552
|
<a href="#content" id="skip_navigation_link">Skip To Content</a>
|
|
552
553
|
<div class="nav-items">
|
|
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
|
|
554
|
+
${this.navItems.map(t=>{var s,n;if(t.type==="divider")return'<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';const i=((s=t.avatar)==null?void 0:s.src)||"",e=((n=t.avatar)==null?void 0:n.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
555
|
</div>
|
|
555
556
|
</div>
|
|
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
|
|
557
|
+
`}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 O extends HTMLElement{static get observedAttributes(){return["type","title","subtitle","img"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
557
558
|
<style>
|
|
558
559
|
:host {
|
|
559
560
|
border-radius: 24px;
|
|
@@ -622,7 +623,7 @@
|
|
|
622
623
|
<p></p>
|
|
623
624
|
</div>
|
|
624
625
|
</div>
|
|
625
|
-
`}connectedCallback(){this.hd=this.shadowRoot.querySelector(".header"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}attributeChangedCallback(t,i,e){const
|
|
626
|
+
`}connectedCallback(){this.hd=this.shadowRoot.querySelector(".header"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}attributeChangedCallback(t,i,e){const s=this.shadowRoot.querySelector("h1"),n=this.shadowRoot.querySelector("p"),l=this.shadowRoot.querySelector(".img");t==="title"&&(s.textContent=e),t==="subtitle"&&(n.textContent=e),t==="img"&&(l.style.backgroundImage=e?`url(${e})`:"")}}customElements.define("eui-header",O);class P extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
|
|
626
627
|
<style>
|
|
627
628
|
:host {
|
|
628
629
|
display: block;
|
|
@@ -705,7 +706,7 @@
|
|
|
705
706
|
<rect class="mark long"></rect>
|
|
706
707
|
</svg>
|
|
707
708
|
</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,x();const t=this.selected,i=this.dataset.setting;i&&
|
|
709
|
+
`}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&&E.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",P);class L extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){const t=this.getAttribute("href"),i=t?"a":"button";this.shadowRoot.innerHTML=`
|
|
709
710
|
<style>
|
|
710
711
|
button, a {
|
|
711
712
|
display: flex;
|
|
@@ -811,7 +812,7 @@
|
|
|
811
812
|
<${i}>
|
|
812
813
|
<slot></slot>
|
|
813
814
|
</${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",
|
|
815
|
+
`;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",s=>{const n=document.createElement("span"),l=s.currentTarget,c=l.getBoundingClientRect(),d=Math.max(l.offsetWidth,l.offsetHeight),r=d/2;n.classList.add("ripple"),n.style.width=`${d}px`,n.style.height=`${d}px`,n.style.left=`${s.clientX-c.left-r}px`,n.style.top=`${s.clientY-c.top-r}px`,e.appendChild(n),n.addEventListener("animationend",()=>{n.remove()})})}}C(L,"observedAttributes",["type","width","height","border-radius","icon","link","href"]),customElements.define("eui-button",L);class V 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
816
|
<style>
|
|
816
817
|
:host {
|
|
817
818
|
display: block;
|
|
@@ -869,7 +870,7 @@
|
|
|
869
870
|
<span class="anchor-hash">#</span>
|
|
870
871
|
</a>
|
|
871
872
|
`:""}
|
|
872
|
-
`}}customElements.define("eui-heading",
|
|
873
|
+
`}}customElements.define("eui-heading",V);function U(o){const e=Date.now()-o,s=Math.floor(e/1e3),n=Math.floor(s/60),l=Math.floor(n/60),c=Math.floor(l/24),d=Math.floor(c/30),r=Math.floor(d/12);return r>0?`${r}y`:d>0?`${d}mo`:c>0?`${c}d`:l>0?`${l}h`:n>0?`${n}m`:`${s}s`}function Z(o){const e=Date.now()-o,s=Math.floor(e/1e3),n=Math.floor(s/60),l=Math.floor(n/60),c=Math.floor(l/24),d=Math.floor(c/30),r=Math.floor(d/12);return r>0?`${r} year${r>1?"s":""} ago`:d>0?`${d} month${d>1?"s":""} ago`:c>0?`${c} day${c>1?"s":""} ago`:l>0?`${l} hour${l>1?"s":""} ago`:n>0?`${n} minute${n>1?"s":""} ago`:`${s} second${s>1?"s":""} ago`}function D(o){return o.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/`/g,"`").replace(/'/g,"'")}function S(o){const t=document.createElement("input");t.value=o,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}const X=Object.freeze(Object.defineProperty({__proto__:null,copystr:S,joinedAgo:Z,sanitize:D,timeAgo:U},Symbol.toStringTag,{value:"Module"}));class W extends HTMLElement{static get observedAttributes(){return["copy","id","type","language"]}constructor(){super(),this.attachShadow({mode:"open"}),this._boundCopy=this._onCopy.bind(this),this._isRendered=!1}connectedCallback(){this._isRendered||(this.render(),this._isRendered=!0)}attributeChangedCallback(t,i,e){this._isRendered&&i!==e&&this.render()}render(){const t=this.hasAttribute("copy"),i=this.getAttribute("language")||"text";this.shadowRoot.innerHTML=`
|
|
873
874
|
<style>
|
|
874
875
|
:host {
|
|
875
876
|
position: relative;
|
|
@@ -881,30 +882,49 @@
|
|
|
881
882
|
background: var(--app-100);
|
|
882
883
|
border: 1px solid var(--app-300);
|
|
883
884
|
border-radius: 20px;
|
|
884
|
-
font-family: 'Reddit Mono',
|
|
885
|
+
font-family: 'Reddit Mono', monospace;
|
|
886
|
+
font-size: 14px;
|
|
885
887
|
overflow-x: auto;
|
|
886
|
-
line-height: 1.
|
|
888
|
+
line-height: 1.5;
|
|
887
889
|
white-space: pre;
|
|
890
|
+
color: var(--app-text);
|
|
888
891
|
}
|
|
889
892
|
|
|
890
893
|
.copy {
|
|
891
894
|
position: absolute;
|
|
892
895
|
top: 8px;
|
|
893
896
|
right: 8px;
|
|
897
|
+
opacity: 0;
|
|
898
|
+
transition: opacity 0.2s;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
:host(:hover) .copy {
|
|
902
|
+
opacity: 1;
|
|
894
903
|
}
|
|
904
|
+
|
|
895
905
|
pre.g {
|
|
896
906
|
padding-right: 60px;
|
|
897
907
|
}
|
|
908
|
+
|
|
909
|
+
.token.comment { color: var(--app-700); font-style: italic; }
|
|
910
|
+
.token.string { color: var(--app-green); }
|
|
911
|
+
.token.number { color: var(--app-orange); }
|
|
912
|
+
.token.keyword { color: var(--app-purple); font-weight: bold; }
|
|
913
|
+
.token.function { color: var(--app-blue); }
|
|
914
|
+
.token.tag { color: var(--app-red); }
|
|
915
|
+
.token.attr-name { color: var(--app-yellow); }
|
|
916
|
+
.token.attr-value { color: var(--app-green); }
|
|
917
|
+
.token.boolean { color: var(--app-orange); }
|
|
898
918
|
</style>
|
|
899
919
|
|
|
900
|
-
<eui-button class="copy" width="
|
|
901
|
-
<eui-icon name="copy" width="
|
|
920
|
+
<eui-button class="copy" width="36" height="36" border-radius="100">
|
|
921
|
+
<eui-icon name="copy" width="18" height="18"></eui-icon>
|
|
902
922
|
</eui-button>
|
|
903
923
|
|
|
904
924
|
<pre class="${t?"g":""}"><code></code></pre>
|
|
905
|
-
`,this.copyBtn=this.shadowRoot.querySelector(".copy"),this.codeEl=this.shadowRoot.querySelector("code")
|
|
906
|
-
`),e=i.filter(n=>n.trim()).map(n=>n.match(/^\s*/)[0].length),
|
|
907
|
-
`),t}_onCopy(){
|
|
925
|
+
`,this.copyBtn=this.shadowRoot.querySelector(".copy"),this.codeEl=this.shadowRoot.querySelector("code");const e=this._getFormattedText();this.codeEl.innerHTML=this._highlight(e,i),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*$/,"");const i=t.split(`
|
|
926
|
+
`),e=i.filter(n=>n.trim()).map(n=>n.match(/^\s*/)[0].length),s=e.length?Math.min(...e):0;return i.map(n=>n.slice(s)).join(`
|
|
927
|
+
`)}_highlight(t,i){return t=t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),i==="javascript"||i==="js"||i==="json"?(t=t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,'<span class="token string">$1</span>'),t=t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm,'<span class="token comment">$1</span>'),t=t.replace(/\b(const|let|var|if|else|for|while|return|function|class|import|export|from|default|switch|case|break|continue|new|this|async|await)\b/g,'<span class="token keyword">$1</span>'),t=t.replace(/\b(true|false|null|undefined)\b/g,'<span class="token boolean">$1</span>'),t=t.replace(/\b([a-zA-Z0-9_]+)\s*(?=\()/g,'<span class="token function">$1</span>')):i==="bash"||i==="sh"?(t=t.replace(/(#.*$)/gm,'<span class="token comment">$1</span>'),t=t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,'<span class="token string">$1</span>'),t=t.replace(/\b(npm|npx|node|git|cd|ls|mkdir|rm|mv|cp|echo|cat|sudo|docker|brew|grep|curl|wget|chmod|chown|touch)\b/g,'<span class="token keyword">$1</span>'),t=t.replace(/\b(install|run|build|start|test|dev|init|clone|pull|push|commit|add|checkout|branch|merge)\b/g,'<span class="token function">$1</span>'),t=t.replace(/(\s-+[a-zA-Z0-9-]+)/g,'<span class="token attr-name">$1</span>'),t=t.replace(/(\$[A-Z0-9_]+)/g,'<span class="token number">$1</span>')):i==="html"||i==="xml"?(t=t.replace(/(<!--[\s\S]*?-->)/g,'<span class="token comment">$1</span>'),t=t.replace(/(<\/?[a-z0-9:-]+)/gi,'<span class="token tag">$1</span>'),t=t.replace(/\s([a-z0-9:-]+)=/gi,' <span class="token attr-name">$1</span>='),t=t.replace(/(".*?")/g,'<span class="token attr-value">$1</span>'),t=t.replace(/>/g,'<span class="token tag">></span>')):i==="css"&&(t=t.replace(/(\/\*[\s\S]*?\*\/)/g,'<span class="token comment">$1</span>'),t=t.replace(/([a-z-]+)(?=:)/g,'<span class="token keyword">$1</span>')),t}_onCopy(){S(this._getFormattedText());const t=this.copyBtn.querySelector("eui-icon");if(t){const i=t.getAttribute("name");t.setAttribute("name","check"),setTimeout(()=>t.setAttribute("name",i),2e3)}}disconnectedCallback(){this.copyBtn&&this.copyBtn.removeEventListener("click",this._boundCopy)}}customElements.define("eui-code",W);class J 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
928
|
<style>
|
|
909
929
|
:host {
|
|
910
930
|
display: block;
|
|
@@ -996,7 +1016,7 @@
|
|
|
996
1016
|
<slot></slot>
|
|
997
1017
|
</div>
|
|
998
1018
|
</div>
|
|
999
|
-
`}}customElements.define("eui-app-titlebar",
|
|
1019
|
+
`}}customElements.define("eui-app-titlebar",J);class Y 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"),s=Math.max(i.width,i.height),n=s/2;e.style.width=e.style.height=`${s}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
1020
|
<style>
|
|
1001
1021
|
:host {
|
|
1002
1022
|
display: block;
|
|
@@ -1057,4 +1077,4 @@
|
|
|
1057
1077
|
<div class="surface">
|
|
1058
1078
|
<slot></slot>
|
|
1059
1079
|
</div>
|
|
1060
|
-
`}}customElements.define("eui-surface",
|
|
1080
|
+
`}}customElements.define("eui-surface",Y),typeof window<"u"&&console.log("ErisUI loaded successfully"),h.device=R,h.haptics=_,h.icons=u,h.loadPage=q,h.router=w,h.storage=I,h.utils=X,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/erisui.mjs
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
var S = Object.defineProperty;
|
|
2
|
+
var z = (o, t, i) => t in o ? S(o, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[t] = i;
|
|
3
|
+
var v = (o, t, i) => z(o, typeof t != "symbol" ? t + "" : t, i);
|
|
4
|
+
class M extends HTMLElement {
|
|
2
5
|
static get observedAttributes() {
|
|
3
6
|
return ["size", "border-radius", "name", "color"];
|
|
4
7
|
}
|
|
@@ -63,14 +66,14 @@ class C extends HTMLElement {
|
|
|
63
66
|
this.avatar.style.width = e + "px", this.avatar.style.height = e + "px", this.initials.style.fontSize = e / 2 + "px";
|
|
64
67
|
}
|
|
65
68
|
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
|
|
69
|
+
const s = this.getAttribute("name").trim().split(/\s+/);
|
|
67
70
|
let n = "";
|
|
68
|
-
|
|
71
|
+
s.length === 1 ? n = s[0][0] || "" : n = (s[0][0] || "") + (s[s.length - 1][0] || ""), this.initials.textContent = n.toUpperCase();
|
|
69
72
|
}
|
|
70
73
|
}
|
|
71
74
|
}
|
|
72
|
-
customElements.define("eui-avatar",
|
|
73
|
-
const
|
|
75
|
+
customElements.define("eui-avatar", M);
|
|
76
|
+
const u = /* @__PURE__ */ (() => {
|
|
74
77
|
let o = {};
|
|
75
78
|
return {
|
|
76
79
|
register(t, i) {
|
|
@@ -81,14 +84,15 @@ const g = /* @__PURE__ */ (() => {
|
|
|
81
84
|
}
|
|
82
85
|
};
|
|
83
86
|
})();
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
u.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>');
|
|
88
|
+
u.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>');
|
|
89
|
+
u.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>');
|
|
90
|
+
u.register("settings", '<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.644169 15.2044C0.751639 15.4175 0.866389 15.627 0.988219 15.8323C1.34503 16.445 1.76284 17.0223 2.23048 17.545C2.3967 17.7307 2.65856 17.7968 2.89375 17.7126L5.25826 16.8621C5.96645 16.608 6.74841 17.07 6.87902 17.8018L7.32018 20.2764C7.36418 20.5227 7.55119 20.7167 7.79454 20.7688C8.86201 20.9976 9.95753 21.057 11.0418 20.9452C11.427 20.9061 11.8095 20.8457 12.1863 20.7643C12.375 20.7232 12.5303 20.5969 12.6121 20.4275C12.6441 20.37 12.6671 20.3068 12.6794 20.2397L13.132 17.7739C13.1978 17.4162 13.4191 17.1252 13.7102 16.9498C13.7478 16.9275 13.7867 16.9072 13.8264 16.8889C14.1041 16.7654 14.426 16.7408 14.7301 16.8496L17.0889 17.6938C17.2068 17.7362 17.3318 17.7406 17.4482 17.7107C17.5805 17.6872 17.7044 17.6208 17.7983 17.5172C18.2857 16.9783 18.7189 16.3833 19.0875 15.7497C19.4503 15.1137 19.748 14.4403 19.9703 13.7471C20.0128 13.6142 20.0083 13.4742 19.9629 13.3481C19.9307 13.2315 19.8646 13.1245 19.7685 13.043L17.8596 11.4179C17.6114 11.2067 17.4714 10.912 17.4409 10.6065C17.4371 10.563 17.4355 10.5194 17.4361 10.4758C17.444 10.1379 17.5847 9.80337 17.8591 9.56905L19.7638 7.94348C19.8146 7.90007 19.857 7.84958 19.8904 7.7944C19.9978 7.63842 20.0299 7.43844 19.9706 7.25291C19.8534 6.88733 19.7151 6.52704 19.5572 6.17466C19.1114 5.17572 18.5115 4.2528 17.7787 3.43934C17.612 3.25429 17.3509 3.18886 17.1161 3.27382L14.7569 4.12827C14.0592 4.38082 13.2679 3.93321 13.1344 3.19155L12.6871 0.714256C12.6423 0.468053 12.4542 0.273849 12.2106 0.22246C11.5182 0.0764882 10.803 0.00250031 10.088 0.000608251C9.88769 -0.0015584 9.68739 0.002064 9.48735 0.0114648C8.92415 0.0369819 8.36389 0.107332 7.81778 0.222459C7.78135 0.230146 7.74615 0.241028 7.71249 0.2548C7.5098 0.328781 7.35888 0.505679 7.31996 0.723547L6.8788 3.19817C6.81394 3.56157 6.58834 3.85866 6.29097 4.03446C5.98991 4.2061 5.61923 4.25412 5.27153 4.12827L2.91237 3.27382C2.70694 3.1995 2.48138 3.24016 2.31657 3.37545C2.2857 3.39886 2.25676 3.42543 2.23026 3.45505C1.81793 3.91588 1.44433 4.4192 1.11714 4.95183C1.05788 5.04799 1.00019 5.14513 0.944072 5.24319C0.878302 5.35619 0.814661 5.4704 0.753186 5.58577C0.464267 6.12611 0.222113 6.69081 0.0338354 7.26739C0.0213426 7.30567 0.0127871 7.34455 0.00802709 7.38352C-0.0257478 7.59364 0.0518458 7.809 0.218337 7.94974L2.13633 9.56992C2.41146 9.80242 2.55518 10.1364 2.56469 10.4743C2.56917 10.8294 2.42529 11.1857 2.13611 11.4301L0.218115 13.0503C0.0484589 13.1937 -0.0289685 13.4145 0.00982709 13.6284C0.0147983 13.6634 0.0228404 13.6982 0.0340542 13.7326C0.198098 14.235 0.403035 14.7283 0.644169 15.2044ZM10 14.5C12.2091 14.5 14 12.7091 14 10.5C14 8.29086 12.2091 6.5 10 6.5C7.79086 6.5 6 8.29086 6 10.5C6 12.7091 7.79086 14.5 10 14.5Z" fill="currentColor"></path></svg>');
|
|
91
|
+
u.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>');
|
|
92
|
+
u.register("copy", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 11C2 11.7956 2.31607 12.5587 2.87868 13.1213C3.44129 13.6839 4.20435 14 5 14H11C11.7956 14 12.5587 13.6839 13.1213 13.1213C13.6839 12.5587 14 11.7956 14 11V8H11.75C10.7554 8 9.80161 7.60491 9.09835 6.90165C8.39509 6.19839 8 5.24456 8 4.25V2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V11Z" fill="currentColor"/><path d="M13.7975 6.49965C13.6881 6.25457 13.5357 6.03105 13.3475 5.83965L10.16 2.65965C9.96921 2.4688 9.74565 2.31384 9.5 2.20215V4.24965C9.5 4.54512 9.5582 4.8377 9.67127 5.11069C9.78434 5.38367 9.95008 5.63171 10.159 5.84064C10.3679 6.04957 10.616 6.2153 10.889 6.32838C11.1619 6.44145 11.4545 6.49965 11.75 6.49965H13.7975Z" fill="currentColor"/></svg>');
|
|
93
|
+
u.register("arrow", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"></path></svg>');
|
|
94
|
+
u.register("back", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="transform: rotate(180deg)"><path d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"></path></svg>');
|
|
95
|
+
class $ extends HTMLElement {
|
|
92
96
|
static get observedAttributes() {
|
|
93
97
|
return ["name", "width", "height"];
|
|
94
98
|
}
|
|
@@ -102,23 +106,23 @@ class S extends HTMLElement {
|
|
|
102
106
|
this.render();
|
|
103
107
|
}
|
|
104
108
|
render() {
|
|
105
|
-
const t = this.getAttribute("name"), i =
|
|
109
|
+
const t = this.getAttribute("name"), i = u.get(t);
|
|
106
110
|
if (!i) {
|
|
107
111
|
this.shadowRoot.innerHTML = '<span style="color:red;">?</span>';
|
|
108
112
|
return;
|
|
109
113
|
}
|
|
110
114
|
const e = document.createElement("template");
|
|
111
115
|
e.innerHTML = i.trim();
|
|
112
|
-
const
|
|
116
|
+
const s = e.content.cloneNode(!0), n = s.firstElementChild;
|
|
113
117
|
if (n && n.style) {
|
|
114
|
-
const
|
|
115
|
-
|
|
118
|
+
const l = this.getAttribute("width"), c = this.getAttribute("height");
|
|
119
|
+
l && n.setAttribute("width", l), c && n.setAttribute("height", c), n.style.display = "block";
|
|
116
120
|
}
|
|
117
|
-
this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(
|
|
121
|
+
this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(s);
|
|
118
122
|
}
|
|
119
123
|
}
|
|
120
|
-
customElements.define("eui-icon",
|
|
121
|
-
class
|
|
124
|
+
customElements.define("eui-icon", $);
|
|
125
|
+
class T extends HTMLElement {
|
|
122
126
|
static get observedAttributes() {
|
|
123
127
|
return ["label", "value", "id", "type", "filled"];
|
|
124
128
|
}
|
|
@@ -251,8 +255,8 @@ class L extends HTMLElement {
|
|
|
251
255
|
this.setAttribute("value", t);
|
|
252
256
|
}
|
|
253
257
|
}
|
|
254
|
-
customElements.define("eui-input",
|
|
255
|
-
class
|
|
258
|
+
customElements.define("eui-input", T);
|
|
259
|
+
class R extends HTMLElement {
|
|
256
260
|
constructor() {
|
|
257
261
|
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
|
|
258
262
|
<style>
|
|
@@ -302,8 +306,8 @@ class z extends HTMLElement {
|
|
|
302
306
|
`;
|
|
303
307
|
}
|
|
304
308
|
}
|
|
305
|
-
customElements.define("eui-loader",
|
|
306
|
-
class
|
|
309
|
+
customElements.define("eui-loader", R);
|
|
310
|
+
class H extends HTMLElement {
|
|
307
311
|
static get observedAttributes() {
|
|
308
312
|
return ["value", "intermediate", "id"];
|
|
309
313
|
}
|
|
@@ -365,8 +369,8 @@ class M extends HTMLElement {
|
|
|
365
369
|
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") + "%");
|
|
366
370
|
}
|
|
367
371
|
}
|
|
368
|
-
customElements.define("eui-progressbar",
|
|
369
|
-
const
|
|
372
|
+
customElements.define("eui-progressbar", H);
|
|
373
|
+
const x = {
|
|
370
374
|
is: {
|
|
371
375
|
iPhone: /iPhone/.test(navigator.userAgent),
|
|
372
376
|
iPad: /iPad/.test(navigator.userAgent),
|
|
@@ -386,11 +390,11 @@ const v = {
|
|
|
386
390
|
haptics: "vibrate" in navigator || "Vibrate" in window || typeof window.navigator.vibrate == "function"
|
|
387
391
|
},
|
|
388
392
|
userAgent: navigator.userAgent
|
|
389
|
-
},
|
|
393
|
+
}, J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
390
394
|
__proto__: null,
|
|
391
|
-
device:
|
|
395
|
+
device: x
|
|
392
396
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
393
|
-
function
|
|
397
|
+
function _() {
|
|
394
398
|
try {
|
|
395
399
|
const o = document.createElement("label");
|
|
396
400
|
o.ariaHidden = "true", o.style.display = "none";
|
|
@@ -399,13 +403,13 @@ function T() {
|
|
|
399
403
|
} catch {
|
|
400
404
|
}
|
|
401
405
|
}
|
|
402
|
-
function
|
|
403
|
-
|
|
406
|
+
function w(o) {
|
|
407
|
+
x.supports.haptics ? navigator.vibrate(o || 50) : x.is.iPhone && _();
|
|
404
408
|
}
|
|
405
|
-
const
|
|
409
|
+
const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
406
410
|
__proto__: null,
|
|
407
|
-
haptic:
|
|
408
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
411
|
+
haptic: w
|
|
412
|
+
}, Symbol.toStringTag, { value: "Module" })), y = (() => {
|
|
409
413
|
let o = {}, t;
|
|
410
414
|
try {
|
|
411
415
|
o = JSON.parse(localStorage.getItem(t) || "{}");
|
|
@@ -454,12 +458,12 @@ const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
454
458
|
}
|
|
455
459
|
}
|
|
456
460
|
};
|
|
457
|
-
})(),
|
|
461
|
+
})(), k = y.settings, K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
458
462
|
__proto__: null,
|
|
459
|
-
settings:
|
|
460
|
-
storage:
|
|
463
|
+
settings: k,
|
|
464
|
+
storage: y
|
|
461
465
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
462
|
-
class
|
|
466
|
+
class I extends HTMLElement {
|
|
463
467
|
static get observedAttributes() {
|
|
464
468
|
return ["selected"];
|
|
465
469
|
}
|
|
@@ -539,7 +543,7 @@ class R extends HTMLElement {
|
|
|
539
543
|
this.inputEl = this.shadowRoot.querySelector("input"), this.switchEl = this.shadowRoot.querySelector(".switch"), this.updateFromAttribute(), this.switchEl.addEventListener("click", () => this.toggle());
|
|
540
544
|
}
|
|
541
545
|
toggle() {
|
|
542
|
-
this.selected = !this.selected,
|
|
546
|
+
this.selected = !this.selected, w();
|
|
543
547
|
}
|
|
544
548
|
updateFromAttribute() {
|
|
545
549
|
const t = this.hasAttribute("selected");
|
|
@@ -555,8 +559,8 @@ class R extends HTMLElement {
|
|
|
555
559
|
t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
556
560
|
}
|
|
557
561
|
}
|
|
558
|
-
customElements.define("eui-switch",
|
|
559
|
-
class
|
|
562
|
+
customElements.define("eui-switch", I);
|
|
563
|
+
class F extends HTMLElement {
|
|
560
564
|
constructor() {
|
|
561
565
|
super(), this.attachShadow({ mode: "open" });
|
|
562
566
|
}
|
|
@@ -607,89 +611,89 @@ class $ extends HTMLElement {
|
|
|
607
611
|
</style>
|
|
608
612
|
<slot></slot>
|
|
609
613
|
`, this.addEventListener("pointerdown", (t) => {
|
|
610
|
-
const i = document.createElement("span"), e = t.currentTarget,
|
|
611
|
-
i.classList.add("ripple"), i.style.left = t.clientX - e.getBoundingClientRect().left -
|
|
614
|
+
const i = document.createElement("span"), e = t.currentTarget, s = Math.max(e.offsetWidth, e.offsetHeight);
|
|
615
|
+
i.classList.add("ripple"), i.style.left = t.clientX - e.getBoundingClientRect().left - s / 2 + "px", i.style.top = t.clientY - e.getBoundingClientRect().top - s / 2 + "px", i.style.width = s + "px", i.style.height = s + "px", this.shadowRoot.appendChild(i), setTimeout(() => {
|
|
612
616
|
i.remove();
|
|
613
617
|
}, 600);
|
|
614
618
|
});
|
|
615
619
|
}
|
|
616
620
|
}
|
|
617
|
-
customElements.define("eui-chip",
|
|
618
|
-
const b = "",
|
|
621
|
+
customElements.define("eui-chip", F);
|
|
622
|
+
const b = "", C = (() => {
|
|
619
623
|
const o = [];
|
|
620
|
-
function t(
|
|
621
|
-
const h = [],
|
|
622
|
-
o.push({ regex: p, paramNames: h, renderFn:
|
|
624
|
+
function t(r, a) {
|
|
625
|
+
const h = [], g = r.replace(/:([^/]+)/g, (m, f) => (h.push(f), "([^/]+)")).replace(/\//g, "\\/"), p = new RegExp(`^${b}${g}$`);
|
|
626
|
+
o.push({ regex: p, paramNames: h, renderFn: a });
|
|
623
627
|
}
|
|
624
|
-
function i(
|
|
625
|
-
for (const { regex:
|
|
626
|
-
const p =
|
|
628
|
+
function i(r) {
|
|
629
|
+
for (const { regex: a, paramNames: h, renderFn: g } of o) {
|
|
630
|
+
const p = r.match(a);
|
|
627
631
|
if (p) {
|
|
628
632
|
const m = {};
|
|
629
|
-
return h.forEach((f,
|
|
630
|
-
m[f] = decodeURIComponent(p[
|
|
631
|
-
}), { renderFn:
|
|
633
|
+
return h.forEach((f, L) => {
|
|
634
|
+
m[f] = decodeURIComponent(p[L + 1]);
|
|
635
|
+
}), { renderFn: g, params: m };
|
|
632
636
|
}
|
|
633
637
|
}
|
|
634
638
|
return null;
|
|
635
639
|
}
|
|
636
|
-
function e(
|
|
637
|
-
|
|
638
|
-
const h =
|
|
639
|
-
if (h === window.location.pathname &&
|
|
640
|
-
|
|
641
|
-
const p = "#" +
|
|
642
|
-
|
|
640
|
+
function e(r, a = !0) {
|
|
641
|
+
r.startsWith(b) || (r = b + (r.startsWith("/") ? "" : "/") + r);
|
|
642
|
+
const h = r.split(/[?#]/)[0];
|
|
643
|
+
if (h === window.location.pathname && r.includes("#")) {
|
|
644
|
+
a && history.pushState({}, "", r);
|
|
645
|
+
const p = "#" + r.split("#")[1];
|
|
646
|
+
s(p);
|
|
643
647
|
return;
|
|
644
648
|
}
|
|
645
|
-
const
|
|
646
|
-
if (
|
|
647
|
-
if (
|
|
648
|
-
const p = "#" +
|
|
649
|
-
setTimeout(() =>
|
|
649
|
+
const g = i(h);
|
|
650
|
+
if (g)
|
|
651
|
+
if (a && history.pushState({}, "", r), g.renderFn(g.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: r } })), r.includes("#")) {
|
|
652
|
+
const p = "#" + r.split("#")[1];
|
|
653
|
+
setTimeout(() => s(p), 100);
|
|
650
654
|
} else {
|
|
651
655
|
const p = document.getElementById("main");
|
|
652
656
|
p && p.scrollTo(0, 0);
|
|
653
657
|
}
|
|
654
|
-
else n ? (
|
|
658
|
+
else n ? (a && history.pushState({}, "", r), n()) : console.warn(`No route found for ${h}`);
|
|
655
659
|
}
|
|
656
|
-
function r
|
|
657
|
-
if (
|
|
660
|
+
function s(r) {
|
|
661
|
+
if (r)
|
|
658
662
|
try {
|
|
659
|
-
const
|
|
660
|
-
|
|
663
|
+
const a = document.querySelector(r);
|
|
664
|
+
a && a.scrollIntoView({ behavior: "smooth" });
|
|
661
665
|
} catch {
|
|
662
|
-
console.warn("Invalid hash:",
|
|
666
|
+
console.warn("Invalid hash:", r);
|
|
663
667
|
}
|
|
664
668
|
}
|
|
665
669
|
let n = null;
|
|
666
|
-
function
|
|
667
|
-
n =
|
|
670
|
+
function l(r) {
|
|
671
|
+
n = r;
|
|
668
672
|
}
|
|
669
|
-
function
|
|
673
|
+
function c() {
|
|
670
674
|
history.back();
|
|
671
675
|
}
|
|
672
|
-
function
|
|
676
|
+
function d() {
|
|
673
677
|
return window.location.pathname.replace(b, "") || "/";
|
|
674
678
|
}
|
|
675
679
|
return window.addEventListener("popstate", () => {
|
|
676
|
-
const
|
|
677
|
-
e(
|
|
678
|
-
}), window.addEventListener("click", (
|
|
679
|
-
if (
|
|
680
|
-
const
|
|
681
|
-
if (!
|
|
682
|
-
const h =
|
|
680
|
+
const r = window.location.pathname + window.location.search + window.location.hash;
|
|
681
|
+
e(r, !1);
|
|
682
|
+
}), window.addEventListener("click", (r) => {
|
|
683
|
+
if (r.button !== 0 || r.metaKey || r.altKey || r.ctrlKey || r.shiftKey) return;
|
|
684
|
+
const a = r.target.closest("a");
|
|
685
|
+
if (!a || a.hasAttribute("download") || a.getAttribute("target") === "_blank") return;
|
|
686
|
+
const h = a.getAttribute("href");
|
|
683
687
|
if (!(!h || h.startsWith("http") && !h.startsWith(window.location.origin))) {
|
|
684
|
-
if (
|
|
685
|
-
history.pushState({}, "", h),
|
|
688
|
+
if (r.preventDefault(), h.startsWith("#")) {
|
|
689
|
+
history.pushState({}, "", h), s(h);
|
|
686
690
|
return;
|
|
687
691
|
}
|
|
688
692
|
e(h);
|
|
689
693
|
}
|
|
690
|
-
}), { add: t, navigate: e, back:
|
|
694
|
+
}), { add: t, navigate: e, back: c, location: d, setNotFound: l };
|
|
691
695
|
})();
|
|
692
|
-
async function
|
|
696
|
+
async function G(o) {
|
|
693
697
|
try {
|
|
694
698
|
const t = document.getElementById("main");
|
|
695
699
|
t.classList.add("fade-out"), await new Promise((e) => setTimeout(e, 200));
|
|
@@ -707,59 +711,60 @@ async function Y(o) {
|
|
|
707
711
|
console.error("Page load failed:", t);
|
|
708
712
|
}
|
|
709
713
|
}
|
|
710
|
-
class
|
|
714
|
+
class q extends HTMLElement {
|
|
715
|
+
constructor() {
|
|
716
|
+
super();
|
|
717
|
+
v(this, "handleClick", () => {
|
|
718
|
+
const i = this.getAttribute("path");
|
|
719
|
+
i && C.navigate(i);
|
|
720
|
+
});
|
|
721
|
+
this.attachShadow({ mode: "open" });
|
|
722
|
+
}
|
|
711
723
|
static get observedAttributes() {
|
|
712
724
|
return ["path", "icon", "label", "badge", "active", "avatar-src", "avatar-name"];
|
|
713
725
|
}
|
|
714
|
-
constructor() {
|
|
715
|
-
super(), this.attachShadow({ mode: "open" });
|
|
716
|
-
}
|
|
717
726
|
connectedCallback() {
|
|
718
727
|
this.hasRendered || (this.render(), this.setupEventListeners(), this.hasRendered = !0), this.updateContent(), this.addEventListener("click", this.handleClick);
|
|
719
728
|
}
|
|
720
729
|
disconnectedCallback() {
|
|
721
730
|
this.removeEventListener("click", this.handleClick);
|
|
722
731
|
}
|
|
723
|
-
attributeChangedCallback(
|
|
724
|
-
if (
|
|
725
|
-
if (
|
|
732
|
+
attributeChangedCallback(i, e, s) {
|
|
733
|
+
if (e !== s && this.hasRendered) {
|
|
734
|
+
if (i === "active")
|
|
726
735
|
return;
|
|
727
736
|
this.updateContent();
|
|
728
737
|
}
|
|
729
738
|
}
|
|
730
|
-
handleClick = () => {
|
|
731
|
-
const t = this.getAttribute("path");
|
|
732
|
-
t && k.navigate(t);
|
|
733
|
-
};
|
|
734
739
|
setupEventListeners() {
|
|
735
|
-
this.addEventListener("pointerdown", (
|
|
736
|
-
const
|
|
737
|
-
|
|
738
|
-
|
|
740
|
+
this.addEventListener("pointerdown", (i) => {
|
|
741
|
+
const e = document.createElement("span"), s = i.currentTarget, n = s.getBoundingClientRect(), l = Math.max(s.offsetWidth, s.offsetHeight), c = l / 2;
|
|
742
|
+
e.classList.add("ripple"), e.style.width = `${l}px`, e.style.height = `${l}px`, e.style.left = `${i.clientX - n.left - c}px`, e.style.top = `${i.clientY - n.top - c}px`, this.shadowRoot.appendChild(e), e.addEventListener("animationend", () => {
|
|
743
|
+
e.remove();
|
|
739
744
|
});
|
|
740
745
|
});
|
|
741
746
|
}
|
|
742
747
|
updateContent() {
|
|
743
|
-
const
|
|
744
|
-
if (
|
|
745
|
-
if (
|
|
746
|
-
|
|
748
|
+
const i = this.getAttribute("icon"), e = this.getAttribute("avatar-src"), s = this.getAttribute("avatar-name"), n = this.getAttribute("label") || "", l = this.getAttribute("badge"), c = this.shadowRoot.querySelector(".badge");
|
|
749
|
+
if (l)
|
|
750
|
+
if (c)
|
|
751
|
+
c.textContent = l;
|
|
747
752
|
else {
|
|
748
|
-
const
|
|
749
|
-
|
|
753
|
+
const a = document.createElement("span");
|
|
754
|
+
a.className = "badge", a.textContent = l, this.shadowRoot.appendChild(a);
|
|
750
755
|
}
|
|
751
|
-
else
|
|
752
|
-
const
|
|
753
|
-
if (
|
|
754
|
-
if (
|
|
755
|
-
let
|
|
756
|
-
|
|
756
|
+
else c && c.remove();
|
|
757
|
+
const d = this.shadowRoot.querySelector("slot[name='icon']");
|
|
758
|
+
if (d)
|
|
759
|
+
if (e || s) {
|
|
760
|
+
let a = '<eui-avatar size="24"';
|
|
761
|
+
s && (a += ` name="${s}"`), a += ">", e && (a += `<img src="${e}" alt="${s || "Avatar"}" />`), a += "</eui-avatar>", d.innerHTML = a;
|
|
757
762
|
} else {
|
|
758
|
-
const
|
|
759
|
-
|
|
763
|
+
const a = d.querySelector("eui-icon");
|
|
764
|
+
i && a ? a.getAttribute("name") !== i && a.setAttribute("name", i) : i ? d.innerHTML = `<eui-icon width="24" height="24" name="${i}"></eui-icon>` : d.innerHTML = "";
|
|
760
765
|
}
|
|
761
|
-
const
|
|
762
|
-
|
|
766
|
+
const r = this.shadowRoot.querySelector(".label");
|
|
767
|
+
r && (r.textContent = n);
|
|
763
768
|
}
|
|
764
769
|
render() {
|
|
765
770
|
this.shadowRoot.innerHTML = `
|
|
@@ -870,8 +875,8 @@ class H extends HTMLElement {
|
|
|
870
875
|
`;
|
|
871
876
|
}
|
|
872
877
|
}
|
|
873
|
-
customElements.define("eui-nav-item",
|
|
874
|
-
class
|
|
878
|
+
customElements.define("eui-nav-item", q);
|
|
879
|
+
class j extends HTMLElement {
|
|
875
880
|
constructor() {
|
|
876
881
|
super(), this.attachShadow({ mode: "open" });
|
|
877
882
|
}
|
|
@@ -899,6 +904,7 @@ class _ extends HTMLElement {
|
|
|
899
904
|
|
|
900
905
|
.app-nav-container {
|
|
901
906
|
width: 100%;
|
|
907
|
+
min-width: var(--nav-width, 75px);
|
|
902
908
|
height: 100%;
|
|
903
909
|
box-sizing: border-box;
|
|
904
910
|
background-color: var(--app-200);
|
|
@@ -979,9 +985,10 @@ class _ extends HTMLElement {
|
|
|
979
985
|
<a href="#content" id="skip_navigation_link">Skip To Content</a>
|
|
980
986
|
<div class="nav-items">
|
|
981
987
|
${this.navItems.map((t) => {
|
|
988
|
+
var s, n;
|
|
982
989
|
if (t.type === "divider")
|
|
983
990
|
return '<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';
|
|
984
|
-
const i = t.avatar
|
|
991
|
+
const i = ((s = t.avatar) == null ? void 0 : s.src) || "", e = ((n = t.avatar) == null ? void 0 : n.name) || "";
|
|
985
992
|
return `<eui-nav-item path="${t.path}" icon="${t.icon}" avatar-src="${i}" avatar-name="${e}" label="${t.label}"></eui-nav-item>`;
|
|
986
993
|
}).join("")}
|
|
987
994
|
</div>
|
|
@@ -995,13 +1002,13 @@ class _ extends HTMLElement {
|
|
|
995
1002
|
return this._navItems || [];
|
|
996
1003
|
}
|
|
997
1004
|
updateActiveState(t) {
|
|
998
|
-
t || (t =
|
|
1005
|
+
t || (t = C.location()), t.startsWith("/") || (t = "/" + t), this.shadowRoot.querySelectorAll("eui-nav-item").forEach((e) => {
|
|
999
1006
|
e.getAttribute("path") === t ? e.setAttribute("active", "") : e.removeAttribute("active");
|
|
1000
1007
|
});
|
|
1001
1008
|
}
|
|
1002
1009
|
}
|
|
1003
|
-
customElements.define("eui-app-nav",
|
|
1004
|
-
class
|
|
1010
|
+
customElements.define("eui-app-nav", j);
|
|
1011
|
+
class B extends HTMLElement {
|
|
1005
1012
|
static get observedAttributes() {
|
|
1006
1013
|
return ["type", "title", "subtitle", "img"];
|
|
1007
1014
|
}
|
|
@@ -1081,12 +1088,12 @@ class I extends HTMLElement {
|
|
|
1081
1088
|
this.hd = this.shadowRoot.querySelector(".header"), this.hasAttribute("type") && this.hd.classList.add(this.getAttribute("type"));
|
|
1082
1089
|
}
|
|
1083
1090
|
attributeChangedCallback(t, i, e) {
|
|
1084
|
-
const
|
|
1085
|
-
t === "title" && (
|
|
1091
|
+
const s = this.shadowRoot.querySelector("h1"), n = this.shadowRoot.querySelector("p"), l = this.shadowRoot.querySelector(".img");
|
|
1092
|
+
t === "title" && (s.textContent = e), t === "subtitle" && (n.textContent = e), t === "img" && (l.style.backgroundImage = e ? `url(${e})` : "");
|
|
1086
1093
|
}
|
|
1087
1094
|
}
|
|
1088
|
-
customElements.define("eui-header",
|
|
1089
|
-
class
|
|
1095
|
+
customElements.define("eui-header", B);
|
|
1096
|
+
class N extends HTMLElement {
|
|
1090
1097
|
static get observedAttributes() {
|
|
1091
1098
|
return ["selected"];
|
|
1092
1099
|
}
|
|
@@ -1180,9 +1187,9 @@ class F extends HTMLElement {
|
|
|
1180
1187
|
this.inputEl = this.shadowRoot.querySelector("input"), this.checkEl = this.shadowRoot.querySelector(".checkbox"), this.updateFromAttribute(), this.checkEl.addEventListener("click", () => this.toggle());
|
|
1181
1188
|
}
|
|
1182
1189
|
toggle() {
|
|
1183
|
-
this.selected = !this.selected,
|
|
1190
|
+
this.selected = !this.selected, w();
|
|
1184
1191
|
const t = this.selected, i = this.dataset.setting;
|
|
1185
|
-
i &&
|
|
1192
|
+
i && k.set(i, t);
|
|
1186
1193
|
}
|
|
1187
1194
|
updateFromAttribute() {
|
|
1188
1195
|
const t = this.hasAttribute("selected");
|
|
@@ -1198,9 +1205,8 @@ class F extends HTMLElement {
|
|
|
1198
1205
|
t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
|
|
1199
1206
|
}
|
|
1200
1207
|
}
|
|
1201
|
-
customElements.define("eui-checkbox",
|
|
1202
|
-
class
|
|
1203
|
-
static observedAttributes = ["type", "width", "height", "border-radius", "icon", "link", "href"];
|
|
1208
|
+
customElements.define("eui-checkbox", N);
|
|
1209
|
+
class A extends HTMLElement {
|
|
1204
1210
|
constructor() {
|
|
1205
1211
|
super(), this.attachShadow({ mode: "open" });
|
|
1206
1212
|
}
|
|
@@ -1317,16 +1323,17 @@ class q extends HTMLElement {
|
|
|
1317
1323
|
</${i}>
|
|
1318
1324
|
`;
|
|
1319
1325
|
const e = this.shadowRoot.querySelector(i);
|
|
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", (
|
|
1321
|
-
const n = document.createElement("span"),
|
|
1322
|
-
n.classList.add("ripple"), n.style.width = `${
|
|
1326
|
+
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", (s) => {
|
|
1327
|
+
const n = document.createElement("span"), l = s.currentTarget, c = l.getBoundingClientRect(), d = Math.max(l.offsetWidth, l.offsetHeight), r = d / 2;
|
|
1328
|
+
n.classList.add("ripple"), n.style.width = `${d}px`, n.style.height = `${d}px`, n.style.left = `${s.clientX - c.left - r}px`, n.style.top = `${s.clientY - c.top - r}px`, e.appendChild(n), n.addEventListener("animationend", () => {
|
|
1323
1329
|
n.remove();
|
|
1324
1330
|
});
|
|
1325
1331
|
});
|
|
1326
1332
|
}
|
|
1327
1333
|
}
|
|
1328
|
-
|
|
1329
|
-
|
|
1334
|
+
v(A, "observedAttributes", ["type", "width", "height", "border-radius", "icon", "link", "href"]);
|
|
1335
|
+
customElements.define("eui-button", A);
|
|
1336
|
+
class O extends HTMLElement {
|
|
1330
1337
|
static get observedAttributes() {
|
|
1331
1338
|
return ["type", "anchor"];
|
|
1332
1339
|
}
|
|
@@ -1398,32 +1405,32 @@ class j extends HTMLElement {
|
|
|
1398
1405
|
`;
|
|
1399
1406
|
}
|
|
1400
1407
|
}
|
|
1401
|
-
customElements.define("eui-heading",
|
|
1402
|
-
function
|
|
1403
|
-
const e = Date.now() - o,
|
|
1404
|
-
return
|
|
1408
|
+
customElements.define("eui-heading", O);
|
|
1409
|
+
function P(o) {
|
|
1410
|
+
const e = Date.now() - o, s = Math.floor(e / 1e3), n = Math.floor(s / 60), l = Math.floor(n / 60), c = Math.floor(l / 24), d = Math.floor(c / 30), r = Math.floor(d / 12);
|
|
1411
|
+
return r > 0 ? `${r}y` : d > 0 ? `${d}mo` : c > 0 ? `${c}d` : l > 0 ? `${l}h` : n > 0 ? `${n}m` : `${s}s`;
|
|
1405
1412
|
}
|
|
1406
|
-
function
|
|
1407
|
-
const e = Date.now() - o,
|
|
1408
|
-
return
|
|
1413
|
+
function V(o) {
|
|
1414
|
+
const e = Date.now() - o, s = Math.floor(e / 1e3), n = Math.floor(s / 60), l = Math.floor(n / 60), c = Math.floor(l / 24), d = Math.floor(c / 30), r = Math.floor(d / 12);
|
|
1415
|
+
return r > 0 ? `${r} year${r > 1 ? "s" : ""} ago` : d > 0 ? `${d} month${d > 1 ? "s" : ""} ago` : c > 0 ? `${c} day${c > 1 ? "s" : ""} ago` : l > 0 ? `${l} hour${l > 1 ? "s" : ""} ago` : n > 0 ? `${n} minute${n > 1 ? "s" : ""} ago` : `${s} second${s > 1 ? "s" : ""} ago`;
|
|
1409
1416
|
}
|
|
1410
|
-
function
|
|
1417
|
+
function U(o) {
|
|
1411
1418
|
return o.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'").replace(/`/g, "`").replace(/'/g, "'");
|
|
1412
1419
|
}
|
|
1413
1420
|
function E(o) {
|
|
1414
1421
|
const t = document.createElement("input");
|
|
1415
1422
|
t.value = o, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
|
|
1416
1423
|
}
|
|
1417
|
-
const
|
|
1424
|
+
const Q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1418
1425
|
__proto__: null,
|
|
1419
1426
|
copystr: E,
|
|
1420
|
-
joinedAgo:
|
|
1421
|
-
sanitize:
|
|
1422
|
-
timeAgo:
|
|
1427
|
+
joinedAgo: V,
|
|
1428
|
+
sanitize: U,
|
|
1429
|
+
timeAgo: P
|
|
1423
1430
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
1424
|
-
class
|
|
1431
|
+
class Z extends HTMLElement {
|
|
1425
1432
|
static get observedAttributes() {
|
|
1426
|
-
return ["copy", "id", "type"];
|
|
1433
|
+
return ["copy", "id", "type", "language"];
|
|
1427
1434
|
}
|
|
1428
1435
|
constructor() {
|
|
1429
1436
|
super(), this.attachShadow({ mode: "open" }), this._boundCopy = this._onCopy.bind(this), this._isRendered = !1;
|
|
@@ -1431,8 +1438,11 @@ class P extends HTMLElement {
|
|
|
1431
1438
|
connectedCallback() {
|
|
1432
1439
|
this._isRendered || (this.render(), this._isRendered = !0);
|
|
1433
1440
|
}
|
|
1441
|
+
attributeChangedCallback(t, i, e) {
|
|
1442
|
+
this._isRendered && i !== e && this.render();
|
|
1443
|
+
}
|
|
1434
1444
|
render() {
|
|
1435
|
-
const t = this.hasAttribute("copy");
|
|
1445
|
+
const t = this.hasAttribute("copy"), i = this.getAttribute("language") || "text";
|
|
1436
1446
|
this.shadowRoot.innerHTML = `
|
|
1437
1447
|
<style>
|
|
1438
1448
|
:host {
|
|
@@ -1445,46 +1455,75 @@ class P extends HTMLElement {
|
|
|
1445
1455
|
background: var(--app-100);
|
|
1446
1456
|
border: 1px solid var(--app-300);
|
|
1447
1457
|
border-radius: 20px;
|
|
1448
|
-
font-family: 'Reddit Mono',
|
|
1458
|
+
font-family: 'Reddit Mono', monospace;
|
|
1459
|
+
font-size: 14px;
|
|
1449
1460
|
overflow-x: auto;
|
|
1450
|
-
line-height: 1.
|
|
1461
|
+
line-height: 1.5;
|
|
1451
1462
|
white-space: pre;
|
|
1463
|
+
color: var(--app-text);
|
|
1452
1464
|
}
|
|
1453
1465
|
|
|
1454
1466
|
.copy {
|
|
1455
1467
|
position: absolute;
|
|
1456
1468
|
top: 8px;
|
|
1457
1469
|
right: 8px;
|
|
1470
|
+
opacity: 0;
|
|
1471
|
+
transition: opacity 0.2s;
|
|
1458
1472
|
}
|
|
1473
|
+
|
|
1474
|
+
:host(:hover) .copy {
|
|
1475
|
+
opacity: 1;
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1459
1478
|
pre.g {
|
|
1460
1479
|
padding-right: 60px;
|
|
1461
1480
|
}
|
|
1481
|
+
|
|
1482
|
+
.token.comment { color: var(--app-700); font-style: italic; }
|
|
1483
|
+
.token.string { color: var(--app-green); }
|
|
1484
|
+
.token.number { color: var(--app-orange); }
|
|
1485
|
+
.token.keyword { color: var(--app-purple); font-weight: bold; }
|
|
1486
|
+
.token.function { color: var(--app-blue); }
|
|
1487
|
+
.token.tag { color: var(--app-red); }
|
|
1488
|
+
.token.attr-name { color: var(--app-yellow); }
|
|
1489
|
+
.token.attr-value { color: var(--app-green); }
|
|
1490
|
+
.token.boolean { color: var(--app-orange); }
|
|
1462
1491
|
</style>
|
|
1463
1492
|
|
|
1464
|
-
<eui-button class="copy" width="
|
|
1465
|
-
<eui-icon name="copy" width="
|
|
1493
|
+
<eui-button class="copy" width="36" height="36" border-radius="100">
|
|
1494
|
+
<eui-icon name="copy" width="18" height="18"></eui-icon>
|
|
1466
1495
|
</eui-button>
|
|
1467
1496
|
|
|
1468
1497
|
<pre class="${t ? "g" : ""}"><code></code></pre>
|
|
1469
|
-
`, this.copyBtn = this.shadowRoot.querySelector(".copy"), this.codeEl = this.shadowRoot.querySelector("code")
|
|
1498
|
+
`, this.copyBtn = this.shadowRoot.querySelector(".copy"), this.codeEl = this.shadowRoot.querySelector("code");
|
|
1499
|
+
const e = this._getFormattedText();
|
|
1500
|
+
this.codeEl.innerHTML = this._highlight(e, i), t ? this.copyBtn.addEventListener("click", this._boundCopy) : this.copyBtn.style.display = "none";
|
|
1470
1501
|
}
|
|
1471
1502
|
_getFormattedText() {
|
|
1472
1503
|
let t = this.textContent || "";
|
|
1473
|
-
t = t.replace(/^\s*\n/, "").replace(/\n\s*$/, "")
|
|
1504
|
+
t = t.replace(/^\s*\n/, "").replace(/\n\s*$/, "");
|
|
1474
1505
|
const i = t.split(`
|
|
1475
|
-
`), e = i.filter((n) => n.trim()).map((n) => n.match(/^\s*/)[0].length),
|
|
1476
|
-
return
|
|
1477
|
-
`)
|
|
1506
|
+
`), e = i.filter((n) => n.trim()).map((n) => n.match(/^\s*/)[0].length), s = e.length ? Math.min(...e) : 0;
|
|
1507
|
+
return i.map((n) => n.slice(s)).join(`
|
|
1508
|
+
`);
|
|
1509
|
+
}
|
|
1510
|
+
_highlight(t, i) {
|
|
1511
|
+
return t = t.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), i === "javascript" || i === "js" || i === "json" ? (t = t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, '<span class="token string">$1</span>'), t = t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, '<span class="token comment">$1</span>'), t = t.replace(/\b(const|let|var|if|else|for|while|return|function|class|import|export|from|default|switch|case|break|continue|new|this|async|await)\b/g, '<span class="token keyword">$1</span>'), t = t.replace(/\b(true|false|null|undefined)\b/g, '<span class="token boolean">$1</span>'), t = t.replace(/\b([a-zA-Z0-9_]+)\s*(?=\()/g, '<span class="token function">$1</span>')) : i === "bash" || i === "sh" ? (t = t.replace(/(#.*$)/gm, '<span class="token comment">$1</span>'), t = t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, '<span class="token string">$1</span>'), t = t.replace(/\b(npm|npx|node|git|cd|ls|mkdir|rm|mv|cp|echo|cat|sudo|docker|brew|grep|curl|wget|chmod|chown|touch)\b/g, '<span class="token keyword">$1</span>'), t = t.replace(/\b(install|run|build|start|test|dev|init|clone|pull|push|commit|add|checkout|branch|merge)\b/g, '<span class="token function">$1</span>'), t = t.replace(/(\s-+[a-zA-Z0-9-]+)/g, '<span class="token attr-name">$1</span>'), t = t.replace(/(\$[A-Z0-9_]+)/g, '<span class="token number">$1</span>')) : i === "html" || i === "xml" ? (t = t.replace(/(<!--[\s\S]*?-->)/g, '<span class="token comment">$1</span>'), t = t.replace(/(<\/?[a-z0-9:-]+)/gi, '<span class="token tag">$1</span>'), t = t.replace(/\s([a-z0-9:-]+)=/gi, ' <span class="token attr-name">$1</span>='), t = t.replace(/(".*?")/g, '<span class="token attr-value">$1</span>'), t = t.replace(/>/g, '<span class="token tag">></span>')) : i === "css" && (t = t.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token comment">$1</span>'), t = t.replace(/([a-z-]+)(?=:)/g, '<span class="token keyword">$1</span>')), t;
|
|
1478
1512
|
}
|
|
1479
1513
|
_onCopy() {
|
|
1480
1514
|
E(this._getFormattedText());
|
|
1515
|
+
const t = this.copyBtn.querySelector("eui-icon");
|
|
1516
|
+
if (t) {
|
|
1517
|
+
const i = t.getAttribute("name");
|
|
1518
|
+
t.setAttribute("name", "check"), setTimeout(() => t.setAttribute("name", i), 2e3);
|
|
1519
|
+
}
|
|
1481
1520
|
}
|
|
1482
1521
|
disconnectedCallback() {
|
|
1483
1522
|
this.copyBtn && this.copyBtn.removeEventListener("click", this._boundCopy);
|
|
1484
1523
|
}
|
|
1485
1524
|
}
|
|
1486
|
-
customElements.define("eui-code",
|
|
1487
|
-
class
|
|
1525
|
+
customElements.define("eui-code", Z);
|
|
1526
|
+
class D extends HTMLElement {
|
|
1488
1527
|
constructor() {
|
|
1489
1528
|
super(), this.attachShadow({ mode: "open" });
|
|
1490
1529
|
}
|
|
@@ -1600,8 +1639,8 @@ class U extends HTMLElement {
|
|
|
1600
1639
|
`;
|
|
1601
1640
|
}
|
|
1602
1641
|
}
|
|
1603
|
-
customElements.define("eui-app-titlebar",
|
|
1604
|
-
class
|
|
1642
|
+
customElements.define("eui-app-titlebar", D);
|
|
1643
|
+
class X extends HTMLElement {
|
|
1605
1644
|
constructor() {
|
|
1606
1645
|
super(), this.attachShadow({ mode: "open" }), this._handleMouseDown = this._addRipple.bind(this);
|
|
1607
1646
|
}
|
|
@@ -1618,8 +1657,8 @@ class D extends HTMLElement {
|
|
|
1618
1657
|
this.removeEventListener("mousedown", this._handleMouseDown), this.hasAttribute("ripple") && this.addEventListener("mousedown", this._handleMouseDown);
|
|
1619
1658
|
}
|
|
1620
1659
|
_addRipple(t) {
|
|
1621
|
-
const i = this.getBoundingClientRect(), e = document.createElement("span"),
|
|
1622
|
-
e.style.width = e.style.height = `${
|
|
1660
|
+
const i = this.getBoundingClientRect(), e = document.createElement("span"), s = Math.max(i.width, i.height), n = s / 2;
|
|
1661
|
+
e.style.width = e.style.height = `${s}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", () => {
|
|
1623
1662
|
e.remove();
|
|
1624
1663
|
});
|
|
1625
1664
|
}
|
|
@@ -1688,14 +1727,14 @@ class D extends HTMLElement {
|
|
|
1688
1727
|
`;
|
|
1689
1728
|
}
|
|
1690
1729
|
}
|
|
1691
|
-
customElements.define("eui-surface",
|
|
1730
|
+
customElements.define("eui-surface", X);
|
|
1692
1731
|
typeof window < "u" && console.log("ErisUI loaded successfully");
|
|
1693
1732
|
export {
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1733
|
+
J as device,
|
|
1734
|
+
Y as haptics,
|
|
1735
|
+
u as icons,
|
|
1736
|
+
G as loadPage,
|
|
1737
|
+
C as router,
|
|
1738
|
+
K as storage,
|
|
1739
|
+
Q as utils
|
|
1701
1740
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@3r1s_s/erisui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.11",
|
|
4
4
|
"description": "an awesome ui library for web apps",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"scripts": {
|
|
21
21
|
"dev": "vite",
|
|
22
22
|
"build": "vite build",
|
|
23
|
+
"build:lib": "vite build",
|
|
23
24
|
"preview": "vite preview",
|
|
24
25
|
"prepublishOnly": "npm run build"
|
|
25
26
|
},
|