mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
Merge branch 'master' into header-action-prevent-close-click-outside
This commit is contained in:
Eric Liu
GitHub
commit
7c6b5619a4
226 changed files with 2124 additions and 747 deletions
8
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
8
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
blank_issues_enabled: true
|
||||||
|
contact_links:
|
||||||
|
- name: Ask a question
|
||||||
|
url: https://github.com/carbon-design-system/carbon-components-svelte/discussions
|
||||||
|
about: Please ask and answer questions here.
|
||||||
|
- name: Carbon Design System Discord
|
||||||
|
url: https://discord.gg/J7JEUEkTRX
|
||||||
|
about: Chat with us on Discord.
|
||||||
13
.github/workflows/ci.yml
vendored
13
.github/workflows/ci.yml
vendored
|
|
@ -17,8 +17,19 @@ jobs:
|
||||||
path: "**/node_modules"
|
path: "**/node_modules"
|
||||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||||
|
|
||||||
- name: Install dependencies and build the library
|
- name: Install dependencies, build, test, and lint the codebase
|
||||||
run: |
|
run: |
|
||||||
yarn
|
yarn
|
||||||
yarn build:lib
|
yarn build:lib
|
||||||
yarn test:types
|
yarn test:types
|
||||||
|
yarn lint
|
||||||
|
|
||||||
|
deploy-docs:
|
||||||
|
if: github.ref == 'refs/heads/master'
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Trigger deploy
|
||||||
|
env:
|
||||||
|
deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
|
||||||
|
run: |
|
||||||
|
curl -X GET "$deploy_url"
|
||||||
|
|
|
||||||
1
.husky/.gitignore
vendored
1
.husky/.gitignore
vendored
|
|
@ -1 +0,0 @@
|
||||||
_
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
#!/bin/sh
|
|
||||||
. "$(dirname "$0")/_/husky.sh"
|
|
||||||
|
|
||||||
npx lint-staged
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
/lib
|
/lib
|
||||||
/css
|
/css
|
||||||
|
/types
|
||||||
.svelte-kit
|
.svelte-kit
|
||||||
.routify
|
.routify
|
||||||
dist
|
dist
|
||||||
client
|
client
|
||||||
build
|
build
|
||||||
*.svx
|
*.svx
|
||||||
|
|
|
||||||
105
CHANGELOG.md
105
CHANGELOG.md
|
|
@ -1,11 +1,108 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
All notable changes to this project will be documented in this file.
|
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.
|
||||||
|
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
### [0.76.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.0...v0.76.1) (2023-07-08)
|
||||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
||||||
|
|
||||||
<!-- ## Unreleased -->
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **date-picker:** hide `helperText` if invalid or warning state ([#1759](https://github.com/carbon-design-system/carbon-components-svelte/issues/1759)) ([d5a4a8b](https://github.com/carbon-design-system/carbon-components-svelte/commit/d5a4a8b94a8753545a54f7e43f1773e49a1ff208))
|
||||||
|
* **select:** hide `helperText` if invalid or warning state ([#1761](https://github.com/carbon-design-system/carbon-components-svelte/issues/1761)) ([7579c03](https://github.com/carbon-design-system/carbon-components-svelte/commit/7579c032faa3f1b9ad9d42f76da876f38725141e))
|
||||||
|
* **slider:** `disabled` Slider should not submit a form ([#1758](https://github.com/carbon-design-system/carbon-components-svelte/issues/1758)) ([ab21c89](https://github.com/carbon-design-system/carbon-components-svelte/commit/ab21c89ab9240f61bd15d8c20bad65b3b469a29c))
|
||||||
|
* **types:** allow `data-*` attributes for props forwarded to HTML elements ([#1741](https://github.com/carbon-design-system/carbon-components-svelte/issues/1741)) ([7fdc2ef](https://github.com/carbon-design-system/carbon-components-svelte/commit/7fdc2ef7f072382842cbb6bfc8e12e083aef1a1e))
|
||||||
|
|
||||||
|
### [0.76.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.75.1...v0.75.2) (2023-06-21)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* make `titleText` slottable in `MultiSelect`, `ComboBox` ([#1750](https://github.com/carbon-design-system/carbon-components-svelte/issues/1750)) ([0b4f19c](https://github.com/carbon-design-system/carbon-components-svelte/commit/0b4f19c87e8479f0649fa2c5dc84beb4c1a1e302)), closes [#1747](https://github.com/carbon-design-system/carbon-components-svelte/issues/1747)
|
||||||
|
|
||||||
|
### [0.75.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.75.0...v0.75.1) (2023-06-02)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **expandable-tile:** set tile height using resize observer ([#1738](https://github.com/carbon-design-system/carbon-components-svelte/issues/1738)) ([a369962](https://github.com/carbon-design-system/carbon-components-svelte/commit/a369962fdf96f95bbdcc2f8f9f84c5d900ec4087))
|
||||||
|
|
||||||
|
### [0.75.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.74.0...v0.74.1) (2023-05-21)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **pagination-nav:** add `tooltipPosition` prop ([#1733](https://github.com/carbon-design-system/carbon-components-svelte/issues/1733)) ([60a796e](https://github.com/carbon-design-system/carbon-components-svelte/commit/60a796ea48b17a4e8829b8782aaddb569534c7c4)), closes [#1656](https://github.com/carbon-design-system/carbon-components-svelte/issues/1656)
|
||||||
|
|
||||||
|
### [0.74.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.5...v0.74.0) (2023-05-18)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **ui-shell:** make `HeaderNavItem` slottable ([#1693](https://github.com/carbon-design-system/carbon-components-svelte/issues/1693)) ([b9aaa3a](https://github.com/carbon-design-system/carbon-components-svelte/commit/b9aaa3adcaf87e34ac3d45a2e39f1db92ebe1b33))
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- resolve `a11y` warnings from Svelte version 3.58 ([#1732](https://github.com/carbon-design-system/carbon-components-svelte/issues/1732)) ([c02b473](https://github.com/carbon-design-system/carbon-components-svelte/commit/c02b4738bce612359148267c79450c6650bf68d3))
|
||||||
|
|
||||||
|
### [0.73.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.4...v0.73.5) (2023-03-26)
|
||||||
|
|
||||||
|
### [0.73.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.3...v0.73.4) (2023-03-21)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **selectable-tile:** include dispatched events in types ([#1695](https://github.com/carbon-design-system/carbon-components-svelte/issues/1695)) ([ca40dd1](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca40dd18c2af1bc755b857c39469427038f20ece)), closes [#1694](https://github.com/carbon-design-system/carbon-components-svelte/issues/1694)
|
||||||
|
- **text-input:** correctly set input padding for warning state ([#1688](https://github.com/carbon-design-system/carbon-components-svelte/issues/1688)) ([821233a](https://github.com/carbon-design-system/carbon-components-svelte/commit/821233ab4f0bf247dea6a8aa32b79d15424ff059)), closes [#1687](https://github.com/carbon-design-system/carbon-components-svelte/issues/1687)
|
||||||
|
|
||||||
|
### [0.73.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.2...v0.73.3) (2023-03-11)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **1684:** hide helper text container in password input when not used ([#1685](https://github.com/carbon-design-system/carbon-components-svelte/issues/1685)) ([42349eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/42349ebc61fdc8756fc5209d4cb63f4f9a63dce9))
|
||||||
|
|
||||||
|
### [0.73.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.1...v0.73.2) (2023-02-27)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- `readonly` should override `error` behavior in `TextInput`, `NumberInput` ([#1666](https://github.com/carbon-design-system/carbon-components-svelte/issues/1666)) ([6386c33](https://github.com/carbon-design-system/carbon-components-svelte/commit/6386c33f939b5fa310e8eb5a51412c6151de75d2)), closes [/github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645](https://github.com/carbon-design-system//github.com/carbon-design-system/carbon-components-svelte/pull/1666/issues/pullrequestreview-1314558645)
|
||||||
|
|
||||||
|
### [0.73.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.0...v0.73.1) (2023-02-19)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **textinput/passwordinput:** apply aria-describedby to hint text ([b435be4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b435be4f1221b30c9afd7a9e1c6867b38eeadeaa)), closes [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633)
|
||||||
|
|
||||||
|
### [0.73.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.3...v0.73.0) (2023-02-19)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **progress-bar:** add `status` prop ([#1560](https://github.com/carbon-design-system/carbon-components-svelte/issues/1560)) ([7ddbf17](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ddbf17cbb82bd78256037af8028ea20b9c35d5a))
|
||||||
|
|
||||||
|
### [0.72.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.2...v0.72.3) (2023-02-11)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **types:** add missing `$$restProps` for `Checkbox`, `Filename`, `FluidForm` ([#1655](https://github.com/carbon-design-system/carbon-components-svelte/issues/1655)) ([6450e8b](https://github.com/carbon-design-system/carbon-components-svelte/commit/6450e8b0b17e1538043f131d64e2d1fc667c95a8))
|
||||||
|
|
||||||
|
### [0.72.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.1...v0.72.2) (2023-02-05)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **dropdown:** dispatch correct `selectedItem` in `select` event ([#1646](https://github.com/carbon-design-system/carbon-components-svelte/issues/1646)) ([d897484](https://github.com/carbon-design-system/carbon-components-svelte/commit/d897484abfcc8be351ac87b0f0bb49900f4b4b1d)), closes [#1645](https://github.com/carbon-design-system/carbon-components-svelte/issues/1645)
|
||||||
|
|
||||||
|
### [0.72.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.0...v0.72.1) (2023-01-25)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **dropdown:** fix ssr issue ([#1639](https://github.com/carbon-design-system/carbon-components-svelte/issues/1639)) ([8cb5d53](https://github.com/carbon-design-system/carbon-components-svelte/commit/8cb5d538f7ad10d7c93e10c04f01d2c77b4eba44)), closes [#1638](https://github.com/carbon-design-system/carbon-components-svelte/issues/1638)
|
||||||
|
|
||||||
|
## [0.72.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.71.0...v0.72.0) (2023-01-18)
|
||||||
|
|
||||||
|
### ⚠ BREAKING CHANGES
|
||||||
|
|
||||||
|
- **tree-view:** remove `expanded` property from `TreeNode` interface (#1631)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **dropdown:** close when user clicks outside iframe ([#1596](https://github.com/carbon-design-system/carbon-components-svelte/issues/1596)) ([73aa6e2](https://github.com/carbon-design-system/carbon-components-svelte/commit/73aa6e216aa99df3b0b3186398e6466db523cf88)), closes [#1595](https://github.com/carbon-design-system/carbon-components-svelte/issues/1595)
|
||||||
|
- **tree-view:** remove `expanded` property from `TreeNode` interface ([#1631](https://github.com/carbon-design-system/carbon-components-svelte/issues/1631)) ([ec867c4](https://github.com/carbon-design-system/carbon-components-svelte/commit/ec867c46ba7adce02938d6516557d3312591fa5f)), closes [#1630](https://github.com/carbon-design-system/carbon-components-svelte/issues/1630)
|
||||||
|
|
||||||
## [0.71.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.71.0) - 2022-12-31
|
## [0.71.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.71.0) - 2022-12-31
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Component Index
|
# Component Index
|
||||||
|
|
||||||
> 165 components exported from carbon-components-svelte@0.71.0.
|
> 165 components exported from carbon-components-svelte@0.76.1.
|
||||||
|
|
||||||
## Components
|
## Components
|
||||||
|
|
||||||
|
|
@ -684,6 +684,7 @@ export interface ComboBoxItem {
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
|
| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
|
||||||
| -- | Yes | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
|
| -- | Yes | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
|
||||||
|
| titleText | No | -- | <code>{titleText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1583,11 +1584,12 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------------- | :------ | :---- | :-------------------------- |
|
| :-------------- | :------ | :---- | :--------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| platform | No | -- | <code>{platformName}</code> |
|
| company | No | -- | <code>{company} </code> |
|
||||||
| skip-to-content | No | -- | -- |
|
| platform | No | -- | <code>{platformName}</code> |
|
||||||
|
| skip-to-content | No | -- | -- |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1698,7 +1700,9 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
None.
|
| Slot name | Default | Props | Fallback |
|
||||||
|
| :-------- | :------ | :---- | :------------------ |
|
||||||
|
| -- | Yes | -- | <code>{text}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2388,6 +2392,7 @@ export interface MultiSelectItem {
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
|
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
|
||||||
| -- | Yes | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
|
| -- | Yes | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
|
||||||
|
| titleText | No | -- | <code>{titleText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2695,14 +2700,15 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
|
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
|
||||||
| page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index |
|
| page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index |
|
||||||
| total | No | <code>let</code> | No | <code>number</code> | <code>10</code> | Specify the total number of pages |
|
| total | No | <code>let</code> | No | <code>number</code> | <code>10</code> | Specify the total number of pages |
|
||||||
| shown | No | <code>let</code> | No | <code>number</code> | <code>10</code> | Specify the total number of pages to show |
|
| shown | No | <code>let</code> | No | <code>number</code> | <code>10</code> | Specify the total number of pages to show |
|
||||||
| loop | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to loop the navigation |
|
| loop | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to loop the navigation |
|
||||||
| forwardText | No | <code>let</code> | No | <code>string</code> | <code>"Next page"</code> | Specify the forward button text |
|
| forwardText | No | <code>let</code> | No | <code>string</code> | <code>"Next page"</code> | Specify the forward button text |
|
||||||
| backwardText | No | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text |
|
| backwardText | No | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text |
|
||||||
|
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left" | "outside" | "inside"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the pagination buttons. |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -2820,6 +2826,7 @@ None.
|
||||||
| value | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the current value |
|
| value | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the current value |
|
||||||
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
|
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
|
||||||
| kind | No | <code>let</code> | No | <code>"default" | "inline" | "indented"</code> | <code>"default"</code> | Specify the kind of progress bar |
|
| kind | No | <code>let</code> | No | <code>"default" | "inline" | "indented"</code> | <code>"default"</code> | Specify the kind of progress bar |
|
||||||
|
| status | No | <code>let</code> | No | <code>"active" | "finished" | "error"</code> | <code>"active"</code> | Specify the status |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "md"</code> | <code>"md"</code> | Specify the size |
|
| size | No | <code>let</code> | No | <code>"sm" | "md"</code> | <code>"md"</code> | Specify the size |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||||
|
|
@ -3272,13 +3279,15 @@ None.
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Event name | Type | Detail |
|
| Event name | Type | Detail |
|
||||||
| :--------- | :-------- | :----- |
|
| :--------- | :--------- | :------------------ |
|
||||||
| click | forwarded | -- |
|
| select | dispatched | <code>string</code> |
|
||||||
| mouseover | forwarded | -- |
|
| deselect | dispatched | <code>string</code> |
|
||||||
| mouseenter | forwarded | -- |
|
| click | forwarded | -- |
|
||||||
| mouseleave | forwarded | -- |
|
| mouseover | forwarded | -- |
|
||||||
| keydown | forwarded | -- |
|
| mouseenter | forwarded | -- |
|
||||||
|
| mouseleave | forwarded | -- |
|
||||||
|
| keydown | forwarded | -- |
|
||||||
|
|
||||||
## `SideNav`
|
## `SideNav`
|
||||||
|
|
||||||
|
|
@ -4662,7 +4671,6 @@ export interface TreeNode {
|
||||||
text: any;
|
text: any;
|
||||||
icon?: typeof import("svelte").SvelteComponent;
|
icon?: typeof import("svelte").SvelteComponent;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
expanded?: boolean;
|
|
||||||
children?: TreeNode[];
|
children?: TreeNode[];
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,19 @@
|
||||||
|
|
||||||
Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
|
Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
|
||||||
|
|
||||||
|
- [Prerequisites](#prerequisites)
|
||||||
|
- [Project set-up](#project-set-up)
|
||||||
|
- [Install](#install)
|
||||||
|
- [Documentation set-up](#documentation-set-up)
|
||||||
|
- [Development workflow](#development-workflow)
|
||||||
|
- [Component Format](#component-format)
|
||||||
|
- [Editing a component](#editing-a-component)
|
||||||
|
- [Creating a component](#creating-a-component)
|
||||||
|
- [Run `yarn build:docs`](#run-yarn-builddocs)
|
||||||
|
- [Submit a Pull Request](#submit-a-pull-request)
|
||||||
|
- [Sync Your Fork](#sync-your-fork)
|
||||||
|
- [Submit a PR](#submit-a-pr)
|
||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
|
||||||
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
|
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
|
||||||
|
|
@ -145,3 +158,34 @@ git merge upstream/master
|
||||||
### Submit a PR
|
### Submit a PR
|
||||||
|
|
||||||
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `<YOUR_USER_ID>/feature` to `origin/master`.
|
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `<YOUR_USER_ID>/feature` to `origin/master`.
|
||||||
|
|
||||||
|
## Maintainer guide
|
||||||
|
|
||||||
|
The following items only apply to project maintainers.
|
||||||
|
|
||||||
|
### Release
|
||||||
|
|
||||||
|
Locally, while on `master` and the branch is clean, run `yarn release`. This command will:
|
||||||
|
|
||||||
|
- Build library and docs
|
||||||
|
- Bump package.json version
|
||||||
|
- Add notes to Changelog
|
||||||
|
|
||||||
|
This command will not create a commit nor tag. Afterwards, perform the following manually:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# 1. Stage prepared files for a commit
|
||||||
|
git add .
|
||||||
|
|
||||||
|
# 2. Commit based on the current version, either manually or with jq
|
||||||
|
git commit -m "v$(jq -r '.version' package.json)"
|
||||||
|
|
||||||
|
# 3. Create a tag based on the current version, either manually or with `jq`:
|
||||||
|
git tag "v$(jq -r '.version' package.json)"
|
||||||
|
|
||||||
|
# 4. Push branch and tag, then publish
|
||||||
|
git push origin master [tag]
|
||||||
|
yarn publish
|
||||||
|
|
||||||
|
# 5. Generate release notes on GitHub, and comment on issues and pull requests
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@
|
||||||
[![NPM][npm]][npm-url]
|
[![NPM][npm]][npm-url]
|
||||||
|
|
||||||
|
|
||||||
|
<a href="https://discord.gg/J7JEUEkTRX">
|
||||||
|
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
|
||||||
|
</a>
|
||||||
|
|
||||||
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
|
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
|
||||||
|
|
||||||
|
|
@ -17,10 +20,6 @@ The Carbon Svelte portfolio also includes:
|
||||||
|
|
||||||
## [Documentation](https://carbon-components-svelte.onrender.com)
|
## [Documentation](https://carbon-components-svelte.onrender.com)
|
||||||
|
|
||||||
The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
|
|
||||||
|
|
||||||
[](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
|
|
||||||
|
|
||||||
Other forms of documentation are auto-generated:
|
Other forms of documentation are auto-generated:
|
||||||
|
|
||||||
- **[TypeScript definitions](types)**: Component TypeScript definitions
|
- **[TypeScript definitions](types)**: Component TypeScript definitions
|
||||||
|
|
|
||||||
16
carbon.yml
16
carbon.yml
|
|
@ -212,6 +212,14 @@ assets:
|
||||||
name: Storybook
|
name: Storybook
|
||||||
action: link
|
action: link
|
||||||
url: https://carbon-components-svelte.onrender.com/components/DatePicker
|
url: https://carbon-components-svelte.onrender.com/components/DatePicker
|
||||||
|
definition-tooltip:
|
||||||
|
status: stable
|
||||||
|
framework: svelte
|
||||||
|
demoLinks:
|
||||||
|
- type: storybook
|
||||||
|
name: Storybook
|
||||||
|
action: link
|
||||||
|
url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
|
||||||
dropdown:
|
dropdown:
|
||||||
status: stable
|
status: stable
|
||||||
framework: svelte
|
framework: svelte
|
||||||
|
|
@ -667,14 +675,6 @@ assets:
|
||||||
name: Storybook
|
name: Storybook
|
||||||
action: link
|
action: link
|
||||||
url: https://carbon-components-svelte.onrender.com/components/Tooltip
|
url: https://carbon-components-svelte.onrender.com/components/Tooltip
|
||||||
tooltip-definition:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
|
|
||||||
tooltip-icon:
|
tooltip-icon:
|
||||||
name: Tootlip icon
|
name: Tootlip icon
|
||||||
status: stable
|
status: stable
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -22,7 +22,7 @@
|
||||||
"prism-svelte": "^0.4.7",
|
"prism-svelte": "^0.4.7",
|
||||||
"prismjs": "^1.28.0",
|
"prismjs": "^1.28.0",
|
||||||
"remark-slug": "^6.0.0",
|
"remark-slug": "^6.0.0",
|
||||||
"svelte": "^3.49.0",
|
"svelte": "^3.58.0",
|
||||||
"vite": "^3.0.9"
|
"vite": "^3.0.9"
|
||||||
},
|
},
|
||||||
"routify": {
|
"routify": {
|
||||||
|
|
|
||||||
|
|
@ -924,7 +924,7 @@
|
||||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||||
],
|
],
|
||||||
"typedefs": [],
|
"typedefs": [],
|
||||||
"rest_props": { "type": "InlineComponent", "name": "CheckboxSkeleton" }
|
"rest_props": { "type": "Element", "name": "div" }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"moduleName": "CheckboxSkeleton",
|
"moduleName": "CheckboxSkeleton",
|
||||||
|
|
@ -1743,6 +1743,12 @@
|
||||||
"default": true,
|
"default": true,
|
||||||
"fallback": "{itemToString(item)}",
|
"fallback": "{itemToString(item)}",
|
||||||
"slot_props": "{ item: ComboBoxItem; index: number }"
|
"slot_props": "{ item: ComboBoxItem; index: number }"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "titleText",
|
||||||
|
"default": false,
|
||||||
|
"fallback": "{titleText}",
|
||||||
|
"slot_props": "{}"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"events": [
|
"events": [
|
||||||
|
|
@ -4399,7 +4405,7 @@
|
||||||
{ "type": "forwarded", "name": "keydown", "element": "button" }
|
{ "type": "forwarded", "name": "keydown", "element": "button" }
|
||||||
],
|
],
|
||||||
"typedefs": [],
|
"typedefs": [],
|
||||||
"rest_props": { "type": "InlineComponent", "name": "Loading" }
|
"rest_props": { "type": "Element", "name": "div | button | svg" }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"moduleName": "FluidForm",
|
"moduleName": "FluidForm",
|
||||||
|
|
@ -4416,7 +4422,7 @@
|
||||||
{ "type": "forwarded", "name": "submit", "element": "Form" }
|
{ "type": "forwarded", "name": "submit", "element": "Form" }
|
||||||
],
|
],
|
||||||
"typedefs": [],
|
"typedefs": [],
|
||||||
"rest_props": { "type": "InlineComponent", "name": "Form" }
|
"rest_props": { "type": "Element", "name": "form" }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"moduleName": "Form",
|
"moduleName": "Form",
|
||||||
|
|
@ -4827,6 +4833,12 @@
|
||||||
"moduleExports": [],
|
"moduleExports": [],
|
||||||
"slots": [
|
"slots": [
|
||||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||||
|
{
|
||||||
|
"name": "company",
|
||||||
|
"default": false,
|
||||||
|
"fallback": "{company} ",
|
||||||
|
"slot_props": "{}"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "platform",
|
"name": "platform",
|
||||||
"default": false,
|
"default": false,
|
||||||
|
|
@ -5134,7 +5146,14 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"moduleExports": [],
|
"moduleExports": [],
|
||||||
"slots": [],
|
"slots": [
|
||||||
|
{
|
||||||
|
"name": "__default__",
|
||||||
|
"default": true,
|
||||||
|
"fallback": "{text}",
|
||||||
|
"slot_props": "{}"
|
||||||
|
}
|
||||||
|
],
|
||||||
"events": [
|
"events": [
|
||||||
{ "type": "forwarded", "name": "click", "element": "a" },
|
{ "type": "forwarded", "name": "click", "element": "a" },
|
||||||
{ "type": "forwarded", "name": "mouseover", "element": "a" },
|
{ "type": "forwarded", "name": "mouseover", "element": "a" },
|
||||||
|
|
@ -7359,6 +7378,12 @@
|
||||||
"default": true,
|
"default": true,
|
||||||
"fallback": "{itemToString(item)}",
|
"fallback": "{itemToString(item)}",
|
||||||
"slot_props": "{ item: MultiSelectItem; index: number }"
|
"slot_props": "{ item: MultiSelectItem; index: number }"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "titleText",
|
||||||
|
"default": false,
|
||||||
|
"fallback": "{titleText}",
|
||||||
|
"slot_props": "{}"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"events": [
|
"events": [
|
||||||
|
|
@ -8525,6 +8550,18 @@
|
||||||
"isRequired": false,
|
"isRequired": false,
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "tooltipPosition",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Set the position of the tooltip relative to the pagination buttons.",
|
||||||
|
"type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"outside\" | \"inside\"",
|
||||||
|
"value": "\"bottom\"",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"moduleExports": [],
|
"moduleExports": [],
|
||||||
|
|
@ -8985,6 +9022,18 @@
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "status",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Specify the status",
|
||||||
|
"type": "\"active\" | \"finished\" | \"error\"",
|
||||||
|
"value": "\"active\"",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "size",
|
"name": "size",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
|
|
@ -10544,6 +10593,8 @@
|
||||||
"moduleExports": [],
|
"moduleExports": [],
|
||||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||||
"events": [
|
"events": [
|
||||||
|
{ "type": "dispatched", "name": "select", "detail": "string" },
|
||||||
|
{ "type": "dispatched", "name": "deselect", "detail": "string" },
|
||||||
{ "type": "forwarded", "name": "click", "element": "label" },
|
{ "type": "forwarded", "name": "click", "element": "label" },
|
||||||
{ "type": "forwarded", "name": "mouseover", "element": "label" },
|
{ "type": "forwarded", "name": "mouseover", "element": "label" },
|
||||||
{ "type": "forwarded", "name": "mouseenter", "element": "label" },
|
{ "type": "forwarded", "name": "mouseenter", "element": "label" },
|
||||||
|
|
@ -14534,9 +14585,9 @@
|
||||||
"ts": "type TreeNodeId = string | number"
|
"ts": "type TreeNodeId = string | number"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }",
|
"type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }",
|
||||||
"name": "TreeNode",
|
"name": "TreeNode",
|
||||||
"ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }"
|
"ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"rest_props": { "type": "Element", "name": "ul" }
|
"rest_props": { "type": "Element", "name": "ul" }
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<script>
|
|
||||||
export let persist = false;
|
|
||||||
export let persistKey = "carbon-theme";
|
|
||||||
export const themes = ["white", "g10", "g80", "g90", "g100"];
|
|
||||||
|
|
||||||
import { onMount, afterUpdate } from "svelte";
|
|
||||||
import { theme } from "../store";
|
|
||||||
|
|
||||||
const isValidTheme = (value) => themes.includes(value);
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
try {
|
|
||||||
const persisted_theme = localStorage.getItem(persistKey);
|
|
||||||
if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
|
|
||||||
} catch (e) {}
|
|
||||||
});
|
|
||||||
|
|
||||||
afterUpdate(() => {
|
|
||||||
if (isValidTheme($theme)) {
|
|
||||||
document.documentElement.setAttribute("theme", $theme);
|
|
||||||
if (persist) {
|
|
||||||
try {
|
|
||||||
localStorage.setItem(persistKey, $theme);
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<slot />
|
|
||||||
|
|
@ -33,6 +33,11 @@ html[theme="g90"] .code-override {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Addig this to the layout grid fixes overstretching. */
|
||||||
|
.fix-overflow {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.token.tag,
|
.token.tag,
|
||||||
.token.operator {
|
.token.operator {
|
||||||
color: #6ea6ff;
|
color: #6ea6ff;
|
||||||
|
|
@ -167,16 +172,6 @@ html[theme="g90"] .code-override {
|
||||||
margin-bottom: var(--cds-layout-01);
|
margin-bottom: var(--cds-layout-01);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
|
||||||
position: sticky;
|
|
||||||
max-height: calc(100vh - 3rem);
|
|
||||||
top: 3rem;
|
|
||||||
padding-top: var(--cds-spacing-05);
|
|
||||||
padding-bottom: var(--cds-spacing-05);
|
|
||||||
padding-left: var(--cds-spacing-08);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-01 {
|
.code-01 {
|
||||||
font-size: var(--cds-code-01-font-size);
|
font-size: var(--cds-code-01-font-size);
|
||||||
font-weight: var(--cds-code-01-font-weight);
|
font-weight: var(--cds-code-01-font-weight);
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Content data-components>
|
<Content data-components>
|
||||||
<Grid>
|
<Grid class="fix-overflow">
|
||||||
<Row>
|
<Row>
|
||||||
<Column>
|
<Column>
|
||||||
<h1>{component}</h1>
|
<h1>{component}</h1>
|
||||||
|
|
|
||||||
|
|
@ -12,10 +12,11 @@
|
||||||
SideNav,
|
SideNav,
|
||||||
SideNavItems,
|
SideNavItems,
|
||||||
SideNavMenuItem,
|
SideNavMenuItem,
|
||||||
|
Theme,
|
||||||
Tag,
|
Tag,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
||||||
import Theme from "../components/Theme.svelte";
|
import { theme } from "../store";
|
||||||
|
|
||||||
const deprecated = [];
|
const deprecated = [];
|
||||||
const new_components = [];
|
const new_components = [];
|
||||||
|
|
@ -38,7 +39,7 @@
|
||||||
<!-- routify:options bundle=true -->
|
<!-- routify:options bundle=true -->
|
||||||
<svelte:window bind:innerWidth />
|
<svelte:window bind:innerWidth />
|
||||||
|
|
||||||
<Theme persist>
|
<Theme persist bind:theme="{$theme}">
|
||||||
<Header
|
<Header
|
||||||
aria-label="Navigation"
|
aria-label="Navigation"
|
||||||
href="{$url('/')}"
|
href="{$url('/')}"
|
||||||
|
|
|
||||||
|
|
@ -120,9 +120,10 @@ If an `href` value is specified, the component will render an [anchor element](h
|
||||||
<Button size="xl" kind="ghost">Ghost</Button>
|
<Button size="xl" kind="ghost">Ghost</Button>
|
||||||
<Button size="xl" kind="danger">Danger</Button>
|
<Button size="xl" kind="danger">Danger</Button>
|
||||||
|
|
||||||
## Disabled button
|
## Disabled state
|
||||||
|
|
||||||
<Button disabled>Disabled button</Button>
|
<Button disabled>Disabled button</Button>
|
||||||
|
<Button disabled iconDescription="Tooltip text" icon={Add} />
|
||||||
|
|
||||||
## Expressive styles
|
## Expressive styles
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,29 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
## Default (unexpanded)
|
## Default
|
||||||
|
|
||||||
|
This component uses a [resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to determine the height of the above-the-fold content.
|
||||||
|
|
||||||
|
It's unexpanded by default.
|
||||||
|
|
||||||
|
<ExpandableTile>
|
||||||
|
<div slot="above">
|
||||||
|
<div>
|
||||||
|
Above the fold content here
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
More above the fold content
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div slot="below">Below the fold content here</div>
|
||||||
|
</ExpandableTile>
|
||||||
|
|
||||||
|
## Custom tile heights
|
||||||
|
|
||||||
|
Set a custom height for the tiles on the "above" and "below" slots.
|
||||||
|
|
||||||
<ExpandableTile>
|
<ExpandableTile>
|
||||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||||
|
|
@ -13,22 +35,22 @@
|
||||||
## Expanded
|
## Expanded
|
||||||
|
|
||||||
<ExpandableTile expanded>
|
<ExpandableTile expanded>
|
||||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
<div slot="above">Above the fold content here</div>
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
<ExpandableTile light>
|
<ExpandableTile light>
|
||||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
<div slot="above">Above the fold content here</div>
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
## With icon labels
|
## With icon labels
|
||||||
|
|
||||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
<div slot="above">Above the fold content here</div>
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
## With interactive content
|
## With interactive content
|
||||||
|
|
@ -36,7 +58,7 @@
|
||||||
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
||||||
|
|
||||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||||
<div slot="above" style="height: 10rem">
|
<div slot="above">
|
||||||
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
||||||
Native element
|
Native element
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -48,5 +70,5 @@ For tiles containing interactive content, use `stopPropagation` to prevent the t
|
||||||
Svelte component
|
Svelte component
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
|
||||||
|
|
@ -42,4 +42,10 @@ Use the `forwardText` and `backwardText` props to customize the button text.
|
||||||
<PaginationNav
|
<PaginationNav
|
||||||
forwardText="Next"
|
forwardText="Next"
|
||||||
backwardText="Previous"
|
backwardText="Previous"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
## Tooltip Position
|
||||||
|
|
||||||
|
Use the `tooltipPosition` prop to change the alignment of the tooltip.
|
||||||
|
|
||||||
|
<PaginationNav tooltipPosition="outside" total={3} loop />
|
||||||
|
|
@ -50,3 +50,7 @@ Set prop `type` to `"text"` to toggle password visibility.
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
|
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
|
## With helper text
|
||||||
|
|
||||||
|
<PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
|
||||||
|
|
||||||
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
||||||
|
|
||||||
|
## Finished status
|
||||||
|
|
||||||
|
Specify `status="finished"` for the progress bar.
|
||||||
|
|
||||||
|
<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
|
||||||
|
|
||||||
|
## Error status
|
||||||
|
|
||||||
|
Specify `status="error"` for the progress bar.
|
||||||
|
|
||||||
|
<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
|
||||||
|
|
||||||
## Custom max value
|
## Custom max value
|
||||||
|
|
||||||
The default `max` value is `100`.
|
The default `max` value is `100`.
|
||||||
|
|
@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
|
||||||
|
|
||||||
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
||||||
|
|
||||||
|
## Indented status variant
|
||||||
|
|
||||||
|
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
|
||||||
|
|
||||||
## UX example
|
## UX example
|
||||||
|
|
||||||
This example shows how to animate the progress bar from 0 to 100% with start and end states.
|
This example shows how to animate the progress bar from 0 to 100% with start and end states.
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,17 @@ components: ["Slider", "SliderSkeleton"]
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
<Slider />
|
<Slider labelText="Instances" value={0} />
|
||||||
|
|
||||||
## Full width
|
## Full width
|
||||||
|
|
||||||
Set `fullWidth` to `true` for the slider to span the full width of its containing element.
|
Set `fullWidth` to `true` for the slider to span the full width of its containing element.
|
||||||
|
|
||||||
<Slider fullWidth />
|
<Slider labelText="Instances" fullWidth value={0} />
|
||||||
|
|
||||||
## Hidden text input
|
## Hidden text input
|
||||||
|
|
||||||
<Slider hideTextInput />
|
<Slider labelText="Instances" hideTextInput value={0} />
|
||||||
|
|
||||||
## Custom minimum, maximum values
|
## Custom minimum, maximum values
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
|
|
||||||
## Custom icon
|
## Custom icon
|
||||||
|
|
||||||
Note: rendering a custom icon cannnot be used with the filterable variant.
|
Note: rendering a custom icon cannot be used with the filterable variant.
|
||||||
|
|
||||||
<Tag icon={IbmCloud}>IBM Cloud</Tag>
|
<Tag icon={IbmCloud}>IBM Cloud</Tag>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ The `Theme` component can dyanmically update the Carbon theme on the client-side
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
|
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
|
||||||
|
|
||||||
<CodeSnippet svx-ignore {code} />
|
<CodeSnippet svx-ignore {code} />
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
|
The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
|
||||||
|
|
||||||
Optional properties include `disabled`, `expanded`, `icon`, and `children`.
|
Optional properties include `disabled`, `icon`, and `children`.
|
||||||
|
|
||||||
A parent node contains `children` while a leaf node does not.
|
A parent node contains `children` while a leaf node does not.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,14 @@
|
||||||
|
|
||||||
let max = 328;
|
let max = 328;
|
||||||
let value = 0;
|
let value = 0;
|
||||||
|
let status = "active";
|
||||||
|
|
||||||
$: helperText =
|
$: helperText =
|
||||||
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
|
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
|
||||||
$: if (value === max) helperText = "Done";
|
$: if (value === max) {
|
||||||
|
helperText = "Done";
|
||||||
|
status = "finished";
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
|
|
@ -14,6 +18,7 @@
|
||||||
value="{value}"
|
value="{value}"
|
||||||
max="{max}"
|
max="{max}"
|
||||||
helperText="{helperText}"
|
helperText="{helperText}"
|
||||||
|
status="{status}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
||||||
|
|
@ -37,7 +42,10 @@
|
||||||
<Button
|
<Button
|
||||||
kind="tertiary"
|
kind="tertiary"
|
||||||
disabled="{value !== max}"
|
disabled="{value !== max}"
|
||||||
on:click="{() => (value = 0)}"
|
on:click="{() => {
|
||||||
|
value = 0;
|
||||||
|
status = 'active';
|
||||||
|
}}"
|
||||||
>
|
>
|
||||||
Reset
|
Reset
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,11 @@
|
||||||
id: 1,
|
id: 1,
|
||||||
text: "Analytics",
|
text: "Analytics",
|
||||||
icon: Analytics,
|
icon: Analytics,
|
||||||
expanded: true,
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
text: "IBM Analytics Engine",
|
text: "IBM Analytics Engine",
|
||||||
icon: Analytics,
|
icon: Analytics,
|
||||||
expanded: true,
|
|
||||||
children: [
|
children: [
|
||||||
{ id: 3, text: "Apache Spark", icon: Analytics },
|
{ id: 3, text: "Apache Spark", icon: Analytics },
|
||||||
{ id: 4, text: "Hadoop", icon: Analytics },
|
{ id: 4, text: "Hadoop", icon: Analytics },
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,7 @@ bufferutil@^4.0.1:
|
||||||
node-gyp-build "~3.7.0"
|
node-gyp-build "~3.7.0"
|
||||||
|
|
||||||
carbon-components-svelte@../:
|
carbon-components-svelte@../:
|
||||||
version "0.70.1"
|
version "0.76.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
flatpickr "4.6.9"
|
flatpickr "4.6.9"
|
||||||
|
|
||||||
|
|
@ -1080,6 +1080,11 @@ punycode@^2.1.1:
|
||||||
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
|
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
|
||||||
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
|
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
|
||||||
|
|
||||||
|
querystringify@^2.1.1:
|
||||||
|
version "2.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
|
||||||
|
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
|
||||||
|
|
||||||
read-pkg@^3.0.0:
|
read-pkg@^3.0.0:
|
||||||
version "3.0.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
|
resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
|
||||||
|
|
@ -1105,6 +1110,11 @@ remark-slug@^6.0.0:
|
||||||
mdast-util-to-string "^1.0.0"
|
mdast-util-to-string "^1.0.0"
|
||||||
unist-util-visit "^2.0.0"
|
unist-util-visit "^2.0.0"
|
||||||
|
|
||||||
|
requires-port@^1.0.0:
|
||||||
|
version "1.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
|
||||||
|
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
|
||||||
|
|
||||||
resolve@^1.10.0:
|
resolve@^1.10.0:
|
||||||
version "1.17.0"
|
version "1.17.0"
|
||||||
resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
|
resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
|
||||||
|
|
@ -1148,9 +1158,9 @@ saxes@^5.0.1:
|
||||||
xmlchars "^2.2.0"
|
xmlchars "^2.2.0"
|
||||||
|
|
||||||
"semver@2 || 3 || 4 || 5", semver@^5.5.0:
|
"semver@2 || 3 || 4 || 5", semver@^5.5.0:
|
||||||
version "5.7.1"
|
version "5.7.2"
|
||||||
resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
|
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
|
||||||
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
|
integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
|
||||||
|
|
||||||
shebang-command@^1.2.0:
|
shebang-command@^1.2.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
|
|
@ -1280,10 +1290,10 @@ svelte-hmr@^0.14.12:
|
||||||
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
|
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
|
||||||
integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
|
integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
|
||||||
|
|
||||||
svelte@^3.49.0:
|
svelte@^3.58.0:
|
||||||
version "3.49.0"
|
version "3.58.0"
|
||||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
|
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
|
||||||
integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
|
integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
|
||||||
|
|
||||||
symbol-tree@^3.2.4:
|
symbol-tree@^3.2.4:
|
||||||
version "3.2.4"
|
version "3.2.4"
|
||||||
|
|
@ -1291,13 +1301,14 @@ symbol-tree@^3.2.4:
|
||||||
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
|
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
|
||||||
|
|
||||||
tough-cookie@^4.0.0:
|
tough-cookie@^4.0.0:
|
||||||
version "4.0.0"
|
version "4.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
|
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
|
||||||
integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
|
integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
|
||||||
dependencies:
|
dependencies:
|
||||||
psl "^1.1.33"
|
psl "^1.1.33"
|
||||||
punycode "^2.1.1"
|
punycode "^2.1.1"
|
||||||
universalify "^0.1.2"
|
universalify "^0.2.0"
|
||||||
|
url-parse "^1.5.3"
|
||||||
|
|
||||||
tr46@^2.1.0:
|
tr46@^2.1.0:
|
||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
|
|
@ -1342,16 +1353,24 @@ unist-util-visit@^2.0.0:
|
||||||
unist-util-is "^4.0.0"
|
unist-util-is "^4.0.0"
|
||||||
unist-util-visit-parents "^3.0.0"
|
unist-util-visit-parents "^3.0.0"
|
||||||
|
|
||||||
universalify@^0.1.2:
|
universalify@^0.2.0:
|
||||||
version "0.1.2"
|
version "0.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
|
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
|
||||||
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
|
integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
|
||||||
|
|
||||||
universalify@^1.0.0:
|
universalify@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
|
resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
|
||||||
integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
|
integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
|
||||||
|
|
||||||
|
url-parse@^1.5.3:
|
||||||
|
version "1.5.10"
|
||||||
|
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
|
||||||
|
integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
|
||||||
|
dependencies:
|
||||||
|
querystringify "^2.1.1"
|
||||||
|
requires-port "^1.0.0"
|
||||||
|
|
||||||
utf-8-validate@^5.0.2:
|
utf-8-validate@^5.0.2:
|
||||||
version "5.0.2"
|
version "5.0.2"
|
||||||
resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"
|
resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"
|
||||||
|
|
|
||||||
|
|
@ -2197,9 +2197,9 @@ selfsigned@^2.1.1:
|
||||||
node-forge "^1"
|
node-forge "^1"
|
||||||
|
|
||||||
semver@^7.3.8:
|
semver@^7.3.8:
|
||||||
version "7.3.8"
|
version "7.5.4"
|
||||||
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
|
resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
|
||||||
integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
|
integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
|
||||||
dependencies:
|
dependencies:
|
||||||
lru-cache "^6.0.0"
|
lru-cache "^6.0.0"
|
||||||
|
|
||||||
|
|
|
||||||
35
package.json
35
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "carbon-components-svelte",
|
"name": "carbon-components-svelte",
|
||||||
"version": "0.71.0",
|
"version": "0.76.1",
|
||||||
"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",
|
||||||
|
|
@ -11,13 +11,14 @@
|
||||||
"css/*.css"
|
"css/*.css"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test:types": "svelte-check --workspace tests",
|
"test:types": "svelte-check --workspace tests --no-tsconfig --ignore 'docs,examples'",
|
||||||
|
"lint": "prettier --write \"**/*.{svelte,md,js,json,ts}\"",
|
||||||
"build:css": "node scripts/build-css",
|
"build:css": "node scripts/build-css",
|
||||||
"build:docs": "node scripts/build-docs",
|
"build:docs": "node scripts/build-docs",
|
||||||
"build:lib": "rollup -c",
|
"build:lib": "rollup -c",
|
||||||
"prepack": "yarn build:docs & yarn build:lib",
|
|
||||||
"format": "prettier --write \"./**/*.{svelte,js,md}\"",
|
"format": "prettier --write \"./**/*.{svelte,js,md}\"",
|
||||||
"prepare": "husky install"
|
"prepack": "yarn build:docs & yarn build:lib",
|
||||||
|
"release": "standard-version && yarn prepack"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"flatpickr": "4.6.9"
|
"flatpickr": "4.6.9"
|
||||||
|
|
@ -25,12 +26,10 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-commonjs": "^21.0.3",
|
"@rollup/plugin-commonjs": "^21.0.3",
|
||||||
"@rollup/plugin-node-resolve": "^13.3.0",
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
||||||
"@tsconfig/svelte": "^3.0.0",
|
"@tsconfig/svelte": "^4.0.1",
|
||||||
"autoprefixer": "^10.4.8",
|
"autoprefixer": "^10.4.8",
|
||||||
"carbon-components": "10.56.0",
|
"carbon-components": "10.57.0",
|
||||||
"carbon-icons-svelte": "^11.2.0",
|
"carbon-icons-svelte": "^11.2.0",
|
||||||
"husky": "^8.0.1",
|
|
||||||
"lint-staged": "^13.0.3",
|
|
||||||
"postcss": "^8.4.16",
|
"postcss": "^8.4.16",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"prettier-plugin-svelte": "^2.7.0",
|
"prettier-plugin-svelte": "^2.7.0",
|
||||||
|
|
@ -38,16 +37,17 @@
|
||||||
"rollup-plugin-svelte": "^7.1.0",
|
"rollup-plugin-svelte": "^7.1.0",
|
||||||
"rollup-plugin-terser": "^7.0.2",
|
"rollup-plugin-terser": "^7.0.2",
|
||||||
"sass": "^1.49.11",
|
"sass": "^1.49.11",
|
||||||
"sveld": "^0.18.0",
|
"standard-version": "^9.5.0",
|
||||||
"svelte": "^3.51.0",
|
"sveld": "^0.18.1",
|
||||||
"svelte-check": "^2.8.1",
|
"svelte": "^3.58.0",
|
||||||
|
"svelte-check": "^3.4.3",
|
||||||
"typescript": "^4.7.4"
|
"typescript": "^4.7.4"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"standard-version": {
|
||||||
"*.{svelte,md,js,json}": [
|
"skip": {
|
||||||
"prettier --write"
|
"commit": true,
|
||||||
],
|
"tag": true
|
||||||
"*.{svelte,js,md}": "prettier --write"
|
}
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"svelteStrictMode": true
|
"svelteStrictMode": true
|
||||||
|
|
@ -72,7 +72,8 @@
|
||||||
"css"
|
"css"
|
||||||
],
|
],
|
||||||
"contributors": [
|
"contributors": [
|
||||||
|
"Josef Aidt (https://github.com/josefaidt)",
|
||||||
"Eric Liu (https://github.com/metonym)",
|
"Eric Liu (https://github.com/metonym)",
|
||||||
"Josef Aidt (https://github.com/josefaidt)"
|
"Enrico Sacchetti (https://github.com/theetrain)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
56
src/Breakpoint/breakpointObserver.d.ts
vendored
56
src/Breakpoint/breakpointObserver.d.ts
vendored
|
|
@ -1,28 +1,28 @@
|
||||||
import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
|
import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
|
||||||
import type { BreakpointSize, BreakpointValue } from "./breakpoints";
|
import type { BreakpointSize, BreakpointValue } from "./breakpoints";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a readable store that returns the current breakpoint size.
|
* Creates a readable store that returns the current breakpoint size.
|
||||||
* It also provides functions for creating derived stores used to do comparisons.
|
* It also provides functions for creating derived stores used to do comparisons.
|
||||||
*/
|
*/
|
||||||
export function breakpointObserver(): {
|
export function breakpointObserver(): {
|
||||||
subscribe: (
|
subscribe: (
|
||||||
this: void,
|
this: void,
|
||||||
run: Subscriber<any>,
|
run: Subscriber<any>,
|
||||||
invalidate?: (value?: any) => void
|
invalidate?: (value?: any) => void
|
||||||
) => Unsubscriber;
|
) => Unsubscriber;
|
||||||
/**
|
/**
|
||||||
* Returns a store readable store that returns whether the current
|
* Returns a store readable store that returns whether the current
|
||||||
* breakpoint is smaller than {@link size}.
|
* breakpoint is smaller than {@link size}.
|
||||||
* @param {BreakpointSize} size Size to compare against.
|
* @param {BreakpointSize} size Size to compare against.
|
||||||
*/
|
*/
|
||||||
smallerThan: (size: BreakpointSize) => Readable<boolean>;
|
smallerThan: (size: BreakpointSize) => Readable<boolean>;
|
||||||
/**
|
/**
|
||||||
* Returns a store readable store that returns whether the current
|
* Returns a store readable store that returns whether the current
|
||||||
* breakpoint is larger than {@link size}.
|
* breakpoint is larger than {@link size}.
|
||||||
* @param {BreakpointSize} size Size to compare against.
|
* @param {BreakpointSize} size Size to compare against.
|
||||||
*/
|
*/
|
||||||
largerThan: (size: BreakpointSize) => Readable<boolean>;
|
largerThan: (size: BreakpointSize) => Readable<boolean>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default breakpointObserver;
|
export default breakpointObserver;
|
||||||
|
|
|
||||||
22
src/Breakpoint/breakpoints.d.ts
vendored
22
src/Breakpoint/breakpoints.d.ts
vendored
|
|
@ -1,11 +1,11 @@
|
||||||
/**
|
/**
|
||||||
* Pixel sizes of Carbon grid breakpoints.
|
* Pixel sizes of Carbon grid breakpoints.
|
||||||
* @type {Record<BreakpointSize, BreakpointValue>}
|
* @type {Record<BreakpointSize, BreakpointValue>}
|
||||||
*/
|
*/
|
||||||
export const breakpoints: Record<BreakpointSize, BreakpointValue>;
|
export const breakpoints: Record<BreakpointSize, BreakpointValue>;
|
||||||
|
|
||||||
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
|
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
|
||||||
|
|
||||||
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
||||||
|
|
||||||
export default breakpoints;
|
export default breakpoints;
|
||||||
|
|
|
||||||
6
src/Breakpoint/index.d.ts
vendored
6
src/Breakpoint/index.d.ts
vendored
|
|
@ -1,3 +1,3 @@
|
||||||
export { default as Breakpoint } from "./Breakpoint.svelte";
|
export { default as Breakpoint } from "./Breakpoint.svelte";
|
||||||
export { breakpointObserver } from "./breakpointObserver";
|
export { breakpointObserver } from "./breakpointObserver";
|
||||||
export { breakpoints } from "./breakpoints";
|
export { breakpoints } from "./breakpoints";
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
|
* @restProps {div}
|
||||||
* @event {boolean} check
|
* @event {boolean} check
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -218,13 +218,15 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class:bx--list-box__wrapper="{true}">
|
<div class:bx--list-box__wrapper="{true}">
|
||||||
{#if titleText}
|
{#if titleText || $$slots.titleText}
|
||||||
<label
|
<label
|
||||||
for="{id}"
|
for="{id}"
|
||||||
class:bx--label="{true}"
|
class:bx--label="{true}"
|
||||||
class:bx--label--disabled="{disabled}"
|
class:bx--label--disabled="{disabled}"
|
||||||
>
|
>
|
||||||
|
<slot name="titleText">
|
||||||
{titleText}
|
{titleText}
|
||||||
|
</slot>
|
||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
<ListBox
|
<ListBox
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
|
<!-- svelte-ignore a11y-interactive-supports-focus -->
|
||||||
<div
|
<div
|
||||||
role="tablist"
|
role="tablist"
|
||||||
class:bx--content-switcher="{true}"
|
class:bx--content-switcher="{true}"
|
||||||
|
|
|
||||||
|
|
@ -153,6 +153,7 @@
|
||||||
}}"
|
}}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul
|
<ul
|
||||||
bind:this="{ref}"
|
bind:this="{ref}"
|
||||||
role="menu"
|
role="menu"
|
||||||
|
|
|
||||||
|
|
@ -162,7 +162,7 @@
|
||||||
{#if !invalid && warn}
|
{#if !invalid && warn}
|
||||||
<div class:bx--form-requirement="{true}">{warnText}</div>
|
<div class:bx--form-requirement="{true}">{warnText}</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if helperText}
|
{#if !invalid && !warn && helperText}
|
||||||
<div
|
<div
|
||||||
class:bx--form__helper-text="{true}"
|
class:bx--form__helper-text="{true}"
|
||||||
class:bx--form__helper-text--disabled="{disabled}"
|
class:bx--form__helper-text--disabled="{disabled}"
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,7 @@
|
||||||
/** Obtain a reference to the button HTML element */
|
/** Obtain a reference to the button HTML element */
|
||||||
export let ref = null;
|
export let ref = null;
|
||||||
|
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher, onMount } from "svelte";
|
||||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||||
import {
|
import {
|
||||||
|
|
@ -146,17 +146,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const dispatchSelect = () => {
|
const dispatchSelect = () => {
|
||||||
dispatch("select", { selectedId, selectedItem });
|
dispatch("select", {
|
||||||
|
selectedId,
|
||||||
|
selectedItem: items.find((item) => item.id === selectedId),
|
||||||
|
});
|
||||||
};
|
};
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window
|
const pageClickHandler = ({ target }) => {
|
||||||
on:click="{({ target }) => {
|
|
||||||
if (open && ref && !ref.contains(target)) {
|
if (open && ref && !ref.contains(target)) {
|
||||||
open = false;
|
open = false;
|
||||||
}
|
}
|
||||||
}}"
|
};
|
||||||
/>
|
|
||||||
|
onMount(() => {
|
||||||
|
if (parent) {
|
||||||
|
parent.addEventListener("click", pageClickHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (parent) {
|
||||||
|
parent.removeEventListener("click", pageClickHandler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:click="{pageClickHandler}" />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class:bx--dropdown__wrapper="{true}"
|
class:bx--dropdown__wrapper="{true}"
|
||||||
|
|
@ -182,10 +197,11 @@
|
||||||
size="{size}"
|
size="{size}"
|
||||||
name="{name}"
|
name="{name}"
|
||||||
aria-label="{$$props['aria-label']}"
|
aria-label="{$$props['aria-label']}"
|
||||||
class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
|
class="bx--dropdown
|
||||||
'bx--dropdown--invalid'} {!invalid &&
|
{direction === 'top' && 'bx--list-box--up'}
|
||||||
warn &&
|
{invalid && 'bx--dropdown--invalid'}
|
||||||
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
|
{!invalid && warn && 'bx--dropdown--warning'}
|
||||||
|
{open && 'bx--dropdown--open'}
|
||||||
{size === 'sm' && 'bx--dropdown--sm'}
|
{size === 'sm' && 'bx--dropdown--sm'}
|
||||||
{size === 'xl' && 'bx--dropdown--xl'}
|
{size === 'xl' && 'bx--dropdown--xl'}
|
||||||
{inline && 'bx--dropdown--inline'}
|
{inline && 'bx--dropdown--inline'}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
|
/**
|
||||||
|
* @restProps {div | button | svg}
|
||||||
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the file name status
|
* Specify the file name status
|
||||||
* @type {"uploading" | "edit" | "complete"}
|
* @type {"uploading" | "edit" | "complete"}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
|
/**
|
||||||
|
* @restProps {form}
|
||||||
|
*/
|
||||||
|
|
||||||
import { setContext } from "svelte";
|
import { setContext } from "svelte";
|
||||||
import Form from "../Form/Form.svelte";
|
import Form from "../Form/Form.svelte";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
role="option"
|
role="option"
|
||||||
|
tabindex="-1"
|
||||||
class:bx--list-box__menu-item="{true}"
|
class:bx--list-box__menu-item="{true}"
|
||||||
class:bx--list-box__menu-item--active="{active}"
|
class:bx--list-box__menu-item--active="{active}"
|
||||||
class:bx--list-box__menu-item--highlighted="{highlighted || active}"
|
class:bx--list-box__menu-item--highlighted="{highlighted || active}"
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
<div
|
<div
|
||||||
bind:this="{ref}"
|
bind:this="{ref}"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex="{disabled ? -1 : 0}"
|
tabindex="{disabled ? -1 : 0}"
|
||||||
class:bx--tag__close-icon="{true}"
|
class:bx--tag__close-icon="{true}"
|
||||||
on:click|preventDefault|stopPropagation="{(e) => {
|
on:click|preventDefault|stopPropagation="{(e) => {
|
||||||
if (!disabled) {
|
if (!disabled) {
|
||||||
|
|
|
||||||
|
|
@ -293,14 +293,16 @@
|
||||||
class:bx--list-box__wrapper--inline="{inline}"
|
class:bx--list-box__wrapper--inline="{inline}"
|
||||||
class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
|
class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
|
||||||
>
|
>
|
||||||
{#if titleText}
|
{#if titleText || $$slots.titleText}
|
||||||
<label
|
<label
|
||||||
for="{id}"
|
for="{id}"
|
||||||
class:bx--label="{true}"
|
class:bx--label="{true}"
|
||||||
class:bx--label--disabled="{disabled}"
|
class:bx--label--disabled="{disabled}"
|
||||||
class:bx--visually-hidden="{hideLabel}"
|
class:bx--visually-hidden="{hideLabel}"
|
||||||
>
|
>
|
||||||
|
<slot name="titleText">
|
||||||
{titleText}
|
{titleText}
|
||||||
|
</slot>
|
||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
<ListBox
|
<ListBox
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,7 @@
|
||||||
$: incrementLabel = translateWithId("increment");
|
$: incrementLabel = translateWithId("increment");
|
||||||
$: decrementLabel = translateWithId("decrement");
|
$: decrementLabel = translateWithId("decrement");
|
||||||
$: error =
|
$: error =
|
||||||
invalid ||
|
(invalid && !readonly) ||
|
||||||
(!allowEmpty && value == null) ||
|
(!allowEmpty && value == null) ||
|
||||||
value > max ||
|
value > max ||
|
||||||
(typeof value === "number" && value < min);
|
(typeof value === "number" && value < min);
|
||||||
|
|
@ -191,8 +191,8 @@
|
||||||
type="number"
|
type="number"
|
||||||
pattern="[0-9]*"
|
pattern="[0-9]*"
|
||||||
aria-describedby="{errorId}"
|
aria-describedby="{errorId}"
|
||||||
data-invalid="{invalid || undefined}"
|
data-invalid="{error || undefined}"
|
||||||
aria-invalid="{invalid || undefined}"
|
aria-invalid="{error || undefined}"
|
||||||
aria-label="{label ? undefined : ariaLabel}"
|
aria-label="{label ? undefined : ariaLabel}"
|
||||||
disabled="{disabled}"
|
disabled="{disabled}"
|
||||||
id="{id}"
|
id="{id}"
|
||||||
|
|
@ -211,16 +211,17 @@
|
||||||
on:blur
|
on:blur
|
||||||
on:paste
|
on:paste
|
||||||
/>
|
/>
|
||||||
{#if invalid}
|
|
||||||
<WarningFilled class="bx--number__invalid" />
|
|
||||||
{/if}
|
|
||||||
{#if !invalid && warn}
|
|
||||||
<WarningAltFilled
|
|
||||||
class="bx--number__invalid bx--number__invalid--warning"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{#if readonly}
|
{#if readonly}
|
||||||
<EditOff class="bx--text-input__readonly-icon" />
|
<EditOff class="bx--text-input__readonly-icon" />
|
||||||
|
{:else}
|
||||||
|
{#if invalid}
|
||||||
|
<WarningFilled class="bx--number__invalid" />
|
||||||
|
{/if}
|
||||||
|
{#if !invalid && warn}
|
||||||
|
<WarningAltFilled
|
||||||
|
class="bx--number__invalid bx--number__invalid--warning"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !hideSteppers}
|
{#if !hideSteppers}
|
||||||
<div class:bx--number__controls="{true}">
|
<div class:bx--number__controls="{true}">
|
||||||
|
|
|
||||||
|
|
@ -242,6 +242,7 @@
|
||||||
/>
|
/>
|
||||||
</slot>
|
</slot>
|
||||||
{#if open}
|
{#if open}
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul
|
<ul
|
||||||
bind:this="{menuRef}"
|
bind:this="{menuRef}"
|
||||||
role="menu"
|
role="menu"
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,12 @@
|
||||||
/** Specify the backward button text */
|
/** Specify the backward button text */
|
||||||
export let backwardText = "Previous page";
|
export let backwardText = "Previous page";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the position of the tooltip relative to the pagination buttons.
|
||||||
|
* @type {"top" | "right" | "bottom" | "left" | "outside" | "inside"}
|
||||||
|
*/
|
||||||
|
export let tooltipPosition = "bottom";
|
||||||
|
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import CaretLeft from "../icons/CaretLeft.svelte";
|
import CaretLeft from "../icons/CaretLeft.svelte";
|
||||||
import CaretRight from "../icons/CaretRight.svelte";
|
import CaretRight from "../icons/CaretRight.svelte";
|
||||||
|
|
@ -76,7 +82,11 @@
|
||||||
<Button
|
<Button
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
tooltipAlignment="center"
|
tooltipAlignment="center"
|
||||||
tooltipPosition="bottom"
|
tooltipPosition="{tooltipPosition === 'inside'
|
||||||
|
? 'right'
|
||||||
|
: tooltipPosition === 'outside'
|
||||||
|
? 'left'
|
||||||
|
: tooltipPosition}"
|
||||||
iconDescription="{backwardText}"
|
iconDescription="{backwardText}"
|
||||||
disabled="{!loop && page === 1}"
|
disabled="{!loop && page === 1}"
|
||||||
icon="{CaretLeft}"
|
icon="{CaretLeft}"
|
||||||
|
|
@ -147,7 +157,11 @@
|
||||||
<Button
|
<Button
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
tooltipAlignment="center"
|
tooltipAlignment="center"
|
||||||
tooltipPosition="bottom"
|
tooltipPosition="{tooltipPosition === 'inside'
|
||||||
|
? 'left'
|
||||||
|
: tooltipPosition === 'outside'
|
||||||
|
? 'right'
|
||||||
|
: tooltipPosition}"
|
||||||
iconDescription="{forwardText}"
|
iconDescription="{forwardText}"
|
||||||
disabled="{!loop && page === total}"
|
disabled="{!loop && page === total}"
|
||||||
icon="{CaretRight}"
|
icon="{CaretRight}"
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,12 @@
|
||||||
*/
|
*/
|
||||||
export let kind = "default";
|
export let kind = "default";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the status
|
||||||
|
* @type {"active" | "finished" | "error"}
|
||||||
|
*/
|
||||||
|
export let status = "active";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the size
|
* Specify the size
|
||||||
* @type {"sm" | "md"}
|
* @type {"sm" | "md"}
|
||||||
|
|
@ -32,10 +38,27 @@
|
||||||
/** Set an id for the progress bar element */
|
/** Set an id for the progress bar element */
|
||||||
export let id = "ccs-" + Math.random().toString(36);
|
export let id = "ccs-" + Math.random().toString(36);
|
||||||
|
|
||||||
|
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||||
|
import ErrorFilled from "../icons/ErrorFilled.svelte";
|
||||||
|
|
||||||
|
const statusIcons = {
|
||||||
|
error: ErrorFilled,
|
||||||
|
finished: CheckmarkFilled,
|
||||||
|
};
|
||||||
|
|
||||||
let helperId = "ccs-" + Math.random().toString(36);
|
let helperId = "ccs-" + Math.random().toString(36);
|
||||||
|
|
||||||
$: indeterminate = value === undefined;
|
$: indeterminate = value === undefined && status === "active";
|
||||||
$: capped = value > max ? max : value < 0 ? 0 : value;
|
let capped;
|
||||||
|
$: {
|
||||||
|
if (status === "error" || value < 0) {
|
||||||
|
capped = 0;
|
||||||
|
} else if (value > max) {
|
||||||
|
capped = max;
|
||||||
|
} else {
|
||||||
|
capped = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -45,6 +68,8 @@
|
||||||
class:bx--progress-bar--small="{size === 'sm'}"
|
class:bx--progress-bar--small="{size === 'sm'}"
|
||||||
class:bx--progress-bar--inline="{kind === 'inline'}"
|
class:bx--progress-bar--inline="{kind === 'inline'}"
|
||||||
class:bx--progress-bar--indented="{kind === 'indented'}"
|
class:bx--progress-bar--indented="{kind === 'indented'}"
|
||||||
|
class:bx--progress-bar--error="{status === 'error'}"
|
||||||
|
class:bx--progress-bar--finished="{status === 'finished'}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
|
|
@ -55,11 +80,18 @@
|
||||||
<slot name="labelText">
|
<slot name="labelText">
|
||||||
{labelText}
|
{labelText}
|
||||||
</slot>
|
</slot>
|
||||||
|
{#if status === "error" || status === "finished"}
|
||||||
|
<svelte:component
|
||||||
|
this="{statusIcons[status]}"
|
||||||
|
class="bx--progress-bar__status-icon"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
id="{id}"
|
id="{id}"
|
||||||
class:bx--progress-bar__track="{true}"
|
class:bx--progress-bar__track="{true}"
|
||||||
|
aria-busy="{status === 'active'}"
|
||||||
aria-valuemin="{indeterminate ? undefined : 0}"
|
aria-valuemin="{indeterminate ? undefined : 0}"
|
||||||
aria-valuemax="{indeterminate ? undefined : max}"
|
aria-valuemax="{indeterminate ? undefined : max}"
|
||||||
aria-valuenow="{indeterminate ? undefined : capped}"
|
aria-valuenow="{indeterminate ? undefined : capped}"
|
||||||
|
|
@ -67,7 +99,7 @@
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class:bx--progress-bar__bar="{true}"
|
class:bx--progress-bar__bar="{true}"
|
||||||
style="transform: scaleX({capped / max})"
|
style:transform="{status === "active" && `scaleX(${capped / max})`}"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
{#if helperText}
|
{#if helperText}
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,6 @@
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
<li
|
<li
|
||||||
aria-disabled="{disabled}"
|
|
||||||
id="{id}"
|
id="{id}"
|
||||||
class:bx--progress-step="{true}"
|
class:bx--progress-step="{true}"
|
||||||
class:bx--progress-step--current="{current}"
|
class:bx--progress-step--current="{current}"
|
||||||
|
|
|
||||||
|
|
@ -181,7 +181,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if helperText}
|
{#if !invalid && !warn && helperText}
|
||||||
<div
|
<div
|
||||||
class:bx--form__helper-text="{true}"
|
class:bx--form__helper-text="{true}"
|
||||||
class:bx--form__helper-text--disabled="{disabled}"
|
class:bx--form__helper-text--disabled="{disabled}"
|
||||||
|
|
|
||||||
|
|
@ -193,21 +193,10 @@
|
||||||
class:bx--slider__filled-track="{true}"
|
class:bx--slider__filled-track="{true}"
|
||||||
style="transform: translate(0, -50%) scaleX({left / 100})"
|
style="transform: translate(0, -50%) scaleX({left / 100})"
|
||||||
></div>
|
></div>
|
||||||
<input
|
|
||||||
type="hidden"
|
|
||||||
class:bx--slider__input="{true}"
|
|
||||||
name="{name}"
|
|
||||||
value="{value}"
|
|
||||||
required="{required}"
|
|
||||||
min="{min}"
|
|
||||||
max="{max}"
|
|
||||||
step="{step}"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
|
<span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
|
||||||
<input
|
<input
|
||||||
type="{hideTextInput ? 'hidden' : inputType}"
|
type="{hideTextInput ? 'hidden' : inputType}"
|
||||||
style="{hideTextInput ? 'display: none' : undefined}"
|
|
||||||
id="input-{id}"
|
id="input-{id}"
|
||||||
name="{name}"
|
name="{name}"
|
||||||
class:bx--text-input="{true}"
|
class:bx--text-input="{true}"
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@
|
||||||
<slot />
|
<slot />
|
||||||
</label>
|
</label>
|
||||||
{:else}
|
{:else}
|
||||||
|
<!-- svelte-ignore a11y-interactive-supports-focus -->
|
||||||
<div
|
<div
|
||||||
role="row"
|
role="row"
|
||||||
class:bx--structured-list-row="{true}"
|
class:bx--structured-list-row="{true}"
|
||||||
|
|
|
||||||
|
|
@ -151,6 +151,7 @@
|
||||||
</a>
|
</a>
|
||||||
<ChevronDown aria-hidden="true" title="{iconDescription}" />
|
<ChevronDown aria-hidden="true" title="{iconDescription}" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul
|
<ul
|
||||||
bind:this="{refTabList}"
|
bind:this="{refTabList}"
|
||||||
role="tablist"
|
role="tablist"
|
||||||
|
|
|
||||||
|
|
@ -89,6 +89,7 @@
|
||||||
const ctx = getContext("Form");
|
const ctx = getContext("Form");
|
||||||
|
|
||||||
$: isFluid = !!ctx && ctx.isFluid;
|
$: isFluid = !!ctx && ctx.isFluid;
|
||||||
|
$: helperId = `helper-${id}`;
|
||||||
$: errorId = `error-${id}`;
|
$: errorId = `error-${id}`;
|
||||||
$: warnId = `warn-${id}`;
|
$: warnId = `warn-${id}`;
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -122,6 +123,7 @@
|
||||||
</label>
|
</label>
|
||||||
{#if !isFluid && helperText}
|
{#if !isFluid && helperText}
|
||||||
<div
|
<div
|
||||||
|
id="{helperId}"
|
||||||
class:bx--form__helper-text="{true}"
|
class:bx--form__helper-text="{true}"
|
||||||
class:bx--form__helper-text--disabled="{disabled}"
|
class:bx--form__helper-text--disabled="{disabled}"
|
||||||
class:bx--form__helper-text--inline="{inline}"
|
class:bx--form__helper-text--inline="{inline}"
|
||||||
|
|
@ -167,7 +169,13 @@
|
||||||
bind:this="{ref}"
|
bind:this="{ref}"
|
||||||
data-invalid="{invalid || undefined}"
|
data-invalid="{invalid || undefined}"
|
||||||
aria-invalid="{invalid || undefined}"
|
aria-invalid="{invalid || undefined}"
|
||||||
aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
|
aria-describedby="{invalid
|
||||||
|
? errorId
|
||||||
|
: warn
|
||||||
|
? warnId
|
||||||
|
: helperText
|
||||||
|
? helperId
|
||||||
|
: undefined}"
|
||||||
id="{id}"
|
id="{id}"
|
||||||
name="{name}"
|
name="{name}"
|
||||||
placeholder="{placeholder}"
|
placeholder="{placeholder}"
|
||||||
|
|
@ -240,7 +248,7 @@
|
||||||
{invalidText}
|
{invalidText}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !invalid && !warn && !isFluid && !inline}
|
{#if !invalid && !warn && !isFluid && !inline && helperText}
|
||||||
<div
|
<div
|
||||||
class:bx--form__helper-text="{true}"
|
class:bx--form__helper-text="{true}"
|
||||||
class:bx--form__helper-text--disabled="{disabled}"
|
class:bx--form__helper-text--disabled="{disabled}"
|
||||||
|
|
|
||||||
|
|
@ -95,6 +95,8 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
$: isFluid = !!ctx && ctx.isFluid;
|
$: isFluid = !!ctx && ctx.isFluid;
|
||||||
|
$: error = invalid && !readonly;
|
||||||
|
$: helperId = `helper-${id}`;
|
||||||
$: errorId = `error-${id}`;
|
$: errorId = `error-${id}`;
|
||||||
$: warnId = `warn-${id}`;
|
$: warnId = `warn-${id}`;
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -160,29 +162,36 @@
|
||||||
class:bx--text-input__field-outer-wrapper--inline="{inline}"
|
class:bx--text-input__field-outer-wrapper--inline="{inline}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
data-invalid="{invalid || undefined}"
|
data-invalid="{error || undefined}"
|
||||||
data-warn="{warn || undefined}"
|
data-warn="{warn || undefined}"
|
||||||
class:bx--text-input__field-wrapper="{true}"
|
class:bx--text-input__field-wrapper="{true}"
|
||||||
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
|
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
|
||||||
>
|
>
|
||||||
{#if invalid}
|
|
||||||
<WarningFilled class="bx--text-input__invalid-icon" />
|
|
||||||
{/if}
|
|
||||||
{#if !invalid && warn}
|
|
||||||
<WarningAltFilled
|
|
||||||
class="bx--text-input__invalid-icon
|
|
||||||
bx--text-input__invalid-icon--warning"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{#if readonly}
|
{#if readonly}
|
||||||
<EditOff class="bx--text-input__readonly-icon" />
|
<EditOff class="bx--text-input__readonly-icon" />
|
||||||
|
{:else}
|
||||||
|
{#if invalid}
|
||||||
|
<WarningFilled class="bx--text-input__invalid-icon" />
|
||||||
|
{/if}
|
||||||
|
{#if !invalid && warn}
|
||||||
|
<WarningAltFilled
|
||||||
|
class="bx--text-input__invalid-icon
|
||||||
|
bx--text-input__invalid-icon--warning"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<input
|
<input
|
||||||
bind:this="{ref}"
|
bind:this="{ref}"
|
||||||
data-invalid="{invalid || undefined}"
|
data-invalid="{error || undefined}"
|
||||||
aria-invalid="{invalid || undefined}"
|
aria-invalid="{error || undefined}"
|
||||||
data-warn="{warn || undefined}"
|
data-warn="{warn || undefined}"
|
||||||
aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
|
aria-describedby="{error
|
||||||
|
? errorId
|
||||||
|
: warn
|
||||||
|
? warnId
|
||||||
|
: helperText
|
||||||
|
? helperId
|
||||||
|
: undefined}"
|
||||||
disabled="{disabled}"
|
disabled="{disabled}"
|
||||||
id="{id}"
|
id="{id}"
|
||||||
name="{name}"
|
name="{name}"
|
||||||
|
|
@ -192,8 +201,8 @@
|
||||||
readonly="{readonly}"
|
readonly="{readonly}"
|
||||||
class:bx--text-input="{true}"
|
class:bx--text-input="{true}"
|
||||||
class:bx--text-input--light="{light}"
|
class:bx--text-input--light="{light}"
|
||||||
class:bx--text-input--invalid="{invalid}"
|
class:bx--text-input--invalid="{error}"
|
||||||
class:bx--text-input--warn="{warn}"
|
class:bx--text-input--warning="{warn}"
|
||||||
class:bx--text-input--sm="{size === 'sm'}"
|
class:bx--text-input--sm="{size === 'sm'}"
|
||||||
class:bx--text-input--xl="{size === 'xl'}"
|
class:bx--text-input--xl="{size === 'xl'}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
|
|
@ -219,6 +228,7 @@
|
||||||
</div>
|
</div>
|
||||||
{#if !invalid && !warn && !isFluid && !inline && helperText}
|
{#if !invalid && !warn && !isFluid && !inline && helperText}
|
||||||
<div
|
<div
|
||||||
|
id="{helperId}"
|
||||||
class:bx--form__helper-text="{true}"
|
class:bx--form__helper-text="{true}"
|
||||||
class:bx--form__helper-text--disabled="{disabled}"
|
class:bx--form__helper-text--disabled="{disabled}"
|
||||||
class:bx--form__helper-text--inline="{inline}"
|
class:bx--form__helper-text--inline="{inline}"
|
||||||
|
|
|
||||||
|
|
@ -32,11 +32,23 @@
|
||||||
/** Obtain a reference to the top-level element */
|
/** Obtain a reference to the top-level element */
|
||||||
export let ref = null;
|
export let ref = null;
|
||||||
|
|
||||||
import { afterUpdate } from "svelte";
|
import { afterUpdate, onMount } from "svelte";
|
||||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||||
|
|
||||||
let refAbove = null;
|
let refAbove = null;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const resizeObserver = new ResizeObserver(([elem]) => {
|
||||||
|
tileMaxHeight = elem.contentRect.height;
|
||||||
|
});
|
||||||
|
|
||||||
|
resizeObserver.observe(refAbove);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
resizeObserver.disconnect();
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
if (tileMaxHeight === 0) {
|
if (tileMaxHeight === 0) {
|
||||||
tileMaxHeight = refAbove.getBoundingClientRect().height;
|
tileMaxHeight = refAbove.getBoundingClientRect().height;
|
||||||
|
|
@ -62,10 +74,8 @@
|
||||||
class:bx--tile--expandable="{true}"
|
class:bx--tile--expandable="{true}"
|
||||||
class:bx--tile--is-expanded="{expanded}"
|
class:bx--tile--is-expanded="{expanded}"
|
||||||
class:bx--tile--light="{light}"
|
class:bx--tile--light="{light}"
|
||||||
|
style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
style="{expanded
|
|
||||||
? $$restProps.style
|
|
||||||
: `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
|
|
||||||
on:click
|
on:click
|
||||||
on:click="{() => {
|
on:click="{() => {
|
||||||
expanded = !expanded;
|
expanded = !expanded;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
|
/**
|
||||||
|
* @event {string} "select"
|
||||||
|
* @event {string} "deselect"
|
||||||
|
*/
|
||||||
|
|
||||||
/** Set to `true` to select the tile */
|
/** Set to `true` to select the tile */
|
||||||
export let selected = false;
|
export let selected = false;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -254,7 +254,7 @@
|
||||||
on:click|stopPropagation
|
on:click|stopPropagation
|
||||||
on:mousedown|stopPropagation
|
on:mousedown|stopPropagation
|
||||||
class:bx--tooltip__content="{true}"
|
class:bx--tooltip__content="{true}"
|
||||||
tabIndex="-1"
|
tabindex="-1"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* @typedef {string | number} TreeNodeId
|
* @typedef {string | number} TreeNodeId
|
||||||
* @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }} TreeNode
|
* @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }} TreeNode
|
||||||
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
|
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
|
||||||
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
|
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
|
||||||
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
|
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
|
||||||
|
|
@ -188,6 +188,7 @@
|
||||||
</label>
|
</label>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul
|
<ul
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
role="tree"
|
role="tree"
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<li
|
<li
|
||||||
bind:this="{ref}"
|
bind:this="{ref}"
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
/** @type {Array<TreeNode & { children?: TreeNode[] }>} */
|
/** @type {Array<TreeNode & { children?: TreeNode[] }>} */
|
||||||
export let children = [];
|
export let children = [];
|
||||||
export let expanded = false;
|
|
||||||
export let root = false;
|
export let root = false;
|
||||||
|
|
||||||
/** @type {string | number} */
|
/** @type {string | number} */
|
||||||
|
|
@ -73,6 +72,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<li
|
<li
|
||||||
bind:this="{ref}"
|
bind:this="{ref}"
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
|
|
|
||||||
|
|
@ -94,8 +94,10 @@
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
>
|
>
|
||||||
{#if company}
|
{#if company || $$slots.company}
|
||||||
<span class:bx--header__name--prefix="{true}">{company} </span>
|
<span class:bx--header__name--prefix="{true}"
|
||||||
|
><slot name="company">{company} </slot></span
|
||||||
|
>
|
||||||
{/if}
|
{/if}
|
||||||
<slot name="platform">{platformName}</slot>
|
<slot name="platform">{platformName}</slot>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
|
<nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
|
<ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,6 @@
|
||||||
}
|
}
|
||||||
}}"
|
}}"
|
||||||
>
|
>
|
||||||
<span class:bx--text-truncate--end="{true}">{text}</span>
|
<span class:bx--text-truncate--end="{true}"><slot>{text}</slot></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -94,6 +94,7 @@
|
||||||
{text}
|
{text}
|
||||||
<ChevronDown class="bx--header__menu-arrow" />
|
<ChevronDown class="bx--header__menu-arrow" />
|
||||||
</a>
|
</a>
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul
|
<ul
|
||||||
bind:this="{menuRef}"
|
bind:this="{menuRef}"
|
||||||
role="menu"
|
role="menu"
|
||||||
|
|
|
||||||
|
|
@ -134,6 +134,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if active && results.length > 0}
|
{#if active && results.length > 0}
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul aria-labelledby="search-label" role="menu" id="search-menu">
|
<ul aria-labelledby="search-label" role="menu" id="search-menu">
|
||||||
{#each results as result, i}
|
{#each results as result, i}
|
||||||
<li role="none">
|
<li role="none">
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@
|
||||||
<ChevronDown />
|
<ChevronDown />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||||
<ul
|
<ul
|
||||||
role="menu"
|
role="menu"
|
||||||
class:bx--side-nav__menu="{true}"
|
class:bx--side-nav__menu="{true}"
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button>Primary button</Button>
|
<Button data-test-id="btn">Primary button</Button>
|
||||||
|
|
||||||
<Button kind="secondary">Secondary button</Button>
|
<Button kind="secondary">Secondary button</Button>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { Checkbox } from "../types";
|
import { Checkbox } from "../types";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Checkbox labelText="Label text" />
|
<Checkbox labelText="Label text" style="margin: 1rem" />
|
||||||
|
|
||||||
<Checkbox labelText="Label text" checked />
|
<Checkbox labelText="Label text" checked />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { FluidForm, TextInput, PasswordInput } from "../types";
|
import { FluidForm, TextInput, PasswordInput } from "../types";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FluidForm>
|
<FluidForm action="" method="get">
|
||||||
<TextInput labelText="User name" placeholder="Enter user name..." required />
|
<TextInput labelText="User name" placeholder="Enter user name..." required />
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
required
|
required
|
||||||
|
|
|
||||||
|
|
@ -12,4 +12,5 @@
|
||||||
labelText="Upload status"
|
labelText="Upload status"
|
||||||
hideLabel
|
hideLabel
|
||||||
helperText="40 MB of 100 MB"
|
helperText="40 MB of 100 MB"
|
||||||
|
status="finished"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
$: if (treeview) {
|
$: if (treeview) {
|
||||||
treeview.expandAll();
|
treeview.expandAll();
|
||||||
treeview.expandNodes((node) => {
|
treeview.expandNodes((node) => {
|
||||||
return node.id > 0;
|
return +node.id > 0;
|
||||||
});
|
});
|
||||||
treeview.collapseAll();
|
treeview.collapseAll();
|
||||||
treeview.collapseNodes((node) => {
|
treeview.collapseNodes((node) => {
|
||||||
|
|
|
||||||
2
types/Accordion/AccordionItem.svelte.d.ts
vendored
2
types/Accordion/AccordionItem.svelte.d.ts
vendored
|
|
@ -27,6 +27,8 @@ export interface AccordionItemProps
|
||||||
* @default "Expand/Collapse"
|
* @default "Expand/Collapse"
|
||||||
*/
|
*/
|
||||||
iconDescription?: string;
|
iconDescription?: string;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class AccordionItem extends SvelteComponentTyped<
|
export default class AccordionItem extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,8 @@ export interface AccordionSkeletonProps
|
||||||
* @default true
|
* @default true
|
||||||
*/
|
*/
|
||||||
open?: boolean;
|
open?: boolean;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class AccordionSkeleton extends SvelteComponentTyped<
|
export default class AccordionSkeleton extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/AspectRatio/AspectRatio.svelte.d.ts
vendored
2
types/AspectRatio/AspectRatio.svelte.d.ts
vendored
|
|
@ -17,6 +17,8 @@ export interface AspectRatioProps
|
||||||
| "3x2"
|
| "3x2"
|
||||||
| "9x16"
|
| "9x16"
|
||||||
| "1x2";
|
| "1x2";
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class AspectRatio extends SvelteComponentTyped<
|
export default class AspectRatio extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/Breadcrumb/BreadcrumbItem.svelte.d.ts
vendored
2
types/Breadcrumb/BreadcrumbItem.svelte.d.ts
vendored
|
|
@ -14,6 +14,8 @@ export interface BreadcrumbItemProps
|
||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
isCurrentPage?: boolean;
|
isCurrentPage?: boolean;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class BreadcrumbItem extends SvelteComponentTyped<
|
export default class BreadcrumbItem extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,8 @@ export interface BreadcrumbSkeletonProps
|
||||||
* @default 3
|
* @default 3
|
||||||
*/
|
*/
|
||||||
count?: number;
|
count?: number;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class BreadcrumbSkeleton extends SvelteComponentTyped<
|
export default class BreadcrumbSkeleton extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
56
types/Breakpoint/breakpointObserver.d.ts
vendored
56
types/Breakpoint/breakpointObserver.d.ts
vendored
|
|
@ -1,28 +1,28 @@
|
||||||
import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
|
import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
|
||||||
import type { BreakpointSize, BreakpointValue } from "./breakpoints";
|
import type { BreakpointSize, BreakpointValue } from "./breakpoints";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a readable store that returns the current breakpoint size.
|
* Creates a readable store that returns the current breakpoint size.
|
||||||
* It also provides functions for creating derived stores used to do comparisons.
|
* It also provides functions for creating derived stores used to do comparisons.
|
||||||
*/
|
*/
|
||||||
export function breakpointObserver(): {
|
export function breakpointObserver(): {
|
||||||
subscribe: (
|
subscribe: (
|
||||||
this: void,
|
this: void,
|
||||||
run: Subscriber<any>,
|
run: Subscriber<any>,
|
||||||
invalidate?: (value?: any) => void
|
invalidate?: (value?: any) => void
|
||||||
) => Unsubscriber;
|
) => Unsubscriber;
|
||||||
/**
|
/**
|
||||||
* Returns a store readable store that returns whether the current
|
* Returns a store readable store that returns whether the current
|
||||||
* breakpoint is smaller than {@link size}.
|
* breakpoint is smaller than {@link size}.
|
||||||
* @param {BreakpointSize} size Size to compare against.
|
* @param {BreakpointSize} size Size to compare against.
|
||||||
*/
|
*/
|
||||||
smallerThan: (size: BreakpointSize) => Readable<boolean>;
|
smallerThan: (size: BreakpointSize) => Readable<boolean>;
|
||||||
/**
|
/**
|
||||||
* Returns a store readable store that returns whether the current
|
* Returns a store readable store that returns whether the current
|
||||||
* breakpoint is larger than {@link size}.
|
* breakpoint is larger than {@link size}.
|
||||||
* @param {BreakpointSize} size Size to compare against.
|
* @param {BreakpointSize} size Size to compare against.
|
||||||
*/
|
*/
|
||||||
largerThan: (size: BreakpointSize) => Readable<boolean>;
|
largerThan: (size: BreakpointSize) => Readable<boolean>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default breakpointObserver;
|
export default breakpointObserver;
|
||||||
|
|
|
||||||
22
types/Breakpoint/breakpoints.d.ts
vendored
22
types/Breakpoint/breakpoints.d.ts
vendored
|
|
@ -1,11 +1,11 @@
|
||||||
/**
|
/**
|
||||||
* Pixel sizes of Carbon grid breakpoints.
|
* Pixel sizes of Carbon grid breakpoints.
|
||||||
* @type {Record<BreakpointSize, BreakpointValue>}
|
* @type {Record<BreakpointSize, BreakpointValue>}
|
||||||
*/
|
*/
|
||||||
export const breakpoints: Record<BreakpointSize, BreakpointValue>;
|
export const breakpoints: Record<BreakpointSize, BreakpointValue>;
|
||||||
|
|
||||||
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
|
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
|
||||||
|
|
||||||
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
||||||
|
|
||||||
export default breakpoints;
|
export default breakpoints;
|
||||||
|
|
|
||||||
6
types/Breakpoint/index.d.ts
vendored
6
types/Breakpoint/index.d.ts
vendored
|
|
@ -1,3 +1,3 @@
|
||||||
export { default as Breakpoint } from "./Breakpoint.svelte";
|
export { default as Breakpoint } from "./Breakpoint.svelte";
|
||||||
export { breakpointObserver } from "./breakpointObserver";
|
export { breakpointObserver } from "./breakpointObserver";
|
||||||
export { breakpoints } from "./breakpoints";
|
export { breakpoints } from "./breakpoints";
|
||||||
|
|
|
||||||
2
types/Button/Button.svelte.d.ts
vendored
2
types/Button/Button.svelte.d.ts
vendored
|
|
@ -105,6 +105,8 @@ export interface ButtonProps
|
||||||
* @default null
|
* @default null
|
||||||
*/
|
*/
|
||||||
ref?: null | HTMLAnchorElement | HTMLButtonElement;
|
ref?: null | HTMLAnchorElement | HTMLButtonElement;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Button extends SvelteComponentTyped<
|
export default class Button extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/Button/ButtonSet.svelte.d.ts
vendored
2
types/Button/ButtonSet.svelte.d.ts
vendored
|
|
@ -8,6 +8,8 @@ export interface ButtonSetProps
|
||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
stacked?: boolean;
|
stacked?: boolean;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ButtonSet extends SvelteComponentTyped<
|
export default class ButtonSet extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/Button/ButtonSkeleton.svelte.d.ts
vendored
2
types/Button/ButtonSkeleton.svelte.d.ts
vendored
|
|
@ -14,6 +14,8 @@ export interface ButtonSkeletonProps
|
||||||
* @default "default"
|
* @default "default"
|
||||||
*/
|
*/
|
||||||
size?: "default" | "field" | "small" | "lg" | "xl";
|
size?: "default" | "field" | "small" | "lg" | "xl";
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ButtonSkeleton extends SvelteComponentTyped<
|
export default class ButtonSkeleton extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
5
types/Checkbox/Checkbox.svelte.d.ts
vendored
5
types/Checkbox/Checkbox.svelte.d.ts
vendored
|
|
@ -1,7 +1,8 @@
|
||||||
/// <reference types="svelte" />
|
/// <reference types="svelte" />
|
||||||
import type { SvelteComponentTyped } from "svelte";
|
import type { SvelteComponentTyped } from "svelte";
|
||||||
|
|
||||||
export interface CheckboxProps {
|
export interface CheckboxProps
|
||||||
|
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||||
/**
|
/**
|
||||||
* Specify the value of the checkbox
|
* Specify the value of the checkbox
|
||||||
* @default ""
|
* @default ""
|
||||||
|
|
@ -85,6 +86,8 @@ export interface CheckboxProps {
|
||||||
* @default null
|
* @default null
|
||||||
*/
|
*/
|
||||||
ref?: null | HTMLInputElement;
|
ref?: null | HTMLInputElement;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Checkbox extends SvelteComponentTyped<
|
export default class Checkbox extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
4
types/Checkbox/CheckboxSkeleton.svelte.d.ts
vendored
4
types/Checkbox/CheckboxSkeleton.svelte.d.ts
vendored
|
|
@ -2,7 +2,9 @@
|
||||||
import type { SvelteComponentTyped } from "svelte";
|
import type { SvelteComponentTyped } from "svelte";
|
||||||
|
|
||||||
export interface CheckboxSkeletonProps
|
export interface CheckboxSkeletonProps
|
||||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
|
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
|
}
|
||||||
|
|
||||||
export default class CheckboxSkeleton extends SvelteComponentTyped<
|
export default class CheckboxSkeleton extends SvelteComponentTyped<
|
||||||
CheckboxSkeletonProps,
|
CheckboxSkeletonProps,
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,8 @@ export interface CodeSnippetSkeletonProps
|
||||||
* @default "single"
|
* @default "single"
|
||||||
*/
|
*/
|
||||||
type?: "single" | "multi";
|
type?: "single" | "multi";
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class CodeSnippetSkeleton extends SvelteComponentTyped<
|
export default class CodeSnippetSkeleton extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
4
types/ComboBox/ComboBox.svelte.d.ts
vendored
4
types/ComboBox/ComboBox.svelte.d.ts
vendored
|
|
@ -152,6 +152,8 @@ export interface ComboBoxProps
|
||||||
* @default null
|
* @default null
|
||||||
*/
|
*/
|
||||||
listRef?: null | HTMLDivElement;
|
listRef?: null | HTMLDivElement;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ComboBox extends SvelteComponentTyped<
|
export default class ComboBox extends SvelteComponentTyped<
|
||||||
|
|
@ -169,7 +171,7 @@ export default class ComboBox extends SvelteComponentTyped<
|
||||||
clear: WindowEventMap["clear"];
|
clear: WindowEventMap["clear"];
|
||||||
scroll: WindowEventMap["scroll"];
|
scroll: WindowEventMap["scroll"];
|
||||||
},
|
},
|
||||||
{ default: { item: ComboBoxItem; index: number } }
|
{ default: { item: ComboBoxItem; index: number }; titleText: {} }
|
||||||
> {
|
> {
|
||||||
/**
|
/**
|
||||||
* Clear the combo box programmatically
|
* Clear the combo box programmatically
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,8 @@ export interface ComposedModalProps
|
||||||
* @default null
|
* @default null
|
||||||
*/
|
*/
|
||||||
ref?: null | HTMLDivElement;
|
ref?: null | HTMLDivElement;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ComposedModal extends SvelteComponentTyped<
|
export default class ComposedModal extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/ComposedModal/ModalBody.svelte.d.ts
vendored
2
types/ComposedModal/ModalBody.svelte.d.ts
vendored
|
|
@ -14,6 +14,8 @@ export interface ModalBodyProps
|
||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
hasScrollingContent?: boolean;
|
hasScrollingContent?: boolean;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ModalBody extends SvelteComponentTyped<
|
export default class ModalBody extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/ComposedModal/ModalFooter.svelte.d.ts
vendored
2
types/ComposedModal/ModalFooter.svelte.d.ts
vendored
|
|
@ -51,6 +51,8 @@ export interface ModalFooterProps
|
||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
danger?: boolean;
|
danger?: boolean;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ModalFooter extends SvelteComponentTyped<
|
export default class ModalFooter extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/ComposedModal/ModalHeader.svelte.d.ts
vendored
2
types/ComposedModal/ModalHeader.svelte.d.ts
vendored
|
|
@ -44,6 +44,8 @@ export interface ModalHeaderProps
|
||||||
* @default "Close"
|
* @default "Close"
|
||||||
*/
|
*/
|
||||||
iconDescription?: string;
|
iconDescription?: string;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ModalHeader extends SvelteComponentTyped<
|
export default class ModalHeader extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,8 @@ export interface ContentSwitcherProps
|
||||||
* @default undefined
|
* @default undefined
|
||||||
*/
|
*/
|
||||||
size?: "sm" | "xl";
|
size?: "sm" | "xl";
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ContentSwitcher extends SvelteComponentTyped<
|
export default class ContentSwitcher extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/ContentSwitcher/Switch.svelte.d.ts
vendored
2
types/ContentSwitcher/Switch.svelte.d.ts
vendored
|
|
@ -33,6 +33,8 @@ export interface SwitchProps
|
||||||
* @default null
|
* @default null
|
||||||
*/
|
*/
|
||||||
ref?: null | HTMLButtonElement;
|
ref?: null | HTMLButtonElement;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Switch extends SvelteComponentTyped<
|
export default class Switch extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
2
types/ContextMenu/ContextMenu.svelte.d.ts
vendored
2
types/ContextMenu/ContextMenu.svelte.d.ts
vendored
|
|
@ -34,6 +34,8 @@ export interface ContextMenuProps
|
||||||
* @default null
|
* @default null
|
||||||
*/
|
*/
|
||||||
ref?: null | HTMLUListElement;
|
ref?: null | HTMLUListElement;
|
||||||
|
|
||||||
|
[key: `data-${string}`]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ContextMenu extends SvelteComponentTyped<
|
export default class ContextMenu extends SvelteComponentTyped<
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue