@esportsplus/ui 0.27.0 → 0.27.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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:
|
|
1
|
+
@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height))/2)var(--margin-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;width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -2,9 +2,8 @@ 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?: Renderable<unknown>;
|
|
6
5
|
options: Record<number | string, Renderable<unknown>>;
|
|
7
|
-
option?:
|
|
6
|
+
option?: Attributes;
|
|
8
7
|
scrollbar?: Attributes;
|
|
9
8
|
'scrollbar-container-content'?: Attributes;
|
|
10
9
|
'tooltip-content'?: Attributes & {
|
|
@@ -21,24 +20,6 @@ type A = {
|
|
|
21
20
|
selected?: number | string;
|
|
22
21
|
};
|
|
23
22
|
}) & Attributes & Attr;
|
|
24
|
-
declare const option: {
|
|
25
|
-
(): ReturnType<(this: {
|
|
26
|
-
attributes?: Attributes | undefined;
|
|
27
|
-
content?: Renderable<any>;
|
|
28
|
-
}, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
|
|
29
|
-
<T extends Attributes>(attributes: T): ReturnType<(this: {
|
|
30
|
-
attributes?: Attributes | undefined;
|
|
31
|
-
content?: Renderable<any>;
|
|
32
|
-
}, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
|
|
33
|
-
<T extends Renderable<any>>(content: T): ReturnType<(this: {
|
|
34
|
-
attributes?: Attributes | undefined;
|
|
35
|
-
content?: Renderable<any>;
|
|
36
|
-
}, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
|
|
37
|
-
(attributes: Attributes, content: Renderable<any>): ReturnType<(this: {
|
|
38
|
-
attributes?: Attributes | undefined;
|
|
39
|
-
content?: Renderable<any>;
|
|
40
|
-
}, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
|
|
41
|
-
};
|
|
42
23
|
declare const select: {
|
|
43
24
|
(): ReturnType<(this: {
|
|
44
25
|
attributes?: A | undefined;
|
|
@@ -7,7 +7,6 @@ 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',
|
|
11
10
|
'options',
|
|
12
11
|
'option',
|
|
13
12
|
'scrollbar',
|
|
@@ -28,15 +27,8 @@ function set(state, value) {
|
|
|
28
27
|
field = null;
|
|
29
28
|
}
|
|
30
29
|
}
|
|
31
|
-
const option = template.factory(function (attributes, content) {
|
|
32
|
-
return html `
|
|
33
|
-
<div class='link --padding-400' ${attributes}>
|
|
34
|
-
${content}
|
|
35
|
-
</div>
|
|
36
|
-
`;
|
|
37
|
-
});
|
|
38
30
|
const select = template.factory(function (attributes, content) {
|
|
39
|
-
let options = attributes
|
|
31
|
+
let { options, option } = attributes, state = attributes.state || reactive({
|
|
40
32
|
active: false,
|
|
41
33
|
error: '',
|
|
42
34
|
render: false,
|
|
@@ -59,7 +51,7 @@ const select = template.factory(function (attributes, content) {
|
|
|
59
51
|
</div>
|
|
60
52
|
`}
|
|
61
53
|
|
|
62
|
-
|
|
54
|
+
<div class='select-arrow'></div>
|
|
63
55
|
|
|
64
56
|
<input class='select-tag'
|
|
65
57
|
${{
|
|
@@ -74,7 +66,7 @@ const select = template.factory(function (attributes, content) {
|
|
|
74
66
|
if (!state.render) {
|
|
75
67
|
return;
|
|
76
68
|
}
|
|
77
|
-
let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])))
|
|
69
|
+
let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])));
|
|
78
70
|
return scrollbar({
|
|
79
71
|
...attributes['tooltip-content'],
|
|
80
72
|
class: [
|
|
@@ -97,12 +89,15 @@ const select = template.factory(function (attributes, content) {
|
|
|
97
89
|
},
|
|
98
90
|
scrollbar: attributes.scrollbar,
|
|
99
91
|
'scrollbar-container-content': attributes['scrollbar-container-content']
|
|
100
|
-
}, keys.map((key) =>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
92
|
+
}, keys.map((key) => html `
|
|
93
|
+
<div
|
|
94
|
+
class='link --padding-400 ${() => selected[key] && '--active'}'
|
|
95
|
+
data-key='${key}'
|
|
96
|
+
${option}
|
|
97
|
+
>
|
|
98
|
+
${options[key]}
|
|
99
|
+
</div>
|
|
100
|
+
`));
|
|
106
101
|
}}
|
|
107
102
|
</label>
|
|
108
103
|
`;
|
package/package.json
CHANGED
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
--background-pressed: var(--background-default);
|
|
9
9
|
--border-width: var(--border-width-700);
|
|
10
10
|
--height: var(--size-200);
|
|
11
|
-
--margin-horizontal:
|
|
12
|
-
--margin-vertical:
|
|
11
|
+
--margin-horizontal: 0px;
|
|
12
|
+
--margin-vertical: 0px;
|
|
13
13
|
--thumb-background: var(--color-white-400);
|
|
14
14
|
--thumb-size: var(--size-400);
|
|
15
15
|
--width: 100%;
|
|
@@ -9,7 +9,6 @@ import './scss/index.scss';
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
const OMIT = [
|
|
12
|
-
'arrow',
|
|
13
12
|
'options',
|
|
14
13
|
'option',
|
|
15
14
|
'scrollbar',
|
|
@@ -19,9 +18,8 @@ const OMIT = [
|
|
|
19
18
|
|
|
20
19
|
|
|
21
20
|
type A = {
|
|
22
|
-
arrow?: Renderable<unknown>;
|
|
23
21
|
options: Record<number | string, Renderable<unknown>>;
|
|
24
|
-
option?:
|
|
22
|
+
option?: Attributes;
|
|
25
23
|
scrollbar?: Attributes;
|
|
26
24
|
'scrollbar-container-content'?: Attributes;
|
|
27
25
|
'tooltip-content'?: Attributes & { direction?: string };
|
|
@@ -60,20 +58,9 @@ function set(state: { active: boolean }, value: boolean) {
|
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
60
|
|
|
63
|
-
|
|
64
|
-
const option = template.factory(
|
|
65
|
-
function(attributes, content) {
|
|
66
|
-
return html`
|
|
67
|
-
<div class='link --padding-400' ${attributes}>
|
|
68
|
-
${content}
|
|
69
|
-
</div>
|
|
70
|
-
`;
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
|
|
74
61
|
const select = template.factory<A>(
|
|
75
62
|
function(attributes: A, content) {
|
|
76
|
-
let options = attributes
|
|
63
|
+
let { options, option } = attributes,
|
|
77
64
|
state = attributes.state || reactive({
|
|
78
65
|
active: false,
|
|
79
66
|
error: '',
|
|
@@ -99,7 +86,7 @@ const select = template.factory<A>(
|
|
|
99
86
|
</div>
|
|
100
87
|
`}
|
|
101
88
|
|
|
102
|
-
|
|
89
|
+
<div class='select-arrow'></div>
|
|
103
90
|
|
|
104
91
|
<input class='select-tag'
|
|
105
92
|
${{
|
|
@@ -118,8 +105,7 @@ const select = template.factory<A>(
|
|
|
118
105
|
let keys = Object.keys(options),
|
|
119
106
|
selected = reactive(
|
|
120
107
|
Object.fromEntries( keys.map(key => [key, false]) )
|
|
121
|
-
)
|
|
122
|
-
template = attributes.option || option;
|
|
108
|
+
);
|
|
123
109
|
|
|
124
110
|
return scrollbar(
|
|
125
111
|
{
|
|
@@ -149,12 +135,15 @@ const select = template.factory<A>(
|
|
|
149
135
|
scrollbar: attributes.scrollbar,
|
|
150
136
|
'scrollbar-container-content': attributes['scrollbar-container-content']
|
|
151
137
|
},
|
|
152
|
-
keys.map((key) =>
|
|
153
|
-
|
|
154
|
-
class
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
138
|
+
keys.map((key) => html`
|
|
139
|
+
<div
|
|
140
|
+
class='link --padding-400 ${() => selected[key] && '--active'}'
|
|
141
|
+
data-key='${key}'
|
|
142
|
+
${option}
|
|
143
|
+
>
|
|
144
|
+
${options[key]}
|
|
145
|
+
</div>
|
|
146
|
+
`)
|
|
158
147
|
);
|
|
159
148
|
}}
|
|
160
149
|
</label>
|