mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

AutoComplete REST service fixed

Browse source
This commit is contained in:
davideraccagni 2022-04-22 03:49:42 +02:00
commit 30389e9f67
3 changed files with 69 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

36
docs/src/pages/components/AutoComplete.svx
View file

@ -6,7 +6,10 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte"; import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
let items = []; let filteredItems = [];
function shouldFilterItem(value) {
if (!value) return [];
fetch('https://restcountries.com/v3.1/all?fields=name,ccn3') fetch('https://restcountries.com/v3.1/all?fields=name,ccn3')
.then(res => { .then(res => {
@ -18,19 +21,14 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
.then(data => { .then(data => {
let _items = []; let _items = [];
Object.values(data).forEach(country => { Object.values(data).forEach(country => {
_items.push({ id: country.ccn3, text: country.name.common}); if (country.name.common.startsWith(value)) _items.push({ id: country.ccn3, text: country.name.common});
}); });
items = _items; filteredItems = _items;
return items;
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
}); });
function filteredItems(value) {
return value ? items.filter(country => country.text.startsWith(value)) : [];
} }
</script> </script>
@ -42,7 +40,7 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
### Default ### Default
<AutoComplete titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Custom slot ### Custom slot
@ -52,41 +50,37 @@ Override the default slot to customize the display of each item. Access the item
### Hidden label ### Hidden label
<AutoComplete hideLabel titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete hideLabel titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Top direction ### Top direction
Set `direction` to `"top"` for the dropdown menu to appear above the input. Set `direction` to `"top"` for the dropdown menu to appear above the input.
<AutoComplete direction="top" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete direction="top" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Light variant ### Light variant
<AutoComplete light titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete light titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Inline variant
<AutoComplete type="inline" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Extra-large size ### Extra-large size
<AutoComplete size="xl" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete size="xl" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Small size ### Small size
<AutoComplete size="sm" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete size="sm" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Invalid state ### Invalid state
<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Warning state ### Warning state
<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Disabled state ### Disabled state
<AutoComplete disabled titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" /> <AutoComplete disabled titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Skeleton ### Skeleton

18
docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
View file

@ -1,7 +1,10 @@
<script> <script>
import { AutoComplete } from "carbon-components-svelte"; import { AutoComplete } from "carbon-components-svelte";
let items = []; let filteredItems = [];
function shouldFilterItem(value) {
if (!value) return [];
fetch("https://restcountries.com/v3.1/all?fields=name,ccn3") fetch("https://restcountries.com/v3.1/all?fields=name,ccn3")
.then((res) => { .then((res) => {
@ -13,28 +16,23 @@
.then((data) => { .then((data) => {
let _items = []; let _items = [];
Object.values(data).forEach((country) => { Object.values(data).forEach((country) => {
if (country.name.common.startsWith(value))
_items.push({ id: country.ccn3, text: country.name.common }); _items.push({ id: country.ccn3, text: country.name.common });
}); });
items = _items; filteredItems = _items;
return items;
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
function filteredItems(value) {
return value
? items.filter((country) => country.text.startsWith(value))
: [];
} }
</script> </script>
<AutoComplete <AutoComplete
titleText="Contact" titleText="Contact"
selectedId="0" selectedId="0"
shouldFilterItem="{filteredItems}" filteredItems="{filteredItems}"
shouldFilterItem="{shouldFilterItem}"
let:item let:item
let:index let:index
> >

23
src/AutoComplete/AutoComplete.svelte
View file

@ -27,9 +27,9 @@
/** /**
* Determine if an item should be filtered given the current combobox value * Determine if an item should be filtered given the current combobox value
* @type {(value: string) => AutoCompleteItem[]} * @type {(value: string) => {}}
*/ */
export let shouldFilterItem = () => []; export let shouldFilterItem = () => {};
/** /**
* Specify the direction of the dropdown menu * Specify the direction of the dropdown menu
@ -113,8 +113,8 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let filteredItems = []; export let filteredItems = [];
let inputValue = value; let inputValue = ""; //value;
let prevSelectedId = null; let prevSelectedId = null;
let highlightedIndex = -1; let highlightedIndex = -1;
@ -146,7 +146,7 @@
afterUpdate(() => { afterUpdate(() => {
if (open) { if (open) {
ref.focus(); ref.focus();
filteredItems = shouldFilterItem(value); //filteredItems = shouldFilterItem(value);
} else { } else {
highlightedIndex = -1; highlightedIndex = -1;
filteredItems = []; filteredItems = [];
@ -171,7 +171,10 @@
highlightedIndex = -1; highlightedIndex = -1;
highlightedId = undefined; highlightedId = undefined;
} else { } else {
selectedItem = filteredItems.find((item) => item.id === selectedId); selectedItem =
filteredItems?.length > 0
? filteredItems.find((item) => item.id === selectedId)
: null;
} }
dispatch("select", { selectedId, selectedItem }); dispatch("select", { selectedId, selectedItem });
} }
@ -186,8 +189,12 @@
$: highlightedId = filteredItems[highlightedIndex] $: highlightedId = filteredItems[highlightedIndex]
? filteredItems[highlightedIndex].id ? filteredItems[highlightedIndex].id
: 0; : 0;
$: filteredItems = shouldFilterItem(value); $: if (inputValue) {
$: value = inputValue; shouldFilterItem(inputValue);
} else {
filteredItems = [];
}
//$: value = inputValue;
</script> </script>
<svelte:window <svelte:window