@gjsify/adwaita-web 0.3.15 → 0.3.17
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/package.json +4 -4
- package/src/elements/adw-card.js +1 -10
- package/src/elements/adw-combo-row.js +1 -64
- package/src/elements/adw-header-bar.js +1 -38
- package/src/elements/adw-overlay-split-view.js +1 -105
- package/src/elements/adw-preferences-group.js +1 -25
- package/src/elements/adw-spin-row.js +1 -110
- package/src/elements/adw-switch-row.js +1 -52
- package/src/elements/adw-toast-overlay.js +1 -32
- package/src/elements/adw-window.js +1 -13
- package/src/index.js +1 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gjsify/adwaita-web",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.17",
|
|
4
4
|
"description": "Adwaita/Libadwaita web components for browser targets",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"build:types": "tsc"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@gjsify/adwaita-fonts": "^0.3.
|
|
37
|
-
"@gjsify/adwaita-icons": "^0.3.
|
|
36
|
+
"@gjsify/adwaita-fonts": "^0.3.17",
|
|
37
|
+
"@gjsify/adwaita-icons": "^0.3.17"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@gjsify/cli": "^0.3.
|
|
40
|
+
"@gjsify/cli": "^0.3.17",
|
|
41
41
|
"sass": "^1.99.0",
|
|
42
42
|
"typescript": "^6.0.3"
|
|
43
43
|
}
|
package/src/elements/adw-card.js
CHANGED
|
@@ -1,10 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwCard = class extends HTMLElement {
|
|
3
|
-
connectedCallback() {
|
|
4
|
-
this.classList.add("adw-card");
|
|
5
|
-
}
|
|
6
|
-
};
|
|
7
|
-
customElements.define("adw-card", AdwCard);
|
|
8
|
-
|
|
9
|
-
//#endregion
|
|
10
|
-
export { AdwCard };
|
|
1
|
+
var e=class extends HTMLElement{connectedCallback(){this.classList.add(`adw-card`)}};customElements.define(`adw-card`,e);export{e as AdwCard};
|
|
@@ -1,64 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwComboRow = class extends HTMLElement {
|
|
3
|
-
_select;
|
|
4
|
-
_valueEl;
|
|
5
|
-
_items = [];
|
|
6
|
-
_initialized = false;
|
|
7
|
-
static get observedAttributes() {
|
|
8
|
-
return ["selected"];
|
|
9
|
-
}
|
|
10
|
-
get selected() {
|
|
11
|
-
return this._select ? this._select.selectedIndex : parseInt(this.getAttribute("selected") || "0", 10);
|
|
12
|
-
}
|
|
13
|
-
set selected(value) {
|
|
14
|
-
this.setAttribute("selected", String(value));
|
|
15
|
-
}
|
|
16
|
-
connectedCallback() {
|
|
17
|
-
if (this._initialized) return;
|
|
18
|
-
this._initialized = true;
|
|
19
|
-
const title = this.getAttribute("title") || "";
|
|
20
|
-
this._items = JSON.parse(this.getAttribute("items") || "[]");
|
|
21
|
-
const selectedIdx = parseInt(this.getAttribute("selected") || "0", 10);
|
|
22
|
-
const titleEl = document.createElement("span");
|
|
23
|
-
titleEl.className = "adw-row-title";
|
|
24
|
-
titleEl.textContent = title;
|
|
25
|
-
const valueEl = document.createElement("span");
|
|
26
|
-
valueEl.className = "adw-row-value";
|
|
27
|
-
valueEl.textContent = this._items[selectedIdx] ?? "";
|
|
28
|
-
this._valueEl = valueEl;
|
|
29
|
-
const select = document.createElement("select");
|
|
30
|
-
this._items.forEach((item, i) => {
|
|
31
|
-
const option = document.createElement("option");
|
|
32
|
-
option.value = String(i);
|
|
33
|
-
option.textContent = item;
|
|
34
|
-
if (i === selectedIdx) option.selected = true;
|
|
35
|
-
select.appendChild(option);
|
|
36
|
-
});
|
|
37
|
-
this.appendChild(titleEl);
|
|
38
|
-
this.appendChild(valueEl);
|
|
39
|
-
this.appendChild(select);
|
|
40
|
-
this._select = select;
|
|
41
|
-
this._select.addEventListener("change", () => {
|
|
42
|
-
const idx = this._select.selectedIndex;
|
|
43
|
-
this._valueEl.textContent = this._items[idx] ?? "";
|
|
44
|
-
this.setAttribute("selected", String(idx));
|
|
45
|
-
this.dispatchEvent(new CustomEvent("notify::selected", {
|
|
46
|
-
bubbles: true,
|
|
47
|
-
detail: { selected: idx }
|
|
48
|
-
}));
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
attributeChangedCallback(name, _old, value) {
|
|
52
|
-
if (name === "selected" && this._select) {
|
|
53
|
-
const idx = parseInt(value || "0", 10);
|
|
54
|
-
this._select.selectedIndex = idx;
|
|
55
|
-
if (this._valueEl) {
|
|
56
|
-
this._valueEl.textContent = this._items[idx] ?? "";
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
customElements.define("adw-combo-row", AdwComboRow);
|
|
62
|
-
|
|
63
|
-
//#endregion
|
|
64
|
-
export { AdwComboRow };
|
|
1
|
+
var e=class extends HTMLElement{_select;_valueEl;_items=[];_initialized=!1;static get observedAttributes(){return[`selected`]}get selected(){return this._select?this._select.selectedIndex:parseInt(this.getAttribute(`selected`)||`0`,10)}set selected(e){this.setAttribute(`selected`,String(e))}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`title`)||``;this._items=JSON.parse(this.getAttribute(`items`)||`[]`);let t=parseInt(this.getAttribute(`selected`)||`0`,10),n=document.createElement(`span`);n.className=`adw-row-title`,n.textContent=e;let r=document.createElement(`span`);r.className=`adw-row-value`,r.textContent=this._items[t]??``,this._valueEl=r;let i=document.createElement(`select`);this._items.forEach((e,n)=>{let r=document.createElement(`option`);r.value=String(n),r.textContent=e,n===t&&(r.selected=!0),i.appendChild(r)}),this.appendChild(n),this.appendChild(r),this.appendChild(i),this._select=i,this._select.addEventListener(`change`,()=>{let e=this._select.selectedIndex;this._valueEl.textContent=this._items[e]??``,this.setAttribute(`selected`,String(e)),this.dispatchEvent(new CustomEvent(`notify::selected`,{bubbles:!0,detail:{selected:e}}))})}attributeChangedCallback(e,t,n){if(e===`selected`&&this._select){let e=parseInt(n||`0`,10);this._select.selectedIndex=e,this._valueEl&&(this._valueEl.textContent=this._items[e]??``)}}};customElements.define(`adw-combo-row`,e);export{e as AdwComboRow};
|
|
@@ -1,38 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwHeaderBar = class extends HTMLElement {
|
|
3
|
-
_initialized = false;
|
|
4
|
-
_startEl = null;
|
|
5
|
-
_endEl = null;
|
|
6
|
-
/** The start (left) section container — append buttons/widgets here. */
|
|
7
|
-
get startSection() {
|
|
8
|
-
return this._startEl;
|
|
9
|
-
}
|
|
10
|
-
/** The end (right) section container — append buttons/widgets here. */
|
|
11
|
-
get endSection() {
|
|
12
|
-
return this._endEl;
|
|
13
|
-
}
|
|
14
|
-
connectedCallback() {
|
|
15
|
-
if (this._initialized) return;
|
|
16
|
-
this._initialized = true;
|
|
17
|
-
const title = this.getAttribute("title") || "";
|
|
18
|
-
const startChildren = Array.from(this.querySelectorAll(":scope > [slot=\"start\"]"));
|
|
19
|
-
const endChildren = Array.from(this.querySelectorAll(":scope > [slot=\"end\"]"));
|
|
20
|
-
this._startEl = document.createElement("div");
|
|
21
|
-
this._startEl.className = "adw-header-bar-start";
|
|
22
|
-
for (const child of startChildren) this._startEl.appendChild(child);
|
|
23
|
-
const center = document.createElement("div");
|
|
24
|
-
center.className = "adw-header-bar-center";
|
|
25
|
-
const titleEl = document.createElement("span");
|
|
26
|
-
titleEl.className = "adw-header-bar-title";
|
|
27
|
-
titleEl.textContent = title;
|
|
28
|
-
center.appendChild(titleEl);
|
|
29
|
-
this._endEl = document.createElement("div");
|
|
30
|
-
this._endEl.className = "adw-header-bar-end";
|
|
31
|
-
for (const child of endChildren) this._endEl.appendChild(child);
|
|
32
|
-
this.replaceChildren(this._startEl, center, this._endEl);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
customElements.define("adw-header-bar", AdwHeaderBar);
|
|
36
|
-
|
|
37
|
-
//#endregion
|
|
38
|
-
export { AdwHeaderBar };
|
|
1
|
+
var e=class extends HTMLElement{_initialized=!1;_startEl=null;_endEl=null;get startSection(){return this._startEl}get endSection(){return this._endEl}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`title`)||``,t=Array.from(this.querySelectorAll(`:scope > [slot="start"]`)),n=Array.from(this.querySelectorAll(`:scope > [slot="end"]`));this._startEl=document.createElement(`div`),this._startEl.className=`adw-header-bar-start`;for(let e of t)this._startEl.appendChild(e);let r=document.createElement(`div`);r.className=`adw-header-bar-center`;let i=document.createElement(`span`);i.className=`adw-header-bar-title`,i.textContent=e,r.appendChild(i),this._endEl=document.createElement(`div`),this._endEl.className=`adw-header-bar-end`;for(let e of n)this._endEl.appendChild(e);this.replaceChildren(this._startEl,r,this._endEl)}};customElements.define(`adw-header-bar`,e);export{e as AdwHeaderBar};
|
|
@@ -1,105 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwOverlaySplitView = class extends HTMLElement {
|
|
3
|
-
_initialized = false;
|
|
4
|
-
_sidebarEl;
|
|
5
|
-
_contentEl;
|
|
6
|
-
_backdropEl;
|
|
7
|
-
static get observedAttributes() {
|
|
8
|
-
return [
|
|
9
|
-
"show-sidebar",
|
|
10
|
-
"collapsed",
|
|
11
|
-
"sidebar-position",
|
|
12
|
-
"min-sidebar-width",
|
|
13
|
-
"max-sidebar-width",
|
|
14
|
-
"sidebar-width-fraction"
|
|
15
|
-
];
|
|
16
|
-
}
|
|
17
|
-
get showSidebar() {
|
|
18
|
-
return this.hasAttribute("show-sidebar");
|
|
19
|
-
}
|
|
20
|
-
set showSidebar(v) {
|
|
21
|
-
if (v) this.setAttribute("show-sidebar", "");
|
|
22
|
-
else this.removeAttribute("show-sidebar");
|
|
23
|
-
}
|
|
24
|
-
get collapsed() {
|
|
25
|
-
return this.hasAttribute("collapsed");
|
|
26
|
-
}
|
|
27
|
-
set collapsed(v) {
|
|
28
|
-
if (v) this.setAttribute("collapsed", "");
|
|
29
|
-
else this.removeAttribute("collapsed");
|
|
30
|
-
}
|
|
31
|
-
get minSidebarWidth() {
|
|
32
|
-
return parseFloat(this.getAttribute("min-sidebar-width") || "280");
|
|
33
|
-
}
|
|
34
|
-
get maxSidebarWidth() {
|
|
35
|
-
return parseFloat(this.getAttribute("max-sidebar-width") || "400");
|
|
36
|
-
}
|
|
37
|
-
get sidebarWidthFraction() {
|
|
38
|
-
return parseFloat(this.getAttribute("sidebar-width-fraction") || "0.30");
|
|
39
|
-
}
|
|
40
|
-
connectedCallback() {
|
|
41
|
-
if (this._initialized) return;
|
|
42
|
-
this._initialized = true;
|
|
43
|
-
const sidebarChildren = Array.from(this.querySelectorAll("[slot=\"sidebar\"]"));
|
|
44
|
-
const contentChildren = Array.from(this.querySelectorAll("[slot=\"content\"]"));
|
|
45
|
-
const unslotted = Array.from(this.childNodes).filter((n) => !sidebarChildren.includes(n) && !contentChildren.includes(n));
|
|
46
|
-
this.replaceChildren();
|
|
47
|
-
this._sidebarEl = document.createElement("div");
|
|
48
|
-
this._sidebarEl.className = "adw-osv-sidebar";
|
|
49
|
-
sidebarChildren.forEach((c) => this._sidebarEl.appendChild(c));
|
|
50
|
-
this._contentEl = document.createElement("div");
|
|
51
|
-
this._contentEl.className = "adw-osv-content";
|
|
52
|
-
contentChildren.forEach((c) => this._contentEl.appendChild(c));
|
|
53
|
-
unslotted.forEach((c) => this._contentEl.appendChild(c));
|
|
54
|
-
this._backdropEl = document.createElement("div");
|
|
55
|
-
this._backdropEl.className = "adw-osv-backdrop";
|
|
56
|
-
this._backdropEl.addEventListener("click", () => this.hideSidebar());
|
|
57
|
-
this.append(this._sidebarEl, this._contentEl, this._backdropEl);
|
|
58
|
-
this._syncClasses();
|
|
59
|
-
this._syncSidebarWidth();
|
|
60
|
-
}
|
|
61
|
-
attributeChangedCallback(_name, _old, _val) {
|
|
62
|
-
if (!this._initialized) return;
|
|
63
|
-
this._syncClasses();
|
|
64
|
-
if (_name === "min-sidebar-width" || _name === "max-sidebar-width" || _name === "sidebar-width-fraction") {
|
|
65
|
-
this._syncSidebarWidth();
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
openSidebar() {
|
|
69
|
-
this.showSidebar = true;
|
|
70
|
-
this.dispatchEvent(new CustomEvent("sidebar-toggled", { detail: { isVisible: true } }));
|
|
71
|
-
}
|
|
72
|
-
hideSidebar() {
|
|
73
|
-
this.showSidebar = false;
|
|
74
|
-
this.dispatchEvent(new CustomEvent("sidebar-toggled", { detail: { isVisible: false } }));
|
|
75
|
-
}
|
|
76
|
-
toggleSidebar() {
|
|
77
|
-
this.showSidebar = !this.showSidebar;
|
|
78
|
-
this.dispatchEvent(new CustomEvent("sidebar-toggled", { detail: { isVisible: this.showSidebar } }));
|
|
79
|
-
}
|
|
80
|
-
_syncClasses() {
|
|
81
|
-
this.classList.toggle("collapsed", this.collapsed);
|
|
82
|
-
this.classList.toggle("show-sidebar", this.showSidebar);
|
|
83
|
-
const pos = this.getAttribute("sidebar-position") || "start";
|
|
84
|
-
this.classList.toggle("sidebar-start", pos === "start");
|
|
85
|
-
this.classList.toggle("sidebar-end", pos === "end");
|
|
86
|
-
if (this._sidebarEl && !this.collapsed) {
|
|
87
|
-
if (!this.showSidebar) {
|
|
88
|
-
const w = this._sidebarEl.offsetWidth;
|
|
89
|
-
this._sidebarEl.style.marginRight = `-${w}px`;
|
|
90
|
-
} else {
|
|
91
|
-
this._sidebarEl.style.marginRight = "";
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
_syncSidebarWidth() {
|
|
96
|
-
if (!this._sidebarEl) return;
|
|
97
|
-
this._sidebarEl.style.minWidth = `${this.minSidebarWidth}px`;
|
|
98
|
-
this._sidebarEl.style.maxWidth = `${this.maxSidebarWidth}px`;
|
|
99
|
-
this._sidebarEl.style.width = `${this.sidebarWidthFraction * 100}%`;
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
customElements.define("adw-overlay-split-view", AdwOverlaySplitView);
|
|
103
|
-
|
|
104
|
-
//#endregion
|
|
105
|
-
export { AdwOverlaySplitView };
|
|
1
|
+
var e=class extends HTMLElement{_initialized=!1;_sidebarEl;_contentEl;_backdropEl;static get observedAttributes(){return[`show-sidebar`,`collapsed`,`sidebar-position`,`min-sidebar-width`,`max-sidebar-width`,`sidebar-width-fraction`]}get showSidebar(){return this.hasAttribute(`show-sidebar`)}set showSidebar(e){e?this.setAttribute(`show-sidebar`,``):this.removeAttribute(`show-sidebar`)}get collapsed(){return this.hasAttribute(`collapsed`)}set collapsed(e){e?this.setAttribute(`collapsed`,``):this.removeAttribute(`collapsed`)}get minSidebarWidth(){return parseFloat(this.getAttribute(`min-sidebar-width`)||`280`)}get maxSidebarWidth(){return parseFloat(this.getAttribute(`max-sidebar-width`)||`400`)}get sidebarWidthFraction(){return parseFloat(this.getAttribute(`sidebar-width-fraction`)||`0.30`)}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=Array.from(this.querySelectorAll(`[slot="sidebar"]`)),t=Array.from(this.querySelectorAll(`[slot="content"]`)),n=Array.from(this.childNodes).filter(n=>!e.includes(n)&&!t.includes(n));this.replaceChildren(),this._sidebarEl=document.createElement(`div`),this._sidebarEl.className=`adw-osv-sidebar`,e.forEach(e=>this._sidebarEl.appendChild(e)),this._contentEl=document.createElement(`div`),this._contentEl.className=`adw-osv-content`,t.forEach(e=>this._contentEl.appendChild(e)),n.forEach(e=>this._contentEl.appendChild(e)),this._backdropEl=document.createElement(`div`),this._backdropEl.className=`adw-osv-backdrop`,this._backdropEl.addEventListener(`click`,()=>this.hideSidebar()),this.append(this._sidebarEl,this._contentEl,this._backdropEl),this._syncClasses(),this._syncSidebarWidth()}attributeChangedCallback(e,t,n){this._initialized&&(this._syncClasses(),(e===`min-sidebar-width`||e===`max-sidebar-width`||e===`sidebar-width-fraction`)&&this._syncSidebarWidth())}openSidebar(){this.showSidebar=!0,this.dispatchEvent(new CustomEvent(`sidebar-toggled`,{detail:{isVisible:!0}}))}hideSidebar(){this.showSidebar=!1,this.dispatchEvent(new CustomEvent(`sidebar-toggled`,{detail:{isVisible:!1}}))}toggleSidebar(){this.showSidebar=!this.showSidebar,this.dispatchEvent(new CustomEvent(`sidebar-toggled`,{detail:{isVisible:this.showSidebar}}))}_syncClasses(){this.classList.toggle(`collapsed`,this.collapsed),this.classList.toggle(`show-sidebar`,this.showSidebar);let e=this.getAttribute(`sidebar-position`)||`start`;if(this.classList.toggle(`sidebar-start`,e===`start`),this.classList.toggle(`sidebar-end`,e===`end`),this._sidebarEl&&!this.collapsed)if(this.showSidebar)this._sidebarEl.style.marginRight=``;else{let e=this._sidebarEl.offsetWidth;this._sidebarEl.style.marginRight=`-${e}px`}}_syncSidebarWidth(){this._sidebarEl&&(this._sidebarEl.style.minWidth=`${this.minSidebarWidth}px`,this._sidebarEl.style.maxWidth=`${this.maxSidebarWidth}px`,this._sidebarEl.style.width=`${this.sidebarWidthFraction*100}%`)}};customElements.define(`adw-overlay-split-view`,e);export{e as AdwOverlaySplitView};
|
|
@@ -1,25 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwPreferencesGroup = class extends HTMLElement {
|
|
3
|
-
_initialized = false;
|
|
4
|
-
connectedCallback() {
|
|
5
|
-
if (this._initialized) return;
|
|
6
|
-
this._initialized = true;
|
|
7
|
-
const title = this.getAttribute("title") || "";
|
|
8
|
-
const children = Array.from(this.childNodes);
|
|
9
|
-
const header = document.createElement("div");
|
|
10
|
-
header.className = "adw-preferences-group-header";
|
|
11
|
-
const titleEl = document.createElement("span");
|
|
12
|
-
titleEl.className = "adw-preferences-group-title";
|
|
13
|
-
titleEl.textContent = title;
|
|
14
|
-
header.appendChild(titleEl);
|
|
15
|
-
const listbox = document.createElement("div");
|
|
16
|
-
listbox.className = "adw-preferences-group-listbox";
|
|
17
|
-
children.forEach((child) => listbox.appendChild(child));
|
|
18
|
-
this.appendChild(header);
|
|
19
|
-
this.appendChild(listbox);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
customElements.define("adw-preferences-group", AdwPreferencesGroup);
|
|
23
|
-
|
|
24
|
-
//#endregion
|
|
25
|
-
export { AdwPreferencesGroup };
|
|
1
|
+
var e=class extends HTMLElement{_initialized=!1;connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`title`)||``,t=Array.from(this.childNodes),n=document.createElement(`div`);n.className=`adw-preferences-group-header`;let r=document.createElement(`span`);r.className=`adw-preferences-group-title`,r.textContent=e,n.appendChild(r);let i=document.createElement(`div`);i.className=`adw-preferences-group-listbox`,t.forEach(e=>i.appendChild(e)),this.appendChild(n),this.appendChild(i)}};customElements.define(`adw-preferences-group`,e);export{e as AdwPreferencesGroup};
|
|
@@ -1,110 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwSpinRow = class extends HTMLElement {
|
|
3
|
-
_input;
|
|
4
|
-
_min = 0;
|
|
5
|
-
_max = 100;
|
|
6
|
-
_step = 1;
|
|
7
|
-
_value = 0;
|
|
8
|
-
_initialized = false;
|
|
9
|
-
static get observedAttributes() {
|
|
10
|
-
return [
|
|
11
|
-
"value",
|
|
12
|
-
"min",
|
|
13
|
-
"max",
|
|
14
|
-
"step"
|
|
15
|
-
];
|
|
16
|
-
}
|
|
17
|
-
get value() {
|
|
18
|
-
return this._value;
|
|
19
|
-
}
|
|
20
|
-
set value(v) {
|
|
21
|
-
const clamped = Math.min(this._max, Math.max(this._min, v));
|
|
22
|
-
const decimals = this._countDecimals(this._step);
|
|
23
|
-
this._value = parseFloat(clamped.toFixed(decimals));
|
|
24
|
-
if (this._input) {
|
|
25
|
-
this._input.value = this._formatValue(this._value);
|
|
26
|
-
}
|
|
27
|
-
this.setAttribute("value", String(this._value));
|
|
28
|
-
}
|
|
29
|
-
connectedCallback() {
|
|
30
|
-
if (this._initialized) return;
|
|
31
|
-
this._initialized = true;
|
|
32
|
-
const title = this.getAttribute("title") || "";
|
|
33
|
-
this._min = parseFloat(this.getAttribute("min") || "0");
|
|
34
|
-
this._max = parseFloat(this.getAttribute("max") || "100");
|
|
35
|
-
this._step = parseFloat(this.getAttribute("step") || "1");
|
|
36
|
-
this._value = parseFloat(this.getAttribute("value") || String(this._min));
|
|
37
|
-
const titleEl = document.createElement("span");
|
|
38
|
-
titleEl.className = "adw-row-title";
|
|
39
|
-
titleEl.textContent = title;
|
|
40
|
-
const control = document.createElement("div");
|
|
41
|
-
control.className = "adw-spin-control";
|
|
42
|
-
const decBtn = document.createElement("button");
|
|
43
|
-
decBtn.className = "adw-spin-dec";
|
|
44
|
-
decBtn.textContent = "−";
|
|
45
|
-
decBtn.addEventListener("click", () => this._adjust(-this._step));
|
|
46
|
-
const input = document.createElement("input");
|
|
47
|
-
input.type = "text";
|
|
48
|
-
input.value = this._formatValue(this._value);
|
|
49
|
-
input.addEventListener("change", () => {
|
|
50
|
-
const parsed = parseFloat(input.value);
|
|
51
|
-
if (!isNaN(parsed)) {
|
|
52
|
-
this.value = parsed;
|
|
53
|
-
this._emitChange();
|
|
54
|
-
} else {
|
|
55
|
-
input.value = this._formatValue(this._value);
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
const incBtn = document.createElement("button");
|
|
59
|
-
incBtn.className = "adw-spin-inc";
|
|
60
|
-
incBtn.textContent = "+";
|
|
61
|
-
incBtn.addEventListener("click", () => this._adjust(this._step));
|
|
62
|
-
control.append(decBtn, input, incBtn);
|
|
63
|
-
this.append(titleEl, control);
|
|
64
|
-
this._input = input;
|
|
65
|
-
}
|
|
66
|
-
attributeChangedCallback(name, _old, val) {
|
|
67
|
-
if (!this._initialized) return;
|
|
68
|
-
const num = parseFloat(val || "0");
|
|
69
|
-
switch (name) {
|
|
70
|
-
case "value":
|
|
71
|
-
if (num !== this._value) {
|
|
72
|
-
this._value = Math.min(this._max, Math.max(this._min, num));
|
|
73
|
-
this._input.value = this._formatValue(this._value);
|
|
74
|
-
}
|
|
75
|
-
break;
|
|
76
|
-
case "min":
|
|
77
|
-
this._min = num;
|
|
78
|
-
break;
|
|
79
|
-
case "max":
|
|
80
|
-
this._max = num;
|
|
81
|
-
break;
|
|
82
|
-
case "step":
|
|
83
|
-
this._step = num;
|
|
84
|
-
break;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
_adjust(delta) {
|
|
88
|
-
this.value = this._value + delta;
|
|
89
|
-
this._emitChange();
|
|
90
|
-
}
|
|
91
|
-
_emitChange() {
|
|
92
|
-
this.dispatchEvent(new CustomEvent("notify::value", {
|
|
93
|
-
bubbles: true,
|
|
94
|
-
detail: { value: this._value }
|
|
95
|
-
}));
|
|
96
|
-
}
|
|
97
|
-
_countDecimals(n) {
|
|
98
|
-
const s = String(n);
|
|
99
|
-
const dot = s.indexOf(".");
|
|
100
|
-
return dot === -1 ? 0 : s.length - dot - 1;
|
|
101
|
-
}
|
|
102
|
-
_formatValue(v) {
|
|
103
|
-
const decimals = this._countDecimals(this._step);
|
|
104
|
-
return decimals > 0 ? v.toFixed(decimals) : String(v);
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
customElements.define("adw-spin-row", AdwSpinRow);
|
|
108
|
-
|
|
109
|
-
//#endregion
|
|
110
|
-
export { AdwSpinRow };
|
|
1
|
+
var e=class extends HTMLElement{_input;_min=0;_max=100;_step=1;_value=0;_initialized=!1;static get observedAttributes(){return[`value`,`min`,`max`,`step`]}get value(){return this._value}set value(e){let t=Math.min(this._max,Math.max(this._min,e)),n=this._countDecimals(this._step);this._value=parseFloat(t.toFixed(n)),this._input&&(this._input.value=this._formatValue(this._value)),this.setAttribute(`value`,String(this._value))}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`title`)||``;this._min=parseFloat(this.getAttribute(`min`)||`0`),this._max=parseFloat(this.getAttribute(`max`)||`100`),this._step=parseFloat(this.getAttribute(`step`)||`1`),this._value=parseFloat(this.getAttribute(`value`)||String(this._min));let t=document.createElement(`span`);t.className=`adw-row-title`,t.textContent=e;let n=document.createElement(`div`);n.className=`adw-spin-control`;let r=document.createElement(`button`);r.className=`adw-spin-dec`,r.textContent=`−`,r.addEventListener(`click`,()=>this._adjust(-this._step));let i=document.createElement(`input`);i.type=`text`,i.value=this._formatValue(this._value),i.addEventListener(`change`,()=>{let e=parseFloat(i.value);isNaN(e)?i.value=this._formatValue(this._value):(this.value=e,this._emitChange())});let a=document.createElement(`button`);a.className=`adw-spin-inc`,a.textContent=`+`,a.addEventListener(`click`,()=>this._adjust(this._step)),n.append(r,i,a),this.append(t,n),this._input=i}attributeChangedCallback(e,t,n){if(!this._initialized)return;let r=parseFloat(n||`0`);switch(e){case`value`:r!==this._value&&(this._value=Math.min(this._max,Math.max(this._min,r)),this._input.value=this._formatValue(this._value));break;case`min`:this._min=r;break;case`max`:this._max=r;break;case`step`:this._step=r;break}}_adjust(e){this.value=this._value+e,this._emitChange()}_emitChange(){this.dispatchEvent(new CustomEvent(`notify::value`,{bubbles:!0,detail:{value:this._value}}))}_countDecimals(e){let t=String(e),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}_formatValue(e){let t=this._countDecimals(this._step);return t>0?e.toFixed(t):String(e)}};customElements.define(`adw-spin-row`,e);export{e as AdwSpinRow};
|
|
@@ -1,52 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwSwitchRow = class extends HTMLElement {
|
|
3
|
-
_checkbox;
|
|
4
|
-
_initialized = false;
|
|
5
|
-
static get observedAttributes() {
|
|
6
|
-
return ["active"];
|
|
7
|
-
}
|
|
8
|
-
get active() {
|
|
9
|
-
return this.hasAttribute("active");
|
|
10
|
-
}
|
|
11
|
-
set active(value) {
|
|
12
|
-
if (value) this.setAttribute("active", "");
|
|
13
|
-
else this.removeAttribute("active");
|
|
14
|
-
}
|
|
15
|
-
connectedCallback() {
|
|
16
|
-
if (this._initialized) return;
|
|
17
|
-
this._initialized = true;
|
|
18
|
-
const title = this.getAttribute("title") || "";
|
|
19
|
-
const checked = this.hasAttribute("active");
|
|
20
|
-
const titleEl = document.createElement("span");
|
|
21
|
-
titleEl.className = "adw-row-title";
|
|
22
|
-
titleEl.textContent = title;
|
|
23
|
-
const label = document.createElement("label");
|
|
24
|
-
label.className = "adw-switch";
|
|
25
|
-
const input = document.createElement("input");
|
|
26
|
-
input.type = "checkbox";
|
|
27
|
-
input.checked = checked;
|
|
28
|
-
const slider = document.createElement("span");
|
|
29
|
-
slider.className = "adw-switch-slider";
|
|
30
|
-
label.appendChild(input);
|
|
31
|
-
label.appendChild(slider);
|
|
32
|
-
this.appendChild(titleEl);
|
|
33
|
-
this.appendChild(label);
|
|
34
|
-
this._checkbox = input;
|
|
35
|
-
this._checkbox.addEventListener("change", () => {
|
|
36
|
-
this.toggleAttribute("active", this._checkbox.checked);
|
|
37
|
-
this.dispatchEvent(new CustomEvent("notify::active", {
|
|
38
|
-
bubbles: true,
|
|
39
|
-
detail: { active: this._checkbox.checked }
|
|
40
|
-
}));
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
attributeChangedCallback(name, _old, value) {
|
|
44
|
-
if (name === "active" && this._checkbox) {
|
|
45
|
-
this._checkbox.checked = value !== null;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
customElements.define("adw-switch-row", AdwSwitchRow);
|
|
50
|
-
|
|
51
|
-
//#endregion
|
|
52
|
-
export { AdwSwitchRow };
|
|
1
|
+
var e=class extends HTMLElement{_checkbox;_initialized=!1;static get observedAttributes(){return[`active`]}get active(){return this.hasAttribute(`active`)}set active(e){e?this.setAttribute(`active`,``):this.removeAttribute(`active`)}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`title`)||``,t=this.hasAttribute(`active`),n=document.createElement(`span`);n.className=`adw-row-title`,n.textContent=e;let r=document.createElement(`label`);r.className=`adw-switch`;let i=document.createElement(`input`);i.type=`checkbox`,i.checked=t;let a=document.createElement(`span`);a.className=`adw-switch-slider`,r.appendChild(i),r.appendChild(a),this.appendChild(n),this.appendChild(r),this._checkbox=i,this._checkbox.addEventListener(`change`,()=>{this.toggleAttribute(`active`,this._checkbox.checked),this.dispatchEvent(new CustomEvent(`notify::active`,{bubbles:!0,detail:{active:this._checkbox.checked}}))})}attributeChangedCallback(e,t,n){e===`active`&&this._checkbox&&(this._checkbox.checked=n!==null)}};customElements.define(`adw-switch-row`,e);export{e as AdwSwitchRow};
|
|
@@ -1,32 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwToastOverlay = class extends HTMLElement {
|
|
3
|
-
/**
|
|
4
|
-
* Show a toast notification.
|
|
5
|
-
* @param title - The text to display.
|
|
6
|
-
* @param timeout - Time in ms before the toast auto-dismisses (default 2000).
|
|
7
|
-
*/
|
|
8
|
-
addToast(title, timeout = 2e3) {
|
|
9
|
-
const toast = document.createElement("div");
|
|
10
|
-
toast.className = "adw-toast";
|
|
11
|
-
const titleEl = document.createElement("span");
|
|
12
|
-
titleEl.className = "adw-toast-title";
|
|
13
|
-
titleEl.textContent = title;
|
|
14
|
-
toast.appendChild(titleEl);
|
|
15
|
-
this.appendChild(toast);
|
|
16
|
-
requestAnimationFrame(() => {
|
|
17
|
-
toast.classList.add("visible");
|
|
18
|
-
});
|
|
19
|
-
setTimeout(() => {
|
|
20
|
-
toast.classList.remove("visible");
|
|
21
|
-
toast.classList.add("hiding");
|
|
22
|
-
toast.addEventListener("transitionend", () => toast.remove(), { once: true });
|
|
23
|
-
setTimeout(() => {
|
|
24
|
-
if (toast.parentNode) toast.remove();
|
|
25
|
-
}, 300);
|
|
26
|
-
}, timeout);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
customElements.define("adw-toast-overlay", AdwToastOverlay);
|
|
30
|
-
|
|
31
|
-
//#endregion
|
|
32
|
-
export { AdwToastOverlay };
|
|
1
|
+
var e=class extends HTMLElement{addToast(e,t=2e3){let n=document.createElement(`div`);n.className=`adw-toast`;let r=document.createElement(`span`);r.className=`adw-toast-title`,r.textContent=e,n.appendChild(r),this.appendChild(n),requestAnimationFrame(()=>{n.classList.add(`visible`)}),setTimeout(()=>{n.classList.remove(`visible`),n.classList.add(`hiding`),n.addEventListener(`transitionend`,()=>n.remove(),{once:!0}),setTimeout(()=>{n.parentNode&&n.remove()},300)},t)}};customElements.define(`adw-toast-overlay`,e);export{e as AdwToastOverlay};
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var AdwWindow = class extends HTMLElement {
|
|
3
|
-
connectedCallback() {
|
|
4
|
-
const w = this.getAttribute("width");
|
|
5
|
-
const h = this.getAttribute("height");
|
|
6
|
-
if (w) this.style.width = `${w}px`;
|
|
7
|
-
if (h) this.style.height = `${h}px`;
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
customElements.define("adw-window", AdwWindow);
|
|
11
|
-
|
|
12
|
-
//#endregion
|
|
13
|
-
export { AdwWindow };
|
|
1
|
+
var e=class extends HTMLElement{connectedCallback(){let e=this.getAttribute(`width`),t=this.getAttribute(`height`);e&&(this.style.width=`${e}px`),t&&(this.style.height=`${t}px`)}};customElements.define(`adw-window`,e);export{e as AdwWindow};
|
package/src/index.js
CHANGED
|
@@ -1,12 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AdwWindow } from "./elements/adw-window.js";
|
|
3
|
-
import { AdwHeaderBar } from "./elements/adw-header-bar.js";
|
|
4
|
-
import { AdwPreferencesGroup } from "./elements/adw-preferences-group.js";
|
|
5
|
-
import { AdwSwitchRow } from "./elements/adw-switch-row.js";
|
|
6
|
-
import { AdwComboRow } from "./elements/adw-combo-row.js";
|
|
7
|
-
import { AdwSpinRow } from "./elements/adw-spin-row.js";
|
|
8
|
-
import { AdwToastOverlay } from "./elements/adw-toast-overlay.js";
|
|
9
|
-
import { AdwOverlaySplitView } from "./elements/adw-overlay-split-view.js";
|
|
10
|
-
import "@gjsify/adwaita-fonts";
|
|
11
|
-
|
|
12
|
-
export { AdwCard, AdwComboRow, AdwHeaderBar, AdwOverlaySplitView, AdwPreferencesGroup, AdwSpinRow, AdwSwitchRow, AdwToastOverlay, AdwWindow };
|
|
1
|
+
import{AdwCard as e}from"./elements/adw-card.js";import{AdwWindow as t}from"./elements/adw-window.js";import{AdwHeaderBar as n}from"./elements/adw-header-bar.js";import{AdwPreferencesGroup as r}from"./elements/adw-preferences-group.js";import{AdwSwitchRow as i}from"./elements/adw-switch-row.js";import{AdwComboRow as a}from"./elements/adw-combo-row.js";import{AdwSpinRow as o}from"./elements/adw-spin-row.js";import{AdwToastOverlay as s}from"./elements/adw-toast-overlay.js";import{AdwOverlaySplitView as c}from"./elements/adw-overlay-split-view.js";import"@gjsify/adwaita-fonts";export{e as AdwCard,a as AdwComboRow,n as AdwHeaderBar,c as AdwOverlaySplitView,r as AdwPreferencesGroup,o as AdwSpinRow,i as AdwSwitchRow,s as AdwToastOverlay,t as AdwWindow};
|