diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 44a9a19e..70e104f5 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 144 components exported from carbon-components-svelte 0.14.0 +> 147 components exported from carbon-components-svelte 0.14.0 - Accordion - [AccordionSkeleton](#accordionskeleton) @@ -42,17 +42,20 @@ - [TableRow](#tablerow) - [DataTableSkeleton](#datatableskeleton) - DatePicker + - [DatePickerSkeleton](#datepickerskeleton) - [DatePicker](#datepicker) - [DatePickerInput](#datepickerinput) - Dropdown - [DropdownSkeleton](#dropdownskeleton) - [Dropdown](#dropdown) - FileUploader + - [FileUploaderSkeleton](#fileuploaderskeleton) - [FileUploader](#fileuploader) - [FileUploaderButton](#fileuploaderbutton) - [FileUploaderDropContainer](#fileuploaderdropcontainer) - [FileUploaderItem](#fileuploaderitem) - [Filename](#filename) +- [FluidForm](#fluidform) - [Form](#form) - [FormGroup](#formgroup) - [FormItem](#formitem) @@ -978,15 +981,15 @@ import { DataTableSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :-------------------- | :------------ | -| columns | number | 5 | -| rows | number | 5 | -| compact | boolean | false | -| zebra | boolean | false | -| showHeader | boolean | true | -| headers | string[] | -- | -| showToolbar | boolean | true | +| Prop name | Type | Default value | +| :---------- | :-------------------------------------------------- | :------------ | +| columns | number | 5 | +| rows | number | 5 | +| size | "compact" | "short" | "tall" | -- | +| zebra | boolean | false | +| showHeader | boolean | true | +| headers | string[] | -- | +| showToolbar | boolean | true | ### Slots @@ -1087,6 +1090,38 @@ No dispatched events. --- +## DatePickerSkeleton + +### Import path + +```js +import { DatePickerSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| range | boolean | false | +| id | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + ## Dropdown ### Import path @@ -1385,6 +1420,35 @@ No slots. --- +## FileUploaderSkeleton + +### Import path + +```js +import { FileUploaderSkeleton } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + ## Filename ### Import path @@ -1416,6 +1480,32 @@ No dispatched events. --- +## FluidForm + +### Import path + +```js +import { FluidForm } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + ## Form ### Import path @@ -1584,14 +1674,15 @@ import { Header } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------------- | :------------------- | :------------ | -| expandedByDefault | boolean | true | -| isSideNavOpen | boolean | false | -| uiShellAriaLabel | string | -- | -| href | string | -- | -| company | string | -- | -| platformName | string | -- | +| Prop name | Type | Default value | +| :---------------- | :----------------------------------------- | :------------ | +| expandedByDefault | boolean | true | +| isSideNavOpen | boolean | false | +| uiShellAriaLabel | string | -- | +| href | string | -- | +| company | string | -- | +| platformName | string | -- | +| ref | null | HTMLAnchorElement | null | ### Slots @@ -1653,6 +1744,7 @@ import { HeaderActionLink } from "carbon-components-svelte"; | linkIsActive | boolean | false | | href | string | -- | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | +| ref | null | HTMLAnchorElement | null | ### Slots @@ -1766,10 +1858,11 @@ import { HeaderNavItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| href | string | -- | -| text | string | -- | +| Prop name | Type | Default value | +| :-------- | :----------------------------------------- | :------------ | +| href | string | -- | +| text | string | -- | +| ref | null | HTMLAnchorElement | null | ### Slots @@ -1802,12 +1895,13 @@ import { HeaderNavMenu } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------- | :---------------- | -| expanded | boolean | false | -| href | string | "/" | -| text | string | -- | -| iconDescription | string | "Expand/Collapse" | +| Prop name | Type | Default value | +| :-------------- | :----------------------------------------- | :---------------- | +| expanded | boolean | false | +| href | string | "/" | +| text | string | -- | +| ref | null | HTMLAnchorElement | null | +| iconDescription | string | "Expand/Collapse" | ### Slots @@ -1866,9 +1960,10 @@ import { HeaderPanelLink } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| href | string | -- | +| Prop name | Type | Default value | +| :-------- | :----------------------------------------- | :------------ | +| href | string | -- | +| ref | null | HTMLAnchorElement | null | ### Slots @@ -1876,7 +1971,7 @@ import { HeaderPanelLink } from "carbon-components-svelte"; ### Forwarded events -No forwarded events. +- `on:click` ### Dispatched events @@ -3669,6 +3764,7 @@ import { SideNavLink } from "carbon-components-svelte"; | href | string | -- | | text | string | -- | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | +| ref | null | HTMLAnchorElement | null | ### Slots @@ -3699,6 +3795,7 @@ import { SideNavMenu } from "carbon-components-svelte"; | expanded | boolean | false | | text | string | -- | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | +| ref | null | HTMLButtonElement | null | ### Slots @@ -3724,11 +3821,12 @@ import { SideNavMenuItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------- | :------------------- | :------------ | -| isSelected | boolean | -- | -| href | string | -- | -| text | string | -- | +| Prop name | Type | Default value | +| :--------- | :----------------------------------------- | :------------ | +| isSelected | boolean | -- | +| href | string | -- | +| text | string | -- | +| ref | null | HTMLAnchorElement | null | ### Slots @@ -3848,7 +3946,7 @@ import { Slider } from "carbon-components-svelte"; | Prop name | Type | Default value | | :------------- | :----------------------------------- | :------------ | -| value | string | "" | +| value | number | 0 | | max | number | 100 | | maxLabel | string | "" | | min | number | 0 | diff --git a/src/DatePicker/index.js b/src/DatePicker/index.js index 5e19fa24..fcf3d9c1 100644 --- a/src/DatePicker/index.js +++ b/src/DatePicker/index.js @@ -1,2 +1,3 @@ export { default as DatePicker } from "./DatePicker.svelte"; export { default as DatePickerInput } from "./DatePickerInput.svelte"; +export { default as DatePickerSkeleton } from "./DatePicker.Skeleton.svelte"; diff --git a/src/FileUploader/index.js b/src/FileUploader/index.js index 0163dd0a..2a32c461 100644 --- a/src/FileUploader/index.js +++ b/src/FileUploader/index.js @@ -3,3 +3,4 @@ export { default as FileUploaderButton } from "./FileUploaderButton.svelte"; export { default as FileUploaderItem } from "./FileUploaderItem.svelte"; export { default as FileUploaderDropContainer } from "./FileUploaderDropContainer.svelte"; export { default as Filename } from "./Filename.svelte"; +export { default as FileUploaderSkeleton } from "./FileUploader.Skeleton.svelte"; diff --git a/src/index.js b/src/index.js index 90959bdc..48e844d9 100644 --- a/src/index.js +++ b/src/index.js @@ -24,7 +24,7 @@ export { TableRow, } from "./DataTable"; export { DataTableSkeleton } from "./DataTableSkeleton"; -export { DatePicker, DatePickerInput } from "./DatePicker"; +export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker"; export { Dropdown, DropdownSkeleton } from "./Dropdown"; export { FileUploader, @@ -32,6 +32,7 @@ export { FileUploaderItem, FileUploaderDropContainer, Filename, + FileUploaderSkeleton, } from "./FileUploader"; export { Form } from "./Form"; export { FluidForm } from "./FluidForm"; diff --git a/types/index.d.ts b/types/index.d.ts index 7de82611..f4ee1265 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -962,6 +962,21 @@ export class DatePickerInput extends CarbonSvelteComponent { }; } +export class DatePickerSkeleton extends CarbonSvelteComponent { + $$prop_def: { + /** + * Set to `true` to use the range variant + * @default false + */ + range?: boolean; + + /** + * Set an id to be used by the label element + */ + id?: string; + }; +} + type DropdownItemId = string; type DropdownItemText = string; @@ -1389,6 +1404,8 @@ export class FileUploaderItem extends CarbonSvelteComponent { }; } +export class FileUploaderSkeleton extends CarbonSvelteComponent {} + export class Filename extends CarbonSvelteComponent { $$prop_def: { /** @@ -1411,6 +1428,10 @@ export class Filename extends CarbonSvelteComponent { }; } +export class FluidForm extends CarbonSvelteComponent { + $$slot_def: { default: {} }; +} + export class Form extends CarbonSvelteComponent { $$slot_def: { default: {} }; } @@ -1543,6 +1564,12 @@ export class Header extends CarbonSvelteComponent { * Alternatively, use the named slot "platform" (e.g. ...) */ platformName?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; }; $$slot_def: { "skip-to-content": {}; platform: {}; default: {} }; @@ -1600,6 +1627,12 @@ export class HeaderActionLink extends CarbonSvelteComponent { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; }; } @@ -1658,6 +1691,12 @@ export class HeaderNavItem extends CarbonSvelteComponent { * Specify the text */ text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; }; } @@ -1680,6 +1719,12 @@ export class HeaderNavMenu extends CarbonSvelteComponent { */ text?: string; + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + /** * Specify the ARIA label for the chevron icon * @default "Expand/Collapse" @@ -1700,6 +1745,12 @@ export class HeaderPanelLink extends CarbonSvelteComponent { * Specify the `href` attribute */ href?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; }; $$slot_def: { default: {} }; @@ -3653,6 +3704,12 @@ export class SideNavLink extends CarbonSvelteComponent { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; }; } @@ -3676,6 +3733,12 @@ export class SideNavMenu extends CarbonSvelteComponent { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; }; $$slot_def: { default: {} }; @@ -3697,6 +3760,12 @@ export class SideNavMenuItem extends CarbonSvelteComponent { * Specify the item text */ text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; }; } @@ -3752,9 +3821,9 @@ export class Slider extends CarbonSvelteComponent { $$prop_def: { /** * Specify the value of the slider - * @default "" + * @default 0 */ - value?: string; + value?: number; /** * Set the maximum slider value