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

Merge 48b63b9246 into 0405edee7d

Browse source
This commit is contained in:
Davi Seidel Brandão 2024-03-08 04:35:32 +00:00 • committed by GitHub
commit 20ea4fe8c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 40 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -1613,7 +1613,7 @@ None.
| 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 |
| open | 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<any></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<any></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;`) |
@ -3310,7 +3310,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| fixed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant |
| rail | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant |
| ariaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the nav |

4
docs/src/COMPONENT_API.json
View file

@ -4897,7 +4897,7 @@
"filePath": "src/UIShell/HeaderAction.svelte",
"props": [
{
"name": "isOpen",
"name": "open",
"kind": "let",
"description": "Set to `true` to open the panel",
"type": "boolean",
@ -10733,7 +10733,7 @@
"reactive": false
},
{
"name": "isOpen",
"name": "open",
"kind": "let",
"description": "Set to `true` to toggle the expanded state",
"type": "boolean",

6
docs/src/pages/_layout.svelte
View file

@ -46,7 +46,7 @@
let active = false;
$: results = miniSearch.search(value).slice(0, 10);
let isOpen = false;
let open = false;
let isSideNavOpen = true;
let innerWidth = 2048;
@ -121,7 +121,7 @@
href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank"
/>
<HeaderAction transition="{false}" bind:isOpen>
<HeaderAction transition="{false}" bind:open>
<HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink
@ -156,7 +156,7 @@
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNav bind:open="{isSideNavOpen}">
<SideNavItems>
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
<SideNavMenuItem

2
docs/src/pages/components/UIShell.svx
View file

@ -69,4 +69,4 @@ You can disable the `transition` by setting it to `false`.
## Header with persisted hamburger menu
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />

2
docs/src/pages/framed/UIShell/HeaderNav.svelte
View file

@ -37,7 +37,7 @@
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNav bind:open="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />

2
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -38,7 +38,7 @@
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNav bind:open="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade}" text="Link 2" href="/" />

6
docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
View file

@ -22,7 +22,7 @@
import { expoIn } from "svelte/easing";
let isSideNavOpen = false;
let isOpen = false;
let open = false;
let selected = "0";
let transitions = {
"0": {
@ -45,7 +45,7 @@
<SkipToContent />
</svelte:fragment>
<HeaderUtilities>
<HeaderAction bind:isOpen transition="{transitions[selected].value}">
<HeaderAction bind:open transition="{transitions[selected].value}">
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@ -60,7 +60,7 @@
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNav bind:open="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />

6
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -33,7 +33,7 @@
<HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction
bind:isOpen="{isOpen1}"
bind:open="{isOpen1}"
icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt}"
>
@ -50,7 +50,7 @@
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
<HeaderAction bind:isOpen="{isOpen2}">
<HeaderAction bind:open="{isOpen2}">
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@ -65,7 +65,7 @@
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNav bind:open="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />

2
docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
View file

@ -40,7 +40,7 @@
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNav bind:open="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />

6
src/UIShell/HamburgerMenu.svelte
View file

@ -6,7 +6,7 @@
export let ariaLabel = undefined;
/** Set to `true` to toggle the open state */
export let isOpen = false;
export let open = false;
/**
* Specify the icon to render for the closed state.
@ -39,7 +39,7 @@
class:bx--header__menu-toggle="{true}"
{...$$restProps}
on:click
on:click="{() => (isOpen = !isOpen)}"
on:click="{() => (open = !open)}"
>
<svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
<svelte:component this="{open ? iconClose : iconMenu}" size="{20}" />
</button>

2
src/UIShell/Header.svelte
View file

@ -84,7 +84,7 @@
<slot name="skip-to-content" />
{#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
<HamburgerMenu
bind:isOpen="{isSideNavOpen}"
bind:open="{isSideNavOpen}"
iconClose="{iconClose}"
iconMenu="{iconMenu}"
/>

16
src/UIShell/HeaderAction.svelte
View file

@ -5,7 +5,7 @@
*/
/** Set to `true` to open the panel */
export let isOpen = false;
export let open = false;
/**
* Specify the icon to render when the action panel is closed.
@ -54,12 +54,12 @@
<svelte:window
on:click="{({ target }) => {
if (
isOpen &&
open &&
!ref.contains(target) &&
!refPanel.contains(target) &&
!preventCloseOnClickOutside
) {
isOpen = false;
open = false;
dispatch('close');
}
}}"
@ -69,16 +69,16 @@
bind:this="{ref}"
type="button"
class:bx--header__action="{true}"
class:bx--header__action--active="{isOpen}"
class:bx--header__action--active="{open}"
class:action-text="{text}"
{...$$restProps}
on:click
on:click|stopPropagation="{() => {
isOpen = !isOpen;
dispatch(isOpen ? 'open' : 'close');
open = !open;
dispatch(open ? 'open' : 'close');
}}"
>
{#if isOpen}
{#if open}
<slot name="closeIcon">
<svelte:component this="{closeIcon}" size="{20}" />
</slot>
@ -91,7 +91,7 @@
{#if text}<span>{text}</span>{/if}
</slot>
</button>
{#if isOpen}
{#if open}
<div
bind:this="{refPanel}"
class:bx--header-panel="{true}"

18
src/UIShell/SideNav.svelte
View file

@ -18,7 +18,7 @@
export let ariaLabel = undefined;
/** Set to `true` to toggle the expanded state */
export let isOpen = false;
export let open = false;
/**
* The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
@ -42,8 +42,8 @@
let winWidth = undefined;
$: dispatch(isOpen ? "open" : "close");
$: $isSideNavCollapsed = !isOpen;
$: dispatch(open ? "open" : "close");
$: $isSideNavCollapsed = !open;
$: $isSideNavRail = rail;
onMount(() => {
@ -60,23 +60,23 @@
<div
on:click="{() => {
dispatch('click:overlay');
isOpen = false;
open = false;
}}"
class:bx--side-nav__overlay="{true}"
class:bx--side-nav__overlay-active="{isOpen}"
style:z-index="{isOpen ? 6000 : undefined}"
class:bx--side-nav__overlay-active="{open}"
style:z-index="{open ? 6000 : undefined}"
></div>
{/if}
<nav
aria-hidden="{!isOpen}"
aria-hidden="{!open}"
aria-label="{ariaLabel}"
class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}"
class:bx--side-nav--ux="{true}"
class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
? false
: isOpen}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
: open}"
class:bx--side-nav--collapsed="{!open && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}
>

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

@ -8,7 +8,7 @@ export interface HeaderActionProps extends RestProps {
* Set to `true` to open the panel
* @default false
*/
isOpen?: boolean;
open?: boolean;
/**
* Specify the icon to render when the action panel is closed.

2
types/UIShell/SideNav.svelte.d.ts vendored
View file

@ -26,7 +26,7 @@ export interface SideNavProps extends RestProps {
* Set to `true` to toggle the expanded state
* @default false
*/
isOpen?: boolean;
open?: boolean;
/**
* The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.