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

Run "yarn build:docs"

Browse source
This commit is contained in:
Eric Liu 2022-04-03 11:12:44 -07:00
commit 0d1a60d848
12 changed files with 108 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

116
COMPONENT_INDEX.md
View file

@ -1564,8 +1564,8 @@ None.
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) | | platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu | | persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 | | expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state<br />Defaults to `Menu20` | | iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` |
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state<br />Defaults to `Close20` | | iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;` |
### Slots ### Slots
@ -1589,19 +1589,19 @@ None.
| :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel | | isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open | | closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) | | text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition | | transition | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" /&gt;</code> | | closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> | | icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> | | text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
### Events ### Events
@ -2568,20 +2568,20 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | | :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element | | menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu | | size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button | | flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class | | menuOptionsClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
| iconClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class | | iconClass | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots ### Slots
@ -3055,24 +3055,24 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input | | value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input | | size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element | | searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant | | expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input | | placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute | | autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text | | closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots ### Slots
@ -4490,22 +4490,22 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element | | refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element | | refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon | | align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon | | hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute | | iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip | | tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button | | triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text | | triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
### Slots ### Slots

22
docs/src/COMPONENT_API.json
View file

@ -4053,8 +4053,8 @@
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "Close16" }, { "type": "forwarded", "name": "click", "element": "Close" },
{ "type": "forwarded", "name": "keydown", "element": "Close16" } { "type": "forwarded", "name": "keydown", "element": "Close" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Loading" } "rest_props": { "type": "InlineComponent", "name": "Loading" }
@ -4437,7 +4437,7 @@
{ {
"name": "iconMenu", "name": "iconMenu",
"kind": "let", "kind": "let",
"description": "Specify the icon to render for the closed state\nDefaults to `Menu20`", "description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4447,7 +4447,7 @@
{ {
"name": "iconClose", "name": "iconClose",
"kind": "let", "kind": "let",
"description": "Specify the icon to render for the opened state\nDefaults to `Close20`", "description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4488,7 +4488,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4498,7 +4498,7 @@
{ {
"name": "closeIcon", "name": "closeIcon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render when the action panel is open", "description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4544,13 +4544,13 @@
{ {
"name": "closeIcon", "name": "closeIcon",
"default": false, "default": false,
"fallback": "<svelte:component this=\"{closeIcon}\" />", "fallback": "<svelte:component this=\"{closeIcon}\" size=\"{20}\" />",
"slot_props": "{}" "slot_props": "{}"
}, },
{ {
"name": "icon", "name": "icon",
"default": false, "default": false,
"fallback": "<svelte:component this=\"{icon}\" />", "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}" "slot_props": "{}"
}, },
{ {
@ -7371,7 +7371,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -9183,7 +9183,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render.\nDefaults to `<Search />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -12860,7 +12860,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)", "description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

3
src/OverflowMenu/OverflowMenu.svelte
View file

@ -31,7 +31,8 @@
export let menuOptionsClass = undefined; export let menuOptionsClass = undefined;
/** /**
* Specify the icon to render * Specify the icon to render.
* Defaults to `<OverflowMenuVertical />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = OverflowMenuVertical; export let icon = OverflowMenuVertical;

7
src/Search/Search.svelte
View file

@ -53,10 +53,11 @@
export let labelText = ""; export let labelText = "";
/** /**
* Specify the icon to render * Specify the icon to render.
* Defaults to `<Search />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Search; export let icon = IconSearch;
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -66,7 +67,7 @@
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Close from "../icons/Close.svelte"; import Close from "../icons/Close.svelte";
import Search from "../icons/Search.svelte"; import IconSearch from "../icons/IconSearch.svelte";
import SearchSkeleton from "./SearchSkeleton.svelte"; import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();

4
src/UIShell/HeaderSearch.svelte
View file

@ -28,7 +28,7 @@
import { createEventDispatcher, tick } from "svelte"; import { createEventDispatcher, tick } from "svelte";
import Close from "../icons/Close.svelte"; import Close from "../icons/Close.svelte";
import Search from "../icons/Search.svelte"; import IconSearch from "../icons/IconSearch.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -72,7 +72,7 @@
active = true; active = true;
}}" }}"
> >
<Search size="{20}" title="Search" /> <IconSearch size="{20}" title="Search" />
</button> </button>
<input <input
bind:this="{ref}" bind:this="{ref}"

0
src/icons/Search.svelte → src/icons/IconSearch.svelte
View file

3
types/OverflowMenu/OverflowMenu.svelte.d.ts vendored
View file

@ -40,7 +40,8 @@ export interface OverflowMenuProps
menuOptionsClass?: string; menuOptionsClass?: string;
/** /**
* Specify the icon to render * Specify the icon to render.
* Defaults to `<OverflowMenuVertical />`
* @default undefined * @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

3
types/Search/Search.svelte.d.ts vendored
View file

@ -81,7 +81,8 @@ export interface SearchProps {
labelText?: string; labelText?: string;
/** /**
* Specify the icon to render * Specify the icon to render.
* Defaults to `<Search />`
* @default undefined * @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

4
types/Tooltip/Tooltip.svelte.d.ts vendored
View file

@ -28,8 +28,8 @@ export interface TooltipProps
hideIcon?: boolean; hideIcon?: boolean;
/** /**
* Specify the icon to render for the tooltip button * Specify the icon to render for the tooltip button.
* Icon size must be 16px (e.g., `Add16`, `Task16`) * Default to `<Information />`
* @default undefined * @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

8
types/UIShell/Header.svelte.d.ts vendored
View file

@ -65,15 +65,15 @@ export interface HeaderProps
ref?: null | HTMLAnchorElement; ref?: null | HTMLAnchorElement;
/** /**
* Specify the icon to render for the closed state * Specify the icon to render for the closed state.
* Defaults to `Menu20` * Defaults to `<Menu size={20} />`
* @default undefined * @default undefined
*/ */
iconMenu?: typeof import("svelte").SvelteComponent; iconMenu?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon to render for the opened state * Specify the icon to render for the opened state.
* Defaults to `Close20` * Defaults to `<Close size={20} />`
* @default undefined * @default undefined
*/ */
iconClose?: typeof import("svelte").SvelteComponent; iconClose?: typeof import("svelte").SvelteComponent;

6
types/UIShell/HeaderAction.svelte.d.ts vendored
View file

@ -10,13 +10,15 @@ export interface HeaderActionProps
isOpen?: boolean; isOpen?: boolean;
/** /**
* Specify the icon to render * Specify the icon to render when the action panel is closed.
* Defaults to `<Switcher size={20} />`
* @default undefined * @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon to render when the action panel is open * Specify the icon to render when the action panel is open.
* Defaults to `<Close size={20} />`
* @default undefined * @default undefined
*/ */
closeIcon?: typeof import("svelte").SvelteComponent; closeIcon?: typeof import("svelte").SvelteComponent;

17
types/icons/Search.svelte.d.ts vendored Normal file
View file

@ -0,0 +1,17 @@
/// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte";
export interface SearchProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
/**
* @default 16
*/
size?: number;
/**
* @default undefined
*/
title?: undefined;
}
export default class Search extends SvelteComponentTyped<SearchProps, {}, {}> {}