mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
breaking: remove deprecated props and components (#1191)
This commit is contained in:
metonym
GitHub
parent
ea7c0d446e
commit
21714d0e3a
55 changed files with 127 additions and 1823 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 171 components exported from carbon-components-svelte@0.62.3.
|
||||
> 165 components exported from carbon-components-svelte@0.62.3.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -54,7 +54,6 @@
|
|||
- [`Header`](#header)
|
||||
- [`HeaderAction`](#headeraction)
|
||||
- [`HeaderActionLink`](#headeractionlink)
|
||||
- [`HeaderActionSearch`](#headeractionsearch)
|
||||
- [`HeaderGlobalAction`](#headerglobalaction)
|
||||
- [`HeaderNav`](#headernav)
|
||||
- [`HeaderNavItem`](#headernavitem)
|
||||
|
|
@ -64,8 +63,6 @@
|
|||
- [`HeaderPanelLinks`](#headerpanellinks)
|
||||
- [`HeaderSearch`](#headersearch)
|
||||
- [`HeaderUtilities`](#headerutilities)
|
||||
- [`Icon`](#icon)
|
||||
- [`IconSkeleton`](#iconskeleton)
|
||||
- [`ImageLoader`](#imageloader)
|
||||
- [`InlineLoading`](#inlineloading)
|
||||
- [`InlineNotification`](#inlinenotification)
|
||||
|
|
@ -87,7 +84,6 @@
|
|||
- [`NotificationActionButton`](#notificationactionbutton)
|
||||
- [`NotificationButton`](#notificationbutton)
|
||||
- [`NotificationIcon`](#notificationicon)
|
||||
- [`NotificationTextDetails`](#notificationtextdetails)
|
||||
- [`NumberInput`](#numberinput)
|
||||
- [`NumberInputSkeleton`](#numberinputskeleton)
|
||||
- [`OrderedList`](#orderedlist)
|
||||
|
|
@ -160,8 +156,6 @@
|
|||
- [`ToastNotification`](#toastnotification)
|
||||
- [`Toggle`](#toggle)
|
||||
- [`ToggleSkeleton`](#toggleskeleton)
|
||||
- [`ToggleSmall`](#togglesmall)
|
||||
- [`ToggleSmallSkeleton`](#togglesmallskeleton)
|
||||
- [`Toolbar`](#toolbar)
|
||||
- [`ToolbarBatchActions`](#toolbarbatchactions)
|
||||
- [`ToolbarContent`](#toolbarcontent)
|
||||
|
|
@ -381,14 +375,13 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
|
||||
| kind | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | <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 | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
|
||||
| tooltipAlignment | <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 | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
|
|
@ -438,7 +431,6 @@ None.
|
|||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
|
||||
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -761,7 +753,6 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :---------------------------- | ---------------------- | ----------------------------------------- |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the content switcher |
|
||||
|
||||
### Slots
|
||||
|
|
@ -1640,26 +1631,6 @@ None.
|
|||
|
||||
None.
|
||||
|
||||
## `HeaderActionSearch`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- |
|
||||
| searchIsActive | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to focus the search |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :------------------ | :--------- | :---------------------------------------------------- |
|
||||
| inputSearch | dispatched | <code>{ action: "search"; textInput: string; }</code> |
|
||||
| focusInputSearch | dispatched | -- |
|
||||
| focusOutInputSearch | dispatched | -- |
|
||||
|
||||
## `HeaderGlobalAction`
|
||||
|
||||
### Props
|
||||
|
|
@ -1686,9 +1657,7 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | ---------------------- | ---------------------------------- |
|
||||
| ariaLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the nav |
|
||||
None.
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1869,49 +1838,6 @@ None.
|
|||
|
||||
None.
|
||||
|
||||
## `Icon`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------- |
|
||||
| render | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `IconSkeleton`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ |
|
||||
| size | <code>let</code> | No | <code>number</code> | <code>16</code> | Set the size of the icon |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `ImageLoader`
|
||||
|
||||
### Props
|
||||
|
|
@ -2516,27 +2442,6 @@ None.
|
|||
|
||||
None.
|
||||
|
||||
## `NotificationTextDetails`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :----------------------------------- | ---------------------- | ---------------------------- |
|
||||
| notificationType | <code>let</code> | No | <code>"toast" | "inline"</code> | <code>"toast"</code> | Set the type of notification |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text |
|
||||
| subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
|
||||
| caption | <code>let</code> | No | <code>string</code> | <code>"Caption"</code> | Specify the caption text |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
None.
|
||||
|
||||
## `NumberInput`
|
||||
|
||||
### Types
|
||||
|
|
@ -2557,7 +2462,6 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
| min | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
|
||||
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
|
||||
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
|
||||
|
|
@ -3155,7 +3059,6 @@ None.
|
|||
| ref | <code>let</code> | Yes | <code>null | 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 |
|
||||
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "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 |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
|
|
@ -3198,10 +3101,9 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :---------------------------------------- | ----------------- | ------------------------------------ |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3608,7 +3510,6 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected structured list row value |
|
||||
| border | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |
|
||||
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
|
||||
| flush | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the list |
|
||||
| selection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the selection variant |
|
||||
|
|
@ -3746,10 +3647,9 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
|
||||
| rows | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
| border | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | -------------- | -------------------------- |
|
||||
| rows | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3842,14 +3742,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
|
||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
|
||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the table |
|
||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4354,7 +4253,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open list of options"</code> | Specify the ARIA label for the chevron icon |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>true</code> | -- |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the select element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select element |
|
||||
|
||||
|
|
@ -4471,59 +4369,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `ToggleSmall`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- |
|
||||
| toggled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
|
||||
| labelA | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
|
||||
| labelB | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| change | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
|
||||
## `ToggleSmallSkeleton`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `Toolbar`
|
||||
|
||||
### Props
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 171,
|
||||
"total": 165,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -472,17 +472,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "hasIconOnly",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for the icon-only variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
|
|
@ -506,7 +495,7 @@
|
|||
{
|
||||
"name": "tooltipAlignment",
|
||||
"kind": "let",
|
||||
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
|
||||
"description": "Set the alignment of the tooltip relative to the icon.\nOnly applies to icon-only buttons",
|
||||
"type": "\"start\" | \"center\" | \"end\"",
|
||||
"value": "\"center\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -681,16 +670,6 @@
|
|||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "small",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
|
|
@ -1813,17 +1792,6 @@
|
|||
"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": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -4659,36 +4627,6 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "a" }
|
||||
},
|
||||
{
|
||||
"moduleName": "HeaderActionSearch",
|
||||
"filePath": "src/UIShell/GlobalHeader/HeaderActionSearch.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "searchIsActive",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to focus the search",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "inputSearch",
|
||||
"detail": "{ action: \"search\"; textInput: string; }"
|
||||
},
|
||||
{ "type": "dispatched", "name": "focusInputSearch" },
|
||||
{ "type": "dispatched", "name": "focusOutInputSearch" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"componentComment": "\n@deprecated\nThis component is deprecated. Use `HeaderSearch` instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "HeaderGlobalAction",
|
||||
"filePath": "src/UIShell/HeaderGlobalAction.svelte",
|
||||
|
|
@ -4742,18 +4680,7 @@
|
|||
{
|
||||
"moduleName": "HeaderNav",
|
||||
"filePath": "src/UIShell/GlobalHeader/HeaderNav.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "ariaLabel",
|
||||
"kind": "let",
|
||||
"description": "Specify the ARIA label for the nav",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"props": [],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
|
|
@ -5037,80 +4964,6 @@
|
|||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "Icon",
|
||||
"filePath": "src/Icon/Icon.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "render",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon to render",
|
||||
"type": "typeof import(\"svelte\").SvelteComponent",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "skeleton",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to display the skeleton state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "IconSkeleton" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "IconSkeleton" },
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "mouseenter",
|
||||
"element": "IconSkeleton"
|
||||
},
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "svg" },
|
||||
"extends": {
|
||||
"interface": "IconSkeletonProps",
|
||||
"import": "\"./IconSkeleton.svelte\""
|
||||
},
|
||||
"componentComment": "\n@deprecated This component is deprecated.\nUse icons from \"carbon-icons-svelte\" instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "IconSkeleton",
|
||||
"filePath": "src/Icon/IconSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Set the size of the icon",
|
||||
"type": "number",
|
||||
"value": "16",
|
||||
"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" },
|
||||
"componentComment": "\n@deprecated This component is deprecated."
|
||||
},
|
||||
{
|
||||
"moduleName": "ImageLoader",
|
||||
"filePath": "src/ImageLoader/ImageLoader.svelte",
|
||||
|
|
@ -7073,61 +6926,6 @@
|
|||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "NotificationTextDetails",
|
||||
"filePath": "src/Notification/NotificationTextDetails.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "notificationType",
|
||||
"kind": "let",
|
||||
"description": "Set the type of notification",
|
||||
"type": "\"toast\" | \"inline\"",
|
||||
"value": "\"toast\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"kind": "let",
|
||||
"description": "Specify the title text",
|
||||
"type": "string",
|
||||
"value": "\"Title\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "subtitle",
|
||||
"kind": "let",
|
||||
"description": "Specify the subtitle text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "caption",
|
||||
"kind": "let",
|
||||
"description": "Specify the caption text",
|
||||
"type": "string",
|
||||
"value": "\"Caption\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"componentComment": "\n@deprecated This component is deprecated."
|
||||
},
|
||||
{
|
||||
"moduleName": "NumberInput",
|
||||
"filePath": "src/NumberInput/NumberInput.svelte",
|
||||
|
|
@ -7206,17 +7004,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "mobile",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the mobile variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "allowEmpty",
|
||||
"kind": "let",
|
||||
|
|
@ -9250,16 +9037,6 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "small",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -9468,16 +9245,6 @@
|
|||
"moduleName": "SearchSkeleton",
|
||||
"filePath": "src/Search/SearchSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "small",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -10602,17 +10369,6 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "border",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the bordered variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "condensed",
|
||||
"kind": "let",
|
||||
|
|
@ -10868,17 +10624,6 @@
|
|||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "border",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the bordered variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
|
|
@ -11118,17 +10863,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "shouldShowBorder",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for the bordered variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "sortable",
|
||||
"kind": "let",
|
||||
|
|
@ -12495,16 +12229,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "hideLabel",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "true",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
|
|
@ -12884,142 +12608,6 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ToggleSmall",
|
||||
"filePath": "src/ToggleSmall/ToggleSmall.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "toggled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to toggle the checkbox input",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable checkbox input",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelA",
|
||||
"kind": "let",
|
||||
"description": "Specify the label for the untoggled state",
|
||||
"type": "string",
|
||||
"value": "\"Off\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelB",
|
||||
"kind": "let",
|
||||
"description": "Specify the label for the toggled state",
|
||||
"type": "string",
|
||||
"value": "\"On\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
"description": "Set an id for the input element",
|
||||
"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 checkbox input",
|
||||
"type": "string",
|
||||
"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" },
|
||||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" },
|
||||
"componentComment": "\n@deprecated This component is deprecated.\nUse`<Toggle size=\"sm\" />` instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "ToggleSmallSkeleton",
|
||||
"filePath": "src/ToggleSmall/ToggleSmallSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
"description": "Set an id for the input element",
|
||||
"type": "string",
|
||||
"value": "\"ccs-\" + Math.random().toString(36)",
|
||||
"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" },
|
||||
"componentComment": "\n@deprecated This component is deprecated.\nUse`<ToggleSkeleton size=\"sm\" />` instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "Toolbar",
|
||||
"filePath": "src/DataTable/Toolbar.svelte",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
|
||||
import Theme from "../components/Theme.svelte";
|
||||
|
||||
const deprecated = ["ToggleSmall", "Icon"];
|
||||
const deprecated = [];
|
||||
const new_components = [];
|
||||
|
||||
let isOpen = false;
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
<script>
|
||||
import { Icon, InlineNotification, OutboundLink } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Add20 from "carbon-icons-svelte/lib/Add20";
|
||||
import Add24 from "carbon-icons-svelte/lib/Add24";
|
||||
import Add32 from "carbon-icons-svelte/lib/Add32";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
|
||||
<div>
|
||||
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default
|
||||
|
||||
<Icon render={Add16} />
|
||||
<Icon render={Add20} />
|
||||
<Icon render={Add24} />
|
||||
<Icon render={Add32} />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Icon skeleton render={Add16} />
|
||||
<Icon skeleton size={20} render={Add20} />
|
||||
<Icon skeleton size={24} render={Add24} />
|
||||
<Icon skeleton size={32} render={Add32} />
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
---
|
||||
components: ["ToggleSmall", "ToggleSmallSkeleton"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { ToggleSmall, ToggleSmallSkeleton, InlineNotification, Link } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
|
||||
<div>
|
||||
This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default (untoggled)
|
||||
|
||||
<ToggleSmall labelText="Push notifications" />
|
||||
|
||||
### Toggled
|
||||
|
||||
<ToggleSmall labelText="Push notifications" toggled />
|
||||
|
||||
### Custom labels
|
||||
|
||||
<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ToggleSmall labelText="Push notifications" disabled />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<ToggleSmallSkeleton />
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
|
||||
import { Toggle, CodeSnippet } from "carbon-components-svelte";
|
||||
|
||||
let toggled = false;
|
||||
|
||||
|
|
@ -7,9 +7,10 @@
|
|||
$: code = Array.from({ length }, (_, i) => i + 1).join("\n");
|
||||
</script>
|
||||
|
||||
<ToggleSmall
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
labelText="Trigger snippet overflow"
|
||||
<Toggle
|
||||
bind:toggled
|
||||
size="sm"
|
||||
labelText="Trigger snippet overflow"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
/>
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
|
|||
|
|
@ -190,12 +190,6 @@
|
|||
"Row": {
|
||||
"path": "carbon-components-svelte/src/Grid/Row.svelte"
|
||||
},
|
||||
"Icon": {
|
||||
"path": "carbon-components-svelte/src/Icon/Icon.svelte"
|
||||
},
|
||||
"IconSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Icon/IconSkeleton.svelte"
|
||||
},
|
||||
"Add16": {
|
||||
"path": "carbon-components-svelte/src/icons/Add16.svelte"
|
||||
},
|
||||
|
|
@ -376,9 +370,6 @@
|
|||
"NotificationIcon": {
|
||||
"path": "carbon-components-svelte/src/Notification/NotificationIcon.svelte"
|
||||
},
|
||||
"NotificationTextDetails": {
|
||||
"path": "carbon-components-svelte/src/Notification/NotificationTextDetails.svelte"
|
||||
},
|
||||
"ToastNotification": {
|
||||
"path": "carbon-components-svelte/src/Notification/ToastNotification.svelte"
|
||||
},
|
||||
|
|
@ -559,12 +550,6 @@
|
|||
"ToggleSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Toggle/ToggleSkeleton.svelte"
|
||||
},
|
||||
"ToggleSmall": {
|
||||
"path": "carbon-components-svelte/src/ToggleSmall/ToggleSmall.svelte"
|
||||
},
|
||||
"ToggleSmallSkeleton": {
|
||||
"path": "carbon-components-svelte/src/ToggleSmall/ToggleSmallSkeleton.svelte"
|
||||
},
|
||||
"Tooltip": {
|
||||
"path": "carbon-components-svelte/src/Tooltip/Tooltip.svelte"
|
||||
},
|
||||
|
|
@ -601,9 +586,6 @@
|
|||
"HeaderActionLink": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderActionLink.svelte"
|
||||
},
|
||||
"HeaderActionSearch": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderActionSearch.svelte"
|
||||
},
|
||||
"HeaderNav": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderNav.svelte"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,12 +25,6 @@
|
|||
*/
|
||||
export let isSelected = false;
|
||||
|
||||
/**
|
||||
* Set to `true` for the icon-only variant
|
||||
* @deprecated inferred using the $$slots API
|
||||
*/
|
||||
export let hasIconOnly = false;
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
|
|
@ -44,8 +38,8 @@
|
|||
export let iconDescription = undefined;
|
||||
|
||||
/**
|
||||
* Set the alignment of the tooltip relative to the icon
|
||||
* `hasIconOnly` must be set to `true`
|
||||
* Set the alignment of the tooltip relative to the icon.
|
||||
* Only applies to icon-only buttons
|
||||
* @type {"start" | "center" | "end"}
|
||||
*/
|
||||
export let tooltipAlignment = "center";
|
||||
|
|
|
|||
|
|
@ -10,12 +10,6 @@
|
|||
* @type {"default" | "field" | "small" | "lg" | "xl"}
|
||||
*/
|
||||
export let size = "default";
|
||||
|
||||
/**
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
* Use size="small" instead
|
||||
*/
|
||||
export let small = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
|
|
@ -27,7 +21,7 @@
|
|||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small' || small}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
@ -43,7 +37,7 @@
|
|||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small' || small}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@
|
|||
/** Set the selected index of the switch item */
|
||||
export let selectedIndex = 0;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @deprecated
|
||||
*/
|
||||
export let light = false;
|
||||
|
||||
/**
|
||||
* Specify the size of the content switcher
|
||||
* @type {"sm" | "xl"}
|
||||
|
|
@ -67,7 +61,6 @@
|
|||
<div
|
||||
role="tablist"
|
||||
class:bx--content-switcher="{true}"
|
||||
class:bx--content-switcher--light="{light}"
|
||||
class:bx--content-switcher--sm="{size === 'sm'}"
|
||||
class:bx--content-switcher--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@
|
|||
/** Set to `true` to use static width */
|
||||
export let useStaticWidth = false;
|
||||
|
||||
/**
|
||||
* Set to `true` for the bordered variant
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
*/
|
||||
export let shouldShowBorder = false;
|
||||
|
||||
/** Set to `true` for the sortable variant */
|
||||
export let sortable = false;
|
||||
|
||||
|
|
@ -35,7 +29,6 @@
|
|||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
>
|
||||
<slot />
|
||||
|
|
@ -51,7 +44,6 @@
|
|||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
{...$$restProps}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
<script>
|
||||
/**
|
||||
* @extends {"./IconSkeleton.svelte"} IconSkeletonProps
|
||||
* @restProps {svg}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let render = undefined;
|
||||
|
||||
/** Set to `true` to display the skeleton state */
|
||||
export let skeleton = false;
|
||||
|
||||
import IconSkeleton from "./IconSkeleton.svelte";
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
Use icons from "carbon-icons-svelte" instead.
|
||||
-->
|
||||
|
||||
{#if skeleton}
|
||||
<IconSkeleton
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
<svelte:component
|
||||
this="{render}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script>
|
||||
/** Set the size of the icon */
|
||||
export let size = 16;
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
-->
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--icon--skeleton="{true}"
|
||||
{...$$restProps}
|
||||
style="{$$restProps.style}; width: {size}px; height: {size}px"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
></div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as Icon } from "./Icon.svelte";
|
||||
export { default as IconSkeleton } from "./IconSkeleton.svelte";
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<script>
|
||||
/**
|
||||
* Set the type of notification
|
||||
* @type {"toast" | "inline"}
|
||||
*/
|
||||
export let notificationType = "toast";
|
||||
|
||||
/** Specify the title text */
|
||||
export let title = "Title";
|
||||
|
||||
/** Specify the subtitle text */
|
||||
export let subtitle = "";
|
||||
|
||||
/** Specify the caption text */
|
||||
export let caption = "Caption";
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
-->
|
||||
|
||||
{#if notificationType === "toast"}
|
||||
<div class:bx--toast-notification__details="{true}">
|
||||
<h3 class:bx--toast-notification__title="{true}">{title}</h3>
|
||||
<div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
|
||||
<div class:bx--toast-notification__caption="{true}">{caption}</div>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if notificationType === "inline"}
|
||||
<div class:bx--inline-notification__text-wrapper="{true}">
|
||||
<p class:bx--inline-notification__title="{true}">{title}</p>
|
||||
<div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -3,4 +3,3 @@ export { default as InlineNotification } from "./InlineNotification.svelte";
|
|||
export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
|
||||
export { default as NotificationButton } from "./NotificationButton.svelte";
|
||||
export { default as NotificationIcon } from "./NotificationIcon.svelte";
|
||||
export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte";
|
||||
|
|
|
|||
|
|
@ -39,12 +39,6 @@
|
|||
/** Set to `true` for the input to be read-only */
|
||||
export let readonly = false;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the mobile variant
|
||||
* @deprecated
|
||||
*/
|
||||
export let mobile = false;
|
||||
|
||||
/** Set to `true` to allow for an empty value */
|
||||
export let allowEmpty = false;
|
||||
|
||||
|
|
@ -174,158 +168,90 @@
|
|||
class:bx--number--light="{light}"
|
||||
class:bx--number--nolabel="{hideLabel}"
|
||||
class:bx--number--nosteppers="{hideSteppers}"
|
||||
class:bx--number--mobile="{mobile}"
|
||||
class="{size && `bx--number--${size}`}"
|
||||
>
|
||||
{#if mobile}
|
||||
{#if $$slots.label || label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--number__input-wrapper="{true}"
|
||||
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
||||
{#if $$slots.label || label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title="{decrementLabel}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title="{incrementLabel}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if $$slots.label || label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--number__input-wrapper="{true}"
|
||||
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-describedby="{errorId}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
aria-invalid="{invalid || undefined}"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--number__input-wrapper="{true}"
|
||||
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-describedby="{errorId}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
aria-invalid="{invalid || undefined}"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !error && !warn && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
|
|
@ -343,4 +269,4 @@
|
|||
<div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,7 +158,6 @@
|
|||
</span>
|
||||
{/if}
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top"
|
||||
|
|
@ -174,7 +173,6 @@
|
|||
}}"
|
||||
/>
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="end"
|
||||
tooltipPosition="top"
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@
|
|||
<ul class:bx--pagination-nav__list="{true}">
|
||||
<li class:bx--pagination-nav__list-item="{true}">
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="bottom"
|
||||
|
|
@ -129,7 +128,6 @@
|
|||
{/if}
|
||||
<li class:bx--pagination-nav__list-item="{true}">
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="bottom"
|
||||
|
|
|
|||
|
|
@ -10,12 +10,6 @@
|
|||
*/
|
||||
export let value = "";
|
||||
|
||||
/**
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
* Use size="sm" instead
|
||||
*/
|
||||
export let small = false;
|
||||
|
||||
/**
|
||||
* Specify the size of the search input
|
||||
* @type {"sm" | "lg" | "xl"}
|
||||
|
|
@ -86,7 +80,6 @@
|
|||
|
||||
{#if skeleton}
|
||||
<SearchSkeleton
|
||||
small="{small}"
|
||||
size="{size}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
@ -101,7 +94,7 @@
|
|||
class:bx--search="{true}"
|
||||
class:bx--search--light="{light}"
|
||||
class:bx--search--disabled="{disabled}"
|
||||
class:bx--search--sm="{size === 'sm' || small}"
|
||||
class:bx--search--sm="{size === 'sm'}"
|
||||
class:bx--search--lg="{size === 'lg'}"
|
||||
class:bx--search--xl="{size === 'xl'}"
|
||||
class:bx--search--expandable="{expandable}"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
<script>
|
||||
/**
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
* Set to `true` to use the small variant
|
||||
*/
|
||||
export let small = false;
|
||||
|
||||
/**
|
||||
* Specify the size of the search input
|
||||
* @type {"sm" | "lg" | "xl"}
|
||||
|
|
@ -15,7 +9,7 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--search--sm="{size === 'sm' || small}"
|
||||
class:bx--search--sm="{size === 'sm'}"
|
||||
class:bx--search--lg="{size === 'lg'}"
|
||||
class:bx--search--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@
|
|||
*/
|
||||
export let selected = undefined;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the bordered variant
|
||||
* @deprecated
|
||||
*/
|
||||
export let border = false;
|
||||
|
||||
/** Set to `true` to use the condensed variant */
|
||||
export let condensed = false;
|
||||
|
||||
|
|
@ -41,7 +35,6 @@
|
|||
<div
|
||||
role="table"
|
||||
class:bx--structured-list="{true}"
|
||||
class:bx--structured-list--border="{border}"
|
||||
class:bx--structured-list--selection="{selection}"
|
||||
class:bx--structured-list--condensed="{condensed}"
|
||||
class:bx--structured-list--flush="{flush}"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
<script>
|
||||
/** Specify the number of rows */
|
||||
export let rows = 5;
|
||||
|
||||
/** Set to `true` to use the bordered variant */
|
||||
export let border = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--structured-list="{true}"
|
||||
class:bx--structured-list--border="{border}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -14,12 +14,6 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* @deprecated The `hideLabel` prop for `TimePickerSelect` is no longer needed and has been deprecated. It will be removed in the next major release.
|
||||
* Set to `false` to show the label text
|
||||
*/
|
||||
export let hideLabel = true;
|
||||
|
||||
/** Set an id for the select element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
|
|
@ -58,9 +52,8 @@
|
|||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--visually-hidden="{true}"
|
||||
>
|
||||
<!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
<script>
|
||||
/** Set to `true` to toggle the checkbox input */
|
||||
export let toggled = false;
|
||||
|
||||
/** Set to `true` to disable checkbox input */
|
||||
export let disabled = false;
|
||||
|
||||
/** Specify the label for the untoggled state */
|
||||
export let labelA = "Off";
|
||||
|
||||
/** Specify the label for the toggled state */
|
||||
export let labelB = "On";
|
||||
|
||||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the checkbox input
|
||||
* @type {string}
|
||||
*/
|
||||
export let name = undefined;
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
Use`<Toggle size="sm" />` instead.
|
||||
-->
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked="{toggled}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
class:bx--toggle-input="{true}"
|
||||
class:bx--toggle-input--small="{true}"
|
||||
on:change
|
||||
on:change="{() => {
|
||||
toggled = !toggled;
|
||||
}}"
|
||||
on:keyup
|
||||
on:keyup="{(e) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
toggled = !toggled;
|
||||
}
|
||||
}}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
<label
|
||||
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
|
||||
for="{id}"
|
||||
class:bx--toggle-input__label="{true}"
|
||||
>
|
||||
{labelText}
|
||||
<span class:bx--toggle__switch="{true}">
|
||||
<svg
|
||||
width="6"
|
||||
height="5"
|
||||
viewBox="0 0 6 5"
|
||||
class:bx--toggle__check="{true}"
|
||||
>
|
||||
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
|
||||
</svg>
|
||||
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
|
||||
{labelA}
|
||||
</span>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
Use`<ToggleSkeleton size="sm" />` instead.
|
||||
-->
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="{id}"
|
||||
class:bx--toggle="{true}"
|
||||
class:bx--toggle--small="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
/>
|
||||
<label
|
||||
aria-label="{labelText
|
||||
? undefined
|
||||
: $$props['aria-label'] || 'Toggle is loading'}"
|
||||
class:bx--toggle__label="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
for="{id}"
|
||||
>
|
||||
{#if labelText}
|
||||
<span class:bx--toggle__label-text="{true}">{labelText}</span>
|
||||
{/if}
|
||||
<span class:bx--toggle__appearance="{true}">
|
||||
<svg
|
||||
class:bx--toggle__check="{true}"
|
||||
width="6"
|
||||
height="5"
|
||||
viewBox="0 0 6 5"
|
||||
>
|
||||
<path
|
||||
d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as ToggleSmall } from "./ToggleSmall.svelte";
|
||||
export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte";
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
<script>
|
||||
/**
|
||||
* @event {{ action: "search"; textInput: string; }} inputSearch
|
||||
*/
|
||||
|
||||
/** Set to `true` to focus the search */
|
||||
export let searchIsActive = false;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Close20 from "../../icons/Close20.svelte";
|
||||
import Search20 from "../../icons/Search20.svelte";
|
||||
import searchStore from "../searchStore";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let searchTabIndex = "0";
|
||||
let closeTabIndex = "-1";
|
||||
let elInput = undefined;
|
||||
let elTypeSearch = undefined;
|
||||
let isSearchFocus = false;
|
||||
|
||||
function dispatchInputs(event) {
|
||||
const params = {
|
||||
action: "search",
|
||||
textInput: event.target.value,
|
||||
};
|
||||
|
||||
dispatch("inputSearch", params);
|
||||
}
|
||||
|
||||
$: if (!searchIsActive) {
|
||||
if (elInput) {
|
||||
elInput.value = "";
|
||||
}
|
||||
searchStore.clear();
|
||||
}
|
||||
$: if (searchIsActive) {
|
||||
searchTabIndex = "-1";
|
||||
closeTabIndex = "0";
|
||||
} else {
|
||||
searchTabIndex = "0";
|
||||
closeTabIndex = "-1";
|
||||
}
|
||||
$: if (isSearchFocus) {
|
||||
elInput.focus();
|
||||
}
|
||||
$: showResults = $searchStore ? true : false;
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:mouseup="{({ target }) => {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
|
||||
<!-- @component
|
||||
@deprecated
|
||||
This component is deprecated. Use `HeaderSearch` instead.
|
||||
-->
|
||||
<div
|
||||
bind:this="{elTypeSearch}"
|
||||
role="search"
|
||||
class="search-wrapper"
|
||||
class:search-wrapper-hidden="{!searchIsActive}"
|
||||
class:search-focus="{isSearchFocus || searchIsActive}"
|
||||
>
|
||||
<div
|
||||
id="right-panel-action-search"
|
||||
class="search-wrapper-2"
|
||||
role="combobox"
|
||||
aria-expanded="{searchIsActive}"
|
||||
>
|
||||
<button
|
||||
tabindex="{searchTabIndex}"
|
||||
aria-label="Search"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-search="{true}"
|
||||
class:btn-search-disabled="{searchIsActive}"
|
||||
on:click="{() => {
|
||||
isSearchFocus = true;
|
||||
searchIsActive = true;
|
||||
dispatch('focusInputSearch');
|
||||
}}"
|
||||
type="button"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<svelte:component this="{Search20}" title="Search" tabindex="0" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{elInput}"
|
||||
id="input-search-field"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
tabindex="{closeTabIndex}"
|
||||
class="input-search"
|
||||
class:input-hidden="{!searchIsActive}"
|
||||
placeholder="Search"
|
||||
on:focus="{() => dispatch('focusInputSearch')}"
|
||||
on:focusout="{() => dispatch('focusOutInputSearch')}"
|
||||
on:input="{dispatchInputs}"
|
||||
/>
|
||||
<button
|
||||
id="right-panel-close-search"
|
||||
tabindex="{closeTabIndex}"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-clear="{true}"
|
||||
class:btn-clear-hidden="{!searchIsActive}"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
on:click="{() => {
|
||||
isSearchFocus = false;
|
||||
searchIsActive = false;
|
||||
searchStore.clear();
|
||||
}}"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<svelte:component this="{Close20}" title="Close" tabindex="0" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
margin-left: 0.5rem;
|
||||
height: 3rem;
|
||||
background-color: #393939;
|
||||
color: #fff;
|
||||
transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.search-wrapper-hidden {
|
||||
max-width: 3rem;
|
||||
background-color: #161616;
|
||||
}
|
||||
|
||||
.search-focus {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.search-wrapper-2 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid #393939;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.btn-search-disabled {
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-search {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
caret-color: #fff;
|
||||
background-color: initial;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.input-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
|
||||
.btn-clear-hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,6 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the ARIA label for the nav
|
||||
* @deprecated use "aria-label" instead
|
||||
* @type {string}
|
||||
*/
|
||||
export let ariaLabel = undefined;
|
||||
|
||||
$: props = {
|
||||
"aria-label": ariaLabel || $$props["aria-label"],
|
||||
"aria-label": $$props["aria-label"],
|
||||
"aria-labelledby": $$props["aria-labelledby"],
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
export { default as Header } from "./GlobalHeader/Header.svelte";
|
||||
export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte";
|
||||
export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.svelte";
|
||||
export { default as HeaderActionSearch } from "./GlobalHeader/HeaderActionSearch.svelte";
|
||||
export { default as HeaderNav } from "./GlobalHeader/HeaderNav.svelte";
|
||||
export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte";
|
||||
export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte";
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
import { writable } from "svelte/store";
|
||||
|
||||
const data = [
|
||||
{
|
||||
href: "#",
|
||||
title: "Test title search 1",
|
||||
menu: "Test menu 1",
|
||||
description: "This is a description for seach #1",
|
||||
},
|
||||
{
|
||||
href: "#",
|
||||
title: "Changing text to simulate search",
|
||||
menu: "Test menu 2",
|
||||
description: "This is a description for seach #2",
|
||||
},
|
||||
{
|
||||
href: "#",
|
||||
title: "More testing texts",
|
||||
menu: "Test menu 3",
|
||||
description: "This is a description for seach #3",
|
||||
},
|
||||
{
|
||||
href: "#",
|
||||
title: "We can find here another test text",
|
||||
menu: "Test menu 4",
|
||||
description: "This is a description for seach #4",
|
||||
},
|
||||
];
|
||||
|
||||
const globalStore = writable(undefined);
|
||||
|
||||
const store = {
|
||||
subscribe: globalStore.subscribe,
|
||||
search: (searchString) => {
|
||||
if (searchString.length > 1) {
|
||||
let resultSearch = [];
|
||||
|
||||
data.forEach((item) => {
|
||||
if (item.title.toLowerCase().includes(searchString.toLowerCase())) {
|
||||
resultSearch.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
if (resultSearch.length > 0) {
|
||||
globalStore.set(resultSearch);
|
||||
} else {
|
||||
globalStore.set(undefined);
|
||||
}
|
||||
} else {
|
||||
globalStore.set(undefined);
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
globalStore.set(undefined);
|
||||
},
|
||||
};
|
||||
|
||||
export default store;
|
||||
|
|
@ -54,7 +54,6 @@ export { FormGroup } from "./FormGroup";
|
|||
export { FormItem } from "./FormItem";
|
||||
export { FormLabel } from "./FormLabel";
|
||||
export { Grid, Row, Column } from "./Grid";
|
||||
export { Icon, IconSkeleton } from "./Icon";
|
||||
export { ImageLoader } from "./ImageLoader";
|
||||
export { InlineLoading } from "./InlineLoading";
|
||||
export { Link, OutboundLink } from "./Link";
|
||||
|
|
@ -77,7 +76,6 @@ export {
|
|||
NotificationActionButton,
|
||||
NotificationButton,
|
||||
NotificationIcon,
|
||||
NotificationTextDetails,
|
||||
} from "./Notification";
|
||||
export { NumberInput, NumberInputSkeleton } from "./NumberInput";
|
||||
export { OrderedList } from "./OrderedList";
|
||||
|
|
@ -123,7 +121,6 @@ export {
|
|||
} from "./Tile";
|
||||
export { TimePicker, TimePickerSelect } from "./TimePicker";
|
||||
export { Toggle, ToggleSkeleton } from "./Toggle";
|
||||
export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
|
||||
export { Tooltip, TooltipFooter } from "./Tooltip";
|
||||
export { TooltipDefinition } from "./TooltipDefinition";
|
||||
export { TooltipIcon } from "./TooltipIcon";
|
||||
|
|
@ -133,7 +130,6 @@ export {
|
|||
Header,
|
||||
HeaderAction,
|
||||
HeaderActionLink,
|
||||
HeaderActionSearch,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
|
||||
<Button
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
iconDescription="Tooltip text"
|
||||
|
|
|
|||
|
|
@ -1,32 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { ContentSwitcher, Switch } from "../types";
|
||||
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
|
||||
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
|
||||
</script>
|
||||
|
||||
<ContentSwitcher>
|
||||
<Switch text="Latest news" />
|
||||
<ContentSwitcher size="xl" selectedIndex="{1}">
|
||||
<Switch disabled text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
</ContentSwitcher>
|
||||
|
||||
<ContentSwitcher selectedIndex="{1}">
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
<Switch text="Recommended" />
|
||||
</ContentSwitcher>
|
||||
|
||||
<ContentSwitcher light>
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
</ContentSwitcher>
|
||||
|
||||
<ContentSwitcher>
|
||||
<Switch>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<Bullhorn16 style="margin-right: 0.5rem;" />
|
||||
Latest news
|
||||
</div>
|
||||
</Switch>
|
||||
<Switch>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<Analytics16 style="margin-right: 0.5rem;" />
|
||||
|
|
@ -34,22 +13,3 @@
|
|||
</div>
|
||||
</Switch>
|
||||
</ContentSwitcher>
|
||||
|
||||
<Bullhorn16 style="margin-right: 0.5rem;" />
|
||||
|
||||
<Analytics16 style="margin-right: 0.5rem;" />
|
||||
|
||||
<ContentSwitcher size="xl">
|
||||
<Switch text="All" />
|
||||
<Switch text="Archived" />
|
||||
</ContentSwitcher>
|
||||
|
||||
<ContentSwitcher size="sm">
|
||||
<Switch text="All" />
|
||||
<Switch text="Archived" />
|
||||
</ContentSwitcher>
|
||||
|
||||
<ContentSwitcher>
|
||||
<Switch disabled text="All" />
|
||||
<Switch disabled text="Archived" />
|
||||
</ContentSwitcher>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
<ToolbarContent>
|
||||
<ToolbarSearch
|
||||
shouldFilterRows="{(row, value) => {
|
||||
return true;
|
||||
return row.name.includes(value);
|
||||
}}"
|
||||
/>
|
||||
<ToolbarMenu>
|
||||
|
|
|
|||
|
|
@ -8,40 +8,17 @@
|
|||
{value}
|
||||
|
||||
<NumberInput
|
||||
disabled
|
||||
light
|
||||
min="{4}"
|
||||
max="{20}"
|
||||
value="{4}"
|
||||
label="Clusters"
|
||||
helperText="Clusters provisioned in your region"
|
||||
invalidText="Number must be between 4 and 20."
|
||||
on:change="{(e) => {
|
||||
console.log(e.detail); // null | number
|
||||
}}"
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Clusters"
|
||||
helperText="Clusters provisioned in your region"
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
min="{4}"
|
||||
max="{20}"
|
||||
value="{4}"
|
||||
invalidText="Number must be between 4 and 20."
|
||||
helperText="Clusters provisioned in your region"
|
||||
label="Clusters (4 min, 20 max)"
|
||||
/>
|
||||
|
||||
<NumberInput hideLabel label="Clusters" />
|
||||
|
||||
<NumberInput light label="Clusters" />
|
||||
|
||||
<NumberInput mobile label="Clusters" />
|
||||
|
||||
<NumberInput size="xl" label="Clusters" />
|
||||
|
||||
<NumberInput size="sm" label="Clusters" />
|
||||
|
||||
<NumberInput invalid invalidText="An error occurred" label="Clusters" />
|
||||
|
||||
<NumberInput disabled label="Clusters" />
|
||||
|
||||
<NumberInputSkeleton />
|
||||
|
||||
<NumberInputSkeleton hideLabel />
|
||||
|
|
|
|||
10
types/Button/Button.svelte.d.ts
vendored
10
types/Button/Button.svelte.d.ts
vendored
|
|
@ -38,12 +38,6 @@ export interface ButtonProps
|
|||
*/
|
||||
isSelected?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the icon-only variant
|
||||
* @default false
|
||||
*/
|
||||
hasIconOnly?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @default undefined
|
||||
|
|
@ -57,8 +51,8 @@ export interface ButtonProps
|
|||
iconDescription?: string;
|
||||
|
||||
/**
|
||||
* Set the alignment of the tooltip relative to the icon
|
||||
* `hasIconOnly` must be set to `true`
|
||||
* Set the alignment of the tooltip relative to the icon.
|
||||
* Only applies to icon-only buttons
|
||||
* @default "center"
|
||||
*/
|
||||
tooltipAlignment?: "start" | "center" | "end";
|
||||
|
|
|
|||
5
types/Button/ButtonSkeleton.svelte.d.ts
vendored
5
types/Button/ButtonSkeleton.svelte.d.ts
vendored
|
|
@ -14,11 +14,6 @@ export interface ButtonSkeletonProps
|
|||
* @default "default"
|
||||
*/
|
||||
size?: "default" | "field" | "small" | "lg" | "xl";
|
||||
|
||||
/**
|
||||
* @default false
|
||||
*/
|
||||
small?: boolean;
|
||||
}
|
||||
|
||||
export default class ButtonSkeleton extends SvelteComponentTyped<
|
||||
|
|
|
|||
|
|
@ -9,12 +9,6 @@ export interface ContentSwitcherProps
|
|||
*/
|
||||
selectedIndex?: number;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the size of the content switcher
|
||||
* @default undefined
|
||||
|
|
|
|||
32
types/Copy/Copy.svelte.d.ts
vendored
32
types/Copy/Copy.svelte.d.ts
vendored
|
|
@ -1,32 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface CopyProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
|
||||
/**
|
||||
* Set the feedback text shown after clicking the button
|
||||
* @default "Copied!"
|
||||
*/
|
||||
feedback?: string;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to display feedback text
|
||||
* @default 2000
|
||||
*/
|
||||
feedbackTimeout?: number;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
}
|
||||
|
||||
export default class Copy extends SvelteComponentTyped<
|
||||
CopyProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
animationend: WindowEventMap["animationend"];
|
||||
},
|
||||
{ default: {} }
|
||||
> {}
|
||||
6
types/DataTable/Table.svelte.d.ts
vendored
6
types/DataTable/Table.svelte.d.ts
vendored
|
|
@ -21,12 +21,6 @@ export interface TableProps
|
|||
*/
|
||||
useStaticWidth?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the bordered variant
|
||||
* @default false
|
||||
*/
|
||||
shouldShowBorder?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the sortable variant
|
||||
* @default false
|
||||
|
|
|
|||
34
types/Icon/Icon.svelte.d.ts
vendored
34
types/Icon/Icon.svelte.d.ts
vendored
|
|
@ -1,34 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import { IconSkeletonProps } from "./IconSkeleton.svelte";
|
||||
|
||||
export interface IconProps
|
||||
extends IconSkeletonProps,
|
||||
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @default undefined
|
||||
*/
|
||||
render?: typeof import("svelte").SvelteComponent;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated This component is deprecated.
|
||||
* Use icons from "carbon-icons-svelte" instead.
|
||||
*/
|
||||
export default class Icon extends SvelteComponentTyped<
|
||||
IconProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
25
types/Icon/IconSkeleton.svelte.d.ts
vendored
25
types/Icon/IconSkeleton.svelte.d.ts
vendored
|
|
@ -1,25 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface IconSkeletonProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set the size of the icon
|
||||
* @default 16
|
||||
*/
|
||||
size?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated This component is deprecated.
|
||||
*/
|
||||
export default class IconSkeleton extends SvelteComponentTyped<
|
||||
IconSkeletonProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface NotificationTextDetailsProps {
|
||||
/**
|
||||
* Set the type of notification
|
||||
* @default "toast"
|
||||
*/
|
||||
notificationType?: "toast" | "inline";
|
||||
|
||||
/**
|
||||
* Specify the title text
|
||||
* @default "Title"
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the subtitle text
|
||||
* @default ""
|
||||
*/
|
||||
subtitle?: string;
|
||||
|
||||
/**
|
||||
* Specify the caption text
|
||||
* @default "Caption"
|
||||
*/
|
||||
caption?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated This component is deprecated.
|
||||
*/
|
||||
export default class NotificationTextDetails extends SvelteComponentTyped<
|
||||
NotificationTextDetailsProps,
|
||||
{},
|
||||
{ default: {} }
|
||||
> {}
|
||||
6
types/NumberInput/NumberInput.svelte.d.ts
vendored
6
types/NumberInput/NumberInput.svelte.d.ts
vendored
|
|
@ -48,12 +48,6 @@ export interface NumberInputProps
|
|||
*/
|
||||
readonly?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the mobile variant
|
||||
* @default false
|
||||
*/
|
||||
mobile?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to allow for an empty value
|
||||
* @default false
|
||||
|
|
|
|||
5
types/Search/Search.svelte.d.ts
vendored
5
types/Search/Search.svelte.d.ts
vendored
|
|
@ -8,11 +8,6 @@ export interface SearchProps {
|
|||
*/
|
||||
value?: any;
|
||||
|
||||
/**
|
||||
* @default false
|
||||
*/
|
||||
small?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the size of the search input
|
||||
* @default "xl"
|
||||
|
|
|
|||
5
types/Search/SearchSkeleton.svelte.d.ts
vendored
5
types/Search/SearchSkeleton.svelte.d.ts
vendored
|
|
@ -3,11 +3,6 @@ import { SvelteComponentTyped } from "svelte";
|
|||
|
||||
export interface SearchSkeletonProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* @default false
|
||||
*/
|
||||
small?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the size of the search input
|
||||
* @default "xl"
|
||||
|
|
|
|||
|
|
@ -9,12 +9,6 @@ export interface StructuredListProps
|
|||
*/
|
||||
selected?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the bordered variant
|
||||
* @default false
|
||||
*/
|
||||
border?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the condensed variant
|
||||
* @default false
|
||||
|
|
|
|||
|
|
@ -8,12 +8,6 @@ export interface StructuredListSkeletonProps
|
|||
* @default 5
|
||||
*/
|
||||
rows?: number;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the bordered variant
|
||||
* @default false
|
||||
*/
|
||||
border?: boolean;
|
||||
}
|
||||
|
||||
export default class StructuredListSkeleton extends SvelteComponentTyped<
|
||||
|
|
|
|||
|
|
@ -27,11 +27,6 @@ export interface TimePickerSelectProps
|
|||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* @default true
|
||||
*/
|
||||
hideLabel?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the select element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
|
|
|
|||
66
types/ToggleSmall/ToggleSmall.svelte.d.ts
vendored
66
types/ToggleSmall/ToggleSmall.svelte.d.ts
vendored
|
|
@ -1,66 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ToggleSmallProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to toggle the checkbox input
|
||||
* @default false
|
||||
*/
|
||||
toggled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable checkbox input
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the label for the untoggled state
|
||||
* @default "Off"
|
||||
*/
|
||||
labelA?: string;
|
||||
|
||||
/**
|
||||
* Specify the label for the toggled state
|
||||
* @default "On"
|
||||
*/
|
||||
labelB?: string;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the checkbox input
|
||||
* @default undefined
|
||||
*/
|
||||
name?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated This component is deprecated.
|
||||
* Use`<Toggle size="sm" />` instead.
|
||||
*/
|
||||
export default class ToggleSmall extends SvelteComponentTyped<
|
||||
ToggleSmallProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
change: WindowEventMap["change"];
|
||||
keyup: WindowEventMap["keyup"];
|
||||
focus: WindowEventMap["focus"];
|
||||
blur: WindowEventMap["blur"];
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ToggleSmallSkeletonProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated This component is deprecated.
|
||||
* Use`<ToggleSkeleton size="sm" />` instead.
|
||||
*/
|
||||
export default class ToggleSmallSkeleton extends SvelteComponentTyped<
|
||||
ToggleSmallSkeletonProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface HeaderActionSearchProps {
|
||||
/**
|
||||
* Set to `true` to focus the search
|
||||
* @default false
|
||||
*/
|
||||
searchIsActive?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
* This component is deprecated. Use `HeaderSearch` instead.
|
||||
*/
|
||||
export default class HeaderActionSearch extends SvelteComponentTyped<
|
||||
HeaderActionSearchProps,
|
||||
{
|
||||
inputSearch: CustomEvent<{ action: "search"; textInput: string }>;
|
||||
focusInputSearch: CustomEvent<any>;
|
||||
focusOutInputSearch: CustomEvent<any>;
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
|
|
@ -2,13 +2,7 @@
|
|||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface HeaderNavProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
|
||||
/**
|
||||
* Specify the ARIA label for the nav
|
||||
* @default undefined
|
||||
*/
|
||||
ariaLabel?: string;
|
||||
}
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {}
|
||||
|
||||
export default class HeaderNav extends SvelteComponentTyped<
|
||||
HeaderNavProps,
|
||||
|
|
|
|||
6
types/index.d.ts
vendored
6
types/index.d.ts
vendored
|
|
@ -60,8 +60,6 @@ export { default as FormLabel } from "./FormLabel/FormLabel.svelte";
|
|||
export { default as Grid } from "./Grid/Grid.svelte";
|
||||
export { default as Row } from "./Grid/Row.svelte";
|
||||
export { default as Column } from "./Grid/Column.svelte";
|
||||
export { default as Icon } from "./Icon/Icon.svelte";
|
||||
export { default as IconSkeleton } from "./Icon/IconSkeleton.svelte";
|
||||
export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte";
|
||||
export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte";
|
||||
export { default as Link } from "./Link/Link.svelte";
|
||||
|
|
@ -82,7 +80,6 @@ export { default as InlineNotification } from "./Notification/InlineNotification
|
|||
export { default as NotificationActionButton } from "./Notification/NotificationActionButton.svelte";
|
||||
export { default as NotificationButton } from "./Notification/NotificationButton.svelte";
|
||||
export { default as NotificationIcon } from "./Notification/NotificationIcon.svelte";
|
||||
export { default as NotificationTextDetails } from "./Notification/NotificationTextDetails.svelte";
|
||||
export { default as NumberInput } from "./NumberInput/NumberInput.svelte";
|
||||
export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton.svelte";
|
||||
export { default as OrderedList } from "./OrderedList/OrderedList.svelte";
|
||||
|
|
@ -139,8 +136,6 @@ export { default as TimePicker } from "./TimePicker/TimePicker.svelte";
|
|||
export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect.svelte";
|
||||
export { default as Toggle } from "./Toggle/Toggle.svelte";
|
||||
export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton.svelte";
|
||||
export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall.svelte";
|
||||
export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton.svelte";
|
||||
export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
|
||||
export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
|
||||
export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
|
||||
|
|
@ -150,7 +145,6 @@ export { default as Truncate } from "./Truncate/Truncate.svelte";
|
|||
export { default as Header } from "./UIShell/GlobalHeader/Header.svelte";
|
||||
export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction.svelte";
|
||||
export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink.svelte";
|
||||
export { default as HeaderActionSearch } from "./UIShell/GlobalHeader/HeaderActionSearch.svelte";
|
||||
export { default as HeaderNav } from "./UIShell/GlobalHeader/HeaderNav.svelte";
|
||||
export { default as HeaderNavItem } from "./UIShell/GlobalHeader/HeaderNavItem.svelte";
|
||||
export { default as HeaderNavMenu } from "./UIShell/GlobalHeader/HeaderNavMenu.svelte";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue