@keenmate/svelte-treeview 1.0.0-beta.0 → 1.0.0-beta.1

package/README.md

@@ -1,38 +1,38 @@
-# Svelte Treeview
-
-The most elaborate treeview for svelte on earth (or even in our galaxy).
-
-## Features
-
-- load new nodes whne expanding
-- automatically expanding to given depth
-- customization of all object properties
-- checkboxes enabled on whole tree or based on property
-- recursive seletion mode, where leafes can be selected
-- build-in support for search
-
-## Instalation
-
-install the package `@keenmate/svelte-treeview` using your favourite package manager.
-
-Font awesome is required for expand/collapse icons.
-
-## Minimal usage
-
-
-```svelte
-<script lang="ts">
-	import { TreeView } from '$lib/index.js';
-
-	let tree = [
-		{ nodePath: 'animals', title: 'Animals', hasChildren: true },
-    //...
-		{ nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
-	];
-</script>
-
-<TreeView {tree} treeId="my-tree" let:node>
-	{node.title}
-</TreeView>
-
-```
+# Svelte Treeview
+
+The most elaborate treeview for svelte on earth (or even in our galaxy).
+
+## Features
+
+- load new nodes whne expanding
+- automatically expanding to given depth
+- customization of all object properties
+- checkboxes enabled on whole tree or based on property
+- recursive seletion mode, where leafes can be selected
+- build-in support for search
+
+## Instalation
+
+install the package `@keenmate/svelte-treeview` using your favourite package manager.
+
+Font awesome is required for expand/collapse icons.
+
+## Minimal usage
+
+
+```svelte
+<script lang="ts">
+	import { TreeView } from '$lib/index.js';
+
+	let tree = [
+		{ nodePath: 'animals', title: 'Animals', hasChildren: true },
+    //...
+		{ nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
+	];
+</script>
+
+<TreeView {tree} treeId="my-tree" let:node>
+	{node.title}
+</TreeView>
+
+```

package/dist/Branch.svelte

@@ -21,12 +21,12 @@ export let branchRootNode;
 export let canNest;
 export let validTarget;
 export let insPos;
-const getNodeId = (node) => `${treeId}-${helper.path(node)}`;
+const getNodeId = (node) => `${treeId}-${node.path}`;
 function setExpansion(node, changeTo) {
     dispatch('internal-expand', { node: node, changeTo });
 }
 function isExpanded(node, depth, expandToDepth) {
-    const nodeExpanded = helper.props.expanded(node);
+    const nodeExpanded = node.expanded;
     //if expanded prop is defined it has priority over expand to
     if (nodeExpanded === null) {
         return depth <= expandToDepth;
@@ -60,7 +60,7 @@ function handleDragLeave(e, node, el) {
  *check if this node is one being hovered over (highlited) and is valid target
  */
 function highlighThisNode(node, highlitedNode, validTarget) {
-    return validTarget && helper.path(highlitedNode) == helper.path(node);
+    return validTarget && highlitedNode.path == node.path;
 }
 /**
  * returns true, it should highlight nesting on this node
@@ -72,9 +72,7 @@ function highlighThisNode(node, highlitedNode, validTarget) {
 function highlightNesting(node, highlitedNode, validTarget, canNest) {
     if (!highlitedNode)
         return false;
-    return (canNest &&
-        highlighThisNode(node, highlitedNode, validTarget) &&
-        helper.props.nestDisabled(node) !== true);
+    return (canNest && highlighThisNode(node, highlitedNode, validTarget) && node.nestDisabled !== true);
 }
 /**
  * returns true, it should highlight nesting on this node
@@ -86,131 +84,127 @@ function highlightNesting(node, highlitedNode, validTarget, canNest) {
 function highlightInsert(node, highlitedNode, validTarget, canNest) {
     if (!highlitedNode)
         return false;
-    return (!canNest &&
-        highlighThisNode(node, highlitedNode, validTarget) &&
-        helper.props.nestDisabled(node) !== true);
+    return (!canNest && highlighThisNode(node, highlitedNode, validTarget) && node.nestDisabled !== true);
 }
 let liElements = {};
-</script>
-
-<ul
-	class:show-lines={childDepth === 0 && verticalLines}
-	class:child-menu={childDepth > 0}
-	class={childDepth === 0 ? classes.treeClass : ''}
->
-	{#each helper.getDirectChildren(tree, helper.path(branchRootNode)) as node (getNodeId(node))}
-		{@const nesthighlighed = highlightNesting(node, highlightedNode, validTarget, canNest)}
-		{@const insertHighlighted = highlightInsert(node, highlightedNode, validTarget, canNest)}
-		{@const expanded = isExpanded(node, childDepth, expandTo)}
-		{@const hasChildren = helper.props.hasChildren(node)}
-		{@const draggable = !readonly && dragAndDrop && helper.props.isDraggable(node)}
-		{@const isCurrentlyDragged =
-			draggedPath == helper.path(node) ||
-			(draggedPath && helper.path(node)?.startsWith(draggedPath))}
-
-		<li
-			class:is-child={helper.nodePathIsChild(helper.path(node))}
-			class:has-children={hasChildren}
-			on:contextmenu|stopPropagation={(e) => {
-				dispatch('open-ctxmenu', { e: e, node: Node });
-			}}
-			on:drop|stopPropagation={(e) => handleDragDrop(e, node, liElements[getNodeId(node)])}
-			on:dragover|stopPropagation={(e) => handleDragOver(e, node, liElements[getNodeId(node)])}
-			on:dragenter|stopPropagation={(e) => handleDragEnter(e, node, liElements[getNodeId(node)])}
-			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
-			bind:this={liElements[getNodeId(node)]}
-		>
-			{#if insPos == InsertionType.above && insertHighlighted}
-				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.inserLineClass}" />
-				</div>
-			{/if}
-
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				class="tree-item
-				{nesthighlighed ? classes.expandClass : ''}
-				{classes.nodeClass} {isCurrentlyDragged ? classes.currentlyDraggedClass : ''}"
-				class:div-has-children={hasChildren}
-				class:hover={insertHighlighted || nesthighlighed}
-				{draggable}
-				on:dragstart={(e) => handleDragStart(e, node)}
-				on:dragend={(e) => handleDragEnd(e, node)}
-			>
-				{#if hasChildren}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<span on:click={() => setExpansion(node, !expanded)}>
-						<!-- use callback overrides expanded  -->
-						<i
-							class="far {expanded ? classes.expandedToggleClass : classes.collapsedToggleClass}"
-							class:fa-minus-square={expanded}
-							class:fa-plus-square={!expanded || helper.props.useCallback(node)}
-						/>
-					</span>
-				{:else}
-					<span />
-				{/if}
-
-				<Checkbox
-					{checkboxes}
-					{helper}
-					{recursive}
-					{node}
-					{onlyLeafCheckboxes}
-					{hideDisabledCheckboxes}
-					{readonly}
-					on:select={({ detail: { node } }) => selectionChanged(node)}
-				/>
-				<span class:pointer-cursor={draggable}>
-					<slot {node} />
-				</span>
-			</div>
-
-			{#if nesthighlighed}
-				<div class="insert-line-wrapper">
-					<div
-						class="insert-line insert-line-child {classes.inserLineClass} {classes.inserLineNestClass}"
-					/>
-				</div>
-			{/if}
-			{#if expanded && hasChildren}
-				<svelte:self
-					branchRootNode={node}
-					childDepth={childDepth + 1}
-					{treeId}
-					{checkboxes}
-					{tree}
-					{recursive}
-					{helper}
-					{classes}
-					{readonly}
-					{onlyLeafCheckboxes}
-					{hideDisabledCheckboxes}
-					{expandTo}
-					{draggedPath}
-					{dragAndDrop}
-					{verticalLines}
-					{canNest}
-					{insPos}
-					{validTarget}
-					{highlightedNode}
-					on:open-ctxmenu
-					on:internal-expand
-					on:internal-selectionChanged
-					let:node={nodeNested}
-				>
-					<slot node={nodeNested} />
-				</svelte:self>
-			{/if}
-			{#if !expanded && hasChildren}
-				<ul class:child-menu={childDepth > 0} />
-			{/if}
-			<!-- Show line if insering -->
-			{#if insPos === InsertionType.below && insertHighlighted}
-				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.inserLineClass}" />
-				</div>
-			{/if}
-		</li>
-	{/each}
-</ul>
+</script>
+
+<ul
+	class:show-lines={childDepth === 0 && verticalLines}
+	class:child-menu={childDepth > 0}
+	class={childDepth === 0 ? classes.treeClass : ''}
+>
+	{#each helper.getDirectChildren(tree, branchRootNode?.path ?? null) as node (getNodeId(node))}
+		{@const nesthighlighed = highlightNesting(node, highlightedNode, validTarget, canNest)}
+		{@const insertHighlighted = highlightInsert(node, highlightedNode, validTarget, canNest)}
+		{@const expanded = isExpanded(node, childDepth, expandTo)}
+		{@const hasChildren = node.hasChildren}
+		{@const draggable = !readonly && dragAndDrop && node.isDraggable}
+		{@const isCurrentlyDragged =
+			draggedPath == node.path || (draggedPath && node.path?.startsWith(draggedPath))}
+
+		<li
+			class:is-child={helper.nodePathIsChild(node.path)}
+			class:has-children={hasChildren}
+			on:contextmenu|stopPropagation={(e) => {
+				dispatch('open-ctxmenu', { e: e, node: Node });
+			}}
+			on:drop|stopPropagation={(e) => handleDragDrop(e, node, liElements[getNodeId(node)])}
+			on:dragover|stopPropagation={(e) => handleDragOver(e, node, liElements[getNodeId(node)])}
+			on:dragenter|stopPropagation={(e) => handleDragEnter(e, node, liElements[getNodeId(node)])}
+			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
+			bind:this={liElements[getNodeId(node)]}
+		>
+			{#if insPos == InsertionType.above && insertHighlighted}
+				<div class="insert-line-wrapper">
+					<div class="insert-line {classes.inserLineClass}" />
+				</div>
+			{/if}
+
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class="tree-item
+				{nesthighlighed ? classes.expandClass : ''}
+				{classes.nodeClass} {isCurrentlyDragged ? classes.currentlyDraggedClass : ''}"
+				class:div-has-children={hasChildren}
+				class:hover={insertHighlighted || nesthighlighed}
+				{draggable}
+				on:dragstart={(e) => handleDragStart(e, node)}
+				on:dragend={(e) => handleDragEnd(e, node)}
+			>
+				{#if hasChildren}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<span on:click={() => setExpansion(node, !expanded)}>
+						<!-- use callback overrides expanded  -->
+						<i
+							class="far {expanded ? classes.expandedToggleClass : classes.collapsedToggleClass}"
+							class:fa-minus-square={expanded}
+							class:fa-plus-square={!expanded || node.useCallback}
+						/>
+					</span>
+				{:else}
+					<span />
+				{/if}
+
+				<Checkbox
+					{checkboxes}
+					{recursive}
+					{node}
+					{onlyLeafCheckboxes}
+					{hideDisabledCheckboxes}
+					{readonly}
+					on:select={({ detail: { node } }) => selectionChanged(node)}
+				/>
+				<span class:pointer-cursor={draggable}>
+					<slot node={node.originalNode} />
+				</span>
+			</div>
+
+			{#if nesthighlighed}
+				<div class="insert-line-wrapper">
+					<div
+						class="insert-line insert-line-child {classes.inserLineClass} {classes.inserLineNestClass}"
+					/>
+				</div>
+			{/if}
+			{#if expanded && hasChildren}
+				<svelte:self
+					branchRootNode={node}
+					childDepth={childDepth + 1}
+					{treeId}
+					{checkboxes}
+					{tree}
+					{recursive}
+					{helper}
+					{classes}
+					{readonly}
+					{onlyLeafCheckboxes}
+					{hideDisabledCheckboxes}
+					{expandTo}
+					{draggedPath}
+					{dragAndDrop}
+					{verticalLines}
+					{canNest}
+					{insPos}
+					{validTarget}
+					{highlightedNode}
+					on:open-ctxmenu
+					on:internal-expand
+					on:internal-selectionChanged
+					let:node={nodeNested}
+				>
+					<slot node={nodeNested} />
+				</svelte:self>
+			{/if}
+			{#if !expanded && hasChildren}
+				<ul class:child-menu={childDepth > 0} />
+			{/if}
+			<!-- Show line if insering -->
+			{#if insPos === InsertionType.below && insertHighlighted}
+				<div class="insert-line-wrapper">
+					<div class="insert-line {classes.inserLineClass}" />
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/dist/Checkbox.svelte

@@ -1,64 +1,42 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { SelectionModes, VisualState } from './types.js';
-import { SelectionProvider } from './providers/selection-provider.js';
+import { isSelectable } from './providers/selection-provider.js';
 export let checkboxes;
-export let helper;
 export let recursive;
 export let node;
 export let onlyLeafCheckboxes;
 export let hideDisabledCheckboxes;
 export let readonly = false;
-let indeterminate;
-$: {
-    if (helper.props.visualState(node) == 'indeterminate') {
-        indeterminate = true;
-    }
-    else {
-        indeterminate = false;
-    }
-}
-// TODO pass from root
-$: selectionProvider = new SelectionProvider(helper, recursive);
 const dispatch = createEventDispatcher();
 function onSelect(node) {
     dispatch('select', { node });
 }
-</script>
-
-{#if checkboxes == SelectionModes.perNode || checkboxes == SelectionModes.all}
-	{#if selectionProvider.isSelectable(node, checkboxes)}
-		<!-- select node -->
-		{#if !recursive || (recursive && !helper.props.hasChildren(node))}
-			<input
-				type="checkbox"
-				on:change={() => onSelect(node)}
-				checked={helper.props.selected(node)}
-				disabled={readonly}
-			/>
-			<!-- select children-->
-		{:else if !onlyLeafCheckboxes}
-			<!-- @ts-ingore -->
-			<input
-				type="checkbox"
-				on:click={() => onSelect(node)}
-				checked={helper.props.visualState(node) === VisualState.selected}
-				{indeterminate}
-				disabled={readonly}
-			/>
-		{:else}
-			<input
-				type="checkbox"
-				on:click={null}
-				disabled={true}
-				class:invisible={hideDisabledCheckboxes}
-			/>
-		{/if}
-	{:else}
-		<input
-			type="checkbox"
-			on:click|preventDefault|stopPropagation
-			disabled={true}
-			class:invisible={hideDisabledCheckboxes}
-		/>
-	{/if}
-{/if}
+</script>
+
+{#if checkboxes == SelectionModes.perNode || checkboxes == SelectionModes.all}
+	{#if isSelectable(node, checkboxes)}
+		{#if !recursive || (recursive && !node.hasChildren) || !onlyLeafCheckboxes}
+			<input
+				type="checkbox"
+				on:change={() => onSelect(node)}
+				checked={node.visualState === VisualState.selected}
+				indeterminate={node.visualState === VisualState.indeterminate}
+				disabled={readonly}
+			/>
+		{:else}
+			<input
+				type="checkbox"
+				on:click={null}
+				disabled={true}
+				class:invisible={hideDisabledCheckboxes}
+			/>
+		{/if}
+	{:else}
+		<input
+			type="checkbox"
+			on:click|preventDefault|stopPropagation
+			disabled={true}
+			class:invisible={hideDisabledCheckboxes}
+		/>
+	{/if}
+{/if}

package/dist/Checkbox.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponent } from "svelte";
 import { SelectionModes, type Node } from './types.js';
-import type { TreeHelper } from './index.js';
 declare const __propDef: {
     props: {
         checkboxes: SelectionModes;
-        helper: TreeHelper;
         recursive: boolean;
         node: Node;
         onlyLeafCheckboxes: boolean;