mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(ui-shell): add preventCloseOnClickOutside to HeaderAction (#1625)

Browse source 
Closes #1624
This commit is contained in:
Nestor Orest Plysyuk 2023-07-13 16:37:21 +02:00 • committed by GitHub
commit ea9b261b60
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

17
COMPONENT_INDEX.md
View file

@ -1601,14 +1601,15 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | No | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | No | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
### Slots

12
docs/src/COMPONENT_API.json
View file

@ -4923,6 +4923,18 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "preventCloseOnClickOutside",
"kind": "let",
"description": "Set to `true` to prevent the panel from closing when clicking outside",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],

10
src/UIShell/HeaderAction.svelte
View file

@ -38,6 +38,9 @@
*/
export let transition = { duration: 200 };
/** Set to `true` to prevent the panel from closing when clicking outside */
export let preventCloseOnClickOutside = false;
import { createEventDispatcher } from "svelte";
import { slide } from "svelte/transition";
import Close from "../icons/Close.svelte";
@ -50,7 +53,12 @@
<svelte:window
on:click="{({ target }) => {
if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
if (
isOpen &&
!ref.contains(target) &&
!refPanel.contains(target) &&
!preventCloseOnClickOutside
) {
isOpen = false;
dispatch('close');
}

6
types/UIShell/HeaderAction.svelte.d.ts vendored
View file

@ -43,6 +43,12 @@ export interface HeaderActionProps
*/
transition?: false | import("svelte/transition").SlideParams;
/**
* Set to `true` to prevent the panel from closing when clicking outside
* @default false
*/
preventCloseOnClickOutside?: boolean;
[key: `data-${string}`]: any;
}