55 lines
1.9 KiB
Svelte
55 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import CheckInput from "./CheckInput.svelte";
|
|
import NumberInput from "./NumberInput.svelte";
|
|
import TextInput from "./TextInput.svelte";
|
|
interface Props {
|
|
value: string|number|boolean;
|
|
numberMode?: boolean;
|
|
boolMode?: boolean;
|
|
marginBottom?: boolean;
|
|
}
|
|
|
|
let {
|
|
value = $bindable(),
|
|
numberMode = false,
|
|
boolMode = false,
|
|
marginBottom = false
|
|
}: Props = $props();
|
|
const valToggle = () => {
|
|
value = !value
|
|
}
|
|
</script>
|
|
|
|
<div class="flex items-center justify-center" class:mb-4={marginBottom}>
|
|
<div class="flex justify-center items-center border-darkborderc rounded-l-md rounded-t-md rounded-b-md border h-full">
|
|
<CheckInput hiddenName check={!(value === null || value === undefined)} onChange={() => {
|
|
if(value === null || value === undefined){
|
|
if(numberMode){
|
|
value = 0
|
|
}
|
|
else if(boolMode){
|
|
value = false
|
|
}
|
|
else{
|
|
value = ""
|
|
}
|
|
}
|
|
else{
|
|
value = null
|
|
}
|
|
}} />
|
|
</div>
|
|
|
|
{#if (value === null || value === undefined)}
|
|
<TextInput value={"Using default"} className="flex-1" disabled/>
|
|
{:else if typeof(value) === 'string'}
|
|
<TextInput bind:value={value} className="flex-1"/>
|
|
{:else if typeof(value) === 'number'}
|
|
<NumberInput bind:value={value} className="flex-1"/>
|
|
{:else if typeof(value) === 'boolean'}
|
|
<button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={!value} onclick={valToggle}>True</button>
|
|
<button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={value} onclick={valToggle}>False</button>
|
|
{:else}
|
|
<TextInput value={"Using default"} className="flex-1" disabled/>
|
|
{/if}
|
|
</div> |