mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 04:13: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

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

@ -6,31 +6,29 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let items = [];
let filteredItems = [];
fetch('https://restcountries.com/v3.1/all?fields=name,ccn3')
.then(res => {
if (!res.ok) {
throw new Error("Failed!");
}
return res.json();
})
.then(data => {
let _items = [];
Object.values(data).forEach(country => {
_items.push({ id: country.ccn3, text: country.name.common});
function shouldFilterItem(value) {
if (!value) return [];
fetch('https://restcountries.com/v3.1/all?fields=name,ccn3')
.then(res => {
if (!res.ok) {
throw new Error("Failed!");
}
return res.json();
})
.then(data => {
let _items = [];
Object.values(data).forEach(country => {
if (country.name.common.startsWith(value)) _items.push({ id: country.ccn3, text: country.name.common});
});
filteredItems = _items;
})
.catch(err => {
console.log(err);
});
items = _items;
return items;
})
.catch(err => {
console.log(err);
});
function filteredItems(value) {
return value ? items.filter(country => country.text.startsWith(value)) : [];
}
</script>
@ -42,7 +40,7 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
### Default
<AutoComplete titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
<AutoComplete titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Custom slot
@ -52,41 +50,37 @@ Override the default slot to customize the display of each item. Access the item
### Hidden label
<AutoComplete hideLabel titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
<AutoComplete hideLabel titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Top direction
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
<AutoComplete light titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Inline variant
<AutoComplete type="inline" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
<AutoComplete light titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### 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
<AutoComplete size="sm" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
<AutoComplete size="sm" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### 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
<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
<AutoComplete disabled titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
<AutoComplete disabled titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
### Skeleton

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

@ -1,40 +1,38 @@
<script>
import { AutoComplete } from "carbon-components-svelte";
let items = [];
let filteredItems = [];
fetch("https://restcountries.com/v3.1/all?fields=name,ccn3")
.then((res) => {
if (!res.ok) {
throw new Error("Failed!");
}
return res.json();
})
.then((data) => {
let _items = [];
Object.values(data).forEach((country) => {
_items.push({ id: country.ccn3, text: country.name.common });
function shouldFilterItem(value) {
if (!value) return [];
fetch("https://restcountries.com/v3.1/all?fields=name,ccn3")
.then((res) => {
if (!res.ok) {
throw new Error("Failed!");
}
return res.json();
})
.then((data) => {
let _items = [];
Object.values(data).forEach((country) => {
if (country.name.common.startsWith(value))
_items.push({ id: country.ccn3, text: country.name.common });
});
filteredItems = _items;
})
.catch((err) => {
console.log(err);
});
items = _items;
return items;
})
.catch((err) => {
console.log(err);
});
function filteredItems(value) {
return value
? items.filter((country) => country.text.startsWith(value))
: [];
}
</script>
<AutoComplete
titleText="Contact"
selectedId="0"
shouldFilterItem="{filteredItems}"
filteredItems="{filteredItems}"
shouldFilterItem="{shouldFilterItem}"
let:item
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
* @type {(value: string) => AutoCompleteItem[]}
* @type {(value: string) => {}}
*/
export let shouldFilterItem = () => [];
export let shouldFilterItem = () => {};
/**
* Specify the direction of the dropdown menu
@ -113,8 +113,8 @@
const dispatch = createEventDispatcher();
let filteredItems = [];
let inputValue = value;
export let filteredItems = [];
let inputValue = ""; //value;
let prevSelectedId = null;
let highlightedIndex = -1;
@ -146,7 +146,7 @@
afterUpdate(() => {
if (open) {
ref.focus();
filteredItems = shouldFilterItem(value);
//filteredItems = shouldFilterItem(value);
} else {
highlightedIndex = -1;
filteredItems = [];
@ -171,7 +171,10 @@
highlightedIndex = -1;
highlightedId = undefined;
} else {
selectedItem = filteredItems.find((item) => item.id === selectedId);
selectedItem =
filteredItems?.length > 0
? filteredItems.find((item) => item.id === selectedId)
: null;
}
dispatch("select", { selectedId, selectedItem });
}
@ -186,8 +189,12 @@
$: highlightedId = filteredItems[highlightedIndex]
? filteredItems[highlightedIndex].id
: 0;
$: filteredItems = shouldFilterItem(value);
$: value = inputValue;
$: if (inputValue) {
shouldFilterItem(inputValue);
} else {
filteredItems = [];
}
//$: value = inputValue;
</script>
<svelte:window