@esportsplus/ui 0.37.2 → 0.38.1
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/build/components/button/index.js +15 -13
- package/build/components/checkbox/scss/index.scss +1 -1
- package/build/components/radio/scss/index.scss +1 -1
- package/build/components/switch/scss/index.scss +1 -1
- package/package.json +3 -3
- package/src/components/button/index.ts +17 -13
- package/src/components/checkbox/scss/variables.scss +3 -2
- package/src/components/radio/scss/variables.scss +3 -2
- package/src/components/switch/scss/variables.scss +3 -0
|
@@ -3,28 +3,30 @@ import { html } from '@esportsplus/template';
|
|
|
3
3
|
import template from '../template/index.js';
|
|
4
4
|
import './scss/index.scss';
|
|
5
5
|
const hold = template.factory(function (attributes, content) {
|
|
6
|
-
let
|
|
6
|
+
let end = () => {
|
|
7
|
+
if (!state.complete) {
|
|
8
|
+
state.holding = false;
|
|
9
|
+
}
|
|
10
|
+
}, start = (e) => {
|
|
11
|
+
e.preventDefault();
|
|
12
|
+
state.holding = true;
|
|
13
|
+
}, state = reactive({
|
|
7
14
|
complete: false,
|
|
8
15
|
holding: false
|
|
9
16
|
});
|
|
10
17
|
return html `
|
|
11
18
|
<div
|
|
12
19
|
class='button ${() => state.holding && 'button--holding'} ${() => state.complete && '--active'}'
|
|
13
|
-
onanimationend
|
|
20
|
+
onanimationend=${(e) => {
|
|
14
21
|
if (e.animationName === 'buttonHolding') {
|
|
15
22
|
state.complete = true;
|
|
16
23
|
}
|
|
17
|
-
}}
|
|
18
|
-
onclick
|
|
19
|
-
onmousedown
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
onmouseup='${() => {
|
|
24
|
-
if (!state.complete) {
|
|
25
|
-
state.holding = false;
|
|
26
|
-
}
|
|
27
|
-
}}'
|
|
24
|
+
}}
|
|
25
|
+
onclick=${() => { }}
|
|
26
|
+
onmousedown=${start}
|
|
27
|
+
onmouseup=${end}
|
|
28
|
+
ontouchstart=${start}
|
|
29
|
+
ontouchend=${end}
|
|
28
30
|
${attributes}
|
|
29
31
|
>
|
|
30
32
|
${() => content(state)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--
|
|
1
|
+
@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.checkbox label:not(.--active):not(.--active):active,.checkbox:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.checkbox.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.checkbox:invalid,.checkbox:required{box-shadow:none}.checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:bottom;width:var(--width);position:absolute;bottom:50%;right:92%}.checkbox-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.radio{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--
|
|
1
|
+
@layer components {.radio{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.radio label:not(.--active):not(.--active):active,.radio:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.radio.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.radio{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.radio:invalid,.radio:required{box-shadow:none}.radio:before{background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute;bottom:50%;right:50%}.radio-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.switch{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--opacity:var(--opacity-active);--scale:var(--scale-active)}.switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
1
|
+
@layer components {.switch{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|
|
12
12
|
"@esportsplus/typescript": "^0.9.2",
|
|
13
|
-
"@types/node": "^24.
|
|
13
|
+
"@types/node": "^24.7.0",
|
|
14
14
|
"autoprefixer": "^10.4.21",
|
|
15
15
|
"glob": "^11.0.3",
|
|
16
16
|
"lightningcss": "^1.30.2",
|
|
17
17
|
"npm-run-all": "^4.1.5",
|
|
18
18
|
"sass": "^1.93.2",
|
|
19
|
-
"vite": "^7.1.
|
|
19
|
+
"vite": "^7.1.9"
|
|
20
20
|
},
|
|
21
21
|
"exports": {
|
|
22
22
|
"./css-utilities.scss": "./build/css-utilities/index.scss",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"private": false,
|
|
43
43
|
"sideEffects": false,
|
|
44
44
|
"type": "module",
|
|
45
|
-
"version": "0.
|
|
45
|
+
"version": "0.38.1",
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build": "run-s build:vite build:ts",
|
|
48
48
|
"build:ts": "tsc && tsc-alias",
|
|
@@ -6,7 +6,16 @@ import './scss/index.scss';
|
|
|
6
6
|
|
|
7
7
|
const hold = template.factory(
|
|
8
8
|
function(attributes, content: (state: { holding: boolean, complete: boolean }) => Renderable<any>) {
|
|
9
|
-
let
|
|
9
|
+
let end = () => {
|
|
10
|
+
if (!state.complete) {
|
|
11
|
+
state.holding = false;
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
start = (e: MouseEvent) => {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
state.holding = true;
|
|
17
|
+
},
|
|
18
|
+
state = reactive({
|
|
10
19
|
complete: false,
|
|
11
20
|
holding: false
|
|
12
21
|
});
|
|
@@ -14,21 +23,16 @@ const hold = template.factory(
|
|
|
14
23
|
return html`
|
|
15
24
|
<div
|
|
16
25
|
class='button ${() => state.holding && 'button--holding'} ${() => state.complete && '--active'}'
|
|
17
|
-
onanimationend
|
|
26
|
+
onanimationend=${(e: AnimationEvent) => {
|
|
18
27
|
if (e.animationName === 'buttonHolding') {
|
|
19
28
|
state.complete = true;
|
|
20
29
|
}
|
|
21
|
-
}}
|
|
22
|
-
onclick
|
|
23
|
-
onmousedown
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
onmouseup='${() => {
|
|
28
|
-
if (!state.complete) {
|
|
29
|
-
state.holding = false;
|
|
30
|
-
}
|
|
31
|
-
}}'
|
|
30
|
+
}}
|
|
31
|
+
onclick=${() => {}}
|
|
32
|
+
onmousedown=${start}
|
|
33
|
+
onmouseup=${end}
|
|
34
|
+
ontouchstart=${start}
|
|
35
|
+
ontouchend=${end}
|
|
32
36
|
${attributes}
|
|
33
37
|
>
|
|
34
38
|
${() => content(state)}
|
|
@@ -50,7 +50,6 @@
|
|
|
50
50
|
--background: var(--background-hover);
|
|
51
51
|
--border-color: var(--border-color-hover);
|
|
52
52
|
--box-shadow: var(--box-shadow-hover);
|
|
53
|
-
--color: var(--color-hover);
|
|
54
53
|
--opacity: var(--opacity-hover);
|
|
55
54
|
--scale: var(--scale-hover);
|
|
56
55
|
}
|
|
@@ -59,13 +58,15 @@
|
|
|
59
58
|
--background: var(--background-pressed);
|
|
60
59
|
--border-color: var(--border-color-pressed);
|
|
61
60
|
--box-shadow: var(--box-shadow-pressed);
|
|
62
|
-
--color: var(--color-pressed);
|
|
63
61
|
--opacity: var(--opacity-pressed);
|
|
64
62
|
--scale: var(--scale-pressed);
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
#{tokens.state(active)} {
|
|
67
|
+
--background: var(--background-active);
|
|
68
|
+
--border-color: var(--border-color-active);
|
|
69
|
+
--box-shadow: var(--box-shadow-active);
|
|
69
70
|
--opacity: var(--opacity-active);
|
|
70
71
|
--scale: var(--scale-active);
|
|
71
72
|
}
|
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
--background: var(--background-hover);
|
|
45
45
|
--border-color: var(--border-color-hover);
|
|
46
46
|
--box-shadow: var(--box-shadow-hover);
|
|
47
|
-
--color: var(--color-hover);
|
|
48
47
|
--opacity: var(--opacity-hover);
|
|
49
48
|
--scale: var(--scale-hover);
|
|
50
49
|
}
|
|
@@ -53,13 +52,15 @@
|
|
|
53
52
|
--background: var(--background-pressed);
|
|
54
53
|
--border-color: var(--border-color-pressed);
|
|
55
54
|
--box-shadow: var(--box-shadow-pressed);
|
|
56
|
-
--color: var(--color-pressed);
|
|
57
55
|
--opacity: var(--opacity-pressed);
|
|
58
56
|
--scale: var(--scale-pressed);
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
59
|
|
|
62
60
|
#{tokens.state(active)} {
|
|
61
|
+
--background: var(--background-active);
|
|
62
|
+
--border-color: var(--border-color-active);
|
|
63
|
+
--box-shadow: var(--box-shadow-active);
|
|
63
64
|
--opacity: var(--opacity-active);
|
|
64
65
|
--scale: var(--scale-active);
|
|
65
66
|
}
|