@esportsplus/ui 0.32.5 → 0.33.0

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 (20) hide show
  1. package/build/components/checkbox/index.d.ts +7 -118
  2. package/build/components/checkbox/index.js +32 -25
  3. package/build/components/radio/index.d.ts +4 -115
  4. package/build/components/radio/index.js +2 -2
  5. package/build/components/range/index.d.ts +4 -3
  6. package/build/components/range/index.js +5 -3
  7. package/build/components/scrollbar/index.js +3 -3
  8. package/build/components/select/index.js +7 -5
  9. package/build/components/switch/index.d.ts +4 -115
  10. package/build/components/switch/index.js +2 -2
  11. package/build/components/textarea/index.d.ts +4 -3
  12. package/build/components/textarea/index.js +5 -3
  13. package/package.json +1 -1
  14. package/src/components/checkbox/index.ts +37 -29
  15. package/src/components/radio/index.ts +2 -2
  16. package/src/components/range/index.ts +6 -2
  17. package/src/components/scrollbar/index.ts +3 -3
  18. package/src/components/select/index.ts +8 -6
  19. package/src/components/switch/index.ts +2 -2
  20. package/src/components/textarea/index.ts +6 -2
package/build/components/checkbox/index.d.ts CHANGED
@@ -1,131 +1,20 @@
1
1
  import { type Attributes } from '@esportsplus/template';
2
2
  import './scss/index.scss';
3
- declare const template: (this: {
4
- type: string;
3
+ declare const factory: (type: string) => (this: {
4
+ attributes?: Attributes;
5
5
  }, attributes?: Attributes & {
6
6
  state?: {
7
7
  active: boolean;
8
8
  error: string;
9
9
  };
10
10
  }) => Node;
11
- declare const _default: (attributes?: ({
12
- [key: `aria-${string}`]: string | number | boolean | undefined;
13
- [key: `data-${string}`]: string | undefined;
14
- class?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
15
- onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
16
- ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
17
- onrender?: ((element: import("@esportsplus/template").Element) => void) | undefined;
18
- ontick?: ((dispose: VoidFunction, element: import("@esportsplus/template").Element) => void) | undefined;
19
- style?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
20
- } & {
21
- onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
22
- onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
23
- onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
24
- onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
25
- onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
26
- onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
27
- onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
28
- onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
29
- onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
30
- oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
31
- oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
32
- oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
33
- onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
34
- onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
35
- onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
36
- oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
37
- oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
38
- oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
39
- oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
40
- oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
41
- oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
42
- oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
43
- oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
44
- oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
45
- ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
46
- ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
47
- ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
48
- ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
49
- ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
50
- ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
51
- ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
52
- ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
53
- ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
54
- onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
55
- onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
56
- onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
57
- onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
58
- onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
59
- onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
60
- onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
61
- ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
62
- oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
63
- oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
64
- onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
65
- onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
66
- onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
67
- onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
68
- onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
69
- onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
70
- onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
71
- onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
72
- onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
73
- onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
74
- onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
75
- onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
76
- onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
77
- onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
78
- onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
79
- onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
80
- onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
81
- onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
82
- onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
83
- onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
84
- onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
85
- onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
86
- onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
87
- onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
88
- onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
89
- onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
90
- onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
91
- onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
92
- onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
93
- onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
94
- onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
95
- onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
96
- onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
97
- onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
98
- onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
99
- onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
100
- onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
101
- onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
102
- onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
103
- onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
104
- onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
105
- onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
106
- onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
107
- ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
108
- ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
109
- ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
110
- ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
111
- ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
112
- ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
113
- ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
114
- ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
115
- ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
116
- ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
117
- onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
118
- onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
119
- onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
120
- onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
121
- onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
122
- onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
123
- onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
124
- } & Record<PropertyKey, unknown> & {
11
+ declare const _default: (this: {
12
+ attributes?: Attributes;
13
+ }, attributes?: Attributes & {
125
14
  state?: {
126
15
  active: boolean;
127
16
  error: string;
128
17
  };
129
- }) | undefined) => Node;
18
+ }) => Node;
130
19
  export default _default;
131
- export { template };
20
+ export { factory };
package/build/components/checkbox/index.js CHANGED
@@ -4,30 +4,37 @@ import { omit } from '@esportsplus/utilities';
4
4
  import form from '../../components/form/index.js';
5
5
  import './scss/index.scss';
6
6
  const OMIT = ['checked', 'value'];
7
- const template = function (attributes) {
8
- let state = attributes?.state || reactive({
9
- active: false,
10
- error: ''
11
- });
12
- if (attributes?.checked) {
13
- state.active = true;
14
- }
15
- return html `
16
- <div class='${this.type} ${() => state.active && '--active'}' ${attributes && omit(attributes, OMIT)}>
17
- <input
18
- ${{
19
- checked: attributes?.checked || root(() => state.active),
20
- class: `${this.type}-tag`,
21
- onchange: (e) => {
22
- state.active = e.target.checked;
23
- },
24
- onrender: form.input.onrender(state),
25
- type: this.type === 'radio' ? 'radio' : 'checkbox',
26
- value: attributes?.value || 1
27
- }}
7
+ const factory = (type) => {
8
+ function template(attributes) {
9
+ let state = attributes?.state || reactive({
10
+ active: false,
11
+ error: ''
12
+ });
13
+ if (attributes?.checked) {
14
+ state.active = true;
15
+ }
16
+ return html `
17
+ <div
18
+ class='${type} ${() => state.active && '--active'}'
19
+ ${this.attributes && omit(this.attributes, OMIT)}
20
+ ${attributes && omit(attributes, OMIT)}
28
21
  >
29
- </div>
30
- `;
22
+ <input
23
+ ${{
24
+ checked: attributes?.checked || root(() => state.active),
25
+ class: `${type}-tag`,
26
+ onchange: (e) => {
27
+ state.active = e.target.checked;
28
+ },
29
+ onrender: form.input.onrender(state),
30
+ type: type === 'radio' ? 'radio' : 'checkbox',
31
+ value: attributes?.value || 1
32
+ }}
33
+ >
34
+ </div>
35
+ `;
36
+ }
37
+ return template;
31
38
  };
32
- export default template.bind({ type: 'checkbox' });
33
- export { template };
39
+ export default factory('checkbox');
40
+ export { factory };
package/build/components/radio/index.d.ts CHANGED
@@ -1,121 +1,10 @@
1
1
  import './scss/index.scss';
2
- declare const _default: (attributes?: ({
3
- [key: `aria-${string}`]: string | number | boolean | undefined;
4
- [key: `data-${string}`]: string | undefined;
5
- class?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
6
- onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
7
- ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
8
- onrender?: ((element: import("@esportsplus/template").Element) => void) | undefined;
9
- ontick?: ((dispose: VoidFunction, element: import("@esportsplus/template").Element) => void) | undefined;
10
- style?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
11
- } & {
12
- onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
13
- onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
14
- onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
15
- onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
16
- onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
17
- onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
18
- onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
19
- onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
20
- onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
21
- oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
22
- oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
23
- oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
24
- onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
25
- onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
26
- onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
27
- oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
28
- oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
29
- oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
30
- oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
31
- oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
32
- oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
33
- oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
34
- oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
35
- oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
36
- ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
37
- ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
38
- ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
39
- ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
40
- ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
41
- ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
42
- ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
43
- ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
44
- ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
45
- onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
46
- onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
47
- onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
48
- onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
49
- onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
50
- onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
51
- onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
52
- ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
53
- oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
54
- oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
55
- onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
56
- onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
57
- onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
58
- onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
59
- onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
60
- onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
61
- onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
62
- onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
63
- onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
64
- onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
65
- onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
66
- onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
67
- onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
68
- onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
69
- onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
70
- onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
71
- onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
72
- onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
73
- onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
74
- onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
75
- onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
76
- onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
77
- onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
78
- onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
79
- onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
80
- onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
81
- onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
82
- onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
83
- onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
84
- onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
85
- onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
86
- onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
87
- onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
88
- onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
89
- onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
90
- onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
91
- onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
92
- onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
93
- onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
94
- onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
95
- onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
96
- onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
97
- onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
98
- ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
99
- ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
100
- ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
101
- ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
102
- ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
103
- ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
104
- ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
105
- ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
106
- ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
107
- ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
108
- onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
109
- onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
110
- onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
111
- onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
112
- onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
113
- onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
114
- onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
115
- } & Record<PropertyKey, unknown> & {
2
+ declare const _default: (this: {
3
+ attributes?: import("@esportsplus/template").Attributes;
4
+ }, attributes?: import("@esportsplus/template").Attributes & {
116
5
  state?: {
117
6
  active: boolean;
118
7
  error: string;
119
8
  };
120
- }) | undefined) => Node;
9
+ }) => Node;
121
10
  export default _default;
package/build/components/radio/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import { template } from '../../components/checkbox/index.js';
1
+ import { factory } from '../../components/checkbox/index.js';
2
2
  import './scss/index.scss';
3
- export default template.bind({ type: 'radio' });
3
+ export default factory('radio');
package/build/components/range/index.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { type Attributes } from '@esportsplus/template';
2
2
  import './scss/index.scss';
3
- declare const _default: (attributes: Attributes & {
3
+ export default function (this: {
4
+ attributes: Attributes;
5
+ }, attributes: Attributes & {
4
6
  state?: {
5
7
  active: boolean;
6
8
  error: string;
7
9
  value: number;
8
10
  };
9
- }) => Node;
10
- export default _default;
11
+ }): Node;
package/build/components/range/index.js CHANGED
@@ -2,7 +2,7 @@ import { reactive, root } from '@esportsplus/reactivity';
2
2
  import { html } from '@esportsplus/template';
3
3
  import form from '../../components/form/index.js';
4
4
  import './scss/index.scss';
5
- export default (attributes) => {
5
+ export default function (attributes) {
6
6
  let state = attributes.state || reactive({
7
7
  active: false,
8
8
  error: '',
@@ -15,6 +15,8 @@ export default (attributes) => {
15
15
  <input
16
16
  class='range --border-state --border-black'
17
17
  type='range'
18
+ ${this.attributes}
19
+ ${attributes}
18
20
  ${{
19
21
  class: () => state.active && '--active',
20
22
  onfocusin: () => {
@@ -29,7 +31,7 @@ export default (attributes) => {
29
31
  onrender: form.input.onrender(state),
30
32
  value: root(() => attributes?.value || state.value || 0)
31
33
  }}
32
- ${attributes}
33
34
  />
34
35
  `;
35
- };
36
+ }
37
+ ;
package/build/components/scrollbar/index.js CHANGED
@@ -13,12 +13,12 @@ export default template.factory(function (attributes, content) {
13
13
  return html `
14
14
  <div
15
15
  class='scrollbar-container'
16
- ${this?.attributes && omit(this.attributes, OMIT)}
16
+ ${this.attributes && omit(this.attributes, OMIT)}
17
17
  ${omit(attributes, OMIT)}
18
18
  >
19
19
  <div
20
20
  class='scrollbar-container-content'
21
- ${this?.attributes?.['scrollbar-container-content']}
21
+ ${this.attributes?.['scrollbar-container-content']}
22
22
  ${attributes['scrollbar-container-content']}
23
23
  ${{
24
24
  onscroll: function () {
@@ -38,7 +38,7 @@ export default template.factory(function (attributes, content) {
38
38
 
39
39
  <div
40
40
  class='scrollbar'
41
- ${this?.attributes?.scrollbar}
41
+ ${this.attributes?.scrollbar}
42
42
  ${attributes.scrollbar}
43
43
  ${{
44
44
  class: () => state.height >= 100 && 'scrollbar--hidden',
package/build/components/select/index.js CHANGED
@@ -49,19 +49,20 @@ const select = template.factory(function (attributes, content) {
49
49
  selected: attributes.selected || Object.keys(options)[0]
50
50
  });
51
51
  return html `
52
- <label
52
+ <div
53
53
  class='select tooltip ${() => state.active && '--active'}'
54
+ ${this.attributes && omit(this.attributes, OMIT)}
55
+ ${omit(attributes, OMIT)}
54
56
  onclick=${() => {
55
57
  if (state.render) {
56
58
  set(state, !state.active);
57
59
  }
58
60
  state.render = true;
59
61
  }}
60
- ${omit(attributes, OMIT)}
61
62
  >
62
63
  ${content || (() => options[state.selected] || '-')}
63
64
 
64
- <div class='select-arrow' ${attributes.arrow}></div>
65
+ <div class='select-arrow' ${this.attributes?.arrow} ${attributes.arrow}></div>
65
66
 
66
67
  <input class='select-tag'
67
68
  ${{
@@ -102,14 +103,15 @@ const select = template.factory(function (attributes, content) {
102
103
  }, keys.map((key) => html `
103
104
  <div
104
105
  class='link select-option ${() => selected[key] && '--active'}'
105
- data-key='${key}'
106
+ ${this.attributes?.option}
106
107
  ${option}
108
+ data-key='${key}'
107
109
  >
108
110
  ${options[key]}
109
111
  </div>
110
112
  `));
111
113
  }}
112
- </label>
114
+ </div>
113
115
  `;
114
116
  });
115
117
  export default select;
package/build/components/switch/index.d.ts CHANGED
@@ -1,121 +1,10 @@
1
1
  import './scss/index.scss';
2
- declare const _default: (attributes?: ({
3
- [key: `aria-${string}`]: string | number | boolean | undefined;
4
- [key: `data-${string}`]: string | undefined;
5
- class?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
6
- onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
7
- ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
8
- onrender?: ((element: import("@esportsplus/template").Element) => void) | undefined;
9
- ontick?: ((dispose: VoidFunction, element: import("@esportsplus/template").Element) => void) | undefined;
10
- style?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
11
- } & {
12
- onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
13
- onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
14
- onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
15
- onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
16
- onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
17
- onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
18
- onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
19
- onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
20
- onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
21
- oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
22
- oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
23
- oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
24
- onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
25
- onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
26
- onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
27
- oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
28
- oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
29
- oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
30
- oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
31
- oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
32
- oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
33
- oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
34
- oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
35
- oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
36
- ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
37
- ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
38
- ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
39
- ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
40
- ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
41
- ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
42
- ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
43
- ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
44
- ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
45
- onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
46
- onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
47
- onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
48
- onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
49
- onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
50
- onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
51
- onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
52
- ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
53
- oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
54
- oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
55
- onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
56
- onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
57
- onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
58
- onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
59
- onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
60
- onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
61
- onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
62
- onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
63
- onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
64
- onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
65
- onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
66
- onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
67
- onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
68
- onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
69
- onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
70
- onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
71
- onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
72
- onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
73
- onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
74
- onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
75
- onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
76
- onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
77
- onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
78
- onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
79
- onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
80
- onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
81
- onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
82
- onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
83
- onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
84
- onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
85
- onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
86
- onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
87
- onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
88
- onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
89
- onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
90
- onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
91
- onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
92
- onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
93
- onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
94
- onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
95
- onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
96
- onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
97
- onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
98
- ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
99
- ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
100
- ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
101
- ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
102
- ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
103
- ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
104
- ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
105
- ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
106
- ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
107
- ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
108
- onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
109
- onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
110
- onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
111
- onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
112
- onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
113
- onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
114
- onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
115
- } & Record<PropertyKey, unknown> & {
2
+ declare const _default: (this: {
3
+ attributes?: import("@esportsplus/template").Attributes;
4
+ }, attributes?: import("@esportsplus/template").Attributes & {
116
5
  state?: {
117
6
  active: boolean;
118
7
  error: string;
119
8
  };
120
- }) | undefined) => Node;
9
+ }) => Node;
121
10
  export default _default;
package/build/components/switch/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import { template } from '../../components/checkbox/index.js';
1
+ import { factory } from '../../components/checkbox/index.js';
2
2
  import './scss/index.scss';
3
- export default template.bind({ type: 'switch' });
3
+ export default factory('switch');
package/build/components/textarea/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { type Attributes } from '@esportsplus/template';
2
2
  import './scss/index.scss';
3
- declare const _default: (attributes: Attributes & {
3
+ export default function (this: {
4
+ attributes?: Attributes;
5
+ }, attributes: Attributes & {
4
6
  state?: {
5
7
  active: boolean;
6
8
  error: string;
7
9
  };
8
- }) => Node;
9
- export default _default;
10
+ }): Node;
package/build/components/textarea/index.js CHANGED
@@ -4,7 +4,7 @@ import { omit } from '@esportsplus/utilities';
4
4
  import form from '../../components/form/index.js';
5
5
  import './scss/index.scss';
6
6
  const OMIT = ['state'];
7
- export default (attributes) => {
7
+ export default function (attributes) {
8
8
  let state = attributes.state || reactive({
9
9
  active: false,
10
10
  error: ''
@@ -12,6 +12,8 @@ export default (attributes) => {
12
12
  return html `
13
13
  <textarea
14
14
  class='textarea'
15
+ ${this.attributes && omit(this.attributes, OMIT)}
16
+ ${omit(attributes, OMIT)}
15
17
  ${{
16
18
  class: () => state.active && '--active',
17
19
  onfocusin: () => {
@@ -22,9 +24,9 @@ export default (attributes) => {
22
24
  },
23
25
  onrender: form.input.onrender(state)
24
26
  }}
25
- ${omit(attributes, OMIT)}
26
27
  >
27
28
  ${attributes?.value}
28
29
  </textarea>
29
30
  `;
30
- };
31
+ }
32
+ ;
package/package.json CHANGED
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.32.5",
51
+ "version": "0.33.0",
52
52
  "scripts": {
53
53
  "build": "run-s build:vite build:ts",
54
54
  "build:ts": "tsc && tsc-alias",
package/src/components/checkbox/index.ts CHANGED
@@ -8,37 +8,45 @@ import './scss/index.scss';
8
8
  const OMIT = ['checked', 'value'];
9
9
 
10
10
 
11
- const template = function(
12
- this: { type: string },
13
- attributes?: Attributes & { state?: { active: boolean, error: string } }
14
- ) {
15
- let state = attributes?.state || reactive({
16
- active: false,
17
- error: ''
18
- });
19
-
20
- if (attributes?.checked) {
21
- state.active = true;
11
+ const factory = (type: string) => {
12
+ function template(
13
+ this: { attributes?: Attributes },
14
+ attributes?: Attributes & { state?: { active: boolean, error: string } }
15
+ ) {
16
+ let state = attributes?.state || reactive({
17
+ active: false,
18
+ error: ''
19
+ });
20
+
21
+ if (attributes?.checked) {
22
+ state.active = true;
23
+ }
24
+
25
+ return html`
26
+ <div
27
+ class='${type} ${() => state.active && '--active'}'
28
+ ${this.attributes && omit(this.attributes, OMIT)}
29
+ ${attributes && omit(attributes, OMIT)}
30
+ >
31
+ <input
32
+ ${{
33
+ checked: attributes?.checked || root(() => state.active),
34
+ class: `${type}-tag`,
35
+ onchange: (e: Event) => {
36
+ state.active = (e.target as HTMLInputElement).checked;
37
+ },
38
+ onrender: form.input.onrender(state),
39
+ type: type === 'radio' ? 'radio' : 'checkbox',
40
+ value: attributes?.value || 1
41
+ }}
42
+ >
43
+ </div>
44
+ `;
22
45
  }
23
46
 
24
- return html`
25
- <div class='${this.type} ${() => state.active && '--active'}' ${attributes && omit(attributes, OMIT)}>
26
- <input
27
- ${{
28
- checked: attributes?.checked || root(() => state.active),
29
- class: `${this.type}-tag`,
30
- onchange: (e: Event) => {
31
- state.active = (e.target as HTMLInputElement).checked;
32
- },
33
- onrender: form.input.onrender(state),
34
- type: this.type === 'radio' ? 'radio' : 'checkbox',
35
- value: attributes?.value || 1
36
- }}
37
- >
38
- </div>
39
- `;
47
+ return template;
40
48
  };
41
49
 
42
50
 
43
- export default template.bind({ type: 'checkbox' });
44
- export { template };
51
+ export default factory('checkbox');
52
+ export { factory };
package/src/components/radio/index.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { template } from '~/components/checkbox';
1
+ import { factory } from '~/components/checkbox';
2
2
  import './scss/index.scss';
3
3
 
4
4
 
5
- export default template.bind({ type: 'radio' });
5
+ export default factory('radio');
package/src/components/range/index.ts CHANGED
@@ -4,7 +4,10 @@ import form from '~/components/form';
4
4
  import './scss/index.scss';
5
5
 
6
6
 
7
- export default (attributes: Attributes & { state?: { active: boolean, error: string, value: number } }) => {
7
+ export default function(
8
+ this: { attributes: Attributes },
9
+ attributes: Attributes & { state?: { active: boolean, error: string, value: number } }
10
+ ) {
8
11
  let state = attributes.state || reactive({
9
12
  active: false,
10
13
  error: '',
@@ -19,6 +22,8 @@ export default (attributes: Attributes & { state?: { active: boolean, error: str
19
22
  <input
20
23
  class='range --border-state --border-black'
21
24
  type='range'
25
+ ${this.attributes}
26
+ ${attributes}
22
27
  ${{
23
28
  class: () => state.active && '--active',
24
29
  onfocusin: () => {
@@ -33,7 +38,6 @@ export default (attributes: Attributes & { state?: { active: boolean, error: str
33
38
  onrender: form.input.onrender(state),
34
39
  value: root(() => (attributes?.value as number) || state.value || 0)
35
40
  }}
36
- ${attributes}
37
41
  />
38
42
  `;
39
43
  };
package/src/components/scrollbar/index.ts CHANGED
@@ -25,12 +25,12 @@ export default template.factory<A>(
25
25
  return html`
26
26
  <div
27
27
  class='scrollbar-container'
28
- ${this?.attributes && omit(this.attributes, OMIT)}
28
+ ${this.attributes && omit(this.attributes, OMIT)}
29
29
  ${omit(attributes, OMIT)}
30
30
  >
31
31
  <div
32
32
  class='scrollbar-container-content'
33
- ${this?.attributes?.['scrollbar-container-content']}
33
+ ${this.attributes?.['scrollbar-container-content']}
34
34
  ${attributes['scrollbar-container-content']}
35
35
  ${{
36
36
  onscroll: function() {
@@ -52,7 +52,7 @@ export default template.factory<A>(
52
52
 
53
53
  <div
54
54
  class='scrollbar'
55
- ${this?.attributes?.scrollbar}
55
+ ${this.attributes?.scrollbar}
56
56
  ${attributes.scrollbar}
57
57
  ${{
58
58
  class: () => state.height >= 100 && 'scrollbar--hidden',
package/src/components/select/index.ts CHANGED
@@ -74,7 +74,7 @@ function set(current: { active: boolean }, value: boolean) {
74
74
  }
75
75
 
76
76
  const select = template.factory<A>(
77
- function(attributes: A, content) {
77
+ function(this: { attributes?: Exclude<A, 'options' | 'selected' | 'state'> }, attributes: A, content) {
78
78
  let { options, option } = attributes,
79
79
  state = attributes.state || reactive({
80
80
  active: false,
@@ -84,8 +84,10 @@ const select = template.factory<A>(
84
84
  });
85
85
 
86
86
  return html`
87
- <label
87
+ <div
88
88
  class='select tooltip ${() => state.active && '--active'}'
89
+ ${this.attributes && omit(this.attributes, OMIT)}
90
+ ${omit(attributes, OMIT)}
89
91
  onclick=${() => {
90
92
  if (state.render) {
91
93
  set(state, !state.active);
@@ -93,11 +95,10 @@ const select = template.factory<A>(
93
95
 
94
96
  state.render = true;
95
97
  }}
96
- ${omit(attributes, OMIT)}
97
98
  >
98
99
  ${content || (() => options[ state.selected! ] || '-')}
99
100
 
100
- <div class='select-arrow' ${attributes.arrow}></div>
101
+ <div class='select-arrow' ${this.attributes?.arrow} ${attributes.arrow}></div>
101
102
 
102
103
  <input class='select-tag'
103
104
  ${{
@@ -149,15 +150,16 @@ const select = template.factory<A>(
149
150
  keys.map((key) => html`
150
151
  <div
151
152
  class='link select-option ${() => selected[key] && '--active'}'
152
- data-key='${key}'
153
+ ${this.attributes?.option}
153
154
  ${option}
155
+ data-key='${key}'
154
156
  >
155
157
  ${options[key]}
156
158
  </div>
157
159
  `)
158
160
  );
159
161
  }}
160
- </label>
162
+ </div>
161
163
  `;
162
164
  }
163
165
  );
package/src/components/switch/index.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { template } from '~/components/checkbox';
1
+ import { factory } from '~/components/checkbox';
2
2
  import './scss/index.scss';
3
3
 
4
4
 
5
- export default template.bind({ type: 'switch' });
5
+ export default factory('switch');
package/src/components/textarea/index.ts CHANGED
@@ -8,7 +8,10 @@ import './scss/index.scss';
8
8
  const OMIT = ['state'];
9
9
 
10
10
 
11
- export default (attributes: Attributes & { state?: { active: boolean, error: string } }) => {
11
+ export default function(
12
+ this: { attributes?: Attributes },
13
+ attributes: Attributes & { state?: { active: boolean, error: string } }
14
+ ) {
12
15
  let state = attributes.state || reactive({
13
16
  active: false,
14
17
  error: ''
@@ -17,6 +20,8 @@ export default (attributes: Attributes & { state?: { active: boolean, error: str
17
20
  return html`
18
21
  <textarea
19
22
  class='textarea'
23
+ ${this.attributes && omit(this.attributes, OMIT)}
24
+ ${omit(attributes, OMIT)}
20
25
  ${{
21
26
  class: () => state.active && '--active',
22
27
  onfocusin: () => {
@@ -27,7 +32,6 @@ export default (attributes: Attributes & { state?: { active: boolean, error: str
27
32
  },
28
33
  onrender: form.input.onrender(state)
29
34
  }}
30
- ${omit(attributes, OMIT)}
31
35
  >
32
36
  ${attributes?.value as string}
33
37
  </textarea>