benjaminramey/Twain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize components and add application form buttons component

Browse Source
This commit is contained in:
Benjamin Ramey
2024-05-01 09:56:40 -05:00
parent c64202b66b
commit 65595607da
24 changed files with 939 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "twain",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "twain",
"version": "1.0.0",
"license": "ISC"
}
}
}

15
package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "twain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"watch": "dotnet watch --project ./src/Twain.Web/Twain.Web.csproj",
"watch-theme": "npm run dev --prefix src/OAP/OAP.Theme.Svelte"
},
"author": "",
"license": "ISC"
}

30
src/OAP/Oap.Content/Migrations.cs
View File

@@ -213,6 +213,7 @@ public class Migrations : DataMigration
return 9; return 9;
} }
public async Task<int> UpdateFrom9Async() public async Task<int> UpdateFrom9Async()
{ {
await m_contentDefinitionManager await m_contentDefinitionManager
@@ -239,5 +240,34 @@ public class Migrations : DataMigration
return 10; return 10;
} }
public async Task<int> UpdateFrom10Async()
{
await m_contentDefinitionManager.AlterTypeDefinitionAsync("OapApplicationFormButtons", type => type
.Stereotype("Widget")
.WithPart("OapApplicationFormButtons")
.WithPart("Back", "ButtonPart", part => part
.WithDisplayName("Back Button"))
.WithPart("Submit", "ButtonPart", part => part
.WithDisplayName("Submit Button")));
return 11;
}
public async Task<int> UpdateFrom11Async()
{
await m_contentDefinitionManager.AlterPartDefinitionAsync("OapApplicationFormButtons", part => part
.WithField<BooleanField>("ShowBackButton", field => field.WithDisplayName("Show Back Button")));
return 12;
}
public async Task<int> UpdateFrom12Async()
{
await m_contentDefinitionManager.AlterTypeDefinitionAsync("OapApplicationFormButtons", type => type
.WithPart("OapApplicationFormButtons"));
return 13;
}
private readonly IContentDefinitionManager m_contentDefinitionManager; private readonly IContentDefinitionManager m_contentDefinitionManager;
} }

53
src/OAP/Oap.Theme.Svelte/src/components/ButtonPart.svelte
View File

@@ -1,53 +0,0 @@
<script context="module" lang="ts">
import { graphql } from "../gql";
export const ButtonPartFragment = graphql(/* GraphQL */ `
fragment ButtonPart on Button {
metadata {
alignment
size
}
button {
type
text
}
formInputElement {
name
}
formElement {
id
}
}
`);
export function isButtonType(
buttonType: string | undefined | null,
): buttonType is HTMLButtonElement["type"] {
return !!(buttonType as HTMLButtonElement["type"]);
}
</script>
<script lang="ts">
import { type FragmentType, useFragment } from "../gql";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof ButtonPartFragment>;
const content = useFragment(ButtonPartFragment, fragment);
const buttonType: HTMLButtonElement["type"] = isButtonType(
content.button?.type,
)
? content.button?.type
: "button";
</script>
<Widget metadata={content.metadata}>
<button
class="block cursor-pointer rounded-md bg-amber-300 px-4 py-2 text-gray-800 hover:bg-amber-500 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-600"
type={buttonType}
name={content.formInputElement?.name}
id={content.formElement?.id}
>
{content.button?.text}
</button>
</Widget>

23
src/OAP/Oap.Theme.Svelte/src/components/Fields/Button.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script context="module" lang="ts">
export function isButtonType(
buttonType: string | undefined | null,
): buttonType is HTMLButtonElement["type"] {
return !!(buttonType as HTMLButtonElement["type"]);
}
</script>
<script lang="ts">
export let type: HTMLButtonElement["type"] | null | undefined;
export let name: string | null | undefined;
export let id: string | null | undefined;
export let text: string | null | undefined;
const cssClasses =
type === "submit"
? "block cursor-pointer rounded-md bg-amber-300 px-4 py-2 text-gray-800 hover:bg-amber-400 hover:text-gray-900 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-600"
: "cursor-pointer px-4 py-2 text-gray-800 hover:text-gray-400";
</script>
<button class={cssClasses} {type} {name} {id}>
{@html text}
</button>

9
src/OAP/Oap.Theme.Svelte/src/components/CommonFieldParts.svelte → src/OAP/Oap.Theme.Svelte/src/components/Fields/CommonFieldParts.svelte
View File

@@ -3,8 +3,9 @@
FormElementLabelPart, FormElementLabelPart,
FormElementPart, FormElementPart,
RichTextFragment, RichTextFragment,
} from "../gql/graphql"; } from "../../gql/graphql";
import ExplanationPart from "./ExplanationPart.svelte"; import ExplanationPart from "./Explanation.svelte";
import Label from "./Label.svelte";
export let formElementLabel: FormElementLabelPart | undefined | null; export let formElementLabel: FormElementLabelPart | undefined | null;
export let formElement: FormElementPart | undefined | null; export let formElement: FormElementPart | undefined | null;
@@ -23,9 +24,7 @@
</script> </script>
{#if formElementLabel?.label} {#if formElementLabel?.label}
<label for={formElement?.id} class="block mt-2 font-bold text-gray-900"> <Label forId={formElement?.id} text={formElementLabel.label} />
{formElementLabel.label}
</label>
{/if} {/if}
{#if explanation} {#if explanation}

6
src/OAP/Oap.Theme.Svelte/src/components/ExplanationPart.svelte → src/OAP/Oap.Theme.Svelte/src/components/Fields/Explanation.svelte
View File

@@ -1,12 +1,12 @@
<script context="module" lang="ts"> <script context="module" lang="ts">
import { RichTextFragment } from "./RichText.svelte"; import { RichTextFragment } from "../RichText.svelte";
export const ExplanationPartFragment = RichTextFragment; export const ExplanationPartFragment = RichTextFragment;
</script> </script>
<script lang="ts"> <script lang="ts">
import { type FragmentType } from "../gql"; import { type FragmentType } from "../../gql";
import RichText from "./RichText.svelte"; import RichText from "../RichText.svelte";
export let fragment: FragmentType<typeof ExplanationPartFragment>; export let fragment: FragmentType<typeof ExplanationPartFragment>;
</script> </script>

16
src/OAP/Oap.Theme.Svelte/src/components/Fields/Input.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
export let type: HTMLInputElement["type"] | null | undefined;
export let name: string | null | undefined;
export let id: string | null | undefined;
export let value: string | null | undefined;
export let placeholder: string | null | undefined;
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 (type === "number" || 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";
}
</script>
<input {id} {name} {type} {value} {placeholder} class={cssClasses} />

8
src/OAP/Oap.Theme.Svelte/src/components/Fields/Label.svelte Normal file
View File

@@ -0,0 +1,8 @@
<script lang="ts">
export let forId: string | null | undefined;
export let text: string | null | undefined;
</script>
<label for={forId} class="block mt-2 font-semibold text-gray-900">
{text}
</label>

44
src/OAP/Oap.Theme.Svelte/src/components/Fields/Select.svelte Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts">
export let name: string | null | undefined;
export let id: string | null | undefined;
export let type: string | null | undefined;
export let options:
| Array<{ text: string | null | undefined; value: string | null | undefined }>
| null
| undefined;
const showDropdown = type === "select";
</script>
{#if showDropdown}
<div class="mt-2">
<select
{id}
{name}
class="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"
>
{#each options ?? [] as option}
<option value={option?.value ?? option?.text} selected={false}
>{option?.text}</option
>
{/each}
</select>
</div>
{:else}
<div class="mt-2 space-y-2">
{#each options ?? [] as option, index}
<div class="flex items-center gap-x-3">
<input
{type}
{id}
{name}
class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
value={option?.value}
/>
<label
class="block text-sm font-normal text-gray-900"
for={id + "_" + index}>{option?.text}</label
>
</div>
{/each}
</div>
{/if}

13
src/OAP/Oap.Theme.Svelte/src/components/Fields/TextArea.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
export let name: string | null | undefined;
export let id: string | null | undefined;
export let placeholder: string | null | undefined;
</script>
<textarea
{id}
{name}
{placeholder}
class="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"
>
</textarea>

35
src/OAP/Oap.Theme.Svelte/src/components/Form.svelte
View File

@@ -13,11 +13,12 @@
} }
flow { flow {
widgets { widgets {
...LabelPart ...LabelWidget
...ButtonPart ...ButtonWidget
...InputPart ...InputWidget
...SelectPart ...SelectWidget
...TextAreaPart ...TextAreaWidget
...OapApplicationFormButtonsWidget
} }
} }
} }
@@ -27,12 +28,12 @@
<script lang="ts"> <script lang="ts">
import type { EventHandler } from "svelte/elements"; import type { EventHandler } from "svelte/elements";
import { useFragment, type FragmentType } from "../gql"; import { useFragment, type FragmentType } from "../gql";
import ButtonPart from "./ButtonPart.svelte"; import ButtonWidget from "./Widgets/ButtonWidget.svelte";
import InputPart from "./InputPart.svelte"; import InputWidget from "./Widgets/InputWidget.svelte";
import LabelPart from "./LabelPart.svelte"; import SelectWidget from "./Widgets/SelectWidget.svelte";
import SelectPart from "./SelectPart.svelte"; import TextAreaWidget from "./Widgets/TextAreaWidget.svelte";
import TextAreaPart from "./TextAreaPart.svelte"; import LabelWidget from "./Widgets/LabelWidget.svelte";
import Widget from "./Widget.svelte"; import ApplicationFormButtonsWidget from "./Widgets/ApplicationFormButtonsWidget.svelte";
export let onSubmit: export let onSubmit:
| EventHandler<SubmitEvent, HTMLFormElement> | EventHandler<SubmitEvent, HTMLFormElement>
@@ -59,15 +60,17 @@
{#if content.flow} {#if content.flow}
{#each content.flow.widgets ?? [] as widget} {#each content.flow.widgets ?? [] as widget}
{#if widget?.__typename === "Button"} {#if widget?.__typename === "Button"}
<ButtonPart fragment={widget} /> <ButtonWidget fragment={widget} />
{:else if widget?.__typename === "Input"} {:else if widget?.__typename === "Input"}
<InputPart fragment={widget} /> <InputWidget fragment={widget} />
{:else if widget?.__typename === "Label"} {:else if widget?.__typename === "Label"}
<LabelPart fragment={widget} /> <LabelWidget fragment={widget} />
{:else if widget?.__typename === "Select"} {:else if widget?.__typename === "Select"}
<SelectPart fragment={widget} /> <SelectWidget fragment={widget} />
{:else if widget?.__typename === "TextArea"} {:else if widget?.__typename === "TextArea"}
<TextAreaPart fragment={widget} /> <TextAreaWidget fragment={widget} />
{:else if widget?.__typename === "OapApplicationFormButtons"}
<ApplicationFormButtonsWidget fragment={widget} />
{/if} {/if}
{/each} {/each}
{/if} {/if}

64
src/OAP/Oap.Theme.Svelte/src/components/InputPart.svelte
View File

@@ -1,64 +0,0 @@
<script context="module" lang="ts">
import { graphql } from "../gql";
export const InputPartFragment = graphql(/* GraphQL */ `
fragment InputPart on Input {
metadata {
alignment
size
}
input {
defaultValue
placeholder
type
}
formElementLabel {
label
}
formInputElement {
name
}
formElement {
id
}
explanation {
html
}
}
`);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import CommonFieldParts from "./CommonFieldParts.svelte";
import Widget from "./Widget.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>
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation}
/>
<input
id={content.formElement?.id}
name={content.formInputElement?.name}
type={content.input?.type}
class={cssClasses}
{value}
placeholder={content.input?.placeholder}
/>
</Widget>

34
src/OAP/Oap.Theme.Svelte/src/components/LabelPart.svelte
View File

@@ -1,34 +0,0 @@
<script context="module" lang="ts">
import { graphql } from "../gql";
export const LabelPartFragment = graphql(/* GraphQL */ `
fragment LabelPart on Label {
metadata {
alignment
size
}
displayText
formElement {
id
}
label {
for
value
}
contentType
}
`);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof LabelPartFragment>;
const content = useFragment(LabelPartFragment, fragment);
</script>
<Widget metadata={content.metadata}>
<label id={content.formElement?.id} for={content.label?.for}>
{content.label?.value}
</label>
</Widget>

86
src/OAP/Oap.Theme.Svelte/src/components/SelectPart.svelte
View File

@@ -1,86 +0,0 @@
<script context="module" lang="ts">
import { graphql } from "../gql";
export const SelectPartFragment = graphql(/* GraphQL */ `
fragment SelectPart on Select {
metadata {
alignment
size
}
formElementLabel {
label
}
formInputElement {
name
}
formElement {
id
}
explanation {
...RichText
}
select {
defaultValue
editor
options {
text
value
}
}
}
`);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import CommonFieldParts from "./CommonFieldParts.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof SelectPartFragment>;
const content = useFragment(SelectPartFragment, fragment);
const showDropdown = content.select?.editor === "select";
</script>
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation}
/>
{#if !showDropdown}
<div class="mt-2 space-y-2">
{#each content.select?.options ?? [] as option, index}
<div class="flex items-center gap-x-3">
<input
type={content.select?.editor}
id={content.formElement?.id + "_" + index}
name={content.formInputElement?.name}
class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
value={option?.value}
/>
<label
class="block text-sm font-medium text-gray-900"
for={content.formElement?.id + "_" + index}
>{option?.text}</label
>
</div>
{/each}
</div>
{:else}
<div class="mt-2">
<select
id={content.formElement?.id}
name={content.formInputElement?.name}
class="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"
>
{#each content.select?.options ?? [] as option}
<option
value={option?.value ?? option?.text}
selected={false}>{option?.text}</option
>
{/each}
</select>
</div>
{/if}
</Widget>

61
src/OAP/Oap.Theme.Svelte/src/components/Widgets/ApplicationFormButtonsWidget.svelte Normal file
View File

@@ -0,0 +1,61 @@
<script context="module" lang="ts">
import { graphql } from "../../gql";
export const OapApplicationFormButtonsWidgetFragment = graphql(
/* GraphQL */ `
fragment OapApplicationFormButtonsWidget on OapApplicationFormButtons {
metadata {
alignment
size
}
back {
type
text
}
submit {
type
text
}
showBackButton
}
`,
);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../../gql";
import Widget from "./Widget.svelte";
import Button, { isButtonType } from "../Fields/Button.svelte";
export let fragment: FragmentType<
typeof OapApplicationFormButtonsWidgetFragment
>;
const content = useFragment(
OapApplicationFormButtonsWidgetFragment,
fragment,
);
</script>
<Widget metadata={content.metadata}>
<div class="flex flex-row mt-8 justify-between">
{#if content.showBackButton}
<Button
id="Back"
name="Back"
text={content.back?.text}
type={isButtonType(content.back?.type)
? content.back?.type
: "button"}
/>
{:else}
<span>&nbsp;</span>
{/if}
<Button
id="Submit"
name="Submit"
text={content.submit?.text}
type={isButtonType(content.submit?.type)
? content.submit?.type
: "submit"}
/>
</div>
</Widget>

46
src/OAP/Oap.Theme.Svelte/src/components/Widgets/ButtonWidget.svelte Normal file
View File

@@ -0,0 +1,46 @@
<script context="module" lang="ts">
import { graphql } from "../../gql";
export const ButtonWidgetFragment = graphql(/* GraphQL */ `
fragment ButtonWidget on Button {
metadata {
alignment
size
}
button {
type
text
}
formInputElement {
name
}
formElement {
id
}
}
`);
</script>
<script lang="ts">
import { type FragmentType, useFragment } from "../../gql";
import Button, { isButtonType } from "../Fields/Button.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof ButtonWidgetFragment>;
const content = useFragment(ButtonWidgetFragment, fragment);
const buttonType: HTMLButtonElement["type"] = isButtonType(
content.button?.type,
)
? content.button?.type
: "button";
</script>
<Widget metadata={content.metadata}>
<Button
type={buttonType}
name={content.formInputElement?.name}
id={content.formElement?.id}
text={content.button?.text}
/>
</Widget>

57
src/OAP/Oap.Theme.Svelte/src/components/Widgets/InputWidget.svelte Normal file
View File

@@ -0,0 +1,57 @@
<script context="module" lang="ts">
import { graphql } from "../../gql";
export const InputWidgetFragment = graphql(/* GraphQL */ `
fragment InputWidget on Input {
metadata {
alignment
size
}
input {
defaultValue
placeholder
type
}
formElementLabel {
label
}
formInputElement {
name
}
formElement {
id
}
explanation {
html
}
}
`);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../../gql";
import CommonFieldParts from "../Fields/CommonFieldParts.svelte";
import Input from "../Fields/Input.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof InputWidgetFragment>;
const content = useFragment(InputWidgetFragment, fragment);
let checked = false;
let value = content.input?.defaultValue ?? "";
</script>
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation}
/>
<Input
id={content.formElement?.id}
name={content.formInputElement?.name}
type={content.input?.type}
{value}
placeholder={content.input?.placeholder}
/>
</Widget>

33
src/OAP/Oap.Theme.Svelte/src/components/Widgets/LabelWidget.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script context="module" lang="ts">
import { graphql } from "../../gql";
export const LabelWidgetFragment = graphql(/* GraphQL */ `
fragment LabelWidget on Label {
metadata {
alignment
size
}
displayText
formElement {
id
}
label {
for
value
}
contentType
}
`);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../../gql";
import Widget from "./Widget.svelte";
import Label from "../Fields/Label.svelte";
export let fragment: FragmentType<typeof LabelWidgetFragment>;
const content = useFragment(LabelWidgetFragment, fragment);
</script>
<Widget metadata={content.metadata}>
<Label id={content.formElement?.id} forId={content.label?.for} text={content.label?.value} />
</Widget>

58
src/OAP/Oap.Theme.Svelte/src/components/Widgets/SelectWidget.svelte Normal file
View File

@@ -0,0 +1,58 @@
<script context="module" lang="ts">
import { graphql } from "../../gql";
export const SelectWidgetFragment = graphql(/* GraphQL */ `
fragment SelectWidget on Select {
metadata {
alignment
size
}
formElementLabel {
label
}
formInputElement {
name
}
formElement {
id
}
explanation {
...RichText
}
select {
defaultValue
editor
options {
text
value
}
}
}
`);
</script>
<script lang="ts">
import { useFragment, type FragmentType } from "../../gql";
import CommonFieldParts from "../Fields/CommonFieldParts.svelte";
import Select from "../Fields/Select.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof SelectWidgetFragment>;
const content = useFragment(SelectWidgetFragment, fragment);
</script>
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation}
/>
<Select
type={content.select?.editor}
options={content.select?.options?.map((o) => {
return { text: o?.text, value: o?.value };
})}
id={content.formElement?.id}
name={content.formInputElement?.name}
/>
</Widget>

21
src/OAP/Oap.Theme.Svelte/src/components/TextAreaPart.svelte → src/OAP/Oap.Theme.Svelte/src/components/Widgets/TextAreaWidget.svelte
View File

@@ -1,8 +1,8 @@
<script context="module" lang="ts"> <script context="module" lang="ts">
import { graphql } from "../gql"; import { graphql } from "../../gql";
export const TextAreaPartFragment = graphql(/* GraphQL */ ` export const TextAreaWidgetFragment = graphql(/* GraphQL */ `
fragment TextAreaPart on TextArea { fragment TextAreaWidget on TextArea {
metadata { metadata {
alignment alignment
size size
@@ -28,11 +28,12 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { useFragment, type FragmentType } from "../gql"; import { useFragment, type FragmentType } from "../../gql";
import CommonFieldParts from "./CommonFieldParts.svelte"; import CommonFieldParts from "../Fields/CommonFieldParts.svelte";
import TextArea from "../Fields/TextArea.svelte";
import Widget from "./Widget.svelte"; import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof TextAreaPartFragment>; export let fragment: FragmentType<typeof TextAreaWidgetFragment>;
const content = useFragment(TextAreaPartFragment, fragment); const content = useFragment(TextAreaWidgetFragment, fragment);
</script> </script>
<Widget metadata={content.metadata}> <Widget metadata={content.metadata}>
@@ -42,11 +43,9 @@
explanation={content.explanation} explanation={content.explanation}
/> />
<textarea <TextArea
id={content.formElement?.id} id={content.formElement?.id}
name={content.formInputElement?.name} name={content.formInputElement?.name}
class="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"
placeholder={content.textArea?.placeholder} placeholder={content.textArea?.placeholder}
> />
</textarea>
</Widget> </Widget>

4
src/OAP/Oap.Theme.Svelte/src/components/Widget.svelte → src/OAP/Oap.Theme.Svelte/src/components/Widgets/Widget.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { FlowMetadata } from "../gql/graphql"; import type { FlowMetadata } from "../../gql/graphql";
export let metadata: FlowMetadata | null | undefined; export let metadata: FlowMetadata | null | undefined;
@@ -12,7 +12,7 @@
const justify = metadata?.alignment === "Right" ? "justify-self-end" const justify = metadata?.alignment === "Right" ? "justify-self-end"
: metadata?.alignment === "Left" ? "justify-self-start" : metadata?.alignment === "Left" ? "justify-self-start"
: metadata?.alignment === "Center" ? "justify-self-center" : metadata?.alignment === "Center" ? "justify-self-center"
: metadata?.alignment === "Justify" ? "justify-self-stretch" : metadata?.alignment === "Justify" ? "justify-self-auto"
: ""; : "";
const cssClasses = colspan + " " + justify; const cssClasses = colspan + " " + justify;

47
src/OAP/Oap.Theme.Svelte/src/gql/gql.ts
View File

@@ -15,13 +15,14 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
const documents = { 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\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\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 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 ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\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}\n\t": types.ButtonPartFragmentDoc, "\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...LabelWidget\n\t\t\t\t\t...ButtonWidget\n\t\t\t\t\t...InputWidget\n\t\t\t\t\t...SelectWidget\n\t\t\t\t\t...TextAreaWidget\n\t\t\t\t\t...OapApplicationFormButtonsWidget\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\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\t...SelectPart\n\t\t\t\t\t...TextAreaPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
"\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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 RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t": types.RichTextFragmentDoc, "\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\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\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\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc, "\n\t\t\tfragment OapApplicationFormButtonsWidget on OapApplicationFormButtons {\n\t\t\t\tmetadata {\n\t\t\t\t\talignment\n\t\t\t\t\tsize\n\t\t\t\t}\n\t\t\t\tback {\n\t\t\t\t\ttype\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t\tsubmit {\n\t\t\t\t\ttype\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t\tshowBackButton\n\t\t\t}\n\t\t": types.OapApplicationFormButtonsWidgetFragmentDoc,
"\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\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\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t": types.TextAreaPartFragmentDoc, "\n\t\tfragment ButtonWidget on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\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}\n\t": types.ButtonWidgetFragmentDoc,
"\n\t\tfragment InputWidget on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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.InputWidgetFragmentDoc,
"\n\t\tfragment LabelWidget on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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.LabelWidgetFragmentDoc,
"\n\t\tfragment SelectWidget on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\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\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.SelectWidgetFragmentDoc,
"\n\t\tfragment TextAreaWidget on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\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\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t": types.TextAreaWidgetFragmentDoc,
}; };
/** /**
@@ -49,19 +50,7 @@ export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApp
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * 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 ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\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}\n\t"): (typeof documents)["\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\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}\n\t"]; 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...LabelWidget\n\t\t\t\t\t...ButtonWidget\n\t\t\t\t\t...InputWidget\n\t\t\t\t\t...SelectWidget\n\t\t\t\t\t...TextAreaWidget\n\t\t\t\t\t...OapApplicationFormButtonsWidget\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...LabelWidget\n\t\t\t\t\t...ButtonWidget\n\t\t\t\t\t...InputWidget\n\t\t\t\t\t...SelectWidget\n\t\t\t\t\t...TextAreaWidget\n\t\t\t\t\t...OapApplicationFormButtonsWidget\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\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\t...SelectPart\n\t\t\t\t\t...TextAreaPart\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\t...SelectPart\n\t\t\t\t\t...TextAreaPart\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 InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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.
*/
export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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"): (typeof documents)["\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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"];
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */
@@ -69,11 +58,27 @@ export function graphql(source: "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * 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\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\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\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\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\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"]; export function graphql(source: "\n\t\t\tfragment OapApplicationFormButtonsWidget on OapApplicationFormButtons {\n\t\t\t\tmetadata {\n\t\t\t\t\talignment\n\t\t\t\t\tsize\n\t\t\t\t}\n\t\t\t\tback {\n\t\t\t\t\ttype\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t\tsubmit {\n\t\t\t\t\ttype\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t\tshowBackButton\n\t\t\t}\n\t\t"): (typeof documents)["\n\t\t\tfragment OapApplicationFormButtonsWidget on OapApplicationFormButtons {\n\t\t\t\tmetadata {\n\t\t\t\t\talignment\n\t\t\t\t\tsize\n\t\t\t\t}\n\t\t\t\tback {\n\t\t\t\t\ttype\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t\tsubmit {\n\t\t\t\t\ttype\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t\tshowBackButton\n\t\t\t}\n\t\t"];
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * 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 TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\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\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\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\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"]; export function graphql(source: "\n\t\tfragment ButtonWidget on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\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}\n\t"): (typeof documents)["\n\t\tfragment ButtonWidget on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\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}\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 InputWidget on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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 InputWidget on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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.
*/
export function graphql(source: "\n\t\tfragment LabelWidget on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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"): (typeof documents)["\n\t\tfragment LabelWidget on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\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"];
/**
* 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 SelectWidget on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\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\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectWidget on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\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\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\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 TextAreaWidget on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\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\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment TextAreaWidget on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\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\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"];
export function graphql(source: string) { export function graphql(source: string) {
return (documents as any)[source] ?? {}; return (documents as any)[source] ?? {};

243
src/OAP/Oap.Theme.Svelte/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long