@popovandrii/ui-elements 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -3
- package/dist/Switch.d.ts +11 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +99 -68
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -4,8 +4,41 @@ TypeScript-based NPM plugin.
|
|
|
4
4
|
The plugin includes interface elements with specific properties.
|
|
5
5
|
UI elements that contain a large share of JavaScript.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
## add JS
|
|
8
|
+
```js
|
|
9
|
+
import { SpinBox } from '@popovandrii/ui-elements';
|
|
10
|
+
```
|
|
11
|
+
Connection with `standard styles` from the package by element name.
|
|
12
|
+
```js
|
|
13
|
+
new SpinBox();
|
|
14
|
+
```
|
|
15
|
+
Connection with `custom styles` from a package by element name.
|
|
16
|
+
```js
|
|
17
|
+
new SpinBox({
|
|
18
|
+
main: "You-costom-class",
|
|
19
|
+
btn: "You-costom-class__btn",
|
|
20
|
+
input: "You-costom-class__input",
|
|
21
|
+
disabledBtn: "You-costom-class__disabled",
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Abbreviation of the base (main) class of each element:<br>
|
|
26
|
+
`UIsp`, UIdd, UIsch ... (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
|
|
27
|
+
`<div class="UIsp">...</div>`
|
|
28
|
+
|
|
29
|
+
## add Style
|
|
30
|
+
```js
|
|
31
|
+
import '@popovandrii/ui-elements/style.css';
|
|
32
|
+
```
|
|
33
|
+
*** You can not include styles from the package. Use your own styles.
|
|
34
|
+
|
|
35
|
+
Abbreviation of the base (main) class of each element:<br>
|
|
36
|
+
`UIsp`, UIdd, UIsch ... (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
|
|
37
|
+
`<div class="UIsp">...</div>`
|
|
38
|
+
|
|
39
|
+
### UI Elements
|
|
40
|
+
#### Spin-Box
|
|
41
|
+
This is a field with two buttons.<br>
|
|
9
42
|
- the ability to set the minimum and maximum value
|
|
10
43
|
- the number of digits after the decimal point
|
|
11
44
|
- accelerated increment when holding down the `Shift` key
|
|
@@ -15,10 +48,57 @@ Currently implemented:<br>
|
|
|
15
48
|
- colors (danger primary...) and markup (sm lg radius-none)
|
|
16
49
|
- setting a custom CSS selector
|
|
17
50
|
|
|
51
|
+
```html
|
|
52
|
+
<div class="UIsp lg" data-step="0" data-min="10" data-max="15" role="spinbutton" tabindex="0"
|
|
53
|
+
aria-label="Numeric input">
|
|
54
|
+
<button class="UIsp__btn" type="button" aria-label="Decrease value">
|
|
55
|
+
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
|
56
|
+
<path d="M1 7h14v2H1" />
|
|
57
|
+
</svg>
|
|
58
|
+
</button>
|
|
59
|
+
<input class="UIsp__input" id="id-unique" type="text" value="" aria-hidden="true"
|
|
60
|
+
inputmode="decimal">
|
|
61
|
+
<button class="UIsp__btn" type="button" aria-label="Increase value">
|
|
62
|
+
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
|
|
63
|
+
<path d="M9 1v6h6v2H9v6H7V9H1V7h6V1" />
|
|
64
|
+
</svg>
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
67
|
+
```
|
|
68
|
+
Important field <br>
|
|
69
|
+
`data-step="0"` - number of digits after the decimal point (0 = 0; 3 = 0.000; 5 = 0.00100) <br>
|
|
70
|
+
`data-min="10"` - minimum value <br>
|
|
71
|
+
`data-max="15"` - maximum value <br>
|
|
72
|
+
|
|
73
|
+
Additional styles <br>
|
|
74
|
+
size: lg sm `class="UIsp lg"`<br>
|
|
75
|
+
colors: `danger` `info` `success` `primary` `warning` `class="UIsp success"`<br>
|
|
76
|
+
radius: radius-none `class="UIsp radius-none"`<br>
|
|
77
|
+
|
|
18
78
|
<p align="center">
|
|
19
|
-
<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox.png" alt="SpinBox Preview" width="672">
|
|
79
|
+
<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="SpinBox Preview" width="672">
|
|
20
80
|
</p>
|
|
21
81
|
|
|
82
|
+
#### Switch UI
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<div class="UIswitch lg" role="radiogroup" tabindex="0">
|
|
86
|
+
<div class="UIswitch-label">Status:</div>
|
|
87
|
+
<div class="UIswitch-group">
|
|
88
|
+
<input type="radio" id="on" name="btn0">
|
|
89
|
+
<label for="on">on</label>
|
|
90
|
+
<input type="radio" id="off" name="btn0" checked>
|
|
91
|
+
<label for="off">off</label>
|
|
92
|
+
<span class="slider"></span>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
<p align="center">
|
|
98
|
+
<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="672">
|
|
99
|
+
</p>
|
|
100
|
+
|
|
101
|
+
|
|
22
102
|
# Information for Developers
|
|
23
103
|
```sh
|
|
24
104
|
git clone git@gitlab.com:AndreyPopov/ui-elements.git && cd ui-elements
|
package/dist/Switch.d.ts
ADDED
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var I=Object.defineProperty;var g=l=>{throw TypeError(l)};var U=(l,e,a)=>e in l?I(l,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[e]=a;var b=(l,e,a)=>U(l,typeof e!="symbol"?e+"":e,a),D=(l,e,a)=>e.has(l)||g("Cannot "+a);var h=(l,e,a)=>(D(l,e,"read from private field"),a?a.call(l):e.get(l)),p=(l,e,a)=>e.has(l)?g("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(l):e.set(l,a);var L=(l,e,a)=>(D(l,e,"access private method"),a);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var d,x,q;class _{constructor(e={}){p(this,x);b(this,"selectors");b(this,"spinBoxes");p(this,d,(e,a,o,c=0,t=0)=>{e==c||e<c?(a.classList.add(this.selectors.disabledBtn),a.disabled=!0):(a.classList.remove(this.selectors.disabledBtn),a.disabled=!1),e==t||e>t?(o.classList.add(this.selectors.disabledBtn),o.disabled=!0):(o.classList.remove(this.selectors.disabledBtn),o.disabled=!1)});const a={main:"spin-box",btn:"spin-box__btn",input:"spin-box__input",disabledBtn:"disabled"};this.selectors={...a,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),L(this,x,q).call(this)}}d=new WeakMap,x=new WeakSet,q=function(){this.spinBoxes.forEach(e=>{const a=e.querySelectorAll(`.${this.selectors.btn}`),o=a[0],c=a[1],t=e.querySelector(`.${this.selectors.input}`),n=Number(e.dataset.step),r=Number(e.dataset.min),u=Number(e.dataset.max),m=i=>{e.setAttribute("aria-valuenow",String(i)),e.setAttribute("aria-valuetext",`${i} items`)};Number(t.value)<=r&&(t.value=r.toFixed(n)),Number(t.value)>=u&&(t.value=u.toFixed(n)),r&&e.setAttribute("aria-valuemin",r.toFixed(n)),u&&e.setAttribute("aria-valuemax",u.toFixed(n)),h(this,d).call(this,Number(t.value),o,c,r,u),m(t.value);let v=null;const w=(i=1)=>{t.value=String(Math.abs(Number(t.value)));let s=parseFloat(t.value)||0;s=s+1*i/Math.pow(10,n),s>u&&(s=u),t.value=s.toFixed(n),h(this,d).call(this,Number(t.value),o,c,r,u),m(t.value)},S=(i=1)=>{t.value=String(Math.abs(Number(t.value)));let s=parseFloat(t.value)||0;s=s-1*i/Math.pow(10,n),s<r&&(s=r),t.value=s.toFixed(n),h(this,d).call(this,Number(t.value),o,c,r,u),m(t.value)},f=(i,s=150)=>{v===null&&(v=window.setInterval(i,s))},A=()=>{v!==null&&(clearInterval(v),v=null)};c.addEventListener("mousedown",i=>{const s=i.shiftKey?3:1;f(()=>w(s))}),c.addEventListener("touchstart",()=>f(w)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(i=>{c.addEventListener(i,A)}),c.addEventListener("click",i=>{const s=i.shiftKey?3:1;v===null&&w(s)}),o.addEventListener("click",i=>{const s=i.shiftKey?3:1;v===null&&S(s)}),o.addEventListener("mousedown",i=>{const s=i.shiftKey?3:1;f(()=>S(s),100)}),o.addEventListener("touchstart",()=>f(S,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(i=>{o.addEventListener(i,A)}),t.addEventListener("keydown",i=>{const s=i.key,M=i.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(s)||(i.ctrlKey||i.metaKey)&&["a","c","v","x"].includes(s.toLowerCase()))return;if(["e","+","-"].includes(s)){i.preventDefault();return}if(s==="ArrowUp"||s==="ArrowDown"){i.preventDefault();const B=parseFloat(t.value)||0,K=1*M/Math.pow(10,n);let E=s==="ArrowUp"?B+K:B-K;E<r&&(E=r),t.value=E.toFixed(n),Number(t.value)<r&&(t.value=r.toFixed(n)),Number(t.value)>u&&(t.value=u.toFixed(n)),h(this,d).call(this,Number(t.value),o,c,r,u),m(t.value);return}const F=s===","?".":s,N=/^[0-9]$/.test(F),k=F===".",T=t.value.includes(".");(n===0&&!N||n>0&&!(N||k)||k&&T)&&i.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<r&&(t.value=r.toFixed(n)),Number(t.value)>u&&(t.value=u.toFixed(n)),h(this,d).call(this,Number(t.value),o,c,r,u)})})};var y,$;class O{constructor(e={}){p(this,y);b(this,"selectors");b(this,"main");const a={main:"spin-box",label:"UIswitch-label"};this.selectors={...a,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),L(this,y,$).call(this)}}y=new WeakSet,$=function(){this.main.forEach(e=>{const a=e.querySelector(`.${this.selectors.label}`);if(a){const o=e.querySelector("input[type='radio']:checked"),c=e.querySelector("input[type='radio']:not(:checked)");a.addEventListener("click",()=>{o.checked?c.checked=!0:o.checked=!0}),(n=>{e.setAttribute("aria-label",String(n))})(a.innerText)}})};exports.SpinBox=_;exports.Switch=O;
|
package/dist/index.d.ts
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -1,77 +1,77 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var T = Object.defineProperty;
|
|
2
|
+
var D = (l) => {
|
|
3
3
|
throw TypeError(l);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
class
|
|
11
|
-
constructor(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
5
|
+
var U = (l, e, a) => e in l ? T(l, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : l[e] = a;
|
|
6
|
+
var b = (l, e, a) => U(l, typeof e != "symbol" ? e + "" : e, a), q = (l, e, a) => e.has(l) || D("Cannot " + a);
|
|
7
|
+
var h = (l, e, a) => (q(l, e, "read from private field"), a ? a.call(l) : e.get(l)), p = (l, e, a) => e.has(l) ? D("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(l) : e.set(l, a);
|
|
8
|
+
var A = (l, e, a) => (q(l, e, "access private method"), a);
|
|
9
|
+
var d, x, $;
|
|
10
|
+
class H {
|
|
11
|
+
constructor(e = {}) {
|
|
12
|
+
p(this, x);
|
|
13
|
+
b(this, "selectors");
|
|
14
|
+
b(this, "spinBoxes");
|
|
15
|
+
p(this, d, (e, a, r, c = 0, t = 0) => {
|
|
16
|
+
e == c || e < c ? (a.classList.add(this.selectors.disabledBtn), a.disabled = !0) : (a.classList.remove(this.selectors.disabledBtn), a.disabled = !1), e == t || e > t ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1);
|
|
17
17
|
});
|
|
18
|
-
const
|
|
18
|
+
const a = {
|
|
19
19
|
main: "spin-box",
|
|
20
20
|
btn: "spin-box__btn",
|
|
21
21
|
input: "spin-box__input",
|
|
22
22
|
disabledBtn: "disabled"
|
|
23
23
|
};
|
|
24
|
-
this.selectors = { ...
|
|
24
|
+
this.selectors = { ...a, ...e }, this.spinBoxes = document.querySelectorAll(
|
|
25
25
|
`.${this.selectors.main}`
|
|
26
|
-
),
|
|
26
|
+
), A(this, x, $).call(this);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
|
|
30
|
-
this.spinBoxes.forEach((
|
|
31
|
-
const
|
|
29
|
+
d = new WeakMap(), x = new WeakSet(), $ = function() {
|
|
30
|
+
this.spinBoxes.forEach((e) => {
|
|
31
|
+
const a = e.querySelectorAll(
|
|
32
32
|
`.${this.selectors.btn}`
|
|
33
|
-
),
|
|
33
|
+
), r = a[0], c = a[1], t = e.querySelector(
|
|
34
34
|
`.${this.selectors.input}`
|
|
35
|
-
),
|
|
36
|
-
e.setAttribute("aria-valuenow", String(
|
|
35
|
+
), n = Number(e.dataset.step), o = Number(e.dataset.min), u = Number(e.dataset.max), m = (i) => {
|
|
36
|
+
e.setAttribute("aria-valuenow", String(i)), e.setAttribute("aria-valuetext", `${i} items`);
|
|
37
37
|
};
|
|
38
|
-
Number(
|
|
38
|
+
Number(t.value) <= o && (t.value = o.toFixed(n)), Number(t.value) >= u && (t.value = u.toFixed(n)), o && e.setAttribute("aria-valuemin", o.toFixed(n)), u && e.setAttribute("aria-valuemax", u.toFixed(n)), h(this, d).call(this, Number(t.value), r, c, o, u), m(t.value);
|
|
39
39
|
let v = null;
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
let s = parseFloat(
|
|
43
|
-
s = s + 1 *
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
let s = parseFloat(
|
|
47
|
-
s = s - 1 *
|
|
48
|
-
}, f = (
|
|
49
|
-
v === null && (v = window.setInterval(
|
|
50
|
-
},
|
|
40
|
+
const w = (i = 1) => {
|
|
41
|
+
t.value = String(Math.abs(Number(t.value)));
|
|
42
|
+
let s = parseFloat(t.value) || 0;
|
|
43
|
+
s = s + 1 * i / Math.pow(10, n), s > u && (s = u), t.value = s.toFixed(n), h(this, d).call(this, Number(t.value), r, c, o, u), m(t.value);
|
|
44
|
+
}, E = (i = 1) => {
|
|
45
|
+
t.value = String(Math.abs(Number(t.value)));
|
|
46
|
+
let s = parseFloat(t.value) || 0;
|
|
47
|
+
s = s - 1 * i / Math.pow(10, n), s < o && (s = o), t.value = s.toFixed(n), h(this, d).call(this, Number(t.value), r, c, o, u), m(t.value);
|
|
48
|
+
}, f = (i, s = 150) => {
|
|
49
|
+
v === null && (v = window.setInterval(i, s));
|
|
50
|
+
}, S = () => {
|
|
51
51
|
v !== null && (clearInterval(v), v = null);
|
|
52
52
|
};
|
|
53
|
-
|
|
54
|
-
const s =
|
|
55
|
-
f(() =>
|
|
56
|
-
}),
|
|
57
|
-
(
|
|
58
|
-
|
|
53
|
+
c.addEventListener("mousedown", (i) => {
|
|
54
|
+
const s = i.shiftKey ? 3 : 1;
|
|
55
|
+
f(() => w(s));
|
|
56
|
+
}), c.addEventListener("touchstart", () => f(w)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
57
|
+
(i) => {
|
|
58
|
+
c.addEventListener(i, S);
|
|
59
59
|
}
|
|
60
|
-
),
|
|
61
|
-
const s =
|
|
62
|
-
v === null &&
|
|
63
|
-
}),
|
|
64
|
-
const s =
|
|
65
|
-
v === null &&
|
|
66
|
-
}),
|
|
67
|
-
const s =
|
|
68
|
-
f(() =>
|
|
69
|
-
}),
|
|
70
|
-
(
|
|
71
|
-
|
|
60
|
+
), c.addEventListener("click", (i) => {
|
|
61
|
+
const s = i.shiftKey ? 3 : 1;
|
|
62
|
+
v === null && w(s);
|
|
63
|
+
}), r.addEventListener("click", (i) => {
|
|
64
|
+
const s = i.shiftKey ? 3 : 1;
|
|
65
|
+
v === null && E(s);
|
|
66
|
+
}), r.addEventListener("mousedown", (i) => {
|
|
67
|
+
const s = i.shiftKey ? 3 : 1;
|
|
68
|
+
f(() => E(s), 100);
|
|
69
|
+
}), r.addEventListener("touchstart", () => f(E, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
70
|
+
(i) => {
|
|
71
|
+
r.addEventListener(i, S);
|
|
72
72
|
}
|
|
73
|
-
),
|
|
74
|
-
const s =
|
|
73
|
+
), t.addEventListener("keydown", (i) => {
|
|
74
|
+
const s = i.key, M = i.shiftKey ? 3 : 1;
|
|
75
75
|
if ([
|
|
76
76
|
"Backspace",
|
|
77
77
|
"Delete",
|
|
@@ -81,28 +81,59 @@ c = new WeakMap(), h = new WeakSet(), g = function() {
|
|
|
81
81
|
"Enter",
|
|
82
82
|
"Home",
|
|
83
83
|
"End"
|
|
84
|
-
].includes(s) || (
|
|
84
|
+
].includes(s) || (i.ctrlKey || i.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
|
|
85
85
|
return;
|
|
86
86
|
if (["e", "+", "-"].includes(s)) {
|
|
87
|
-
|
|
87
|
+
i.preventDefault();
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
90
90
|
if (s === "ArrowUp" || s === "ArrowDown") {
|
|
91
|
-
|
|
92
|
-
const B = parseFloat(
|
|
93
|
-
let
|
|
94
|
-
|
|
91
|
+
i.preventDefault();
|
|
92
|
+
const B = parseFloat(t.value) || 0, K = 1 * M / Math.pow(10, n);
|
|
93
|
+
let L = s === "ArrowUp" ? B + K : B - K;
|
|
94
|
+
L < o && (L = o), t.value = L.toFixed(n), Number(t.value) < o && (t.value = o.toFixed(n)), Number(t.value) > u && (t.value = u.toFixed(n)), h(this, d).call(this, Number(t.value), r, c, o, u), m(t.value);
|
|
95
95
|
return;
|
|
96
96
|
}
|
|
97
|
-
const
|
|
98
|
-
(
|
|
99
|
-
}),
|
|
100
|
-
Number(
|
|
101
|
-
}), e.addEventListener("change", () => {
|
|
102
|
-
Number(e.value) < n && (e.value = n.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, n, r);
|
|
97
|
+
const F = s === "," ? "." : s, N = /^[0-9]$/.test(F), k = F === ".", I = t.value.includes(".");
|
|
98
|
+
(n === 0 && !N || n > 0 && !(N || k) || k && I) && i.preventDefault();
|
|
99
|
+
}), t.addEventListener("change", () => {
|
|
100
|
+
Number(t.value) < o && (t.value = o.toFixed(n)), Number(t.value) > u && (t.value = u.toFixed(n)), h(this, d).call(this, Number(t.value), r, c, o, u);
|
|
103
101
|
});
|
|
104
102
|
});
|
|
105
103
|
};
|
|
104
|
+
var y, g;
|
|
105
|
+
class O {
|
|
106
|
+
constructor(e = {}) {
|
|
107
|
+
p(this, y);
|
|
108
|
+
b(this, "selectors");
|
|
109
|
+
b(this, "main");
|
|
110
|
+
const a = {
|
|
111
|
+
main: "spin-box",
|
|
112
|
+
label: "UIswitch-label"
|
|
113
|
+
};
|
|
114
|
+
this.selectors = { ...a, ...e }, this.main = document.querySelectorAll(
|
|
115
|
+
`.${this.selectors.main}`
|
|
116
|
+
), A(this, y, g).call(this);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
y = new WeakSet(), g = function() {
|
|
120
|
+
this.main.forEach((e) => {
|
|
121
|
+
const a = e.querySelector(`.${this.selectors.label}`);
|
|
122
|
+
if (a) {
|
|
123
|
+
const r = e.querySelector(
|
|
124
|
+
"input[type='radio']:checked"
|
|
125
|
+
), c = e.querySelector(
|
|
126
|
+
"input[type='radio']:not(:checked)"
|
|
127
|
+
);
|
|
128
|
+
a.addEventListener("click", () => {
|
|
129
|
+
r.checked ? c.checked = !0 : r.checked = !0;
|
|
130
|
+
}), ((n) => {
|
|
131
|
+
e.setAttribute("aria-label", String(n));
|
|
132
|
+
})(a.innerText);
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
};
|
|
106
136
|
export {
|
|
107
|
-
|
|
137
|
+
H as SpinBox,
|
|
138
|
+
O as Switch
|
|
108
139
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i.UiElements={}))})(this,function(i){"use strict";var
|
|
1
|
+
(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i.UiElements={}))})(this,function(i){"use strict";var O=Object.defineProperty;var q=i=>{throw TypeError(i)};var j=(i,a,u)=>a in i?O(i,a,{enumerable:!0,configurable:!0,writable:!0,value:u}):i[a]=u;var b=(i,a,u)=>j(i,typeof a!="symbol"?a+"":a,u),T=(i,a,u)=>a.has(i)||q("Cannot "+u);var m=(i,a,u)=>(T(i,a,"read from private field"),u?u.call(i):a.get(i)),S=(i,a,u)=>a.has(i)?q("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(i):a.set(i,u);var F=(i,a,u)=>(T(i,a,"access private method"),u);var h,p,$,y,M;class a{constructor(n={}){S(this,p);b(this,"selectors");b(this,"spinBoxes");S(this,h,(n,c,o,v=0,e=0)=>{n==v||n<v?(c.classList.add(this.selectors.disabledBtn),c.disabled=!0):(c.classList.remove(this.selectors.disabledBtn),c.disabled=!1),n==e||n>e?(o.classList.add(this.selectors.disabledBtn),o.disabled=!0):(o.classList.remove(this.selectors.disabledBtn),o.disabled=!1)});const c={main:"spin-box",btn:"spin-box__btn",input:"spin-box__input",disabledBtn:"disabled"};this.selectors={...c,...n},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),F(this,p,$).call(this)}}h=new WeakMap,p=new WeakSet,$=function(){this.spinBoxes.forEach(n=>{const c=n.querySelectorAll(`.${this.selectors.btn}`),o=c[0],v=c[1],e=n.querySelector(`.${this.selectors.input}`),l=Number(n.dataset.step),r=Number(n.dataset.min),d=Number(n.dataset.max),x=s=>{n.setAttribute("aria-valuenow",String(s)),n.setAttribute("aria-valuetext",`${s} items`)};Number(e.value)<=r&&(e.value=r.toFixed(l)),Number(e.value)>=d&&(e.value=d.toFixed(l)),r&&n.setAttribute("aria-valuemin",r.toFixed(l)),d&&n.setAttribute("aria-valuemax",d.toFixed(l)),m(this,h).call(this,Number(e.value),o,v,r,d),x(e.value);let f=null;const E=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t+1*s/Math.pow(10,l),t>d&&(t=d),e.value=t.toFixed(l),m(this,h).call(this,Number(e.value),o,v,r,d),x(e.value)},L=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t-1*s/Math.pow(10,l),t<r&&(t=r),e.value=t.toFixed(l),m(this,h).call(this,Number(e.value),o,v,r,d),x(e.value)},w=(s,t=150)=>{f===null&&(f=window.setInterval(s,t))},N=()=>{f!==null&&(clearInterval(f),f=null)};v.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;w(()=>E(t))}),v.addEventListener("touchstart",()=>w(E)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{v.addEventListener(s,N)}),v.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&E(t)}),o.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&L(t)}),o.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;w(()=>L(t),100)}),o.addEventListener("touchstart",()=>w(L,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{o.addEventListener(s,N)}),e.addEventListener("keydown",s=>{const t=s.key,I=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 g=parseFloat(e.value)||0,D=1*I/Math.pow(10,l);let A=t==="ArrowUp"?g+D:g-D;A<r&&(A=r),e.value=A.toFixed(l),Number(e.value)<r&&(e.value=r.toFixed(l)),Number(e.value)>d&&(e.value=d.toFixed(l)),m(this,h).call(this,Number(e.value),o,v,r,d),x(e.value);return}const k=t===","?".":t,B=/^[0-9]$/.test(k),K=k===".",_=e.value.includes(".");(l===0&&!B||l>0&&!(B||K)||K&&_)&&s.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<r&&(e.value=r.toFixed(l)),Number(e.value)>d&&(e.value=d.toFixed(l)),m(this,h).call(this,Number(e.value),o,v,r,d)})})};class u{constructor(n={}){S(this,y);b(this,"selectors");b(this,"main");const c={main:"spin-box",label:"UIswitch-label"};this.selectors={...c,...n},this.main=document.querySelectorAll(`.${this.selectors.main}`),F(this,y,M).call(this)}}y=new WeakSet,M=function(){this.main.forEach(n=>{const c=n.querySelector(`.${this.selectors.label}`);if(c){const o=n.querySelector("input[type='radio']:checked"),v=n.querySelector("input[type='radio']:not(:checked)");c.addEventListener("click",()=>{o.checked?v.checked=!0:o.checked=!0}),(l=>{n.setAttribute("aria-label",String(l))})(c.innerText)}})},i.SpinBox=a,i.Switch=u,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.UIsp{position:relative;display:grid;grid-template-columns:min-content 1fr min-content;align-items:center;width:13rem;height:2.5rem;-webkit-user-select:none;user-select:none;border:1px solid var(--c-g-500);border-radius:.5rem;background-color:var(--c-g-500)}.UIsp>.UIsp__input{border:none;height:100%;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:100%;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:first-child{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-child{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.radius-none{border-radius:0}.UIsp.radius-none>.UIsp__btn{border-radius:0}.UIsp.sm{height:2rem;width:10rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{height:3.5rem;width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem}.UIsp.lg>.UIsp__btn{width:3.5rem}.UIsp.danger{background-color:var(--c-d-500);border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.UIsp.info{background-color:var(--c-i-500);border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.UIsp.primary{background-color:var(--c-p-500);border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.UIsp.success{background-color:var(--c-s-500);border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.UIsp.warning{background-color:var(--c-w-500);border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}.UIswitch{display:flex;align-items:center;gap:1rem}.UIswitch>.UIswitch-label{cursor:pointer;color:var(--c-g-700)}.UIswitch>.UIswitch-label:hover{color:var(--c-g-950)}.UIswitch.lg>.UIswitch-label{font-size:1.5rem}.UIswitch.lg>.UIswitch-group{height:3rem;font-size:1.1rem}.UIswitch.lg>.UIswitch-group>label{padding:0rem 1rem}.UIswitch.sm>.UIswitch-label{font-size:.9rem}.UIswitch.sm>.UIswitch-group{height:2rem;font-size:.9rem;border-radius:.25rem}.UIswitch.sm>.UIswitch-group>label{padding:0rem .25rem}.UIswitch.sm>.UIswitch-group>input:nth-of-type(2):checked~.slider{left:50%}.UIswitch-group{display:inline-grid;grid-template-columns:1fr 1fr;position:relative;width:max-content;height:2.5rem;overflow:hidden;border-radius:.5rem;border:1px solid var(--c-g-500);font-size:1rem}.UIswitch-group>input[type=radio]{display:none}.UIswitch-group>label{display:block;text-align:center;padding:0rem .5rem;cursor:pointer;position:relative;z-index:1;white-space:nowrap;transition:color .3s ease;color:var(--c-g-300);height:inherit;display:grid;place-items:center}.UIswitch-group>.slider{position:absolute;top:0;left:0;height:inherit;width:50%;transition:all .2s ease}.UIswitch-group>input:nth-of-type(1):checked~.slider{left:0;background-color:var(--c-s-300)}.UIswitch-group>input:nth-of-type(2):checked~.slider{left:50%;background-color:var(--c-d-300)}.UIswitch-group>input:nth-of-type(1):checked+label,.UIswitch-group>input:nth-of-type(2):checked+label{color:var(--c-g-950)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(354, 76%, 95%);--d-100: hsl(354, 76%, 90%);--d-300: hsl(354, 76%, 70%);--d-500: hsl(354, 76%, 50%);--d-700: hsl(354, 76%, 30%);--d-900: hsl(354, 76%, 10%);--d-950: hsl(354, 76%, 5%);--i-50: hsl(190, 90%, 95%);--i-100: hsl(190, 90%, 90%);--i-300: hsl(190, 90%, 70%);--i-500: hsl(190, 90%, 50%);--i-700: hsl(190, 90%, 30%);--i-900: hsl(190, 90%, 10%);--i-950: hsl(190, 90%, 5%);--p-50: hsl(216, 98%, 95%);--p-100: hsl(216, 98%, 90%);--p-300: hsl(216, 98%, 70%);--p-500: hsl(216, 98%, 50%);--p-700: hsl(216, 98%, 30%);--p-900: hsl(216, 98%, 10%);--p-950: hsl(216, 98%, 5%);--s-50: hsl(152, 81%, 95%);--s-100: hsl(152, 81%, 90%);--s-300: hsl(152, 81%, 70%);--s-500: hsl(152, 81%, 50%);--s-700: hsl(152, 81%, 30%);--s-900: hsl(152, 81%, 10%);--s-950: hsl(152, 81%, 5%);--w-50: hsl(45, 100%, 95%);--w-100: hsl(45, 100%, 90%);--w-300: hsl(45, 100%, 70%);--w-500: hsl(45, 100%, 50%);--w-700: hsl(45, 100%, 30%);--w-900: hsl(45, 100%, 10%);--w-950: hsl(45, 100%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "Andrii Popov",
|
|
3
3
|
"name": "@popovandrii/ui-elements",
|
|
4
4
|
"description": "Custom UI elements like SpinBox with theme support",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.8",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"spinbox",
|
|
@@ -17,6 +17,9 @@
|
|
|
17
17
|
"bugs": {
|
|
18
18
|
"url": "https://gitlab.com/AndreyPopov/ui-elements/-/issues"
|
|
19
19
|
},
|
|
20
|
+
"compilerOptions": {
|
|
21
|
+
"moduleResolution": "node"
|
|
22
|
+
},
|
|
20
23
|
"main": "./dist/index.cjs.js",
|
|
21
24
|
"module": "./dist/index.es.js",
|
|
22
25
|
"types": "./dist/index.d.ts",
|