bref-ui 0.1.8 → 0.1.9

package/README.md

@@ -2,7 +2,7 @@
 
 **[Live Demo](https://feuersteiner.github.io/bref/)**
 
-Bref is a Svelte UI component library designed to be minimal, flexible, and easy to use. It uses Svelte's built-in scoped CSS for styling—no external CSS frameworks required.
+Bref is a Svelte UI component library designed to be minimal, flexible, and easy to use. It uses Svelte's built-in scoped CSS for styling, no external CSS frameworks required.
 
 ## What We Promise
 
@@ -32,7 +32,7 @@ npm install bref-ui
 
 ## Why Bref?
 
-- **Scoped CSS**: Uses Svelte's built-in scoped styling—each component's styles are encapsulated and won't leak or conflict.
+- **Scoped CSS**: Uses Svelte's built-in scoped styling, each component's styles are encapsulated and won't leak or conflict.
 - **Minimal**: Only essential components, nothing extra.
 - **Flexible**: Use as an npm package or copy components directly into your project with our CLI tool (WIP).
 - **Batteries included theming**: Just provide your base colors and we handle the rest (see below).

package/dist/base/tree-view/tree-node.svelte

@@ -2,7 +2,16 @@
 	import type { TreeNodeProps } from './types.js';
 	import Icon from '../icon/icon.svelte';
 	import TreeNode from './tree-node.svelte';
-	const { node, level, size, onSelect, selectedIds, filledIcon, wide }: TreeNodeProps = $props();
+	const {
+		node,
+		level,
+		size,
+		onSelect,
+		selectedIds,
+		filledIcon,
+		wide,
+		expandOnSelect
+	}: TreeNodeProps = $props();
 
 	let expanded: boolean = $state(false);
 	let selected: boolean = $derived(selectedIds?.has(node.id) ?? false);
@@ -14,7 +23,12 @@
 		if (hasChildren) expanded = !expanded;
 	};
 
-	const handleSelect = () => onSelect(node.id);
+	const handleSelect = () => {
+		onSelect(node.id);
+		if (expandOnSelect && hasChildren) expanded = true;
+	};
+
+	const nextLevel = $derived(level + 1);
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -48,7 +62,16 @@
 
 {#if expanded && hasChildren}
 	{#each node.children as child (child.id)}
-		<TreeNode node={child} level={level + 1} {size} {onSelect} {selectedIds} {filledIcon} {wide} />
+		<TreeNode
+			node={child}
+			level={nextLevel}
+			{size}
+			{onSelect}
+			{selectedIds}
+			{filledIcon}
+			{wide}
+			{expandOnSelect}
+		/>
 	{/each}
 {/if}
 

package/dist/base/tree-view/tree-view.svelte

@@ -2,12 +2,29 @@
 	import type { TreeViewProps } from './types.js';
 	import TreeNode from './tree-node.svelte';
 
-	let { data, size = 'medium', onSelect, selectedIds, wide, filledIcon }: TreeViewProps = $props();
+	let {
+		data,
+		size = 'medium',
+		onSelect,
+		selectedIds,
+		wide,
+		filledIcon,
+		expandOnSelect
+	}: TreeViewProps = $props();
 </script>
 
 <div role="tree" class={size} class:wide>
 	{#each data as node (node.id)}
-		<TreeNode {node} level={0} {size} {onSelect} {selectedIds} {wide} {filledIcon} />
+		<TreeNode
+			{node}
+			level={0}
+			{size}
+			{onSelect}
+			{selectedIds}
+			{wide}
+			{filledIcon}
+			{expandOnSelect}
+		/>
 	{/each}
 </div>
 

package/dist/base/tree-view/types.d.ts

@@ -12,6 +12,7 @@ export interface BaseTreeProps {
     size?: Size;
     filledIcon?: IconProps['filled'];
     wide?: boolean;
+    expandOnSelect?: boolean;
 }
 export interface TreeViewProps extends BaseTreeProps {
     data: NodeDataProps[];

package/dist/internal/layout/sidebar/sidebar.svelte

@@ -24,7 +24,14 @@
 <div class="container">
 	<Logo />
 	<div class="content">
-		<TreeView wide size="small" {selectedIds} {onSelect} data={PAGES.map(pageToNode)} />
+		<TreeView
+			wide
+			size="small"
+			{selectedIds}
+			{onSelect}
+			data={PAGES.map(pageToNode)}
+			expandOnSelect
+		/>
 	</div>
 	<Footer />
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "0.1.8",
+	"version": "0.1.9",
 	"description": "A Svelte UI component library using scoped CSS - minimal and flexible",
 	"license": "MIT",
 	"author": "feuerstein",