@esportsplus/ui 0.20.7 → 0.20.9

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.
Files changed (9) hide show
  1. package/build/components/field/index.d.ts +16 -104
  2. package/build/components/field/select.d.ts +64 -27
  3. package/build/components/loader/index.d.ts +8 -7
  4. package/build/components/loader/index.js +47 -24
  5. package/build/components/loader/scss/index.scss +1 -1
  6. package/package.json +2 -2
  7. package/src/components/field/select.ts +7 -1
  8. package/src/components/loader/index.ts +61 -28
  9. package/src/components/loader/scss/index.scss +3 -3
package/build/components/field/index.d.ts CHANGED
@@ -8254,25 +8254,14 @@ declare const _default: {
8254
8254
  selected?: number | string;
8255
8255
  };
8256
8256
  })))) | undefined;
8257
- content?: ((mask: (this: {
8258
- options: {
8259
- content: unknown;
8260
- } & import("@esportsplus/template").Attributes;
8261
- option?: import("@esportsplus/template").Attributes;
8262
- state: {
8263
- active: boolean;
8264
- error: string;
8265
- render: boolean;
8266
- selected: string | number;
8267
- };
8268
- }, attributes: {
8257
+ content?: ((mask: (attributes: {
8269
8258
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
8270
8259
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
8271
8260
  "field-mask-text"?: import("@esportsplus/template").Attributes;
8272
8261
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
8273
8262
  direction?: string;
8274
8263
  };
8275
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>) | undefined;
8264
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) | undefined;
8276
8265
  }, attributes: Readonly<{
8277
8266
  [key: `aria-${string}`]: string | number | boolean | undefined;
8278
8267
  [key: `data-${string}`]: string | undefined;
@@ -8401,44 +8390,22 @@ declare const _default: {
8401
8390
  render: boolean;
8402
8391
  selected?: number | string;
8403
8392
  };
8404
- })))>, content: (mask: (this: {
8405
- options: {
8406
- content: unknown;
8407
- } & import("@esportsplus/template").Attributes;
8408
- option?: import("@esportsplus/template").Attributes;
8409
- state: {
8410
- active: boolean;
8411
- error: string;
8412
- render: boolean;
8413
- selected: string | number;
8414
- };
8415
- }, attributes: {
8393
+ })))>, content: (mask: (attributes: {
8416
8394
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
8417
8395
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
8418
8396
  "field-mask-text"?: import("@esportsplus/template").Attributes;
8419
8397
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
8420
8398
  direction?: string;
8421
8399
  };
8422
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<any>>;
8423
- (content: (mask: (this: {
8424
- options: {
8425
- content: unknown;
8426
- } & import("@esportsplus/template").Attributes;
8427
- option?: import("@esportsplus/template").Attributes;
8428
- state: {
8429
- active: boolean;
8430
- error: string;
8431
- render: boolean;
8432
- selected: string | number;
8433
- };
8434
- }, attributes: {
8400
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<any>>;
8401
+ (content: (mask: (attributes: {
8435
8402
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
8436
8403
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
8437
8404
  "field-mask-text"?: import("@esportsplus/template").Attributes;
8438
8405
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
8439
8406
  direction?: string;
8440
8407
  };
8441
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>): ReturnType<(this: {
8408
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>): ReturnType<(this: {
8442
8409
  attributes?: ({
8443
8410
  [key: `aria-${string}`]: string | number | boolean | undefined;
8444
8411
  [key: `data-${string}`]: string | undefined;
@@ -8568,25 +8535,14 @@ declare const _default: {
8568
8535
  selected?: number | string;
8569
8536
  };
8570
8537
  })))) | undefined;
8571
- content?: ((mask: (this: {
8572
- options: {
8573
- content: unknown;
8574
- } & import("@esportsplus/template").Attributes;
8575
- option?: import("@esportsplus/template").Attributes;
8576
- state: {
8577
- active: boolean;
8578
- error: string;
8579
- render: boolean;
8580
- selected: string | number;
8581
- };
8582
- }, attributes: {
8538
+ content?: ((mask: (attributes: {
8583
8539
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
8584
8540
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
8585
8541
  "field-mask-text"?: import("@esportsplus/template").Attributes;
8586
8542
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
8587
8543
  direction?: string;
8588
8544
  };
8589
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>) | undefined;
8545
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) | undefined;
8590
8546
  }, attributes: Readonly<{
8591
8547
  [key: `aria-${string}`]: string | number | boolean | undefined;
8592
8548
  [key: `data-${string}`]: string | undefined;
@@ -8715,25 +8671,14 @@ declare const _default: {
8715
8671
  render: boolean;
8716
8672
  selected?: number | string;
8717
8673
  };
8718
- })))>, content: (mask: (this: {
8719
- options: {
8720
- content: unknown;
8721
- } & import("@esportsplus/template").Attributes;
8722
- option?: import("@esportsplus/template").Attributes;
8723
- state: {
8724
- active: boolean;
8725
- error: string;
8726
- render: boolean;
8727
- selected: string | number;
8728
- };
8729
- }, attributes: {
8674
+ })))>, content: (mask: (attributes: {
8730
8675
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
8731
8676
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
8732
8677
  "field-mask-text"?: import("@esportsplus/template").Attributes;
8733
8678
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
8734
8679
  direction?: string;
8735
8680
  };
8736
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<any>>;
8681
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<any>>;
8737
8682
  (attributes: {
8738
8683
  [key: `aria-${string}`]: string | number | boolean | undefined;
8739
8684
  [key: `data-${string}`]: string | undefined;
@@ -8862,25 +8807,14 @@ declare const _default: {
8862
8807
  render: boolean;
8863
8808
  selected?: number | string;
8864
8809
  };
8865
- }))), content: (mask: (this: {
8866
- options: {
8867
- content: unknown;
8868
- } & import("@esportsplus/template").Attributes;
8869
- option?: import("@esportsplus/template").Attributes;
8870
- state: {
8871
- active: boolean;
8872
- error: string;
8873
- render: boolean;
8874
- selected: string | number;
8875
- };
8876
- }, attributes: {
8810
+ }))), content: (mask: (attributes: {
8877
8811
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
8878
8812
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
8879
8813
  "field-mask-text"?: import("@esportsplus/template").Attributes;
8880
8814
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
8881
8815
  direction?: string;
8882
8816
  };
8883
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>): ReturnType<(this: {
8817
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>): ReturnType<(this: {
8884
8818
  attributes?: ({
8885
8819
  [key: `aria-${string}`]: string | number | boolean | undefined;
8886
8820
  [key: `data-${string}`]: string | undefined;
@@ -9010,25 +8944,14 @@ declare const _default: {
9010
8944
  selected?: number | string;
9011
8945
  };
9012
8946
  })))) | undefined;
9013
- content?: ((mask: (this: {
9014
- options: {
9015
- content: unknown;
9016
- } & import("@esportsplus/template").Attributes;
9017
- option?: import("@esportsplus/template").Attributes;
9018
- state: {
9019
- active: boolean;
9020
- error: string;
9021
- render: boolean;
9022
- selected: string | number;
9023
- };
9024
- }, attributes: {
8947
+ content?: ((mask: (attributes: {
9025
8948
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
9026
8949
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
9027
8950
  "field-mask-text"?: import("@esportsplus/template").Attributes;
9028
8951
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
9029
8952
  direction?: string;
9030
8953
  };
9031
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>) | undefined;
8954
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) | undefined;
9032
8955
  }, attributes: Readonly<{
9033
8956
  [key: `aria-${string}`]: string | number | boolean | undefined;
9034
8957
  [key: `data-${string}`]: string | undefined;
@@ -9157,25 +9080,14 @@ declare const _default: {
9157
9080
  render: boolean;
9158
9081
  selected?: number | string;
9159
9082
  };
9160
- })))>, content: (mask: (this: {
9161
- options: {
9162
- content: unknown;
9163
- } & import("@esportsplus/template").Attributes;
9164
- option?: import("@esportsplus/template").Attributes;
9165
- state: {
9166
- active: boolean;
9167
- error: string;
9168
- render: boolean;
9169
- selected: string | number;
9170
- };
9171
- }, attributes: {
9083
+ })))>, content: (mask: (attributes: {
9172
9084
  "field-mask-arrow"?: import("@esportsplus/template").Attributes;
9173
9085
  "field-mask-tag"?: import("@esportsplus/template").Attributes;
9174
9086
  "field-mask-text"?: import("@esportsplus/template").Attributes;
9175
9087
  "tooltip-content"?: import("@esportsplus/template").Attributes & {
9176
9088
  direction?: string;
9177
9089
  };
9178
- } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => Node) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<any>>;
9090
+ } & import("@esportsplus/template").Attributes & import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<unknown>) => import("@esportsplus/template").Renderable<any>>;
9179
9091
  };
9180
9092
  switch: {
9181
9093
  (): ReturnType<(this: {
package/build/components/field/select.d.ts CHANGED
@@ -1,24 +1,5 @@
1
1
  import { type Attributes, type Renderable } from '@esportsplus/template';
2
2
  import { Attributes as A } from '../../components/scrollbar/index.js';
3
- declare const select: (this: {
4
- options: {
5
- content: unknown;
6
- } & Attributes;
7
- option?: Attributes;
8
- state: {
9
- active: boolean;
10
- error: string;
11
- render: boolean;
12
- selected: string | number;
13
- };
14
- }, attributes: {
15
- "field-mask-arrow"?: Attributes;
16
- "field-mask-tag"?: Attributes;
17
- "field-mask-text"?: Attributes;
18
- "tooltip-content"?: Attributes & {
19
- direction?: string;
20
- };
21
- } & Attributes & A, content: Renderable<unknown>) => Node;
22
3
  declare const _default: {
23
4
  (): ReturnType<(this: {
24
5
  attributes?: ({
@@ -150,7 +131,14 @@ declare const _default: {
150
131
  selected?: number | string;
151
132
  };
152
133
  })))) | undefined;
153
- content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
134
+ content?: ((mask: (attributes: {
135
+ "field-mask-arrow"?: Attributes;
136
+ "field-mask-tag"?: Attributes;
137
+ "field-mask-text"?: Attributes;
138
+ "tooltip-content"?: Attributes & {
139
+ direction?: string;
140
+ };
141
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>) | undefined;
154
142
  }, attributes: Readonly<{
155
143
  [key: `aria-${string}`]: string | number | boolean | undefined;
156
144
  [key: `data-${string}`]: string | undefined;
@@ -279,8 +267,22 @@ declare const _default: {
279
267
  render: boolean;
280
268
  selected?: number | string;
281
269
  };
282
- })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
283
- (content: (mask: typeof select) => Renderable<unknown>): ReturnType<(this: {
270
+ })))>, content: (mask: (attributes: {
271
+ "field-mask-arrow"?: Attributes;
272
+ "field-mask-tag"?: Attributes;
273
+ "field-mask-text"?: Attributes;
274
+ "tooltip-content"?: Attributes & {
275
+ direction?: string;
276
+ };
277
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>) => Renderable<any>>;
278
+ (content: (mask: (attributes: {
279
+ "field-mask-arrow"?: Attributes;
280
+ "field-mask-tag"?: Attributes;
281
+ "field-mask-text"?: Attributes;
282
+ "tooltip-content"?: Attributes & {
283
+ direction?: string;
284
+ };
285
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>): ReturnType<(this: {
284
286
  attributes?: ({
285
287
  [key: `aria-${string}`]: string | number | boolean | undefined;
286
288
  [key: `data-${string}`]: string | undefined;
@@ -410,7 +412,14 @@ declare const _default: {
410
412
  selected?: number | string;
411
413
  };
412
414
  })))) | undefined;
413
- content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
415
+ content?: ((mask: (attributes: {
416
+ "field-mask-arrow"?: Attributes;
417
+ "field-mask-tag"?: Attributes;
418
+ "field-mask-text"?: Attributes;
419
+ "tooltip-content"?: Attributes & {
420
+ direction?: string;
421
+ };
422
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>) | undefined;
414
423
  }, attributes: Readonly<{
415
424
  [key: `aria-${string}`]: string | number | boolean | undefined;
416
425
  [key: `data-${string}`]: string | undefined;
@@ -539,7 +548,14 @@ declare const _default: {
539
548
  render: boolean;
540
549
  selected?: number | string;
541
550
  };
542
- })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
551
+ })))>, content: (mask: (attributes: {
552
+ "field-mask-arrow"?: Attributes;
553
+ "field-mask-tag"?: Attributes;
554
+ "field-mask-text"?: Attributes;
555
+ "tooltip-content"?: Attributes & {
556
+ direction?: string;
557
+ };
558
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>) => Renderable<any>>;
543
559
  (attributes: {
544
560
  [key: `aria-${string}`]: string | number | boolean | undefined;
545
561
  [key: `data-${string}`]: string | undefined;
@@ -668,7 +684,14 @@ declare const _default: {
668
684
  render: boolean;
669
685
  selected?: number | string;
670
686
  };
671
- }))), content: (mask: typeof select) => Renderable<unknown>): ReturnType<(this: {
687
+ }))), content: (mask: (attributes: {
688
+ "field-mask-arrow"?: Attributes;
689
+ "field-mask-tag"?: Attributes;
690
+ "field-mask-text"?: Attributes;
691
+ "tooltip-content"?: Attributes & {
692
+ direction?: string;
693
+ };
694
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>): ReturnType<(this: {
672
695
  attributes?: ({
673
696
  [key: `aria-${string}`]: string | number | boolean | undefined;
674
697
  [key: `data-${string}`]: string | undefined;
@@ -798,7 +821,14 @@ declare const _default: {
798
821
  selected?: number | string;
799
822
  };
800
823
  })))) | undefined;
801
- content?: ((mask: typeof select) => Renderable<unknown>) | undefined;
824
+ content?: ((mask: (attributes: {
825
+ "field-mask-arrow"?: Attributes;
826
+ "field-mask-tag"?: Attributes;
827
+ "field-mask-text"?: Attributes;
828
+ "tooltip-content"?: Attributes & {
829
+ direction?: string;
830
+ };
831
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>) | undefined;
802
832
  }, attributes: Readonly<{
803
833
  [key: `aria-${string}`]: string | number | boolean | undefined;
804
834
  [key: `data-${string}`]: string | undefined;
@@ -927,6 +957,13 @@ declare const _default: {
927
957
  render: boolean;
928
958
  selected?: number | string;
929
959
  };
930
- })))>, content: (mask: typeof select) => Renderable<unknown>) => Renderable<any>>;
960
+ })))>, content: (mask: (attributes: {
961
+ "field-mask-arrow"?: Attributes;
962
+ "field-mask-tag"?: Attributes;
963
+ "field-mask-text"?: Attributes;
964
+ "tooltip-content"?: Attributes & {
965
+ direction?: string;
966
+ };
967
+ } & Attributes & A, content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>) => Renderable<any>>;
931
968
  };
932
969
  export default _default;
package/build/components/loader/index.d.ts CHANGED
@@ -1,16 +1,17 @@
1
+ import { Attributes } from '@esportsplus/template';
1
2
  import './scss/index.scss';
2
3
  declare const _default: {
3
4
  (): ReturnType<(this: {
4
- attributes?: import("@esportsplus/template").Attributes | undefined;
5
+ attributes?: Attributes | undefined;
5
6
  content?: import("@esportsplus/template").Renderable<any>;
6
- }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
7
+ }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
7
8
  (content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
8
- attributes?: import("@esportsplus/template").Attributes | undefined;
9
+ attributes?: Attributes | undefined;
9
10
  content?: import("@esportsplus/template").Renderable<any>;
10
- }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
11
- (attributes: import("@esportsplus/template").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
12
- attributes?: import("@esportsplus/template").Attributes | undefined;
11
+ }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
12
+ (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
13
+ attributes?: Attributes | undefined;
13
14
  content?: import("@esportsplus/template").Renderable<any>;
14
- }, attributes: Readonly<import("@esportsplus/template").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
15
+ }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
15
16
  };
16
17
  export default _default;
package/build/components/loader/index.js CHANGED
@@ -1,36 +1,59 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html } from '@esportsplus/template';
3
+ import { omit } from '@esportsplus/utilities';
3
4
  import template from '../../components/template/index.js';
4
5
  import './scss/index.scss';
6
+ const OMIT = ['loader-content', 'loader-logo'];
5
7
  export default template.factory((attributes, content) => {
6
- let c = () => state.load && 'loader--load', state = reactive({
8
+ let a = {
9
+ class: () => state.load && 'loader--load'
10
+ }, state = reactive({
7
11
  load: false,
12
+ remove: false,
8
13
  scale: false
9
14
  });
10
- setTimeout(() => {
11
- state.scale = true;
12
- }, 300);
13
- return html `
14
- <div class='loader' ${{ class: c }}>
15
- <div class='loader' ${{ class: c }}>
16
- <div class='loader-content'>
17
- <div
18
- class='loader-logo text --flex-center --text-uppercase --text-600'
19
- style='color: var(--color-grey-500);'
20
- ${attributes}
21
- ${{
22
- class: () => state.scale && 'loader-logo--scale',
23
- onanimationend: ({ animationName: name }) => {
24
- if (name === 'scale') {
25
- state.load = true;
26
- }
15
+ return () => {
16
+ if (state.remove) {
17
+ return;
27
18
  }
28
- }}
29
- >
30
- ${content}
31
- </div>
19
+ let i = 0;
20
+ return html `
21
+ <div
22
+ class='loader'
23
+ onanimationend=${(e) => {
24
+ i++;
25
+ if (e.animationName === 'move' && i > 1) {
26
+ state.remove = true;
27
+ }
28
+ }}
29
+ ${a}
30
+ ${omit(attributes, OMIT)}
31
+ >
32
+ <div class='loader' ${a}>
33
+ ${content && html `
34
+ <div class='loader-content' ${attributes['loader-content']}>
35
+ <div
36
+ class='loader-logo text --flex-center --text-uppercase --text-600'
37
+ style='color: var(--color-grey-500);'
38
+ ${attributes['loader-logo']}
39
+ ${{
40
+ class: () => state.scale && 'loader-logo--scale',
41
+ onanimationend: ({ animationName: name }) => {
42
+ if (name === 'scale') {
43
+ state.load = true;
44
+ }
45
+ },
46
+ onconnect: () => {
47
+ state.scale = true;
48
+ }
49
+ }}
50
+ >
51
+ ${content}
52
+ </div>
53
+ </div>
54
+ `}
32
55
  </div>
33
56
  </div>
34
- </div>
35
- `;
57
+ `;
58
+ };
36
59
  });
package/build/components/loader/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.loader-logo{--size:10svh;--translateY:8px}.loader{background-color:var(--color-black-500);opacity:1;pointer-events:none;visibility:visible;z-index:9999;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.6s ease-in-out .2s both move}.loader--load .loader--load{animation:.6s ease-in-out both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both scale}@keyframes scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}}
1
+ @layer components {.loader-logo{--size:10svh;--translateY:8px}.loader{opacity:1;pointer-events:none;visibility:visible;z-index:9999;background-color:#01020964;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.4s ease-in-out .2s both move}.loader--load .loader--load{animation:.4s ease-in-out both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both scale}@keyframes scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "@esportsplus/action": "^0.0.58",
5
5
  "@esportsplus/queue": "^0.1.0",
6
6
  "@esportsplus/reactivity": "^0.16.7",
7
- "@esportsplus/template": "^0.22.4",
7
+ "@esportsplus/template": "^0.22.5",
8
8
  "@esportsplus/utilities": "^0.22.1",
9
9
  "modern-normalize": "^3.0.1"
10
10
  },
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.20.7",
51
+ "version": "0.20.9",
52
52
  "scripts": {
53
53
  "build": "run-s build:vite build:ts",
54
54
  "build:ts": "tsc && tsc-alias",
package/src/components/field/select.ts CHANGED
@@ -153,7 +153,13 @@ export default template.factory<
153
153
  }
154
154
  }
155
155
  ),
156
- (mask: typeof select) => Renderable<unknown>
156
+ (mask: (attributes: {
157
+ 'field-mask-arrow'?: Attributes;
158
+ 'field-mask-tag'?: Attributes;
159
+ 'field-mask-text'?: Attributes;
160
+ 'tooltip-content'?: Attributes & { direction?: string };
161
+ } & Attributes & A,
162
+ content: Renderable<unknown>) => Renderable<unknown>) => Renderable<unknown>
157
163
  >((attributes, content) => {
158
164
  let options = attributes.options,
159
165
  state = attributes.state || reactive({
package/src/components/loader/index.ts CHANGED
@@ -1,43 +1,76 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
- import { html } from '@esportsplus/template';
2
+ import { html, Attributes } from '@esportsplus/template';
3
+ import { omit } from '@esportsplus/utilities'
3
4
  import template from '~/components/template';
4
5
  import './scss/index.scss';
5
6
 
6
7
 
8
+ type A = Attributes & {
9
+ 'loader-content'?: Attributes,
10
+ 'loader-logo'?: Attributes
11
+ };
12
+
13
+
14
+ const OMIT = ['loader-content', 'loader-logo'];
15
+
16
+
7
17
  export default template.factory(
8
- (attributes, content) => {
9
- let c = () => state.load && 'loader--load',
18
+ (attributes: A, content) => {
19
+ let a = {
20
+ class: () => state.load && 'loader--load'
21
+ },
10
22
  state = reactive({
11
23
  load: false,
24
+ remove: false,
12
25
  scale: false
13
26
  });
14
27
 
15
- setTimeout(() => {
16
- state.scale = true;
17
- }, 300);
18
-
19
- return html`
20
- <div class='loader' ${{ class: c }}>
21
- <div class='loader' ${{ class: c }}>
22
- <div class='loader-content'>
23
- <div
24
- class='loader-logo text --flex-center --text-uppercase --text-600'
25
- style='color: var(--color-grey-500);'
26
- ${attributes}
27
- ${{
28
- class: () => state.scale && 'loader-logo--scale',
29
- onanimationend: ({ animationName: name }) => {
30
- if (name === 'scale') {
31
- state.load = true;
32
- }
33
- }
34
- }}
35
- >
36
- ${content}
37
- </div>
28
+ return () => {
29
+ if (state.remove) {
30
+ return;
31
+ }
32
+
33
+ let i = 0;
34
+
35
+ return html`
36
+ <div
37
+ class='loader'
38
+ onanimationend=${(e: AnimationEvent) => {
39
+ i++;
40
+
41
+ if (e.animationName === 'move' && i > 1) {
42
+ state.remove = true;
43
+ }
44
+ }}
45
+ ${a}
46
+ ${omit(attributes, OMIT)}
47
+ >
48
+ <div class='loader' ${a}>
49
+ ${content && html`
50
+ <div class='loader-content' ${attributes['loader-content']}>
51
+ <div
52
+ class='loader-logo text --flex-center --text-uppercase --text-600'
53
+ style='color: var(--color-grey-500);'
54
+ ${attributes['loader-logo']}
55
+ ${{
56
+ class: () => state.scale && 'loader-logo--scale',
57
+ onanimationend: ({ animationName: name }) => {
58
+ if (name === 'scale') {
59
+ state.load = true;
60
+ }
61
+ },
62
+ onconnect: () => {
63
+ state.scale = true;
64
+ }
65
+ }}
66
+ >
67
+ ${content}
68
+ </div>
69
+ </div>
70
+ `}
38
71
  </div>
39
72
  </div>
40
- </div>
41
- `;
73
+ `;
74
+ }
42
75
  }
43
76
  );
package/src/components/loader/scss/index.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'variables';
2
2
 
3
3
  .loader {
4
- background-color: var(--color-black-500);
4
+ background-color: #01020964;
5
5
  bottom: 0;
6
6
  left: 0;
7
7
  position: fixed;
@@ -15,10 +15,10 @@
15
15
 
16
16
 
17
17
  &--load {
18
- animation: 0.6s 0.2s ease-in-out 1 both move;
18
+ animation: 0.4s 0.2s ease-in-out 1 both move;
19
19
 
20
20
  & & {
21
- animation: 0.6s ease-in-out 1 both move;
21
+ animation: 0.4s ease-in-out 1 both move;
22
22
  }
23
23
  }
24
24