Update +page.svelte

This commit is contained in:
Luke Hagar
2023-05-05 21:23:41 -05:00
parent aec6ffc27b
commit f175824b92

View File

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { RadioGroup, RadioItem, clipboard } from '@skeletonlabs/skeleton';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
//@ts-ignore //@ts-ignore
@@ -7,9 +8,9 @@
let inputJSON = ''; let inputJSON = '';
let outSwagger = ''; let outSwagger = '';
let requestExamples: boolean; let requestExamples: boolean = true;
let noInt: boolean; let noInt: boolean;
let yamlOut: boolean; let yamlOut: boolean = true;
let tabCount: number; let tabCount: number;
let indentator: string; let indentator: string;
let nullType: string; let nullType: string;
@@ -282,32 +283,39 @@
</aside> </aside>
{/if} {/if}
</p> </p>
<div class="flex flex-row justify-end p-2 gap-2" />
<div class="flex flex-row justify-between p-2 gap-2"> <div class="flex flex-row justify-between p-2 gap-2">
<textarea <div class="grow">
id="JSON" <textarea
rows="35" id="JSON"
cols="85" rows="35"
class="grow textarea" cols="85"
placeholder="Type your JSON" class="textarea"
contenteditable placeholder="Type your JSON"
on:input={trigger} contenteditable
on:paste on:input={trigger}
bind:value={inputJSON} on:paste
/> bind:value={inputJSON}
/>
<textarea </div>
readonly <div class="grow relative">
id="Swagger" <textarea
rows="35" readonly
cols="85" id="Swagger"
class="grow textarea" rows="35"
placeholder="Here is your Swagger" cols="85"
bind:value={outSwagger} class="textarea"
/> placeholder="Here is your Swagger"
bind:value={outSwagger}
/>
<button class="btn variant-filled-primary absolute top-4 right-4" use:clipboard={outSwagger}>
Copy
</button>
</div>
</div> </div>
<div class="flex flex-row justify-center px-4 gap-24"> <div class="flex flex-row justify-center px-4 gap-8">
<label class="label"> <label class="label">
Convert null values to: Convert null values to
<select bind:value={nullType} on:change={() => convert()} class="select" id="nullType"> <select bind:value={nullType} on:change={() => convert()} class="select" id="nullType">
<option value="string" selected>String</option> <option value="string" selected>String</option>
<option value="number">Number</option> <option value="number">Number</option>
@@ -315,9 +323,18 @@
<option value="boolean">Boolean</option> <option value="boolean">Boolean</option>
</select> </select>
</label> </label>
<div> <div class="flex flex-col justify-center">
<label> <RadioGroup>
Add values as examples: <RadioItem bind:group={yamlOut} on:change={() => convert()} name="justify" value={true}>
YAML
</RadioItem>
<RadioItem bind:group={yamlOut} on:change={() => convert()} name="justify" value={false}>
JSON
</RadioItem>
</RadioGroup>
</div>
<div class="flex flex-col justify-center">
<label class="flex items-center space-x-2">
<input <input
bind:checked={requestExamples} bind:checked={requestExamples}
on:change={() => convert()} on:change={() => convert()}
@@ -325,9 +342,9 @@
type="checkbox" type="checkbox"
id="requestExamples" id="requestExamples"
/> />
<p>Add values as examples</p>
</label> </label>
<label> <label class="flex items-center space-x-2">
Convert integer values to number:
<input <input
bind:checked={noInt} bind:checked={noInt}
on:change={() => convert()} on:change={() => convert()}
@@ -335,22 +352,13 @@
type="checkbox" type="checkbox"
id="noInt" id="noInt"
/> />
</label> <p>Convert integer values to number</p>
<label>
Output as YAML:
<input
bind:checked={yamlOut}
on:change={() => convert()}
class="checkbox"
type="checkbox"
id="yamlOut"
/>
</label> </label>
</div> </div>
</div> </div>
<p class="text-center pt-4"> <p class="text-center pt-4">
Feel like collaborating? Clone the repository at <a Feel like collaborating? Clone the repository at <a
target="_blank" target="_blank"
href="https://github.com/Roger13/SwaggerGenerator">GitHub</a href="https://github.com/LukeHagar/openapi-definition-generator">GitHub</a
> >
</p> </p>