@sealcode/sealgen 0.15.24 → 0.15.25

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 (8) hide show
  1. package/@types/src/page/sealious-list.d.ts +2 -1
  2. package/lib/forms/controls/checkboxed-list-input.js +29 -16
  3. package/lib/page/sealious-list.js +4 -0
  4. package/lib/templates/list.js +2 -1
  5. package/package.json +1 -1
  6. package/src/forms/controls/checkboxed-list-input.ts +39 -26
  7. package/src/page/sealious-list.ts +5 -1
  8. package/src/templates/list.ts +2 -1
package/@types/src/page/sealious-list.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Context } from "koa";
2
2
  import { BaseListPageFields, ListPage } from "./list.js";
3
3
  import { Collection, CollectionItem, ItemList, Context as SealiousContext } from "sealious";
4
- import { FlatTemplatable } from "tempstream";
4
+ import { FlatTemplatable, Templatable } from "tempstream";
5
5
  export declare abstract class SealiousItemListPage<C extends Collection, F extends typeof BaseListPageFields> extends ListPage<CollectionItem<C>, F> {
6
6
  collection: C;
7
7
  constructor(collection: C);
@@ -11,6 +11,7 @@ export declare abstract class SealiousItemListPage<C extends Collection, F exten
11
11
  makeQuery(ctx: Context): Promise<ItemList<C>>;
12
12
  getItems(ctx: Context, page: number, itemsPerPage: number | null): Promise<CollectionItem<C>[]>;
13
13
  getFilterValues(ctx: Context): Promise<Record<string, string | undefined>>;
14
+ renderListContainer(_: Context, content: Templatable): FlatTemplatable;
14
15
  renderItem(_: Context, item: CollectionItem<C>, _index: number): Promise<FlatTemplatable>;
15
16
  canAccess: (ctx: Context) => Promise<{
16
17
  canAccess: boolean;
package/lib/forms/controls/checkboxed-list-input.js CHANGED
@@ -21,29 +21,42 @@ class CheckboxedListInput extends FormFieldControl {
21
21
  const { name, required } = this.field;
22
22
  return inputWrapper(
23
23
  "checkboxed-list",
24
- [name, getRequiredClass(required)],
24
+ [
25
+ name,
26
+ getRequiredClass(required),
27
+ "options-count--" + options.length.toString(),
28
+ ...options.length >= 5 ? ["options-count--5-or-more"] : [],
29
+ ...options.length >= 10 ? ["options-count--10-or-more"] : [],
30
+ ...options.length >= 15 ? ["options-count--15-or-more"] : [],
31
+ ...options.length >= 20 ? ["options-count--20-or-more"] : []
32
+ ],
25
33
  tempstream`<label
26
34
  >${this.options.label || this.field.name}</label
27
- >${isVisible ? options.map(
28
- ({ value, label }) => inputWrapper(
35
+ >
36
+ <ul>
37
+ ${isVisible ? options.map(
38
+ ({ value, label }) => tempstream`<li>
39
+ ${inputWrapper(
29
40
  "checkbox",
30
41
  [name],
31
42
  /* HTML */
32
43
  `
33
- <input
34
- type="checkbox"
35
- id="${name}.${value}"
36
- name="${name}.${value}"
37
- ${pickedValues.includes(value) ? "checked" : ""}
38
- form=${fctx.form_id}
39
- />
40
- <label for="${name}.${value}"
41
- >${label || value}</label
42
- >
43
- `
44
- )
44
+ <input
45
+ type="checkbox"
46
+ id="${name}.${value}"
47
+ name="${name}.${value}"
48
+ ${pickedValues.includes(value) ? "checked" : ""}
49
+ form=${fctx.form_id}
50
+ />
51
+ <label for="${name}.${value}"
52
+ >${label || value}</label
53
+ >
54
+ `
55
+ )}
56
+ </li>`
45
57
  ) : ""}
46
- ${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}`
58
+ ${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}
59
+ </ul>`
47
60
  );
48
61
  }
49
62
  }
package/lib/page/sealious-list.js CHANGED
@@ -2,6 +2,7 @@ import {
2
2
  DEFAULT_ITEMS_PER_PAGE,
3
3
  ListPage
4
4
  } from "./list.js";
5
+ import { tempstream } from "tempstream";
5
6
  import { peopleWhoCan } from "./access-control.js";
6
7
  import qs from "qs";
7
8
  import { is, predicates } from "@sealcode/ts-predicates";
@@ -54,6 +55,9 @@ class SealiousItemListPage extends ListPage {
54
55
  ) ? _filter_values : {};
55
56
  return filter_values;
56
57
  }
58
+ renderListContainer(_, content) {
59
+ return tempstream`<div class="sealgen-sealious-list-container">${content}</div>`;
60
+ }
57
61
  async renderItem(_, item, _index) {
58
62
  return `<div>${item.id}</div>`;
59
63
  }
package/lib/templates/list.js CHANGED
@@ -6,6 +6,7 @@ import { extractCollectionClassname } from "../generate-collections.js";
6
6
  import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
7
7
  import { DefaultListFilters } from "../page/default-list-filters.js";
8
8
  import { formatWithPrettier } from "../utils/prettier.js";
9
+ import { toKebabCase } from "js-convert-case";
9
10
  const target_locreq = _locreq(process.cwd());
10
11
  const listTemplate = async (action_name, newfilefullpath) => {
11
12
  const response = await prompts({
@@ -147,7 +148,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
147
148
  return html(
148
149
  ctx,
149
150
  "${action_name}",
150
- <div>
151
+ <div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
151
152
  <h2>${action_name} List</h2>
152
153
  <table class="sealious-list">
153
154
  {this.renderTableHead(ctx, displayFields)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sealcode/sealgen",
3
- "version": "0.15.24",
3
+ "version": "0.15.25",
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/checkboxed-list-input.ts CHANGED
@@ -29,34 +29,47 @@ export class CheckboxedListInput extends FormFieldControl {
29
29
  const { name, required } = this.field;
30
30
  return inputWrapper(
31
31
  "checkboxed-list",
32
- [name, getRequiredClass(required)],
32
+ [
33
+ name,
34
+ getRequiredClass(required),
35
+ "options-count--" + options.length.toString(),
36
+ ...(options.length >= 5 ? ["options-count--5-or-more"] : []),
37
+ ...(options.length >= 10 ? ["options-count--10-or-more"] : []),
38
+ ...(options.length >= 15 ? ["options-count--15-or-more"] : []),
39
+ ...(options.length >= 20 ? ["options-count--20-or-more"] : []),
40
+ ],
33
41
  tempstream/* HTML */ `<label
34
42
  >${this.options.label || this.field.name}</label
35
- >${isVisible
36
- ? options.map(({ value, label }) =>
37
- inputWrapper(
38
- "checkbox",
39
- [name],
40
- /* HTML */ `
41
- <input
42
- type="checkbox"
43
- id="${name}.${value}"
44
- name="${name}.${value}"
45
- ${pickedValues.includes(value)
46
- ? "checked"
47
- : ""}
48
- form=${fctx.form_id}
49
- />
50
- <label for="${name}.${value}"
51
- >${label || value}</label
52
- >
53
- `
54
- )
55
- )
56
- : ""}
57
- ${~valid && fctx.validate
58
- ? `<div class="input__error">${message}</div>`
59
- : ""}`
43
+ >
44
+ <ul>
45
+ ${isVisible
46
+ ? options.map(
47
+ ({ value, label }) => tempstream/* HTML */ `<li>
48
+ ${inputWrapper(
49
+ "checkbox",
50
+ [name],
51
+ /* HTML */ `
52
+ <input
53
+ type="checkbox"
54
+ id="${name}.${value}"
55
+ name="${name}.${value}"
56
+ ${pickedValues.includes(value)
57
+ ? "checked"
58
+ : ""}
59
+ form=${fctx.form_id}
60
+ />
61
+ <label for="${name}.${value}"
62
+ >${label || value}</label
63
+ >
64
+ `
65
+ )}
66
+ </li>`
67
+ )
68
+ : ""}
69
+ ${~valid && fctx.validate
70
+ ? `<div class="input__error">${message}</div>`
71
+ : ""}
72
+ </ul>`
60
73
  );
61
74
  }
62
75
  }
package/src/page/sealious-list.ts CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  Context as SealiousContext,
12
12
  CollectionInput,
13
13
  } from "sealious";
14
- import { FlatTemplatable } from "tempstream";
14
+ import { FlatTemplatable, Templatable, tempstream } from "tempstream";
15
15
  import { peopleWhoCan } from "./access-control.js";
16
16
  import qs from "qs";
17
17
  import { is, predicates } from "@sealcode/ts-predicates";
@@ -83,6 +83,10 @@ export abstract class SealiousItemListPage<
83
83
  return filter_values;
84
84
  }
85
85
 
86
+ renderListContainer(_: Context, content: Templatable): FlatTemplatable {
87
+ return tempstream`<div class="sealgen-sealious-list-container">${content}</div>`;
88
+ }
89
+
86
90
  async renderItem(
87
91
  _: Context,
88
92
  item: CollectionItem<C>,
package/src/templates/list.ts CHANGED
@@ -6,6 +6,7 @@ import { extractCollectionClassname } from "../generate-collections.js";
6
6
  import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
7
7
  import { DefaultListFilters } from "../page/default-list-filters.js";
8
8
  import { formatWithPrettier } from "../utils/prettier.js";
9
+ import { toKebabCase } from "js-convert-case";
9
10
  const target_locreq = _locreq(process.cwd());
10
11
 
11
12
  export const listTemplate = async (
@@ -162,7 +163,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
162
163
  return html(
163
164
  ctx,
164
165
  "${action_name}",
165
- <div>
166
+ <div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
166
167
  <h2>${action_name} List</h2>
167
168
  <table class="sealious-list">
168
169
  {this.renderTableHead(ctx, displayFields)}