generated from tpl/obsidian-sample-plugin
80 lines
1.5 KiB
Svelte
80 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import RatingInput from "@ui/components/RatingInput.svelte";
|
|
import { Flame } from "lucide-svelte";
|
|
|
|
interface Props {
|
|
spiceConfigured?: boolean;
|
|
onSubmit: (rating: number, spice: number) => void;
|
|
}
|
|
let { spiceConfigured = false, onSubmit }: Props = $props();
|
|
|
|
let rating = $state(0);
|
|
let spice = $state(0);
|
|
|
|
function onsubmit(ev: SubmitEvent) {
|
|
ev.preventDefault();
|
|
|
|
onSubmit(rating, spice);
|
|
}
|
|
</script>
|
|
|
|
<div class="obt-rating">
|
|
<h2>Rating</h2>
|
|
<form {onsubmit}>
|
|
<div class="field">
|
|
<label for="rating">Rating</label>
|
|
<RatingInput name="rating" half bind:value={rating} />
|
|
</div>
|
|
{#if spiceConfigured}
|
|
<div class="field">
|
|
<label for="spice">Spice</label>
|
|
<RatingInput name="spice" bind:value={spice}>
|
|
{#snippet inactive()}
|
|
<Flame color="var(--background-modifier-border)" />
|
|
{/snippet}
|
|
{#snippet active()}
|
|
<Flame
|
|
color="var(--color-red)"
|
|
fill="rgba(var(--color-red-rgb), 0.2)"
|
|
/>
|
|
{/snippet}
|
|
</RatingInput>
|
|
</div>
|
|
{/if}
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- svelte-ignore css_unused_selector -->
|
|
<style lang="scss">
|
|
@use "../styles/utils";
|
|
|
|
.obt-rating {
|
|
padding-bottom: var(--size-4-4);
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-4);
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
label {
|
|
@include utils.visually-hidden;
|
|
}
|
|
}
|
|
|
|
button {
|
|
align-self: stretch;
|
|
}
|
|
}
|
|
}
|
|
</style>
|