nuance-ui 0.1.18 → 0.1.19

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.18",
+  "version": "0.1.19",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/loader/_loaders/oval-loader.vue

@@ -3,5 +3,5 @@
 </template>
 
 <style module>
-.root{display:inline-block}.root,.root:after{height:var(--loader-size);width:var(--loader-size)}.root:after{animation:oval-loader-animation 1.2s linear infinite;border-color:var(--loader-color) var(--loader-color) var(--loader-color) transparent;border-radius:10000px;border-style:solid;border-width:calc(var(--loader-size)/8);content:"";display:block}@keyframes oval-loader-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.root{display:inline-block}.root,.root:after{height:var(--loader-size);width:var(--loader-size)}.root:after{animation:oval-loader-animation 1.2s linear infinite;border-color:var(--loader-color) var(--loader-color) var(--loader-color) transparent;border-radius:10000px;border-style:solid;border-width:calc(var(--loader-size)/6);content:"";display:block}@keyframes oval-loader-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
 </style>

package/dist/runtime/components/loader/loader.d.vue.ts

@@ -1,7 +1,7 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
 export interface LoaderProps {
-    size?: NuanceSize | string;
+    size?: NuanceSize | `compact-${NuanceSize}` | string;
     color?: NuanceColor | string;
     type?: LoaderType;
 }

package/dist/runtime/components/loader/loader.vue

@@ -5,12 +5,8 @@ import { computed } from "vue";
 import BarsLoader from "./_loaders/bars-loader.vue";
 import DotsLoader from "./_loaders/dots-loader.vue";
 import OvalLoader from "./_loaders/oval-loader.vue";
-const {
-  size = "sm",
-  color,
-  type = "oval"
-} = defineProps({
-  size: { type: String, required: false },
+const { size, color, type = "oval" } = defineProps({
+  size: { type: null, required: false },
   color: { type: null, required: false },
   type: { type: String, required: false }
 });
@@ -21,8 +17,9 @@ const loaders = {
 };
 const style = computed(() => useStyleResolver((theme) => {
   const _color = parseThemeColor({ color, theme });
+  const _size = size?.includes("compact") ? size.replace("compact-", "") : size;
   return {
-    "--loader-size": getSize(size, "loader-size"),
+    "--loader-size": getSize(_size, "loader-size"),
     "--loader-color": _color.value
   };
 }));
@@ -33,5 +30,5 @@ const style = computed(() => useStyleResolver((theme) => {
 </template>
 
 <style module>
-.root{--loader-size-xs:rem(18px);--loader-size-sm:rem(22px);--loader-size-md:rem(36px);--loader-size-lg:rem(44px);--loader-size-xl:rem(58px);--loader-size:var(--loader-size-md);--loader-color:var(--color-primary-filled)}
+.root{--loader-size-xs:rem(18px);--loader-size-sm:rem(22px);--loader-size-md:rem(36px);--loader-size-lg:rem(44px);--loader-size-xl:rem(58px);--loader-size:var(--loader-size-sm);--loader-color:var(--color-primary-filled)}
 </style>

package/dist/runtime/components/loader/loader.vue.d.ts

@@ -1,7 +1,7 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
 export interface LoaderProps {
-    size?: NuanceSize | string;
+    size?: NuanceSize | `compact-${NuanceSize}` | string;
     color?: NuanceColor | string;
     type?: LoaderType;
 }

package/dist/runtime/components/tree/_ui/tree-item.d.vue.ts

@@ -1,19 +1,7 @@
 import type { TreeItem } from '../model.js';
-export interface TreeItemProps<T extends string = string> {
-    item: TreeItem<T>;
+export interface TreeItemProps extends TreeItem {
     level: number;
 }
-declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TreeItemProps<T>> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
+declare const __VLS_export: import("vue").DefineComponent<TreeItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -1,79 +1,54 @@
 <script setup>
 import { useTheme } from "@nui/composals";
-import { getThemeColor, isFalsy } from "@nui/utils";
-import { computed } from "vue";
+import { getThemeColor } from "@nui/utils";
+import { computed, watch } from "vue";
 import Button from "../../button/button.vue";
-import { useRovingFocus } from "../../roving-focus";
+import Loader from "../../loader/loader.vue";
 import RovingFocusItem from "../../roving-focus/roving-focus-item.vue";
+import UTransition from "../../transition/transition.vue";
 import { useTreeState } from "../lib/context";
-const { item, level } = defineProps({
-  item: { type: Object, required: true },
-  level: { type: Number, required: true }
-});
+import { useTreeItemHandlers } from "../lib/item-handlers";
 const {
+  type = "file",
   icon = "gravity-ui:folder",
   trailingIcon = "gravity-ui:folder-open",
-  value,
-  label,
-  children,
+  path,
+  name,
+  level,
   disabled
-} = item;
+} = defineProps({
+  level: { type: Number, required: true },
+  icon: { type: String, required: false },
+  path: { type: String, required: true },
+  name: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  children: { type: Array, required: false }
+});
 const { value: theme } = useTheme();
-const isFolder = computed(() => !isFalsy(children));
+const isFolder = computed(() => type === "directory");
 const ctx = useTreeState();
-const selected = computed(() => ctx.selected.value.includes(value));
-const expanded = computed(() => ctx.expanded.value.includes(value));
-const active = computed(() => ctx.active.value === value);
-const { icon: fileIcon, color } = ctx.iconResolver(item);
-const { focus } = useRovingFocus();
-function handleClick(event) {
-  if (event.shiftKey)
-    ctx.toggle("select", value, "range");
-  else if (event.ctrlKey || event.metaKey)
-    ctx.toggle("select", value, "multiple");
-  else
-    ctx.toggle("select", value, "single");
-  if (isFolder.value && !event.ctrlKey && !event.metaKey && !event.shiftKey)
-    ctx.toggle("expand", value);
-}
-function handleKeyDown(event) {
-  switch (event.key) {
-    // Arrow Left - закрыть папку или перейти к родителю
-    case "ArrowLeft": {
-      event.preventDefault();
-      if (isFolder.value && expanded.value)
-        return ctx.off("expand", value);
-      else
-        return focus("prev", event.currentTarget);
-    }
-    // Arrow Right - открыть папку или перейти к первому ребенку
-    case "ArrowRight": {
-      event.preventDefault();
-      if (isFolder.value && !expanded.value)
-        return ctx.on("expand", value);
-      else if (expanded.value)
-        return focus("next", event.currentTarget);
-      break;
-    }
-    // Enter/Space - выбор элемента
-    case "Enter": {
-      ctx.on("select", value);
-      return ctx.setActive(value);
-    }
-    case " ": {
-      event.preventDefault();
-      if (event.shiftKey)
-        return ctx.toggle("select", value, "range");
-      else if (event.ctrlKey || event.metaKey)
-        return ctx.toggle("select", value, "multiple");
-      return ctx.toggle("select", value, "single");
+const selected = computed(() => ctx.selected.value.includes(path));
+const expanded = computed(() => ctx.expanded.value.includes(path));
+const active = computed(() => ctx.active.value === path);
+const { data, pending, execute } = ctx.loadBranch(path);
+watch(expanded, (expanded2) => {
+  if (expanded2) {
+    try {
+      execute();
+    } catch (e) {
+      console.error(e);
+      ctx.off("expand", path);
     }
   }
-}
+}, { immediate: true });
+const { icon: fileIcon, color } = ctx.iconResolver(type, name, path, disabled);
+const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expanded);
 </script>
 
 <template>
-	<li :class='$style.root' role='presentation'>
+	<li :class='$style.item' role='presentation'>
 		<RovingFocusItem>
 			<Button
 				:size='ctx.size'
@@ -81,55 +56,80 @@ function handleKeyDown(event) {
 				:variant='ctx.variant'
 				:disabled
 				role='treeitem'
-				:classes='{
-  root: $style.button,
-  label: $style.label,
-  inner: $style.inner,
-  section: $style.section
-}'
+				:classes='$style'
 				:aria-level='level'
 				:aria-selected='selected'
-				:mod='{ active, selected, level }'
+				:mod='{ active, selected, "tree-item": path }'
 				@click.prevent='handleClick'
 				@keydown.prevent='handleKeyDown'
 			>
-				<template v-if='isFolder' #leftSection>
-					<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
-					<Icon v-else :class='$style.icon' :name='icon' />
-				</template>
-				<template v-else #leftSection>
-					<Icon
-						:class='$style.icon'
-						:name='fileIcon'
-						:style='{ color: color && getThemeColor(color, theme) }'
-					/>
+				<template #leftSection>
+					<template v-if='pending'>
+						<Loader :class='$style.icon' />
+					</template>
+
+					<template v-else-if='isFolder'>
+						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
+						<Icon v-else :class='$style.icon' :name='icon' />
+					</template>
+
+					<template v-else>
+						<Icon
+							:class='$style.icon'
+							:name='fileIcon'
+							:style='{ color: color && getThemeColor(color, theme) }'
+						/>
+					</template>
 				</template>
-				{{ label ?? value }}
+
+				{{ name ?? path }}
 			</Button>
 		</RovingFocusItem>
 
-		<ul
-			v-if='expanded && item.children && item.children.length > 0'
-			:class='$style.list'
-			role='group'
-		>
-			<TreeItem
-				v-for='child in item.children'
-				:key='child.value'
-				:item='child'
-				:level='level + 1'
-			/>
-		</ul>
+		<UTransition name='scale-y'>
+			<ul
+				v-if='expanded && data && data.length > 0'
+				:class='$style.list'
+				role='group'
+			>
+				<TreeItem
+					v-for='child in data'
+					:key='child.path'
+					v-bind='child'
+					:path='child.path'
+					:level='level + 1'
+				/>
+			</ul>
+		</UTransition>
 	</li>
 </template>
 
 <style module lang="postcss">
-.root {
+.item {
 	display: grid;
 	gap: .25rem;
 }
 
-.button {
+.icon {
+	--loader-size: var(--tree-icon-size);
+
+	width: var(--tree-icon-size);
+	height: var(--tree-icon-size);
+}
+
+.list {
+	display: grid;
+	gap: .25rem;
+
+	margin-inline-start: 1rem;
+
+	padding-inline-start: .75rem;
+	border-left: 1px solid var(--color-gray-4);
+
+	list-style: none;
+}
+
+.root {
 	.inner {
 		display: grid;
 		grid-template-columns: auto 1fr auto;
@@ -152,21 +152,4 @@ function handleKeyDown(event) {
 		background: alpha(var(--button-color), .1);
 	}
 }
-
-.icon {
-	width: var(--tree-icon-size);
-	height: var(--tree-icon-size);
-}
-
-.list {
-	display: grid;
-	gap: .25rem;
-
-	margin-inline-start: 1rem;
-
-	padding-inline-start: .75rem;
-	border-left: 1px solid var(--color-gray-4);
-
-	list-style: none;
-}
 </style>

package/dist/runtime/components/tree/_ui/tree-item.vue.d.ts

@@ -1,19 +1,7 @@
 import type { TreeItem } from '../model.js';
-export interface TreeItemProps<T extends string = string> {
-    item: TreeItem<T>;
+export interface TreeItemProps extends TreeItem {
     level: number;
 }
-declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TreeItemProps<T>> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
+declare const __VLS_export: import("vue").DefineComponent<TreeItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};

package/dist/runtime/components/tree/_ui/tree-root.d.vue.ts

@@ -1,44 +1,42 @@
 import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
-import type { TreeIconResolver, TreeModels } from '../model.js';
-export type TreeRootProps<T extends string = string> = RovingFocusProps & {
-    iconResolver?: TreeIconResolver<T>;
+import type { TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
+export type TreeRootProps = RovingFocusProps & {
+    iconResolver?: TreeIconResolver;
     removable?: boolean;
     selectable?: boolean;
+    loadBranch: TreeLoader;
     variant?: ButtonProps['variant'];
     color?: ButtonProps['color'];
     size?: ButtonProps['size'];
 };
-declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(RovingFocusProps & {
-        iconResolver?: TreeIconResolver<T> | undefined;
-        removable?: boolean;
-        selectable?: boolean;
-        variant?: ButtonProps["variant"];
-        color?: ButtonProps["color"];
-        size?: ButtonProps["size"];
-    } & {
-        tree: TreeModels<T>["tree"];
-        active?: TreeModels<T>["active"];
-        selected?: TreeModels<T>["selected"];
-        expanded?: TreeModels<T>["expanded"];
-    }) & {
-        "onUpdate:tree"?: ((value: import("@nui/components").TreeItem<T>[]) => any) | undefined;
-        "onUpdate:active"?: ((value: T | null) => any) | undefined;
-        "onUpdate:selected"?: ((value: T[]) => any) | undefined;
-        "onUpdate:expanded"?: ((value: T[]) => any) | undefined;
-    }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        default?: (props: {}) => any;
-    };
-    emit: ((evt: "update:tree", value: import("@nui/components").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+type __VLS_Props = TreeRootProps;
+type __VLS_ModelProps = {
+    'active'?: TreeModels['active'];
+    'selected'?: TreeModels['selected'];
+    'expanded'?: TreeModels['expanded'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
 };
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (path: string[]) => any;
+    "update:active": (value: string | null) => any;
+    "update:selected": (value: string[]) => any;
+    "update:expanded": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((path: string[]) => any) | undefined;
+    "onUpdate:active"?: ((value: string | null) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useStyleResolver } from "@nui/composals";
-import { getSize, removeTreeNodes } from "@nui/utils";
+import { getSize } from "@nui/utils";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import { useTemplateRef } from "vue";
 import Box from "../../box.vue";
@@ -15,7 +15,8 @@ const {
   size = "compact-sm",
   iconResolver = () => ({ icon: "gravity-ui:file" }),
   removable = false,
-  selectable = false
+  selectable = false,
+  loadBranch
 } = defineProps({
   loop: { type: Boolean, required: false },
   orientation: { type: String, required: false },
@@ -23,12 +24,13 @@ const {
   iconResolver: { type: Function, required: false },
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
+  loadBranch: { type: Function, required: true },
   variant: { type: String, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false }
 });
-const tree = defineModel("tree", { type: Array, ...{ required: true } });
-const active = defineModel("active", { type: null, ...{ default: null } });
+const emit = defineEmits(["delete"]);
+const active = defineModel("active", { type: [String, null], ...{ default: null } });
 const selected = defineModel("selected", { type: Array, ...{ default: [] } });
 const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
 const style = useStyleResolver(() => ({
@@ -37,7 +39,7 @@ const style = useStyleResolver(() => ({
 const root = useTemplateRef("parent");
 onClickOutside(root, () => selected.value = []);
 useProvideTreeState({
-  tree,
+  root,
   active,
   selected,
   expanded,
@@ -45,13 +47,14 @@ useProvideTreeState({
   size,
   color,
   variant,
-  selectable
+  selectable,
+  loadBranch
 });
 if (removable) {
   useEventListener(root, "keydown", (event) => {
     if (event.key === "Delete") {
       event.preventDefault();
-      return tree.value = removeTreeNodes(tree.value, selected.value);
+      emit("delete", selected.value);
     }
   });
 }
@@ -65,7 +68,7 @@ if (removable) {
 			role='tree'
 			:style
 			:class='$style.root'
-			@keydown.esc.prevent='selected.value = []'
+			@keydown.esc.prevent='selected = []'
 		>
 			<slot />
 		</Box>

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -1,44 +1,42 @@
 import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
-import type { TreeIconResolver, TreeModels } from '../model.js';
-export type TreeRootProps<T extends string = string> = RovingFocusProps & {
-    iconResolver?: TreeIconResolver<T>;
+import type { TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
+export type TreeRootProps = RovingFocusProps & {
+    iconResolver?: TreeIconResolver;
     removable?: boolean;
     selectable?: boolean;
+    loadBranch: TreeLoader;
     variant?: ButtonProps['variant'];
     color?: ButtonProps['color'];
     size?: ButtonProps['size'];
 };
-declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(RovingFocusProps & {
-        iconResolver?: TreeIconResolver<T> | undefined;
-        removable?: boolean;
-        selectable?: boolean;
-        variant?: ButtonProps["variant"];
-        color?: ButtonProps["color"];
-        size?: ButtonProps["size"];
-    } & {
-        tree: TreeModels<T>["tree"];
-        active?: TreeModels<T>["active"];
-        selected?: TreeModels<T>["selected"];
-        expanded?: TreeModels<T>["expanded"];
-    }) & {
-        "onUpdate:tree"?: ((value: import("@nui/components").TreeItem<T>[]) => any) | undefined;
-        "onUpdate:active"?: ((value: T | null) => any) | undefined;
-        "onUpdate:selected"?: ((value: T[]) => any) | undefined;
-        "onUpdate:expanded"?: ((value: T[]) => any) | undefined;
-    }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        default?: (props: {}) => any;
-    };
-    emit: ((evt: "update:tree", value: import("@nui/components").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+type __VLS_Props = TreeRootProps;
+type __VLS_ModelProps = {
+    'active'?: TreeModels['active'];
+    'selected'?: TreeModels['selected'];
+    'expanded'?: TreeModels['expanded'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
 };
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (path: string[]) => any;
+    "update:active": (value: string | null) => any;
+    "update:selected": (value: string[]) => any;
+    "update:expanded": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((path: string[]) => any) | undefined;
+    "onUpdate:active"?: ((value: string | null) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/tree/lib/context.d.ts

@@ -1,32 +1,26 @@
-import type { ButtonProps, TreeIconResolver, TreeItem } from '@nui/components';
-import type { ModelRef } from 'vue';
+import type { ButtonProps } from '@nui/components';
+import type { ModelRef, ShallowRef } from 'vue';
+import type { TreeIconResolver, TreeLoader } from '../model.js';
 type EventType = 'select' | 'expand';
 type SelectMode = 'single' | 'multiple' | 'range';
-export interface TreeContext<T extends string = string> {
-    tree: ModelRef<TreeItem<T>[]>;
-    active: ModelRef<T | null>;
-    selected: ModelRef<T[]>;
-    expanded: ModelRef<T[]>;
-    iconResolver: TreeIconResolver<T>;
+export interface TreeContext {
+    root: ShallowRef<HTMLUListElement | null>;
+    active: ModelRef<string | null>;
+    selected: ModelRef<string[]>;
+    expanded: ModelRef<string[]>;
+    iconResolver: TreeIconResolver;
+    loadBranch: TreeLoader;
     selectable: boolean;
     variant: ButtonProps['variant'];
     color: ButtonProps['color'];
     size: ButtonProps['size'];
 }
-export interface TreeState<T extends string = string> {
-    active: ModelRef<T | null>;
-    selected: ModelRef<T[]>;
-    expanded: ModelRef<T[]>;
-    iconResolver: TreeIconResolver<T>;
-    toggle: (type: EventType, value: T, mode?: SelectMode) => void;
-    on: ((type: 'expand', value: T) => void) & ((type: 'select', value: T, mode?: SelectMode) => void);
-    off: (type: EventType, value: T) => void;
-    setActive: (value: T | null) => void;
-    selectable: boolean;
-    variant: ButtonProps['variant'];
-    color: ButtonProps['color'];
-    size: ButtonProps['size'];
+export interface TreeState extends Omit<TreeContext, 'root'> {
+    toggle: (type: EventType, path: string, mode?: SelectMode) => void;
+    on: ((type: 'expand', path: string) => void) & ((type: 'select', path: string, mode?: SelectMode) => void);
+    off: (type: EventType, path: string) => void;
+    setActive: (path: string | null) => void;
 }
-export declare function useProvideTreeState<T extends string = string>(ctx: TreeContext<T>): TreeState<T>;
-export declare function useTreeState<T extends string = string>(): TreeState<T>;
+export declare const useProvideTreeState: (args_0: TreeContext) => TreeState;
+export declare const useTreeState: () => TreeState;
 export {};

package/dist/runtime/components/tree/lib/context.js

@@ -1,8 +1,8 @@
 import { createStrictInjection } from "@nui/helpers";
-import { getBranchChildren, getTreeItemsBetween } from "@nui/utils";
+import { unrefElement } from "@vueuse/core";
 const injectionKey = Symbol("nui-tree");
 const [useProvide, useState] = createStrictInjection(({
-  tree,
+  root,
   active,
   selected,
   expanded,
@@ -11,70 +11,82 @@ const [useProvide, useState] = createStrictInjection(({
   ...rest
 }) => {
   const setActive = (value) => active.value = value;
-  function on(type, value, mode) {
+  function on(type, path, mode) {
     if (type === "select") {
-      setActive(value);
+      setActive(path);
       if (!selectable)
         return;
       switch (mode) {
         case "single":
-          return selected.value = [value];
+          return selected.value = [path];
         case "multiple": {
-          const exist = selected.value.includes(value);
+          const exist = selected.value.includes(path);
           if (!exist)
-            selected.value = [...selected.value, value];
+            selected.value = [...selected.value, path];
           return;
         }
         case "range": {
-          if (!active.value || active.value === value)
+          if (!active.value || active.value === path || !root.value)
             return;
-          const range = getTreeItemsBetween(tree.value, active.value, value);
-          return selected.value = [.../* @__PURE__ */ new Set([...selected.value, ...range])];
+          const elements = unrefElement(root)?.querySelectorAll("[data-tree-item]");
+          if (!elements)
+            return;
+          const newSelected = /* @__PURE__ */ new Set();
+          let startIx = -1;
+          for (const [ix, elem] of elements.entries()) {
+            const elemPath = elem.getAttribute("data-tree-item");
+            if (!elemPath)
+              continue;
+            const isBoundary = elemPath === active.value || elemPath === path;
+            if (isBoundary || startIx >= 0)
+              newSelected.add(elemPath);
+            if (isBoundary) {
+              if (startIx >= 0)
+                break;
+              startIx = ix;
+            }
+          }
+          return selected.value = [...newSelected];
         }
         default:
-          return selected.value = [value];
+          return selected.value = [path];
       }
     }
     if (type === "expand") {
-      const exist = expanded.value.includes(value);
-      if (!exist)
-        expanded.value = [...expanded.value, value];
+      if (!expanded.value.includes(path))
+        expanded.value = [...expanded.value, path];
       return;
     }
     return console.warn(`Unknown target type in NuiTree: ${type}`);
   }
-  const off = (type, value) => {
+  const off = (type, path) => {
     switch (type) {
       case "select": {
-        selected.value = selected.value.filter((i) => i !== value);
-        if (active.value === value)
+        selected.value = selected.value.filter((i) => i !== path);
+        if (active.value === path)
           active.value = selected.value[0] ?? null;
         return;
       }
-      case "expand": {
-        const children = new Set(getBranchChildren(tree.value, value));
-        return expanded.value = expanded.value.filter((v) => v !== value && !children.has(v));
-      }
+      case "expand":
+        return expanded.value = expanded.value.filter((v) => !v.startsWith(path));
       default:
         return console.warn(`Unknown target type in NuiTree: ${type}`);
     }
   };
-  const toggle = (type, value, mode = "single") => {
+  const toggle = (type, path, mode = "single") => {
     switch (type) {
       case "select": {
-        const isSelected = selected.value.includes(value);
+        const isSelected = selected.value.includes(path);
         if (mode === "single")
-          return on(type, value, mode);
+          return on(type, path, mode);
         if (mode === "multiple")
-          return isSelected ? off(type, value) : on(type, value, mode);
+          return isSelected ? off(type, path) : on(type, path, mode);
         if (mode === "range")
-          return on(type, value, mode);
+          return on(type, path, mode);
         return;
       }
-      case "expand": {
-        const isExpanded = expanded.value.includes(value);
-        return isExpanded ? off(type, value) : on(type, value);
-      }
+      case "expand":
+        return expanded.value.includes(path) ? off(type, path) : on(type, path);
       default:
         console.warn(`Unknown target type in NuiTree: ${type}`);
     }
@@ -95,9 +107,5 @@ const [useProvide, useState] = createStrictInjection(({
   injectionKey,
   name: "TreeState"
 });
-export function useProvideTreeState(ctx) {
-  return useProvide(ctx);
-}
-export function useTreeState() {
-  return useState();
-}
+export const useProvideTreeState = useProvide;
+export const useTreeState = useState;

package/dist/runtime/components/tree/lib/item-handlers.d.ts

@@ -0,0 +1,5 @@
+import type { Ref } from 'vue';
+export declare function useTreeItemHandlers(path: string, isFolder: Ref<boolean>, expanded: Ref<boolean>): {
+    handleClick: (event: MouseEvent) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+};

package/dist/runtime/components/tree/lib/item-handlers.js

@@ -0,0 +1,54 @@
+import { useRovingFocus } from "@nui/components";
+import { useTreeState } from "./context.js";
+export function useTreeItemHandlers(path, isFolder, expanded) {
+  const ctx = useTreeState();
+  const { focus } = useRovingFocus();
+  function handleClick(event) {
+    if (event.shiftKey)
+      ctx.toggle("select", path, "range");
+    else if (event.ctrlKey || event.metaKey)
+      ctx.toggle("select", path, "multiple");
+    else
+      ctx.toggle("select", path, "single");
+    if (isFolder.value && !event.ctrlKey && !event.metaKey && !event.shiftKey)
+      ctx.toggle("expand", path);
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
+      // Arrow Left - закрыть папку или перейти к родителю
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (isFolder.value && expanded.value)
+          return ctx.off("expand", path);
+        else
+          return focus("prev", event.currentTarget);
+      }
+      // Arrow Right - открыть папку или перейти к первому ребенку
+      case "ArrowRight": {
+        event.preventDefault();
+        if (isFolder.value && !expanded.value)
+          return ctx.on("expand", path);
+        else if (expanded.value)
+          return focus("next", event.currentTarget);
+        break;
+      }
+      // Enter/Space - выбор элемента
+      case "Enter": {
+        ctx.on("select", path);
+        return ctx.setActive(path);
+      }
+      case " ": {
+        event.preventDefault();
+        if (event.shiftKey)
+          return ctx.toggle("select", path, "range");
+        else if (event.ctrlKey || event.metaKey)
+          return ctx.toggle("select", path, "multiple");
+        return ctx.toggle("select", path, "single");
+      }
+    }
+  }
+  return {
+    handleClick,
+    handleKeyDown
+  };
+}

package/dist/runtime/components/tree/model.d.ts

@@ -1,33 +1,39 @@
 import type { NuanceColor } from '@nui/types';
-export interface TreeModels<T extends string = string> {
-    active: T | null;
-    tree: TreeItem<T>[];
-    selected: T[];
-    expanded: T[];
+import type { AsyncData } from '#app';
+export interface TreeModels {
+    active: string | null;
+    tree: TreeItem[];
+    selected: string[];
+    expanded: string[];
 }
-export interface TreeItem<T extends string = string> {
+export interface TreeEmits {
+    delete: [path: string[]];
+}
+/**
+ *  Required pass instance of `useFetch`/`useAsyncData` with `{ immediate: false }`
+ *  Root path will be queried immediate with path `/`
+ */
+export type TreeLoader = (path: string) => AsyncData<TreeItem[], unknown>;
+export type TreeItemType = 'file' | 'directory';
+export interface TreeItem {
     /** @IconifyIcon */
     icon?: string;
-    /** Value given to this item */
-    value: T;
-    /** Item label */
-    label?: string;
+    /** Path given to this item */
+    path: string;
+    /** Item name */
+    name?: string;
     /** @IconifyIcon */
     trailingIcon?: string;
-    /** Item default expanded */
-    expanded?: boolean;
     /** Item disabled state */
     disabled?: boolean;
-    /** Slot name */
-    slot?: string;
-    /** Item children */
-    children?: TreeItem<T>[];
-    /** Fires when item is selected */
-    onSelect?: (item: TreeItem<T>) => void;
-    /** Fires when item is toggled */
-    onToggle?: (item: TreeItem<T>) => void;
+    /**
+     *  Type of item
+     *  @default `file`
+     */
+    type?: TreeItemType;
+    children?: TreeItem[];
 }
-export type TreeIconResolver<T extends string = string> = (item: TreeItem<T>) => {
+export type TreeIconResolver = (type: TreeItemType, name?: string, path?: string, disabled?: boolean) => {
     icon: string;
     color?: NuanceColor;
 };

package/dist/runtime/components/tree/tree.d.vue.ts

@@ -1,28 +1,24 @@
 import type { TreeRootProps } from './_ui/tree-root.vue.js';
 import type { TreeModels } from './model.js';
-export interface TreeProps<T extends string = string> extends TreeRootProps<T> {
+export interface TreeProps extends TreeRootProps {
 }
-declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(TreeProps<T> & {
-        tree: TreeModels<T>["tree"];
-        active?: TreeModels<T>["active"];
-        selected?: TreeModels<T>["selected"];
-        expanded?: TreeModels<T>["expanded"];
-    }) & {
-        "onUpdate:tree"?: ((value: import("./model.js").TreeItem<T>[]) => any) | undefined;
-        "onUpdate:active"?: ((value: T | null) => any) | undefined;
-        "onUpdate:selected"?: ((value: T[]) => any) | undefined;
-        "onUpdate:expanded"?: ((value: T[]) => any) | undefined;
-    }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: ((evt: "update:tree", value: import("./model.js").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+type __VLS_Props = TreeProps;
+type __VLS_ModelProps = {
+    'active'?: TreeModels['active'];
+    'selected'?: TreeModels['selected'];
+    'expanded'?: TreeModels['expanded'];
 };
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (path: string[]) => any;
+    "update:active": (value: string | null) => any;
+    "update:selected": (value: string[]) => any;
+    "update:expanded": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((path: string[]) => any) | undefined;
+    "onUpdate:active"?: ((value: string | null) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};

package/dist/runtime/components/tree/tree.vue

@@ -1,11 +1,12 @@
 <script setup>
+import { onMounted } from "vue";
 import UTreeItem from "./_ui/tree-item.vue";
 import TreeRoot from "./_ui/tree-root.vue";
-import { getExpandedItems } from "./lib/get-default";
 const {
   color,
   variant = "subtle",
   size = "compact-sm",
+  loadBranch,
   ...props
 } = defineProps({
   loop: { type: Boolean, required: false },
@@ -14,32 +15,36 @@ const {
   iconResolver: { type: Function, required: false },
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
+  loadBranch: { type: Function, required: true },
   variant: { type: String, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false }
 });
-const tree = defineModel("tree", { type: Array, ...{ required: true } });
-const active = defineModel("active", { type: null, ...{ default: null } });
+defineEmits(["delete"]);
+const active = defineModel("active", { type: [String, null], ...{ default: null } });
 const selected = defineModel("selected", { type: Array, ...{ default: [] } });
 const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
-expanded.value = getExpandedItems(tree.value);
+const { data: root, execute } = loadBranch("/");
+onMounted(execute);
 </script>
 
 <template>
 	<TreeRoot
 		v-bind='props'
-		v-model:tree='tree'
 		v-model:active='active'
 		v-model:selected='selected'
 		v-model:expanded='expanded'
+		:load-branch
 		:size
 		:color
 		:variant
+		@delete='(path) => $emit("delete", path)'
 	>
 		<UTreeItem
-			v-for='item in tree'
-			:key='item.value'
-			:item
+			v-for='item in root'
+			:key='item.path'
+			v-bind='item'
+			:path='item.path'
 			:level='1'
 		/>
 	</TreeRoot>

package/dist/runtime/components/tree/tree.vue.d.ts

@@ -1,28 +1,24 @@
 import type { TreeRootProps } from './_ui/tree-root.vue.js';
 import type { TreeModels } from './model.js';
-export interface TreeProps<T extends string = string> extends TreeRootProps<T> {
+export interface TreeProps extends TreeRootProps {
 }
-declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(TreeProps<T> & {
-        tree: TreeModels<T>["tree"];
-        active?: TreeModels<T>["active"];
-        selected?: TreeModels<T>["selected"];
-        expanded?: TreeModels<T>["expanded"];
-    }) & {
-        "onUpdate:tree"?: ((value: import("./model.js").TreeItem<T>[]) => any) | undefined;
-        "onUpdate:active"?: ((value: T | null) => any) | undefined;
-        "onUpdate:selected"?: ((value: T[]) => any) | undefined;
-        "onUpdate:expanded"?: ((value: T[]) => any) | undefined;
-    }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: ((evt: "update:tree", value: import("./model.js").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+type __VLS_Props = TreeProps;
+type __VLS_ModelProps = {
+    'active'?: TreeModels['active'];
+    'selected'?: TreeModels['selected'];
+    'expanded'?: TreeModels['expanded'];
 };
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (path: string[]) => any;
+    "update:active": (value: string | null) => any;
+    "update:selected": (value: string[]) => any;
+    "update:expanded": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((path: string[]) => any) | undefined;
+    "onUpdate:active"?: ((value: string | null) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};

package/dist/runtime/utils/tree.d.ts

@@ -1,7 +1,7 @@
 /** Represents a tree node with a value and optional children. */
 export interface TreeNode<T extends string = string> {
     /** The value stored in this tree node */
-    value: string;
+    path: string;
     /** Optional array of child nodes */
     children?: TreeNode<T>[];
 }
@@ -28,14 +28,14 @@ export declare function filterTree<Node extends TreeNode = TreeNode>(tree: Node[
  * Searches for a tree item by its value using depth-first search.
  * @template T - The type of node values
  * @param {TreeNode<T>[]} items - The array of tree nodes to search in
- * @param {T} value - The value to search for
+ * @param {T} path - The value to search for
  * @returns {TreeNode<T> | null} The found node or null if not found
  * @example
  * const tree = [{ value: 'folder', children: [{ value: 'file' }] }]
  * findTreeItem(tree, 'file') // { value: 'file' }
  * findTreeItem(tree, 'missing') // null
  */
-export declare function findTreeItem<T extends string = string>(items: TreeNode<T>[], value: T): TreeNode<T> | null;
+export declare function findTreeItem<T extends string = string>(items: TreeNode<T>[], path: T): TreeNode<T> | null;
 /**
  * Flattens a tree structure into a single-level array in depth-first order.
  * @template T - The type of node values
@@ -68,7 +68,7 @@ export declare function flatTree<T extends string = string>(tree: TreeNode<T>[])
  * getBranchChildren(tree, 'folder') // ['file1', 'subfolder', 'file2']
  * getBranchChildren(tree, 'file1') // []
  */
-export declare function getBranchChildren<T extends string = string>(tree: TreeNode<T>[], value: T): T[];
+export declare function getBranchChildren<T extends string = string>(tree: TreeNode<T>[], path: T): T[];
 /**
  * Gets all node values between two specified values (inclusive) in tree traversal order.
  * If start comes after end in traversal order, the range is automatically reversed.
@@ -92,7 +92,7 @@ export declare function getTreeItemsBetween<T extends string = string>(tree: Tre
  * Removes nodes with specified values from the tree, including their subtrees.
  * Returns a new tree without modifying the original.
  *
- * @template T - The type of node values
+ * @template T - The type of node path
  * @param {TreeNode<T>[]} tree - The original tree (array of root nodes)
  * @param {T[]} valuesToRemove - Array of values to remove
  * @returns {TreeNode<T>[]} New tree with specified nodes and their subtrees removed
@@ -104,4 +104,4 @@ export declare function getTreeItemsBetween<T extends string = string>(tree: Tre
  * removeTreeNodes(tree, ['b', 'd']) // [{ value: 'a', children: [{ value: 'c' }] }]
  * removeTreeNodes(tree, ['a']) // [{ value: 'd' }]
  */
-export declare function removeTreeNodes<Node extends TreeNode = TreeNode, Value extends string = string>(tree: Node[], valuesToRemove: Value[]): Node[];
+export declare function removeTreeNodes<Node extends TreeNode = TreeNode, Path extends string = string>(tree: Node[], valuesToRemove: Path[]): Node[];

package/dist/runtime/utils/tree.js

@@ -22,12 +22,12 @@ export function filterTree(tree, predicate) {
   }
   return result;
 }
-export function findTreeItem(items, value) {
+export function findTreeItem(items, path) {
   for (const item of items) {
-    if (item.value === value)
+    if (item.path === path)
       return item;
     if (item.children?.length) {
-      const found = findTreeItem(item.children, value);
+      const found = findTreeItem(item.children, path);
       if (found)
         return found;
     }
@@ -37,14 +37,14 @@ export function findTreeItem(items, value) {
 export function flatTree(tree) {
   return traverse(tree);
 }
-export function getBranchChildren(tree, value) {
+export function getBranchChildren(tree, path) {
   const children = [];
   function findAndExtract(nodes) {
     for (const node of nodes) {
-      if (node.value === value) {
+      if (node.path === path) {
         if (node.children?.length) {
           const extracted = traverse(node.children);
-          children.push(...extracted.map((i) => i.value));
+          children.push(...extracted.map((i) => i.path));
         }
         return true;
       }
@@ -63,11 +63,11 @@ export function getTreeItemsBetween(tree, start, end) {
   let currentIdx = 0;
   function traverseAndFind(nodes) {
     for (const node of nodes) {
-      if (node.value === start)
+      if (node.path === start)
         startIdx = currentIdx;
-      if (node.value === end)
+      if (node.path === end)
         endIdx = currentIdx;
-      result.push(node.value);
+      result.push(node.path);
       currentIdx++;
       if (node.children?.length)
         traverseAndFind(node.children);
@@ -81,5 +81,5 @@ export function getTreeItemsBetween(tree, start, end) {
 }
 export function removeTreeNodes(tree, valuesToRemove) {
   const removeSet = new Set(valuesToRemove);
-  return filterTree(tree, (n) => !removeSet.has(n.value));
+  return filterTree(tree, (n) => !removeSet.has(n.path));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.18",
+	"version": "0.1.19",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",