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

AutoComplete updated to support REST service

Browse source
This commit is contained in:
davideraccagni 2022-04-22 01:40:27 +02:00
commit 79828140a7
6 changed files with 313 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,33 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
<script>
import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let items = [];
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});
});
items = _items;
return items;
})
.catch(err => {
console.log(err);
});
function filteredItems(value) {
return value ? items.filter(country => country.text.startsWith(value)) : [];
}
</script>
`AutoComplete` is keyed for performance reasons.
@ -15,10 +42,7 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
### Default
<AutoComplete titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "11", text: "Email1"},
{id: "12", text: "Email2"},
{id: "2", text: "Fax"}]}" />
<AutoComplete titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Custom slot
@ -28,74 +52,42 @@ Override the default slot to customize the display of each item. Access the item
### Hidden label
<AutoComplete hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Format item display text
Use the `itemToString` prop to format the display of individual items.
<AutoComplete itemToString={item => {
return item.text + ' (' + item.id +')'
}} titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Multiple dropdowns
<FileSource src="/framed/AutoComplete/MultipleAutoComplete" />
<AutoComplete hideLabel titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Top direction
Set `direction` to `"top"` for the dropdown menu to appear above the input.
<AutoComplete direction="top" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete direction="top" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Light variant
<AutoComplete light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete light titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Inline variant
<AutoComplete type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete type="inline" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Extra-large size
<AutoComplete size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete size="xl" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Small size
<AutoComplete size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete size="sm" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Invalid state
<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Warning state
<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Disabled state
<AutoComplete disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
<AutoComplete disabled titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
### Skeleton
<AutoCompleteSkeleton />
<AutoCompleteSkeleton />

9
docs/src/pages/components/ComboBox.svx
View file

@ -18,6 +18,15 @@ items={[
{id: "2", text: "Fax"}
]} />
### `shouldFilterItem`
<ComboBox shouldFilterItem={(item, value) => item.text.startsWith(value)} titleText="Contact" placeholder="Select contact method"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
### Custom slot
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.

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

@ -1,15 +1,40 @@
<script>
import { AutoComplete } from "carbon-components-svelte";
let items = [];
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 });
});
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"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
shouldFilterItem="{filteredItems}"
let:item
let:index
>

42
docs/src/pages/framed/AutoComplete/MultipleAutoComplete.svelte
View file

@ -1,42 +0,0 @@
<script>
import { AutoComplete } from "carbon-components-svelte";
const items = [
{ id: "0", text: "Slack" },
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
];
let auto_complete1_selectedId = "0";
let auto_complete2_selectedId = "1";
const formatSelected = (id) =>
items.find((item) => item.id === id)?.text ?? "N/A";
$: primary = formatSelected(auto_complete1_selectedId);
$: secondary = formatSelected(auto_complete2_selectedId);
</script>
<AutoComplete
titleText="Primary contact"
bind:selectedId="{auto_complete1_selectedId}"
items="{items}"
/>
<div>Primary: {primary}</div>
<AutoComplete
invalid="{auto_complete1_selectedId === auto_complete2_selectedId}"
invalidText="Secondary contact method must be different from the primary contact"
titleText="Secondary contact"
bind:selectedId="{auto_complete2_selectedId}"
items="{items}"
/>
<div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>