fix: better styles, material export

json-schema-form-element · Oct 12, 2023 · 9a33cbb · 9a33cbb
1 parent 6991c7a
commit 9a33cbb
Show file tree

Hide file tree

Showing 37 changed files with 426 additions and 65 deletions.
diff --git a/packages/carbon/README.md b/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).
 
 ---
 

diff --git a/packages/carbon/package.json b/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"

diff --git a/packages/form/README.md b/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).
 
 ---
 

diff --git a/packages/form/package.json b/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"

diff --git a/packages/form/src/json-schema-form.ts b/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,
 				);
 			}
 		}

diff --git a/packages/form/src/triage/array-primitive.ts b/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,

diff --git a/packages/form/src/triage/array.ts b/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);

diff --git a/packages/form/src/triage/object.ts b/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 (

diff --git a/packages/form/src/triage/primitive.ts b/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
+
+*/
diff --git a/packages/material/README.md b/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/>
 

diff --git a/packages/material/custom-elements.json b/packages/material/custom-elements.json
@@ -28,7 +28,7 @@
           "members": [
             {
               "kind": "field",
-              "name": "dataChangeCallback",
+              "name": "widgets",
               "privacy": "public",
               "default": "widgets"
             },

diff --git a/packages/material/package.json b/packages/material/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"

diff --git a/packages/material/src/form.ts b/packages/material/src/form.ts
@@ -3,7 +3,7 @@ import * as widgets from './widgets/index.js';
 import { styles } from './styles.js';
 
 export class JsfMaterial extends Jsf {
-	public dataChangeCallback = widgets;
+	public widgets = widgets;
 
 	public styleSheets = [styles];
 }
diff --git a/packages/material/src/styles.scss b/packages/material/src/styles.scss
@@ -1,6 +1,8 @@
 // keep-sorted start
 @import './widgets/_all.scss';
+@import './widgets/_fieldset.scss';
 @import './widgets/_toggle.scss';
+@import './widgets/array.scss';
 @import './widgets/callout.scss';
 @import './widgets/object.scss';
 @import './widgets/range.scss';

diff --git a/packages/material/src/widgets/_fieldset.scss b/packages/material/src/widgets/_fieldset.scss
@@ -0,0 +1,32 @@
+.theme-material.widget-fieldset {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5em 0;
+	padding: 2em 1em;
+	margin: 0;
+	font-weight: 300;
+	border: none;
+	// border: 1px solid transparent;
+	border-radius: 1rem;
+	transition-timing-function: ease-in-out;
+	transition-duration: 250ms;
+
+	legend {
+		width: 100%;
+		font-size: 1.5em;
+		border-bottom: 1px solid var(--md-sys-color-inverse-on-surface);
+	}
+
+	.widget-object__description {
+		margin: 0 0 1rem 0;
+		opacity: calc(3 / 4);
+	}
+
+	--md-sys-color-shadow: var(--md-sys-color-inverse-on-surface);
+	--md-elevation-level: 0;
+
+	&:hover {
+		--md-elevation-level: 4;
+	}
+}