langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set disabled class on TagInput from WithAutocomplete

Browse Source
This commit is contained in:
Henrik Giesel 2021-09-08 14:27:46 +02:00
parent eb3bc08420
commit 7bdf9aaf00
5 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts/components/DropdownMenu.svelte
View File

@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<div {id} class="dropdown-menu" aria-labelledby={labelledby}>
<div class={`dropdown-content ${className}`}>
<div class="dropdown-content {className}">
<slot />
</div>
</div>

2
ts/editor/AutocompleteItem.svelte
View File

@ -22,9 +22,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<button
bind:this={buttonRef}
{id}
tabindex="-1"
bind:this={buttonRef}
class="autocomplete-item btn {className}"
class:btn-day={!nightMode}
class:btn-night={nightMode}

19
ts/editor/TagEditor.svelte
View File

@ -452,16 +452,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div class="adjust-position">
<WithAutocomplete
drop="up"
class="d-flex flex-column"
class="d-flex flex-column cap-items"
{suggestionsPromise}
on:update={updateSuggestions}
on:select={({ detail }) => onAutocomplete(detail.selected)}
on:choose={({ detail }) => onAutocomplete(detail.chosen)}
let:createAutocomplete
let:disabled
>
<TagInput
id={tag.id}
class="tag-input position-absolute top-0 start-0 ps-2 py-0"
class="tag-input position-absolute start-0 top-0 ps-2 py-0"
{disabled}
bind:name={activeName}
bind:input={activeInput}
on:focus={() => {
@ -529,8 +531,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
}
.adjust-position :global(.tag-input) {
/* recreates positioning of Tag component */
border-left: 1px solid transparent;
.adjust-position {
:global(.tag-input) {
/* recreates positioning of Tag component */
border-left: 1px solid transparent;
}
:global(.cap-items) {
max-height: 7rem;
overflow-y: scroll;
}
}
</style>

2
ts/editor/TagInput.svelte
View File

@ -17,6 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let name: string;
export let input: HTMLInputElement;
export let disabled: boolean;
const dispatch = createEventDispatcher();
@ -231,6 +232,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<input
{id}
class={className}
class:disabled
bind:this={input}
bind:value={name}
type="text"

12
ts/editor/WithAutocomplete.svelte
View File

@ -14,21 +14,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className: string = "";
export { className as class };
export let drop: "down" | "up" | "left" | "right" = "down";
export let drop: "down" | "up" = "down";
export let suggestionsPromise: Promise<string[]>;
let target: HTMLElement;
let disabled = true;
let dropdown: Dropdown;
let suggestionsItems: string[] = [];
$: suggestionsPromise.then((items) => {
if (items.length > 0) {
// disabled class will tell Bootstrap not to show menu on clicking
target.classList.remove("disabled");
disabled = false;
dropdown.show();
} else {
dropdown.hide();
target.classList.add("disabled");
disabled = true;
}
suggestionsItems = items;
@ -90,7 +89,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
(createDropdown: (element: HTMLElement) => Dropdown) =>
(element: HTMLElement): any => {
dropdown = createDropdown(element);
target = element;
const api = {
hide: dropdown.hide,
@ -131,7 +129,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<WithDropdown {drop} toggleOpen={false} let:createDropdown>
<slot createAutocomplete={createAutocomplete(createDropdown)} />
<slot createAutocomplete={createAutocomplete(createDropdown)} {disabled} />
<DropdownMenu class={className}>
{#each suggestionsItems as suggestion, index}