mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(data-table): add toolbar, toolbar search
This commit is contained in:
Eric Liu
parent
8a65e463a1
commit
611d72bcf3
10 changed files with 640 additions and 154 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
# Component Index
|
# Component Index
|
||||||
|
|
||||||
> 148 components exported from carbon-components-svelte 0.19.0
|
> 150 components exported from carbon-components-svelte 0.19.0
|
||||||
|
|
||||||
- Accordion
|
- Accordion
|
||||||
- [Accordion](#accordion)
|
- [Accordion](#accordion)
|
||||||
|
|
@ -41,6 +41,8 @@
|
||||||
- [TableHead](#tablehead)
|
- [TableHead](#tablehead)
|
||||||
- [TableHeader](#tableheader)
|
- [TableHeader](#tableheader)
|
||||||
- [TableRow](#tablerow)
|
- [TableRow](#tablerow)
|
||||||
|
- [Toolbar](#toolbar)
|
||||||
|
- [ToolbarSearch](#toolbarsearch)
|
||||||
- [DataTableSkeleton](#datatableskeleton)
|
- [DataTableSkeleton](#datatableskeleton)
|
||||||
- DatePicker
|
- DatePicker
|
||||||
- [DatePicker](#datepicker)
|
- [DatePicker](#datepicker)
|
||||||
|
|
@ -996,9 +998,7 @@ import { DataTable } from "carbon-components-svelte";
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
- `<slot name="cell-header">...</slot>`
|
- `<slot>...</slot>`
|
||||||
- `<slot name="cell">...</slot>`
|
|
||||||
- `<slot name="expanded-row">...</slot>`
|
|
||||||
|
|
||||||
### Forwarded events
|
### Forwarded events
|
||||||
|
|
||||||
|
|
@ -3533,6 +3533,8 @@ No slots.
|
||||||
- `on:mouseleave`
|
- `on:mouseleave`
|
||||||
- `on:change`
|
- `on:change`
|
||||||
- `on:input`
|
- `on:input`
|
||||||
|
- `on:focus`
|
||||||
|
- `on:blur`
|
||||||
|
|
||||||
### Dispatched events
|
### Dispatched events
|
||||||
|
|
||||||
|
|
@ -5220,6 +5222,69 @@ No dispatched events.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Toolbar
|
||||||
|
|
||||||
|
### Import path
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Toolbar } from "carbon-components-svelte";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Prop name | Type | Default value | Description |
|
||||||
|
| :-------- | :--------------------------------- | :------------ | :------------------------ |
|
||||||
|
| size | <code>"sm" | "default"</code> | `"default"` | Specify the toolbar size. |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
- `<slot>...</slot>`
|
||||||
|
|
||||||
|
### Forwarded events
|
||||||
|
|
||||||
|
No forwarded events.
|
||||||
|
|
||||||
|
### Dispatched events
|
||||||
|
|
||||||
|
No dispatched events.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ToolbarSearch
|
||||||
|
|
||||||
|
### Import path
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ToolbarSearch } from "carbon-components-svelte";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Prop name | Type | Default value | Description |
|
||||||
|
| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
|
||||||
|
| value | <code>string</code> | `""` | Specify the value of the search input. |
|
||||||
|
| expanded | <code>boolean</code> | `false` | Set to `true` to expand the search bar. |
|
||||||
|
| persistent | <code>boolean</code> | `false` | Set to `true` to keep the search bar expanded. |
|
||||||
|
| tabindex | <code>string</code> | `"0"` | Specify the tabindex. |
|
||||||
|
| ref | <code>null | HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
No slots.
|
||||||
|
|
||||||
|
### Forwarded events
|
||||||
|
|
||||||
|
- `on:change`
|
||||||
|
- `on:input`
|
||||||
|
- `on:focus`
|
||||||
|
- `on:blur`
|
||||||
|
|
||||||
|
### Dispatched events
|
||||||
|
|
||||||
|
No dispatched events.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Tooltip
|
## Tooltip
|
||||||
|
|
||||||
### Import path
|
### Import path
|
||||||
|
|
|
||||||
|
|
@ -2607,19 +2607,28 @@
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"slots": [
|
"slots": [
|
||||||
|
[
|
||||||
|
"default",
|
||||||
|
{
|
||||||
|
"attributes": [],
|
||||||
|
"children": [],
|
||||||
|
"default": true,
|
||||||
|
"default_value": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
[
|
[
|
||||||
"cell-header",
|
"cell-header",
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 5608,
|
"start": 5619,
|
||||||
"end": 5626,
|
"end": 5637,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 5614,
|
"start": 5625,
|
||||||
"end": 5625,
|
"end": 5636,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "cell-header",
|
"raw": "cell-header",
|
||||||
"data": "cell-header"
|
"data": "cell-header"
|
||||||
|
|
@ -2627,26 +2636,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 5627,
|
"start": 5638,
|
||||||
"end": 5644,
|
"end": 5655,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "header",
|
"name": "header",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 5635,
|
"start": 5646,
|
||||||
"end": 5643,
|
"end": 5654,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5636,
|
"start": 5647,
|
||||||
"end": 5642,
|
"end": 5653,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 46
|
"column": 46
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 52
|
"column": 52
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2658,34 +2667,34 @@
|
||||||
],
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"start": 5645,
|
"start": 5656,
|
||||||
"end": 5659,
|
"end": 5670,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 5646,
|
"start": 5657,
|
||||||
"end": 5658,
|
"end": 5669,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 56
|
"column": 56
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5646,
|
"start": 5657,
|
||||||
"end": 5652,
|
"end": 5663,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 56
|
"column": 56
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 62
|
"column": 62
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2693,15 +2702,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5653,
|
"start": 5664,
|
||||||
"end": 5658,
|
"end": 5669,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 63
|
"column": 63
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 198,
|
"line": 199,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2721,14 +2730,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 7363,
|
"start": 7374,
|
||||||
"end": 7374,
|
"end": 7385,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7369,
|
"start": 7380,
|
||||||
"end": 7373,
|
"end": 7384,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "cell",
|
"raw": "cell",
|
||||||
"data": "cell"
|
"data": "cell"
|
||||||
|
|
@ -2736,26 +2745,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7375,
|
"start": 7386,
|
||||||
"end": 7386,
|
"end": 7397,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "row",
|
"name": "row",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7380,
|
"start": 7391,
|
||||||
"end": 7385,
|
"end": 7396,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7381,
|
"start": 7392,
|
||||||
"end": 7384,
|
"end": 7395,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 244,
|
"line": 245,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 244,
|
"line": 245,
|
||||||
"column": 41
|
"column": 41
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2765,26 +2774,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7387,
|
"start": 7398,
|
||||||
"end": 7400,
|
"end": 7411,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "cell",
|
"name": "cell",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7393,
|
"start": 7404,
|
||||||
"end": 7399,
|
"end": 7410,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7394,
|
"start": 7405,
|
||||||
"end": 7398,
|
"end": 7409,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 244,
|
"line": 245,
|
||||||
"column": 51
|
"column": 51
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 244,
|
"line": 245,
|
||||||
"column": 55
|
"column": 55
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2796,69 +2805,69 @@
|
||||||
],
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"start": 7401,
|
"start": 7412,
|
||||||
"end": 7418,
|
"end": 7429,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "\n ",
|
"raw": "\n ",
|
||||||
"data": "\n "
|
"data": "\n "
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7418,
|
"start": 7429,
|
||||||
"end": 7484,
|
"end": 7495,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "ConditionalExpression",
|
"type": "ConditionalExpression",
|
||||||
"start": 7419,
|
"start": 7430,
|
||||||
"end": 7483,
|
"end": 7494,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 81
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7419,
|
"start": 7430,
|
||||||
"end": 7437,
|
"end": 7448,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 35
|
"column": 35
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7419,
|
"start": 7430,
|
||||||
"end": 7429,
|
"end": 7440,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 27
|
"column": 27
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7419,
|
"start": 7430,
|
||||||
"end": 7426,
|
"end": 7437,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 24
|
"column": 24
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2866,15 +2875,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7427,
|
"start": 7438,
|
||||||
"end": 7428,
|
"end": 7439,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 25
|
"column": 25
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 26
|
"column": 26
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2885,15 +2894,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7430,
|
"start": 7441,
|
||||||
"end": 7437,
|
"end": 7448,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 28
|
"column": 28
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 35
|
"column": 35
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2904,57 +2913,57 @@
|
||||||
},
|
},
|
||||||
"consequent": {
|
"consequent": {
|
||||||
"type": "CallExpression",
|
"type": "CallExpression",
|
||||||
"start": 7440,
|
"start": 7451,
|
||||||
"end": 7470,
|
"end": 7481,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"callee": {
|
"callee": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7440,
|
"start": 7451,
|
||||||
"end": 7458,
|
"end": 7469,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 56
|
"column": 56
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7440,
|
"start": 7451,
|
||||||
"end": 7450,
|
"end": 7461,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 48
|
"column": 48
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7440,
|
"start": 7451,
|
||||||
"end": 7447,
|
"end": 7458,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 45
|
"column": 45
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2962,15 +2971,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7448,
|
"start": 7459,
|
||||||
"end": 7449,
|
"end": 7460,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 46
|
"column": 46
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 47
|
"column": 47
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2981,15 +2990,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7451,
|
"start": 7462,
|
||||||
"end": 7458,
|
"end": 7469,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 49
|
"column": 49
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 56
|
"column": 56
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3001,29 +3010,29 @@
|
||||||
"arguments": [
|
"arguments": [
|
||||||
{
|
{
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7459,
|
"start": 7470,
|
||||||
"end": 7469,
|
"end": 7480,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 57
|
"column": 57
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 67
|
"column": 67
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7459,
|
"start": 7470,
|
||||||
"end": 7463,
|
"end": 7474,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 57
|
"column": 57
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 61
|
"column": 61
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3031,15 +3040,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7464,
|
"start": 7475,
|
||||||
"end": 7469,
|
"end": 7480,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 62
|
"column": 62
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 67
|
"column": 67
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3053,29 +3062,29 @@
|
||||||
},
|
},
|
||||||
"alternate": {
|
"alternate": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7473,
|
"start": 7484,
|
||||||
"end": 7483,
|
"end": 7494,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 71
|
"column": 71
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 81
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7473,
|
"start": 7484,
|
||||||
"end": 7477,
|
"end": 7488,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 71
|
"column": 71
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 75
|
"column": 75
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3083,15 +3092,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7478,
|
"start": 7489,
|
||||||
"end": 7483,
|
"end": 7494,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 76
|
"column": 76
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 246,
|
||||||
"column": 81
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3103,8 +3112,8 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7484,
|
"start": 7495,
|
||||||
"end": 7499,
|
"end": 7510,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "\n ",
|
"raw": "\n ",
|
||||||
"data": "\n "
|
"data": "\n "
|
||||||
|
|
@ -3119,14 +3128,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 8035,
|
"start": 8046,
|
||||||
"end": 8054,
|
"end": 8065,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 8041,
|
"start": 8052,
|
||||||
"end": 8053,
|
"end": 8064,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "expanded-row",
|
"raw": "expanded-row",
|
||||||
"data": "expanded-row"
|
"data": "expanded-row"
|
||||||
|
|
@ -3134,26 +3143,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 8055,
|
"start": 8066,
|
||||||
"end": 8066,
|
"end": 8077,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "row",
|
"name": "row",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 8060,
|
"start": 8071,
|
||||||
"end": 8065,
|
"end": 8076,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 8061,
|
"start": 8072,
|
||||||
"end": 8064,
|
"end": 8075,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 264,
|
"line": 265,
|
||||||
"column": 48
|
"column": 48
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 264,
|
"line": 265,
|
||||||
"column": 51
|
"column": 51
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -10853,8 +10862,8 @@
|
||||||
[
|
[
|
||||||
"click",
|
"click",
|
||||||
{
|
{
|
||||||
"start": 3375,
|
"start": 3445,
|
||||||
"end": 3383,
|
"end": 3453,
|
||||||
"type": "EventHandler",
|
"type": "EventHandler",
|
||||||
"name": "click",
|
"name": "click",
|
||||||
"modifiers": [],
|
"modifiers": [],
|
||||||
|
|
@ -10864,8 +10873,8 @@
|
||||||
[
|
[
|
||||||
"mouseover",
|
"mouseover",
|
||||||
{
|
{
|
||||||
"start": 2281,
|
"start": 2277,
|
||||||
"end": 2293,
|
"end": 2289,
|
||||||
"type": "EventHandler",
|
"type": "EventHandler",
|
||||||
"name": "mouseover",
|
"name": "mouseover",
|
||||||
"modifiers": [],
|
"modifiers": [],
|
||||||
|
|
@ -10875,8 +10884,8 @@
|
||||||
[
|
[
|
||||||
"mouseenter",
|
"mouseenter",
|
||||||
{
|
{
|
||||||
"start": 2298,
|
"start": 2294,
|
||||||
"end": 2311,
|
"end": 2307,
|
||||||
"type": "EventHandler",
|
"type": "EventHandler",
|
||||||
"name": "mouseenter",
|
"name": "mouseenter",
|
||||||
"modifiers": [],
|
"modifiers": [],
|
||||||
|
|
@ -10886,8 +10895,8 @@
|
||||||
[
|
[
|
||||||
"mouseleave",
|
"mouseleave",
|
||||||
{
|
{
|
||||||
"start": 2316,
|
"start": 2312,
|
||||||
"end": 2329,
|
"end": 2325,
|
||||||
"type": "EventHandler",
|
"type": "EventHandler",
|
||||||
"name": "mouseleave",
|
"name": "mouseleave",
|
||||||
"modifiers": [],
|
"modifiers": [],
|
||||||
|
|
@ -10897,8 +10906,8 @@
|
||||||
[
|
[
|
||||||
"change",
|
"change",
|
||||||
{
|
{
|
||||||
"start": 3068,
|
"start": 3109,
|
||||||
"end": 3077,
|
"end": 3118,
|
||||||
"type": "EventHandler",
|
"type": "EventHandler",
|
||||||
"name": "change",
|
"name": "change",
|
||||||
"modifiers": [],
|
"modifiers": [],
|
||||||
|
|
@ -10908,13 +10917,35 @@
|
||||||
[
|
[
|
||||||
"input",
|
"input",
|
||||||
{
|
{
|
||||||
"start": 3084,
|
"start": 3125,
|
||||||
"end": 3092,
|
"end": 3133,
|
||||||
"type": "EventHandler",
|
"type": "EventHandler",
|
||||||
"name": "input",
|
"name": "input",
|
||||||
"modifiers": [],
|
"modifiers": [],
|
||||||
"expression": null
|
"expression": null
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"focus",
|
||||||
|
{
|
||||||
|
"start": 3215,
|
||||||
|
"end": 3223,
|
||||||
|
"type": "EventHandler",
|
||||||
|
"name": "focus",
|
||||||
|
"modifiers": [],
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"blur",
|
||||||
|
{
|
||||||
|
"start": 3230,
|
||||||
|
"end": 3237,
|
||||||
|
"type": "EventHandler",
|
||||||
|
"name": "blur",
|
||||||
|
"modifiers": [],
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"dispatched_events": []
|
"dispatched_events": []
|
||||||
|
|
@ -15446,6 +15477,131 @@
|
||||||
],
|
],
|
||||||
"dispatched_events": []
|
"dispatched_events": []
|
||||||
},
|
},
|
||||||
|
"Toolbar": {
|
||||||
|
"moduleName": "Toolbar",
|
||||||
|
"props": [
|
||||||
|
[
|
||||||
|
"size",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "\"default\"",
|
||||||
|
"type": "\"sm\" | \"default\"",
|
||||||
|
"description": "Specify the toolbar size"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"slots": [
|
||||||
|
[
|
||||||
|
"default",
|
||||||
|
{
|
||||||
|
"attributes": [],
|
||||||
|
"children": [],
|
||||||
|
"default": true,
|
||||||
|
"default_value": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"forwarded_events": [],
|
||||||
|
"dispatched_events": []
|
||||||
|
},
|
||||||
|
"ToolbarSearch": {
|
||||||
|
"moduleName": "ToolbarSearch",
|
||||||
|
"props": [
|
||||||
|
[
|
||||||
|
"value",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "\"\"",
|
||||||
|
"type": "string",
|
||||||
|
"description": "Specify the value of the search input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"expanded",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "false",
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "Set to `true` to expand the search bar"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"persistent",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "false",
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "Set to `true` to keep the search bar expanded"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"tabindex",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "\"0\"",
|
||||||
|
"type": "string",
|
||||||
|
"description": "Specify the tabindex"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"ref",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "null",
|
||||||
|
"type": "null | HTMLInputElement",
|
||||||
|
"description": "Obtain a reference to the input HTML element"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"slots": [],
|
||||||
|
"forwarded_events": [
|
||||||
|
[
|
||||||
|
"change",
|
||||||
|
{
|
||||||
|
"start": 1316,
|
||||||
|
"end": 1325,
|
||||||
|
"type": "EventHandler",
|
||||||
|
"name": "change",
|
||||||
|
"modifiers": [],
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"input",
|
||||||
|
{
|
||||||
|
"start": 1330,
|
||||||
|
"end": 1338,
|
||||||
|
"type": "EventHandler",
|
||||||
|
"name": "input",
|
||||||
|
"modifiers": [],
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"focus",
|
||||||
|
{
|
||||||
|
"start": 1343,
|
||||||
|
"end": 1351,
|
||||||
|
"type": "EventHandler",
|
||||||
|
"name": "focus",
|
||||||
|
"modifiers": [],
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"blur",
|
||||||
|
{
|
||||||
|
"start": 1356,
|
||||||
|
"end": 1363,
|
||||||
|
"type": "EventHandler",
|
||||||
|
"name": "blur",
|
||||||
|
"modifiers": [],
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"dispatched_events": []
|
||||||
|
},
|
||||||
"Tooltip": {
|
"Tooltip": {
|
||||||
"moduleName": "Tooltip",
|
"moduleName": "Tooltip",
|
||||||
"props": [
|
"props": [
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
|
---
|
||||||
|
components: ["DataTable", "Toolbar", "ToolbarSearch"]
|
||||||
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { DataTable, DataTableSkeleton, Link } from "carbon-components-svelte";
|
import { DataTable, DataTableSkeleton, Toolbar, ToolbarSearch, Button, Link } from "carbon-components-svelte";
|
||||||
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -188,6 +192,126 @@ The slot name for the table header cells is `"cell-header"`.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
### With toolbar
|
||||||
|
|
||||||
|
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
||||||
|
headers="{[
|
||||||
|
{ key: "name", value: "Name" },
|
||||||
|
{ key: "protocol", value: "Protocol" },
|
||||||
|
{ key: "port", value: "Port" },
|
||||||
|
{ key: "rule", value: "Rule" }
|
||||||
|
]}"
|
||||||
|
rows="{[
|
||||||
|
{
|
||||||
|
id: "a",
|
||||||
|
name: "Load Balancer 3",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 3000,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "b",
|
||||||
|
name: "Load Balancer 1",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 443,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "c",
|
||||||
|
name: "Load Balancer 2",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 80,
|
||||||
|
rule: "DNS delegation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "d",
|
||||||
|
name: "Load Balancer 6",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 3000,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "e",
|
||||||
|
name: "Load Balancer 4",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 443,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "f",
|
||||||
|
name: "Load Balancer 5",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 80,
|
||||||
|
rule: "DNS delegation"
|
||||||
|
},
|
||||||
|
]}"
|
||||||
|
>
|
||||||
|
<Toolbar>
|
||||||
|
<ToolbarSearch />
|
||||||
|
<Button>Create</Button>
|
||||||
|
</Toolbar>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
### With toolbar (small size)
|
||||||
|
|
||||||
|
<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
|
||||||
|
headers="{[
|
||||||
|
{ key: "name", value: "Name" },
|
||||||
|
{ key: "protocol", value: "Protocol" },
|
||||||
|
{ key: "port", value: "Port" },
|
||||||
|
{ key: "rule", value: "Rule" }
|
||||||
|
]}"
|
||||||
|
rows="{[
|
||||||
|
{
|
||||||
|
id: "a",
|
||||||
|
name: "Load Balancer 3",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 3000,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "b",
|
||||||
|
name: "Load Balancer 1",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 443,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "c",
|
||||||
|
name: "Load Balancer 2",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 80,
|
||||||
|
rule: "DNS delegation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "d",
|
||||||
|
name: "Load Balancer 6",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 3000,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "e",
|
||||||
|
name: "Load Balancer 4",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 443,
|
||||||
|
rule: "Round robin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "f",
|
||||||
|
name: "Load Balancer 5",
|
||||||
|
protocol: "HTTP",
|
||||||
|
port: 80,
|
||||||
|
rule: "DNS delegation"
|
||||||
|
},
|
||||||
|
]}"
|
||||||
|
>
|
||||||
|
<Toolbar size="sm">
|
||||||
|
<ToolbarSearch />
|
||||||
|
<Button size="small">Create</Button>
|
||||||
|
</Toolbar>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
### Zebra stripes
|
### Zebra stripes
|
||||||
|
|
||||||
<DataTable zebra
|
<DataTable zebra
|
||||||
|
|
|
||||||
|
|
@ -149,6 +149,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<TableContainer title="{title}" description="{description}" {...$$restProps}>
|
<TableContainer title="{title}" description="{description}" {...$$restProps}>
|
||||||
|
<slot />
|
||||||
<Table
|
<Table
|
||||||
zebra="{zebra}"
|
zebra="{zebra}"
|
||||||
size="{size}"
|
size="{size}"
|
||||||
|
|
|
||||||
19
src/DataTable/Toolbar.svelte
Normal file
19
src/DataTable/Toolbar.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Specify the toolbar size
|
||||||
|
* @type {"sm" | "default"} [size="default"]
|
||||||
|
*/
|
||||||
|
export let size = "default";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section
|
||||||
|
aria-label="data table toolbar"
|
||||||
|
class:bx--table-toolbar="{true}"
|
||||||
|
class:bx--table-toolbar--small="{size === 'sm'}"
|
||||||
|
class:bx--table-toolbar--normal="{size === 'default'}"
|
||||||
|
{...$$restProps}
|
||||||
|
>
|
||||||
|
<div class:bx--toolbar-content="{true}">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
67
src/DataTable/ToolbarSearch.svelte
Normal file
67
src/DataTable/ToolbarSearch.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Specify the value of the search input
|
||||||
|
* @type {string} [value=""]
|
||||||
|
*/
|
||||||
|
export let value = "";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to expand the search bar
|
||||||
|
* @type {boolean} [expanded=false]
|
||||||
|
*/
|
||||||
|
export let expanded = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to keep the search bar expanded
|
||||||
|
* @type {boolean} [persistent=false]
|
||||||
|
*/
|
||||||
|
export let persistent = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the tabindex
|
||||||
|
* @type {string} [tabindex="0"]
|
||||||
|
*/
|
||||||
|
export let tabindex = "0";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtain a reference to the input HTML element
|
||||||
|
* @type {null | HTMLInputElement} [ref=null]
|
||||||
|
*/
|
||||||
|
export let ref = null;
|
||||||
|
|
||||||
|
import { tick } from "svelte";
|
||||||
|
import { Search } from "../Search";
|
||||||
|
|
||||||
|
async function expandSearch() {
|
||||||
|
if (persistent || expanded) return;
|
||||||
|
expanded = true;
|
||||||
|
await tick();
|
||||||
|
ref.focus();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
tabindex="{expanded ? '-1' : tabindex}"
|
||||||
|
class:bx--toolbar-action="{true}"
|
||||||
|
class:bx--toolbar-search-container-active="{expanded}"
|
||||||
|
class:bx--toolbar-search-container-expandable="{!persistent}"
|
||||||
|
class:bx--toolbar-search-container-persistent="{persistent}"
|
||||||
|
on:click="{expandSearch}"
|
||||||
|
on:focus="{expandSearch}"
|
||||||
|
>
|
||||||
|
<Search
|
||||||
|
size="sm"
|
||||||
|
tabindex="{expanded ? tabindex : '-1'}"
|
||||||
|
aria-hidden="{!expanded}"
|
||||||
|
{...$$restProps}
|
||||||
|
bind:ref
|
||||||
|
bind:value
|
||||||
|
on:change
|
||||||
|
on:input
|
||||||
|
on:focus
|
||||||
|
on:blur
|
||||||
|
on:blur="{() => {
|
||||||
|
expanded = !persistent && !!value.length;
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
@ -6,3 +6,5 @@ export { default as TableContainer } from "./TableContainer.svelte";
|
||||||
export { default as TableHead } from "./TableHead.svelte";
|
export { default as TableHead } from "./TableHead.svelte";
|
||||||
export { default as TableHeader } from "./TableHeader.svelte";
|
export { default as TableHeader } from "./TableHeader.svelte";
|
||||||
export { default as TableRow } from "./TableRow.svelte";
|
export { default as TableRow } from "./TableRow.svelte";
|
||||||
|
export { default as Toolbar } from "./Toolbar.svelte";
|
||||||
|
export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the value of the search input
|
* Specify the value of the search input
|
||||||
* @type {string} [value="text"]
|
* @type {string} [value=""]
|
||||||
*/
|
*/
|
||||||
export let value = "";
|
export let value = "";
|
||||||
|
|
||||||
|
|
@ -124,11 +124,14 @@
|
||||||
placeholder="{placeholder}"
|
placeholder="{placeholder}"
|
||||||
type="{type}"
|
type="{type}"
|
||||||
value="{value}"
|
value="{value}"
|
||||||
|
aria-hidden="{$$props['aria-hidden']}"
|
||||||
on:change
|
on:change
|
||||||
on:input
|
on:input
|
||||||
on:input="{({ target }) => {
|
on:input="{({ target }) => {
|
||||||
value = target.value;
|
value = target.value;
|
||||||
}}"
|
}}"
|
||||||
|
on:focus
|
||||||
|
on:blur
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,8 @@ export {
|
||||||
TableHead,
|
TableHead,
|
||||||
TableHeader,
|
TableHeader,
|
||||||
TableRow,
|
TableRow,
|
||||||
|
Toolbar,
|
||||||
|
ToolbarSearch,
|
||||||
} from "./DataTable";
|
} from "./DataTable";
|
||||||
export { DataTableSkeleton } from "./DataTableSkeleton";
|
export { DataTableSkeleton } from "./DataTableSkeleton";
|
||||||
export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
|
export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
|
||||||
|
|
|
||||||
47
types/index.d.ts
vendored
47
types/index.d.ts
vendored
|
|
@ -857,6 +857,7 @@ export class DataTable extends CarbonSvelteComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
$$slot_def: {
|
$$slot_def: {
|
||||||
|
default: {};
|
||||||
"cell-header": { header: any };
|
"cell-header": { header: any };
|
||||||
cell: { row: any; cell: any };
|
cell: { row: any; cell: any };
|
||||||
"expanded-row": { row: any };
|
"expanded-row": { row: any };
|
||||||
|
|
@ -5078,6 +5079,52 @@ export class ToggleSmallSkeleton extends CarbonSvelteComponent {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class Toolbar extends CarbonSvelteComponent {
|
||||||
|
$$prop_def: {
|
||||||
|
/**
|
||||||
|
* Specify the toolbar size
|
||||||
|
* @default "default"
|
||||||
|
*/
|
||||||
|
size?: "sm" | "default";
|
||||||
|
};
|
||||||
|
|
||||||
|
$$slot_def: { default: {} };
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ToolbarSearch extends CarbonSvelteComponent {
|
||||||
|
$$prop_def: {
|
||||||
|
/**
|
||||||
|
* Specify the value of the search input
|
||||||
|
* @default ""
|
||||||
|
*/
|
||||||
|
value?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to expand the search bar
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
expanded?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to keep the search bar expanded
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
persistent?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the tabindex
|
||||||
|
* @default "0"
|
||||||
|
*/
|
||||||
|
tabindex?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtain a reference to the input HTML element
|
||||||
|
* @default null
|
||||||
|
*/
|
||||||
|
ref?: null | HTMLInputElement;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export class Tooltip extends CarbonSvelteComponent {
|
export class Tooltip extends CarbonSvelteComponent {
|
||||||
$$prop_def: {
|
$$prop_def: {
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue