@gjsify/adwaita-web 0.3.12 → 0.3.14

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