Get lots working and looking good

src/OAP/Oap.Theme.Svelte/package-lock.json

@@ -14,9 +14,11 @@
       "devDependencies": {
         "@graphql-codegen/cli": "^5.0.2",
         "@graphql-codegen/client-preset": "^4.2.5",
+        "@parcel/watcher": "^2.4.1",
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
         "@tsconfig/svelte": "^5.0.2",
         "autoprefixer": "^10.4.19",
+        "concurrently": "^8.2.2",
         "graphql": "^16.8.1",
         "postcss": "^8.4.38",
         "svelte": "^4.2.15",
@@ -2524,6 +2526,279 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
+      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
+      "dev": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.4.1",
+        "@parcel/watcher-darwin-arm64": "2.4.1",
+        "@parcel/watcher-darwin-x64": "2.4.1",
+        "@parcel/watcher-freebsd-x64": "2.4.1",
+        "@parcel/watcher-linux-arm-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-musl": "2.4.1",
+        "@parcel/watcher-linux-x64-glibc": "2.4.1",
+        "@parcel/watcher-linux-x64-musl": "2.4.1",
+        "@parcel/watcher-win32-arm64": "2.4.1",
+        "@parcel/watcher-win32-ia32": "2.4.1",
+        "@parcel/watcher-win32-x64": "2.4.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
+      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
+      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
+      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
+      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
+      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
+      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
+      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
+      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
+      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
+      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
+      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
+      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@peculiar/asn1-schema": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.8.tgz",
@@ -3777,6 +4052,48 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/concurrently": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
+      "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/constant-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
@@ -3885,6 +4202,22 @@
       "integrity": "sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -3987,6 +4320,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -5678,6 +6023,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.0.tgz",
+      "integrity": "sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==",
+      "dev": true,
+      "engines": {
+        "node": "^16 || ^18 || >= 20"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -6766,6 +7120,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
     "node_modules/sponge-case": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sponge-case/-/sponge-case-1.0.1.tgz",
@@ -7266,6 +7626,15 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",

src/OAP/Oap.Theme.Svelte/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently \"vite\" \"npm run codegen --watch\"",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
@@ -13,9 +13,11 @@
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.5",
+    "@parcel/watcher": "^2.4.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tsconfig/svelte": "^5.0.2",
     "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
     "graphql": "^16.8.1",
     "postcss": "^8.4.38",
     "svelte": "^4.2.15",

src/OAP/Oap.Theme.Svelte/src/components/FlowPart.svelte

@@ -1,24 +0,0 @@
-<script context="module" lang="ts">
-	import { graphql } from "../gql";
-
-    export const FlowPartFragment = graphql(/* GraphQL */ `
-        fragment FlowPart on FlowPart {
-            widgets {
-                contentType
-            }
-        }
-    `);
-</script>
-
-<script lang="ts">
-	import { type FragmentType, useFragment } from "../gql";
-
-    export let fragment: FragmentType<typeof FlowPartFragment>;
-    
-    const content = useFragment(FlowPartFragment, fragment);
-    const widgets = content.widgets ?? [];
-</script>
-
-{#each widgets as widget}
-    <p>a widget: {widget?.contentType}</p>
-{/each}

src/OAP/Oap.Theme.Svelte/src/components/Form.svelte

@@ -12,7 +12,11 @@
 				id
 			}
 			flow {
-				...FlowPart
+				widgets {
+					...LabelPart
+					...ButtonPart
+					...InputPart
+				}
 			}
 		}
 	`);
@@ -20,7 +24,10 @@
 
 <script lang="ts">
 	import { useFragment, type FragmentType } from "../gql";
-	import FlowPart from "./FlowPart.svelte";
+	import ButtonPart from "./ButtonPart.svelte";
+	import InputPart from "./InputPart.svelte";
+	import LabelPart from "./LabelPart.svelte";
+	import SelectPart from "./SelectPart.svelte";
 
 	export let antiForgeryToken: string;
 	export let fragment: FragmentType<typeof FormFragment>;
@@ -37,7 +44,25 @@
 
 	<div class="flex flex-col gap-2">
 		{#if content.flow}
-			<FlowPart fragment={content.flow} />
+			{#each content.flow.widgets ?? [] as widget}
+				{#if widget?.__typename === "Button"}
+					<div class="flex justify-end">
+						<ButtonPart fragment={widget} />
+					</div>
+				{:else if widget?.__typename === "Input"}
+					<div>
+						<InputPart fragment={widget} />
+					</div>
+				{:else if widget?.__typename === "Label"}
+					<div>
+						<LabelPart fragment={widget} />
+					</div>
+				{:else if widget?.__typename === "Select"}
+					<div>
+						<SelectPart fragment={widget} />
+					</div>
+				{/if}
+			{/each}
 		{/if}
 	</div>
 </form>

src/OAP/Oap.Theme.Svelte/src/components/InputPart.svelte

@@ -0,0 +1,64 @@
+<script context="module" lang="ts">
+	import { graphql } from "../gql";
+
+	export const InputPartFragment = graphql(/* GraphQL */ `
+		fragment InputPart on Input {
+			input {
+				defaultValue
+				placeholder
+				type
+			}
+			formElementLabel {
+				label
+			}
+			formInputElement {
+				name
+			}
+			formElement {
+				id
+			}
+			explanation {
+				html
+			}
+		}
+	`);
+</script>
+
+<script lang="ts">
+	import { useFragment, type FragmentType } from "../gql";
+	import ExplanationPart from "./ExplanationPart.svelte";
+	export let fragment: FragmentType<typeof InputPartFragment>;
+	const content = useFragment(InputPartFragment, fragment);
+
+	let cssClasses =
+		"block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
+	if (content.input?.type === "number" || content.input?.type === "date") {
+		cssClasses =
+			"block w-1/3 rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
+	}
+
+	let checked = false;
+	let value = content.input?.defaultValue ?? "";
+</script>
+
+{#if content.formElementLabel?.label}
+	<label
+		for={content.formElement?.id}
+		class="block mt-2 font-bold text-gray-900"
+	>
+		{content.formElementLabel.label}
+	</label>
+{/if}
+
+{#if content.explanation?.html}
+    <ExplanationPart fragment={content.explanation}/>
+{/if}
+
+<input
+	id={content.formElement?.id}
+	name={content.formInputElement?.name}
+	type={content.input?.type}
+	class={cssClasses}
+	{value}
+	placeholder={content.input?.placeholder}
+/>

src/OAP/Oap.Theme.Svelte/src/components/OapApplicationFormStep.svelte

@@ -3,12 +3,15 @@
 
 	export const OapApplicationFormStepFragment = graphql(/* GraphQL */ `
 		fragment OapApplicationFormStep on OapApplicationFormStep {
+			displayText
 			contentItemId
 			htmlBody {
 				...RichText
 			}
 			flow {
-				...FlowPart
+				widgets {
+					...Form
+				}
 			}
 		}
 	`);
@@ -18,21 +21,25 @@
 	import { type FragmentType, useFragment } from "../gql";
 
 	import RichText from "./RichText.svelte";
-	import FlowPart from "./FlowPart.svelte";
+	import Form from "./Form.svelte";
 
 	export let fragment: FragmentType<typeof OapApplicationFormStepFragment>;
 
 	const content = useFragment(OapApplicationFormStepFragment, fragment);
 </script>
 
-<h2 class="text-lg font-bold">{content.contentItemId}</h2>
+<h2 class="text-lg font-bold">{content.displayText}</h2>
 
 {#if content.htmlBody}
-<div class="mt-2 mb-6">
+	<div class="mt-2 mb-6">
 		<RichText fragment={content.htmlBody} />
-</div>
+	</div>
 {/if}
 
 {#if content.flow}
-<FlowPart fragment={content.flow} />
+	{#each content.flow.widgets as widget}
+		{#if widget?.__typename === "Form"}
+			<Form antiForgeryToken="" fragment={widget} />
+		{/if}
+	{/each}
 {/if}

src/OAP/Oap.Theme.Svelte/src/components/RichText.svelte

@@ -17,5 +17,5 @@
 </script>
 
 <div class="richtext">
-	{content.html}
+	{@html content.html}
 </div>

src/OAP/Oap.Theme.Svelte/src/components/SelectPart.svelte

@@ -0,0 +1,76 @@
+<script context="module" lang="ts">
+	import { graphql } from "../gql";
+
+	export const SelectPartFragment = graphql(/* GraphQL */ `
+		fragment SelectPart on Select {
+			formElementLabel {
+				label
+			}
+			formInputElement {
+				name
+			}
+			formElement {
+				id
+			}
+			explanation {
+				html
+			}
+		}
+	`);
+</script>
+
+<script lang="ts">
+	import { useFragment, type FragmentType } from "../gql";
+	export let fragment: FragmentType<typeof SelectPartFragment>;
+	const content = useFragment(SelectPartFragment, fragment);
+
+	let cssClasses =
+		"block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
+
+</script>
+
+{#if content.formElementLabel?.label}
+	<label
+		for={content.formElement?.id}
+		class="block mt-2 font-bold text-gray-900"
+	>
+		{content.formElementLabel.label}
+	</label>
+{/if}
+
+{#if content.explanation?.html}
+    <ExplanationPart fragment={content.explanation}/>
+{/if}
+
+
+@if (Model.Value.Editor == SelectEditorOption.Checkbox || Model.Value.Editor == SelectEditorOption.Radio)
+{
+    int i = 0;
+    var htmlType = Model.Value.Editor == SelectEditorOption.Checkbox ? "checkbox" : "radio";
+    <div class="mt-2 space-y-2">
+        @foreach (var option in Model.Value.Options)
+        {
+            <div class="flex items-center gap-x-3">
+                <input type="@htmlType" id="@(fieldId + "_" + i)" name="@fieldName"
+                    class="@validationClass h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    value="@option.Value" @(option.Value == fieldValue ? "checked='checked'" : "") />
+                <label class="block text-sm font-medium text-gray-900" for="@(fieldId + "_" + i)">@option.Text</label>
+            </div>
+            i++;
+        }
+    </div>
+}
+else
+{
+    <div class="mt-2">
+        <select id="@fieldId" name="@fieldName"
+            class="@validationClass block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+            @foreach (var option in Model.Value.Options)
+            {
+                var optionValue = !string.IsNullOrWhiteSpace(option.Value) ? option.Value : option.Text;
+                var isOptionSelected = optionValue == fieldValue;
+                <option value="@optionValue" selected="@isOptionSelected">@option.Text</option>
+            }
+        </select>
+    </div>
+}

src/OAP/Oap.Theme.Svelte/src/gql/gql.ts

@@ -15,11 +15,12 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 const documents = {
     "\n\t\tquery OapApplicationForm($contentItemId: ID!) {\n\t\t\toapApplicationForm(where: { contentItemId: $contentItemId }) {\n\t\t\t\tdisplayText\n\t\t\t\tcontentItemId\n\t\t\t\tlist {\n\t\t\t\t\tcontentItems {\n\t\t\t\t\t\t__typename\n\t\t\t\t\t\t...OapApplicationFormStep\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormDocument,
     "\n        fragment ButtonPart on Button {\n            button {\n                type\n                text\n            }\n            formInputElement {\n                name\n            }\n            formElement {\n                id\n            }\n        }\n    ": types.ButtonPartFragmentDoc,
-    "\n        fragment FlowPart on FlowPart {\n            widgets {\n                contentType\n            }\n        }\n    ": types.FlowPartFragmentDoc,
+    "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
-    "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
+    "\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.InputPartFragmentDoc,
     "\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t": types.LabelPartFragmentDoc,
-    "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormStepFragmentDoc,
+    "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormStepFragmentDoc,
     "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t": types.RichTextFragmentDoc,
+    "\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc,
 };
 
 /**
@@ -47,11 +48,11 @@ export function graphql(source: "\n        fragment ButtonPart on Button {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n        fragment FlowPart on FlowPart {\n            widgets {\n                contentType\n            }\n        }\n    "): (typeof documents)["\n        fragment FlowPart on FlowPart {\n            widgets {\n                contentType\n            }\n        }\n    "];
+export function graphql(source: "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"];
+export function graphql(source: "\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -59,11 +60,15 @@ export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tdisp
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\t...FlowPart\n\t\t\t}\n\t\t}\n\t"];
+export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

src/OAP/Oap.Theme/GraphQL/FormElementLabelPartQueryObjectType.cs

@@ -0,0 +1,15 @@
+using GraphQL.Types;
+using OrchardCore.Forms.Models;
+
+namespace OrchardCore.Forms.GraphQL
+{
+    public class FormElementLabelPartQueryObjectType : ObjectGraphType<FormElementLabelPart>
+    {
+        public FormElementLabelPartQueryObjectType()
+        {
+            Name = "FormElementLabelPart";
+
+            Field(x => x.Label, nullable: true);
+        }
+    }
+}

src/OAP/Oap.Theme/Startup.cs

@@ -1,5 +1,8 @@
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Options;
+using OrchardCore.Apis;
+using OrchardCore.Forms.GraphQL;
+using OrchardCore.Forms.Models;
 using OrchardCore.Modules;
 using OrchardCore.ResourceManagement;
 
@@ -10,5 +13,6 @@ public class Startup : StartupBase
 	public override void ConfigureServices(IServiceCollection services)
 	{
 		services.AddTransient<IConfigureOptions<ResourceManagementOptions>, ResourceManagementOptionsConfiguration>();
+		services.AddObjectGraphType<FormElementLabelPart, FormElementLabelPartQueryObjectType>();
 	}
 }