marz-ui 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
const b = `.marz-button{display:inline-block;cursor:pointer;border:0;border-radius:
|
|
1
|
+
const b = `.marz-button{display:inline-block;cursor:pointer;border:0;border-radius:var(--rounded);font-weight:700;line-height:1;font-family:Inter,sans-serif;transition:all .1s;box-sizing:border-box}.marz-button--primary{border:var(--accent) 2px solid;background-color:var(--accent);color:var(--primary-btn-text)}.marz-button--primary:hover{border:var(--accent) 2px solid;background-color:var(--accent);color:var(--primary-btn-text-hover);box-shadow:var(--shadow-hover)}.marz-button--secondary{border:var(--secondary) 1px solid;background-color:transparent;color:var(--text)}.marz-button--secondary:hover{border:var(--primary) 1px solid;background-color:var(--bg-element);color:var(--text);box-shadow:var(--shadow-hover)}.marz-button--secondary:active,.marz-button--secondary:focus{border:var(--primary) 1px solid;background-color:var(--bg-element-2);color:var(--text);box-shadow:var(--shadow-active)}.marz-button--primary:active,.marz-button--primary:focus{box-shadow:var(--shadow-active)}.marz-button--small{padding:10px;font-size:12px;min-width:32px;height:32px}.marz-button--medium{padding:11px 20px;font-size:14px}.marz-button--large{padding:12px 24px;font-size:16px}.marz-button--no-outline{border:none!important}.marz-button--fullwidth{width:100%}.marz-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
|
|
2
2
|
`, i = new CSSStyleSheet();
|
|
3
3
|
i.replaceSync(`:host {
|
|
4
4
|
display: inline-block;
|
|
5
|
-
width: 100%;
|
|
6
5
|
}
|
|
7
6
|
|
|
8
7
|
${b}`);
|
|
9
8
|
class d extends HTMLElement {
|
|
10
9
|
constructor() {
|
|
11
|
-
super(), this.attachShadow({ mode: "open" }), this.button = document.createElement("button"), this.button.type = "button", this.shadowRoot.adoptedStyleSheets = [i], this.shadowRoot.appendChild(this.button), this.button.addEventListener("click", () => {
|
|
12
|
-
this.dispatchEvent(new Event("click", { bubbles: !0, composed: !0 }));
|
|
10
|
+
super(), this.attachShadow({ mode: "open" }), this.button = document.createElement("button"), this.button.type = "button", this.shadowRoot.adoptedStyleSheets = [i], this.shadowRoot.appendChild(this.button), this.button.addEventListener("click", (t) => {
|
|
11
|
+
t.stopPropagation(), this.dispatchEvent(new Event("click", { bubbles: !0, composed: !0 }));
|
|
13
12
|
});
|
|
14
13
|
}
|
|
15
14
|
static get observedAttributes() {
|
|
16
|
-
return ["primary", "background-color", "size", "label", "no-outline", "disabled"];
|
|
15
|
+
return ["primary", "background-color", "size", "label", "no-outline", "disabled", "fullwidth"];
|
|
17
16
|
}
|
|
18
17
|
connectedCallback() {
|
|
19
18
|
this.render();
|
|
@@ -22,13 +21,14 @@ class d extends HTMLElement {
|
|
|
22
21
|
e !== r && this.render();
|
|
23
22
|
}
|
|
24
23
|
render() {
|
|
25
|
-
const t = this.hasAttribute("primary"), e = this.getAttribute("size") || "medium", r = this.getAttribute("label") || this.textContent || "",
|
|
24
|
+
const t = this.hasAttribute("primary"), e = this.getAttribute("size") || "medium", r = this.getAttribute("label") || this.textContent || "", a = this.hasAttribute("no-outline"), o = this.getAttribute("background-color"), s = this.hasAttribute("disabled"), n = this.hasAttribute("fullwidth"), l = [
|
|
26
25
|
"marz-button",
|
|
27
26
|
`marz-button--${e}`,
|
|
28
27
|
t ? "marz-button--primary" : "marz-button--secondary",
|
|
29
|
-
|
|
28
|
+
a ? "marz-button--no-outline" : "",
|
|
29
|
+
n ? "marz-button--fullwidth" : ""
|
|
30
30
|
].filter(Boolean).join(" ");
|
|
31
|
-
this.button.className =
|
|
31
|
+
this.button.className = l, this.button.textContent = r, this.button.disabled = s, o ? this.button.style.backgroundColor = o : this.button.style.backgroundColor = "";
|
|
32
32
|
}
|
|
33
33
|
// Public API for programmatic control
|
|
34
34
|
get primary() {
|
|
@@ -55,6 +55,12 @@ class d extends HTMLElement {
|
|
|
55
55
|
set disabled(t) {
|
|
56
56
|
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
57
57
|
}
|
|
58
|
+
get fullwidth() {
|
|
59
|
+
return this.hasAttribute("fullwidth");
|
|
60
|
+
}
|
|
61
|
+
set fullwidth(t) {
|
|
62
|
+
t ? this.setAttribute("fullwidth", "") : this.removeAttribute("fullwidth");
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
customElements.get("marz-button") || customElements.define("marz-button", d);
|
|
60
66
|
export {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const o = `.marz-input-wrapper{display:flex;flex-direction:column;gap:
|
|
1
|
+
const o = `.marz-input-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.marz-input-label{font-weight:600;font-size:14px;color:var(--text, #3b3b3b);font-family:Inter,sans-serif}.marz-input{display:inline-block;cursor:text;border:0;border-radius:var(--rounded);font-weight:500;line-height:1.5;width:100%;transition:all .1s;background-color:var(--bg-element, rgba(0, 0, 0, .02));color:var(--text, #3b3b3b);border:var(--secondary, #ababab) 1px solid;outline:none;box-sizing:border-box;font-family:Inter,sans-serif;resize:vertical;padding:10px;font-size:14px}textarea.marz-input{min-height:80px}.marz-input:disabled{opacity:.5;cursor:not-allowed}.marz-input:focus,.marz-input:active,.marz-input:hover:not(:disabled){border:var(--primary, #2b2b2b) 1px solid}
|
|
2
2
|
`, n = new CSSStyleSheet();
|
|
3
3
|
n.replaceSync(`:host {
|
|
4
4
|
display: block;
|
|
5
5
|
width: 100%;
|
|
6
|
-
margin-bottom: var(--form-element-gap,
|
|
6
|
+
margin-bottom: var(--form-element-gap, 12px);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
${o}`);
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
const s = `.marz-sidepanel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--primary-rgb),.1);z-index:1000;display:flex;justify-content:flex-end;align-items:stretch;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.marz-sidepanel{width:90%;max-width:600px;height:100%;background-color:var(--bg);border-left:1px solid var(--bg-element-2);display:flex;flex-direction:column;animation:marz-slideIn .3s ease-out;overflow-y:auto;box-shadow:-4px 0 12px #0000001a}.marz-sidepanel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--safe-padding);border-bottom:1px solid var(--bg-element-2);flex-shrink:0}.marz-sidepanel-header h2{margin:0;color:var(--heading)}.marz-sidepanel-content{flex:1;padding:var(--safe-padding);display:flex;flex-direction:column;gap:var(--small-padding)}.marz-sidepanel-actions{display:flex;gap:var(--small-padding);margin-top:var(--safe-padding);
|
|
1
|
+
const s = `.marz-sidepanel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--primary-rgb),.1);z-index:1000;display:flex;justify-content:flex-end;align-items:stretch;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.marz-sidepanel{width:90%;max-width:600px;height:100%;background-color:var(--bg);border-left:1px solid var(--bg-element-2);display:flex;flex-direction:column;animation:marz-slideIn .3s ease-out;overflow-y:auto;box-shadow:-4px 0 12px #0000001a}.marz-sidepanel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--safe-padding);border-bottom:1px solid var(--bg-element-2);flex-shrink:0}.marz-sidepanel-header h2{margin:0;color:var(--heading)}.marz-sidepanel-content{flex:1;padding:var(--safe-padding);display:flex;flex-direction:column;gap:var(--small-padding)}.marz-sidepanel-actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:var(--small-padding);margin-top:var(--safe-padding);width:100%}.marz-sidepanel-actions ::slotted(marz-button),.marz-sidepanel-actions marz-button{flex:0 0 auto;width:auto}@keyframes marz-slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@media only screen and (max-width: 48em){.marz-sidepanel{width:90%}.marz-sidepanel-actions{flex-direction:column}.marz-sidepanel-actions ::slotted(marz-button),.marz-sidepanel-actions marz-button{flex:1 1 100%;width:100%}}@media only screen and (min-width: 48em){.marz-sidepanel{max-width:600px}}
|
|
2
|
+
`, l = `.action-buttons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:var(--small-padding, 12px);width:100%;gap:4px}.action-buttons marz-button{flex:0 0 auto;width:auto}@media only screen and (max-width: 48em){.action-buttons{display:flex;flex-direction:column}.action-buttons marz-button{flex:1 1 100%;width:100%}}
|
|
2
3
|
`, n = new CSSStyleSheet();
|
|
3
4
|
n.replaceSync(s);
|
|
4
|
-
|
|
5
|
+
const a = new CSSStyleSheet();
|
|
6
|
+
a.replaceSync(l);
|
|
7
|
+
class o extends HTMLElement {
|
|
5
8
|
constructor() {
|
|
6
|
-
super(), this.attachShadow({ mode: "open" }), this.overlay = document.createElement("div"), this.overlay.className = "marz-sidepanel-overlay", this.overlay.style.display = "none", this.panel = document.createElement("div"), this.panel.className = "marz-sidepanel", this.header = document.createElement("div"), this.header.className = "marz-sidepanel-header", this.titleElement = document.createElement("h2"), this.titleElement.textContent = "Settings", this.closeButton = document.createElement("button"), this.closeButton.
|
|
9
|
+
super(), this.attachShadow({ mode: "open" }), this.overlay = document.createElement("div"), this.overlay.className = "marz-sidepanel-overlay", this.overlay.style.display = "none", this.panel = document.createElement("div"), this.panel.className = "marz-sidepanel", this.header = document.createElement("div"), this.header.className = "marz-sidepanel-header", this.titleElement = document.createElement("h2"), this.titleElement.textContent = "Settings", this.closeButton = document.createElement("marz-button"), this.closeButton.setAttribute("label", "✕"), this.closeButton.setAttribute("secondary", ""), this.closeButton.setAttribute("no-outline", ""), this.closeButton.setAttribute("size", "small"), this.closeButton.setAttribute("aria-label", "Close"), this.header.appendChild(this.titleElement), this.header.appendChild(this.closeButton);
|
|
7
10
|
const e = document.createElement("div");
|
|
8
11
|
e.className = "marz-sidepanel-content", this.contentSlot = document.createElement("slot"), this.contentSlot.name = "content", e.appendChild(this.contentSlot);
|
|
9
12
|
const t = document.createElement("div");
|
|
10
|
-
t.
|
|
13
|
+
t.classList.add("marz-sidepanel-actions", "action-buttons"), this.actionsSlot = document.createElement("slot"), this.actionsSlot.name = "actions", t.appendChild(this.actionsSlot), e.appendChild(t), this.panel.appendChild(this.header), this.panel.appendChild(e), this.overlay.appendChild(this.panel), this.shadowRoot.adoptedStyleSheets = [n, a], this.shadowRoot.appendChild(this.overlay), this.closeButton.addEventListener("click", () => this.close()), this.overlay.addEventListener("click", (i) => {
|
|
11
14
|
i.target === this.overlay && this.close();
|
|
12
15
|
}), document.addEventListener("keydown", (i) => {
|
|
13
16
|
i.key === "Escape" && this.isOpen && this.close();
|
|
@@ -50,7 +53,7 @@ class a extends HTMLElement {
|
|
|
50
53
|
}));
|
|
51
54
|
}
|
|
52
55
|
}
|
|
53
|
-
customElements.get("marz-sidepanel") || customElements.define("marz-sidepanel",
|
|
56
|
+
customElements.get("marz-sidepanel") || customElements.define("marz-sidepanel", o);
|
|
54
57
|
export {
|
|
55
|
-
|
|
58
|
+
o as MarzSidepanel
|
|
56
59
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -19,10 +19,6 @@ export declare class MarzSidepanel extends HTMLElement {
|
|
|
19
19
|
close(): void;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
/**
|
|
23
|
-
* Marz Sidepanel Web Component
|
|
24
|
-
* A framework-agnostic modal sidepanel component with slide-in animation
|
|
25
|
-
*/
|
|
26
22
|
export declare interface MarzSidepanelProps {
|
|
27
23
|
isOpen?: boolean;
|
|
28
24
|
title?: string;
|
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import "./styles/style.css";
|
|
|
2
2
|
import { MarzButton as y } from "./components/button/index.js";
|
|
3
3
|
import { MarzInput as S } from "./components/input/index.js";
|
|
4
4
|
import { MarzSidepanel as E } from "./components/sidepanel/index.js";
|
|
5
|
-
const h = `.pagination-container{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0;font-family:Inter,sans-serif}.pagination-button{min-width:40px;height:40px;padding:8px 12px;border:1px solid var(--
|
|
5
|
+
const h = `.pagination-container{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0;font-family:Inter,sans-serif}.pagination-button{min-width:40px;height:40px;padding:8px 12px;border:1px solid var(--primary);background-color:var(--bg);color:var(--text);cursor:pointer;border-radius:4px;font-size:14px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-button:hover:not(:disabled){background-color:var(--primary);border-color:var(--secondary)}.pagination-button:disabled{opacity:.4;cursor:not-allowed}.pagination-button.active{background-color:var(--primary);color:var(--primary-btn-text);border-color:var(--primary);font-weight:600}.pagination-ellipsis{padding:8px 4px;color:var(--text);opacity:.6}
|
|
6
6
|
`, c = new CSSStyleSheet();
|
|
7
7
|
c.replaceSync(h);
|
|
8
8
|
class g extends HTMLElement {
|