mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

v0.14.0

Browse source
This commit is contained in:
Eric Liu 2020-09-23 18:04:38 -07:00
commit 13ca3bb4c6
4 changed files with 113 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

19
CHANGELOG.md
View file

@ -9,6 +9,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Selectable/expandable `DataTable` - Selectable/expandable `DataTable`
## [0.14.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.14.0) - 2020-09-23
**Features**
- `Modal`, `ComposedModal`: add `preventCloseOnClickOutside` prop
- `Modal`: add `alert` prop to support alertdialog ARIA role ([PR #273](https://github.com/IBM/carbon-components-svelte/pull/273), thanks [@josefaidt](https://github.com/josefaidt))
- `TextInput`: add `warn` prop ([PR #275](https://github.com/IBM/carbon-components-svelte/pull/275), thanks [@josefaidt](https://github.com/josefaidt))
- `TextInput`: add `inline` prop ([PR #277](https://github.com/IBM/carbon-components-svelte/pull/277), thanks [@josefaidt](https://github.com/josefaidt))
**Fixes**
- `DataTableSkeleton`: add `showHeader`, `showToolbar` props
- `OverflowMenu`: focus menu button on escape key only
- `DataTable`: fix `headers` JSDoc type annotation ([PR #271](https://github.com/IBM/carbon-components-svelte/pull/271), thanks [@albertms10](https://github.com/albertms10))
**Breaking Changes**
- `DataTableSkeleton`: `showHeader` and `showToolbar` are `true` by default
## [0.13.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.13.0) - 2020-09-18 ## [0.13.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.13.0) - 2020-09-18
**Features** **Features**

80
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index # Component Index
> 144 components exported from carbon-components-svelte 0.13.0 > 144 components exported from carbon-components-svelte 0.14.0
- Accordion - Accordion
- [AccordionSkeleton](#accordionskeleton) - [AccordionSkeleton](#accordionskeleton)
@ -780,14 +780,15 @@ import { ComposedModal } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | | Prop name | Type | Default value |
| :------------------- | :---------------------------------------- | :--------------------------- | | :------------------------- | :---------------------------------------- | :--------------------------- |
| size | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- | | size | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- |
| open | <code>boolean</code> | false | | open | <code>boolean</code> | false |
| danger | <code>boolean</code> | false | | danger | <code>boolean</code> | false |
| containerClass | <code>string</code> | "" | | preventCloseOnClickOutside | <code>boolean</code> | false |
| selectorPrimaryFocus | <code>string</code> | "[data-modal-primary-focus]" | | containerClass | <code>string</code> | "" |
| ref | <code>null &#124; HTMLElement</code> | null | | selectorPrimaryFocus | <code>string</code> | "[data-modal-primary-focus]" |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots ### Slots
@ -941,7 +942,7 @@ import { DataTable } from "carbon-components-svelte";
| Prop name | Type | Default value | | Prop name | Type | Default value |
| :----------- | :-------------------------------------------------- | :------------ | | :----------- | :-------------------------------------------------- | :------------ |
| headers | <code>{key: string; value: string;}</code> | -- | | headers | <code>{key: string; value: string;}[]</code> | -- |
| rows | <code>Object[]</code> | -- | | rows | <code>Object[]</code> | -- |
| size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | | size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- |
| title | <code>string</code> | "" | | title | <code>string</code> | "" |
@ -977,13 +978,15 @@ import { DataTableSkeleton } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | | Prop name | Type | Default value |
| :-------- | :-------------------- | :------------ | | :---------- | :-------------------- | :------------ |
| columns | <code>number</code> | 5 | | columns | <code>number</code> | 5 |
| rows | <code>number</code> | 5 | | rows | <code>number</code> | 5 |
| compact | <code>boolean</code> | false | | compact | <code>boolean</code> | false |
| zebra | <code>boolean</code> | false | | zebra | <code>boolean</code> | false |
| headers | <code>string[]</code> | -- | | showHeader | <code>boolean</code> | true |
| headers | <code>string[]</code> | -- |
| showToolbar | <code>boolean</code> | true |
### Slots ### Slots
@ -2387,25 +2390,27 @@ import { Modal } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | | Prop name | Type | Default value |
| :-------------------- | :---------------------------------------- | :--------------------------- | | :------------------------- | :---------------------------------------- | :--------------------------- |
| size | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- | | size | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- |
| open | <code>boolean</code> | false | | open | <code>boolean</code> | false |
| danger | <code>boolean</code> | false | | danger | <code>boolean</code> | false |
| passiveModal | <code>boolean</code> | false | | alert | <code>boolean</code> | false |
| modalHeading | <code>string</code> | -- | | passiveModal | <code>boolean</code> | false |
| modalLabel | <code>string</code> | -- | | modalHeading | <code>string</code> | -- |
| modalAriaLabel | <code>string</code> | -- | | modalLabel | <code>string</code> | -- |
| iconDescription | <code>string</code> | "Close the modal" | | modalAriaLabel | <code>string</code> | -- |
| hasForm | <code>boolean</code> | false | | iconDescription | <code>string</code> | "Close the modal" |
| hasScrollingContent | <code>boolean</code> | false | | hasForm | <code>boolean</code> | false |
| primaryButtonText | <code>string</code> | "" | | hasScrollingContent | <code>boolean</code> | false |
| primaryButtonDisabled | <code>boolean</code> | false | | primaryButtonText | <code>string</code> | "" |
| shouldSubmitOnEnter | <code>boolean</code> | true | | primaryButtonDisabled | <code>boolean</code> | false |
| secondaryButtonText | <code>string</code> | "" | | shouldSubmitOnEnter | <code>boolean</code> | true |
| selectorPrimaryFocus | <code>string</code> | "[data-modal-primary-focus]" | | secondaryButtonText | <code>string</code> | "" |
| id | <code>string</code> | -- | | selectorPrimaryFocus | <code>string</code> | "[data-modal-primary-focus]" |
| ref | <code>null &#124; HTMLElement</code> | null | | preventCloseOnClickOutside | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots ### Slots
@ -4673,8 +4678,11 @@ import { TextInput } from "carbon-components-svelte";
| hideLabel | <code>boolean</code> | false | | hideLabel | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false | | invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" | | invalidText | <code>string</code> | "" |
| warn | <code>boolean</code> | false |
| warnText | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null | | ref | <code>null &#124; HTMLInputElement</code> | null |
| required | <code>boolean</code> | false | | required | <code>boolean</code> | false |
| inline | <code>boolean</code> | false |
### Slots ### Slots

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "carbon-components-svelte", "name": "carbon-components-svelte",
"version": "0.13.0", "version": "0.14.0",
"license": "Apache-2.0", "license": "Apache-2.0",
"description": "Svelte implementation of the Carbon Design System", "description": "Svelte implementation of the Carbon Design System",
"svelte": "./src/index.js", "svelte": "./src/index.js",

50
types/index.d.ts vendored
View file

@ -1,4 +1,4 @@
// Type definitions for carbon-components-svelte 0.13.0 // Type definitions for carbon-components-svelte 0.14.0
// Project: https://github.com/IBM/carbon-components-svelte // Project: https://github.com/IBM/carbon-components-svelte
export class CarbonSvelteComponent { export class CarbonSvelteComponent {
@ -630,6 +630,12 @@ export class ComposedModal extends CarbonSvelteComponent {
*/ */
danger?: boolean; danger?: boolean;
/**
* Set to `true` to prevent the modal from closing when clicking outside
* @default false
*/
preventCloseOnClickOutside?: boolean;
/** /**
* Specify a class for the inner modal * Specify a class for the inner modal
* @default "" * @default ""
@ -794,11 +800,23 @@ export class DataTableSkeleton extends CarbonSvelteComponent {
*/ */
zebra?: boolean; zebra?: boolean;
/**
* Set to `false` to hide the header
* @default true
*/
showHeader?: boolean;
/** /**
* Set the column headers * Set the column headers
* If `headers` has one more items, `count` is ignored * If `headers` has one more items, `count` is ignored
*/ */
headers?: string[]; headers?: string[];
/**
* Set to `false` to hide the toolbar
* @default true
*/
showToolbar?: boolean;
}; };
} }
@ -2084,6 +2102,12 @@ export class Modal extends CarbonSvelteComponent {
*/ */
danger?: boolean; danger?: boolean;
/**
* Set to `true` to enable alert mode
* @default false
*/
alert?: boolean;
/** /**
* Set to `true` to use the passive variant * Set to `true` to use the passive variant
* @default false * @default false
@ -2153,6 +2177,12 @@ export class Modal extends CarbonSvelteComponent {
*/ */
selectorPrimaryFocus?: string; selectorPrimaryFocus?: string;
/**
* Set to `true` to prevent the modal from closing when clicking outside
* @default false
*/
preventCloseOnClickOutside?: boolean;
/** /**
* Set an id for the top-level element * Set an id for the top-level element
*/ */
@ -4428,6 +4458,18 @@ export class TextInput extends CarbonSvelteComponent {
*/ */
invalidText?: string; invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/** /**
* Obtain a reference to the input HTML element * Obtain a reference to the input HTML element
* @default null * @default null
@ -4439,6 +4481,12 @@ export class TextInput extends CarbonSvelteComponent {
* @default false * @default false
*/ */
required?: boolean; required?: boolean;
/**
* Set to `true` to use inline version
* @default false
*/
inline?: boolean;
}; };
} }