Skip to content

Commit 8b33bd0

Browse files
decaf-devdecaf-dev
authored
Merge pull request #333 from decaf-dev/dev
1.43.0
2 parents 8536a52 + dc045cf commit 8b33bd0

File tree

5 files changed

+152
-9
lines changed

5 files changed

+152
-9
lines changed

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"id": "vault-explorer",
33
"name": "Vault Explorer",
4-
"version": "1.42.1",
4+
"version": "1.43.0",
55
"minAppVersion": "1.4.13",
66
"description": "Explore your vault in visual format",
77
"author": "DecafDev",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "obsidian-vault-explorer",
3-
"version": "1.42.1",
3+
"version": "1.43.0",
44
"description": "Explore your vault in visual format",
55
"main": "main.js",
66
"scripts": {

‎src/svelte/custom-filter-app/components/folder-filter.svelte‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import VaultExplorerPlugin from "src/main";
88
import EventManager from "src/event/event-manager";
99
import { PluginEvent } from "src/event/types";
10+
import SearchSelection from "src/svelte/shared/components/search-selection.svelte";
1011
1112
export let index: number;
1213
export let id: string;
@@ -134,12 +135,7 @@
134135
on:ruleToggle
135136
>
136137
<svelte:fragment slot="after-condition">
137-
<select {value} on:change={handleValueChange}>
138-
<option value="">select a folder</option>
139-
{#each folders as folder}
140-
<option value={folder}>{folder}</option>
141-
{/each}
142-
</select>
138+
<SearchSelection options={folders} />
143139
<input
144140
aria-label="Include subfolders"
145141
type="checkbox"

‎src/svelte/shared/components/search-selection.svelte‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<script lang="ts">
2+
import { onMount } from "svelte";
3+
import Icon from "./icon.svelte";
4+
5+
export let width = "fit-content";
6+
export let options: string[] = [];
7+
8+
let inputValue = "";
9+
let selectedValue = "";
10+
let showDropdown = false;
11+
12+
onMount(() => {
13+
document.addEventListener("click", handleClickOutside);
14+
15+
return () => {
16+
document.removeEventListener("click", handleClickOutside);
17+
};
18+
});
19+
20+
function handleOptionClick(e: Event, option: string) {
21+
e.stopPropagation();
22+
inputValue = option;
23+
selectedValue = option;
24+
showDropdown = false;
25+
}
26+
27+
function handleInputChange(e: Event) {
28+
const value = (e.target as HTMLInputElement).value;
29+
inputValue = value;
30+
}
31+
32+
function handleInputClick() {
33+
showDropdown = true;
34+
inputValue = "";
35+
}
36+
37+
function handleClickOutside(e: Event) {
38+
const targetEl = e.target as HTMLElement;
39+
const isInsideClick = targetEl.closest(
40+
".vault-explorer-search-selection",
41+
);
42+
if (!isInsideClick && showDropdown) {
43+
showDropdown = false;
44+
inputValue = "";
45+
}
46+
}
47+
48+
function fuzzySearch(input: string) {
49+
return options.filter((option) =>
50+
option.toLowerCase().includes(input.toLowerCase()),
51+
);
52+
}
53+
54+
$: filteredOptions = fuzzySearch(inputValue);
55+
</script>
56+
57+
<div class="vault-explorer-search-selection" style={`width: ${width}`}>
58+
<input
59+
bind:value={inputValue}
60+
placeholder={selectedValue || "Search..."}
61+
type="text"
62+
on:input={handleInputChange}
63+
on:click={handleInputClick}
64+
/>
65+
<span class="vault-explorer-dropdown-icon"
66+
><Icon iconId="chevron-down" size="xs" /></span
67+
>
68+
69+
{#if showDropdown}
70+
<div class="vault-explorer-dropdown">
71+
{#each filteredOptions as option}
72+
<div
73+
tabindex="0"
74+
aria-selected={selectedValue === option}
75+
role="option"
76+
class="vault-explorer-dropdown-item"
77+
on:click={(e) => handleOptionClick(e, option)}
78+
on:keydown={(e) => {
79+
if (e.key === "Enter") {
80+
handleOptionClick(e, option);
81+
}
82+
}}
83+
>
84+
{option}
85+
</div>
86+
{/each}
87+
{#if filteredOptions.length === 0}
88+
<div
89+
class="vault-explorer-dropdown-item vault-explorer-dropdown-item--empty"
90+
>
91+
No results found
92+
</div>
93+
{/if}
94+
</div>
95+
{/if}
96+
</div>
97+
98+
<style>
99+
.vault-explorer-search-selection {
100+
position: relative;
101+
}
102+
103+
.vault-explorer-search-selection input {
104+
cursor: default;
105+
max-width: 300px;
106+
}
107+
108+
.vault-explorer-dropdown {
109+
position: absolute;
110+
background-color: var(--dropdown-background);
111+
box-shadow: var(--input-shadow);
112+
width: 100%;
113+
max-height: 175px;
114+
overflow-y: auto;
115+
z-index: 999;
116+
color: var(--text-normal);
117+
font-size: var(--font-ui-small);
118+
line-height: var(--line-height-tight);
119+
font-weight: var(--input-font-weight);
120+
border-radius: var(--input-radius);
121+
}
122+
123+
.vault-explorer-dropdown-icon {
124+
position: absolute;
125+
top: 50%;
126+
right: 10px;
127+
transform: translateY(-50%);
128+
pointer-events: none;
129+
}
130+
131+
.vault-explorer-dropdown-item {
132+
padding: 6px 8px;
133+
}
134+
135+
.vault-explorer-dropdown-item:hover {
136+
background-color: var(--background-modifier-hover);
137+
}
138+
139+
.vault-explorer-dropdown-item--empty:hover {
140+
background-color: transparent;
141+
}
142+
143+
.vault-explorer-dropdown-item:focus-visible {
144+
box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
145+
}
146+
</style>

‎versions.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,5 +138,6 @@
138138
"1.41.0": "1.4.13",
139139
"1.41.1": "1.4.13",
140140
"1.42.0": "1.4.13",
141-
"1.42.1": "1.4.13"
141+
"1.42.1": "1.4.13",
142+
"1.43.0": "1.4.13"
142143
}

0 commit comments

Comments
 (0)