@esportsplus/ui 0.32.0 → 0.32.2
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/select/index.d.ts +1 -0
- package/build/components/select/index.js +3 -6
- package/build/components/select/scss/index.scss +1 -1
- package/package.json +1 -1
- package/src/components/select/index.ts +4 -6
- package/src/components/select/scss/index.scss +9 -11
- package/src/components/select/scss/variables.scss +0 -2
|
@@ -2,6 +2,7 @@ import { Renderable, type Attributes } from '@esportsplus/template';
|
|
|
2
2
|
import { Attributes as Attr } from '../../components/scrollbar/index.js';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
type A = {
|
|
5
|
+
arrow?: Attributes;
|
|
5
6
|
options: Record<number | string, Renderable<unknown>>;
|
|
6
7
|
option?: Attributes;
|
|
7
8
|
scrollbar?: Attributes;
|
|
@@ -7,6 +7,7 @@ import scrollbar from '../../components/scrollbar/index.js';
|
|
|
7
7
|
import template from '../../components/template/index.js';
|
|
8
8
|
import './scss/index.scss';
|
|
9
9
|
const OMIT = [
|
|
10
|
+
'arrow',
|
|
10
11
|
'options',
|
|
11
12
|
'option',
|
|
12
13
|
'scrollbar',
|
|
@@ -52,13 +53,9 @@ const select = template.factory(function (attributes, content) {
|
|
|
52
53
|
}}
|
|
53
54
|
${omit(attributes, OMIT)}
|
|
54
55
|
>
|
|
55
|
-
${content ||
|
|
56
|
-
<div class='select-content text'>
|
|
57
|
-
${() => options[state.selected] || '-'}
|
|
58
|
-
</div>
|
|
59
|
-
`}
|
|
56
|
+
${content || (() => options[state.selected] || '-')}
|
|
60
57
|
|
|
61
|
-
<div class='select-arrow'></div>
|
|
58
|
+
<div class='select-arrow' ${attributes.arrow}></div>
|
|
62
59
|
|
|
63
60
|
<input class='select-tag'
|
|
64
61
|
${{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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-400);--
|
|
1
|
+
@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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-400);--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select: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)}.select: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)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)*2 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal);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;flex-wrap:wrap;width:100%;display:flex;position:relative}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-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
|
@@ -9,6 +9,7 @@ import './scss/index.scss';
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
const OMIT = [
|
|
12
|
+
'arrow',
|
|
12
13
|
'options',
|
|
13
14
|
'option',
|
|
14
15
|
'scrollbar',
|
|
@@ -18,6 +19,7 @@ const OMIT = [
|
|
|
18
19
|
|
|
19
20
|
|
|
20
21
|
type A = {
|
|
22
|
+
arrow?: Attributes;
|
|
21
23
|
options: Record<number | string, Renderable<unknown>>;
|
|
22
24
|
option?: Attributes;
|
|
23
25
|
scrollbar?: Attributes;
|
|
@@ -87,13 +89,9 @@ const select = template.factory<A>(
|
|
|
87
89
|
}}
|
|
88
90
|
${omit(attributes, OMIT)}
|
|
89
91
|
>
|
|
90
|
-
${content ||
|
|
91
|
-
<div class='select-content text'>
|
|
92
|
-
${() => options[ state.selected! ] || '-'}
|
|
93
|
-
</div>
|
|
94
|
-
`}
|
|
92
|
+
${content || (() => options[ state.selected! ] || '-')}
|
|
95
93
|
|
|
96
|
-
<div class='select-arrow'></div>
|
|
94
|
+
<div class='select-arrow' ${attributes.arrow}></div>
|
|
97
95
|
|
|
98
96
|
<input class='select-tag'
|
|
99
97
|
${{
|
|
@@ -2,9 +2,16 @@
|
|
|
2
2
|
@use 'variables';
|
|
3
3
|
|
|
4
4
|
.select {
|
|
5
|
+
background: var(--background);
|
|
6
|
+
border: var(--border-width) var(--border-style) var(--border-color);
|
|
7
|
+
border-radius: var(--border-radius);
|
|
8
|
+
color: var(--color);
|
|
5
9
|
cursor: pointer;
|
|
6
10
|
display: flex;
|
|
7
11
|
flex-wrap: wrap;
|
|
12
|
+
font-size: var(--font-size);
|
|
13
|
+
line-height: var(--line-height);
|
|
14
|
+
padding: var(--padding-vertical) calc((var(--padding-horizontal) * 2) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
|
|
8
15
|
position: relative;
|
|
9
16
|
transition:
|
|
10
17
|
background var(--transition-duration) ease-in-out,
|
|
@@ -16,8 +23,8 @@
|
|
|
16
23
|
|
|
17
24
|
&-arrow {
|
|
18
25
|
@include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
|
|
19
|
-
border-color: var(--
|
|
20
|
-
border-style:
|
|
26
|
+
border-color: var(--color);
|
|
27
|
+
border-style: solid;
|
|
21
28
|
border-width: 0 var(--border-width) var(--border-width) 0;
|
|
22
29
|
content: '';
|
|
23
30
|
height: var(--arrow-size);
|
|
@@ -25,15 +32,6 @@
|
|
|
25
32
|
width: var(--arrow-size);
|
|
26
33
|
}
|
|
27
34
|
|
|
28
|
-
&-content {
|
|
29
|
-
background: var(--background);
|
|
30
|
-
border: var(--border-width) var(--border-style) var(--border-color);
|
|
31
|
-
border-radius: var(--border-radius);
|
|
32
|
-
font-size: var(--font-size);
|
|
33
|
-
line-height: var(--line-height);
|
|
34
|
-
padding: var(--padding-vertical) calc((var(--padding-horizontal) * 2) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
35
|
// Hide HTML Field Element
|
|
38
36
|
&-tag {
|
|
39
37
|
@include lib.position(absolute, 0 null null 0);
|
|
@@ -11,8 +11,6 @@
|
|
|
11
11
|
--border-color: var(--border-color-default);
|
|
12
12
|
--border-color-default: var(--background);
|
|
13
13
|
--border-radius: var(--border-radius-400);
|
|
14
|
-
--border-style: solid;
|
|
15
|
-
--border-width: 0px;
|
|
16
14
|
--color: var(--color-default);
|
|
17
15
|
--color-active: var(--color-default);
|
|
18
16
|
--color-default: var(--color-text-400);
|