From cc1e3988c7b41d1b61f7767575a8cf0e03b78b7f Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Thu, 12 Sep 2024 16:06:37 -0600 Subject: [PATCH 1/6] refactor: rename to SearchSelect --- src/svelte/custom-filter-app/components/folder-filter.svelte | 2 +- .../{search-selection.svelte => search-select.svelte} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/svelte/shared/components/{search-selection.svelte => search-select.svelte} (100%) diff --git a/src/svelte/custom-filter-app/components/folder-filter.svelte b/src/svelte/custom-filter-app/components/folder-filter.svelte index c7df938..0c007a3 100644 --- a/src/svelte/custom-filter-app/components/folder-filter.svelte +++ b/src/svelte/custom-filter-app/components/folder-filter.svelte @@ -7,7 +7,7 @@ import VaultExplorerPlugin from "src/main"; import EventManager from "src/event/event-manager"; import { PluginEvent } from "src/event/types"; - import SearchSelection from "src/svelte/shared/components/search-selection.svelte"; + import SearchSelection from "src/svelte/shared/components/search-select.svelte"; export let index: number; export let id: string; diff --git a/src/svelte/shared/components/search-selection.svelte b/src/svelte/shared/components/search-select.svelte similarity index 100% rename from src/svelte/shared/components/search-selection.svelte rename to src/svelte/shared/components/search-select.svelte From d4d25a74f491bbff1302460b03abc28a9f672b60 Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:13:35 -0600 Subject: [PATCH 2/6] fix: add up/down arrow support --- .../components/folder-filter.svelte | 4 +- .../shared/components/search-select.svelte | 88 ++++++++++++++----- 2 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/svelte/custom-filter-app/components/folder-filter.svelte b/src/svelte/custom-filter-app/components/folder-filter.svelte index 0c007a3..5b02d36 100644 --- a/src/svelte/custom-filter-app/components/folder-filter.svelte +++ b/src/svelte/custom-filter-app/components/folder-filter.svelte @@ -7,7 +7,7 @@ import VaultExplorerPlugin from "src/main"; import EventManager from "src/event/event-manager"; import { PluginEvent } from "src/event/types"; - import SearchSelection from "src/svelte/shared/components/search-select.svelte"; + import SearchSelect from "src/svelte/shared/components/search-select.svelte"; export let index: number; export let id: string; @@ -135,7 +135,7 @@ on:ruleToggle > - + { document.addEventListener("click", handleClickOutside); @@ -17,21 +19,63 @@ }; }); + function openDropdown() { + isOpen = true; + inputValue = ""; + } + + function closeDropdown() { + isOpen = false; + inputValue = ""; + currentFocusIndex = 0; + } + function handleOptionClick(e: Event, option: string) { - e.stopPropagation(); inputValue = option; selectedValue = option; - showDropdown = false; + isOpen = false; } function handleInputChange(e: Event) { const value = (e.target as HTMLInputElement).value; inputValue = value; + currentFocusIndex = 0; } - function handleInputClick() { - showDropdown = true; - inputValue = ""; + function handleInputFocus() { + openDropdown(); + } + + function handleInputKeyDown(e: KeyboardEvent) { + if (e.key === "ArrowDown") { + if (!isOpen) { + openDropdown(); + return; + } + currentFocusIndex = currentFocusIndex + 1; + if (currentFocusIndex == filteredOptions.length) { + currentFocusIndex = currentFocusIndex - 1; + } + } else if (e.key === "ArrowUp") { + if (!isOpen) { + openDropdown(); + return; + } + + currentFocusIndex = currentFocusIndex - 1; + if (currentFocusIndex < 0) { + currentFocusIndex = currentFocusIndex = 0; + } + } else if (e.key === "Enter") { + if (isOpen) { + const option = filteredOptions[currentFocusIndex]; + if (option) { + handleOptionClick(e, option); + } + } else { + openDropdown(); + } + } } function handleClickOutside(e: Event) { @@ -39,9 +83,8 @@ const isInsideClick = targetEl.closest( ".vault-explorer-search-selection", ); - if (!isInsideClick && showDropdown) { - showDropdown = false; - inputValue = ""; + if (!isInsideClick && isOpen) { + closeDropdown(); } } @@ -60,26 +103,25 @@ placeholder={selectedValue || "Search..."} type="text" on:input={handleInputChange} - on:click={handleInputClick} + on:focus={handleInputFocus} + on:keydown={handleInputKeyDown} /> - {#if showDropdown} -
- {#each filteredOptions as option} + {#if isOpen} +
+ {#each filteredOptions as option, i}
handleOptionClick(e, option)} - on:keydown={(e) => { - if (e.key === "Enter") { - handleOptionClick(e, option); - } - }} + on:keydown={(e) => {}} > {option}
@@ -134,8 +176,12 @@ text-overflow: ellipsis; } + .vault-explorer-dropdown-item--selected { + background-color: var(--color-base-20); + } + .vault-explorer-dropdown-item:hover { - background-color: var(--background-modifier-hover); + background-color: var(--color-base-30); } .vault-explorer-dropdown-item--empty:hover { From 21ed53af781c3995e22ee3b2dac7b3dc5263c4eb Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:21:56 -0600 Subject: [PATCH 3/6] fix: save and display value --- .../components/folder-filter.svelte | 6 ++--- .../shared/components/search-select.svelte | 23 +++++++++++-------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/svelte/custom-filter-app/components/folder-filter.svelte b/src/svelte/custom-filter-app/components/folder-filter.svelte index 5b02d36..7267b8d 100644 --- a/src/svelte/custom-filter-app/components/folder-filter.svelte +++ b/src/svelte/custom-filter-app/components/folder-filter.svelte @@ -108,8 +108,8 @@ }; }); - function handleValueChange(e: Event) { - const value = (e.target as HTMLInputElement).value; + function handleValueChange(e: CustomEvent) { + const { value } = e.detail; dispatch("ruleValueChange", { id, value }); } @@ -135,7 +135,7 @@ on:ruleToggle > - + - import { onMount } from "svelte"; + import { createEventDispatcher, onMount } from "svelte"; import Icon from "./icon.svelte"; export let width = "fit-content"; export let options: string[] = []; + export let value: string = ""; - let inputValue = ""; - let selectedValue = ""; + let inputValue = value; let isOpen = false; let dropdownRef: HTMLDivElement | null = null; let currentFocusIndex = 0; + const dispatch = createEventDispatcher(); + onMount(() => { document.addEventListener("click", handleClickOutside); @@ -30,10 +32,11 @@ currentFocusIndex = 0; } - function handleOptionClick(e: Event, option: string) { + function handleOptionClick(option: string) { inputValue = option; - selectedValue = option; + value = option; isOpen = false; + dispatch("select", { value: option }); } function handleInputChange(e: Event) { @@ -70,7 +73,7 @@ if (isOpen) { const option = filteredOptions[currentFocusIndex]; if (option) { - handleOptionClick(e, option); + handleOptionClick(option); } } else { openDropdown(); @@ -100,7 +103,7 @@
handleOptionClick(e, option)} - on:keydown={(e) => {}} + on:click={() => handleOptionClick(option)} + on:keydown={() => {}} > {option}
From ce74d76e2f6e95f9117b1c4c592c17b77798474b Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:24:51 -0600 Subject: [PATCH 4/6] fix: add focus to configure button --- src/svelte/app/index.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/svelte/app/index.svelte b/src/svelte/app/index.svelte index 999c333..962b8d0 100644 --- a/src/svelte/app/index.svelte +++ b/src/svelte/app/index.svelte @@ -1011,4 +1011,8 @@ box-shadow: none; padding: 0; } + + .vault-explorer-button:focus-visible { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); + } From 50b20abc60c5fe45c66f53d910090cf0af3e09fe Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:28:50 -0600 Subject: [PATCH 5/6] fix: when a key is pressed, open the dropdown --- src/svelte/shared/components/search-select.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte index ba23155..7d7df29 100644 --- a/src/svelte/shared/components/search-select.svelte +++ b/src/svelte/shared/components/search-select.svelte @@ -78,6 +78,10 @@ } else { openDropdown(); } + } else { + if (!isOpen) { + openDropdown(); + } } } From 9135e915c865ae19c82fea202f9091c8e1a2e772 Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:34:35 -0600 Subject: [PATCH 6/6] chore: commit new data.json --- .../plugins/vault-explorer/data.json | 193 +++++++++--------- 1 file changed, 94 insertions(+), 99 deletions(-) diff --git a/test-vault/.obsidian/plugins/vault-explorer/data.json b/test-vault/.obsidian/plugins/vault-explorer/data.json index d48786c..3379dcf 100644 --- a/test-vault/.obsidian/plugins/vault-explorer/data.json +++ b/test-vault/.obsidian/plugins/vault-explorer/data.json @@ -1,100 +1,95 @@ { - "properties": { - "favorite": "favorite", - "url": "url", - "custom1": "category", - "custom2": "color", - "custom3": "size", - "creationDate": "creation", - "modifiedDate": "modification", - "createdDate": "creation", - "image": "image", - "coverImageFit": "image-fit" - }, - "filters": { - "search": { - "isEnabled": true, - "value": "" - }, - "sort": { - "isEnabled": true, - "value": "modified-desc" - }, - "custom": { - "isEnabled": true, - "selectedGroupId": "", - "groups": [] - }, - "properties": { - "groups": [] - } - }, - "views": { - "dashboard": { - "isEnabled": false - }, - "grid": { - "isEnabled": true, - "loadSocialMediaImage": true, - "coverImageSources": [ - { - "type": "image-property", - "isEnabled": true - }, - { - "type": "url-property", - "isEnabled": true - }, - { - "type": "frontmatter", - "isEnabled": true - }, - { - "type": "body", - "isEnabled": true - } - ], - "coverImageFit": "cover" - }, - "list": { - "isEnabled": true, - "showTags": true - }, - "table": { - "isEnabled": true - }, - "feed": { - "isEnabled": true, - "renderNewLineCharacters": false, - "collapseContent": true, - "removeLevel1Headers": true, - "collapseStyle": "no-new-lines", - "lineClampLarge": 5, - "lineClampMedium": 3, - "lineClampSmall": 2, - "removeH1": true - }, - "recommended": { - "isEnabled": false - }, - "related": { - "isEnabled": false - } - }, - "currentView": "grid", - "titleWrapping": "normal", - "enableClockUpdates": true, - "enableFileIcons": true, - "loadBodyTags": true, - "shouldCollapseFilters": false, - "pageSize": 25, - "viewOrder": [ - "grid", - "list", - "table", - "feed" - ], - "configDir": ".vaultexplorer", - "pluginVersion": "1.42.0", - "logLevel": "trace" -} \ No newline at end of file + "properties": { + "favorite": "favorite", + "url": "url", + "custom1": "category", + "custom2": "color", + "custom3": "size", + "creationDate": "creation", + "modifiedDate": "modification", + "createdDate": "creation", + "image": "image", + "coverImageFit": "image-fit" + }, + "filters": { + "search": { + "isEnabled": true, + "value": "" + }, + "sort": { + "isEnabled": true, + "value": "modified-desc" + }, + "custom": { + "isEnabled": true, + "selectedGroupId": "", + "groups": [] + }, + "properties": { + "groups": [] + } + }, + "views": { + "dashboard": { + "isEnabled": false + }, + "grid": { + "isEnabled": true, + "loadSocialMediaImage": true, + "coverImageSources": [ + { + "type": "image-property", + "isEnabled": true + }, + { + "type": "url-property", + "isEnabled": true + }, + { + "type": "frontmatter", + "isEnabled": true + }, + { + "type": "body", + "isEnabled": true + } + ], + "coverImageFit": "cover" + }, + "list": { + "isEnabled": true, + "showTags": true + }, + "table": { + "isEnabled": true + }, + "feed": { + "isEnabled": true, + "renderNewLineCharacters": false, + "collapseContent": true, + "removeLevel1Headers": true, + "collapseStyle": "no-new-lines", + "lineClampLarge": 5, + "lineClampMedium": 3, + "lineClampSmall": 2, + "removeH1": true + }, + "recommended": { + "isEnabled": false + }, + "related": { + "isEnabled": false + } + }, + "currentView": "grid", + "titleWrapping": "normal", + "enableClockUpdates": true, + "enableFileIcons": true, + "loadBodyTags": true, + "shouldCollapseFilters": false, + "pageSize": 25, + "viewOrder": ["grid", "list", "table", "feed"], + "configDir": ".vaultexplorer", + "pluginVersion": "1.44.2", + "logLevel": "trace" +}