bref-ui 0.3.1 → 2.0.1

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

@@ -1,3 +0,0 @@
-export { default as TreeView } from './tree-view.svelte';
-export { default as TreeNode } from './tree-node.svelte';
-export * from './types.ts';

package/dist/base/tree-view/index.js

@@ -1,3 +0,0 @@
-export { default as TreeView } from './tree-view.svelte';
-export { default as TreeNode } from './tree-node.svelte';
-export * from "./types.js";

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

@@ -1,132 +0,0 @@
-<script lang="ts">
-	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,
-		expandOnSelect
-	}: TreeNodeProps = $props();
-
-	let expanded: boolean = $state(false);
-	let selected: boolean = $derived(selectedIds?.has(node.id) ?? false);
-
-	const hasChildren = $derived(node.children && node.children.length > 0);
-
-	const toggleExpand = (e: MouseEvent) => {
-		e.stopPropagation();
-		if (hasChildren) expanded = !expanded;
-	};
-
-	const handleSelect = () => {
-		onSelect(node.id);
-		if (expandOnSelect && hasChildren) expanded = true;
-	};
-
-	const nextLevel = $derived(level + 1);
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class={size}
-	class:selected
-	style:padding-left="calc({level} * var(--tree-indent))"
-	onclick={handleSelect}
-	class:wide
->
-	{#if hasChildren}
-		<button class:expanded onclick={toggleExpand}>
-			<Icon name="chevron_right" {size} color={selected ? 'primary' : undefined} />
-		</button>
-	{:else}
-		<span class="spacer"></span>
-	{/if}
-
-	{#if node.icon}
-		<Icon
-			name={node.icon}
-			filled={selected || filledIcon}
-			{size}
-			color={selected ? 'primary' : undefined}
-		/>
-	{/if}
-
-	<span>{node.label}</span>
-</div>
-
-{#if expanded && hasChildren}
-	{#each node.children as child (child.id)}
-		<TreeNode
-			node={child}
-			level={nextLevel}
-			{size}
-			{onSelect}
-			{selectedIds}
-			{filledIcon}
-			{wide}
-			{expandOnSelect}
-		/>
-	{/each}
-{/if}
-
-<style>
-	div,
-	span,
-	button {
-		transition: all 0.1s ease-in-out;
-	}
-
-	div {
-		--tree-indent: 1em;
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		padding: 0.25em 0.5em;
-		gap: 0.25em;
-		border-radius: var(--border-radius);
-		cursor: pointer;
-	}
-
-	div:hover {
-		background-color: color-mix(in srgb, var(--color-foreground) 10%, transparent);
-	}
-
-	.selected {
-		background-color: var(--color-primary-soft);
-	}
-	.selected:hover {
-		background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-primary-soft));
-	}
-
-	.selected span {
-		color: var(--color-primary);
-	}
-	span {
-		user-select: none;
-	}
-
-	button {
-		all: unset;
-		display: flex;
-		padding: 0.25em;
-		cursor: pointer;
-	}
-
-	button.expanded {
-		transform: rotate(90deg);
-	}
-
-	.spacer {
-		width: 1em;
-	}
-
-	.wide {
-		width: 100%;
-	}
-</style>

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

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import type { TreeViewProps } from './types.js';
-	import TreeNode from './tree-node.svelte';
-
-	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}
-			{expandOnSelect}
-		/>
-	{/each}
-</div>
-
-<style>
-	div {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.wide {
-		width: 100%;
-	}
-
-	.x-small {
-		gap: 0.125rem;
-	}
-	.small {
-		gap: 0.25rem;
-	}
-	.medium {
-		gap: 0.5rem;
-	}
-	.large {
-		gap: 0.75rem;
-	}
-	.x-large {
-		gap: 1rem;
-	}
-</style>

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

@@ -1,23 +0,0 @@
-import type { Size } from '../types.ts';
-import type { IconName, IconProps } from '../icon/types.ts';
-export interface NodeDataProps {
-    id: string;
-    label: string;
-    icon?: IconName;
-    children?: NodeDataProps[];
-}
-export interface BaseTreeProps {
-    onSelect: (id: string) => void;
-    selectedIds: Set<string>;
-    size?: Size;
-    filledIcon?: IconProps['filled'];
-    wide?: boolean;
-    expandOnSelect?: boolean;
-}
-export interface TreeViewProps extends BaseTreeProps {
-    data: NodeDataProps[];
-}
-export interface TreeNodeProps extends BaseTreeProps {
-    node: NodeDataProps;
-    level: number;
-}

package/dist/base/types.d.ts

@@ -1,4 +0,0 @@
-export type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-export type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'foreground' | 'background';
-export type Variant = 'filled' | 'soft' | 'ghost';
-export type Speed = 'slow' | 'normal' | 'fast';