66 lines
1.8 KiB
Svelte
66 lines
1.8 KiB
Svelte
<div class:col-1={col1} class:col-2={col2} class:col-3={col3} class:col-4={col4}>
|
|
{#if label !== undefined}
|
|
<div class="label-wrapper" class:no-margin={tooltipText !== undefined}>
|
|
<label for="input" class="form-label" style="margin-bottom: 0">{label}</label>
|
|
{#if badge !== undefined}
|
|
<Badge>{badge}</Badge>
|
|
{/if}
|
|
{#if tooltipText !== undefined}
|
|
<div>
|
|
<Tooltip tip={tooltipText} top color="#121212">
|
|
{#if tooltipLink !== undefined}
|
|
<a href={tooltipLink} target="_blank">
|
|
<i class="fas fa-circle-info form-label tooltip-icon"></i>
|
|
</a>
|
|
{:else}
|
|
<i class="fas fa-circle-info form-label tooltip-icon"></i>
|
|
{/if}
|
|
</Tooltip>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
<input id="input" class="form-input" placeholder="{placeholder}" disabled="{disabled}" on:input on:change
|
|
bind:value={value}>
|
|
</div>
|
|
|
|
<script>
|
|
import Tooltip from 'svelte-tooltip';
|
|
import Badge from "../Badge.svelte";
|
|
|
|
export let value;
|
|
export let label;
|
|
export let placeholder;
|
|
export let badge = undefined;
|
|
export let disabled = false;
|
|
|
|
export let tooltipText = undefined;
|
|
export let tooltipLink = undefined;
|
|
|
|
export let col1 = false;
|
|
export let col2 = false;
|
|
export let col3 = false;
|
|
export let col4 = false;
|
|
</script>
|
|
|
|
<style>
|
|
input {
|
|
width: 100%;
|
|
}
|
|
|
|
.label-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.no-margin {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.tooltip-icon {
|
|
cursor: pointer;
|
|
}
|
|
</style> |