@popovandrii/ui-elements 0.0.16 → 0.0.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/README.md +1 -0
- package/dist/SpinBox.d.ts +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +40 -40
- package/dist/index.umd.js +1 -1
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -216,6 +216,7 @@ docker compose exec vite-dev sh
|
|
|
216
216
|
$ npm install
|
|
217
217
|
$ npm run build # Compile the project into the ./dist folder.
|
|
218
218
|
$ npm run dev # Work on the project
|
|
219
|
+
$ npm run test # Vtest
|
|
219
220
|
$ npm run lint
|
|
220
221
|
$ npm run format
|
|
221
222
|
$ npm install # before publishing the package (generation of the package-lock.json file)
|
package/dist/SpinBox.d.ts
CHANGED
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var V=Object.defineProperty;var N=u=>{throw TypeError(u)};var _=(u,e,s)=>e in u?V(u,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):u[e]=s;var b=(u,e,s)=>_(u,typeof e!="symbol"?e+"":e,s),D=(u,e,s)=>e.has(u)||N("Cannot "+s);var y=(u,e,s)=>(D(u,e,"read from private field"),s?s.call(u):e.get(u)),x=(u,e,s)=>e.has(u)?N("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(u):e.set(u,s);var k=(u,e,s)=>(D(u,e,"access private method"),s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var p,E,U;class P{constructor(e={}){x(this,E);b(this,"selectors");b(this,"spinBoxes");x(this,p,(e,s,i,a=0,t=0)=>{e==a||e<a?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),t!==0&&(e==t||e>t?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1))});b(this,"getValidDataNumber",(e,s)=>{const i=e.getAttribute(`data-${s}`);return i===null||i.trim()===""||isNaN(Number(i))?0:Number(i)});const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),k(this,E,U).call(this)}}p=new WeakMap,E=new WeakSet,U=function(){this.spinBoxes.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`),i=s[0],a=s[1],t=e.querySelector(`.${this.selectors.input}`),d=this.getValidDataNumber(e,"step"),n=this.getValidDataNumber(e,"min"),r=this.getValidDataNumber(e,"max"),v=l=>{e.setAttribute("aria-valuenow",String(l)),e.setAttribute("aria-valuetext",`${l} items`)};Number(t.value)<=n&&(t.value=n.toFixed(d)),r!==0?(Number(t.value)>=r&&(t.value=r.toFixed(d)),r&&e.setAttribute("aria-valuemax",r.toFixed(d))):t.value=Number(t.value).toFixed(d),n&&e.setAttribute("aria-valuemin",n.toFixed(d)),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value);let c=null;const f=(l=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o+1*l/Math.pow(10,d),o>r&&r!==0&&(o=r),t.value=o.toFixed(d),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value)},m=(l=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o-1*l/Math.pow(10,d),o<n&&(o=n),t.value=o.toFixed(d),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value)},h=(l,o=150)=>{c===null&&(c=window.setInterval(l,o))},A=()=>{c!==null&&(clearInterval(c),c=null)};a.addEventListener("mousedown",l=>{const o=l.shiftKey?3:1;h(()=>f(o))}),a.addEventListener("touchstart",()=>h(f)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(l=>{a.addEventListener(l,A)}),a.addEventListener("click",l=>{const o=l.shiftKey?3:1;c===null&&f(o)}),i.addEventListener("click",l=>{const o=l.shiftKey?3:1;c===null&&m(o)}),i.addEventListener("mousedown",l=>{const o=l.shiftKey?3:1;h(()=>m(o),100)}),i.addEventListener("touchstart",()=>h(m,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(l=>{i.addEventListener(l,A)}),t.addEventListener("keydown",l=>{const o=l.key,B=l.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(o)||(l.ctrlKey||l.metaKey)&&["a","c","v","x"].includes(o.toLowerCase()))return;if(["e","+","-"].includes(o)){l.preventDefault();return}if(o==="ArrowUp"||o==="ArrowDown"){l.preventDefault();const C=parseFloat(t.value)||0,q=1*B/Math.pow(10,d);let g=o==="ArrowUp"?C+q:C-q;g<n&&(g=n),t.value=g.toFixed(d),Number(t.value)<n&&(t.value=n.toFixed(d)),Number(t.value)>r&&r!==0&&(t.value=r.toFixed(d)),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value);return}const L=o===","?".":o,I=/^[0-9]$/.test(L),$=L===".",K=t.value.includes(".");(d===0&&!I||d>0&&!(I||$)||$&&K)&&l.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<n&&(t.value=n.toFixed(d)),Number(t.value)>r&&r!==0?t.value=r.toFixed(d):t.value=Number(t.value).toFixed(d),y(this,p).call(this,Number(t.value),i,a,n,r)})})};var S,F;class z{constructor(e={}){x(this,S);b(this,"selectors");b(this,"main");const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),k(this,S,F).call(this)}}S=new WeakSet,F=function(){this.main.forEach(e=>{const s=e.querySelector(`.${this.selectors.label}`),i=e.querySelector("input");s&&s.id&&e.setAttribute("aria-labelledby",s.id),i&&(i.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{i.checked=!i.checked,e.setAttribute("aria-checked",String(i.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(i.checked=!0,a(String(i.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(i.checked=!1,a(String(i.checked)),t.preventDefault())}));const a=t=>{e.setAttribute("aria-checked",String(t))}})};class w{constructor(e={}){b(this,"selectors");b(this,"main");b(this,"itemArrowInitialized",new WeakSet);const s={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),w.initGlobalListener(this.selectors)}filterExcluded(e,s){return Array.from(e).filter(i=>!s.some(a=>typeof a=="string"?i.classList.contains(a)||i.id===a:i===a))}filterSearch(e,s){const i=s.trim().toLowerCase();return e.filter(a=>{var n,r;const t=((n=a.dataset.value)==null?void 0:n.toLowerCase())||"",d=((r=a.textContent)==null?void 0:r.toLowerCase())||"";return t.includes(i)||d.includes(i)})}event(){this.main.forEach(e=>{const s=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!s)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(f){return console.warn("Not found:",f.message)}const i=e.querySelector(`.${this.selectors.selected}`),a=e.querySelector(`.${this.selectors.arrow}`),t=e.querySelector(`.${this.selectors.optionsList}`),d=e.querySelector(`.${this.selectors.search} input`);a&&a.addEventListener("click",()=>{this.toggle(e,t)}),i.addEventListener("click",()=>{this.toggle(e,t)}),e.addEventListener("click",()=>{this.itemsPosition(t)});const n=t.querySelectorAll(`.${this.selectors.items} ul li`),r=this.filterExcluded(n,this.selectors.excludedItems),v=e.querySelector("[aria-selected='true']");v&&this.defaultSelect(e,v,i,s);var c=[];d&&d.addEventListener("input",f=>{const h=f.target.value.trim();i&&(c=this.filterSearch(r,h),h?(n.forEach(A=>A.remove()),c.forEach(A=>{var l;(l=t.querySelector(`.${this.selectors.optionsList} ul`))==null||l.appendChild(A)})):n.forEach(A=>{var l;(l=t.querySelector(`.${this.selectors.optionsList} ul`))==null||l.appendChild(A)}),this.itemArrow(e,t,i,s))}),this.itemArrow(e,t,i,s),this.items(e,t,r,i,s)})}itemArrow(e,s,i,a){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let t=-1;const d=i.textContent?i.textContent:"",n=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",r=>{n&&n.focus();const v=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(v,this.selectors.excludedItems),f=c.length;if(f!==0)if(r.key==="ArrowDown"){r.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,s),t=(t+1)%f,i.textContent=c[t].textContent,c.forEach(h=>h.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const m=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",m),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="ArrowUp"){r.preventDefault(),t=(t-1+f)%f,i.textContent=c[t].textContent,c.forEach(h=>h.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const m=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",m),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="Enter")if(r.preventDefault(),t>=0){i.textContent=c[t].textContent,c.forEach(h=>h.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const m=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",m),a.value=String(c[t].dataset.value),this.costomEvent(e,a.value),this.close(e,s)}else this.toggle(e,s);else r.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(i.textContent=d),this.close(e,s))})}itemsPosition(e){const s=e.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(e,s,i,a,t){i.forEach((d,n)=>{d.addEventListener("click",()=>{const r=i[n];if(r){a.textContent=r.textContent,i.forEach(c=>c.removeAttribute("aria-selected")),r.setAttribute("aria-selected","true");const v=r.id||`${this.selectors.idPrefix}${n}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",v),t.value=String(i[n].dataset.value),this.costomEvent(e,t.value),this.close(e,s)}})})}defaultSelect(e,s,i,a){s&&(a.setAttribute("value",s.dataset.value??""),i.textContent=s.textContent??"",e.setAttribute("aria-activedescendant",s.id||""))}costomEvent(e,s){e.dispatchEvent(new CustomEvent("change",{detail:{val:s},bubbles:!0}))}toggle(e,s){w.closeAll(this.selectors),s.hidden?(s.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,s)}close(e,s){s.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(s=>{const i=s.querySelector(`.${e.optionsList}`);i.hidden=!0,s.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",s=>{const i=s.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(i))||w.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}exports.Select=w;exports.SpinBox=P;exports.Switch=z;
|
package/dist/index.es.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var V = Object.defineProperty;
|
|
2
|
+
var N = (u) => {
|
|
3
3
|
throw TypeError(u);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var x = (u, e, s) => (D(u, e, "read from private field"), s ? s.call(u) : e.get(u)), y = (u, e, s) => e.has(u) ?
|
|
8
|
-
var
|
|
9
|
-
var p, E,
|
|
10
|
-
class
|
|
5
|
+
var _ = (u, e, s) => e in u ? V(u, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : u[e] = s;
|
|
6
|
+
var b = (u, e, s) => _(u, typeof e != "symbol" ? e + "" : e, s), D = (u, e, s) => e.has(u) || N("Cannot " + s);
|
|
7
|
+
var x = (u, e, s) => (D(u, e, "read from private field"), s ? s.call(u) : e.get(u)), y = (u, e, s) => e.has(u) ? N("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, s);
|
|
8
|
+
var g = (u, e, s) => (D(u, e, "access private method"), s);
|
|
9
|
+
var p, E, U;
|
|
10
|
+
class M {
|
|
11
11
|
constructor(e = {}) {
|
|
12
|
-
y(this,
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
y(this, E);
|
|
13
|
+
b(this, "selectors");
|
|
14
|
+
b(this, "spinBoxes");
|
|
15
15
|
y(this, p, (e, s, i, a = 0, t = 0) => {
|
|
16
16
|
e == a || e < a ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1), t !== 0 && (e == t || e > t ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1));
|
|
17
17
|
});
|
|
18
|
-
|
|
18
|
+
b(this, "getValidDataNumber", (e, s) => {
|
|
19
19
|
const i = e.getAttribute(`data-${s}`);
|
|
20
20
|
return i === null || i.trim() === "" || isNaN(Number(i)) ? 0 : Number(i);
|
|
21
21
|
});
|
|
@@ -27,16 +27,16 @@ class G {
|
|
|
27
27
|
};
|
|
28
28
|
this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
|
|
29
29
|
`.${this.selectors.main}`
|
|
30
|
-
),
|
|
30
|
+
), g(this, E, U).call(this);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
p = new WeakMap(), E = new
|
|
33
|
+
p = new WeakMap(), E = new WeakSet(), U = function() {
|
|
34
34
|
this.spinBoxes.forEach((e) => {
|
|
35
35
|
const s = e.querySelectorAll(
|
|
36
36
|
`.${this.selectors.btn}`
|
|
37
37
|
), i = s[0], a = s[1], t = e.querySelector(
|
|
38
38
|
`.${this.selectors.input}`
|
|
39
|
-
), d =
|
|
39
|
+
), d = this.getValidDataNumber(e, "step"), n = this.getValidDataNumber(e, "min"), r = this.getValidDataNumber(e, "max"), v = (l) => {
|
|
40
40
|
e.setAttribute("aria-valuenow", String(l)), e.setAttribute("aria-valuetext", `${l} items`);
|
|
41
41
|
};
|
|
42
42
|
Number(t.value) <= n && (t.value = n.toFixed(d)), r !== 0 ? (Number(t.value) >= r && (t.value = r.toFixed(d)), r && e.setAttribute("aria-valuemax", r.toFixed(d))) : t.value = Number(t.value).toFixed(d), n && e.setAttribute("aria-valuemin", n.toFixed(d)), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
|
|
@@ -51,7 +51,7 @@ p = new WeakMap(), E = new WeakMap(), S = new WeakSet(), F = function() {
|
|
|
51
51
|
o = o - 1 * l / Math.pow(10, d), o < n && (o = n), t.value = o.toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
|
|
52
52
|
}, h = (l, o = 150) => {
|
|
53
53
|
c === null && (c = window.setInterval(l, o));
|
|
54
|
-
},
|
|
54
|
+
}, A = () => {
|
|
55
55
|
c !== null && (clearInterval(c), c = null);
|
|
56
56
|
};
|
|
57
57
|
a.addEventListener("mousedown", (l) => {
|
|
@@ -59,7 +59,7 @@ p = new WeakMap(), E = new WeakMap(), S = new WeakSet(), F = function() {
|
|
|
59
59
|
h(() => f(o));
|
|
60
60
|
}), a.addEventListener("touchstart", () => h(f)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
61
61
|
(l) => {
|
|
62
|
-
a.addEventListener(l,
|
|
62
|
+
a.addEventListener(l, A);
|
|
63
63
|
}
|
|
64
64
|
), a.addEventListener("click", (l) => {
|
|
65
65
|
const o = l.shiftKey ? 3 : 1;
|
|
@@ -72,10 +72,10 @@ p = new WeakMap(), E = new WeakMap(), S = new WeakSet(), F = function() {
|
|
|
72
72
|
h(() => m(o), 100);
|
|
73
73
|
}), i.addEventListener("touchstart", () => h(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
74
74
|
(l) => {
|
|
75
|
-
i.addEventListener(l,
|
|
75
|
+
i.addEventListener(l, A);
|
|
76
76
|
}
|
|
77
77
|
), t.addEventListener("keydown", (l) => {
|
|
78
|
-
const o = l.key,
|
|
78
|
+
const o = l.key, B = l.shiftKey ? 3 : 1;
|
|
79
79
|
if ([
|
|
80
80
|
"Backspace",
|
|
81
81
|
"Delete",
|
|
@@ -93,34 +93,34 @@ p = new WeakMap(), E = new WeakMap(), S = new WeakSet(), F = function() {
|
|
|
93
93
|
}
|
|
94
94
|
if (o === "ArrowUp" || o === "ArrowDown") {
|
|
95
95
|
l.preventDefault();
|
|
96
|
-
const
|
|
97
|
-
let
|
|
98
|
-
|
|
96
|
+
const C = parseFloat(t.value) || 0, q = 1 * B / Math.pow(10, d);
|
|
97
|
+
let k = o === "ArrowUp" ? C + q : C - q;
|
|
98
|
+
k < n && (k = n), t.value = k.toFixed(d), Number(t.value) < n && (t.value = n.toFixed(d)), Number(t.value) > r && r !== 0 && (t.value = r.toFixed(d)), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
|
|
99
99
|
return;
|
|
100
100
|
}
|
|
101
|
-
const
|
|
102
|
-
(d === 0 &&
|
|
101
|
+
const L = o === "," ? "." : o, I = /^[0-9]$/.test(L), $ = L === ".", K = t.value.includes(".");
|
|
102
|
+
(d === 0 && !I || d > 0 && !(I || $) || $ && K) && l.preventDefault();
|
|
103
103
|
}), t.addEventListener("change", () => {
|
|
104
104
|
Number(t.value) < n && (t.value = n.toFixed(d)), Number(t.value) > r && r !== 0 ? t.value = r.toFixed(d) : t.value = Number(t.value).toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r);
|
|
105
105
|
});
|
|
106
106
|
});
|
|
107
107
|
};
|
|
108
|
-
var
|
|
109
|
-
class
|
|
108
|
+
var S, F;
|
|
109
|
+
class G {
|
|
110
110
|
constructor(e = {}) {
|
|
111
|
-
y(this,
|
|
112
|
-
|
|
113
|
-
|
|
111
|
+
y(this, S);
|
|
112
|
+
b(this, "selectors");
|
|
113
|
+
b(this, "main");
|
|
114
114
|
const s = {
|
|
115
115
|
main: "UIsw",
|
|
116
116
|
label: "UIsw-label"
|
|
117
117
|
};
|
|
118
118
|
this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
|
|
119
119
|
`.${this.selectors.main}`
|
|
120
|
-
),
|
|
120
|
+
), g(this, S, F).call(this);
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
|
-
|
|
123
|
+
S = new WeakSet(), F = function() {
|
|
124
124
|
this.main.forEach((e) => {
|
|
125
125
|
const s = e.querySelector(`.${this.selectors.label}`), i = e.querySelector("input");
|
|
126
126
|
s && s.id && e.setAttribute("aria-labelledby", s.id), i && (i.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
|
|
@@ -135,9 +135,9 @@ k = new WeakSet(), B = function() {
|
|
|
135
135
|
};
|
|
136
136
|
class w {
|
|
137
137
|
constructor(e = {}) {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
138
|
+
b(this, "selectors");
|
|
139
|
+
b(this, "main");
|
|
140
|
+
b(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
|
|
141
141
|
const s = {
|
|
142
142
|
idPrefix: "UI-option-",
|
|
143
143
|
main: "UIselect",
|
|
@@ -203,12 +203,12 @@ class w {
|
|
|
203
203
|
var c = [];
|
|
204
204
|
d && d.addEventListener("input", (f) => {
|
|
205
205
|
const h = f.target.value.trim();
|
|
206
|
-
i && (c = this.filterSearch(r, h), h ? (n.forEach((
|
|
206
|
+
i && (c = this.filterSearch(r, h), h ? (n.forEach((A) => A.remove()), c.forEach((A) => {
|
|
207
207
|
var l;
|
|
208
|
-
(l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(
|
|
209
|
-
})) : n.forEach((
|
|
208
|
+
(l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(A);
|
|
209
|
+
})) : n.forEach((A) => {
|
|
210
210
|
var l;
|
|
211
|
-
(l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(
|
|
211
|
+
(l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(A);
|
|
212
212
|
}), this.itemArrow(e, t, i, s));
|
|
213
213
|
}), this.itemArrow(e, t, i, s), this.items(e, t, r, i, s);
|
|
214
214
|
});
|
|
@@ -299,6 +299,6 @@ class w {
|
|
|
299
299
|
}
|
|
300
300
|
export {
|
|
301
301
|
w as Select,
|
|
302
|
-
|
|
303
|
-
|
|
302
|
+
M as SpinBox,
|
|
303
|
+
G as Switch
|
|
304
304
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var
|
|
1
|
+
(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var z=Object.defineProperty;var D=d=>{throw TypeError(d)};var T=(d,h,f)=>h in d?z(d,h,{enumerable:!0,configurable:!0,writable:!0,value:f}):d[h]=f;var A=(d,h,f)=>T(d,typeof h!="symbol"?h+"":h,f),F=(d,h,f)=>h.has(d)||D("Cannot "+f);var x=(d,h,f)=>(F(d,h,"read from private field"),f?f.call(d):h.get(d)),k=(d,h,f)=>h.has(d)?D("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(d):h.set(d,f);var I=(d,h,f)=>(F(d,h,"access private method"),f);var y,S,B,g,K;class h{constructor(e={}){k(this,S);A(this,"selectors");A(this,"spinBoxes");k(this,y,(e,i,s,a=0,t=0)=>{e==a||e<a?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),t!==0&&(e==t||e>t?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});A(this,"getValidDataNumber",(e,i)=>{const s=e.getAttribute(`data-${i}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),I(this,S,B).call(this)}}y=new WeakMap,S=new WeakSet,B=function(){this.spinBoxes.forEach(e=>{const i=e.querySelectorAll(`.${this.selectors.btn}`),s=i[0],a=i[1],t=e.querySelector(`.${this.selectors.input}`),u=this.getValidDataNumber(e,"step"),l=this.getValidDataNumber(e,"min"),r=this.getValidDataNumber(e,"max"),b=n=>{e.setAttribute("aria-valuenow",String(n)),e.setAttribute("aria-valuetext",`${n} items`)};Number(t.value)<=l&&(t.value=l.toFixed(u)),r!==0?(Number(t.value)>=r&&(t.value=r.toFixed(u)),r&&e.setAttribute("aria-valuemax",r.toFixed(u))):t.value=Number(t.value).toFixed(u),l&&e.setAttribute("aria-valuemin",l.toFixed(u)),x(this,y).call(this,Number(t.value),s,a,l,r),b(t.value);let c=null;const m=(n=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o+1*n/Math.pow(10,u),o>r&&r!==0&&(o=r),t.value=o.toFixed(u),x(this,y).call(this,Number(t.value),s,a,l,r),b(t.value)},p=(n=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o-1*n/Math.pow(10,u),o<l&&(o=l),t.value=o.toFixed(u),x(this,y).call(this,Number(t.value),s,a,l,r),b(t.value)},v=(n,o=150)=>{c===null&&(c=window.setInterval(n,o))},w=()=>{c!==null&&(clearInterval(c),c=null)};a.addEventListener("mousedown",n=>{const o=n.shiftKey?3:1;v(()=>m(o))}),a.addEventListener("touchstart",()=>v(m)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(n=>{a.addEventListener(n,w)}),a.addEventListener("click",n=>{const o=n.shiftKey?3:1;c===null&&m(o)}),s.addEventListener("click",n=>{const o=n.shiftKey?3:1;c===null&&p(o)}),s.addEventListener("mousedown",n=>{const o=n.shiftKey?3:1;v(()=>p(o),100)}),s.addEventListener("touchstart",()=>v(p,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(n=>{s.addEventListener(n,w)}),t.addEventListener("keydown",n=>{const o=n.key,_=n.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(o)||(n.ctrlKey||n.metaKey)&&["a","c","v","x"].includes(o.toLowerCase()))return;if(["e","+","-"].includes(o)){n.preventDefault();return}if(o==="ArrowUp"||o==="ArrowDown"){n.preventDefault();const N=parseFloat(t.value)||0,U=1*_/Math.pow(10,u);let L=o==="ArrowUp"?N+U:N-U;L<l&&(L=l),t.value=L.toFixed(u),Number(t.value)<l&&(t.value=l.toFixed(u)),Number(t.value)>r&&r!==0&&(t.value=r.toFixed(u)),x(this,y).call(this,Number(t.value),s,a,l,r),b(t.value);return}const $=o===","?".":o,C=/^[0-9]$/.test($),q=$===".",P=t.value.includes(".");(u===0&&!C||u>0&&!(C||q)||q&&P)&&n.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<l&&(t.value=l.toFixed(u)),Number(t.value)>r&&r!==0?t.value=r.toFixed(u):t.value=Number(t.value).toFixed(u),x(this,y).call(this,Number(t.value),s,a,l,r)})})};class f{constructor(e={}){k(this,g);A(this,"selectors");A(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),I(this,g,K).call(this)}}g=new WeakSet,K=function(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.label}`),s=e.querySelector("input");i&&i.id&&e.setAttribute("aria-labelledby",i.id),s&&(s.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{s.checked=!s.checked,e.setAttribute("aria-checked",String(s.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(s.checked=!0,a(String(s.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(s.checked=!1,a(String(s.checked)),t.preventDefault())}));const a=t=>{e.setAttribute("aria-checked",String(t))}})};class E{constructor(e={}){A(this,"selectors");A(this,"main");A(this,"itemArrowInitialized",new WeakSet);const i={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),E.initGlobalListener(this.selectors)}filterExcluded(e,i){return Array.from(e).filter(s=>!i.some(a=>typeof a=="string"?s.classList.contains(a)||s.id===a:s===a))}filterSearch(e,i){const s=i.trim().toLowerCase();return e.filter(a=>{var l,r;const t=((l=a.dataset.value)==null?void 0:l.toLowerCase())||"",u=((r=a.textContent)==null?void 0:r.toLowerCase())||"";return t.includes(s)||u.includes(s)})}event(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!i)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(m){return console.warn("Not found:",m.message)}const s=e.querySelector(`.${this.selectors.selected}`),a=e.querySelector(`.${this.selectors.arrow}`),t=e.querySelector(`.${this.selectors.optionsList}`),u=e.querySelector(`.${this.selectors.search} input`);a&&a.addEventListener("click",()=>{this.toggle(e,t)}),s.addEventListener("click",()=>{this.toggle(e,t)}),e.addEventListener("click",()=>{this.itemsPosition(t)});const l=t.querySelectorAll(`.${this.selectors.items} ul li`),r=this.filterExcluded(l,this.selectors.excludedItems),b=e.querySelector("[aria-selected='true']");b&&this.defaultSelect(e,b,s,i);var c=[];u&&u.addEventListener("input",m=>{const v=m.target.value.trim();s&&(c=this.filterSearch(r,v),v?(l.forEach(w=>w.remove()),c.forEach(w=>{var n;(n=t.querySelector(`.${this.selectors.optionsList} ul`))==null||n.appendChild(w)})):l.forEach(w=>{var n;(n=t.querySelector(`.${this.selectors.optionsList} ul`))==null||n.appendChild(w)}),this.itemArrow(e,t,s,i))}),this.itemArrow(e,t,s,i),this.items(e,t,r,s,i)})}itemArrow(e,i,s,a){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let t=-1;const u=s.textContent?s.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",r=>{l&&l.focus();const b=Array.from(i.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(b,this.selectors.excludedItems),m=c.length;if(m!==0)if(r.key==="ArrowDown"){r.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,i),t=(t+1)%m,s.textContent=c[t].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const p=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",p),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="ArrowUp"){r.preventDefault(),t=(t-1+m)%m,s.textContent=c[t].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const p=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",p),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="Enter")if(r.preventDefault(),t>=0){s.textContent=c[t].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const p=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",p),a.value=String(c[t].dataset.value),this.costomEvent(e,a.value),this.close(e,i)}else this.toggle(e,i);else r.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=u),this.close(e,i))})}itemsPosition(e){const i=e.querySelector('[aria-selected="true"]');i&&i.scrollIntoView({block:"nearest"})}items(e,i,s,a,t){s.forEach((u,l)=>{u.addEventListener("click",()=>{const r=s[l];if(r){a.textContent=r.textContent,s.forEach(c=>c.removeAttribute("aria-selected")),r.setAttribute("aria-selected","true");const b=r.id||`${this.selectors.idPrefix}${l}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",b),t.value=String(s[l].dataset.value),this.costomEvent(e,t.value),this.close(e,i)}})})}defaultSelect(e,i,s,a){i&&(a.setAttribute("value",i.dataset.value??""),s.textContent=i.textContent??"",e.setAttribute("aria-activedescendant",i.id||""))}costomEvent(e,i){e.dispatchEvent(new CustomEvent("change",{detail:{val:i},bubbles:!0}))}toggle(e,i){E.closeAll(this.selectors),i.hidden?(i.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,i)}close(e,i){i.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(i=>{const s=i.querySelector(`.${e.optionsList}`);s.hidden=!0,i.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",i=>{const s=i.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(s))||E.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}d.Select=E,d.SpinBox=h,d.Switch=f,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"author": "Andrii Popov",
|
|
3
3
|
"name": "@popovandrii/ui-elements",
|
|
4
|
-
"description": "
|
|
5
|
-
"version": "0.0.
|
|
4
|
+
"description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch",
|
|
5
|
+
"version": "0.0.17",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"spinbox",
|
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
"build": "node build.js",
|
|
40
40
|
"preview": "vite preview",
|
|
41
41
|
"lint": "eslint src --ext .ts,.tsx",
|
|
42
|
-
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\""
|
|
42
|
+
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
|
|
43
|
+
"test": "vitest"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"@typescript-eslint/eslint-plugin": "^8.8.0",
|
|
@@ -47,10 +48,12 @@
|
|
|
47
48
|
"eslint": "^9.27.0",
|
|
48
49
|
"eslint-config-prettier": "^10.1.5",
|
|
49
50
|
"eslint-plugin-prettier": "^5.4.0",
|
|
51
|
+
"jsdom": "^26.1.0",
|
|
50
52
|
"prettier": "^3.5.3",
|
|
51
53
|
"sass": "^1.89.2",
|
|
52
54
|
"typescript": "~5.8.3",
|
|
53
55
|
"vite": "^6.3.5",
|
|
54
|
-
"vite-plugin-dts": "^4.5.4"
|
|
56
|
+
"vite-plugin-dts": "^4.5.4",
|
|
57
|
+
"vitest": "^3.2.4"
|
|
55
58
|
}
|
|
56
59
|
}
|