64 lines
1.4 KiB
Svelte
64 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { StarHalfSolid, StarSolid } from 'flowbite-svelte-icons';
|
|
import { twMerge, type ClassNameValue } from 'tailwind-merge';
|
|
|
|
let {
|
|
value = $bindable(5),
|
|
name,
|
|
disabled = false,
|
|
class: className
|
|
}: { value?: number; name?: string; disabled?: boolean; class?: ClassNameValue } = $props();
|
|
|
|
let stars = $derived(
|
|
[0, 1, 2, 3, 4].map((i) => {
|
|
if (value - i >= 1) {
|
|
return { id: i, value: 1 };
|
|
} else if (value - i >= 0.5) {
|
|
return { id: i, value: 0.5 };
|
|
}
|
|
return { id: i, value: 0 };
|
|
})
|
|
);
|
|
</script>
|
|
|
|
{#if name}
|
|
<input
|
|
type="number"
|
|
{name}
|
|
bind:value
|
|
tabindex="-1"
|
|
style="opacity: 0; position: absolute; pointer-events: none; z-index: -1; bottom: 0; left: 50%; height: 0; width: 0;"
|
|
/>
|
|
{/if}
|
|
|
|
<span class={twMerge('flex justify-between ', className)}>
|
|
<!-- es -->
|
|
{#each stars as s (s.id)}
|
|
<button
|
|
type="button"
|
|
{disabled}
|
|
onclick={() => {
|
|
if (s.id === 0 && value == 0.5) {
|
|
value = 0;
|
|
return;
|
|
}
|
|
if (value === s.id + 1) {
|
|
value = s.id + 0.5;
|
|
return;
|
|
}
|
|
value = s.id + 1;
|
|
}}
|
|
class="grid grid-cols-2 grid-rows-1"
|
|
>
|
|
{#if s.value >= 1}
|
|
<StarSolid class="col-span-2 text-amber-400" />
|
|
{:else}
|
|
<StarSolid class="col-span-2 col-start-1 row-start-1" />
|
|
{#if s.value >= 0.5}
|
|
<StarHalfSolid class="col-span-1 col-start-1 row-start-1 text-amber-400" />
|
|
{/if}
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</span>
|