mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(toolbar-batch-actions): add active
prop to show toolbar (#1440)
Closes #1438
This commit is contained in:
parent
14a8376a81
commit
bc58c7b029
4 changed files with 30 additions and 5 deletions
|
@ -4422,9 +4422,10 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- |
|
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
|
||||||
| formatTotalSelected | No | <code>let</code> | No | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text |
|
| formatTotalSelected | No | <code>let</code> | No | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text |
|
||||||
|
| active | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to show the toolbar regardless of row selection |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
@ -13672,6 +13672,18 @@
|
||||||
"isRequired": false,
|
"isRequired": false,
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "active",
|
||||||
|
"kind": "let",
|
||||||
|
"description": "Set to `true` to show the toolbar regardless of row selection",
|
||||||
|
"type": "boolean",
|
||||||
|
"value": "false",
|
||||||
|
"isFunction": false,
|
||||||
|
"isFunctionDeclaration": false,
|
||||||
|
"isRequired": false,
|
||||||
|
"constant": false,
|
||||||
|
"reactive": false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"moduleExports": [],
|
"moduleExports": [],
|
||||||
|
|
|
@ -6,12 +6,18 @@
|
||||||
export let formatTotalSelected = (totalSelected) =>
|
export let formatTotalSelected = (totalSelected) =>
|
||||||
`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
|
`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to show the toolbar regardless of row selection
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
export let active = false;
|
||||||
|
|
||||||
import { onMount, getContext } from "svelte";
|
import { onMount, getContext } from "svelte";
|
||||||
import Button from "../Button/Button.svelte";
|
import Button from "../Button/Button.svelte";
|
||||||
|
|
||||||
let batchSelectedIds = [];
|
let batchSelectedIds = [];
|
||||||
|
|
||||||
$: showActions = batchSelectedIds.length > 0;
|
$: showActions = batchSelectedIds.length > 0 || active;
|
||||||
|
|
||||||
const ctx = getContext("DataTable");
|
const ctx = getContext("DataTable");
|
||||||
const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
|
const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
|
||||||
|
|
|
@ -8,6 +8,12 @@ export interface ToolbarBatchActionsProps
|
||||||
* @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
|
* @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
|
||||||
*/
|
*/
|
||||||
formatTotalSelected?: (totalSelected: number) => string;
|
formatTotalSelected?: (totalSelected: number) => string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to show the toolbar regardless of row selection
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
active?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ToolbarBatchActions extends SvelteComponentTyped<
|
export default class ToolbarBatchActions extends SvelteComponentTyped<
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue