Factor out ButtonToolbar from TagAutocomplete

This commit is contained in:
Henrik Giesel 2021-06-25 18:14:32 +02:00
parent 808d01c4fb
commit 05120c79b0
2 changed files with 37 additions and 39 deletions

View file

@ -3,13 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import ButtonToolbar from "components/ButtonToolbar.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
import DropdownMenu from "components/DropdownMenu.svelte";
import DropdownItem from "components/DropdownItem.svelte";
export let suggestions: string[];
export let size: number;
let className: string = "";
export { className as class };
@ -32,14 +30,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</script>
<ButtonToolbar class={`dropup ${className}`} {size}>
<WithDropdownMenu let:menuId let:createDropdown let:activateDropdown>
<slot {createDropdown} {activateDropdown} />
<DropdownMenu id={menuId} class="d-flex flex-column-reverse">
<DropdownMenu id={menuId} class={className}>
{#each suggestions as tag}
<DropdownItem on:keydown={switchUpDown}>{tag}</DropdownItem>
{/each}
</DropdownMenu>
</WithDropdownMenu>
</ButtonToolbar>

View file

@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import AddTagBadge from "./AddTagBadge.svelte";
import Tag from "./Tag.svelte";
import TagAutocomplete from "./TagAutocomplete.svelte";
import ButtonToolbar from "components/ButtonToolbar.svelte";
import TagInput from "./TagInput.svelte";
import { attachId, getName } from "./tags";
@ -92,10 +93,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<StickyBottom>
<div class="row-gap">
<ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}>
<TagAutocomplete
class="d-flex flex-wrap align-items-center"
class="d-flex flex-column-reverse"
{suggestions}
{size}
let:createDropdown
let:activateDropdown
>
@ -121,6 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagjoinprevious={joinWithLastTag}
/>
</TagAutocomplete>
</ButtonToolbar>
</div>
</StickyBottom>