Rename a few components

src/OAP/Oap.Theme.Svelte/src/ApplicationForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Client, setContextClient, queryStore } from "@urql/svelte";
 	import { graphql } from "./gql";
-	import OapApplicationFormStep from "./components/OapApplicationFormStep.svelte";
+	import ApplicationFormStep from "./components/ApplicationFormStep.svelte";
 	import step from "./lib/stores/step";
 
 	export let antiForgeryToken: string | null;
@@ -34,7 +34,7 @@
 	});
 
 	function handleSubmit(event: SubmitEvent) {
-		step.update(x => x + 1);
+		step.update((x) => x + 1);
 	}
 </script>
 
@@ -56,10 +56,11 @@
 			{/if}
 			{#each oapApplicationForm?.list?.contentItems ?? [] as contentItem, index}
 				{#if contentItem?.__typename === "OapApplicationFormStep" && $step === index}
-					<OapApplicationFormStep
+					<ApplicationFormStep
 						onSubmit={handleSubmit}
 						{antiForgeryToken}
-						fragment={contentItem} />
+						fragment={contentItem}
+					/>
 				{/if}
 			{/each}
 		{/each}

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

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	import { graphql } from "../gql";
 
-	export const OapApplicationFormStepFragment = graphql(/* GraphQL */ `
+	export const ApplicationFormStepFragment = graphql(/* GraphQL */ `
 		fragment OapApplicationFormStep on OapApplicationFormStep {
 			displayText
 			contentItemId
@@ -24,11 +24,14 @@
 	import Form from "./Form.svelte";
 	import type { EventHandler } from "svelte/elements";
 
-	export let onSubmit: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
+	export let onSubmit:
+		| EventHandler<SubmitEvent, HTMLFormElement>
+		| undefined
+		| null;
 	export let antiForgeryToken: string | null;
-	export let fragment: FragmentType<typeof OapApplicationFormStepFragment>;
+	export let fragment: FragmentType<typeof ApplicationFormStepFragment>;
 
-	const content = useFragment(OapApplicationFormStepFragment, fragment);
+	const content = useFragment(ApplicationFormStepFragment, fragment);
 </script>
 
 <h2 class="text-lg font-bold">{content.displayText}</h2>
@@ -39,10 +42,8 @@
 	</div>
 {/if}
 
-{#if content.flow}
+{#each content.flow?.widgets ?? [] as widget}
-	{#each content.flow.widgets ?? [] as widget}
 	{#if widget?.__typename === "Form"}
 		<Form {onSubmit} {antiForgeryToken} fragment={widget} />
 	{/if}
-	{/each}
+{/each}
-{/if}

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

@@ -1,6 +1,6 @@
 import { cacheExchange, Client, fetchExchange } from "@urql/svelte";
 import "./app.css";
-import OapApplicationForm from "./OapApplicationForm.svelte";
+import ApplicationForm from "./ApplicationForm.svelte";
 
 const client = new Client({
 	url: "https://localhost:5001/oap/api/graphql",
@@ -8,19 +8,19 @@ const client = new Client({
 });
 
 var antiForgeryToken = document.getElementsByName("__RequestVerificationToken");
-var oapApplicationForms = document.getElementsByClassName("OapApplicationForm");
+var applicationFormElements = document.getElementsByClassName("OapApplicationForm");
 
-let oapApplicationForm: OapApplicationForm;
+let applicationForm: ApplicationForm;
 
-if (oapApplicationForms.length === 1) {
+if (applicationFormElements.length === 1) {
-	oapApplicationForm = new OapApplicationForm({
+	applicationForm = new ApplicationForm({
-		target: oapApplicationForms[0],
+		target: applicationFormElements[0],
 		props: {
 			antiForgeryToken: antiForgeryToken[0]?.getAttribute("value") ?? null,
-			contentItemId: oapApplicationForms[0].id,
+			contentItemId: applicationFormElements[0].id,
 			client,
 		},
 	});
 }
 
-export { oapApplicationForm };
+export { applicationForm as oapApplicationForm };