v0.33.0

CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.33.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.33.0) - 2021-04-30
+
+**Features**
+
+- support nested object values for DataTable sorting
+- pass DataTable header display function to slotted cell
+- add icon prop to `Link` to support rendering links with icons; refactor `OutboundLink` to use `Link.icon` prop
+
+**Fixes**
+
+- prevent DataTable sorting from crashing by defaulting `undefined` to an empty string
+- add extra DataTable cell `colspan` to support expandable, selectable rows
+- support disabled state for `ClickableTile`
+- add missing "3x2" ratio to `AspectRatio`
+
+**Documentation**
+
+- add DataTable example ["Sortable with nested object values"](https://carbon-svelte.vercel.app/components/DataTable#sortable-with-nested-object-values)
+- add ClickableTile example ["Disabled state"](https://carbon-svelte.vercel.app/components/ClickableTile#disabled-state)
+- add Link example ["Link with icon"](https://carbon-svelte.vercel.app/components/Link#link-with-icon)
+
+**Housekeeping**
+
+- upgrade `carbon-components` to version 10.33.0
+
 ## [0.32.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.2) - 2021-04-23
 
 **Fixes**

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 167 components exported from carbon-components-svelte@0.32.2.
+> 167 components exported from carbon-components-svelte@0.33.0.
 
 ## Components
 
@@ -924,6 +924,7 @@ export type DataTableRowId = string;
 export interface DataTableCell {
   key: DataTableKey;
   value: DataTableValue;
+  display?: (item: Value) => DataTableValue;
 }
 ```
 
@@ -949,12 +950,12 @@ export interface DataTableCell {
 
 ### Slots
 
-| Slot name    | Default | Props                                                     | Fallback                                                                                    |
-| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
-| --           | Yes     | --                                                        | --                                                                                          |
-| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{headers[j].display<br /> ? headers[j].display(cell.value)<br /> : cell.value}</code> |
-| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>        | <code>{header.value}</code>                                                                 |
-| expanded-row | No      | <code>{ row: DataTableRow; } </code>                      | --                                                                                          |
+| Slot name    | Default | Props                                                     | Fallback                                                            |
+| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ |
+| --           | Yes     | --                                                        | --                                                                  |
+| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> |
+| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>        | <code>{header.value}</code>                                         |
+| expanded-row | No      | <code>{ row: DataTableRow; } </code>                      | --                                                                  |
 
 ### Events
 

docs/src/COMPONENT_API.json

@@ -2062,7 +2062,7 @@
         {
           "name": "cell",
           "default": false,
-          "fallback": "{headers[j].display\n                    ? headers[j].display(cell.value)\n                    : cell.value}",
+          "fallback": "{cell.display ? cell.display(cell.value) : cell.value}",
           "slot_props": "{ row: DataTableRow; cell: DataTableCell; }"
         },
         {
@@ -2152,9 +2152,9 @@
           "ts": "type DataTableRowId = string"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; }",
+          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }",
           "name": "DataTableCell",
-          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; }"
+          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "div" }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.32.2",
+  "version": "0.33.0",
   "license": "Apache-2.0",
   "author": "IBM",
   "description": "Svelte implementation of the Carbon Design System",

preprocess/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.32.2",
+  "version": "0.33.0",
   "components": {
     "Accordion": {
       "path": "carbon-components-svelte/src/Accordion/Accordion.svelte"

src/DataTable/DataTable.svelte

@@ -410,7 +410,9 @@
               parentRowId = null;
             }}"
           >
-            <TableCell colspan="{selectable ? headers.length + 2 : headers.length + 1}">
+            <TableCell
+              colspan="{selectable ? headers.length + 2 : headers.length + 1}"
+            >
               <div class:bx--child-row-inner-container="{true}">
                 <slot name="expanded-row" row="{row}" />
               </div>