@esportsplus/ui 0.19.0 → 0.19.2

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 (11) hide show
  1. package/build/components/field/checkbox.d.ts +1 -6
  2. package/build/components/field/checkbox.js +20 -13
  3. package/build/components/field/index.d.ts +12 -72
  4. package/build/components/field/input.js +22 -35
  5. package/build/components/field/select.js +3 -11
  6. package/build/components/template/index.js +1 -2
  7. package/package.json +1 -1
  8. package/src/components/field/checkbox.ts +23 -20
  9. package/src/components/field/input.ts +32 -39
  10. package/src/components/field/select.ts +4 -15
  11. package/src/components/template/index.ts +1 -2
package/build/components/field/checkbox.d.ts CHANGED
@@ -1,11 +1,6 @@
1
1
  import { type Attributes, type Renderable } from '@esportsplus/template';
2
2
  type A = Attributes & {
3
- checked?: boolean;
4
- disabled?: boolean;
5
- name?: string;
6
- required?: boolean;
7
- type?: string;
8
- value?: unknown;
3
+ 'field-mask-tag'?: Attributes;
9
4
  };
10
5
  declare const _default: {
11
6
  checkbox: {
package/build/components/field/checkbox.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html } from '@esportsplus/template';
3
- import { omit, pick } from '@esportsplus/utilities';
3
+ import { omit } from '@esportsplus/utilities';
4
4
  import template from '../../components/template/index.js';
5
5
  const OMIT_FIELD = ['state'];
6
- const TAG = ['checked', 'disabled', 'name', 'required'];
6
+ const OMIT_TAG = ['field-mask-tag'];
7
7
  function mask(attributes, modifier, state) {
8
+ let a = attributes['field-mask-tag'] || {};
8
9
  return html `
9
10
  <div
10
11
  class='field-mask'
11
- ${omit(attributes, TAG)}
12
+ ${omit(attributes, OMIT_TAG)}
12
13
  ${{
13
14
  class: `field-mask--${modifier}`
14
15
  }}
@@ -16,11 +17,11 @@ function mask(attributes, modifier, state) {
16
17
  <input
17
18
  class='field-mask-tag field-mask-tag--hidden'
18
19
  ${{
19
- checked: attributes.checked || attributes.value || state.active,
20
+ checked: a.checked || a.value || state.active,
20
21
  type: modifier === 'radio' ? 'radio' : 'checkbox',
21
- value: attributes.value || 1
22
+ value: a.value || 1
22
23
  }}
23
- ${pick(attributes, TAG)}
24
+ ${a}
24
25
  >
25
26
  </div>
26
27
  `;
@@ -43,18 +44,24 @@ const field = template.factory(function (attributes, content) {
43
44
  }
44
45
  }}
45
46
  >
46
- ${content((attributes) => this(attributes, state))}
47
+ ${content((attributes) => this.mask(attributes, state))}
47
48
  </label>
48
49
  `;
49
50
  });
50
51
  export default {
51
- checkbox: field.bind((attributes, state) => {
52
- return mask(attributes, 'checkbox', state);
52
+ checkbox: field.bind({
53
+ mask: (attributes, state) => {
54
+ return mask(attributes, 'checkbox', state);
55
+ }
53
56
  }),
54
- radio: field.bind((attributes, state) => {
55
- return mask(attributes, 'radio', state);
57
+ radio: field.bind({
58
+ mask: (attributes, state) => {
59
+ return mask(attributes, 'radio', state);
60
+ }
56
61
  }),
57
- switch: field.bind((attributes, state) => {
58
- return mask(attributes, 'switch', state);
62
+ switch: field.bind({
63
+ mask: (attributes, state) => {
64
+ return mask(attributes, 'switch', state);
65
+ }
59
66
  }),
60
67
  };
package/build/components/field/index.d.ts CHANGED
@@ -118,12 +118,7 @@ declare const cb: {
118
118
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
119
119
  onrender?: (element: import("@esportsplus/template").Element) => void;
120
120
  } & Record<PropertyKey, unknown> & {
121
- checked?: boolean;
122
- disabled?: boolean;
123
- name?: string;
124
- required?: boolean;
125
- type?: string;
126
- value?: unknown;
121
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
127
122
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
128
123
  (attributes: import("@esportsplus/template").Attributes, content: (mask: ((attributes: {
129
124
  class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
@@ -239,12 +234,7 @@ declare const cb: {
239
234
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
240
235
  onrender?: (element: import("@esportsplus/template").Element) => void;
241
236
  } & Record<PropertyKey, unknown> & {
242
- checked?: boolean;
243
- disabled?: boolean;
244
- name?: string;
245
- required?: boolean;
246
- type?: string;
247
- value?: unknown;
237
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
248
238
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
249
239
  }, radio: {
250
240
  (): import("@esportsplus/template").Renderable<unknown>;
@@ -362,12 +352,7 @@ declare const cb: {
362
352
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
363
353
  onrender?: (element: import("@esportsplus/template").Element) => void;
364
354
  } & Record<PropertyKey, unknown> & {
365
- checked?: boolean;
366
- disabled?: boolean;
367
- name?: string;
368
- required?: boolean;
369
- type?: string;
370
- value?: unknown;
355
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
371
356
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
372
357
  (attributes: import("@esportsplus/template").Attributes, content: (mask: ((attributes: {
373
358
  class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
@@ -483,12 +468,7 @@ declare const cb: {
483
468
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
484
469
  onrender?: (element: import("@esportsplus/template").Element) => void;
485
470
  } & Record<PropertyKey, unknown> & {
486
- checked?: boolean;
487
- disabled?: boolean;
488
- name?: string;
489
- required?: boolean;
490
- type?: string;
491
- value?: unknown;
471
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
492
472
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
493
473
  }, sw: {
494
474
  (): import("@esportsplus/template").Renderable<unknown>;
@@ -606,12 +586,7 @@ declare const cb: {
606
586
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
607
587
  onrender?: (element: import("@esportsplus/template").Element) => void;
608
588
  } & Record<PropertyKey, unknown> & {
609
- checked?: boolean;
610
- disabled?: boolean;
611
- name?: string;
612
- required?: boolean;
613
- type?: string;
614
- value?: unknown;
589
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
615
590
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
616
591
  (attributes: import("@esportsplus/template").Attributes, content: (mask: ((attributes: {
617
592
  class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
@@ -727,12 +702,7 @@ declare const cb: {
727
702
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
728
703
  onrender?: (element: import("@esportsplus/template").Element) => void;
729
704
  } & Record<PropertyKey, unknown> & {
730
- checked?: boolean;
731
- disabled?: boolean;
732
- name?: string;
733
- required?: boolean;
734
- type?: string;
735
- value?: unknown;
705
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
736
706
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
737
707
  };
738
708
  declare const file: {
@@ -937,12 +907,7 @@ declare const _default: {
937
907
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
938
908
  onrender?: (element: import("@esportsplus/template").Element) => void;
939
909
  } & Record<PropertyKey, unknown> & {
940
- checked?: boolean;
941
- disabled?: boolean;
942
- name?: string;
943
- required?: boolean;
944
- type?: string;
945
- value?: unknown;
910
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
946
911
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
947
912
  (attributes: import("@esportsplus/template").Attributes, content: (mask: ((attributes: {
948
913
  class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
@@ -1058,12 +1023,7 @@ declare const _default: {
1058
1023
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
1059
1024
  onrender?: (element: import("@esportsplus/template").Element) => void;
1060
1025
  } & Record<PropertyKey, unknown> & {
1061
- checked?: boolean;
1062
- disabled?: boolean;
1063
- name?: string;
1064
- required?: boolean;
1065
- type?: string;
1066
- value?: unknown;
1026
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
1067
1027
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
1068
1028
  };
1069
1029
  description: {
@@ -1216,12 +1176,7 @@ declare const _default: {
1216
1176
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
1217
1177
  onrender?: (element: import("@esportsplus/template").Element) => void;
1218
1178
  } & Record<PropertyKey, unknown> & {
1219
- checked?: boolean;
1220
- disabled?: boolean;
1221
- name?: string;
1222
- required?: boolean;
1223
- type?: string;
1224
- value?: unknown;
1179
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
1225
1180
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
1226
1181
  (attributes: import("@esportsplus/template").Attributes, content: (mask: ((attributes: {
1227
1182
  class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
@@ -1337,12 +1292,7 @@ declare const _default: {
1337
1292
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
1338
1293
  onrender?: (element: import("@esportsplus/template").Element) => void;
1339
1294
  } & Record<PropertyKey, unknown> & {
1340
- checked?: boolean;
1341
- disabled?: boolean;
1342
- name?: string;
1343
- required?: boolean;
1344
- type?: string;
1345
- value?: unknown;
1295
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
1346
1296
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
1347
1297
  };
1348
1298
  select: {
@@ -1601,12 +1551,7 @@ declare const _default: {
1601
1551
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
1602
1552
  onrender?: (element: import("@esportsplus/template").Element) => void;
1603
1553
  } & Record<PropertyKey, unknown> & {
1604
- checked?: boolean;
1605
- disabled?: boolean;
1606
- name?: string;
1607
- required?: boolean;
1608
- type?: string;
1609
- value?: unknown;
1554
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
1610
1555
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
1611
1556
  (attributes: import("@esportsplus/template").Attributes, content: (mask: ((attributes: {
1612
1557
  class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
@@ -1722,12 +1667,7 @@ declare const _default: {
1722
1667
  ondisconnect?: (element: import("@esportsplus/template").Element) => void;
1723
1668
  onrender?: (element: import("@esportsplus/template").Element) => void;
1724
1669
  } & Record<PropertyKey, unknown> & {
1725
- checked?: boolean;
1726
- disabled?: boolean;
1727
- name?: string;
1728
- required?: boolean;
1729
- type?: string;
1730
- value?: unknown;
1670
+ 'field-mask-tag'?: import("@esportsplus/template").Attributes;
1731
1671
  }) => import("@esportsplus/template").Renderable<unknown>)) => import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
1732
1672
  };
1733
1673
  textarea: {
package/build/components/field/input.js CHANGED
@@ -1,28 +1,11 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html } from '@esportsplus/template';
3
- import { omit, pick } from '@esportsplus/utilities';
3
+ import { omit } from '@esportsplus/utilities';
4
4
  import form from '../../components/form/index.js';
5
5
  import template from '../../components/template/index.js';
6
6
  import error from './error.js';
7
- const FILE_TAG = ['accept', 'disabled', 'name', 'required', 'value'];
8
- const OMIT = ['state'];
9
- const TEXT_TAG = [
10
- 'autocapitalize',
11
- 'autocomplete',
12
- 'autocorrect',
13
- 'autofocus',
14
- 'disabled',
15
- 'maxlength',
16
- 'minlength',
17
- 'name',
18
- 'placeholder',
19
- 'readonly',
20
- 'required',
21
- 'spellcheck',
22
- 'type',
23
- 'value',
24
- 'wrap'
25
- ];
7
+ const OMIT_FIELD = ['state'];
8
+ const OMIT_TAG = ['field-mask-tag'];
26
9
  const field = template.factory(function (attributes, content) {
27
10
  let state = attributes.state || reactive({
28
11
  active: false,
@@ -31,7 +14,7 @@ const field = template.factory(function (attributes, content) {
31
14
  return html `
32
15
  <div
33
16
  class='field'
34
- ${omit(attributes, OMIT)}
17
+ ${omit(attributes, OMIT_FIELD)}
35
18
  ${{
36
19
  class: () => state.active && '--active',
37
20
  onfocusin: () => {
@@ -42,7 +25,7 @@ const field = template.factory(function (attributes, content) {
42
25
  }
43
26
  }}
44
27
  >
45
- ${content(((...args) => this.call(state, ...args)))}
28
+ ${content((...args) => this.mask.call({ state }, ...args))}
46
29
  ${error(state)}
47
30
  </div>
48
31
  `;
@@ -51,14 +34,14 @@ const file = template.factory(function (attributes, content) {
51
34
  return html `
52
35
  <label
53
36
  class='field-mask field-mask--file'
54
- ${omit(attributes, FILE_TAG)}
37
+ ${omit(attributes, OMIT_TAG)}
55
38
  >
56
39
  <input
57
40
  class='field-mask-tag field-mask-tag--hidden'
58
41
  type='file'
59
- ${pick(attributes, FILE_TAG)}
42
+ ${attributes['field-mask-tag']}
60
43
  ${{
61
- onrender: form.input.onrender(this)
44
+ onrender: form.input.onrender(this.state)
62
45
  }}
63
46
  >
64
47
 
@@ -68,12 +51,15 @@ const file = template.factory(function (attributes, content) {
68
51
  });
69
52
  const text = template.factory(function (attributes, content) {
70
53
  return html `
71
- <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG)}>
54
+ <label
55
+ class='field-mask field-mask--input'
56
+ ${omit(attributes, OMIT_TAG)}
57
+ >
72
58
  <input
73
59
  class='field-mask-tag'
74
- ${pick(attributes, TEXT_TAG)}
60
+ ${attributes['field-mask-tag']}
75
61
  ${{
76
- onrender: form.input.onrender(this),
62
+ onrender: form.input.onrender(this.state),
77
63
  type: attributes.type || 'text'
78
64
  }}
79
65
  >
@@ -82,26 +68,27 @@ const text = template.factory(function (attributes, content) {
82
68
  `;
83
69
  });
84
70
  const textarea = template.factory(function (attributes, content) {
71
+ let a = attributes['field-mask-tag'] || {};
85
72
  return html `
86
73
  <label
87
74
  class='field-mask field-mask--textarea'
88
- ${omit(attributes, TEXT_TAG)}
75
+ ${omit(attributes, OMIT_TAG)}
89
76
  >
90
77
  <textarea
91
78
  class='field-mask-tag'
92
- ${pick(attributes, TEXT_TAG)}
79
+ ${a}
93
80
  ${{
94
- onrender: form.input.onrender(this)
81
+ onrender: form.input.onrender(this.state)
95
82
  }}
96
83
  >
97
- ${attributes.value}
84
+ ${a.value}
98
85
  </textarea>
99
86
  ${content}
100
87
  </label>
101
88
  `;
102
89
  });
103
90
  export default {
104
- file: field.bind(file),
105
- text: field.bind(text),
106
- textarea: field.bind(textarea)
91
+ file: field.bind({ mask: file }),
92
+ text: field.bind({ mask: text }),
93
+ textarea: field.bind({ mask: textarea })
107
94
  };
package/build/components/field/select.js CHANGED
@@ -1,24 +1,16 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html } from '@esportsplus/template';
3
- import { isObject, omit, pick, toArray } from '@esportsplus/utilities';
3
+ import { isObject, omit, toArray } from '@esportsplus/utilities';
4
4
  import form from '../../components/form/index.js';
5
5
  import root from '../../components/root/index.js';
6
6
  import scrollbar from '../../components/scrollbar/index.js';
7
7
  import template from '../../components/template/index.js';
8
8
  import error from './error.js';
9
- const PICK_TAG = [
10
- 'autocomplete',
11
- 'autofocus',
12
- 'disabled',
13
- 'name',
14
- 'required',
15
- 'type'
16
- ];
17
9
  const OMIT_FIELD = ['options', 'state'];
18
10
  const OMIT_MASK = [
19
- ...PICK_TAG,
20
11
  'field-mask-arrow',
21
12
  'field-mask-text',
13
+ 'field-mask-tag',
22
14
  'scrollbar',
23
15
  'scrollbar-container-content',
24
16
  'tooltip-content',
@@ -47,7 +39,7 @@ const select = template.factory(function (attributes, content) {
47
39
  onrender: form.input.onrender(state),
48
40
  value: () => state.selected
49
41
  }}
50
- ${pick(attributes, PICK_TAG)}
42
+ ${attributes['field-mask-tag']}
51
43
  >
52
44
 
53
45
  ${content || html `
package/build/components/template/index.js CHANGED
@@ -1,4 +1,3 @@
1
- import { EMPTY_OBJECT } from '@esportsplus/utilities';
2
1
  const factory = (template) => {
3
2
  function factory(one, two) {
4
3
  let attributes = {}, content;
@@ -11,6 +10,6 @@ const factory = (template) => {
11
10
  }
12
11
  return template.call(this, attributes, content);
13
12
  }
14
- return factory.bind(EMPTY_OBJECT);
13
+ return factory;
15
14
  };
16
15
  export default { factory };
package/package.json CHANGED
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.19.0",
51
+ "version": "0.19.2",
52
52
  "scripts": {
53
53
  "build": "run-s build:vite build:ts",
54
54
  "build:ts": "tsc && tsc-alias",
package/src/components/field/checkbox.ts CHANGED
@@ -1,29 +1,26 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html, type Attributes, type Renderable } from '@esportsplus/template';
3
- import { omit, pick } from '@esportsplus/utilities';
3
+ import { omit } from '@esportsplus/utilities';
4
4
  import template from '~/components/template';
5
5
 
6
6
 
7
7
  type A = Attributes & {
8
- checked?: boolean;
9
- disabled?: boolean;
10
- name?: string;
11
- required?: boolean;
12
- type?: string;
13
- value?: unknown;
8
+ 'field-mask-tag'?: Attributes
14
9
  };
15
10
 
16
11
 
17
12
  const OMIT_FIELD = ['state'];
18
13
 
19
- const TAG = ['checked', 'disabled', 'name', 'required'];
14
+ const OMIT_TAG = ['field-mask-tag'];
20
15
 
21
16
 
22
17
  function mask(attributes: A, modifier: string, state: { active: boolean }) {
18
+ let a = attributes['field-mask-tag'] || {};
19
+
23
20
  return html`
24
21
  <div
25
22
  class='field-mask'
26
- ${omit(attributes, TAG)}
23
+ ${omit(attributes, OMIT_TAG)}
27
24
  ${{
28
25
  class: `field-mask--${modifier}`
29
26
  }}
@@ -31,11 +28,11 @@ function mask(attributes: A, modifier: string, state: { active: boolean }) {
31
28
  <input
32
29
  class='field-mask-tag field-mask-tag--hidden'
33
30
  ${{
34
- checked: attributes.checked || attributes.value || state.active,
31
+ checked: a.checked || a.value || state.active,
35
32
  type: modifier === 'radio' ? 'radio' : 'checkbox',
36
- value: attributes.value || 1
33
+ value: a.value || 1
37
34
  }}
38
- ${pick(attributes, TAG) as Attributes}
35
+ ${a}
39
36
  >
40
37
  </div>
41
38
  `;
@@ -44,7 +41,7 @@ function mask(attributes: A, modifier: string, state: { active: boolean }) {
44
41
 
45
42
  const field = template.factory(
46
43
  function(
47
- this: ((attributes: A, state: { active: boolean }) => Renderable<unknown>),
44
+ this: { mask: (attributes: A, state: { active: boolean }) => Renderable<unknown> },
48
45
  attributes: Attributes & { state?: { active: boolean } },
49
46
  content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>
50
47
  ) {
@@ -67,7 +64,7 @@ const field = template.factory(
67
64
  }
68
65
  }}
69
66
  >
70
- ${content((attributes) => this(attributes, state))}
67
+ ${content((attributes) => this.mask(attributes, state))}
71
68
  </label>
72
69
  `
73
70
  }
@@ -75,13 +72,19 @@ const field = template.factory(
75
72
 
76
73
 
77
74
  export default {
78
- checkbox: field.bind((attributes: A, state: { active: boolean }) => {
79
- return mask(attributes, 'checkbox', state);
75
+ checkbox: field.bind({
76
+ mask: (attributes: A, state: { active: boolean }) => {
77
+ return mask(attributes, 'checkbox', state);
78
+ }
80
79
  }),
81
- radio: field.bind((attributes: A, state: { active: boolean }) => {
82
- return mask(attributes, 'radio', state);
80
+ radio: field.bind({
81
+ mask: (attributes: A, state: { active: boolean }) => {
82
+ return mask(attributes, 'radio', state);
83
+ }
83
84
  }),
84
- switch: field.bind((attributes: A, state: { active: boolean }) => {
85
- return mask(attributes, 'switch', state);
85
+ switch: field.bind({
86
+ mask: (attributes: A, state: { active: boolean }) => {
87
+ return mask(attributes, 'switch', state);
88
+ }
86
89
  }),
87
90
  };
package/src/components/field/input.ts CHANGED
@@ -1,37 +1,24 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html, type Attributes, type Renderable } from '@esportsplus/template';
3
- import { omit, pick } from '@esportsplus/utilities';
3
+ import { omit } from '@esportsplus/utilities';
4
4
  import form from '~/components/form';
5
5
  import template from '~/components/template';
6
6
  import error from './error';
7
7
 
8
8
 
9
- const FILE_TAG = ['accept', 'disabled', 'name', 'required', 'value'];
9
+ type A = Attributes & {
10
+ 'field-mask-tag'?: Attributes
11
+ };
12
+
10
13
 
11
- const OMIT = ['state'];
14
+ const OMIT_FIELD = ['state'];
12
15
 
13
- const TEXT_TAG = [
14
- 'autocapitalize',
15
- 'autocomplete',
16
- 'autocorrect',
17
- 'autofocus',
18
- 'disabled',
19
- 'maxlength',
20
- 'minlength',
21
- 'name',
22
- 'placeholder',
23
- 'readonly',
24
- 'required',
25
- 'spellcheck',
26
- 'type',
27
- 'value',
28
- 'wrap'
29
- ];
16
+ const OMIT_TAG = ['field-mask-tag'];
30
17
 
31
18
 
32
19
  const field = template.factory(
33
20
  function(
34
- this: typeof text | typeof textarea,
21
+ this: { mask: typeof file | typeof text | typeof textarea },
35
22
  attributes: Attributes & { state?: { active: boolean, error: string } },
36
23
  content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>
37
24
  ) {
@@ -43,7 +30,7 @@ const field = template.factory(
43
30
  return html`
44
31
  <div
45
32
  class='field'
46
- ${omit(attributes, OMIT)}
33
+ ${omit(attributes, OMIT_FIELD)}
47
34
  ${{
48
35
  class: () => state.active && '--active',
49
36
  onfocusin: () => {
@@ -55,7 +42,8 @@ const field = template.factory(
55
42
  }}
56
43
  >
57
44
  ${content(
58
- ((...args: any[]) => (this.call as any)(state, ...args))
45
+ // @ts-ignore
46
+ (...args: any[]) => this.mask.call({ state }, ...args)
59
47
  )}
60
48
  ${error(state)}
61
49
  </div>
@@ -64,18 +52,18 @@ const field = template.factory(
64
52
  );
65
53
 
66
54
  const file = template.factory(
67
- function(this: { active: boolean, error: string }, attributes, content) {
55
+ function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
68
56
  return html`
69
57
  <label
70
58
  class='field-mask field-mask--file'
71
- ${omit(attributes, FILE_TAG)}
59
+ ${omit(attributes, OMIT_TAG)}
72
60
  >
73
61
  <input
74
62
  class='field-mask-tag field-mask-tag--hidden'
75
63
  type='file'
76
- ${pick(attributes, FILE_TAG) as Attributes}
64
+ ${attributes['field-mask-tag']}
77
65
  ${{
78
- onrender: form.input.onrender(this)
66
+ onrender: form.input.onrender(this.state)
79
67
  }}
80
68
  >
81
69
 
@@ -86,14 +74,17 @@ const file = template.factory(
86
74
  );
87
75
 
88
76
  const text = template.factory(
89
- function(this: { active: boolean, error: string }, attributes, content) {
77
+ function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
90
78
  return html`
91
- <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG)}>
79
+ <label
80
+ class='field-mask field-mask--input'
81
+ ${omit(attributes, OMIT_TAG)}
82
+ >
92
83
  <input
93
84
  class='field-mask-tag'
94
- ${pick(attributes, TEXT_TAG) as Attributes}
85
+ ${attributes['field-mask-tag']}
95
86
  ${{
96
- onrender: form.input.onrender(this),
87
+ onrender: form.input.onrender(this.state),
97
88
  type: attributes.type || 'text'
98
89
  }}
99
90
  >
@@ -104,20 +95,22 @@ const text = template.factory(
104
95
  );
105
96
 
106
97
  const textarea = template.factory(
107
- function(this: { active: boolean, error: string }, attributes: Attributes & { value?: string }, content) {
98
+ function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
99
+ let a = attributes['field-mask-tag'] || {};
100
+
108
101
  return html`
109
102
  <label
110
103
  class='field-mask field-mask--textarea'
111
- ${omit(attributes, TEXT_TAG)}
104
+ ${omit(attributes, OMIT_TAG)}
112
105
  >
113
106
  <textarea
114
107
  class='field-mask-tag'
115
- ${pick(attributes, TEXT_TAG) as Attributes}
108
+ ${a}
116
109
  ${{
117
- onrender: form.input.onrender(this)
110
+ onrender: form.input.onrender(this.state)
118
111
  }}
119
112
  >
120
- ${attributes.value}
113
+ ${a.value as string}
121
114
  </textarea>
122
115
  ${content}
123
116
  </label>
@@ -127,7 +120,7 @@ const textarea = template.factory(
127
120
 
128
121
 
129
122
  export default {
130
- file: field.bind(file),
131
- text: field.bind(text),
132
- textarea: field.bind(textarea)
123
+ file: field.bind({ mask: file }),
124
+ text: field.bind({ mask: text }),
125
+ textarea: field.bind({ mask: textarea })
133
126
  };
package/src/components/field/select.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { reactive } from '@esportsplus/reactivity';
2
2
  import { html, type Attributes, type Renderable } from '@esportsplus/template';
3
- import { isObject, omit, pick, toArray } from '@esportsplus/utilities';
3
+ import { isObject, omit, toArray } from '@esportsplus/utilities';
4
4
  import form from '~/components/form';
5
5
  import root from '~/components/root';
6
6
  import scrollbar, { Attributes as A } from '~/components/scrollbar';
@@ -8,21 +8,12 @@ import template from '~/components/template';
8
8
  import error from './error';
9
9
 
10
10
 
11
- const PICK_TAG = [
12
- 'autocomplete',
13
- 'autofocus',
14
- 'disabled',
15
- 'name',
16
- 'required',
17
- 'type'
18
- ];
19
-
20
11
  const OMIT_FIELD = ['options', 'state'];
21
12
 
22
13
  const OMIT_MASK = [
23
- ...PICK_TAG,
24
14
  'field-mask-arrow',
25
15
  'field-mask-text',
16
+ 'field-mask-tag',
26
17
  'scrollbar',
27
18
  'scrollbar-container-content',
28
19
  'tooltip-content',
@@ -45,6 +36,7 @@ const select = template.factory(
45
36
  },
46
37
  attributes: Attributes & A & {
47
38
  'field-mask-arrow'?: Attributes;
39
+ 'field-mask-tag'?: Attributes;
48
40
  'field-mask-text'?: Attributes;
49
41
  'tooltip-content'?: Attributes & { direction?: string };
50
42
  },
@@ -74,7 +66,7 @@ const select = template.factory(
74
66
  onrender: form.input.onrender(state),
75
67
  value: () => state.selected
76
68
  }}
77
- ${pick(attributes, PICK_TAG) as Attributes}
69
+ ${attributes['field-mask-tag']}
78
70
  >
79
71
 
80
72
  ${content || html`
@@ -142,9 +134,6 @@ const select = template.factory(
142
134
  );
143
135
 
144
136
 
145
-
146
-
147
-
148
137
  export default template.factory<
149
138
  Attributes & {
150
139
  options: Record<number | string, (number | string | Attributes & { content: unknown })>;
package/src/components/template/index.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Attributes, Renderable } from '@esportsplus/template';
2
- import { EMPTY_OBJECT } from '@esportsplus/utilities';
3
2
 
4
3
 
5
4
  const factory = <
@@ -27,7 +26,7 @@ const factory = <
27
26
  return template.call(this, attributes, content);
28
27
  }
29
28
 
30
- return factory.bind(EMPTY_OBJECT);
29
+ return factory;
31
30
  };
32
31
 
33
32