mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
Initial commit
This commit is contained in:
davideraccagni
parent
4c0d6ea5a2
commit
db2d2ad69b
23 changed files with 6936 additions and 1158 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 165,
|
||||
"total": 167,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -231,6 +231,315 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "AutoComplete",
|
||||
"filePath": "src/AutoComplete/AutoComplete.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "items",
|
||||
"kind": "let",
|
||||
"description": "Set the dropdown items",
|
||||
"type": "AutoCompleteItem[]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "filteredItems",
|
||||
"kind": "let",
|
||||
"type": "[]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "itemToString",
|
||||
"kind": "let",
|
||||
"description": "Override the display of a dropdown item",
|
||||
"type": "(item: AutoCompleteItem) => string",
|
||||
"value": "(item) => item.text || item.id",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "selectedId",
|
||||
"kind": "let",
|
||||
"description": "Specify the selected item id",
|
||||
"type": "AutoCompleteItemId",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"kind": "let",
|
||||
"description": "Specify the type of dropdown",
|
||||
"type": "\"default\" | \"inline\"",
|
||||
"value": "\"default\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "direction",
|
||||
"kind": "let",
|
||||
"description": "Specify the direction of the dropdown menu",
|
||||
"type": "\"bottom\" | \"top\"",
|
||||
"value": "\"bottom\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of the dropdown field",
|
||||
"type": "\"sm\" | \"lg\" | \"xl\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "open",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to open the dropdown",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "inline",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the inline variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "light",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the light variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the dropdown",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "titleText",
|
||||
"kind": "let",
|
||||
"description": "Specify the title text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "invalid",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to indicate an invalid state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "invalidText",
|
||||
"kind": "let",
|
||||
"description": "Specify the invalid state text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "warn",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to indicate an warning state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "warnText",
|
||||
"kind": "let",
|
||||
"description": "Specify the warning state text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "helperText",
|
||||
"kind": "let",
|
||||
"description": "Specify the helper text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "hideLabel",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to visually hide the label text",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
"description": "Set an id for the list box component",
|
||||
"type": "string",
|
||||
"value": "\"ccs-\" + Math.random().toString(36)",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "name",
|
||||
"kind": "let",
|
||||
"description": "Specify a name attribute for the list box",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "ref",
|
||||
"kind": "let",
|
||||
"description": "Obtain a reference to the button HTML element",
|
||||
"type": "null | HTMLInputElement",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "placeholder",
|
||||
"kind": "let",
|
||||
"description": "????",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"fallback": "{itemToString(item)}",
|
||||
"slot_props": "{ item: AutoCompleteItem; index: number; }"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "select",
|
||||
"detail": "{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }"
|
||||
},
|
||||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" },
|
||||
{ "type": "forwarded", "name": "input", "element": "input" },
|
||||
{ "type": "dispatched", "name": "clear" }
|
||||
],
|
||||
"typedefs": [
|
||||
{
|
||||
"type": "any",
|
||||
"name": "AutoCompleteItemId",
|
||||
"ts": "type AutoCompleteItemId = any"
|
||||
},
|
||||
{
|
||||
"type": "string",
|
||||
"name": "AutoCompleteItemText",
|
||||
"ts": "type AutoCompleteItemText = string"
|
||||
},
|
||||
{
|
||||
"type": "{ id: AutoCompleteItemId; text: AutoCompleteItemText; }",
|
||||
"name": "AutoCompleteItem",
|
||||
"ts": "interface AutoCompleteItem { id: AutoCompleteItemId; text: AutoCompleteItemText; }"
|
||||
}
|
||||
],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "AutoCompleteSkeleton",
|
||||
"filePath": "src/AutoComplete/AutoCompleteSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "hideLabel",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to hide the label text",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "Breadcrumb",
|
||||
"filePath": "src/Breadcrumb/Breadcrumb.svelte",
|
||||
|
|
|
|||
101
docs/src/pages/components/AutoComplete.svx
Normal file
101
docs/src/pages/components/AutoComplete.svx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
components: ["AutoComplete", "AutoCompleteSkeleton"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
`AutoComplete` is keyed for performance reasons.
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default
|
||||
|
||||
<AutoComplete titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "11", text: "Email1"},
|
||||
{id: "12", text: "Email2"},
|
||||
{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.
|
||||
|
||||
<FileSource src="/framed/AutoComplete/AutoCompleteSlot" />
|
||||
|
||||
### 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" />
|
||||
|
||||
### 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"}]}" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<AutoComplete light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Inline variant
|
||||
|
||||
<AutoComplete type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<AutoComplete size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Small size
|
||||
|
||||
<AutoComplete size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### 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"}]}" />
|
||||
|
||||
### 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"}]}" />
|
||||
|
||||
### Disabled state
|
||||
|
||||
<AutoComplete disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<AutoCompleteSkeleton />
|
||||
29
docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
Normal file
29
docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
import { AutoComplete } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<AutoComplete
|
||||
titleText="Contact"
|
||||
selectedId="0"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
let:item
|
||||
let:index
|
||||
>
|
||||
<div>
|
||||
<strong>{item.text}</strong>
|
||||
</div>
|
||||
<div>
|
||||
id: {item.id} - index:
|
||||
{index}
|
||||
</div>
|
||||
</AutoComplete>
|
||||
|
||||
<style>
|
||||
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue