wip
This commit is contained in:
parent
0cb1193269
commit
2c91f46375
GPG Key ID:
3BB9ADD52DCA4314
@ -11,12 +11,242 @@
|
|||||||
import VirtualSelect from "./VirtualSelect.svelte";
|
import VirtualSelect from "./VirtualSelect.svelte";
|
||||||
|
|
||||||
//
|
//
|
||||||
let options = ["Bulbasaur","Ivysaur","Venusaur","Charmander","Charmeleon","Charizard","Squirtle","Wartortle","Blastoise","Caterpie","Metapod","Butterfree","Weedle","Kakuna","Beedrill","Pidgey","Pidgeotto","Pidgeot","Rattata","Raticate","Spearow","Fearow","Ekans","Arbok","Pikachu","Raichu","Sandshrew","Sandslash","Nidoran♀","Nidorina","Nidoqueen","Nidoran♂","Nidorino","Nidoking","Clefairy","Clefable","Vulpix","Ninetales","Jigglypuff","Wigglytuff","Zubat","Golbat","Oddish","Gloom","Vileplume","Paras","Parasect","Venonat","Venomoth","Diglett","Dugtrio","Meowth","Persian","Psyduck","Golduck","Mankey","Primeape","Growlithe","Arcanine","Poliwag","Poliwhirl","Poliwrath","Abra","Kadabra","Alakazam","Machop","Machoke","Machamp","Bellsprout","Weepinbell","Victreebel","Tentacool","Tentacruel","Geodude","Graveler","Golem","Ponyta","Rapidash","Slowpoke","Slowbro","Magnemite","Magneton","Farfetch'd","Doduo","Dodrio","Seel","Dewgong","Grimer","Muk","Shellder","Cloyster","Gastly","Haunter","Gengar","Onix","Drowzee","Hypno","Krabby","Kingler","Voltorb","Electrode","Exeggcute","Exeggutor","Cubone","Marowak","Hitmonlee","Hitmonchan","Lickitung","Koffing","Weezing","Rhyhorn","Rhydon","Chansey","Tangela","Kangaskhan","Horsea","Seadra","Goldeen","Seaking","Staryu","Starmie","Mr. Mime","Scyther","Jynx","Electabuzz","Magmar","Pinsir","Tauros","Magikarp","Gyarados","Lapras","Ditto","Eevee","Vaporeon","Jolteon","Flareon","Porygon","Omanyte","Omastar","Kabuto","Kabutops","Aerodactyl","Snorlax","Articuno","Zapdos","Moltres","Dratini","Dragonair","Dragonite","Mewtwo","Mew","Chikorita","Bayleef","Meganium","Cyndaquil","Quilava","Typhlosion","Totodile","Croconaw","Feraligatr","Sentret","Furret","Hoothoot","Noctowl","Ledyba","Ledian","Spinarak","Ariados","Crobat","Chinchou","Lanturn","Pichu","Cleffa","Igglybuff","Togepi","Togetic","Natu","Xatu","Mareep","Flaaffy","Ampharos","Bellossom","Marill","Azumarill","Sudowoodo","Politoed","Hoppip","Skiploom","Jumpluff","Aipom","Sunkern","Sunflora","Yanma","Wooper","Quagsire","Espeon","Umbreon","Murkrow","Slowking","Misdreavus","Unown","Wobbuffet","Girafarig","Pineco","Forretress","Dunsparce","Gligar","Steelix","Snubbull","Granbull","Qwilfish","Scizor","Shuckle","Heracross","Sneasel","Teddiursa","Ursaring","Slugma","Magcargo","Swinub","Piloswine","Corsola","Remoraid","Octillery","Delibird","Mantine","Skarmory","Houndour","Houndoom"];
|
let options = [
|
||||||
|
"Bulbasaur",
|
||||||
|
"Ivysaur",
|
||||||
|
"Venusaur",
|
||||||
|
"Charmander",
|
||||||
|
"Charmeleon",
|
||||||
|
"Charizard",
|
||||||
|
"Squirtle",
|
||||||
|
"Wartortle",
|
||||||
|
"Blastoise",
|
||||||
|
"Caterpie",
|
||||||
|
"Metapod",
|
||||||
|
"Butterfree",
|
||||||
|
"Weedle",
|
||||||
|
"Kakuna",
|
||||||
|
"Beedrill",
|
||||||
|
"Pidgey",
|
||||||
|
"Pidgeotto",
|
||||||
|
"Pidgeot",
|
||||||
|
"Rattata",
|
||||||
|
"Raticate",
|
||||||
|
"Spearow",
|
||||||
|
"Fearow",
|
||||||
|
"Ekans",
|
||||||
|
"Arbok",
|
||||||
|
"Pikachu",
|
||||||
|
"Raichu",
|
||||||
|
"Sandshrew",
|
||||||
|
"Sandslash",
|
||||||
|
"Nidoran♀",
|
||||||
|
"Nidorina",
|
||||||
|
"Nidoqueen",
|
||||||
|
"Nidoran♂",
|
||||||
|
"Nidorino",
|
||||||
|
"Nidoking",
|
||||||
|
"Clefairy",
|
||||||
|
"Clefable",
|
||||||
|
"Vulpix",
|
||||||
|
"Ninetales",
|
||||||
|
"Jigglypuff",
|
||||||
|
"Wigglytuff",
|
||||||
|
"Zubat",
|
||||||
|
"Golbat",
|
||||||
|
"Oddish",
|
||||||
|
"Gloom",
|
||||||
|
"Vileplume",
|
||||||
|
"Paras",
|
||||||
|
"Parasect",
|
||||||
|
"Venonat",
|
||||||
|
"Venomoth",
|
||||||
|
"Diglett",
|
||||||
|
"Dugtrio",
|
||||||
|
"Meowth",
|
||||||
|
"Persian",
|
||||||
|
"Psyduck",
|
||||||
|
"Golduck",
|
||||||
|
"Mankey",
|
||||||
|
"Primeape",
|
||||||
|
"Growlithe",
|
||||||
|
"Arcanine",
|
||||||
|
"Poliwag",
|
||||||
|
"Poliwhirl",
|
||||||
|
"Poliwrath",
|
||||||
|
"Abra",
|
||||||
|
"Kadabra",
|
||||||
|
"Alakazam",
|
||||||
|
"Machop",
|
||||||
|
"Machoke",
|
||||||
|
"Machamp",
|
||||||
|
"Bellsprout",
|
||||||
|
"Weepinbell",
|
||||||
|
"Victreebel",
|
||||||
|
"Tentacool",
|
||||||
|
"Tentacruel",
|
||||||
|
"Geodude",
|
||||||
|
"Graveler",
|
||||||
|
"Golem",
|
||||||
|
"Ponyta",
|
||||||
|
"Rapidash",
|
||||||
|
"Slowpoke",
|
||||||
|
"Slowbro",
|
||||||
|
"Magnemite",
|
||||||
|
"Magneton",
|
||||||
|
"Farfetch'd",
|
||||||
|
"Doduo",
|
||||||
|
"Dodrio",
|
||||||
|
"Seel",
|
||||||
|
"Dewgong",
|
||||||
|
"Grimer",
|
||||||
|
"Muk",
|
||||||
|
"Shellder",
|
||||||
|
"Cloyster",
|
||||||
|
"Gastly",
|
||||||
|
"Haunter",
|
||||||
|
"Gengar",
|
||||||
|
"Onix",
|
||||||
|
"Drowzee",
|
||||||
|
"Hypno",
|
||||||
|
"Krabby",
|
||||||
|
"Kingler",
|
||||||
|
"Voltorb",
|
||||||
|
"Electrode",
|
||||||
|
"Exeggcute",
|
||||||
|
"Exeggutor",
|
||||||
|
"Cubone",
|
||||||
|
"Marowak",
|
||||||
|
"Hitmonlee",
|
||||||
|
"Hitmonchan",
|
||||||
|
"Lickitung",
|
||||||
|
"Koffing",
|
||||||
|
"Weezing",
|
||||||
|
"Rhyhorn",
|
||||||
|
"Rhydon",
|
||||||
|
"Chansey",
|
||||||
|
"Tangela",
|
||||||
|
"Kangaskhan",
|
||||||
|
"Horsea",
|
||||||
|
"Seadra",
|
||||||
|
"Goldeen",
|
||||||
|
"Seaking",
|
||||||
|
"Staryu",
|
||||||
|
"Starmie",
|
||||||
|
"Mr. Mime",
|
||||||
|
"Scyther",
|
||||||
|
"Jynx",
|
||||||
|
"Electabuzz",
|
||||||
|
"Magmar",
|
||||||
|
"Pinsir",
|
||||||
|
"Tauros",
|
||||||
|
"Magikarp",
|
||||||
|
"Gyarados",
|
||||||
|
"Lapras",
|
||||||
|
"Ditto",
|
||||||
|
"Eevee",
|
||||||
|
"Vaporeon",
|
||||||
|
"Jolteon",
|
||||||
|
"Flareon",
|
||||||
|
"Porygon",
|
||||||
|
"Omanyte",
|
||||||
|
"Omastar",
|
||||||
|
"Kabuto",
|
||||||
|
"Kabutops",
|
||||||
|
"Aerodactyl",
|
||||||
|
"Snorlax",
|
||||||
|
"Articuno",
|
||||||
|
"Zapdos",
|
||||||
|
"Moltres",
|
||||||
|
"Dratini",
|
||||||
|
"Dragonair",
|
||||||
|
"Dragonite",
|
||||||
|
"Mewtwo",
|
||||||
|
"Mew",
|
||||||
|
"Chikorita",
|
||||||
|
"Bayleef",
|
||||||
|
"Meganium",
|
||||||
|
"Cyndaquil",
|
||||||
|
"Quilava",
|
||||||
|
"Typhlosion",
|
||||||
|
"Totodile",
|
||||||
|
"Croconaw",
|
||||||
|
"Feraligatr",
|
||||||
|
"Sentret",
|
||||||
|
"Furret",
|
||||||
|
"Hoothoot",
|
||||||
|
"Noctowl",
|
||||||
|
"Ledyba",
|
||||||
|
"Ledian",
|
||||||
|
"Spinarak",
|
||||||
|
"Ariados",
|
||||||
|
"Crobat",
|
||||||
|
"Chinchou",
|
||||||
|
"Lanturn",
|
||||||
|
"Pichu",
|
||||||
|
"Cleffa",
|
||||||
|
"Igglybuff",
|
||||||
|
"Togepi",
|
||||||
|
"Togetic",
|
||||||
|
"Natu",
|
||||||
|
"Xatu",
|
||||||
|
"Mareep",
|
||||||
|
"Flaaffy",
|
||||||
|
"Ampharos",
|
||||||
|
"Bellossom",
|
||||||
|
"Marill",
|
||||||
|
"Azumarill",
|
||||||
|
"Sudowoodo",
|
||||||
|
"Politoed",
|
||||||
|
"Hoppip",
|
||||||
|
"Skiploom",
|
||||||
|
"Jumpluff",
|
||||||
|
"Aipom",
|
||||||
|
"Sunkern",
|
||||||
|
"Sunflora",
|
||||||
|
"Yanma",
|
||||||
|
"Wooper",
|
||||||
|
"Quagsire",
|
||||||
|
"Espeon",
|
||||||
|
"Umbreon",
|
||||||
|
"Murkrow",
|
||||||
|
"Slowking",
|
||||||
|
"Misdreavus",
|
||||||
|
"Unown",
|
||||||
|
"Wobbuffet",
|
||||||
|
"Girafarig",
|
||||||
|
"Pineco",
|
||||||
|
"Forretress",
|
||||||
|
"Dunsparce",
|
||||||
|
"Gligar",
|
||||||
|
"Steelix",
|
||||||
|
"Snubbull",
|
||||||
|
"Granbull",
|
||||||
|
"Qwilfish",
|
||||||
|
"Scizor",
|
||||||
|
"Shuckle",
|
||||||
|
"Heracross",
|
||||||
|
"Sneasel",
|
||||||
|
"Teddiursa",
|
||||||
|
"Ursaring",
|
||||||
|
"Slugma",
|
||||||
|
"Magcargo",
|
||||||
|
"Swinub",
|
||||||
|
"Piloswine",
|
||||||
|
"Corsola",
|
||||||
|
"Remoraid",
|
||||||
|
"Octillery",
|
||||||
|
"Delibird",
|
||||||
|
"Mantine",
|
||||||
|
"Skarmory",
|
||||||
|
"Houndour",
|
||||||
|
"Houndoom",
|
||||||
|
];
|
||||||
let selectedOption;
|
let selectedOption;
|
||||||
|
|
||||||
function handleSelect(event) {
|
function handleSelect(event) {
|
||||||
selectedOption = event.detail;
|
selectedOption = event.detail;
|
||||||
console.log('Selected:', selectedOption);
|
console.log("Selected:", selectedOption);
|
||||||
}
|
}
|
||||||
//
|
//
|
||||||
|
|
||||||
@ -119,6 +349,10 @@
|
|||||||
<!-- -->
|
<!-- -->
|
||||||
<VirtualSelect
|
<VirtualSelect
|
||||||
{options}
|
{options}
|
||||||
|
filterFn={(option, searchTerm) => {
|
||||||
|
// Example: Match if option starts with search term (case-insensitive)
|
||||||
|
return option.toLowerCase().startsWith(searchTerm.toLowerCase());
|
||||||
|
}}
|
||||||
bind:selected={selectedOption}
|
bind:selected={selectedOption}
|
||||||
placeholder="Search fruits..."
|
placeholder="Search fruits..."
|
||||||
on:select={handleSelect}
|
on:select={handleSelect}
|
||||||
|
|||||||
@ -5,6 +5,7 @@
|
|||||||
export let options = [];
|
export let options = [];
|
||||||
export let selected = null;
|
export let selected = null;
|
||||||
export let placeholder = "Search options...";
|
export let placeholder = "Search options...";
|
||||||
|
export let filterFn = null; // Custom filter function
|
||||||
|
|
||||||
// Internal state
|
// Internal state
|
||||||
let searchTerm = "";
|
let searchTerm = "";
|
||||||
@ -22,7 +23,9 @@
|
|||||||
// Filter options based on search term
|
// Filter options based on search term
|
||||||
$: {
|
$: {
|
||||||
filteredOptions = searchTerm
|
filteredOptions = searchTerm
|
||||||
? options.filter((option) =>
|
? filterFn
|
||||||
|
? options.filter((option) => filterFn(option, searchTerm))
|
||||||
|
: options.filter((option) =>
|
||||||
option.toLowerCase().includes(searchTerm.toLowerCase())
|
option.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
)
|
)
|
||||||
: options;
|
: options;
|
||||||
@ -112,6 +115,10 @@
|
|||||||
} else if (event.key === "Enter" && index >= 0) {
|
} else if (event.key === "Enter" && index >= 0) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
selectOption(filteredOptions[index]);
|
selectOption(filteredOptions[index]);
|
||||||
|
} else if (event.key === "Escape") {
|
||||||
|
event.preventDefault();
|
||||||
|
isOpen = false;
|
||||||
|
focusedIndex = -1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -155,7 +162,9 @@
|
|||||||
type="text"
|
type="text"
|
||||||
bind:value={searchTerm}
|
bind:value={searchTerm}
|
||||||
placeholder={selected || placeholder}
|
placeholder={selected || placeholder}
|
||||||
class="w-full bg-transparent focus:outline-none text-gray-700"
|
class="w-full bg-transparent focus:outline-none {selected
|
||||||
|
? 'text-black'
|
||||||
|
: 'text-gray-700'}"
|
||||||
on:focus={handleInputFocus}
|
on:focus={handleInputFocus}
|
||||||
on:keydown={(e) => {
|
on:keydown={(e) => {
|
||||||
if (e.key === "Enter" && !isOpen) {
|
if (e.key === "Enter" && !isOpen) {
|
||||||
@ -174,7 +183,13 @@
|
|||||||
on:click={toggleDropdown}
|
on:click={toggleDropdown}
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
on:keydown={(e) => e.key === "Enter" && toggleDropdown()}
|
on:keydown={(e) => {
|
||||||
|
if (e.key === "Enter") toggleDropdown();
|
||||||
|
else if (e.key === "Escape") {
|
||||||
|
isOpen = false;
|
||||||
|
focusedIndex = -1;
|
||||||
|
}
|
||||||
|
}}
|
||||||
aria-label="Toggle dropdown"
|
aria-label="Toggle dropdown"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user