feat(toolbar-batch-actions): add active prop to show toolbar (#1440)

Closes #1438
This commit is contained in:
naegelin 2022-08-12 17:01:58 +02:00 committed by GitHub
commit bc58c7b029
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 5 deletions

View file

@ -4423,8 +4423,9 @@ 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

View file

@ -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": [],

View file

@ -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) => {

View file

@ -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<