@esportsplus/ui 0.27.4 → 0.28.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/grid/scss/index.scss +1 -1
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/components/input/index.d.ts +2 -20
- package/build/components/input/index.js +8 -9
- package/build/components/range/index.d.ts +2 -20
- package/build/components/range/index.js +9 -10
- package/build/components/row/scss/index.scss +1 -1
- package/build/components/textarea/index.d.ts +2 -20
- package/build/components/textarea/index.js +10 -11
- package/build/css-utilities/flex/scss/index.scss +1 -1
- package/build/css-utilities/gap/scss/index.scss +2 -0
- package/build/css-utilities/index.d.ts +2 -0
- package/build/css-utilities/index.js +2 -0
- package/build/css-utilities/scroller/scss/index.scss +2 -0
- package/package.json +1 -1
- package/src/components/grid/scss/index.scss +1 -1
- package/src/components/grid/scss/variables.scss +2 -2
- package/src/components/index.ts +0 -1
- package/src/components/input/index.ts +23 -29
- package/src/components/range/index.ts +31 -37
- package/src/components/row/scss/index.scss +1 -0
- package/src/components/row/scss/variables.scss +4 -0
- package/src/components/textarea/index.ts +24 -30
- package/src/css-utilities/flex/scss/variables.scss +0 -37
- package/src/css-utilities/gap/scss/index.scss +1 -0
- package/src/css-utilities/gap/scss/variables.scss +39 -0
- package/src/css-utilities/index.ts +2 -0
- package/src/css-utilities/scroller/scss/index.scss +8 -0
- package/src/css-utilities/scroller/scss/variables.scss +4 -0
- package/build/components/group/index.d.ts +0 -1
- package/build/components/group/index.js +0 -1
- package/build/components/group/scss/index.scss +0 -2
- package/src/components/group/index.ts +0 -1
- package/src/components/group/scss/index.scss +0 -38
- package/src/components/group/scss/variables.scss +0 -19
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.grid{--
|
|
1
|
+
@layer components {.grid{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--gap-horizontal)var(--gap-vertical);grid-template-columns:repeat(auto-fit,minmax(var(--min-width),var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -13,7 +13,6 @@ export { default as ellipsis } from './ellipsis/index.js';
|
|
|
13
13
|
export { default as form } from './form/index.js';
|
|
14
14
|
export * as frame from './frame/index.js';
|
|
15
15
|
export * as grid from './grid/index.js';
|
|
16
|
-
export * as group from './group/index.js';
|
|
17
16
|
export { default as highlight } from './highlight/index.js';
|
|
18
17
|
export { default as icon } from './icon/index.js';
|
|
19
18
|
export { default as input } from './input/index.js';
|
|
@@ -13,7 +13,6 @@ export { default as ellipsis } from './ellipsis/index.js';
|
|
|
13
13
|
export { default as form } from './form/index.js';
|
|
14
14
|
export * as frame from './frame/index.js';
|
|
15
15
|
export * as grid from './grid/index.js';
|
|
16
|
-
export * as group from './group/index.js';
|
|
17
16
|
export { default as highlight } from './highlight/index.js';
|
|
18
17
|
export { default as icon } from './icon/index.js';
|
|
19
18
|
export { default as input } from './input/index.js';
|
|
@@ -1,27 +1,9 @@
|
|
|
1
1
|
import { type Attributes } from '@esportsplus/template';
|
|
2
2
|
import './scss/index.scss';
|
|
3
|
-
|
|
3
|
+
declare const _default: (attributes: Attributes & {
|
|
4
4
|
state?: {
|
|
5
5
|
active: boolean;
|
|
6
6
|
error: string;
|
|
7
7
|
};
|
|
8
|
-
};
|
|
9
|
-
declare const _default: {
|
|
10
|
-
(): ReturnType<(this: {
|
|
11
|
-
attributes?: A | undefined;
|
|
12
|
-
content?: undefined;
|
|
13
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
14
|
-
<T extends A>(attributes: T): ReturnType<(this: {
|
|
15
|
-
attributes?: A | undefined;
|
|
16
|
-
content?: undefined;
|
|
17
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
18
|
-
<T extends never>(content: T): ReturnType<(this: {
|
|
19
|
-
attributes?: A | undefined;
|
|
20
|
-
content?: undefined;
|
|
21
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
22
|
-
(attributes: A, content: never): ReturnType<(this: {
|
|
23
|
-
attributes?: A | undefined;
|
|
24
|
-
content?: undefined;
|
|
25
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
26
|
-
};
|
|
8
|
+
}) => Node;
|
|
27
9
|
export default _default;
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import { reactive } from '@esportsplus/reactivity';
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import form from '../../components/form/index.js';
|
|
4
|
-
import template from '../../components/template/index.js';
|
|
5
4
|
import './scss/index.scss';
|
|
6
|
-
export default
|
|
5
|
+
export default (attributes) => {
|
|
7
6
|
let state = attributes.state || reactive({
|
|
8
7
|
active: false,
|
|
9
8
|
error: ''
|
|
10
9
|
});
|
|
11
10
|
return html `
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
<input
|
|
12
|
+
class='input'
|
|
13
|
+
${{
|
|
15
14
|
class: () => state.active && '--active',
|
|
16
15
|
onfocusin: () => {
|
|
17
16
|
state.active = true;
|
|
@@ -22,7 +21,7 @@ export default template.factory(function (attributes) {
|
|
|
22
21
|
onrender: form.input.onrender(state),
|
|
23
22
|
type: (attributes.type || 'text')
|
|
24
23
|
}}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
24
|
+
${attributes}
|
|
25
|
+
/>
|
|
26
|
+
`;
|
|
27
|
+
};
|
|
@@ -1,28 +1,10 @@
|
|
|
1
1
|
import { type Attributes } from '@esportsplus/template';
|
|
2
2
|
import './scss/index.scss';
|
|
3
|
-
|
|
3
|
+
declare const _default: (attributes: Attributes & {
|
|
4
4
|
state?: {
|
|
5
5
|
active: boolean;
|
|
6
6
|
error: string;
|
|
7
7
|
value: number;
|
|
8
8
|
};
|
|
9
|
-
};
|
|
10
|
-
declare const _default: {
|
|
11
|
-
(): ReturnType<(this: {
|
|
12
|
-
attributes?: A | undefined;
|
|
13
|
-
content?: undefined;
|
|
14
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
15
|
-
<T extends A>(attributes: T): ReturnType<(this: {
|
|
16
|
-
attributes?: A | undefined;
|
|
17
|
-
content?: undefined;
|
|
18
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
19
|
-
<T extends never>(content: T): ReturnType<(this: {
|
|
20
|
-
attributes?: A | undefined;
|
|
21
|
-
content?: undefined;
|
|
22
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
23
|
-
(attributes: A, content: never): ReturnType<(this: {
|
|
24
|
-
attributes?: A | undefined;
|
|
25
|
-
content?: undefined;
|
|
26
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
27
|
-
};
|
|
9
|
+
}) => Node;
|
|
28
10
|
export default _default;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { reactive, root } from '@esportsplus/reactivity';
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import form from '../../components/form/index.js';
|
|
4
|
-
import template from '../../components/template/index.js';
|
|
5
4
|
import './scss/index.scss';
|
|
6
|
-
export default
|
|
5
|
+
export default (attributes) => {
|
|
7
6
|
let state = attributes.state || reactive({
|
|
8
7
|
active: false,
|
|
9
8
|
error: '',
|
|
@@ -13,10 +12,10 @@ export default template.factory(function (attributes) {
|
|
|
13
12
|
state.value = Number(attributes.value);
|
|
14
13
|
}
|
|
15
14
|
return html `
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
<input
|
|
16
|
+
class='range --border-state --border-black'
|
|
17
|
+
type='range'
|
|
18
|
+
${{
|
|
20
19
|
class: () => state.active && '--active',
|
|
21
20
|
onfocusin: () => {
|
|
22
21
|
state.active = true;
|
|
@@ -30,7 +29,7 @@ export default template.factory(function (attributes) {
|
|
|
30
29
|
onrender: form.input.onrender(state),
|
|
31
30
|
value: root(() => attributes?.value || state.value || 0)
|
|
32
31
|
}}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
32
|
+
${attributes}
|
|
33
|
+
/>
|
|
34
|
+
`;
|
|
35
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.row{flex-wrap:wrap;justify-content:flex-start;width:100%;display:flex;position:relative}}
|
|
1
|
+
@layer components {.row{gap:var(--gap-vertical)var(--gap-horizontal);flex-wrap:wrap;justify-content:flex-start;width:100%;display:flex;position:relative}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,27 +1,9 @@
|
|
|
1
1
|
import { type Attributes } from '@esportsplus/template';
|
|
2
2
|
import './scss/index.scss';
|
|
3
|
-
|
|
3
|
+
declare const _default: (attributes: Attributes & {
|
|
4
4
|
state?: {
|
|
5
5
|
active: boolean;
|
|
6
6
|
error: string;
|
|
7
7
|
};
|
|
8
|
-
};
|
|
9
|
-
declare const _default: {
|
|
10
|
-
(): ReturnType<(this: {
|
|
11
|
-
attributes?: A | undefined;
|
|
12
|
-
content?: undefined;
|
|
13
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
14
|
-
<T extends A>(attributes: T): ReturnType<(this: {
|
|
15
|
-
attributes?: A | undefined;
|
|
16
|
-
content?: undefined;
|
|
17
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
18
|
-
<T extends never>(content: T): ReturnType<(this: {
|
|
19
|
-
attributes?: A | undefined;
|
|
20
|
-
content?: undefined;
|
|
21
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
22
|
-
(attributes: A, content: never): ReturnType<(this: {
|
|
23
|
-
attributes?: A | undefined;
|
|
24
|
-
content?: undefined;
|
|
25
|
-
}, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
|
|
26
|
-
};
|
|
8
|
+
}) => Node;
|
|
27
9
|
export default _default;
|
|
@@ -2,18 +2,17 @@ import { reactive } from '@esportsplus/reactivity';
|
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
4
|
import form from '../../components/form/index.js';
|
|
5
|
-
import template from '../../components/template/index.js';
|
|
6
5
|
import './scss/index.scss';
|
|
7
6
|
const OMIT = ['state'];
|
|
8
|
-
export default
|
|
7
|
+
export default (attributes) => {
|
|
9
8
|
let state = attributes.state || reactive({
|
|
10
9
|
active: false,
|
|
11
10
|
error: ''
|
|
12
11
|
});
|
|
13
12
|
return html `
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
<textarea
|
|
14
|
+
class='textarea'
|
|
15
|
+
${{
|
|
17
16
|
class: () => state.active && '--active',
|
|
18
17
|
onfocusin: () => {
|
|
19
18
|
state.active = true;
|
|
@@ -23,9 +22,9 @@ export default template.factory(function (attributes) {
|
|
|
23
22
|
},
|
|
24
23
|
onrender: form.input.onrender(state)
|
|
25
24
|
}}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
25
|
+
${omit(attributes, OMIT)}
|
|
26
|
+
>
|
|
27
|
+
${attributes?.value}
|
|
28
|
+
</textarea>
|
|
29
|
+
`;
|
|
30
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer css-utilities {.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-
|
|
1
|
+
@layer css-utilities {.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{gap:var(--gap-vertical)var(--gap-horizontal);display:flex}.--flex-center{flex-flow:wrap;place-content:center}.--flex-column{gap:var(--gap-vertical)0px;flex-flow:column;display:flex}.--flex-end{flex-flow:wrap;justify-content:flex-end}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-horizontal{flex-flow:wrap;justify-content:center}.--flex-horizontal-space-between{flex-flow:wrap;justify-content:space-between}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row;display:flex}.--flex-start{flex-flow:wrap;justify-content:flex-start}.--flex-vertical{flex-flow:wrap;align-items:center}.--flex-vertical-space-between{align-items:space-between;flex-flow:wrap}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer css-utilities {.--gap-border-width,.--gap-horizontal-border-width,.--gap-border-width-400,.--gap-horizontal-border-width-400,.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-500,.--gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--gap-border-width-600,.--gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-700,.--gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--gap-spacer-100,.--gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--gap-spacer-200,.--gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--gap-spacer-300,.--gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--gap-spacer,.--gap-horizontal-spacer,.--gap-spacer-400,.--gap-horizontal-spacer-400,.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-500,.--gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--gap-spacer-600,.--gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-700,.--gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--gap-0px,.--gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--gap-100,.--gap-horizontal-100{--gap-horizontal:var(--size-100)}.--gap-200,.--gap-horizontal-200{--gap-horizontal:var(--size-200)}.--gap-300,.--gap-horizontal-300{--gap-horizontal:var(--size-300)}.--gap-400,.--gap-horizontal-400{--gap-horizontal:var(--size-400)}.--gap-500,.--gap-horizontal-500{--gap-horizontal:var(--size-500)}.--gap-600,.--gap-horizontal-600{--gap-horizontal:var(--size-600)}.--gap-700,.--gap-horizontal-700{--gap-horizontal:var(--size-700)}.--gap-800,.--gap-horizontal-800{--gap-horizontal:var(--size-800)}.--gap-900,.--gap-horizontal-900{--gap-horizontal:var(--size-900)}.--gap-inherit,.--gap-horizontal-inherit{--gap-horizontal:inherit}.--gap-border-width,.--gap-vertical-border-width,.--gap-border-width-400,.--gap-vertical-border-width-400,.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-500,.--gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--gap-border-width-600,.--gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-700,.--gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--gap-spacer-100,.--gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--gap-spacer-200,.--gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--gap-spacer-300,.--gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--gap-spacer,.--gap-vertical-spacer,.--gap-spacer-400,.--gap-vertical-spacer-400,.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-500,.--gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--gap-spacer-600,.--gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-700,.--gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--gap-0px,.--gap-vertical-0px{--gap-vertical:var(--size-0px)}.--gap-100,.--gap-vertical-100{--gap-vertical:var(--size-100)}.--gap-200,.--gap-vertical-200{--gap-vertical:var(--size-200)}.--gap-300,.--gap-vertical-300{--gap-vertical:var(--size-300)}.--gap-400,.--gap-vertical-400{--gap-vertical:var(--size-400)}.--gap-500,.--gap-vertical-500{--gap-vertical:var(--size-500)}.--gap-600,.--gap-vertical-600{--gap-vertical:var(--size-600)}.--gap-700,.--gap-vertical-700{--gap-vertical:var(--size-700)}.--gap-800,.--gap-vertical-800{--gap-vertical:var(--size-800)}.--gap-900,.--gap-vertical-900{--gap-vertical:var(--size-900)}.--gap-inherit,.--gap-vertical-inherit{--gap-vertical:inherit}}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -7,12 +7,14 @@ import './disabled/scss/index.scss';
|
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
8
|
import './flicker/scss/index.scss';
|
|
9
9
|
import './focus/scss/index.scss';
|
|
10
|
+
import './gap/scss/index.scss';
|
|
10
11
|
import './glass/scss/index.scss';
|
|
11
12
|
import './hidden/scss/index.scss';
|
|
12
13
|
import './inline/scss/index.scss';
|
|
13
14
|
import './line-height/scss/index.scss';
|
|
14
15
|
import './not-allowed/scss/index.scss';
|
|
15
16
|
import './pointer/scss/index.scss';
|
|
17
|
+
import './scroller/scss/index.scss';
|
|
16
18
|
import './size/scss/index.scss';
|
|
17
19
|
import './squircle/scss/index.scss';
|
|
18
20
|
import './text/scss/index.scss';
|
|
@@ -7,12 +7,14 @@ import './disabled/scss/index.scss';
|
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
8
|
import './flicker/scss/index.scss';
|
|
9
9
|
import './focus/scss/index.scss';
|
|
10
|
+
import './gap/scss/index.scss';
|
|
10
11
|
import './glass/scss/index.scss';
|
|
11
12
|
import './hidden/scss/index.scss';
|
|
12
13
|
import './inline/scss/index.scss';
|
|
13
14
|
import './line-height/scss/index.scss';
|
|
14
15
|
import './not-allowed/scss/index.scss';
|
|
15
16
|
import './pointer/scss/index.scss';
|
|
17
|
+
import './scroller/scss/index.scss';
|
|
16
18
|
import './size/scss/index.scss';
|
|
17
19
|
import './squircle/scss/index.scss';
|
|
18
20
|
import './text/scss/index.scss';
|
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -13,7 +13,6 @@ export { default as ellipsis } from './ellipsis';
|
|
|
13
13
|
export { default as form } from './form';
|
|
14
14
|
export * as frame from './frame';
|
|
15
15
|
export * as grid from './grid';
|
|
16
|
-
export * as group from './group';
|
|
17
16
|
export { default as highlight } from './highlight';
|
|
18
17
|
export { default as icon } from './icon';
|
|
19
18
|
export { default as input } from './input';
|
|
@@ -1,36 +1,30 @@
|
|
|
1
1
|
import { reactive } from '@esportsplus/reactivity';
|
|
2
2
|
import { html, type Attributes } from '@esportsplus/template';
|
|
3
3
|
import form from '~/components/form';
|
|
4
|
-
import template from '~/components/template';
|
|
5
4
|
import './scss/index.scss';
|
|
6
5
|
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
export default (attributes: Attributes & { state?: { active: boolean, error: string } }) => {
|
|
8
|
+
let state = attributes.state || reactive({
|
|
9
|
+
active: false,
|
|
10
|
+
error: ''
|
|
11
|
+
});
|
|
9
12
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
onrender: form.input.onrender(state),
|
|
30
|
-
type: (attributes.type || 'text') as string
|
|
31
|
-
}}
|
|
32
|
-
${attributes}
|
|
33
|
-
/>
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
);
|
|
13
|
+
return html`
|
|
14
|
+
<input
|
|
15
|
+
class='input'
|
|
16
|
+
${{
|
|
17
|
+
class: () => state.active && '--active',
|
|
18
|
+
onfocusin: () => {
|
|
19
|
+
state.active = true;
|
|
20
|
+
},
|
|
21
|
+
onfocusout: () => {
|
|
22
|
+
state.active = false;
|
|
23
|
+
},
|
|
24
|
+
onrender: form.input.onrender(state),
|
|
25
|
+
type: (attributes.type || 'text') as string
|
|
26
|
+
}}
|
|
27
|
+
${attributes}
|
|
28
|
+
/>
|
|
29
|
+
`;
|
|
30
|
+
};
|
|
@@ -1,45 +1,39 @@
|
|
|
1
1
|
import { reactive, root } from '@esportsplus/reactivity';
|
|
2
2
|
import { html, type Attributes } from '@esportsplus/template';
|
|
3
3
|
import form from '~/components/form';
|
|
4
|
-
import template from '~/components/template';
|
|
5
4
|
import './scss/index.scss';
|
|
6
5
|
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
export default (attributes: Attributes & { state?: { active: boolean, error: string, value: number } }) => {
|
|
8
|
+
let state = attributes.state || reactive({
|
|
9
|
+
active: false,
|
|
10
|
+
error: '',
|
|
11
|
+
value: 0
|
|
12
|
+
});
|
|
9
13
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
function(attributes) {
|
|
13
|
-
let state = attributes.state || reactive({
|
|
14
|
-
active: false,
|
|
15
|
-
error: '',
|
|
16
|
-
value: 0
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
if (attributes?.value) {
|
|
20
|
-
state.value = Number( attributes.value );
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return html`
|
|
24
|
-
<input
|
|
25
|
-
class='range --border-state --border-black'
|
|
26
|
-
type='range'
|
|
27
|
-
${{
|
|
28
|
-
class: () => state.active && '--active',
|
|
29
|
-
onfocusin: () => {
|
|
30
|
-
state.active = true;
|
|
31
|
-
},
|
|
32
|
-
onfocusout: () => {
|
|
33
|
-
state.active = false;
|
|
34
|
-
},
|
|
35
|
-
oninput: (e) => {
|
|
36
|
-
state.value = Number((e.target as HTMLInputElement).value);
|
|
37
|
-
},
|
|
38
|
-
onrender: form.input.onrender(state),
|
|
39
|
-
value: root(() => (attributes?.value as number) || state.value || 0)
|
|
40
|
-
}}
|
|
41
|
-
${attributes}
|
|
42
|
-
/>
|
|
43
|
-
`;
|
|
14
|
+
if (attributes?.value) {
|
|
15
|
+
state.value = Number( attributes.value );
|
|
44
16
|
}
|
|
45
|
-
|
|
17
|
+
|
|
18
|
+
return html`
|
|
19
|
+
<input
|
|
20
|
+
class='range --border-state --border-black'
|
|
21
|
+
type='range'
|
|
22
|
+
${{
|
|
23
|
+
class: () => state.active && '--active',
|
|
24
|
+
onfocusin: () => {
|
|
25
|
+
state.active = true;
|
|
26
|
+
},
|
|
27
|
+
onfocusout: () => {
|
|
28
|
+
state.active = false;
|
|
29
|
+
},
|
|
30
|
+
oninput: (e) => {
|
|
31
|
+
state.value = Number((e.target as HTMLInputElement).value);
|
|
32
|
+
},
|
|
33
|
+
onrender: form.input.onrender(state),
|
|
34
|
+
value: root(() => (attributes?.value as number) || state.value || 0)
|
|
35
|
+
}}
|
|
36
|
+
${attributes}
|
|
37
|
+
/>
|
|
38
|
+
`;
|
|
39
|
+
};
|
|
@@ -2,40 +2,34 @@ import { reactive } from '@esportsplus/reactivity';
|
|
|
2
2
|
import { html, type Attributes } from '@esportsplus/template';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
4
|
import form from '~/components/form';
|
|
5
|
-
import template from '~/components/template';
|
|
6
5
|
import './scss/index.scss';
|
|
7
6
|
|
|
8
7
|
|
|
9
|
-
type A = Attributes & { state?: { active: boolean, error: string } };
|
|
10
|
-
|
|
11
|
-
|
|
12
8
|
const OMIT = ['state'];
|
|
13
9
|
|
|
14
10
|
|
|
15
|
-
export default
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
});
|
|
11
|
+
export default (attributes: Attributes & { state?: { active: boolean, error: string } }) => {
|
|
12
|
+
let state = attributes.state || reactive({
|
|
13
|
+
active: false,
|
|
14
|
+
error: ''
|
|
15
|
+
});
|
|
21
16
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
);
|
|
17
|
+
return html`
|
|
18
|
+
<textarea
|
|
19
|
+
class='textarea'
|
|
20
|
+
${{
|
|
21
|
+
class: () => state.active && '--active',
|
|
22
|
+
onfocusin: () => {
|
|
23
|
+
state.active = true;
|
|
24
|
+
},
|
|
25
|
+
onfocusout: () => {
|
|
26
|
+
state.active = false;
|
|
27
|
+
},
|
|
28
|
+
onrender: form.input.onrender(state)
|
|
29
|
+
}}
|
|
30
|
+
${omit(attributes, OMIT)}
|
|
31
|
+
>
|
|
32
|
+
${attributes?.value as string}
|
|
33
|
+
</textarea>
|
|
34
|
+
`;
|
|
35
|
+
};
|
|
@@ -14,41 +14,4 @@
|
|
|
14
14
|
--gap-horizontal: 0px;
|
|
15
15
|
--gap-vertical: 0px;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
&-gap {
|
|
19
|
-
@each $direction in 'horizontal' 'vertical' {
|
|
20
|
-
&,
|
|
21
|
-
&-#{$direction} {
|
|
22
|
-
@each $key in lib.map-keys(tokens.$border-width) {
|
|
23
|
-
&-border-width {
|
|
24
|
-
--gap-#{$direction}: var(--border-width-400);
|
|
25
|
-
|
|
26
|
-
&-#{$key} {
|
|
27
|
-
--gap-#{$direction}: var(--border-width-#{$key});
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@each $key in lib.map-keys(tokens.$spacer) {
|
|
33
|
-
&-spacer {
|
|
34
|
-
--gap-#{$direction}: var(--spacer-400);
|
|
35
|
-
|
|
36
|
-
&-#{$key} {
|
|
37
|
-
--gap-#{$direction}: var(--spacer-#{$key});
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@each $key in lib.map-keys(tokens.$size) {
|
|
43
|
-
&-#{$key} {
|
|
44
|
-
--gap-#{$direction}: var(--size-#{$key});
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
&-inherit {
|
|
49
|
-
--gap-#{$direction}: inherit;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
17
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@use 'variables';
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@use '/lib';
|
|
2
|
+
@use '/tokens';
|
|
3
|
+
|
|
4
|
+
.--gap {
|
|
5
|
+
@each $direction in 'horizontal' 'vertical' {
|
|
6
|
+
&,
|
|
7
|
+
&-#{$direction} {
|
|
8
|
+
@each $key in lib.map-keys(tokens.$border-width) {
|
|
9
|
+
&-border-width {
|
|
10
|
+
--gap-#{$direction}: var(--border-width-400);
|
|
11
|
+
|
|
12
|
+
&-#{$key} {
|
|
13
|
+
--gap-#{$direction}: var(--border-width-#{$key});
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@each $key in lib.map-keys(tokens.$spacer) {
|
|
19
|
+
&-spacer {
|
|
20
|
+
--gap-#{$direction}: var(--spacer-400);
|
|
21
|
+
|
|
22
|
+
&-#{$key} {
|
|
23
|
+
--gap-#{$direction}: var(--spacer-#{$key});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@each $key in lib.map-keys(tokens.$size) {
|
|
29
|
+
&-#{$key} {
|
|
30
|
+
--gap-#{$direction}: var(--size-#{$key});
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-inherit {
|
|
35
|
+
--gap-#{$direction}: inherit;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -7,12 +7,14 @@ import './disabled/scss/index.scss';
|
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
8
|
import './flicker/scss/index.scss';
|
|
9
9
|
import './focus/scss/index.scss';
|
|
10
|
+
import './gap/scss/index.scss';
|
|
10
11
|
import './glass/scss/index.scss';
|
|
11
12
|
import './hidden/scss/index.scss';
|
|
12
13
|
import './inline/scss/index.scss';
|
|
13
14
|
import './line-height/scss/index.scss';
|
|
14
15
|
import './not-allowed/scss/index.scss';
|
|
15
16
|
import './pointer/scss/index.scss';
|
|
17
|
+
import './scroller/scss/index.scss';
|
|
16
18
|
import './size/scss/index.scss';
|
|
17
19
|
import './squircle/scss/index.scss';
|
|
18
20
|
import './text/scss/index.scss';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './scss/index.scss';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './scss/index.scss';
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
@layer components {.group{--margin-horizontal:var(--size-400)}.group-item{--width:auto}.group.--flex-column .group-item{--width:100%}.group--scroller .group-item{--margin-vertical:0px}.group{margin:0 calc(var(--margin-horizontal)/-2);width:calc(100% + var(--margin-horizontal));flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.group-item{margin:var(--margin-vertical)calc(var(--margin-horizontal)/2)0;width:var(--width);display:flex;position:relative}.group-item[class*=--width]{width:calc(var(--width) - var(--margin-horizontal))}}
|
|
2
|
-
/*$vite$:1*/
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './scss/index.scss';
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
@use 'variables';
|
|
2
|
-
|
|
3
|
-
.group {
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-wrap: wrap;
|
|
6
|
-
justify-content: flex-start;
|
|
7
|
-
margin: 0 calc(var(--margin-horizontal) / -2);
|
|
8
|
-
position: relative;
|
|
9
|
-
width: calc(100% + var(--margin-horizontal));
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
&--offset {
|
|
13
|
-
@each $direction in 'bottom' 'top' {
|
|
14
|
-
&-#{$direction} {
|
|
15
|
-
margin-#{$direction}: calc(var(--margin-vertical) * -1);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&--scroller {
|
|
21
|
-
flex-flow: row;
|
|
22
|
-
margin-bottom: calc(var(--scrollbar-width) * -1);
|
|
23
|
-
overflow-y: hidden;
|
|
24
|
-
padding-bottom: var(--scrollbar-width);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
&-item {
|
|
29
|
-
display: flex;
|
|
30
|
-
margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
|
|
31
|
-
position: relative;
|
|
32
|
-
width: var(--width);
|
|
33
|
-
|
|
34
|
-
&[class*='--width'] {
|
|
35
|
-
width: calc(var(--width) - var(--margin-horizontal));
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|