@popovandrii/ui-elements 0.0.10 → 0.0.11
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 +8 -2
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +17 -17
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,11 +6,12 @@ UI elements that contain a large share of JavaScript.
|
|
|
6
6
|
|
|
7
7
|
## add JS
|
|
8
8
|
```js
|
|
9
|
-
import { SpinBox } from '@popovandrii/ui-elements';
|
|
9
|
+
import { SpinBox, Switch } from '@popovandrii/ui-elements';
|
|
10
10
|
```
|
|
11
11
|
Connection with `standard styles` from the package by element name.
|
|
12
12
|
```js
|
|
13
|
-
new SpinBox();
|
|
13
|
+
new SpinBox();
|
|
14
|
+
new Switch();
|
|
14
15
|
```
|
|
15
16
|
Connection with `custom styles` from a package by element name.
|
|
16
17
|
```js
|
|
@@ -20,6 +21,11 @@ new SpinBox({
|
|
|
20
21
|
input: "You-costom-class__input",
|
|
21
22
|
disabledBtn: "You-costom-class__disabled",
|
|
22
23
|
});
|
|
24
|
+
|
|
25
|
+
new Switch({
|
|
26
|
+
main: "You-costom-class",
|
|
27
|
+
label: "You-costom-class-label"
|
|
28
|
+
});
|
|
23
29
|
```
|
|
24
30
|
|
|
25
31
|
Abbreviation of the base (main) class of each element:<br>
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var R=Object.defineProperty;var
|
|
1
|
+
"use strict";var R=Object.defineProperty;var I=n=>{throw TypeError(n)};var T=(n,t,i)=>t in n?R(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i;var p=(n,t,i)=>T(n,typeof t!="symbol"?t+"":t,i),U=(n,t,i)=>t.has(n)||I("Cannot "+i);var h=(n,t,i)=>(U(n,t,"read from private field"),i?i.call(n):t.get(n)),y=(n,t,i)=>t.has(n)?I("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(n):t.set(n,i);var N=(n,t,i)=>(U(n,t,"access private method"),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var d,k,M;class _{constructor(t={}){y(this,k);p(this,"selectors");p(this,"spinBoxes");y(this,d,(t,i,l,u=0,e=0)=>{t==u||t<u?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),t==e||t>e?(l.classList.add(this.selectors.disabledBtn),l.disabled=!0):(l.classList.remove(this.selectors.disabledBtn),l.disabled=!1)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),N(this,k,M).call(this)}}d=new WeakMap,k=new WeakSet,M=function(){this.spinBoxes.forEach(t=>{const i=t.querySelectorAll(`.${this.selectors.btn}`),l=i[0],u=i[1],e=t.querySelector(`.${this.selectors.input}`),o=Number(t.dataset.step),r=Number(t.dataset.min),c=Number(t.dataset.max),b=a=>{t.setAttribute("aria-valuenow",String(a)),t.setAttribute("aria-valuetext",`${a} items`)};Number(e.value)<=r&&(e.value=r.toFixed(o)),Number(e.value)>=c&&(e.value=c.toFixed(o)),r&&t.setAttribute("aria-valuemin",r.toFixed(o)),c&&t.setAttribute("aria-valuemax",c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value);let v=null;const A=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s+1*a/Math.pow(10,o),s>c&&(s=c),e.value=s.toFixed(o),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value)},S=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s-1*a/Math.pow(10,o),s<r&&(s=r),e.value=s.toFixed(o),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value)},w=(a,s=150)=>{v===null&&(v=window.setInterval(a,s))},g=()=>{v!==null&&(clearInterval(v),v=null)};u.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;w(()=>A(s))}),u.addEventListener("touchstart",()=>w(A)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{u.addEventListener(a,g)}),u.addEventListener("click",a=>{const s=a.shiftKey?3:1;v===null&&A(s)}),l.addEventListener("click",a=>{const s=a.shiftKey?3:1;v===null&&S(s)}),l.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;w(()=>S(s),100)}),l.addEventListener("touchstart",()=>w(S,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{l.addEventListener(a,g)}),t.addEventListener("keydown",a=>{const s=a.key,L=a.shiftKey?3:1;if(s==="ArrowRight"||s==="ArrowLeft"){a.preventDefault();const E=parseFloat(e.value)||0,m=1*L/Math.pow(10,o);let f=s==="ArrowRight"?E+m:E-m;f<r&&(f=r),e.value=f.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>c&&(e.value=c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value);return}}),e.addEventListener("keydown",a=>{const s=a.key,L=a.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(s)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(s.toLowerCase()))return;if(["e","+","-"].includes(s)){a.preventDefault();return}if(s==="ArrowUp"||s==="ArrowDown"){a.preventDefault();const D=parseFloat(e.value)||0,K=1*L/Math.pow(10,o);let F=s==="ArrowUp"?D+K:D-K;F<r&&(F=r),e.value=F.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>c&&(e.value=c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value);return}const m=s===","?".":s,f=/^[0-9]$/.test(m),B=m===".",q=e.value.includes(".");(o===0&&!f||o>0&&!(f||B)||B&&q)&&a.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>c&&(e.value=c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c)})})};var x,$;class z{constructor(t={}){y(this,x);p(this,"selectors");p(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),N(this,x,$).call(this)}}x=new WeakSet,$=function(){this.main.forEach(t=>{const i=t.querySelector(`.${this.selectors.label}`),l=t.querySelector("input");i&&i.id&&t.setAttribute("aria-labelledby",i.id),l&&(l.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{l.checked=!l.checked,t.setAttribute("aria-checked",String(l.checked))}),t.addEventListener("keydown",e=>{e.key==="ArrowRight"?(l.checked=!0,u(String(l.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(l.checked=!1,u(String(l.checked)),e.preventDefault())}));const u=e=>{t.setAttribute("aria-checked",String(e))}})};exports.SpinBox=_;exports.Switch=z;
|
package/dist/index.es.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
var R = Object.defineProperty;
|
|
2
|
-
var
|
|
2
|
+
var I = (n) => {
|
|
3
3
|
throw TypeError(n);
|
|
4
4
|
};
|
|
5
5
|
var _ = (n, t, i) => t in n ? R(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
|
|
6
|
-
var p = (n, t, i) => _(n, typeof t != "symbol" ? t + "" : t, i),
|
|
7
|
-
var h = (n, t, i) => (
|
|
8
|
-
var N = (n, t, i) => (
|
|
9
|
-
var d,
|
|
6
|
+
var p = (n, t, i) => _(n, typeof t != "symbol" ? t + "" : t, i), U = (n, t, i) => t.has(n) || I("Cannot " + i);
|
|
7
|
+
var h = (n, t, i) => (U(n, t, "read from private field"), i ? i.call(n) : t.get(n)), y = (n, t, i) => t.has(n) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i);
|
|
8
|
+
var N = (n, t, i) => (U(n, t, "access private method"), i);
|
|
9
|
+
var d, k, $;
|
|
10
10
|
class T {
|
|
11
11
|
constructor(t = {}) {
|
|
12
|
-
y(this,
|
|
12
|
+
y(this, k);
|
|
13
13
|
p(this, "selectors");
|
|
14
14
|
p(this, "spinBoxes");
|
|
15
15
|
y(this, d, (t, i, l, u = 0, e = 0) => {
|
|
16
16
|
t == u || t < u ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1), t == e || t > e ? (l.classList.add(this.selectors.disabledBtn), l.disabled = !0) : (l.classList.remove(this.selectors.disabledBtn), l.disabled = !1);
|
|
17
17
|
});
|
|
18
18
|
const i = {
|
|
19
|
-
main: "
|
|
20
|
-
btn: "
|
|
21
|
-
input: "
|
|
19
|
+
main: "UIsp",
|
|
20
|
+
btn: "UIsp__btn",
|
|
21
|
+
input: "UIsp__input",
|
|
22
22
|
disabledBtn: "disabled"
|
|
23
23
|
};
|
|
24
24
|
this.selectors = { ...i, ...t }, this.spinBoxes = document.querySelectorAll(
|
|
25
25
|
`.${this.selectors.main}`
|
|
26
|
-
), N(this,
|
|
26
|
+
), N(this, k, $).call(this);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
d = new WeakMap(),
|
|
29
|
+
d = new WeakMap(), k = new WeakSet(), $ = function() {
|
|
30
30
|
this.spinBoxes.forEach((t) => {
|
|
31
31
|
const i = t.querySelectorAll(
|
|
32
32
|
`.${this.selectors.btn}`
|
|
@@ -103,17 +103,17 @@ d = new WeakMap(), x = new WeakSet(), M = function() {
|
|
|
103
103
|
F < r && (F = r), e.value = F.toFixed(o), Number(e.value) < r && (e.value = r.toFixed(o)), Number(e.value) > c && (e.value = c.toFixed(o)), h(this, d).call(this, Number(e.value), l, u, r, c), b(e.value);
|
|
104
104
|
return;
|
|
105
105
|
}
|
|
106
|
-
const m = s === "," ? "." : s, f = /^[0-9]$/.test(m), D = m === ".",
|
|
107
|
-
(o === 0 && !f || o > 0 && !(f || D) || D &&
|
|
106
|
+
const m = s === "," ? "." : s, f = /^[0-9]$/.test(m), D = m === ".", M = e.value.includes(".");
|
|
107
|
+
(o === 0 && !f || o > 0 && !(f || D) || D && M) && a.preventDefault();
|
|
108
108
|
}), e.addEventListener("change", () => {
|
|
109
109
|
Number(e.value) < r && (e.value = r.toFixed(o)), Number(e.value) > c && (e.value = c.toFixed(o)), h(this, d).call(this, Number(e.value), l, u, r, c);
|
|
110
110
|
});
|
|
111
111
|
});
|
|
112
112
|
};
|
|
113
|
-
var
|
|
113
|
+
var x, q;
|
|
114
114
|
class H {
|
|
115
115
|
constructor(t = {}) {
|
|
116
|
-
y(this,
|
|
116
|
+
y(this, x);
|
|
117
117
|
p(this, "selectors");
|
|
118
118
|
p(this, "main");
|
|
119
119
|
const i = {
|
|
@@ -122,10 +122,10 @@ class H {
|
|
|
122
122
|
};
|
|
123
123
|
this.selectors = { ...i, ...t }, this.main = document.querySelectorAll(
|
|
124
124
|
`.${this.selectors.main}`
|
|
125
|
-
), N(this,
|
|
125
|
+
), N(this, x, q).call(this);
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
|
|
128
|
+
x = new WeakSet(), q = function() {
|
|
129
129
|
this.main.forEach((t) => {
|
|
130
130
|
const i = t.querySelector(`.${this.selectors.label}`), l = t.querySelector("input");
|
|
131
131
|
i && i.id && t.setAttribute("aria-labelledby", i.id), l && (l.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener("click", () => {
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.UiElements={}))})(this,function(a){"use strict";var z=Object.defineProperty;var
|
|
1
|
+
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.UiElements={}))})(this,function(a){"use strict";var z=Object.defineProperty;var M=a=>{throw TypeError(a)};var j=(a,l,d)=>l in a?z(a,l,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[l]=d;var w=(a,l,d)=>j(a,typeof l!="symbol"?l+"":l,d),$=(a,l,d)=>l.has(a)||M("Cannot "+d);var b=(a,l,d)=>($(a,l,"read from private field"),d?d.call(a):l.get(a)),S=(a,l,d)=>l.has(a)?M("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(a):l.set(a,d);var B=(a,l,d)=>($(a,l,"access private method"),d);var h,k,q,x,T;class l{constructor(i={}){S(this,k);w(this,"selectors");w(this,"spinBoxes");S(this,h,(i,v,n,c=0,e=0)=>{i==c||i<c?(v.classList.add(this.selectors.disabledBtn),v.disabled=!0):(v.classList.remove(this.selectors.disabledBtn),v.disabled=!1),i==e||i>e?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1)});const v={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...v,...i},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),B(this,k,q).call(this)}}h=new WeakMap,k=new WeakSet,q=function(){this.spinBoxes.forEach(i=>{const v=i.querySelectorAll(`.${this.selectors.btn}`),n=v[0],c=v[1],e=i.querySelector(`.${this.selectors.input}`),o=Number(i.dataset.step),r=Number(i.dataset.min),u=Number(i.dataset.max),p=s=>{i.setAttribute("aria-valuenow",String(s)),i.setAttribute("aria-valuetext",`${s} items`)};Number(e.value)<=r&&(e.value=r.toFixed(o)),Number(e.value)>=u&&(e.value=u.toFixed(o)),r&&i.setAttribute("aria-valuemin",r.toFixed(o)),u&&i.setAttribute("aria-valuemax",u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value);let f=null;const L=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t+1*s/Math.pow(10,o),t>u&&(t=u),e.value=t.toFixed(o),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value)},E=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t-1*s/Math.pow(10,o),t<r&&(t=r),e.value=t.toFixed(o),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value)},A=(s,t=150)=>{f===null&&(f=window.setInterval(s,t))},D=()=>{f!==null&&(clearInterval(f),f=null)};c.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;A(()=>L(t))}),c.addEventListener("touchstart",()=>A(L)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{c.addEventListener(s,D)}),c.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&L(t)}),n.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&E(t)}),n.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;A(()=>E(t),100)}),n.addEventListener("touchstart",()=>A(E,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{n.addEventListener(s,D)}),i.addEventListener("keydown",s=>{const t=s.key,F=s.shiftKey?3:1;if(t==="ArrowRight"||t==="ArrowLeft"){s.preventDefault();const N=parseFloat(e.value)||0,y=1*F/Math.pow(10,o);let m=t==="ArrowRight"?N+y:N-y;m<r&&(m=r),e.value=m.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value);return}}),e.addEventListener("keydown",s=>{const t=s.key,F=s.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(t)||(s.ctrlKey||s.metaKey)&&["a","c","v","x"].includes(t.toLowerCase()))return;if(["e","+","-"].includes(t)){s.preventDefault();return}if(t==="ArrowUp"||t==="ArrowDown"){s.preventDefault();const U=parseFloat(e.value)||0,I=1*F/Math.pow(10,o);let g=t==="ArrowUp"?U+I:U-I;g<r&&(g=r),e.value=g.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value);return}const y=t===","?".":t,m=/^[0-9]$/.test(y),K=y===".",_=e.value.includes(".");(o===0&&!m||o>0&&!(m||K)||K&&_)&&s.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u)})})};class d{constructor(i={}){S(this,x);w(this,"selectors");w(this,"main");const v={main:"UIsw",label:"UIsw-label"};this.selectors={...v,...i},this.main=document.querySelectorAll(`.${this.selectors.main}`),B(this,x,T).call(this)}}x=new WeakSet,T=function(){this.main.forEach(i=>{const v=i.querySelector(`.${this.selectors.label}`),n=i.querySelector("input");v&&v.id&&i.setAttribute("aria-labelledby",v.id),n&&(n.checked?i.setAttribute("aria-checked","true"):i.setAttribute("aria-checked","false"),i.addEventListener("click",()=>{n.checked=!n.checked,i.setAttribute("aria-checked",String(n.checked))}),i.addEventListener("keydown",e=>{e.key==="ArrowRight"?(n.checked=!0,c(String(n.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(n.checked=!1,c(String(n.checked)),e.preventDefault())}));const c=e=>{i.setAttribute("aria-checked",String(e))}})},a.SpinBox=l,a.Switch=d,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
|