@sealcode/sealgen 0.8.14 → 0.8.15

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 (21) hide show
  1. package/@types/components/components.d.ts +1 -0
  2. package/@types/components/toggle-modal.d.ts +7 -0
  3. package/@types/forms/controls/tickable.d.ts +1 -1
  4. package/@types/utils/make-slug.d.ts +1 -0
  5. package/@types/utils/utils.d.ts +1 -0
  6. package/lib/components/components.js +1 -0
  7. package/lib/components/components.js.map +1 -1
  8. package/lib/components/toggle-modal.js +50 -0
  9. package/lib/components/toggle-modal.js.map +1 -0
  10. package/lib/forms/controls/tickable.js +9 -7
  11. package/lib/forms/controls/tickable.js.map +1 -1
  12. package/lib/utils/make-slug.js +10 -0
  13. package/lib/utils/make-slug.js.map +1 -0
  14. package/lib/utils/utils.js +11 -0
  15. package/lib/utils/utils.js.map +1 -1
  16. package/package.json +1 -1
  17. package/src/components/components.ts +1 -0
  18. package/src/components/toggle-modal.ts +52 -0
  19. package/src/forms/controls/tickable.ts +16 -8
  20. package/src/utils/make-slug.ts +5 -0
  21. package/src/utils/utils.ts +1 -0
package/@types/components/components.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./tabs";
2
+ export * from "./toggle-modal";
package/@types/components/toggle-modal.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="node" />
2
+ import { FlatTemplatable } from "tempstream";
3
+ export declare function toggleModal(options: {
4
+ name: string;
5
+ contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
6
+ contentUnwrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
7
+ }): import("stream").Readable;
package/@types/forms/controls/tickable.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare abstract class Tickable<T extends unknown> extends FormFieldContr
17
17
  type: "checkbox" | "radio";
18
18
  abstract getValueAttribute(ctx: Context, data: Record<string, FormDataValue>, value: T): string;
19
19
  abstract isChecked(ctx: Context, data: Record<string, FormDataValue>, value: T): boolean;
20
- makeInputID(): string;
20
+ makeInputID(ctx: Context, data: Record<string, FormDataValue>, value: T): string;
21
21
  getWrapperClasses(ctx: Context, data: Record<string, FormDataValue>, value: T): string[];
22
22
  render<Fields extends Record<string, FormField>>(ctx: Context, data: Record<string, FormDataValue>, _: unknown[], field_prefix: string, form_id: string, show_field_errors: boolean): Promise<FlatTemplatable>;
23
23
  }
package/@types/utils/make-slug.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function makeSlug(t: string): string;
package/@types/utils/utils.d.ts CHANGED
@@ -7,3 +7,4 @@ export { exec } from "./exec";
7
7
  export { importPath, curryImportPath } from "./import-path";
8
8
  export { listCollections } from "./list-collections";
9
9
  export { walkDir } from "./walk";
10
+ export * from "./make-slug";
package/lib/components/components.js CHANGED
@@ -11,4 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
11
11
  };
12
12
  Object.defineProperty(exports, "__esModule", { value: true });
13
13
  __exportStar(require("./tabs"), exports);
14
+ __exportStar(require("./toggle-modal"), exports);
14
15
  //# sourceMappingURL=components.js.map
package/lib/components/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB"}
1
+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB;AACvB,iDAA+B"}
package/lib/components/toggle-modal.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.toggleModal = void 0;
4
+ const tempstream_1 = require("tempstream");
5
+ const utils_1 = require("../utils/utils");
6
+ function toggleModal(options) {
7
+ const { contentWrapped, contentUnwrapped, name } = options;
8
+ const id = utils_1.makeSlug(name);
9
+ return tempstream_1.tempstream /* HTML */ `<style>
10
+ .toggle-modal__wrapped {
11
+ display: none;
12
+ }
13
+
14
+ @media (max-width: 960px) {
15
+ .toggle-modal__wrapped {
16
+ display: block;
17
+ }
18
+ .toggle-modal__unwrapped {
19
+ display: none;
20
+ }
21
+
22
+ #${id} {
23
+ display: none;
24
+ }
25
+
26
+ #${id}:checked ~ .toggle-modal__wrapped {
27
+ display: none;
28
+ }
29
+
30
+ #${id}:checked ~ .toggle-modal__unwrapped {
31
+ display: block;
32
+ position: fixed;
33
+ height: 100vh;
34
+ width: 100vw;
35
+ top: 0;
36
+ left: 0;
37
+ background-color: white;
38
+ z-index: 99;
39
+ overflow-y: scroll;
40
+ }
41
+ }
42
+ </style>
43
+ <div class="toggle-modal toggle-modal--${id}">
44
+ <input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
45
+ <div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
46
+ <div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
47
+ </div>`;
48
+ }
49
+ exports.toggleModal = toggleModal;
50
+ //# sourceMappingURL=toggle-modal.js.map
package/lib/components/toggle-modal.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toggle-modal.js","sourceRoot":"","sources":["../../src/components/toggle-modal.ts"],"names":[],"mappings":";;;AAAA,2CAAyD;AACzD,0CAA0C;AAE1C,SAAgB,WAAW,CAAC,OAM3B;IACA,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC3D,MAAM,EAAE,GAAG,gBAAQ,CAAC,IAAI,CAAC,CAAC;IAC1B,OAAO,uBAAU,CAAA,UAAU,CAAC;;;;;;;;;;;;;OAatB,EAAE;;;;OAIF,EAAE;;;;OAIF,EAAE;;;;;;;;;;;;;2CAakC,EAAE;gBAC7B,EAAE,WAAW,EAAE;wCACS,cAAc,CAAC,EAAE,CAAC;0CAChB,gBAAgB,CAAC,EAAE,CAAC;SACrD,CAAC;AACV,CAAC;AAhDD,kCAgDC"}
package/lib/forms/controls/tickable.js CHANGED
@@ -10,12 +10,14 @@ class Tickable extends controls_1.FormFieldControl {
10
10
  this.field = field;
11
11
  this.options = options;
12
12
  }
13
- makeInputID() {
14
- return this.options.id || this.field.name;
13
+ makeInputID(ctx, data, value) {
14
+ const value_attr = this.getValueAttribute(ctx, data, value);
15
+ return (this.options.id ||
16
+ this.field.name + (value_attr ? "--" + value_attr : ""));
15
17
  }
16
18
  getWrapperClasses(ctx, data, value) {
17
19
  return [
18
- this.makeInputID(),
20
+ this.makeInputID(ctx, data, value),
19
21
  this.type,
20
22
  this.field.name.replaceAll(/\W/g, "-"),
21
23
  input_wrapper_1.getRequiredClass(this.field.required),
@@ -23,16 +25,16 @@ class Tickable extends controls_1.FormFieldControl {
23
25
  ];
24
26
  }
25
27
  async render(ctx, data, _, field_prefix, form_id, show_field_errors) {
26
- const id = this.makeInputID();
28
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
29
+ const { parsed, valid, message } = await this.field.getValue(ctx, data);
30
+ const value = this.getValueAttribute(ctx, data, parsed);
31
+ const id = this.makeInputID(ctx, data, parsed);
27
32
  const label = this.options.label != undefined
28
33
  ? this.options.label
29
34
  : this.field.name;
30
35
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
31
- const { parsed, valid, message } = await this.field.getValue(ctx, data);
32
- // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
33
36
  const readonly = this.options.readonly || false;
34
37
  const required = this.field.required;
35
- const value = this.getValueAttribute(ctx, data, parsed);
36
38
  return input_wrapper_1.inputWrapper(this.getWrapperClasses(ctx, data, parsed),
37
39
  /* HTML */ `
38
40
  <input
package/lib/forms/controls/tickable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tickable.js","sourceRoot":"","sources":["../../../src/forms/controls/tickable.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tickable.js","sourceRoot":"","sources":["../../../src/forms/controls/tickable.ts"],"names":[],"mappings":"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"}
package/lib/utils/make-slug.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.makeSlug = void 0;
4
+ function makeSlug(t) {
5
+ return t
6
+ .replaceAll(/\P{General_Category=Letter}/g, "-")
7
+ .replaceAll(/-+/g, "-");
8
+ }
9
+ exports.makeSlug = makeSlug;
10
+ //# sourceMappingURL=make-slug.js.map
package/lib/utils/make-slug.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"make-slug.js","sourceRoot":"","sources":["../../src/utils/make-slug.ts"],"names":[],"mappings":";;;AAAA,SAAgB,QAAQ,CAAC,CAAS;IACjC,OAAO,CAAC;SACN,UAAU,CAAC,8BAA8B,EAAE,GAAG,CAAC;SAC/C,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC1B,CAAC;AAJD,4BAIC"}
package/lib/utils/utils.js CHANGED
@@ -1,4 +1,14 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
+ };
2
12
  Object.defineProperty(exports, "__esModule", { value: true });
3
13
  exports.walkDir = exports.listCollections = exports.curryImportPath = exports.importPath = exports.exec = exports.UrlWithNewParams = exports.naturalNumbers = exports.sleep = void 0;
4
14
  var sleep_1 = require("./sleep");
@@ -16,4 +26,5 @@ var list_collections_1 = require("./list-collections");
16
26
  Object.defineProperty(exports, "listCollections", { enumerable: true, get: function () { return list_collections_1.listCollections; } });
17
27
  var walk_1 = require("./walk");
18
28
  Object.defineProperty(exports, "walkDir", { enumerable: true, get: function () { return walk_1.walkDir; } });
29
+ __exportStar(require("./make-slug"), exports);
19
30
  //# sourceMappingURL=utils.js.map
package/lib/utils/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":";;;AAGA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,6DAAyD;AAAhD,uHAAA,gBAAgB,OAAA;AACzB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6CAA4D;AAAnD,yGAAA,UAAU,OAAA;AAAE,8GAAA,eAAe,OAAA;AACpC,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,+BAAiC;AAAxB,+FAAA,OAAO,OAAA"}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAGA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,6DAAyD;AAAhD,uHAAA,gBAAgB,OAAA;AACzB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6CAA4D;AAAnD,yGAAA,UAAU,OAAA;AAAE,8GAAA,eAAe,OAAA;AACpC,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,+BAAiC;AAAxB,+FAAA,OAAO,OAAA;AAChB,8CAA4B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sealcode/sealgen",
3
- "version": "0.8.14",
3
+ "version": "0.8.15",
4
4
  "description": "Module to automate adding routes and collections to a sealious application",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/components.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./tabs";
2
+ export * from "./toggle-modal";
package/src/components/toggle-modal.ts ADDED
@@ -0,0 +1,52 @@
1
+ import { FlatTemplatable, tempstream } from "tempstream";
2
+ import { makeSlug } from "../utils/utils";
3
+
4
+ export function toggleModal(options: {
5
+ name: string;
6
+ contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
7
+ contentUnwrapped: (
8
+ id: string
9
+ ) => FlatTemplatable | Promise<FlatTemplatable>;
10
+ }) {
11
+ const { contentWrapped, contentUnwrapped, name } = options;
12
+ const id = makeSlug(name);
13
+ return tempstream/* HTML */ `<style>
14
+ .toggle-modal__wrapped {
15
+ display: none;
16
+ }
17
+
18
+ @media (max-width: 960px) {
19
+ .toggle-modal__wrapped {
20
+ display: block;
21
+ }
22
+ .toggle-modal__unwrapped {
23
+ display: none;
24
+ }
25
+
26
+ #${id} {
27
+ display: none;
28
+ }
29
+
30
+ #${id}:checked ~ .toggle-modal__wrapped {
31
+ display: none;
32
+ }
33
+
34
+ #${id}:checked ~ .toggle-modal__unwrapped {
35
+ display: block;
36
+ position: fixed;
37
+ height: 100vh;
38
+ width: 100vw;
39
+ top: 0;
40
+ left: 0;
41
+ background-color: white;
42
+ z-index: 99;
43
+ overflow-y: scroll;
44
+ }
45
+ }
46
+ </style>
47
+ <div class="toggle-modal toggle-modal--${id}">
48
+ <input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
49
+ <div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
50
+ <div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
51
+ </div>`;
52
+ }
package/src/forms/controls/tickable.ts CHANGED
@@ -36,8 +36,16 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
36
36
  value: T
37
37
  ): boolean;
38
38
 
39
- makeInputID(): string {
40
- return this.options.id || this.field.name;
39
+ makeInputID(
40
+ ctx: Context,
41
+ data: Record<string, FormDataValue>,
42
+ value: T
43
+ ): string {
44
+ const value_attr = this.getValueAttribute(ctx, data, value);
45
+ return (
46
+ this.options.id ||
47
+ this.field.name + (value_attr ? "--" + value_attr : "")
48
+ );
41
49
  }
42
50
 
43
51
  getWrapperClasses(
@@ -46,7 +54,7 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
46
54
  value: T
47
55
  ): string[] {
48
56
  return [
49
- this.makeInputID(),
57
+ this.makeInputID(ctx, data, value),
50
58
  this.type,
51
59
  this.field.name.replaceAll(/\W/g, "-"),
52
60
  getRequiredClass(this.field.required),
@@ -62,19 +70,19 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
62
70
  form_id: string,
63
71
  show_field_errors: boolean
64
72
  ): Promise<FlatTemplatable> {
65
- const id = this.makeInputID();
73
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
74
+ const { parsed, valid, message } = await this.field.getValue(ctx, data);
75
+ const value = this.getValueAttribute(ctx, data, parsed);
76
+ const id = this.makeInputID(ctx, data, parsed);
66
77
  const label =
67
78
  this.options.label != undefined
68
79
  ? this.options.label
69
80
  : this.field.name;
70
- // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
71
- const { parsed, valid, message } = await this.field.getValue(ctx, data);
81
+
72
82
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
73
83
  const readonly = this.options.readonly || false;
74
84
  const required = this.field.required;
75
85
 
76
- const value = this.getValueAttribute(ctx, data, parsed);
77
-
78
86
  return inputWrapper(
79
87
  this.getWrapperClasses(ctx, data, parsed),
80
88
 
package/src/utils/make-slug.ts ADDED
@@ -0,0 +1,5 @@
1
+ export function makeSlug(t: string) {
2
+ return t
3
+ .replaceAll(/\P{General_Category=Letter}/g, "-")
4
+ .replaceAll(/-+/g, "-");
5
+ }
package/src/utils/utils.ts CHANGED
@@ -8,3 +8,4 @@ export { exec } from "./exec";
8
8
  export { importPath, curryImportPath } from "./import-path";
9
9
  export { listCollections } from "./list-collections";
10
10
  export { walkDir } from "./walk";
11
+ export * from "./make-slug";