mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
fix(types): loosen icon prop type to any (#2095)
Fixes https://github.com/carbon-design-system/carbon-icons-svelte/issues/207 `carbon-icons-svelte@13` and `carbon-pictograms-svelte@13` now only support TypeScript for Svelte 4/5. The new `Component` type is incompatible with the `icon` prop in `carbon-components-svelte`, causing a type error with Svelte 5, as `typeof SvelteComponent` doesn't match the new `Component` type. Since `Component` isn't available in Svelte 3/4, this PR changes the `icon` prop type to `any` for compatibility across Svelte 3, 4, and 5.
This commit is contained in:
Eric Liu
GitHub
parent
ece9e0362f
commit
6bf72d4602
44 changed files with 273 additions and 251 deletions
|
|
@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
|
|
@ -847,18 +847,18 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
||||
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
|
||||
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
||||
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||
| kind | No | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
|
||||
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :------- | :--------------- | :------- | -------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
||||
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
|
||||
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||
| icon | No | <code>let</code> | Yes | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
||||
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||
| kind | No | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
|
||||
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1582,19 +1582,19 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSideNavOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
|
||||
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
|
||||
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||
| expansionBreakpoint | No | <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 | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `<Menu size={20} />` |
|
||||
| iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `<Close size={20} />` |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSideNavOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
|
||||
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
|
||||
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||
| expansionBreakpoint | No | <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 | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `<Menu size={20} />` |
|
||||
| iconClose | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `<Close size={20} />` |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1619,8 +1619,8 @@ None.
|
|||
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `<Switcher size={20} />` |
|
||||
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `<Close size={20} />` |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `<Switcher size={20} />` |
|
||||
| closeIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `<Close size={20} />` |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text.<br />Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) |
|
||||
| transition | No | <code>let</code> | No | <code>false | 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 |
|
||||
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
|
||||
|
|
@ -1646,12 +1646,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| linkIsActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| linkIsActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1669,11 +1669,11 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1966,15 +1966,15 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the link |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
|
||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the link |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
|
||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2224,29 +2224,29 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | No | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | <code>undefined</code> | Set the size of the modal |
|
||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
|
||||
| modalLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
|
||||
| modalAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryButtonIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the primary button icon |
|
||||
| shouldSubmitOnEnter | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
|
||||
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| selectorPrimaryFocus | No | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||
| size | No | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | <code>undefined</code> | Set the size of the modal |
|
||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| alert | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||
| passiveModal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||
| modalHeading | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
|
||||
| modalLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
|
||||
| modalAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||
| hasForm | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||
| hasScrollingContent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryButtonIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the primary button icon |
|
||||
| shouldSubmitOnEnter | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
|
||||
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| selectorPrimaryFocus | No | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2295,16 +2295,16 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the primary button icon |
|
||||
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
|
||||
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| secondaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
|
||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||
| primaryButtonIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the primary button icon |
|
||||
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||
| primaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
|
||||
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||
| secondaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
|
||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2444,12 +2444,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------- | ----------------------------------- |
|
||||
| notificationType | No | <code>let</code> | No | <code>"toast" | "inline"</code> | <code>"toast"</code> | Set the type of notification |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------ | ------------------------- | ----------------------------------- |
|
||||
| notificationType | No | <code>let</code> | No | <code>"toast" | "inline"</code> | <code>"toast"</code> | Set the type of notification |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2611,20 +2611,20 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
|
||||
| menuRef | No | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
||||
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<OverflowMenuVertical />` |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
||||
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
|
||||
| menuRef | No | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
||||
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||
| icon | No | <code>let</code> | Yes | <code>any</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<OverflowMenuVertical />` |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
||||
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3105,24 +3105,24 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
||||
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
||||
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
|
||||
| autocomplete | No | <code>let</code> | No | <code>"on" | "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
|
||||
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
||||
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<Search />` |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
||||
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
||||
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
|
||||
| autocomplete | No | <code>let</code> | No | <code>"on" | "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
|
||||
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
||||
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<Search />` |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3367,13 +3367,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3392,12 +3392,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4011,7 +4011,7 @@ None.
|
|||
| interactive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
|
||||
|
||||
### Slots
|
||||
|
|
@ -4575,7 +4575,7 @@ None.
|
|||
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
||||
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `<Information />` |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `<Information />` |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
||||
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
||||
|
|
@ -4658,7 +4658,7 @@ None.
|
|||
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| tooltipText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
|
||||
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
|
||||
|
|
@ -4691,7 +4691,7 @@ export type TreeNodeId = string | number;
|
|||
export interface TreeNode {
|
||||
id: TreeNodeId;
|
||||
text: any;
|
||||
icon?: typeof import("svelte").SvelteComponent<any>;
|
||||
icon?: any;
|
||||
disabled?: boolean;
|
||||
nodes?: TreeNode[];
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue