Skip to content

Commit e3e2a77

Browse files
rob-balfrerob-balfre
committed
focus and blur updates, bump deps and code clean up
1 parent bba1bb4 commit e3e2a77

13 files changed

+2412
-3239
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ node_modules
44
.nova
55
/dist/
66
/test/public/index.js
7-
/test/public/bundle.css
7+
/test/public/index.css
88
/spec/page/public/build
99
/test-results
1010
/build

‎.prettierrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"useTabs": false,
33
"singleQuote": true,
44
"tabWidth": 4,
5+
"printWidth": 200,
6+
"bracketSameLine": true,
57
"overrides": [
68
{
79
"files": ["*.svelte"],

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
## unreleased
44

5+
* selectedValue removed
6+
* borrowed some code from svelte-materialify for the clickOutside function
57
* MultiSelection -> Multi
68
* added postcss to example, tests
79
* tailwind css option

‎package-lock.json

Lines changed: 296 additions & 301 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,28 @@
1313
"package": "svelte-kit package"
1414
},
1515
"devDependencies": {
16-
"@sveltejs/kit": "1.0.0-next.180",
17-
"autoprefixer": "^10.3.7",
16+
"@sveltejs/kit": "1.0.0-next.195",
17+
"autoprefixer": "^10.4.0",
1818
"cross-env": "^7.0.3",
1919
"find-in-files": "^0.5.0",
2020
"postcss": "^8.3.11",
21-
"postcss-cli": "^9.0.1",
21+
"postcss-cli": "^9.0.2",
2222
"postcss-import": "^14.0.2",
23-
"prettier": "~2.2.1",
24-
"prettier-plugin-svelte": "^2.2.0",
25-
"rollup": "^2.41.2",
23+
"prettier": "~2.4.1",
24+
"prettier-plugin-svelte": "^2.4.0",
25+
"rollup": "^2.59.0",
2626
"rollup-plugin-cleaner": "^1.0.0",
2727
"rollup-plugin-css-only": "^3.1.0",
2828
"rollup-plugin-node-resolve": "^5.2.0",
2929
"rollup-plugin-postcss": "^4.0.1",
3030
"rollup-plugin-svelte": "^7.1.0",
3131
"sirv-cli": "^1.0.14",
32-
"svelte": "^3.43.0",
32+
"svelte": "^3.44.1",
3333
"svelte-preprocess": "^4.9.8",
34-
"svelte2tsx": "^0.4.5",
35-
"tailwindcss": "^2.2.16",
36-
"tape-modern": "^1.1.1",
37-
"typescript": "^4.4.2"
34+
"svelte2tsx": "^0.4.8",
35+
"tailwindcss": "^2.2.19",
36+
"tape-modern": "^1.1.2",
37+
"typescript": "^4.4.4"
3838
},
3939
"author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
4040
"license": "ISC",

‎src/lib/List.svelte

Lines changed: 25 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import { beforeUpdate, createEventDispatcher, onMount, tick } from 'svelte';
33
import isOutOfViewport from './isOutOfViewport';
4+
import clickOutside from './clickOutside';
45
56
const dispatch = createEventDispatcher();
67
@@ -34,9 +35,7 @@
3435
3536
onMount(() => {
3637
if (items.length > 0 && !isMulti && value) {
37-
const _hoverItemIndex = items.findIndex(
38-
(item) => item[optionIdentifier] === value[optionIdentifier]
39-
);
38+
const _hoverItemIndex = items.findIndex((item) => item[optionIdentifier] === value[optionIdentifier]);
4039
4140
if (_hoverItemIndex) {
4241
hoverItemIndex = _hoverItemIndex;
@@ -79,14 +78,9 @@
7978
8079
function handleClick(args) {
8180
const { item, i, event } = args;
82-
event.stopPropagation();
81+
// event.stopPropagation();
8382
84-
if (
85-
value &&
86-
!isMulti &&
87-
value[optionIdentifier] === item[optionIdentifier]
88-
)
89-
return closeList();
83+
if (value && !isMulti && value[optionIdentifier] === item[optionIdentifier]) return closeList();
9084
9185
if (item.isCreator) {
9286
dispatch('itemCreated', filterText);
@@ -97,8 +91,8 @@
9791
}
9892
}
9993
100-
function closeList() {
101-
dispatch('closeList');
94+
function closeList(args) {
95+
dispatch('closeList', args);
10296
}
10397
10498
async function updateHoverItem(increment) {
@@ -141,11 +135,7 @@
141135
e.preventDefault();
142136
if (items.length === 0) break;
143137
const hoverItem = items[hoverItemIndex];
144-
if (
145-
value &&
146-
!isMulti &&
147-
value[optionIdentifier] === hoverItem[optionIdentifier]
148-
) {
138+
if (value && !isMulti && value[optionIdentifier] === hoverItem[optionIdentifier]) {
149139
closeList();
150140
break;
151141
}
@@ -161,12 +151,7 @@
161151
if (items.length === 0) {
162152
return closeList();
163153
}
164-
if (
165-
value &&
166-
value[optionIdentifier] ===
167-
items[hoverItemIndex][optionIdentifier]
168-
)
169-
return closeList();
154+
if (value && value[optionIdentifier] === items[hoverItemIndex][optionIdentifier]) return closeList();
170155
activeItemIndex = hoverItemIndex;
171156
handleSelect(items[hoverItemIndex]);
172157
break;
@@ -177,14 +162,10 @@
177162
if (VirtualList || !container) return;
178163
179164
let offsetBounding;
180-
const focusedElemBounding = container.querySelector(
181-
`.list-item .${className}`
182-
);
165+
const focusedElemBounding = container.querySelector(`.list-item .${className}`);
183166
184167
if (focusedElemBounding) {
185-
offsetBounding =
186-
container.getBoundingClientRect().bottom -
187-
focusedElemBounding.getBoundingClientRect().bottom;
168+
offsetBounding = container.getBoundingClientRect().bottom - focusedElemBounding.getBoundingClientRect().bottom;
188169
}
189170
190171
container.scrollTop -= offsetBounding;
@@ -199,33 +180,25 @@
199180
}
200181
201182
function isItemHover(hoverItemIndex, item, itemIndex, items) {
202-
return (
203-
isItemSelectable(item) &&
204-
(hoverItemIndex === itemIndex || items.length === 1)
205-
);
183+
return isItemSelectable(item) && (hoverItemIndex === itemIndex || items.length === 1);
206184
}
207185
208186
function isItemSelectable(item) {
209-
return (
210-
(item.isGroupHeader && item.isSelectable) ||
211-
item.selectable ||
212-
!item.hasOwnProperty('selectable')
213-
);
187+
return (item.isGroupHeader && item.isSelectable) || item.selectable || !item.hasOwnProperty('selectable');
188+
}
189+
190+
function handleClickOutside() {
191+
closeList({ isOutside: true });
214192
}
215193
216194
let listStyle;
217195
function computePlacement() {
218196
const { top, height, width } = parent.getBoundingClientRect();
219197
220198
listStyle = '';
221-
listStyle += `min-width:${width}px;width:${
222-
listAutoWidth ? 'auto' : '100%'
223-
};`;
224-
225-
if (
226-
listPlacement === 'top' ||
227-
(listPlacement === 'auto' && isOutOfViewport(parent).bottom)
228-
) {
199+
listStyle += `min-width:${width}px;width:${listAutoWidth ? 'auto' : '100%'};`;
200+
201+
if (listPlacement === 'top' || (listPlacement === 'auto' && isOutOfViewport(parent).bottom)) {
229202
listStyle += `bottom:${height + listOffset}px;`;
230203
} else {
231204
listStyle += `top:${height + listOffset}px;`;
@@ -235,28 +208,16 @@
235208
$: {
236209
if (parent && container) computePlacement();
237210
}
211+
212+
238213
</script>
239214

240215
<svelte:window on:keydown={handleKeyDown} on:resize={computePlacement} />
241216

242-
<div
243-
class={listClass}
244-
class:virtual-list={VirtualList}
245-
bind:this={container}
246-
style={listStyle}>
217+
<div use:clickOutside={parent} on:clickOutside={handleClickOutside} class={listClass} class:virtual-list={VirtualList} bind:this={container} style={listStyle}>
247218
{#if VirtualList}
248-
<svelte:component
249-
this={VirtualList}
250-
{items}
251-
{itemHeight}
252-
let:item
253-
let:i>
254-
<div
255-
on:mouseover={() => handleHover(i)}
256-
on:focus={() => handleHover(i)}
257-
on:click={(event) => handleClick({ item, i, event })}
258-
class="list-item"
259-
tabindex="-1">
219+
<svelte:component this={VirtualList} {items} {itemHeight} let:item let:i>
220+
<div on:mouseover={() => handleHover(i)} on:focus={() => handleHover(i)} on:click={(event) => handleClick({ item, i, event })} class="list-item" tabindex="-1">
260221
<svelte:component
261222
this={Item}
262223
{item}
@@ -274,12 +235,7 @@
274235
{#if item.isGroupHeader && !item.isSelectable}
275236
<div class="list-group-title">{getGroupHeaderLabel(item)}</div>
276237
{:else}
277-
<div
278-
on:mouseover={() => handleHover(i)}
279-
on:focus={() => handleHover(i)}
280-
on:click={(event) => handleClick({ item, i, event })}
281-
class="list-item"
282-
tabindex="-1">
238+
<div on:mouseover={() => handleHover(i)} on:focus={() => handleHover(i)} on:click={(event) => handleClick({ item, i, event })} class="list-item" tabindex="-1">
283239
<svelte:component
284240
this={Item}
285241
{item}

0 commit comments

Comments
 (0)