mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Align v10.48 (#907)
* chore(deps-dev): upgrade carbon-components to v10.48.0 * feat(ui-shell): support HeaderNavMenu with current item * refactor(tile): remove unnecessary "position: relative" style * refactor(tile): remove unused ref * feat(inline-notification): make title/subtitle slottable Closes #883 * feat(toast-notification): make title/subtitle/caption slottable * chore(notification): deprecate NotificationTextDetails
This commit is contained in:
parent
aaf60485f0
commit
27ba4350cf
16 changed files with 128 additions and 40 deletions
|
@ -16,6 +16,13 @@
|
|||
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
||||
const id = "ccs-" + Math.random().toString(36);
|
||||
const ctx = getContext("HeaderNavMenu");
|
||||
|
||||
$: if (ctx) ctx.updateSelectedItems({ id, isSelected });
|
||||
</script>
|
||||
|
||||
<li>
|
||||
|
|
|
@ -14,7 +14,23 @@
|
|||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
|
||||
import { setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import ChevronDown16 from "../../icons/ChevronDown16.svelte";
|
||||
|
||||
const selectedItems = writable({});
|
||||
|
||||
setContext("HeaderNavMenu", {
|
||||
updateSelectedItems(item) {
|
||||
selectedItems.update((_items) => ({
|
||||
..._items,
|
||||
[item.id]: item.isSelected,
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
$: isCurrentSubmenu =
|
||||
Object.values($selectedItems).filter(Boolean).length > 0;
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
|
@ -29,7 +45,10 @@
|
|||
}}"
|
||||
/>
|
||||
|
||||
<li class:bx--header__submenu="{true}">
|
||||
<li
|
||||
class:bx--header__submenu="{true}"
|
||||
class:bx--header__submenu--current="{isCurrentSubmenu}"
|
||||
>
|
||||
<a
|
||||
bind:this="{ref}"
|
||||
role="menuitem"
|
||||
|
@ -41,6 +60,7 @@
|
|||
class:bx--header__menu-item="{true}"
|
||||
class:bx--header__menu-title="{true}"
|
||||
{...$$restProps}
|
||||
style="{$$restProps.style}; z-index: 1"
|
||||
on:keydown
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue