├── .gitignore
├── README.md
├── example
├── .gitignore
├── package-lock.json
├── package.json
├── public
│ ├── favicon.png
│ ├── global.css
│ ├── index.html
│ └── tailwind.css
├── rollup.config.js
└── src
│ ├── App.svelte
│ └── main.js
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── Listbox.svelte
├── ListboxButton.svelte
├── ListboxLabel.svelte
├── ListboxList.svelte
├── ListboxOption.svelte
├── ListboxState.js
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist/
4 | /temp/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## svelte-listbox
2 |
3 | A svelte implementation of https://github.com/tailwindui/vue
4 |
5 | # WIP
6 |
7 |
8 | ## example use:
9 |
10 | ```html
11 |
30 |
31 |
36 |
37 |
38 |
44 |
47 |
48 | {selection !== null ? selection.name : ''}
49 |
59 |
60 |
61 | {#if isOpen}
62 |
65 | {#each values as item}
66 |
71 |
72 | 
76 | {item.name}
77 |
78 |
79 | {#if selected}
80 |
81 |
91 |
92 | {/if}
93 |
94 | {/each}
95 |
96 | {/if}
97 |
98 |
64 |
70 |
71 | Pick a friend
72 |
73 |
76 |
77 | {selection !== null ? selection.name : ''}
78 |
88 |
89 |
90 |
91 |
94 | {#each options as option}
95 |
100 |
101 | 
105 | {option.name}
106 |
107 |
108 | {#if selected}
109 |
110 |
120 |
121 | {/if}
122 |
123 | {/each}
124 |
125 |
126 |
127 |
27 |
31 |
32 |
--------------------------------------------------------------------------------
/src/ListboxButton.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
21 |
--------------------------------------------------------------------------------
/src/ListboxLabel.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/ListboxList.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/ListboxOption.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | select(value)}
11 | on:mousemove={()=>focus(value)}
12 | role='option'
13 | aria-selected={selected}
14 | {id}
15 | >
16 |
--------------------------------------------------------------------------------
/src/ListboxState.js:
--------------------------------------------------------------------------------
1 | import { writable, get } from 'svelte/store';
2 | import { tick } from 'svelte';
3 |
4 | export const isOpen = writable(false);
5 | export const selectedValue = writable(undefined); // use undefined so value can be passed in listbox
6 | export const activeValue = writable(false);
7 | export const items = writable([]);
8 | export const elList = writable(null);
9 | export const labelId = writable(null);
10 |
11 | export function toggleOpen() {
12 | isOpen.set(!get(isOpen));
13 | }
14 |
15 | export function close() {
16 | isOpen.set(false);
17 | }
18 |
19 | export function open() {
20 | isOpen.set(false);
21 | }
22 |
23 | export function select(val) {
24 | selectedValue.set(val);
25 | close();
26 | }
27 |
28 | export async function focus(val) {
29 | activeValue.set(val);
30 | if (val !== null) {
31 | await tick();
32 | if(get(elList) && get(elList).children[get(items).indexOf(val)]){
33 | get(elList).children[get(items).indexOf(val)].scrollIntoView({ block: 'nearest' });
34 | }
35 | }
36 | }
37 |
38 | export function handleKeydown(e) {
39 | if(!get(isOpen)) return;
40 | let values = get(items)
41 | let focusedIndex = values.indexOf(get(activeValue))
42 |
43 | let indexToFocus;
44 | switch (e.key) {
45 | case 'Esc':
46 | case 'Escape':
47 | e.preventDefault()
48 | close()
49 | break
50 | case 'Tab':
51 | e.preventDefault()
52 | break
53 | case 'Up':
54 | case 'ArrowUp':
55 | e.preventDefault()
56 | indexToFocus = focusedIndex - 1 < 0 ? values.length - 1 : focusedIndex - 1
57 | focus(values[indexToFocus])
58 | break
59 | case 'Home':
60 | e.preventDefault()
61 | indexToFocus = 0
62 | focus(values[indexToFocus])
63 | break
64 | case 'End':
65 | e.preventDefault()
66 | indexToFocus = values.length - 1
67 | focus(values[indexToFocus])
68 | break
69 | case 'Down':
70 | case 'ArrowDown':
71 | e.preventDefault()
72 | indexToFocus = (focusedIndex + 1) % values.length
73 | focus(values[indexToFocus])
74 | break
75 | case 'Enter':
76 | case ' ':
77 | case 'Space':
78 | e.preventDefault()
79 | select(get(activeValue))
80 | break
81 | default:
82 | e.preventDefault()
83 | }
84 | return
85 | }
86 |
87 | let id = 0;
88 |
89 | export function generateId() {
90 | return `listbox-id-${id++}`
91 | }
92 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Listbox } from "./Listbox.svelte";
2 | export { default as ListboxButton } from "./ListboxButton.svelte";
3 | export { default as ListboxLabel } from "./ListboxLabel.svelte";
4 | export { default as ListboxList } from "./ListboxList.svelte";
5 | export { default as ListboxOption } from "./ListboxOption.svelte";
6 |
--------------------------------------------------------------------------------