diff --git a/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte b/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte index fea63fd8d3..a67b619a92 100644 --- a/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte +++ b/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte @@ -93,6 +93,7 @@ bind:this={treeItems[i]} bind:open={node.open} hideLead={!node.lead} + hideTrail={!node.trail} hideChildren={!node.children || node.children.length === 0} bind:disabled={node.disabled} bind:group @@ -111,6 +112,9 @@ {@html node.lead} + + {@html node.trail} + diff --git a/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte b/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte index 0b925e0f74..8c23cba326 100644 --- a/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte +++ b/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte @@ -5,6 +5,7 @@ // Slots: /** * @slot {{}} lead - Allows for an optional leading element, such as an icon. + * @slot {{}} trail - Allows for an optional trailing element, such as action icons. * @slot {{}} children - Provide TreeView item children. */ import { getContext, createEventDispatcher } from 'svelte'; @@ -75,6 +76,8 @@ /** Don't use this prop, workaround until svelte implements conditional slots */ export let hideLead = false; /** Don't use this prop, workaround until svelte implements conditional slots */ + export let hideTrail = false; + /** Don't use this prop, workaround until svelte implements conditional slots */ export let hideChildren = false; // Locals @@ -356,6 +359,12 @@
+ + {#if $$slots.trail && !hideTrail} +
+ +
+ {/if}
diff --git a/packages/skeleton/src/lib/components/TreeView/types.ts b/packages/skeleton/src/lib/components/TreeView/types.ts index 879b738cdc..5b3d458226 100644 --- a/packages/skeleton/src/lib/components/TreeView/types.ts +++ b/packages/skeleton/src/lib/components/TreeView/types.ts @@ -3,6 +3,8 @@ export interface TreeViewNode { content: string; /** Lead content. accepts HTML. */ lead?: string; + /** Trail content. accepts HTML. */ + trail?: string; /** Set open by default on load. */ open?: boolean; /** Set the tree disabled state. */