@sealcode/sealgen 0.15.55 → 0.15.57-beta

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 (5) hide show
  1. package/@types/src/forms/fields/table.d.ts +1 -2
  2. package/lib/forms/controls/table.js +52 -40
  3. package/package.json +1 -1
  4. package/src/forms/controls/table.ts +74 -51
  5. package/src/forms/fields/table.ts +14 -13
package/@types/src/forms/fields/table.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Context } from "koa";
2
2
  import { FormDataValue } from "../form-types.js";
3
3
  import { FieldParseResult, FormField } from "./field.js";
4
- type ExtractFormFieldParsed<Field extends FormField> = Field extends FormField<true, infer T> ? NonNullable<T> : Field extends FormField<true, infer T> ? T : never;
4
+ export type ExtractFormFieldParsed<Field extends FormField> = Field extends FormField<true, infer T> ? NonNullable<T> : Field extends FormField<true, infer T> ? T : never;
5
5
  export type TableFieldParsed<F extends Record<string, FormField>> = {
6
6
  [field_name in keyof F]: ExtractFormFieldParsed<F[field_name]>;
7
7
  }[];
@@ -11,4 +11,3 @@ export declare class Table<F extends Record<string, FormField>> extends FormFiel
11
11
  getEmptyValue(): never[];
12
12
  parse(ctx: Context, raw_value: FormDataValue): Promise<FieldParseResult<TableFieldParsed<F>>>;
13
13
  }
14
- export {};
package/lib/forms/controls/table.js CHANGED
@@ -17,44 +17,28 @@ class Table extends FormControl {
17
17
  if (!rows) {
18
18
  rows = [];
19
19
  }
20
- return tempstream`<turbo-frame
21
- id="${this.getFrameID()}"
22
- class="${[
23
- "form-input__wrapper",
24
- "form-input__wrapper--type--table",
25
- "form-input__wrapper--options-count--" + rows.length.toString(),
26
- ...rows.length >= 5 ? ["form-input__wrapper--options-count--5-or-more"] : [],
27
- ...rows.length >= 10 ? ["form-input__wrapper--options-count--10-or-more"] : [],
28
- ...rows.length >= 15 ? ["form-input__wrapper--options-count--15-or-more"] : [],
29
- ...rows.length >= 20 ? ["form-input__wrapper--options-count--20-or-more"] : []
30
- ].join(" ")}"
31
- >
32
- <label>${this.options.label}</label>
33
- <div class="table__wrapper">
34
- <table>
35
- <tbody>
36
- ${rows?.map((row, row_index) => {
20
+ const make_row = (row, row_index) => {
37
21
  return (
38
22
  /* HTML */
39
23
  tempstream`<tr>
40
- ${Object.entries(this.table_field.columns).map(([key]) => {
24
+ ${Object.entries(this.table_field.columns).map(([key]) => {
41
25
  return tempstream`<td>${this.options.render_fields[key](
42
26
  fctx,
43
- `${this.table_field.name}[${row_index}][${key}]`,
27
+ `${this.table_field.name}[][${key}]`,
44
28
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
45
- row[key]
29
+ row?.[key] || ""
46
30
  )}</td>`;
47
31
  })}
48
- ${this.options.allow_removing ? (
32
+ ${this.options.allow_removing ? (
49
33
  /* HTML */
50
34
  `<td>
51
- <input
52
- type="submit"
53
- data-turbo-frame="${this.getFrameID()}"
54
- value="${this.options.label_remove || "remove"}"
55
- form="${fctx.form_id}"
56
- formnovalidate
57
- formaction="${this.getActionURL(
35
+ <input
36
+ type="submit"
37
+ data-turbo-frame="${this.getFrameID()}"
38
+ value="${this.options.label_remove || "remove"}"
39
+ form="${fctx.form_id}"
40
+ formnovalidate
41
+ formaction="${this.getActionURL(
58
42
  this.table_field.name,
59
43
  {
60
44
  remove: {
@@ -62,28 +46,56 @@ class Table extends FormControl {
62
46
  }
63
47
  }
64
48
  )}"
65
- />
66
- </td>`
49
+ />
50
+ </td>`
67
51
  ) : ""}
68
- </tr>`
52
+ </tr>`
69
53
  );
70
- })}
54
+ };
55
+ return tempstream`<turbo-frame
56
+ id="${this.getFrameID()}"
57
+ class="${[
58
+ "form-input__wrapper",
59
+ "form-input__wrapper--type--table",
60
+ "form-input__wrapper--options-count--" + rows.length.toString(),
61
+ ...rows.length >= 5 ? ["form-input__wrapper--options-count--5-or-more"] : [],
62
+ ...rows.length >= 10 ? ["form-input__wrapper--options-count--10-or-more"] : [],
63
+ ...rows.length >= 15 ? ["form-input__wrapper--options-count--15-or-more"] : [],
64
+ ...rows.length >= 20 ? ["form-input__wrapper--options-count--20-or-more"] : []
65
+ ].join(" ")}"
66
+ >
67
+ <label>${this.options.label}</label>
68
+ <div class="table__wrapper">
69
+ <table>
70
+ <tbody>
71
+ ${rows?.map((row, index) => make_row(row, index))}
71
72
  </tbody>
72
73
  </table>
74
+ <template> ${make_row(null, rows.length)} </template>
73
75
  ${this.options.allow_adding ? (
74
76
  /* HTML */
75
- `<input
76
- type="submit"
77
- value="${this.options.label_add || "add"}"
78
- form="${fctx.form_id}"
79
- formnovalidate
80
- formaction="${this.getActionURL(
77
+ `<button
78
+ onclick="this.closest('turbo-frame').querySelector('tbody').appendChild(this.closest('turbo-frame').querySelector('template').cloneNode(true).content)"
79
+ >
80
+ add
81
+ </button>
82
+ <noscript>
83
+ <input
84
+ type="submit"
85
+ value="${this.options.label_add || "add"}"
86
+ form="${fctx.form_id}"
87
+ formnovalidate
88
+ formaction="${this.getActionURL(
81
89
  this.table_field.name,
82
90
  {
83
- insert: { index: rows.length, value: {} }
91
+ insert: {
92
+ index: rows.length,
93
+ value: {}
94
+ }
84
95
  }
85
96
  )}"
86
- />`
97
+ />
98
+ </noscript>`
87
99
  ) : ""}
88
100
  </div>
89
101
  </turbo-frame>`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sealcode/sealgen",
3
- "version": "0.15.55",
3
+ "version": "0.15.57-beta",
4
4
  "description": "Module to automate adding routes and collections to a sealious application",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",
package/src/forms/controls/table.ts CHANGED
@@ -7,7 +7,11 @@ import { Context } from "koa";
7
7
  import qs from "qs";
8
8
  import { FlatTemplatable, tempstream } from "tempstream";
9
9
  import { FormField } from "../fields/field.js";
10
- import { Table as TableField } from "../fields/table.js";
10
+ import {
11
+ ExtractFormFieldParsed,
12
+ Table as TableField,
13
+ TableFieldParsed,
14
+ } from "../fields/table.js";
11
15
  import { FormReaction } from "../form-types.js";
12
16
  import { Form } from "../form.js";
13
17
  import { FormControl, FormControlContext } from "./form-control.js";
@@ -51,6 +55,51 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
51
55
  if (!rows) {
52
56
  rows = [];
53
57
  }
58
+
59
+ const make_row = (
60
+ row:
61
+ | {
62
+ [field_name in keyof F]: ExtractFormFieldParsed<
63
+ F[field_name]
64
+ >;
65
+ }
66
+ | null,
67
+ row_index: number
68
+ ) => {
69
+ return /* HTML */ tempstream`<tr>
70
+ ${Object.entries(this.table_field.columns).map(([key]) => {
71
+ return tempstream`<td>${this.options.render_fields[key](
72
+ fctx,
73
+ `${this.table_field.name}[][${key}]`,
74
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
75
+ (row?.[key] as string) || ""
76
+ )}</td>`;
77
+ })}
78
+ ${
79
+ this.options.allow_removing
80
+ ? /* HTML */ `<td>
81
+ <input
82
+ type="submit"
83
+ data-turbo-frame="${this.getFrameID()}"
84
+ value="${this.options.label_remove ||
85
+ "remove"}"
86
+ form="${fctx.form_id}"
87
+ formnovalidate
88
+ formaction="${this.getActionURL(
89
+ this.table_field.name,
90
+ {
91
+ remove: {
92
+ index: row_index,
93
+ },
94
+ }
95
+ )}"
96
+ />
97
+ </td>`
98
+ : ""
99
+ }
100
+ </tr>`;
101
+ };
102
+
54
103
  return tempstream/* HTML */ `<turbo-frame
55
104
  id="${this.getFrameID()}"
56
105
  class="${[
@@ -75,59 +124,33 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
75
124
  <div class="table__wrapper">
76
125
  <table>
77
126
  <tbody>
78
- ${rows?.map((row, row_index) => {
79
- return /* HTML */ tempstream`<tr>
80
- ${Object.entries(this.table_field.columns).map(([key]) => {
81
- return tempstream`<td>${this.options.render_fields[
82
- key
83
- ](
84
- fctx,
85
- `${this.table_field.name}[${row_index}][${key}]`,
86
- // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
87
- row[key] as string
88
- )}</td>`;
89
- })}
90
- ${
91
- this.options.allow_removing
92
- ? /* HTML */ `<td>
93
- <input
94
- type="submit"
95
- data-turbo-frame="${this.getFrameID()}"
96
- value="${this.options
97
- .label_remove ||
98
- "remove"}"
99
- form="${fctx.form_id}"
100
- formnovalidate
101
- formaction="${this.getActionURL(
102
- this.table_field
103
- .name,
104
- {
105
- remove: {
106
- index: row_index,
107
- },
108
- }
109
- )}"
110
- />
111
- </td>`
112
- : ""
113
- }
114
- </tr>`;
115
- })}
127
+ ${rows?.map((row, index) => make_row(row, index))}
116
128
  </tbody>
117
129
  </table>
130
+ <template> ${make_row(null, rows.length)} </template>
118
131
  ${this.options.allow_adding
119
- ? /* HTML */ `<input
120
- type="submit"
121
- value="${this.options.label_add || "add"}"
122
- form="${fctx.form_id}"
123
- formnovalidate
124
- formaction="${this.getActionURL(
125
- this.table_field.name,
126
- {
127
- insert: { index: rows.length, value: {} },
128
- }
129
- )}"
130
- />`
132
+ ? /* HTML */ `<button
133
+ onclick="this.closest('turbo-frame').querySelector('tbody').appendChild(this.closest('turbo-frame').querySelector('template').cloneNode(true).content)"
134
+ >
135
+ add
136
+ </button>
137
+ <noscript>
138
+ <input
139
+ type="submit"
140
+ value="${this.options.label_add || "add"}"
141
+ form="${fctx.form_id}"
142
+ formnovalidate
143
+ formaction="${this.getActionURL(
144
+ this.table_field.name,
145
+ {
146
+ insert: {
147
+ index: rows.length,
148
+ value: {},
149
+ },
150
+ }
151
+ )}"
152
+ />
153
+ </noscript>`
131
154
  : ""}
132
155
  </div>
133
156
  </turbo-frame>`;
package/src/forms/fields/table.ts CHANGED
@@ -3,19 +3,20 @@ import { Context } from "koa";
3
3
  import { FormDataValue } from "../form-types.js";
4
4
  import { FieldParseResult, FormField } from "./field.js";
5
5
 
6
- type ExtractFormFieldParsed<Field extends FormField> = Field extends FormField<
7
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
8
- true,
9
- infer T
10
- >
11
- ? NonNullable<T>
12
- : Field extends FormField<
13
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
14
- true,
15
- infer T
16
- >
17
- ? T
18
- : never;
6
+ export type ExtractFormFieldParsed<Field extends FormField> =
7
+ Field extends FormField<
8
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
9
+ true,
10
+ infer T
11
+ >
12
+ ? NonNullable<T>
13
+ : Field extends FormField<
14
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
+ true,
16
+ infer T
17
+ >
18
+ ? T
19
+ : never;
19
20
 
20
21
  export type TableFieldParsed<F extends Record<string, FormField>> = {
21
22
  [field_name in keyof F]: ExtractFormFieldParsed<F[field_name]>;