anki/ts/components/SelectButton.svelte

62 lines
1.4 KiB
Svelte
Raw Normal View History

2021-04-15 15:59:52 +02:00
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
2021-03-31 15:40:11 +02:00
<script lang="typescript">
import type { Readable } from "svelte/store";
2021-03-31 15:40:11 +02:00
import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey } from "./contextKeys";
export let id: string | undefined = undefined;
let className = "";
export { className as class };
2021-03-31 15:40:11 +02:00
export let tooltip: string | undefined = undefined;
2021-03-31 15:40:11 +02:00
2021-04-01 18:55:34 +02:00
export let disables = true;
2021-03-31 15:40:11 +02:00
let buttonRef: HTMLSelectElement;
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
2021-03-31 15:40:11 +02:00
</script>
<style lang="scss">
select {
2021-03-31 19:19:24 +02:00
display: inline-block;
vertical-align: middle;
height: var(--toolbar-size);
2021-03-31 15:40:11 +02:00
width: auto;
font-size: calc(var(--toolbar-size) / 2.3);
user-select: none;
box-shadow: none;
2021-03-31 15:40:11 +02:00
border-radius: 0;
2021-03-31 21:09:08 +02:00
&:hover {
background-color: #eee;
}
&:focus {
outline: none;
}
2021-03-31 15:40:11 +02:00
}
</style>
<!-- svelte-ignore a11y-no-onchange -->
2021-03-31 15:40:11 +02:00
<select
tabindex="-1"
2021-03-31 15:40:11 +02:00
bind:this={buttonRef}
disabled={_disabled}
2021-03-31 15:40:11 +02:00
{id}
class={` ${className}`}
title={tooltip}
on:change>
<slot />
2021-03-31 15:40:11 +02:00
</select>