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

Experimental Editor component

Browse source
This commit is contained in:
davideraccagni 2022-04-22 03:59:44 +02:00
commit 8b8ffbf79a
14 changed files with 3597 additions and 4215 deletions
Download patch file Download diff file Expand all files Collapse all files

251
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 167,
"total": 169,
"components": [
{
"moduleName": "Accordion",
@ -235,17 +235,6 @@
"moduleName": "AutoComplete",
"filePath": "src/AutoComplete/AutoComplete.svelte",
"props": [
{
"name": "items",
"kind": "let",
"description": "Set the full list of items",
"type": "AutoCompleteItem[]",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "itemToString",
"kind": "let",
@ -278,12 +267,12 @@
"reactive": true
},
{
"name": "type",
"name": "shouldFilterItem",
"kind": "let",
"description": "Specify the type of dropdown",
"type": "\"default\" | \"inline\"",
"value": "\"default\"",
"isFunction": false,
"description": "Determine if an item should be filtered given the current combobox value",
"type": "(value: string) => {}",
"value": "() => {}",
"isFunction": true,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
@ -320,17 +309,6 @@
"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",
@ -481,6 +459,38 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "listRef",
"kind": "let",
"description": "Obtain a reference to the list HTML element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "filteredItems",
"kind": "let",
"type": "[]",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "clear",
"kind": "function",
"description": "Clear the combo box programmatically",
"type": "(options?: { focus?: boolean; }) => void",
"value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; if (options?.focus !== false) ref?.focus(); }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
@ -498,11 +508,12 @@
"name": "select",
"detail": "{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }"
},
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "dispatched", "name": "clear" }
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
{ "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" }
],
"typedefs": [
{
@ -521,7 +532,7 @@
"ts": "interface AutoCompleteItem { id: AutoCompleteItemId; text: AutoCompleteItemText; }"
}
],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "AutoCompleteSkeleton",
@ -3618,6 +3629,182 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "Editor",
"filePath": "src/Editor/Editor.svelte",
"props": [
{
"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": "placeholder",
"kind": "let",
"description": "Specify the placeholder text",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "html",
"kind": "let",
"description": "Specify the html",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "text",
"kind": "let",
"description": "Specify the text",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "options",
"kind": "let",
"type": "{ modules: { toolbar, }, theme: \"snow\", placeholder, }",
"value": "{ modules: { toolbar, }, theme: \"snow\", placeholder, }",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [],
"events": [],
"typedefs": []
},
{
"moduleName": "EditorSkeleton",
"filePath": "src/Editor/EditorSkeleton.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": "ExpandableTile",
"filePath": "src/Tile/ExpandableTile.svelte",

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

@ -18,15 +18,6 @@ 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.