144 lines
3.7 KiB
Svelte
144 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { mdiInformationOutline } from "@mdi/js"
|
|
import { tooltip } from "../../../../functions/utils"
|
|
import Icon from "../../../widgets/Icon.svelte"
|
|
|
|
export let value: any,
|
|
id,
|
|
classList: string = "",
|
|
onChange: (e: Event) => void,
|
|
type: "password" | "text" | "number" | "checkbox" | "noInput" | "textarea" | "select" = "text",
|
|
placeholder: string = "",
|
|
disabled: boolean = false,
|
|
name = "",
|
|
options: { name: string; value: string }[] = [],
|
|
selectedOptionIndex = 0,
|
|
helperText = ""
|
|
|
|
$: hasValue = Boolean(value)
|
|
|
|
const attributes = {
|
|
id,
|
|
class: classList,
|
|
placeholder,
|
|
name: name || id,
|
|
disabled: !!disabled,
|
|
}
|
|
</script>
|
|
|
|
<label
|
|
style=""
|
|
class:textarea="{type == 'textarea'}"
|
|
class:checkbox="{type == 'checkbox'}"
|
|
>
|
|
{#if type !== "checkbox"}
|
|
<span class:hasValue="{hasValue || type === 'noInput'}">{placeholder}</span>
|
|
{/if}
|
|
{#if type == "checkbox"}
|
|
<input
|
|
type="checkbox"
|
|
{...attributes}
|
|
on:change="{onChange}"
|
|
bind:checked="{value}"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="checkit-span"
|
|
aria-label="Toggle checkbox"
|
|
tabindex="{0}"
|
|
on:click="{() => {
|
|
value = !value
|
|
setTimeout(() => {
|
|
const event = new Event('change', { bubbles: true })
|
|
document.getElementById(id)?.dispatchEvent(event)
|
|
}, 10)
|
|
}}"
|
|
on:keydown="{(e) => {}}"></button>
|
|
{/if}
|
|
{#if type == "password"}
|
|
<input
|
|
{...attributes}
|
|
on:blur="{onChange}"
|
|
bind:value="{value}"
|
|
on:change="{onChange}"
|
|
type="password"
|
|
class="sentry-mask"
|
|
/>
|
|
{/if}
|
|
{#if type == "text"}
|
|
<input
|
|
on:blur="{onChange}"
|
|
{...attributes}
|
|
bind:value="{value}"
|
|
on:change="{onChange}"
|
|
/>
|
|
{/if}
|
|
{#if type == "textarea"}
|
|
<textarea
|
|
on:blur="{onChange}"
|
|
{...attributes}
|
|
bind:value="{value}"
|
|
on:change="{onChange}"></textarea>
|
|
{/if}
|
|
{#if type == "number"}
|
|
<input
|
|
on:blur="{onChange}"
|
|
type="number"
|
|
{...attributes}
|
|
bind:value="{value}"
|
|
on:change="{onChange}"
|
|
/>
|
|
{/if}
|
|
{#if type == "noInput"}
|
|
<div class="no-input">
|
|
{#if id.includes("pass")}
|
|
************
|
|
{:else}
|
|
{Boolean(value) ? value : "-"}
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{#if type == "select"}
|
|
<select
|
|
on:change="{onChange}"
|
|
{...attributes}
|
|
bind:value="{value}"
|
|
>
|
|
{#each options as option, index}
|
|
<option
|
|
value="{option.value}"
|
|
selected="{index === selectedOptionIndex}"
|
|
>
|
|
{option.name}
|
|
</option>
|
|
{/each}
|
|
</select>
|
|
{/if}
|
|
{#if type !== "checkbox"}
|
|
<span class="underline"></span>
|
|
{/if}
|
|
{#if helperText}
|
|
<div
|
|
use:tooltip="{{
|
|
content: helperText,
|
|
}}"
|
|
class="helperText"
|
|
>
|
|
<Icon path="{mdiInformationOutline}" />
|
|
</div>
|
|
{/if}
|
|
</label>
|
|
|
|
<style lang="less">
|
|
.checkbox {
|
|
width: 1.2rem !important;
|
|
}
|
|
.helperText {
|
|
position: absolute;
|
|
right: 0px;
|
|
color: var(--bg-100);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
</style>
|