mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Merge branch 'master' into add-datatablecell-display
This commit is contained in:
Rafael Dessotti
commit
594b571c04
11 changed files with 126 additions and 30 deletions
12
CHANGELOG.md
12
CHANGELOG.md
|
|
@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
<!-- ## Unreleased -->
|
||||
|
||||
## [0.32.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.2) - 2021-04-23
|
||||
|
||||
**Fixes**
|
||||
|
||||
- prevent multiple Dropdown items from being selected by updating the `selectedId`
|
||||
- prevent the default keydown behavior so that pressing "Enter" should open the Dropdown menu
|
||||
- resolve Carbon icon imports to Svelte files in `DataTable`, `HamburgerMenu` components
|
||||
|
||||
**Housekeeping**
|
||||
|
||||
- patch `carbon-components` to version 10.32.1
|
||||
|
||||
## [0.32.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.1) - 2021-04-02
|
||||
|
||||
**Fixes**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 167 components exported from carbon-components-svelte@0.32.1.
|
||||
> 167 components exported from carbon-components-svelte@0.32.2.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"devDependencies": {
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"carbon-components": "10.32.0",
|
||||
"carbon-components": "10.32.1",
|
||||
"carbon-components-svelte": "../",
|
||||
"mdsvex": "^0.8.8",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
|
|
|||
|
|
@ -77,16 +77,4 @@
|
|||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
|
||||
.bx--list-box:not(.bx--list-box--light) input[role="combobox"],
|
||||
.bx--list-box:not(.bx--list-box--light) input[type="text"],
|
||||
.bx--dropdown:not(.bx--dropdown--light),
|
||||
.bx--list-box:not(.bx--list-box--light),
|
||||
.bx--number:not(.bx--number--light) input[type="number"],
|
||||
.bx--number:not(.bx--number--light) .bx--number__control-btn::before,
|
||||
.bx--number:not(.bx--number--light) .bx--number__control-btn::after,
|
||||
.bx--text-input:not(.bx--text-input--light),
|
||||
.bx--select-input {
|
||||
background-color: $field-01;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -676,6 +676,85 @@ In the example below, the "Protocol" column is not sortable.
|
|||
]}"
|
||||
/>
|
||||
|
||||
### Sortable with nested object values
|
||||
|
||||
<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "network.protocol", value: "Protocol" },
|
||||
{ key: "network.port", value: "Port" },
|
||||
{ key: "cost", value: "Cost", display: (cost) => cost + " €" },
|
||||
{
|
||||
key: "expireDate",
|
||||
value: "Expire date",
|
||||
display: (date) => new Date(date).toLocaleString(),
|
||||
sort: (a, b) => new Date(a) - new Date(b),
|
||||
},
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
network: {
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
},
|
||||
cost: 100,
|
||||
expireDate: "2020-10-21",
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
network: {
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
},
|
||||
cost: 200,
|
||||
expireDate: "2020-09-10",
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
network: {
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
},
|
||||
cost: 150,
|
||||
expireDate: "2020-11-24",
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
network: {
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
},
|
||||
cost: 250,
|
||||
expireDate: "2020-12-01",
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
network: {
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
},
|
||||
cost: 550,
|
||||
expireDate: "2021-03-21",
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
network: {
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
},
|
||||
cost: 400,
|
||||
expireDate: "2020-11-14",
|
||||
},
|
||||
]}"
|
||||
/>
|
||||
|
||||
### Empty column with overflow menu
|
||||
|
||||
Some use cases require an empty column in the table body without a corresponding table header.
|
||||
|
|
|
|||
|
|
@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
|
|||
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
|
||||
|
||||
carbon-components-svelte@../:
|
||||
version "0.31.1"
|
||||
version "0.32.1"
|
||||
dependencies:
|
||||
carbon-icons-svelte "^10.27.0"
|
||||
clipboard-copy "3.2.0"
|
||||
flatpickr "4.6.9"
|
||||
|
||||
carbon-components@10.32.0:
|
||||
version "10.32.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
|
||||
integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
|
||||
carbon-components@10.32.1:
|
||||
version "10.32.1"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
|
||||
integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
|
||||
dependencies:
|
||||
"@carbon/telemetry" "0.0.0-alpha.6"
|
||||
flatpickr "4.6.1"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "carbon-components-svelte",
|
||||
"version": "0.32.1",
|
||||
"version": "0.32.2",
|
||||
"license": "Apache-2.0",
|
||||
"author": "IBM",
|
||||
"description": "Svelte implementation of the Carbon Design System",
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
"@rollup/plugin-node-resolve": "^11.1.1",
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"carbon-components": "10.32.0",
|
||||
"carbon-components": "10.32.1",
|
||||
"gh-pages": "^3.1.0",
|
||||
"husky": "^4.3.8",
|
||||
"lint-staged": "^10.5.3",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "0.32.1",
|
||||
"version": "0.32.2",
|
||||
"components": {
|
||||
"Accordion": {
|
||||
"path": "carbon-components-svelte/src/Accordion/Accordion.svelte"
|
||||
|
|
|
|||
|
|
@ -124,6 +124,14 @@
|
|||
.map(({ key }, i) => ({ key, id: $headerItems[i] }))
|
||||
.reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
|
||||
);
|
||||
const resolvePath = (object, path, defaultValue) =>
|
||||
path
|
||||
.split(/[\.\[\]\'\"]/)
|
||||
.filter((p) => p)
|
||||
.reduce(
|
||||
(o, p) => (o && typeof o === "object" && o[p] ? o[p] : defaultValue),
|
||||
object
|
||||
);
|
||||
|
||||
setContext("DataTable", {
|
||||
sortHeader,
|
||||
|
|
@ -161,7 +169,7 @@
|
|||
...row,
|
||||
cells: headerKeys.map((key, index) => ({
|
||||
key,
|
||||
value: row[key],
|
||||
value: resolvePath(row, key, ""),
|
||||
display: headers[index].display,
|
||||
})),
|
||||
}));
|
||||
|
|
@ -174,8 +182,12 @@
|
|||
sortedRows = rows;
|
||||
} else {
|
||||
sortedRows = [...rows].sort((a, b) => {
|
||||
const itemA = ascending ? a[sortKey] : b[sortKey];
|
||||
const itemB = ascending ? b[sortKey] : a[sortKey];
|
||||
const itemA = ascending
|
||||
? resolvePath(a, sortKey, "")
|
||||
: resolvePath(b, sortKey, "");
|
||||
const itemB = ascending
|
||||
? resolvePath(b, sortKey, "")
|
||||
: resolvePath(a, sortKey, "");
|
||||
|
||||
if ($sortHeader.sort) return $sortHeader.sort(itemA, itemB);
|
||||
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@
|
|||
}
|
||||
$: inline = type === "inline";
|
||||
$: selectedItem = items[selectedIndex];
|
||||
$: selectedId = items[selectedIndex] ? items[selectedIndex].id : undefined;
|
||||
$: if (!open) {
|
||||
highlightedIndex = -1;
|
||||
}
|
||||
|
|
@ -203,7 +204,11 @@
|
|||
tabindex="0"
|
||||
role="button"
|
||||
aria-expanded="{open}"
|
||||
on:keydown="{({ key }) => {
|
||||
on:keydown="{(e) => {
|
||||
const { key } = e;
|
||||
if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if (key === 'Enter') {
|
||||
open = !open;
|
||||
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
|
||||
|
|
|
|||
|
|
@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
|
|||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
|
||||
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
|
||||
|
||||
carbon-components@10.32.0:
|
||||
version "10.32.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
|
||||
integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
|
||||
carbon-components@10.32.1:
|
||||
version "10.32.1"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
|
||||
integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
|
||||
dependencies:
|
||||
"@carbon/telemetry" "0.0.0-alpha.6"
|
||||
flatpickr "4.6.1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue