fix: better styles, material export

Author: JulianCataldo

packages/carbon/README.md

@@ -1,6 +1,11 @@
 # JSON Schema Form Element — ***Carbon*** edition
 
-See the [documentation](../../README.md). 
+```sh
+npm install @jsfe/carbon
+```
+
+Consult the [documentation](../../README.md).  
+Open the [playground](https://jsfe.js.org).
 
 ---
 

packages/carbon/package.json

@@ -29,14 +29,15 @@
   "exports": {
     ".": "./dist/esm/index.js",
     "./scss": "./src/styles.scss",
+    "./scss/*": "./src/widgets/*.scss",
     "./css": "./dist/esm/styles.css",
     "./jss": "./dist/esm/styles.js",
     "./min": "./dist/esm-min"
   },
   "files": [
     "./dist/esm",
     "./dist/esm-min",
-    "./src/styles.scss",
+    "./src/**/*.scss",
     "./vscode.html-custom-data.json",
     "./vscode.css-custom-data.json",
     "./custom-elements.json"

packages/form/README.md

@@ -1,6 +1,11 @@
-# JSON Schema Form Element — ***Form*** edition
+# JSON Schema Form Element — ***Barebone*** edition
 
-See the [documentation](../../README.md). 
+```sh
+npm install @jsfe/form
+```
+
+Consult the [documentation](../../README.md).  
+Open the [playground](https://jsfe.js.org).
 
 ---
 

packages/form/package.json

@@ -27,14 +27,15 @@
   "exports": {
     ".": "./dist/esm/index.js",
     "./scss": "./src/styles.scss",
+    "./scss/*": "./src/widgets/*.scss",
     "./css": "./dist/esm/styles.css",
     "./jss": "./dist/esm/styles.js",
     "./min": "./dist/esm-min"
   },
   "files": [
     "./dist/esm",
     "./dist/esm-min",
-    "./src/styles.scss",
+    "./src/**/*.scss",
     "./vscode.html-custom-data.json",
     "./vscode.css-custom-data.json",
     "./custom-elements.json"

packages/form/src/json-schema-form.ts

@@ -60,6 +60,7 @@ export class Jsf extends LitElement {
 		uiSchema: UiSchema,
 		schemaPath: Path,
 		required = false,
+		level = 0,
 	): TemplateResult<1> => {
 		let result: TemplateResult<1> | undefined;
 		const currentNode: JSONSchema7 = node;
@@ -151,6 +152,7 @@ export class Jsf extends LitElement {
 				this._dig.bind(this),
 				schemaPathAugmented,
 				this.widgets,
+				level,
 			);
 		}
 
@@ -178,6 +180,7 @@ export class Jsf extends LitElement {
 				// this._handleKeydown.bind(this),
 				schemaPathAugmented,
 				this.widgets,
+				level,
 			);
 		}
 
@@ -206,6 +209,7 @@ export class Jsf extends LitElement {
 					this._dig.bind(this),
 					schemaPathAugmented,
 					this.widgets,
+					level,
 				);
 
 				/* --- Additionals Array items --- */
@@ -266,6 +270,8 @@ export class Jsf extends LitElement {
 					this._dig.bind(this),
 					schemaPathAugmented,
 					this.widgets,
+					required,
+					level,
 				);
 			}
 		}

packages/form/src/triage/array-primitive.ts

@@ -14,6 +14,7 @@ export const fieldArrayPrimitive = (
 	// dig: Jsf['_dig'],
 	schemaPath: Path,
 	widgets: Widgets,
+	level = 0,
 ) => {
 	// if (!Array.isArray(dataLevel)) return html``;
 
@@ -62,6 +63,8 @@ export const fieldArrayPrimitive = (
 
 		// itemsLabel,
 
+		level,
+
 		id,
 		// required,
 		valueChangedCallback,

packages/form/src/triage/array.ts

@@ -16,6 +16,8 @@ export const fieldArray = (
 	dig: Jsf['_dig'],
 	schemaPath: Path,
 	widgets: Widgets,
+	required = false,
+	level = 0,
 ) => {
 	if (!Array.isArray(dataLevel)) return html``;
 
@@ -60,6 +62,8 @@ export const fieldArray = (
 				uiState,
 				uiSchema,
 				schemaPathAugmented,
+				required,
+				level + 1,
 			);
 
 			const move = (direction: number) => (_event: Event) => {
@@ -168,6 +172,8 @@ export const fieldArray = (
 		controls: {
 			add: { click: addItemClick },
 		},
+
+		level,
 	};
 
 	return widgets?.array?.(options);

packages/form/src/triage/object.ts

@@ -11,6 +11,7 @@ export const fieldObject = (
 	dig: Jsf['_dig'],
 	schemaPath: Path,
 	widgets: Widgets,
+	level = 0,
 ) => {
 	const error = 'Wrong object field';
 	if (typeof schema.properties !== 'object')
@@ -44,6 +45,7 @@ export const fieldObject = (
 				uiSchema?.[propName],
 				schemaPathAugmented,
 				required,
+				level + 1,
 			);
 		},
 	);
@@ -60,6 +62,7 @@ export const fieldObject = (
 		label,
 		helpText: schema.description,
 		children,
+		level,
 	};
 
 	return (

packages/form/src/triage/primitive.ts

@@ -134,10 +134,20 @@ export const fieldPrimitive = (
 	}
 
 	if (schema.type === 'string') {
+		let inputType = 'text';
+		if (schema.format === 'password' || schema.format === 'email') {
+			inputType = schema.format;
+		}
+
+		if (uiOptions?.['ui:options']?.inputType === 'tel') {
+			inputType = 'tel';
+		}
 		const options = {
 			...baseOptions,
 			value: baseValue ? String(baseValue) : '',
 
+			inputType,
+
 			minLength: schema.minLength,
 			maxLength: schema.maxLength,
 			pattern: schema.pattern,
@@ -146,6 +156,10 @@ export const fieldPrimitive = (
 		if (uiOptions?.['ui:widget'] === 'textarea') {
 			return widgets?.textarea?.(options) || missing('textarea');
 		}
+		if (typeof uiOptions?.['ui:widget'] === 'string') {
+			const customWidgetName = uiOptions?.['ui:widget'];
+			return widgets?.[customWidgetName]?.(options) || missing('custom');
+		}
 
 		return widgets?.text?.(options) || missing('text');
 	}
@@ -205,3 +219,36 @@ export const fieldPrimitive = (
 
 	return missing(`Wrong input for: ${path.join('/')}`);
 };
+
+/* 
+
+AJV-Formats
+https://ajv.js.org/packages/ajv-formats.html
+
+date: full-date according to RFC3339 (opens new window).
+time: time (time-zone is mandatory).
+date-time: date-time (time-zone is mandatory).
+iso-time: time with optional time-zone.
+iso-date-time: date-time with optional time-zone.
+duration: duration from RFC3339(opens new window)
+uri: full URI.
+uri-reference: URI reference, including full and relative URIs.
+uri-template: URI template according to RFC6570(opens new window)
+url (deprecated): URL record (opens new window).
+email: email address.
+hostname: host name according to RFC1034 (opens new window).
+ipv4: IP address v4.
+ipv6: IP address v6.
+regex: tests whether a string is a valid regular expression by passing it to RegExp constructor.
+uuid: Universally Unique IDentifier according to RFC4122 (opens new window).
+json-pointer: JSON-pointer according to RFC6901 (opens new window).
+relative-json-pointer: relative JSON-pointer according to this draft (opens new window).
+byte: base64 encoded data according to the openApi 3.0.0 specification(opens new window)
+int32: signed 32 bits integer according to the openApi 3.0.0 specification(opens new window)
+int64: signed 64 bits according to the openApi 3.0.0 specification(opens new window)
+float: float according to the openApi 3.0.0 specification(opens new window)
+double: double according to the openApi 3.0.0 specification(opens new window)
+password: password string according to the openApi 3.0.0 specification(opens new window)
+binary: binary string according to the openApi 3.0.0 specification
+
+*/

packages/material/README.md

@@ -1,6 +1,11 @@
 # JSON Schema Form Element — ***Material*** edition
 
-See the [documentation](../../README.md). 
+```sh
+npm install @jsfe/material
+```
+
+Consult the [documentation](../../README.md).  
+Open the [playground](https://jsfe.js.org).
 
 ---
 
@@ -24,10 +29,10 @@ See the [documentation](../../README.md).
 
 ### Fields
 
-| Name                 | Privacy | Type    | Default    | Description | Inherited From |
-| -------------------- | ------- | ------- | ---------- | ----------- | -------------- |
-| `dataChangeCallback` | public  |         | `widgets`  |             |                |
-| `styleSheets`        | public  | `array` | `[styles]` |             |                |
+| Name          | Privacy | Type    | Default    | Description | Inherited From |
+| ------------- | ------- | ------- | ---------- | ----------- | -------------- |
+| `widgets`     | public  |         | `widgets`  |             |                |
+| `styleSheets` | public  | `array` | `[styles]` |             |                |
 
 <hr/>