@popovandrii/ui-elements 0.0.9 → 0.0.10

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 (6) hide show
  1. package/README.md +22 -18
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.es.js +99 -94
  4. package/dist/index.umd.js +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -49,15 +49,14 @@ Abbreviation of the base (main) class of each element:<br>
49
49
  - setting a custom CSS selector
50
50
 
51
51
  ```html
52
- <div class="UIsp lg" data-step="0" data-min="10" data-max="15" role="spinbutton" tabindex="0"
52
+ <div class="UIsp lg r-0" data-step="4" data-min="1" data-max="5" role="spinbutton" tabindex="0"
53
53
  aria-label="Numeric input">
54
54
  <button class="UIsp__btn" type="button" aria-label="Decrease value">
55
55
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
56
56
  <path d="M1 7h14v2H1" />
57
57
  </svg>
58
58
  </button>
59
- <input class="UIsp__input" id="id-unique" type="text" value="" aria-hidden="true"
60
- inputmode="decimal">
59
+ <input class="UIsp__input" id="spin5-1" type="text" value="" aria-label="Current value" inputmode="decimal">
61
60
  <button class="UIsp__btn" type="button" aria-label="Increase value">
62
61
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
63
62
  <path d="M9 1v6h6v2H9v6H7V9H1V7h6V1" />
@@ -69,33 +68,38 @@ Important field <br>
69
68
  `data-step="0"` - number of digits after the decimal point (0 = 0; 3 = 0.000; 5 = 0.00100) <br>
70
69
  `data-min="10"` - minimum value <br>
71
70
  `data-max="15"` - maximum value <br>
72
-
71
+ The `<div class="UIsp-label">min 10 max 15 step 0</div>` field can be omitted.<br>
73
72
  Additional styles <br>
74
73
  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>
74
+ colors: `danger` `info` `success` `primary` `warning`<br>
75
+ radius: `r-0` `r-1`<br>
77
76
 
78
77
  <p align="center">
79
- <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="SpinBox Preview" width="672">
78
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="SpinBox Preview" width="700">
80
79
  </p>
81
80
 
82
81
  #### Switch UI
83
82
 
84
83
  ```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>
84
+ <div class="UIsw" role="switch" tabindex="0">
85
+ <label class="UIsw-label" for="ch0" id="label-ch0">Label</label>
86
+ <input type="checkbox" id="ch0" name="btn3" checked hidden>
87
+ <span class="UIsw-slider"></span>
88
+ <span class="UIsw-slider__on">on</span>
89
+ <span class="UIsw-slider__off">off</span>
94
90
  </div>
95
91
  ```
92
+ One of the `input` fields must be set to `checked` `hidden`<br>
93
+ The `<div class="UIsw-label">Status:</div>` <br>`<span class="UIsw-slider__on">on</span>` <br>`<span class="UIsw-slider__off">off</span>` field can be omitted.<br>
94
+ `aria-label` will be installed automatically.
95
+
96
+ Additional styles <br>
97
+ size: `lg` `sm`<br>
98
+ colors: `danger` `info` `success` `primary` `warning`<br>
99
+ radius: `r-0` `r-1`<br>
96
100
 
97
101
  <p align="center">
98
- <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="672">
102
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="700">
99
103
  </p>
100
104
 
101
105
 
@@ -119,7 +123,7 @@ $ npm run dev # Work on the project
119
123
  $ npm run lint
120
124
  $ npm run format
121
125
  $ npm publish --access public
122
- $ npm info @popovandrii/ui-elements@0.0.1
126
+ $ npm info @popovandrii/ui-elements@0.0.x
123
127
  $ npm install @popovandrii/ui-elements@latest
124
128
  ```
125
129
 
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
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;
1
+ "use strict";var R=Object.defineProperty;var M=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),$=(n,t,i)=>t.has(n)||M("Cannot "+i);var h=(n,t,i)=>($(n,t,"read from private field"),i?i.call(n):t.get(n)),y=(n,t,i)=>t.has(n)?M("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(n):t.set(n,i);var N=(n,t,i)=>($(n,t,"access private method"),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var d,x,q;class _{constructor(t={}){y(this,x);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:"spin-box",btn:"spin-box__btn",input:"spin-box__input",disabledBtn:"disabled"};this.selectors={...i,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),N(this,x,q).call(this)}}d=new WeakMap,x=new WeakSet,q=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),f=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),f(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),f(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),f(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 b=s==="ArrowRight"?E+m:E-m;b<r&&(b=r),e.value=b.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),f(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),f(e.value);return}const m=s===","?".":s,b=/^[0-9]$/.test(m),B=m===".",U=e.value.includes(".");(o===0&&!b||o>0&&!(b||B)||B&&U)&&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 k,I;class z{constructor(t={}){y(this,k);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,k,I).call(this)}}k=new WeakSet,I=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,77 +1,86 @@
1
- var T = Object.defineProperty;
2
- var D = (l) => {
3
- throw TypeError(l);
1
+ var R = Object.defineProperty;
2
+ var $ = (n) => {
3
+ throw TypeError(n);
4
4
  };
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);
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), q = (n, t, i) => t.has(n) || $("Cannot " + i);
7
+ var h = (n, t, i) => (q(n, t, "read from private field"), i ? i.call(n) : t.get(n)), y = (n, t, i) => t.has(n) ? $("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) => (q(n, t, "access private method"), i);
9
+ var d, x, M;
10
+ class T {
11
+ constructor(t = {}) {
12
+ y(this, x);
13
+ p(this, "selectors");
14
+ p(this, "spinBoxes");
15
+ y(this, d, (t, i, l, u = 0, e = 0) => {
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
- const a = {
18
+ const i = {
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 = { ...a, ...e }, this.spinBoxes = document.querySelectorAll(
24
+ this.selectors = { ...i, ...t }, this.spinBoxes = document.querySelectorAll(
25
25
  `.${this.selectors.main}`
26
- ), A(this, x, $).call(this);
26
+ ), N(this, x, M).call(this);
27
27
  }
28
28
  }
29
- d = new WeakMap(), x = new WeakSet(), $ = function() {
30
- this.spinBoxes.forEach((e) => {
31
- const a = e.querySelectorAll(
29
+ d = new WeakMap(), x = new WeakSet(), M = function() {
30
+ this.spinBoxes.forEach((t) => {
31
+ const i = t.querySelectorAll(
32
32
  `.${this.selectors.btn}`
33
- ), r = a[0], c = a[1], t = e.querySelector(
33
+ ), l = i[0], u = i[1], e = t.querySelector(
34
34
  `.${this.selectors.input}`
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`);
35
+ ), o = Number(t.dataset.step), r = Number(t.dataset.min), c = Number(t.dataset.max), b = (a) => {
36
+ t.setAttribute("aria-valuenow", String(a)), t.setAttribute("aria-valuetext", `${a} items`);
37
37
  };
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);
38
+ 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);
39
39
  let v = null;
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 = () => {
40
+ const A = (a = 1) => {
41
+ e.value = String(Math.abs(Number(e.value)));
42
+ let s = parseFloat(e.value) || 0;
43
+ 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);
44
+ }, L = (a = 1) => {
45
+ e.value = String(Math.abs(Number(e.value)));
46
+ let s = parseFloat(e.value) || 0;
47
+ 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);
48
+ }, w = (a, s = 150) => {
49
+ v === null && (v = window.setInterval(a, s));
50
+ }, g = () => {
51
51
  v !== null && (clearInterval(v), v = null);
52
52
  };
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);
53
+ u.addEventListener("mousedown", (a) => {
54
+ const s = a.shiftKey ? 3 : 1;
55
+ w(() => A(s));
56
+ }), u.addEventListener("touchstart", () => w(A)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
57
+ (a) => {
58
+ u.addEventListener(a, g);
59
+ }
60
+ ), u.addEventListener("click", (a) => {
61
+ const s = a.shiftKey ? 3 : 1;
62
+ v === null && A(s);
63
+ }), l.addEventListener("click", (a) => {
64
+ const s = a.shiftKey ? 3 : 1;
65
+ v === null && L(s);
66
+ }), l.addEventListener("mousedown", (a) => {
67
+ const s = a.shiftKey ? 3 : 1;
68
+ w(() => L(s), 100);
69
+ }), l.addEventListener("touchstart", () => w(L, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
70
+ (a) => {
71
+ l.addEventListener(a, g);
59
72
  }
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);
73
+ ), t.addEventListener("keydown", (a) => {
74
+ const s = a.key, E = a.shiftKey ? 3 : 1;
75
+ if (s === "ArrowRight" || s === "ArrowLeft") {
76
+ a.preventDefault();
77
+ const S = parseFloat(e.value) || 0, m = 1 * E / Math.pow(10, o);
78
+ let f = s === "ArrowRight" ? S + m : S - m;
79
+ 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);
80
+ return;
72
81
  }
73
- ), t.addEventListener("keydown", (i) => {
74
- const s = i.key, M = i.shiftKey ? 3 : 1;
82
+ }), e.addEventListener("keydown", (a) => {
83
+ const s = a.key, E = a.shiftKey ? 3 : 1;
75
84
  if ([
76
85
  "Backspace",
77
86
  "Delete",
@@ -81,59 +90,55 @@ d = new WeakMap(), x = new WeakSet(), $ = function() {
81
90
  "Enter",
82
91
  "Home",
83
92
  "End"
84
- ].includes(s) || (i.ctrlKey || i.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
93
+ ].includes(s) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
85
94
  return;
86
95
  if (["e", "+", "-"].includes(s)) {
87
- i.preventDefault();
96
+ a.preventDefault();
88
97
  return;
89
98
  }
90
99
  if (s === "ArrowUp" || s === "ArrowDown") {
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);
100
+ a.preventDefault();
101
+ const K = parseFloat(e.value) || 0, B = 1 * E / Math.pow(10, o);
102
+ let F = s === "ArrowUp" ? K + B : K - B;
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);
95
104
  return;
96
105
  }
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);
106
+ const m = s === "," ? "." : s, f = /^[0-9]$/.test(m), D = m === ".", U = e.value.includes(".");
107
+ (o === 0 && !f || o > 0 && !(f || D) || D && U) && a.preventDefault();
108
+ }), e.addEventListener("change", () => {
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);
101
110
  });
102
111
  });
103
112
  };
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
+ var k, I;
114
+ class H {
115
+ constructor(t = {}) {
116
+ y(this, k);
117
+ p(this, "selectors");
118
+ p(this, "main");
119
+ const i = {
120
+ main: "UIsw",
121
+ label: "UIsw-label"
113
122
  };
114
- this.selectors = { ...a, ...e }, this.main = document.querySelectorAll(
123
+ this.selectors = { ...i, ...t }, this.main = document.querySelectorAll(
115
124
  `.${this.selectors.main}`
116
- ), A(this, y, g).call(this);
125
+ ), N(this, k, I).call(this);
117
126
  }
118
127
  }
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
- }
128
+ k = new WeakSet(), I = function() {
129
+ this.main.forEach((t) => {
130
+ const i = t.querySelector(`.${this.selectors.label}`), l = t.querySelector("input");
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", () => {
132
+ l.checked = !l.checked, t.setAttribute("aria-checked", String(l.checked));
133
+ }), t.addEventListener("keydown", (e) => {
134
+ e.key === "ArrowRight" ? (l.checked = !0, u(String(l.checked)), e.preventDefault()) : e.key === "ArrowLeft" && (l.checked = !1, u(String(l.checked)), e.preventDefault());
135
+ }));
136
+ const u = (e) => {
137
+ t.setAttribute("aria-checked", String(e));
138
+ };
134
139
  });
135
140
  };
136
141
  export {
137
- H as SpinBox,
138
- O as Switch
142
+ T as SpinBox,
143
+ H as Switch
139
144
  };
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 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"})});
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 q=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),T=(a,l,d)=>l.has(a)||q("Cannot "+d);var b=(a,l,d)=>(T(a,l,"read from private field"),d?d.call(a):l.get(a)),S=(a,l,d)=>l.has(a)?q("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(a):l.set(a,d);var B=(a,l,d)=>(T(a,l,"access private method"),d);var h,x,U,k,I;class l{constructor(i={}){S(this,x);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:"spin-box",btn:"spin-box__btn",input:"spin-box__input",disabledBtn:"disabled"};this.selectors={...v,...i},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),B(this,x,U).call(this)}}h=new WeakMap,x=new WeakSet,U=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 M=parseFloat(e.value)||0,$=1*F/Math.pow(10,o);let g=t==="ArrowUp"?M+$:M-$;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,k);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,k,I).call(this)}}k=new WeakSet,I=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"})});
package/dist/style.css CHANGED
@@ -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}
1
+ .UIsp{display:grid;grid-template-columns:min-content 1fr min-content;align-items:end;align-self:end;width:13rem}.UIsp>.UIsp-label{grid-column:1/-1;padding:.125rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;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;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.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:2.5rem;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;border:1px solid var(--c-g-500)}.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:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:.075rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);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{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);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{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);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{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);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{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);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)}.UIsw{position:relative;display:inline-flex;align-items:center;gap:1.5rem}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{position:relative;width:5rem;height:2.5rem;background-color:var(--c-g-100);border-radius:1.5rem;transition:background-color .3s ease;cursor:pointer;border:1px solid var(--c-g-300)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-300);border-radius:1.5rem;transition:transform .3s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.5rem;right:3.3rem;color:var(--c-g-900);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-300);border-color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.6rem);background-color:var(--c-g-700)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{width:2rem;height:2rem;border-radius:1.5rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;top:.6rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.1rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{width:1rem;height:1rem;border-radius:1.5rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;top:.8rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.2rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1.1rem)}.UIsw.r-0>.UIsw-slider{border-radius:0}.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider{border-radius:.5rem}.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger>.UIsw-slider__on{color:var(--c-d-900)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-700)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-300);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-900)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-700)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-300);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-900)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-700)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-300);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-900)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-700)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-300);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-900)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-700)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-300);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}: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(350, 100%, 95%);--d-100: hsl(350, 100%, 90%);--d-300: hsl(350, 100%, 70%);--d-500: hsl(350, 100%, 50%);--d-700: hsl(350, 100%, 30%);--d-900: hsl(350, 100%, 10%);--d-950: hsl(350, 100%, 5%);--i-50: hsl(195, 90%, 95%);--i-100: hsl(195, 90%, 90%);--i-300: hsl(195, 90%, 70%);--i-500: hsl(195, 90%, 50%);--i-700: hsl(195, 90%, 30%);--i-900: hsl(195, 90%, 10%);--i-950: hsl(195, 90%, 5%);--p-50: hsl(240, 50%, 95%);--p-100: hsl(240, 50%, 90%);--p-300: hsl(240, 50%, 70%);--p-500: hsl(240, 50%, 50%);--p-700: hsl(240, 50%, 30%);--p-900: hsl(240, 50%, 10%);--p-950: hsl(240, 50%, 5%);--s-50: hsl(150, 70%, 95%);--s-100: hsl(150, 70%, 90%);--s-300: hsl(150, 70%, 70%);--s-500: hsl(150, 70%, 50%);--s-700: hsl(150, 70%, 30%);--s-900: hsl(150, 70%, 10%);--s-950: hsl(150, 70%, 5%);--w-50: hsl(45, 75%, 95%);--w-100: hsl(45, 75%, 90%);--w-300: hsl(45, 75%, 70%);--w-500: hsl(45, 75%, 50%);--w-700: hsl(45, 75%, 30%);--w-900: hsl(45, 75%, 10%);--w-950: hsl(45, 75%, 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.9",
5
+ "version": "0.0.10",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",