@esportsplus/ui 0.19.1 → 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 (9) 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 +15 -28
  5. package/build/components/field/select.js +3 -11
  6. package/package.json +1 -1
  7. package/src/components/field/checkbox.ts +23 -20
  8. package/src/components/field/input.ts +23 -31
  9. package/src/components/field/select.ts +4 -15
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: () => {
@@ -51,12 +34,12 @@ 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
44
  onrender: form.input.onrender(this.state)
62
45
  }}
@@ -68,10 +51,13 @@ 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
62
  onrender: form.input.onrender(this.state),
77
63
  type: attributes.type || 'text'
@@ -82,19 +68,20 @@ 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
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>
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/package.json CHANGED
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.19.1",
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,32 +1,19 @@
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(
@@ -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: () => {
@@ -65,16 +52,16 @@ const field = template.factory(
65
52
  );
66
53
 
67
54
  const file = template.factory(
68
- function(this: { state: { active: boolean, error: string } }, attributes, content) {
55
+ function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
69
56
  return html`
70
57
  <label
71
58
  class='field-mask field-mask--file'
72
- ${omit(attributes, FILE_TAG)}
59
+ ${omit(attributes, OMIT_TAG)}
73
60
  >
74
61
  <input
75
62
  class='field-mask-tag field-mask-tag--hidden'
76
63
  type='file'
77
- ${pick(attributes, FILE_TAG) as Attributes}
64
+ ${attributes['field-mask-tag']}
78
65
  ${{
79
66
  onrender: form.input.onrender(this.state)
80
67
  }}
@@ -87,12 +74,15 @@ const file = template.factory(
87
74
  );
88
75
 
89
76
  const text = template.factory(
90
- function(this: { state: { active: boolean, error: string } }, attributes, content) {
77
+ function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
91
78
  return html`
92
- <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
+ >
93
83
  <input
94
84
  class='field-mask-tag'
95
- ${pick(attributes, TEXT_TAG) as Attributes}
85
+ ${attributes['field-mask-tag']}
96
86
  ${{
97
87
  onrender: form.input.onrender(this.state),
98
88
  type: attributes.type || 'text'
@@ -105,20 +95,22 @@ const text = template.factory(
105
95
  );
106
96
 
107
97
  const textarea = template.factory(
108
- function(this: { state: { 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
+
109
101
  return html`
110
102
  <label
111
103
  class='field-mask field-mask--textarea'
112
- ${omit(attributes, TEXT_TAG)}
104
+ ${omit(attributes, OMIT_TAG)}
113
105
  >
114
106
  <textarea
115
107
  class='field-mask-tag'
116
- ${pick(attributes, TEXT_TAG) as Attributes}
108
+ ${a}
117
109
  ${{
118
110
  onrender: form.input.onrender(this.state)
119
111
  }}
120
112
  >
121
- ${attributes.value}
113
+ ${a.value as string}
122
114
  </textarea>
123
115
  ${content}
124
116
  </label>
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 })>;