Skip to content

Commit 55d18d0

Browse files
zxyctnzxyctn
committed
Format text for components
1 parent f34b5d0 commit 55d18d0

File tree

3 files changed

+108
-108
lines changed

3 files changed

+108
-108
lines changed

‎src/lib/components/form/InputContainer.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@
1616
function onMouseOut() {}
1717
</script>
1818

19-
<div id="{id}-container" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
19+
<div
20+
id="{id}-container"
21+
on:mouseover={onMouseOver}
22+
on:focus={onMouseOver}
23+
on:mouseout={onMouseOut}
24+
on:blur={onMouseOut}
25+
>
2026
<label class="label">
2127
<span
2228
>{label}

‎src/lib/components/form/MultiSelect.svelte‎

Lines changed: 100 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
import Select from 'svelte-select';
55
import { onMount } from 'svelte';
66
7-
8-
97
export let source;
108
export let target;
119
export let id;
@@ -35,16 +33,14 @@
3533
$: groupBy;
3634
3735
function updateTarget(selection) {
36+
console.log('updateTarget', target, selection, isMulti);
37+
if (selection == undefined) {
38+
console.log('no update');
3839
39-
console.log("updateTarget", target, selection, isMulti);
40-
if(selection == undefined)
41-
{
42-
console.log("no update");
43-
44-
return;
40+
return;
4541
}
4642
47-
console.log("update");
43+
console.log('update');
4844
//different cases
4945
//a) source is complex model is simple return array
5046
if (complexSource && !complexTarget && isLoaded && isMulti) {
@@ -75,8 +71,8 @@
7571
}
7672
7773
if (!complexSource && !complexTarget && isLoaded && !isMulti) {
78-
console.log("🚀 ~ updateTarget ~ selection:", selection)
79-
if(selection){
74+
console.log('🚀 ~ updateTarget ~ selection:', selection);
75+
if (selection) {
8076
target = selection.value;
8177
}
8278
}
@@ -167,118 +163,116 @@
167163
//console.log(t,value)
168164
}
169165
170-
function filterItemStartFn(label, filterText, option) {
171-
// console.log(label, filterText, option);
172-
let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
166+
function filterItemStartFn(label, filterText, option) {
167+
// console.log(label, filterText, option);
168+
let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
173169
174-
return itemFilter;
175-
}
170+
return itemFilter;
171+
}
176172
177-
function filterItemExactFn(label, filterText, option) {
178-
// console.log(label, filterText, option);
179-
let itemFilter = label.toLowerCase() == filterText.toLowerCase();
173+
function filterItemExactFn(label, filterText, option) {
174+
// console.log(label, filterText, option);
175+
let itemFilter = label.toLowerCase() == filterText.toLowerCase();
180176
181-
return itemFilter;
182-
}
177+
return itemFilter;
178+
}
183179
184-
function filterItemIncludesFn(label, filterText, option) {
185-
// console.log(label, filterText, option);
186-
let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
180+
function filterItemIncludesFn(label, filterText, option) {
181+
// console.log(label, filterText, option);
182+
let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
187183
188-
return itemFilter;
189-
}
184+
return itemFilter;
185+
}
190186
191-
function filterFn({
192-
loadOptions,
193-
filterText,
194-
items,
195-
multiple,
196-
value,
197-
itemId,
198-
groupBy,
199-
filterSelectedItems,
200-
itemFilter,
201-
convertStringItemsToObjects,
202-
filterGroupedItems,
203-
label,
204-
}) {
205-
if (items && loadOptions) return items;
206-
if (!items) return [];
187+
function filterFn({
188+
loadOptions,
189+
filterText,
190+
items,
191+
multiple,
192+
value,
193+
itemId,
194+
groupBy,
195+
filterSelectedItems,
196+
itemFilter,
197+
convertStringItemsToObjects,
198+
filterGroupedItems,
199+
label
200+
}) {
201+
if (items && loadOptions) return items;
202+
if (!items) return [];
203+
204+
if (items && items.length > 0 && typeof items[0] !== 'object') {
205+
items = convertStringItemsToObjects(items);
206+
}
207207
208-
if (items && items.length > 0 && typeof items[0] !== 'object') {
209-
items = convertStringItemsToObjects(items);
210-
}
208+
let filterResults = filterListFn(
209+
items,
210+
label,
211+
filterText,
212+
multiple,
213+
value,
214+
filterSelectedItems,
215+
itemId
216+
);
217+
218+
if (groupBy) {
219+
filterResults = filterGroupedItems(filterResults, label, filterText);
220+
}
211221
212-
let filterResults = filterListFn(items, label, filterText,multiple,value,filterSelectedItems, itemId)
222+
return filterResults;
223+
}
213224
214-
if (groupBy) {
215-
filterResults = filterGroupedItems(filterResults, label, filterText);
216-
}
225+
// filter checks 3 types, exact, starts, includes
226+
function filterListFn(items, label, filterText, multiple, value, filterSelectedItems, itemId) {
227+
if (!items) return [];
217228
218-
return filterResults;
219-
}
229+
let exact = items.filter((item) => {
230+
let matchesFilter = filterItemExactFn(item[label], filterText, item);
231+
if (matchesFilter && multiple && value?.length) {
232+
matchesFilter = !value.some((x) => {
233+
return filterSelectedItems ? x[itemId] === item[itemId] : false;
234+
});
235+
}
220236
221-
// filter checks 3 types, exact, starts, includes
222-
function filterListFn(items ,label , filterText, multiple, value, filterSelectedItems, itemId)
223-
{
237+
return matchesFilter;
238+
});
224239
225-
if (!items) return [];
240+
let starts = items.filter((item) => {
241+
let matchesFilter = filterItemStartFn(item[label], filterText, item);
242+
if (matchesFilter && multiple && value?.length) {
243+
matchesFilter = !value.some((x) => {
244+
return filterSelectedItems ? x[itemId] === item[itemId] : false;
245+
});
246+
}
226247
227-
let exact = items.filter((item) => {
228-
let matchesFilter = filterItemExactFn(item[label], filterText, item);
229-
if (matchesFilter && multiple && value?.length) {
230-
matchesFilter = !value.some((x) => {
231-
return filterSelectedItems ? x[itemId] === item[itemId] : false;
232-
});
233-
}
248+
return matchesFilter;
249+
});
234250
235-
return matchesFilter;
236-
});
251+
let includes = items.filter((item) => {
252+
let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
253+
if (matchesFilter && multiple && value?.length) {
254+
matchesFilter = !value.some((x) => {
255+
return filterSelectedItems ? x[itemId] === item[itemId] : false;
256+
});
257+
}
237258
238-
let starts = items.filter((item) => {
239-
let matchesFilter = filterItemStartFn(item[label], filterText, item);
240-
if (matchesFilter && multiple && value?.length) {
241-
matchesFilter = !value.some((x) => {
242-
return filterSelectedItems ? x[itemId] === item[itemId] : false;
243-
});
244-
}
245-
246-
return matchesFilter;
247-
248-
});
249-
250-
let includes = items.filter((item) => {
251-
let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
252-
if (matchesFilter && multiple && value?.length) {
253-
matchesFilter = !value.some((x) => {
254-
return filterSelectedItems ? x[itemId] === item[itemId] : false;
255-
});
256-
}
257-
258-
return matchesFilter;
259-
});
260-
261-
262-
let result = [...exact,...starts,...includes];
263-
return [...new Set(result)];
264-
}
265-
266-
function clearFn(e)
267-
{
268-
console.log("clear", target, e);
269-
if(isMulti)
270-
{
271-
target = [];
272-
}
273-
else
274-
{
275-
target="";
276-
}
259+
return matchesFilter;
260+
});
277261
278-
console.log("after clear", target);
279-
}
262+
let result = [...exact, ...starts, ...includes];
263+
return [...new Set(result)];
264+
}
280265
266+
function clearFn(e) {
267+
console.log('clear', target, e);
268+
if (isMulti) {
269+
target = [];
270+
} else {
271+
target = '';
272+
}
281273
274+
console.log('after clear', target);
275+
}
282276
</script>
283277
284278
<InputContainer {id} label={title} {feedback} {required} {help}>
@@ -295,7 +289,7 @@ function clearFn(e)
295289
{loading}
296290
{clearable}
297291
{disabled}
298-
filter={filterFn}
292+
filter={filterFn}
299293
on:change
300294
on:input
301295
on:focus

‎src/routes/components/form/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
import Page from '$lib/components/page/Page.svelte';
5757
</script>
5858

59-
<div id="toc-target">
59+
<div id="toc-target" class="bg-surface-50 dark:bg-surface-800">
6060
<Page
6161
title="Form components"
6262
note="This page lists all the form components and shows how to develop a validation."

0 commit comments

Comments
 (0)