dropdown
mellbacon committed
Dec 16, 2022 at 22:50 UTC
dbba6e5dc87fbf0e87386735236c0165396974c6
2 files changed
+9
-8
src/components/Input/Dropdown.svelte
+9
-3
@@ -1,6 +1,7 @@
1
<script lang="ts">
2
import { ChevronDown } from "carbon-icons-svelte";
3
- import { afterUpdate } from "svelte";
3
+ import { afterUpdate, createEventDispatcher } from "svelte";
4
+ const dispatch = createEventDispatcher();
5
6
export let label: string;
7
export let items = [];
@@ -9,6 +10,11 @@
10
let button;
11
let list;
12
13
+ function handleSelect(name) {
14
+ selected = name;
15
+ dispatch("select", {selection: name});
16
+ }
17
+
18
afterUpdate(() => {
19
if (open && list) {
20
const { _ , width } = button.getBoundingClientRect();
@@ -37,7 +43,7 @@
43
{#each items as item}
44
<!-- svelte-ignore a11y-click-events-have-key-events -->
45
<div id={item.id} class="item" on:click={() => {
40
- selected = item.name;
46
+ handleSelect(item.name);
47
open = false;
48
}}>{item.name}</div>
49
{/each}
@@ -88,6 +94,7 @@
94
background-color: #1f1f1f;
95
max-height: 15rem;
96
overflow-y: overlay;
97
+ min-width: 20rem;
98
&::-webkit-scrollbar {
99
width: 12px;
100
}
@@ -97,7 +104,6 @@
104
.item {
105
display: flex;
106
align-items: center;
100
- justify-content: center;
107
min-height: 2rem;
108
cursor: pointer;
109
padding: 0 20px;
src/components/Settings/SettingsTree.svelte
-5
@@ -5,11 +5,6 @@
5
{id: 1, path: "file1", name: "Appearance"},
6
{id: 2, path: "file1", name: "Shortcuts"},
7
]},
8
- {id: 3, path: "file1", name: "Editor", children: [
9
- {id: 4, path: "file1", name: "Appearance"},
10
- {id: 5, path: "file1", name: "Files"},
11
- {id: 6, path: "file1", name: "Code"},
12
- ]},
8
];
9
</script>
10
<script lang="ts" context="module">