mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

control panel ux

Browse source
This commit is contained in:
ThePetrovich 2025-07-04 00:40:53 +08:00
parent a1d80eb984
commit 7d01fce094
8 changed files with 219 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/lib/components/SelectSearchable.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import { onMount } from 'svelte';
import { on } from 'svelte/events';
interface Props extends HTMLAttributes<HTMLDivElement> {
options?: { value: any; label:string }[];
@ -40,6 +42,11 @@
options.find(opt => opt.value === selected)?.label || ''
);
onMount(() => {
// Update dropdown position on mount
updateDropdownPosition();
});
function updateDropdownPosition() {
if (!selectElement) return;
const rect = selectElement.getBoundingClientRect();
@ -106,7 +113,7 @@
<span class:text-muted={!selected}>{selectedLabel || placeholder}</span>
{#if isOpen}
<div class="dropdown-menu show" bind:this={dropdownElement} style={dropdownStyle}>
<div class="pt-0 dropdown-menu show" bind:this={dropdownElement} style={dropdownStyle}>
<div class="p-2">
<input
type="text"