@3r1s_s/erisui 1.0.8 → 1.0.9
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 +1 -1
- package/dist/erisui.mjs +38 -38
- package/package.json +1 -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
|
|
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}
|
package/dist/erisui.js
CHANGED
|
@@ -1057,4 +1057,4 @@
|
|
|
1057
1057
|
<div class="surface">
|
|
1058
1058
|
<slot></slot>
|
|
1059
1059
|
</div>
|
|
1060
|
-
`}}customElements.define("eui-surface",K),typeof window<"u"&&console.log("ErisUI loaded successfully"),p.device=R,p.haptics=H,p.
|
|
1060
|
+
`}}customElements.define("eui-surface",K),typeof window<"u"&&console.log("ErisUI loaded successfully"),p.device=R,p.haptics=H,p.icon=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,9 +63,9 @@ 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 r = this.getAttribute("name").trim().split(/\s+/);
|
|
67
|
+
let n = "";
|
|
68
|
+
r.length === 1 ? n = r[0][0] || "" : n = (r[0][0] || "") + (r[r.length - 1][0] || ""), this.initials.textContent = n.toUpperCase();
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|
|
@@ -109,12 +109,12 @@ class S extends HTMLElement {
|
|
|
109
109
|
}
|
|
110
110
|
const e = document.createElement("template");
|
|
111
111
|
e.innerHTML = i.trim();
|
|
112
|
-
const
|
|
113
|
-
if (
|
|
112
|
+
const r = e.content.cloneNode(!0), n = r.firstElementChild;
|
|
113
|
+
if (n && n.style) {
|
|
114
114
|
const a = this.getAttribute("width"), l = this.getAttribute("height");
|
|
115
|
-
a &&
|
|
115
|
+
a && n.setAttribute("width", a), l && n.setAttribute("height", l), n.style.display = "block";
|
|
116
116
|
}
|
|
117
|
-
this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(
|
|
117
|
+
this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(r);
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
customElements.define("eui-icon", S);
|
|
@@ -607,8 +607,8 @@ class $ extends HTMLElement {
|
|
|
607
607
|
</style>
|
|
608
608
|
<slot></slot>
|
|
609
609
|
`, 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 -
|
|
610
|
+
const i = document.createElement("span"), e = t.currentTarget, r = Math.max(e.offsetWidth, e.offsetHeight);
|
|
611
|
+
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(() => {
|
|
612
612
|
i.remove();
|
|
613
613
|
}, 600);
|
|
614
614
|
});
|
|
@@ -639,21 +639,21 @@ const b = "", k = (() => {
|
|
|
639
639
|
if (h === window.location.pathname && s.includes("#")) {
|
|
640
640
|
d && history.pushState({}, "", s);
|
|
641
641
|
const p = "#" + s.split("#")[1];
|
|
642
|
-
|
|
642
|
+
r(p);
|
|
643
643
|
return;
|
|
644
644
|
}
|
|
645
645
|
const u = i(h);
|
|
646
646
|
if (u)
|
|
647
647
|
if (d && history.pushState({}, "", s), u.renderFn(u.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: s } })), s.includes("#")) {
|
|
648
648
|
const p = "#" + s.split("#")[1];
|
|
649
|
-
setTimeout(() =>
|
|
649
|
+
setTimeout(() => r(p), 100);
|
|
650
650
|
} else {
|
|
651
651
|
const p = document.getElementById("main");
|
|
652
652
|
p && p.scrollTo(0, 0);
|
|
653
653
|
}
|
|
654
|
-
else
|
|
654
|
+
else n ? (d && history.pushState({}, "", s), n()) : console.warn(`No route found for ${h}`);
|
|
655
655
|
}
|
|
656
|
-
function
|
|
656
|
+
function r(s) {
|
|
657
657
|
if (s)
|
|
658
658
|
try {
|
|
659
659
|
const d = document.querySelector(s);
|
|
@@ -662,9 +662,9 @@ const b = "", k = (() => {
|
|
|
662
662
|
console.warn("Invalid hash:", s);
|
|
663
663
|
}
|
|
664
664
|
}
|
|
665
|
-
let
|
|
665
|
+
let n = null;
|
|
666
666
|
function a(s) {
|
|
667
|
-
|
|
667
|
+
n = s;
|
|
668
668
|
}
|
|
669
669
|
function l() {
|
|
670
670
|
history.back();
|
|
@@ -682,7 +682,7 @@ const b = "", k = (() => {
|
|
|
682
682
|
const h = d.getAttribute("href");
|
|
683
683
|
if (!(!h || h.startsWith("http") && !h.startsWith(window.location.origin))) {
|
|
684
684
|
if (s.preventDefault(), h.startsWith("#")) {
|
|
685
|
-
history.pushState({}, "", h),
|
|
685
|
+
history.pushState({}, "", h), r(h);
|
|
686
686
|
return;
|
|
687
687
|
}
|
|
688
688
|
e(h);
|
|
@@ -733,20 +733,20 @@ class H extends HTMLElement {
|
|
|
733
733
|
};
|
|
734
734
|
setupEventListeners() {
|
|
735
735
|
this.addEventListener("pointerdown", (t) => {
|
|
736
|
-
const i = document.createElement("span"), e = t.currentTarget,
|
|
737
|
-
i.classList.add("ripple"), i.style.width = `${
|
|
736
|
+
const i = document.createElement("span"), e = t.currentTarget, r = e.getBoundingClientRect(), n = Math.max(e.offsetWidth, e.offsetHeight), a = n / 2;
|
|
737
|
+
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", () => {
|
|
738
738
|
i.remove();
|
|
739
739
|
});
|
|
740
740
|
});
|
|
741
741
|
}
|
|
742
742
|
updateContent() {
|
|
743
|
-
const t = this.getAttribute("icon"), i = this.getAttribute("avatar-src"), e = this.getAttribute("avatar-name"),
|
|
744
|
-
if (
|
|
743
|
+
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");
|
|
744
|
+
if (n)
|
|
745
745
|
if (a)
|
|
746
|
-
a.textContent =
|
|
746
|
+
a.textContent = n;
|
|
747
747
|
else {
|
|
748
748
|
const s = document.createElement("span");
|
|
749
|
-
s.className = "badge", s.textContent =
|
|
749
|
+
s.className = "badge", s.textContent = n, this.shadowRoot.appendChild(s);
|
|
750
750
|
}
|
|
751
751
|
else a && a.remove();
|
|
752
752
|
const l = this.shadowRoot.querySelector("slot[name='icon']");
|
|
@@ -759,7 +759,7 @@ class H extends HTMLElement {
|
|
|
759
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 = "";
|
|
760
760
|
}
|
|
761
761
|
const c = this.shadowRoot.querySelector(".label");
|
|
762
|
-
c && (c.textContent =
|
|
762
|
+
c && (c.textContent = r);
|
|
763
763
|
}
|
|
764
764
|
render() {
|
|
765
765
|
this.shadowRoot.innerHTML = `
|
|
@@ -1081,8 +1081,8 @@ class I extends HTMLElement {
|
|
|
1081
1081
|
this.hd = this.shadowRoot.querySelector(".header"), this.hasAttribute("type") && this.hd.classList.add(this.getAttribute("type"));
|
|
1082
1082
|
}
|
|
1083
1083
|
attributeChangedCallback(t, i, e) {
|
|
1084
|
-
const
|
|
1085
|
-
t === "title" && (
|
|
1084
|
+
const r = this.shadowRoot.querySelector("h1"), n = this.shadowRoot.querySelector("p"), a = this.shadowRoot.querySelector(".img");
|
|
1085
|
+
t === "title" && (r.textContent = e), t === "subtitle" && (n.textContent = e), t === "img" && (a.style.backgroundImage = e ? `url(${e})` : "");
|
|
1086
1086
|
}
|
|
1087
1087
|
}
|
|
1088
1088
|
customElements.define("eui-header", I);
|
|
@@ -1317,10 +1317,10 @@ class q extends HTMLElement {
|
|
|
1317
1317
|
</${i}>
|
|
1318
1318
|
`;
|
|
1319
1319
|
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
|
|
1322
|
-
|
|
1323
|
-
|
|
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", (r) => {
|
|
1321
|
+
const n = document.createElement("span"), a = r.currentTarget, l = a.getBoundingClientRect(), c = Math.max(a.offsetWidth, a.offsetHeight), s = c / 2;
|
|
1322
|
+
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", () => {
|
|
1323
|
+
n.remove();
|
|
1324
1324
|
});
|
|
1325
1325
|
});
|
|
1326
1326
|
}
|
|
@@ -1400,12 +1400,12 @@ class j extends HTMLElement {
|
|
|
1400
1400
|
}
|
|
1401
1401
|
customElements.define("eui-heading", j);
|
|
1402
1402
|
function N(o) {
|
|
1403
|
-
const e = Date.now() - o,
|
|
1404
|
-
return s > 0 ? `${s}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : a > 0 ? `${a}h` :
|
|
1403
|
+
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);
|
|
1404
|
+
return s > 0 ? `${s}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : a > 0 ? `${a}h` : n > 0 ? `${n}m` : `${r}s`;
|
|
1405
1405
|
}
|
|
1406
1406
|
function B(o) {
|
|
1407
|
-
const e = Date.now() - o,
|
|
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` :
|
|
1407
|
+
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);
|
|
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` : n > 0 ? `${n} minute${n > 1 ? "s" : ""} ago` : `${r} second${r > 1 ? "s" : ""} ago`;
|
|
1409
1409
|
}
|
|
1410
1410
|
function O(o) {
|
|
1411
1411
|
return o.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'").replace(/`/g, "`").replace(/'/g, "'");
|
|
@@ -1472,8 +1472,8 @@ class P extends HTMLElement {
|
|
|
1472
1472
|
let t = this.textContent || "";
|
|
1473
1473
|
t = t.replace(/^\s*\n/, "").replace(/\n\s*$/, ""), t = t.replace(/[ \t]+$/gm, "");
|
|
1474
1474
|
const i = t.split(`
|
|
1475
|
-
`), e = i.filter((
|
|
1476
|
-
return t = i.map((
|
|
1475
|
+
`), e = i.filter((n) => n.trim()).map((n) => n.match(/^\s*/)[0].length), r = e.length ? Math.min(...e) : 0;
|
|
1476
|
+
return t = i.map((n) => n.slice(r)).join(`
|
|
1477
1477
|
`), t;
|
|
1478
1478
|
}
|
|
1479
1479
|
_onCopy() {
|
|
@@ -1618,8 +1618,8 @@ class D extends HTMLElement {
|
|
|
1618
1618
|
this.removeEventListener("mousedown", this._handleMouseDown), this.hasAttribute("ripple") && this.addEventListener("mousedown", this._handleMouseDown);
|
|
1619
1619
|
}
|
|
1620
1620
|
_addRipple(t) {
|
|
1621
|
-
const i = this.getBoundingClientRect(), e = document.createElement("span"),
|
|
1622
|
-
e.style.width = e.style.height = `${
|
|
1621
|
+
const i = this.getBoundingClientRect(), e = document.createElement("span"), r = Math.max(i.width, i.height), n = r / 2;
|
|
1622
|
+
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", () => {
|
|
1623
1623
|
e.remove();
|
|
1624
1624
|
});
|
|
1625
1625
|
}
|
|
@@ -1693,7 +1693,7 @@ typeof window < "u" && console.log("ErisUI loaded successfully");
|
|
|
1693
1693
|
export {
|
|
1694
1694
|
W as device,
|
|
1695
1695
|
J as haptics,
|
|
1696
|
-
X as
|
|
1696
|
+
X as icon,
|
|
1697
1697
|
Y as loadPage,
|
|
1698
1698
|
k as router,
|
|
1699
1699
|
V as storage,
|