@sealcode/sealgen 0.7.0 → 0.7.1

package/@types/components/components.d.ts

@@ -0,0 +1 @@
+export * from "./tabs";

package/@types/components/tabs.d.ts

@@ -0,0 +1,2 @@
+import { FlatTemplatable } from "tempstream";
+export declare function tabs(tabs: Record<string, string>, selected_tab_style?: string, selected_index?: number): FlatTemplatable;

package/@types/forms/controls/controls.d.ts

@@ -10,3 +10,4 @@ export { FormParagraph } from "./form-paragraph";
 export { HTML } from "./html";
 export { HiddenInput } from "./hidden-input";
 export { Textarea } from "./textarea";
+export { FieldGroup } from "./field-group";

package/@types/index.d.ts

@@ -18,3 +18,4 @@ export * from "./page/list";
 export * from "./utils/translate";
 export * as sanitize from "./sanitize";
 export * from "./forms/multiform";
+export * as Components from "./components/components";

package/lib/components/components.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./tabs"), exports);
+//# sourceMappingURL=components.js.map

package/lib/components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,yCAAuB"}

package/lib/components/tabs.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabs = void 0;
+function name_to_id(str) {
+    return str.replace(/\W/g, "-");
+}
+const style = /* HTML */ `<style>
+	.tab-label {
+		height: 45px;
+		line-height: 45px;
+		padding: 0 45px;
+		display: block;
+		float: left;
+		box-sizing: border-box;
+		border-bottom: 3px solid transparent;
+		cursor: pointer;
+		font-size: 18px;
+		user-select: none;
+	}
+
+	@media screen and (max-width: 869px) {
+		.tab-label {
+			display: none;
+		}
+	}
+
+	.tab-label--mobile {
+		line-height: unset;
+		padding-top: 30px;
+		padding-left: 0;
+		pointer-events: none;
+		padding-bottom: 30px;
+		color: $font-graphite;
+		border-bottom: 2px solid $font-primary;
+		display: none;
+		@media screen and (max-width: 869px) {
+			display: block;
+		}
+	}
+
+	.tab-content {
+		padding-top: 30px;
+		clear: both;
+	}
+
+	@media screen and (max-width: 869px) {
+		.tab-content {
+			display: block !important;
+		}
+	}
+</style>`;
+function tabs(tabs, selected_tab_style = "font-weight: bold;", selected_index = 0) {
+    return /* HTML */ `${style}
+	${Object.keys(tabs)
+        .map((tab_title, index) => {
+        const id = name_to_id(tab_title);
+        return /* HTML */ `<input
+					type="radio"
+					name="tabs"
+					id="${id}"
+					class="tab-radio--${id}"
+					style="display: none"
+					${selected_index == index ? "checked" : ""}
+				/>
+				<label class="tab-label tab-label--${id}" for="${id}">
+					${tab_title}
+				</label>`;
+    })
+        .join("\n")}
+	${Object.entries(tabs)
+        .map(([title, content]) => {
+        const id = name_to_id(title);
+        return /* HTML */ ` <div class="tab-label tab-label--mobile">
+					${title}
+				</div>
+				<div class="tab-content tab-content--${id}">${content}</div>
+				<style>
+					.tab-radio--${id} ~ .tab-content--${id} {
+						display:none;
+					}
+					.tab-radio--${id}:checked ~ .tab-content--${id} {
+						display:block;
+					}
+					.tab-radio--${id}:checked ~ label.tab-label--${id} {
+						${selected_tab_style}
+					}
+				</style>`;
+    })
+        .join("\n")}`;
+}
+exports.tabs = tabs;
+//# sourceMappingURL=tabs.js.map

package/lib/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":";;;AAEA,SAAS,UAAU,CAAC,GAAW;IAC9B,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,KAAK,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA4ChB,CAAC;AAEV,SAAgB,IAAI,CACnB,IAA4B,EAC5B,kBAAkB,GAAG,oBAAoB,EACzC,cAAc,GAAG,CAAC;IAElB,OAAO,UAAU,CAAC,GAAG,KAAK;GACxB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;SACjB,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;QACzB,MAAM,EAAE,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QACjC,OAAO,UAAU,CAAC;;;WAGV,EAAE;yBACY,EAAE;;OAEpB,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;yCAEN,EAAE,UAAU,EAAE;OAChD,SAAS;aACH,CAAC;IACZ,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC;GACV,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACpB,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,EAAE;QACzB,MAAM,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAC7B,OAAO,UAAU,CAAC;OACd,KAAK;;2CAE+B,EAAE,KAAK,OAAO;;mBAEtC,EAAE,oBAAoB,EAAE;;;mBAGxB,EAAE,4BAA4B,EAAE;;;mBAGhC,EAAE,+BAA+B,EAAE;QAC9C,kBAAkB;;aAEb,CAAC;IACZ,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAChB,CAAC;AA1CD,oBA0CC"}

package/lib/forms/controls/controls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = exports.HiddenInput = exports.HTML = exports.FormParagraph = exports.FormHeader = exports.SimpleInput = exports.Dropdown = exports.CheckboxedListInput = exports.Frame = exports.EditableCollectionSubset = exports.FormFieldControl = exports.FormControl = void 0;
+exports.FieldGroup = exports.Textarea = exports.HiddenInput = exports.HTML = exports.FormParagraph = exports.FormHeader = exports.SimpleInput = exports.Dropdown = exports.CheckboxedListInput = exports.Frame = exports.EditableCollectionSubset = exports.FormFieldControl = exports.FormControl = void 0;
 var form_control_1 = require("./form-control");
 Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return form_control_1.FormControl; } });
 var form_field_control_1 = require("./form-field-control");
@@ -25,4 +25,6 @@ var hidden_input_1 = require("./hidden-input");
 Object.defineProperty(exports, "HiddenInput", { enumerable: true, get: function () { return hidden_input_1.HiddenInput; } });
 var textarea_1 = require("./textarea");
 Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return textarea_1.Textarea; } });
+var field_group_1 = require("./field-group");
+Object.defineProperty(exports, "FieldGroup", { enumerable: true, get: function () { return field_group_1.FieldGroup; } });
 //# sourceMappingURL=controls.js.map

package/lib/forms/controls/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../src/forms/controls/controls.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA;AACzB,2EAAwE;AAA/D,sIAAA,wBAAwB,OAAA;AACjC,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../src/forms/controls/controls.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA;AACzB,2EAAwE;AAA/D,sIAAA,wBAAwB,OAAA;AACjC,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAC5B,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA"}

package/lib/forms/controls/field-group.js

@@ -16,7 +16,7 @@ class FieldGroup extends form_control_1.FormControl {
 			<div class="field-group ${classes || ""}">
 				${label ? `<label>${label}</label>` : ""}
 				<div class="field-group__fields">
-					${this.controls.map((control) => control.render(ctx, data, []))}
+					${this.controls.map((control) => control.render(ctx, data, [], "", ""))}
 				</div>
 			</div>
 		`;

package/lib/forms/controls/field-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-group.js","sourceRoot":"","sources":["../../../src/forms/controls/field-group.ts"],"names":[],"mappings":";;;AACA,2CAAyD;AAEzD,iDAA6C;AAE7C,MAAa,UAAW,SAAQ,0BAAW;IAC1C,YACQ,QAAuB,EACvB,UAAgD,EAAE;QAEzD,KAAK,EAAE,CAAC;QAHD,aAAQ,GAAR,QAAQ,CAAe;QACvB,YAAO,GAAP,OAAO,CAA2C;QAsB1D,SAAI,GAAU,YAAY,CAAC;IAnB3B,CAAC;IAED,KAAK,CAAC,MAAM,CACX,GAAY,EACZ,IAAmC;QAEnC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QAExC,OAAO,uBAAU,CAAA,UAAU,CAAC;6BACD,OAAO,IAAI,EAAE;MACpC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE;;OAErC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,CAC7B;;;GAGH,CAAC;IACH,CAAC;CAED;AA1BD,gCA0BC"}
+{"version":3,"file":"field-group.js","sourceRoot":"","sources":["../../../src/forms/controls/field-group.ts"],"names":[],"mappings":";;;AACA,2CAAyD;AAEzD,iDAA6C;AAE7C,MAAa,UAAW,SAAQ,0BAAW;IAC1C,YACQ,QAAuB,EACvB,UAAgD,EAAE;QAEzD,KAAK,EAAE,CAAC;QAHD,aAAQ,GAAR,QAAQ,CAAe;QACvB,YAAO,GAAP,OAAO,CAA2C;QAsB1D,SAAI,GAAU,YAAY,CAAC;IAnB3B,CAAC;IAED,KAAK,CAAC,MAAM,CACX,GAAY,EACZ,IAAmC;QAEnC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QAExC,OAAO,uBAAU,CAAA,UAAU,CAAC;6BACD,OAAO,IAAI,EAAE;MACpC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE;;OAErC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CACrC;;;GAGH,CAAC;IACH,CAAC;CAED;AA1BD,gCA0BC"}

package/lib/index.js

@@ -22,7 +22,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sanitize = exports.Fields = exports.Controls = void 0;
+exports.Components = exports.sanitize = exports.Fields = exports.Controls = void 0;
 exports.Controls = __importStar(require("./forms/controls/controls"));
 exports.Fields = __importStar(require("./forms/fields/field"));
 __exportStar(require("./page/mountable"), exports);
@@ -34,4 +34,5 @@ __exportStar(require("./page/list"), exports);
 __exportStar(require("./utils/translate"), exports);
 exports.sanitize = __importStar(require("./sanitize"));
 __exportStar(require("./forms/multiform"), exports);
+exports.Components = __importStar(require("./components/components"));
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWA,sEAAsD;AACtD,+DAA+C;AAC/C,mDAAiC;AACjC,8CAA4B;AAC5B,+CAA6B;AAC7B,sDAAoC;AACpC,gDAA8B;AAC9B,8CAA4B;AAC5B,oDAAkC;AAClC,uDAAuC;AACvC,oDAAkC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWA,sEAAsD;AACtD,+DAA+C;AAC/C,mDAAiC;AACjC,8CAA4B;AAC5B,+CAA6B;AAC7B,sDAAoC;AACpC,gDAA8B;AAC9B,8CAA4B;AAC5B,oDAAkC;AAClC,uDAAuC;AACvC,oDAAkC;AAClC,sEAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {

package/src/components/components.ts

@@ -0,0 +1 @@
+export * from "./tabs";

package/src/components/tabs.ts

@@ -0,0 +1,95 @@
+import { FlatTemplatable } from "tempstream";
+
+function name_to_id(str: string) {
+	return str.replace(/\W/g, "-");
+}
+
+const style = /* HTML */ `<style>
+	.tab-label {
+		height: 45px;
+		line-height: 45px;
+		padding: 0 45px;
+		display: block;
+		float: left;
+		box-sizing: border-box;
+		border-bottom: 3px solid transparent;
+		cursor: pointer;
+		font-size: 18px;
+		user-select: none;
+	}
+
+	@media screen and (max-width: 869px) {
+		.tab-label {
+			display: none;
+		}
+	}
+
+	.tab-label--mobile {
+		line-height: unset;
+		padding-top: 30px;
+		padding-left: 0;
+		pointer-events: none;
+		padding-bottom: 30px;
+		color: $font-graphite;
+		border-bottom: 2px solid $font-primary;
+		display: none;
+		@media screen and (max-width: 869px) {
+			display: block;
+		}
+	}
+
+	.tab-content {
+		padding-top: 30px;
+		clear: both;
+	}
+
+	@media screen and (max-width: 869px) {
+		.tab-content {
+			display: block !important;
+		}
+	}
+</style>`;
+
+export function tabs(
+	tabs: Record<string, string>,
+	selected_tab_style = "font-weight: bold;",
+	selected_index = 0
+): FlatTemplatable {
+	return /* HTML */ `${style}
+	${Object.keys(tabs)
+		.map((tab_title, index) => {
+			const id = name_to_id(tab_title);
+			return /* HTML */ `<input
+					type="radio"
+					name="tabs"
+					id="${id}"
+					class="tab-radio--${id}"
+					style="display: none"
+					${selected_index == index ? "checked" : ""}
+				/>
+				<label class="tab-label tab-label--${id}" for="${id}">
+					${tab_title}
+				</label>`;
+		})
+		.join("\n")}
+	${Object.entries(tabs)
+		.map(([title, content]) => {
+			const id = name_to_id(title);
+			return /* HTML */ ` <div class="tab-label tab-label--mobile">
+					${title}
+				</div>
+				<div class="tab-content tab-content--${id}">${content}</div>
+				<style>
+					.tab-radio--${id} ~ .tab-content--${id} {
+						display:none;
+					}
+					.tab-radio--${id}:checked ~ .tab-content--${id} {
+						display:block;
+					}
+					.tab-radio--${id}:checked ~ label.tab-label--${id} {
+						${selected_tab_style}
+					}
+				</style>`;
+		})
+		.join("\n")}`;
+}

package/src/forms/controls/controls.ts

@@ -10,3 +10,4 @@ export { FormParagraph } from "./form-paragraph";
 export { HTML } from "./html";
 export { HiddenInput } from "./hidden-input";
 export { Textarea } from "./textarea";
+export { FieldGroup } from "./field-group";

package/src/forms/controls/field-group.ts

@@ -0,0 +1,32 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormDataValue } from "../form";
+import { FormControl } from "./form-control";
+
+export class FieldGroup extends FormControl {
+	constructor(
+		public controls: FormControl[],
+		public options: { label?: string; classes?: string } = {}
+	) {
+		super();
+	}
+
+	async render(
+		ctx: Context,
+		data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		const { label, classes } = this.options;
+
+		return tempstream/* HTML */ `
+			<div class="field-group ${classes || ""}">
+				${label ? `<label>${label}</label>` : ""}
+				<div class="field-group__fields">
+					${this.controls.map((control) =>
+						control.render(ctx, data, [], "", "")
+					)}
+				</div>
+			</div>
+		`;
+	}
+	role = <const>"decoration";
+}

package/src/index.ts

@@ -20,3 +20,4 @@ export * from "./page/list";
 export * from "./utils/translate";
 export * as sanitize from "./sanitize";
 export * from "./forms/multiform";
+export * as Components from "./components/components";