@esportsplus/ui 0.10.4 → 0.10.6
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/counter/index.d.ts +6 -3
- package/build/components/counter/index.js +14 -8
- package/build/components/counter/scss/index.scss +1 -1
- package/build/css-utilities/flicker/scss/index.scss +2 -0
- package/package.json +1 -1
- package/src/components/counter/index.ts +26 -9
- package/src/components/counter/scss/index.scss +1 -1
- package/src/css-utilities/flicker/scss/index.scss +15 -0
- package/src/css-utilities/flicker/scss/variables.scss +5 -0
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import './scss/index.scss';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Options = {
|
|
3
|
+
attributes?: Record<string, unknown>;
|
|
4
|
+
currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
|
|
5
|
+
decimals?: number;
|
|
4
6
|
delay?: number;
|
|
5
7
|
max?: number;
|
|
6
8
|
suffix?: string;
|
|
7
9
|
value: number;
|
|
8
|
-
}
|
|
10
|
+
};
|
|
11
|
+
declare const _default: ({ attributes, currency, decimals, delay, max, suffix, value }: Options) => {
|
|
9
12
|
html: import("@esportsplus/template/build/types").RenderableTemplate;
|
|
10
13
|
state: Prettify<{ [K in keyof T]: import("@esportsplus/reactivity").Infer<T[K]>; } & {
|
|
11
14
|
dispose: VoidFunction;
|
|
@@ -2,24 +2,30 @@ import { effect, reactive } from '@esportsplus/reactivity';
|
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
let formatters = {};
|
|
5
|
-
export default ({ currency, delay, max, suffix, value }) => {
|
|
6
|
-
let api = reactive({ value: -1 }), formatter = currency === 'IGNORE'
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
export default ({ attributes, currency, decimals, delay, max, suffix, value }) => {
|
|
6
|
+
let api = reactive({ value: -1 }), formatter = currency === 'IGNORE'
|
|
7
|
+
? undefined
|
|
8
|
+
: formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
|
|
9
|
+
style: 'currency',
|
|
10
|
+
currency: currency || 'USD'
|
|
11
|
+
}), rendering = true, state = reactive({
|
|
10
12
|
length: 0,
|
|
11
13
|
render: []
|
|
12
14
|
});
|
|
15
|
+
decimals ??= 2;
|
|
13
16
|
effect(() => {
|
|
14
17
|
if (api.value !== -1) {
|
|
15
18
|
value = api.value;
|
|
16
19
|
}
|
|
17
|
-
let padding = (max || value).toFixed(
|
|
20
|
+
let padding = (max || value).toFixed(decimals).length - value.toFixed(decimals).length, values = value.toString().padStart(value.toString().length + padding, '1');
|
|
18
21
|
if (formatter) {
|
|
19
22
|
values = formatter.format(values);
|
|
20
23
|
}
|
|
21
24
|
else {
|
|
22
|
-
values = Number(values).toLocaleString(
|
|
25
|
+
values = Number(values).toLocaleString([], {
|
|
26
|
+
minimumFractionDigits: 0,
|
|
27
|
+
maximumFractionDigits: decimals
|
|
28
|
+
});
|
|
23
29
|
}
|
|
24
30
|
values = values.split('');
|
|
25
31
|
if (suffix) {
|
|
@@ -41,7 +47,7 @@ export default ({ currency, delay, max, suffix, value }) => {
|
|
|
41
47
|
});
|
|
42
48
|
return {
|
|
43
49
|
html: html `
|
|
44
|
-
<div class='counter'>
|
|
50
|
+
<div class='counter' ${attributes}>
|
|
45
51
|
${() => {
|
|
46
52
|
let n = state.length;
|
|
47
53
|
if (n === 0) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.counter{--font-size:clamp(2rem,4vw + 1rem,8rem);--line-height:calc(var(--font-size)*1.5);--mask-size:.24;--timing-function:var(--timing-bounce-out);--transition-duration:2s}.counter-character{--font-weight:var(--font-weight-400);--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter{transform-style:flat;place-items:center;gap:2px;
|
|
1
|
+
@layer components {.counter{--font-size:clamp(2rem,4vw + 1rem,8rem);--line-height:calc(var(--font-size)*1.5);--mask-size:.24;--timing-function:var(--timing-bounce-out);--transition-duration:2s}.counter-character{--font-weight:var(--font-weight-400);--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter{transition:transform calc(var(--transition-duration)/4)var(--transition-duration);transform-style:flat;place-items:center;gap:2px;display:flex}.counter-character,.counter-character-track span{color:#0000;transform-style:flat;background:linear-gradient(#fafafa 50%,#737373) fixed;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;line-height:var(--line-height);-webkit-mask:linear-gradient(transparent,white calc(1lh*var(--mask-size))calc(100% - 1lh*var(--mask-size)),transparent);-webkit-mask:linear-gradient(transparent,white calc(1lh*var(--mask-size))calc(100% - 1lh*var(--mask-size)),transparent);mask:linear-gradient(transparent,white calc(1lh*var(--mask-size))calc(100% - 1lh*var(--mask-size)),transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size)*var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:var(--line-height);overflow:visible}.counter-character--fraction .counter-character-track span{padding:calc((var(--line-height) - var(--font-size))*.2)0;flex-direction:column;align-items:end;display:flex}.counter-character--symbol{font-size:calc(var(--font-size)*var(--scale));opacity:var(--opacity);margin-right:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1)*var(--line-height)*-1);transition:translate var(--transition-duration)var(--timing-function);display:grid}.counter-character-track span{transform-style:flat;height:1lh}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -3,35 +3,52 @@ import { html } from '@esportsplus/template';
|
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
type Options = {
|
|
7
|
+
attributes?: Record<string, unknown>;
|
|
8
|
+
currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
|
|
9
|
+
decimals?: number;
|
|
10
|
+
delay?: number;
|
|
11
|
+
max?: number;
|
|
12
|
+
suffix?: string;
|
|
13
|
+
value: number;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
let formatters: Record<string, Intl.NumberFormat> = {};
|
|
7
18
|
|
|
8
19
|
|
|
9
|
-
|
|
10
|
-
export default ({ currency, delay, max, suffix, value }: { currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD', delay?: number, max?: number, suffix?: string, value: number }) => {
|
|
20
|
+
export default ({ attributes, currency, decimals, delay, max, suffix, value }: Options) => {
|
|
11
21
|
let api = reactive({ value: -1 }),
|
|
12
|
-
formatter = currency === 'IGNORE'
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
22
|
+
formatter = currency === 'IGNORE'
|
|
23
|
+
? undefined
|
|
24
|
+
: formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
|
|
25
|
+
style: 'currency',
|
|
26
|
+
currency: currency || 'USD'
|
|
27
|
+
}),
|
|
16
28
|
rendering = true,
|
|
17
29
|
state = reactive({
|
|
18
30
|
length: 0,
|
|
19
31
|
render: [] as string[]
|
|
20
32
|
});
|
|
21
33
|
|
|
34
|
+
decimals ??= 2;
|
|
35
|
+
|
|
22
36
|
effect(() => {
|
|
23
37
|
if (api.value !== -1) {
|
|
24
38
|
value = api.value;
|
|
25
39
|
}
|
|
26
40
|
|
|
27
|
-
let padding = (max || value).toFixed(
|
|
41
|
+
let padding = (max || value).toFixed(decimals).length - value.toFixed(decimals).length,
|
|
28
42
|
values = value.toString().padStart( value.toString().length + padding, '1') as any;
|
|
29
43
|
|
|
30
44
|
if (formatter) {
|
|
31
45
|
values = formatter.format(values);
|
|
32
46
|
}
|
|
33
47
|
else {
|
|
34
|
-
values = Number(values).toLocaleString(
|
|
48
|
+
values = Number(values).toLocaleString([], {
|
|
49
|
+
minimumFractionDigits: 0,
|
|
50
|
+
maximumFractionDigits: decimals
|
|
51
|
+
});
|
|
35
52
|
}
|
|
36
53
|
|
|
37
54
|
values = values.split('');
|
|
@@ -61,7 +78,7 @@ export default ({ currency, delay, max, suffix, value }: { currency?: 'IGNORE' |
|
|
|
61
78
|
|
|
62
79
|
return {
|
|
63
80
|
html: html`
|
|
64
|
-
<div class='counter'>
|
|
81
|
+
<div class='counter' ${attributes}>
|
|
65
82
|
${() => {
|
|
66
83
|
let n = state.length;
|
|
67
84
|
|