@esportsplus/ui 0.10.5 → 0.10.7
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 +5 -3
- package/build/components/counter/index.js +2 -2
- package/build/components/counter/scss/index.scss +1 -1
- package/build/css-utilities/flicker/scss/index.scss +2 -0
- package/build/css-utilities/index.d.ts +1 -0
- package/build/css-utilities/index.js +1 -0
- package/package.json +1 -1
- package/src/components/counter/index.ts +13 -3
- 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
- package/src/css-utilities/index.ts +1 -0
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import './scss/index.scss';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Options = {
|
|
3
|
+
attributes?: Record<string, unknown>;
|
|
4
|
+
currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
|
|
4
5
|
decimals?: number;
|
|
5
6
|
delay?: number;
|
|
6
7
|
max?: number;
|
|
7
8
|
suffix?: string;
|
|
8
9
|
value: number;
|
|
9
|
-
}
|
|
10
|
+
};
|
|
11
|
+
declare const _default: ({ attributes, currency, decimals, delay, max, suffix, value }: Options) => {
|
|
10
12
|
html: import("@esportsplus/template/build/types").RenderableTemplate;
|
|
11
13
|
state: Prettify<{ [K in keyof T]: import("@esportsplus/reactivity").Infer<T[K]>; } & {
|
|
12
14
|
dispose: VoidFunction;
|
|
@@ -2,7 +2,7 @@ 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, decimals, delay, max, suffix, value }) => {
|
|
5
|
+
export default ({ attributes, currency, decimals, delay, max, suffix, value }) => {
|
|
6
6
|
let api = reactive({ value: -1 }), formatter = currency === 'IGNORE'
|
|
7
7
|
? undefined
|
|
8
8
|
: formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
|
|
@@ -47,7 +47,7 @@ export default ({ currency, decimals, delay, max, suffix, value }) => {
|
|
|
47
47
|
});
|
|
48
48
|
return {
|
|
49
49
|
html: html `
|
|
50
|
-
<div class='counter'>
|
|
50
|
+
<div class='counter' ${attributes}>
|
|
51
51
|
${() => {
|
|
52
52
|
let n = state.length;
|
|
53
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*/
|
|
@@ -5,6 +5,7 @@ import './border/scss/index.scss';
|
|
|
5
5
|
import './color/scss/index.scss';
|
|
6
6
|
import './disabled/scss/index.scss';
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
|
+
import './flicker/scss/index.scss';
|
|
8
9
|
import './glass/scss/index.scss';
|
|
9
10
|
import './hidden/scss/index.scss';
|
|
10
11
|
import './inline/scss/index.scss';
|
|
@@ -5,6 +5,7 @@ import './border/scss/index.scss';
|
|
|
5
5
|
import './color/scss/index.scss';
|
|
6
6
|
import './disabled/scss/index.scss';
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
|
+
import './flicker/scss/index.scss';
|
|
8
9
|
import './glass/scss/index.scss';
|
|
9
10
|
import './hidden/scss/index.scss';
|
|
10
11
|
import './inline/scss/index.scss';
|
package/package.json
CHANGED
|
@@ -3,11 +3,21 @@ 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, decimals, delay, max, suffix, value }: { currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD', decimals?: number, 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
22
|
formatter = currency === 'IGNORE'
|
|
13
23
|
? undefined
|
|
@@ -68,7 +78,7 @@ export default ({ currency, decimals, delay, max, suffix, value }: { currency?:
|
|
|
68
78
|
|
|
69
79
|
return {
|
|
70
80
|
html: html`
|
|
71
|
-
<div class='counter'>
|
|
81
|
+
<div class='counter' ${attributes}>
|
|
72
82
|
${() => {
|
|
73
83
|
let n = state.length;
|
|
74
84
|
|
|
@@ -5,6 +5,7 @@ import './border/scss/index.scss';
|
|
|
5
5
|
import './color/scss/index.scss';
|
|
6
6
|
import './disabled/scss/index.scss';
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
|
+
import './flicker/scss/index.scss';
|
|
8
9
|
import './glass/scss/index.scss';
|
|
9
10
|
import './hidden/scss/index.scss';
|
|
10
11
|
import './inline/scss/index.scss';
|