72 lines
2.2 KiB
Svelte
72 lines
2.2 KiB
Svelte
<script>
|
|
import { Check, ChevronsUpDown, Globe2 } from "$components/ui/icons.js";
|
|
import { Select } from "$components/ui/primitives.js";
|
|
|
|
export let open = false;
|
|
export let value = "ru";
|
|
export let currentOption = null;
|
|
export let userLanguage = "";
|
|
export let options = [];
|
|
export let disabled = false;
|
|
export let clickGuard = false;
|
|
export let clickGuardArmed = false;
|
|
export let closeLabel = "Close";
|
|
export let label = "Language";
|
|
export let onOpenChange = () => {};
|
|
export let onValueChange = () => {};
|
|
|
|
function closeFromGuard(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (clickGuardArmed) onOpenChange(false);
|
|
}
|
|
</script>
|
|
|
|
{#if open || clickGuard}
|
|
<button
|
|
class="language-select-guard"
|
|
class:language-select-guard--armed={clickGuardArmed}
|
|
type="button"
|
|
aria-label={closeLabel}
|
|
onpointerdown={closeFromGuard}
|
|
onclick={closeFromGuard}
|
|
></button>
|
|
{/if}
|
|
|
|
<div class="settings-row settings-row-language">
|
|
<Globe2 size={21} />
|
|
<Select.Root
|
|
type="single"
|
|
bind:open
|
|
{value}
|
|
items={options}
|
|
{disabled}
|
|
{onOpenChange}
|
|
{onValueChange}
|
|
>
|
|
<Select.Trigger class="language-select-trigger" aria-label={label}>
|
|
<span class="language-select-copy">
|
|
<strong>{label}</strong>
|
|
<small class="language-select-current">
|
|
<span class="emoji-flag" aria-hidden="true">{currentOption?.flag || "🏳️"}</span>
|
|
{currentOption?.label || userLanguage}
|
|
</small>
|
|
</span>
|
|
<ChevronsUpDown size={16} />
|
|
</Select.Trigger>
|
|
<Select.Content class="language-select-content" side="bottom" align="end" sideOffset={6}>
|
|
<Select.Viewport class="language-select-viewport">
|
|
{#each options as option (option.value)}
|
|
<Select.Item value={option.value} label={option.label} class="language-select-item">
|
|
<span class="language-select-item-main">
|
|
<span class="emoji-flag" aria-hidden="true">{option.flag}</span>
|
|
<span>{option.label}</span>
|
|
</span>
|
|
<Check size={15} class="language-select-item-check" />
|
|
</Select.Item>
|
|
{/each}
|
|
</Select.Viewport>
|
|
</Select.Content>
|
|
</Select.Root>
|
|
</div>
|