anki/ts/deckoptions/ConfigEntry.svelte

81 lines
1.9 KiB
Svelte
Raw Normal View History

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import marked from "marked";
2021-04-25 13:10:53 +02:00
import { slide } from "svelte/transition";
2021-04-25 10:31:13 +02:00
import RevertButton from "./RevertButton.svelte";
import HelpPopup from "./HelpPopup.svelte";
export let label: string;
2021-04-25 13:37:21 +02:00
export let tooltip = "";
export let value: any;
export let defaultValue: any;
/// empty strings will be ignored
export let warnings: string[] = [];
export let wholeLine = false;
export let id: string | undefined = undefined;
let renderedTooltip: string;
$: renderedTooltip = marked(tooltip);
</script>
<style lang="scss">
.outer {
display: grid;
grid-template-columns: 7fr 3fr;
grid-row-gap: 0.5em;
}
.full-grid-width {
2021-05-19 08:41:19 +02:00
grid-column: 1 / 6;
}
.table {
display: table;
height: 100%;
}
.vcenter {
display: table-cell;
vertical-align: middle;
}
.alert {
margin-top: 0.5em;
}
.input-grid {
display: grid;
grid-column-gap: 0.5em;
grid-template-columns: 10fr 16px;
}
</style>
<div {id} class="outer">
{#if label}
<div class="table">
<span class="vcenter">
{label}
{#if renderedTooltip}
<HelpPopup html={renderedTooltip} />
{/if}
</span>
</div>
{/if}
<div class="input-grid" class:full-grid-width={wholeLine}>
<slot />
2021-04-25 10:31:13 +02:00
<RevertButton bind:value {defaultValue} on:revert />
</div>
<div class="full-grid-width">
{#each warnings as warning}
{#if warning}
2021-04-25 13:10:53 +02:00
<div class="alert alert-warning" in:slide out:slide>{warning}</div>
{/if}
{/each}
</div>
</div>