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

Merge pull request #1 from carbon-design-system/master

Browse source 
merge
This commit is contained in:
Osman Nuri Okumuş 2024-11-04 18:09:00 +03:00 • committed by GitHub
commit ba845ed037
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 133 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -2,6 +2,12 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [0.85.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.2...v0.85.3) (2024-10-25)
### Bug Fixes
- address Svelte 5 warnings ([#2011](https://github.com/carbon-design-system/carbon-components-svelte/issues/2011)) ([43fccac](https://github.com/carbon-design-system/carbon-components-svelte/commit/43fccac1c6273d9aa83b8c26a5f8cecec667db59))
### [0.85.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.1...v0.85.2) (2024-08-14) ### [0.85.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.1...v0.85.2) (2024-08-14)
### Bug Fixes ### Bug Fixes

48
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index # Component Index
> 165 components exported from carbon-components-svelte@0.85.2. > 165 components exported from carbon-components-svelte@0.85.3.
## Components ## Components
@ -697,12 +697,12 @@ export interface ComboBoxItem {
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------- | | :--------- | :--------- | :---------------------------------------------------------------------- |
| select | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> | | select | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> |
| clear | dispatched | <code>KeyboardEvent &#124; MouseEvent</code> |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| keyup | forwarded | -- | | keyup | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
| paste | forwarded | -- | | paste | forwarded | -- |
| clear | forwarded | -- |
| scroll | forwarded | -- | | scroll | forwarded | -- |
## `ComposedModal` ## `ComposedModal`
@ -933,7 +933,7 @@ export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader {
key: DataTableKey; key: DataTableKey;
empty: boolean; empty: boolean;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
@ -943,7 +943,7 @@ export interface DataTableEmptyHeader {
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
@ -962,7 +962,7 @@ export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
``` ```
@ -4193,15 +4193,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme | | theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | No | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | | tokens | No | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage | | persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key | | persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme | | render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
| toggle | No | <code>let</code> | No | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props | | toggle | No | <code>let</code> | No | <code>import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props |
| select | No | <code>let</code> | No | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props | | select | No | <code>let</code> | No | <code>import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props |
### Slots ### Slots
@ -4548,16 +4548,16 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :-------- | :----- | | :--------- | :--------- | :---------------- |
| clear | forwarded | -- | | clear | dispatched | <code>null</code> |
| change | forwarded | -- | | change | forwarded | -- |
| input | forwarded | -- | | input | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
| keyup | forwarded | -- | | keyup | forwarded | -- |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| paste | forwarded | -- | | paste | forwarded | -- |
## `Tooltip` ## `Tooltip`

28
README.md
View file

@ -13,7 +13,7 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes: The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,300+ Carbon icons as Svelte components - **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,400+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ Carbon pictograms as Svelte components - **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
@ -28,17 +28,18 @@ Other forms of documentation are auto-generated:
## Installation ## Installation
Install `carbon-components-svelte` as a development dependency.
```sh ```sh
# Yarn
yarn add -D carbon-components-svelte
# npm # npm
npm i -D carbon-components-svelte npm i carbon-components-svelte
# pnpm # pnpm
pnpm i -D carbon-components-svelte pnpm i carbon-components-svelte
# Yarn
yarn add carbon-components-svelte
# Bun
bun add carbon-components-svelte
``` ```
## Usage ## Usage
@ -146,17 +147,20 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon. [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
> [!NOTE] > [!NOTE]
> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. > Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
```sh ```sh
# Yarn
yarn add -D carbon-preprocess-svelte
# npm # npm
npm i -D carbon-preprocess-svelte npm i -D carbon-preprocess-svelte
# pnpm # pnpm
pnpm i -D carbon-preprocess-svelte pnpm i -D carbon-preprocess-svelte
# Yarn
yarn add -D carbon-preprocess-svelte
# Bun
bun add -D carbon-preprocess-svelte
``` ```
### `optimizeImports` ### `optimizeImports`

24
docs/src/COMPONENT_API.json
View file

@ -1780,12 +1780,16 @@
"name": "select", "name": "select",
"detail": "{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }" "detail": "{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }"
}, },
{
"type": "dispatched",
"name": "clear",
"detail": "KeyboardEvent | MouseEvent"
},
{ "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }, { "type": "forwarded", "name": "paste", "element": "input" },
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
{ "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" } { "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" }
], ],
"typedefs": [ "typedefs": [
@ -2730,14 +2734,14 @@
"ts": "type DataTableValue = any" "ts": "type DataTableValue = any"
}, },
{ {
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableEmptyHeader", "name": "DataTableEmptyHeader",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableNonEmptyHeader", "name": "DataTableNonEmptyHeader",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
}, },
{ {
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader", "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -2755,9 +2759,9 @@
"ts": "type DataTableRowId = any" "ts": "type DataTableRowId = any"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }", "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
"name": "DataTableCell", "name": "DataTableCell",
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }" "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }"
} }
], ],
"generics": null, "generics": null,
@ -13198,7 +13202,7 @@
"name": "toggle", "name": "toggle",
"kind": "let", "kind": "let",
"description": "Override the default toggle props", "description": "Override the default toggle props",
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", "type": "import(\"../Toggle/Toggle.svelte\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
"value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -13210,7 +13214,7 @@
"name": "select", "name": "select",
"kind": "let", "kind": "let",
"description": "Override the default select props", "description": "Override the default select props",
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", "type": "import(\"../Select/Select.svelte\").SelectProps & { themes?: CarbonTheme[]; }",
"value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -14253,7 +14257,7 @@
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "forwarded", "name": "clear", "element": "Search" }, { "type": "dispatched", "name": "clear", "detail": "null" },
{ "type": "forwarded", "name": "change", "element": "Search" }, { "type": "forwarded", "name": "change", "element": "Search" },
{ "type": "forwarded", "name": "input", "element": "Search" }, { "type": "forwarded", "name": "input", "element": "Search" },
{ "type": "forwarded", "name": "focus", "element": "Search" }, { "type": "forwarded", "name": "focus", "element": "Search" },

6
docs/src/pages/components/CodeSnippet.svx
View file

@ -36,7 +36,7 @@ You can override the default copy functionality with your own implementation. Se
## Default (single-line) ## Default (single-line)
<CodeSnippet code="yarn add -D carbon-components-svelte" /> <CodeSnippet code="npm i carbon-components-svelte" />
## Overriding copy functionality ## Overriding copy functionality
@ -50,7 +50,7 @@ In this example, we use the open source module [clipboard-copy](https://github.c
To prevent text from being copied entirely, pass a no-op function to the `copy` prop. To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} /> <CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />
## Inline ## Inline
@ -104,7 +104,7 @@ Use the `showMoreText` and `showLessText` props to override the default "Show mo
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types. The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" /> <CodeSnippet disabled code="npm i carbon-components-svelte" />
<br /> <br />
<CodeSnippet disabled type="multi" code="{comment}" /> <CodeSnippet disabled type="multi" code="{comment}" />

2
docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
View file

@ -4,6 +4,6 @@
</script> </script>
<CodeSnippet <CodeSnippet
code="yarn add -D carbon-components-svelte" code="npm i carbon-components-svelte"
copy="{(text) => copy(text)}" copy="{(text) => copy(text)}"
/> />

25
docs/src/pages/index.svelte
View file

@ -21,9 +21,10 @@
metatags.description = metatags.description =
"The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts."; "The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts.";
const installYarn = "yarn add -D carbon-components-svelte"; const installNpm = "npm i carbon-components-svelte";
const installNpm = "npm i -D carbon-components-svelte"; const installPnpm = "pnpm i carbon-components-svelte";
const installPnpm = "pnpm i -D carbon-components-svelte"; const installYarn = "yarn add carbon-components-svelte";
const installBun = "bun add carbon-components-svelte";
const themes = { const themes = {
white: "White", white: "White",
g10: "Gray 10", g10: "Gray 10",
@ -84,20 +85,24 @@
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--cds-layout-02)">
<Column noGutter> <Column noGutter>
<Tabs> <Tabs autoWidth>
<Tab label="Yarn" />
<Tab label="NPM" /> <Tab label="NPM" />
<Tab label="pnpm" /> <Tab label="pnpm" />
<Tab label="Yarn" />
<Tab label="Bun" />
<div slot="content" style="margin: 1rem -1rem"> <div slot="content" style="margin: 1rem -1rem">
<TabContent>
<CodeSnippet code="{installYarn}" />
</TabContent>
<TabContent> <TabContent>
<CodeSnippet code="{installNpm}" /> <CodeSnippet code="{installNpm}" />
</TabContent> </TabContent>
<TabContent> <TabContent>
<CodeSnippet code="{installPnpm}" /> <CodeSnippet code="{installPnpm}" />
</TabContent> </TabContent>
<TabContent>
<CodeSnippet code="{installYarn}" />
</TabContent>
<TabContent>
<CodeSnippet code="{installBun}" />
</TabContent>
</div> </div>
</Tabs> </Tabs>
</Column> </Column>
@ -124,7 +129,7 @@
<Row> <Row>
<Column max="{8}" xlg="{8}" noGutter> <Column max="{8}" xlg="{8}" noGutter>
<Tabs> <Tabs autoWidth>
<Tab label="CSS StyleSheet" /> <Tab label="CSS StyleSheet" />
<Tab label="SCSS" /> <Tab label="SCSS" />
<svelte:fragment slot="content"> <svelte:fragment slot="content">
@ -230,7 +235,7 @@
<TileCard <TileCard
borderBottom borderBottom
title="Carbon Icons Svelte" title="Carbon Icons Svelte"
subtitle="2,300+ icons" subtitle="2,400+ icons"
target="_blank" target="_blank"
href="https://github.com/carbon-design-system/carbon-icons-svelte" href="https://github.com/carbon-design-system/carbon-icons-svelte"
/> />

48
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "carbon-components-svelte", "name": "carbon-components-svelte",
"version": "0.85.2", "version": "0.85.3",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "carbon-components-svelte", "name": "carbon-components-svelte",
"version": "0.85.2", "version": "0.85.3",
"hasInstallScript": true, "hasInstallScript": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
@ -27,10 +27,10 @@
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11", "sass": "^1.49.11",
"standard-version": "^9.5.0", "standard-version": "^9.5.0",
"sveld": "^0.20.2", "sveld": "^0.20.3",
"svelte": "^4.2.10", "svelte": "^4.2.10",
"svelte-check": "^3.6.4", "svelte-check": "^3.6.4",
"typescript": "^4.7.4" "typescript": "^5.6.3"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -3075,9 +3075,9 @@
} }
}, },
"node_modules/sveld": { "node_modules/sveld": {
"version": "0.20.2", "version": "0.20.3",
"resolved": "https://registry.npmjs.org/sveld/-/sveld-0.20.2.tgz", "resolved": "https://registry.npmjs.org/sveld/-/sveld-0.20.3.tgz",
"integrity": "sha512-pd/RZ4TR7oaX6XphE8uhwAjKIVw1lg19aysYM5lYpD97AthlAJD8kSEgtEXHXw6xFYXsfnhrj0XxGHnbKFsnlA==", "integrity": "sha512-8BFxsG65J/25/+ShuljW4xv2Ax5VtZYnDUyiYt83YS+VS3qGDifppzAsX10IVUuhJpJyEfwOUBGWPeoPdsfdew==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
@ -3150,19 +3150,6 @@
} }
} }
}, },
"node_modules/sveld/node_modules/typescript": {
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/svelte": { "node_modules/svelte": {
"version": "4.2.19", "version": "4.2.19",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
@ -3208,19 +3195,6 @@
"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0" "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
} }
}, },
"node_modules/svelte-check/node_modules/typescript": {
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/svelte-preprocess": { "node_modules/svelte-preprocess": {
"version": "5.1.4", "version": "5.1.4",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
@ -3446,16 +3420,16 @@
"dev": true "dev": true
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "4.9.5", "version": "5.6.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
"dev": true, "dev": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
}, },
"engines": { "engines": {
"node": ">=4.2.0" "node": ">=14.17"
} }
}, },
"node_modules/uglify-js": { "node_modules/uglify-js": {

6
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "carbon-components-svelte", "name": "carbon-components-svelte",
"version": "0.85.2", "version": "0.85.3",
"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",
@ -57,10 +57,10 @@
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11", "sass": "^1.49.11",
"standard-version": "^9.5.0", "standard-version": "^9.5.0",
"sveld": "^0.20.2", "sveld": "^0.20.3",
"svelte": "^4.2.10", "svelte": "^4.2.10",
"svelte-check": "^3.6.4", "svelte-check": "^3.6.4",
"typescript": "^4.7.4" "typescript": "^5.6.3"
}, },
"standard-version": { "standard-version": {
"skip": { "skip": {

1
src/Breakpoint/Breakpoint.svelte
View file

@ -40,6 +40,7 @@
max: size == "max", max: size == "max",
}; };
$: if (size != undefined) $: if (size != undefined)
// svelte-ignore reactive_declaration_non_reactive_property
dispatch("change", { size, breakpointValue: breakpoints[size] }); dispatch("change", { size, breakpointValue: breakpoints[size] });
</script> </script>

1
src/ComboBox/ComboBox.svelte
View file

@ -3,6 +3,7 @@
* @typedef {any} ComboBoxItemId * @typedef {any} ComboBoxItemId
* @typedef {{ id: ComboBoxItemId; text: string; disabled?: boolean; }} ComboBoxItem * @typedef {{ id: ComboBoxItemId; text: string; disabled?: boolean; }} ComboBoxItem
* @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
* @event {KeyboardEvent | MouseEvent} clear
* @slot {{ item: ComboBoxItem; index: number }} * @slot {{ item: ComboBoxItem; index: number }}
*/ */

6
src/DataTable/DataTable.svelte
View file

@ -2,12 +2,12 @@
/** /**
* @typedef {string} DataTableKey * @typedef {string} DataTableKey
* @typedef {any} DataTableValue * @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId * @typedef {any} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }} DataTableCell * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell
* @slot {{ row: DataTableRow; }} expanded-row * @slot {{ row: DataTableRow; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell * @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell

5
src/DataTable/ToolbarSearch.svelte
View file

@ -1,5 +1,8 @@
<script> <script>
/** @restProps {input} */ /**
* @restProps {input}
* @event {null} clear
*/
/** /**
* Specify the value of the search input * Specify the value of the search input

2
src/OverflowMenu/OverflowMenu.svelte
View file

@ -192,7 +192,7 @@
<button <button
bind:this="{buttonRef}" bind:this="{buttonRef}"
type="button" type="button"
aria-haspopup aria-haspopup="true"
aria-expanded="{open}" aria-expanded="{open}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
id="{id}" id="{id}"

2
src/TextInput/PasswordInput.svelte
View file

@ -88,7 +88,7 @@
const ctx = getContext("Form"); const ctx = getContext("Form");
$: isFluid = !!ctx && ctx.isFluid; const isFluid = !!ctx && ctx.isFluid;
$: helperId = `helper-${id}`; $: helperId = `helper-${id}`;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;

2
src/TextInput/TextInput.svelte
View file

@ -94,7 +94,7 @@
dispatch("change", parse(e.target.value)); dispatch("change", parse(e.target.value));
}; };
$: isFluid = !!ctx && ctx.isFluid; const isFluid = !!ctx && ctx.isFluid;
$: error = invalid && !readonly; $: error = invalid && !readonly;
$: helperId = `helper-${id}`; $: helperId = `helper-${id}`;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;

4
src/Theme/Theme.svelte
View file

@ -37,7 +37,7 @@
/** /**
* Override the default toggle props * Override the default toggle props
* @type {import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }} * @type {import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }}
*/ */
export let toggle = { export let toggle = {
themes: ["white", "g100"], themes: ["white", "g100"],
@ -61,7 +61,7 @@
/** /**
* Override the default select props * Override the default select props
* @type {import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }} * @type {import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }}
*/ */
export let select = { export let select = {
themes: themeKeys, themes: themeKeys,

2
tests/CodeSnippet.test.svelte
View file

@ -17,5 +17,5 @@
on:expand on:expand
on:collapse on:collapse
> >
yarn add -D carbon-components-svelte yarn add carbon-components-svelte
</CodeSnippet> </CodeSnippet>

3
tests/ComboBox.test.svelte
View file

@ -23,6 +23,9 @@
on:select="{(e) => { on:select="{(e) => {
console.log(e.detail.selectedId); console.log(e.detail.selectedId);
}}" }}"
on:clear="{(e) => {
console.log(e.detail);
}}"
translateWithId="{(id) => { translateWithId="{(id) => {
console.log(id); // "open" | "close" console.log(id); // "open" | "close"
return id; return id;

2
tests/CopyableCodeSnippet.test.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let copy = (text: string) => text; export let copy = (text: string) => text;
export let code = "yarn add -D carbon-component-svelte"; export let code = "npm i carbon-component-svelte";
import { CodeSnippet } from "../types"; import { CodeSnippet } from "../types";
</script> </script>

2
tsconfig.json
View file

@ -4,7 +4,7 @@
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"ignoreDeprecations": "5.0", "ignoreDeprecations": "5.0",
"importsNotUsedAsValues": "error", "verbatimModuleSyntax": true,
"isolatedModules": true, "isolatedModules": true,
"target": "ESNext", "target": "ESNext",
"module": "ESNext", "module": "ESNext",

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

@ -164,12 +164,12 @@ export default class ComboBox extends SvelteComponentTyped<
selectedId: ComboBoxItemId; selectedId: ComboBoxItemId;
selectedItem: ComboBoxItem; selectedItem: ComboBoxItem;
}>; }>;
clear: CustomEvent<KeyboardEvent | MouseEvent>;
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
clear: WindowEventMap["clear"];
scroll: WindowEventMap["scroll"]; scroll: WindowEventMap["scroll"];
}, },
{ default: { item: ComboBoxItem; index: number }; titleText: {} } { default: { item: ComboBoxItem; index: number }; titleText: {} }

6
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader {
key: DataTableKey; key: DataTableKey;
empty: boolean; empty: boolean;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
@ -18,7 +18,7 @@ export interface DataTableEmptyHeader {
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
@ -37,7 +37,7 @@ export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
type RestProps = SvelteHTMLElements["div"]; type RestProps = SvelteHTMLElements["div"];

4
types/DataTable/ToolbarSearch.svelte.d.ts vendored
View file

@ -69,14 +69,14 @@ export interface ToolbarSearchProps extends RestProps {
export default class ToolbarSearch extends SvelteComponentTyped< export default class ToolbarSearch extends SvelteComponentTyped<
ToolbarSearchProps, ToolbarSearchProps,
{ {
clear: WindowEventMap["clear"]; clear: CustomEvent<null>;
change: WindowEventMap["change"]; change: WindowEventMap["change"];
input: WindowEventMap["input"]; input: WindowEventMap["input"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{} {}
> {} > {}

2
types/DatePicker/DatePickerInput.svelte.d.ts vendored
View file

@ -110,7 +110,7 @@ export default class DatePickerInput extends SvelteComponentTyped<
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ labelText: {} } { labelText: {} }
> {} > {}

2
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -255,7 +255,7 @@ export default class MultiSelect extends SvelteComponentTyped<
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ default: { item: MultiSelectItem; index: number }; titleText: {} } { default: { item: MultiSelectItem; index: number }; titleText: {} }
> {} > {}

2
types/NumberInput/NumberInput.svelte.d.ts vendored
View file

@ -155,7 +155,7 @@ export default class NumberInput extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ label: {} } { label: {} }
> { > {

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

@ -119,7 +119,7 @@ export default class Search extends SvelteComponentTyped<
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
clear: CustomEvent<null>; clear: CustomEvent<null>;
}, },
{ labelText: {} } { labelText: {} }

2
types/TextArea/TextArea.svelte.d.ts vendored
View file

@ -116,7 +116,7 @@ export default class TextArea extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ labelText: {} } { labelText: {} }
> {} > {}

2
types/TextInput/PasswordInput.svelte.d.ts vendored
View file

@ -146,7 +146,7 @@ export default class PasswordInput extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ labelText: {} } { labelText: {} }
> {} > {}

2
types/TextInput/TextInput.svelte.d.ts vendored
View file

@ -131,7 +131,7 @@ export default class TextInput extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ labelText: {} } { labelText: {} }
> {} > {}

6
types/Theme/Theme.svelte.d.ts vendored
View file

@ -38,7 +38,7 @@ export interface ThemeProps {
* Override the default toggle props * Override the default toggle props
* @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } * @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }
*/ */
toggle?: import("../Toggle/Toggle").ToggleProps & { toggle?: import("../Toggle/Toggle.svelte").ToggleProps & {
themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; themes?: [labelA: CarbonTheme, labelB: CarbonTheme];
}; };
@ -46,7 +46,9 @@ export interface ThemeProps {
* Override the default select props * Override the default select props
* @default { themes: themeKeys, labelText: "Themes", hideLabel: false, } * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
*/ */
select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] }; select?: import("../Select/Select.svelte").SelectProps & {
themes?: CarbonTheme[];
};
} }
export default class Theme extends SvelteComponentTyped< export default class Theme extends SvelteComponentTyped<

2
types/TimePicker/TimePicker.svelte.d.ts vendored
View file

@ -104,7 +104,7 @@ export default class TimePicker extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"]; keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ default: {}; labelText: {} } { default: {}; labelText: {} }
> {} > {}

2
types/UIShell/HeaderSearch.svelte.d.ts vendored
View file

@ -59,7 +59,7 @@ export default class HeaderSearch extends SvelteComponentTyped<
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: WindowEventMap["paste"];
}, },
{ default: { result: HeaderSearchResult; index: number } } { default: { result: HeaderSearchResult; index: number } }
> {} > {}

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

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