nuance-ui 0.1.6 → 0.1.8

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

@@ -0,0 +1,102 @@
+import { createStrictInjection } from "@nui/helpers";
+import { getBranchChildren, getTreeItemsBetween } from "@nui/utils";
+const injectionKey = Symbol("nui-tree");
+const [useProvide, useState] = createStrictInjection(({
+  tree,
+  active,
+  selected,
+  expanded,
+  iconResolver
+}) => {
+  const setActive = (value) => active.value = value;
+  function on(type, value, mode) {
+    if (type === "select") {
+      setActive(value);
+      switch (mode) {
+        case "single":
+          return selected.value = [value];
+        case "multiple": {
+          const exist = selected.value.includes(value);
+          if (!exist)
+            selected.value = [...selected.value, value];
+          return;
+        }
+        case "range": {
+          if (!active.value || active.value === value)
+            return;
+          const range = getTreeItemsBetween(tree.value, active.value, value);
+          return selected.value = [.../* @__PURE__ */ new Set([...selected.value, ...range])];
+        }
+        default:
+          return selected.value = [value];
+      }
+    }
+    if (type === "expand") {
+      const exist = expanded.value.includes(value);
+      if (!exist)
+        expanded.value = [...expanded.value, value];
+      return;
+    }
+    return console.warn(`Unknown target type in NuiTree: ${type}`);
+  }
+  const off = (type, value) => {
+    switch (type) {
+      case "select": {
+        selected.value = selected.value.filter((i) => i !== value);
+        if (active.value === value)
+          active.value = selected.value[0] ?? null;
+        return;
+      }
+      case "expand": {
+        const children = getBranchChildren(tree.value, value);
+        return expanded.value = expanded.value.filter((v) => !children.includes(v)).filter((v) => v !== value);
+      }
+      default:
+        return console.warn(`Unknown target type in NuiTree: ${type}`);
+    }
+  };
+  const toggle = (type, value, mode = "single") => {
+    switch (type) {
+      case "select": {
+        const isSelected = selected.value.includes(value);
+        if (mode === "single")
+          return on(type, value, mode);
+        if (mode === "multiple") {
+          if (isSelected)
+            return off(type, value);
+          return on(type, value, mode);
+        }
+        if (mode === "range")
+          return on(type, value, mode);
+        return;
+      }
+      case "expand": {
+        const isExpanded = expanded.value.includes(value);
+        if (isExpanded)
+          return off(type, value);
+        return on(type, value);
+      }
+      default:
+        console.warn(`Unknown target type in NuiTree: ${type}`);
+    }
+  };
+  return {
+    active,
+    selected,
+    expanded,
+    iconResolver,
+    toggle,
+    on,
+    off,
+    setActive
+  };
+}, {
+  injectionKey,
+  name: "TreeState"
+});
+export function useProvideTreeState(ctx) {
+  return useProvide(ctx);
+}
+export function useTreeState() {
+  return useState();
+}

package/dist/runtime/components/tree/lib/get-default.d.ts

@@ -0,0 +1,7 @@
+import type { TreeItem } from '../model.js';
+/**
+ * Получает все элементы дерева с expanded: true
+ * @param items - массив элементов дерева
+ * @returns массив value элементов с expanded: true
+ */
+export declare function getExpandedItems<T extends string = string>(items: TreeItem<T>[]): T[];

package/dist/runtime/components/tree/lib/get-default.js

@@ -0,0 +1,10 @@
+export function getExpandedItems(items) {
+  const result = [];
+  for (const item of items) {
+    if (item.expanded === true)
+      result.push(item.value);
+    if (item.children && item.children.length > 0)
+      result.push(...getExpandedItems(item.children));
+  }
+  return result;
+}

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

@@ -0,0 +1,33 @@
+import type { NuanceColor } from '@nui/types';
+export interface TreeModels<T extends string = string> {
+    active: T | null;
+    tree: TreeItem<T>[];
+    selected: T[];
+    expanded: T[];
+}
+export interface TreeItem<T extends string = string> {
+    /** @IconifyIcon */
+    icon?: string;
+    /** Value given to this item */
+    value: T;
+    /** Item label */
+    label?: 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;
+}
+export type TreeIconResolver<T extends string = string> = (item: TreeItem<T>) => {
+    icon: string;
+    color?: NuanceColor;
+};

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

@@ -0,0 +1,23 @@
+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> {
+}
+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"];
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((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").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>;
+};
+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

@@ -0,0 +1,36 @@
+<script setup>
+import { unref } from "vue";
+import UTreeItem from "./_ui/tree-item.vue";
+import TreeRoot from "./_ui/tree-root.vue";
+import { getExpandedItems } from "./lib/get-default";
+const props = defineProps({
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false },
+  size: { type: String, required: false },
+  iconResolver: { type: Function, required: false },
+  removable: { type: Boolean, required: false }
+});
+const tree = defineModel("tree", { type: Array, ...{ required: true } });
+const active = defineModel("active", { type: null, ...{ default: null } });
+const selected = defineModel("selected", { type: Array, ...{ default: [] } });
+const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
+expanded.value = getExpandedItems(tree.value);
+</script>
+
+<template>
+	<TreeRoot
+		v-bind='props'
+		v-model:tree='tree'
+		v-model:active='active'
+		v-model:selected='selected'
+		v-model:expanded='expanded'
+	>
+		<UTreeItem
+			v-for='item in unref(tree)'
+			:key='item.value'
+			:item
+			:level='1'
+		/>
+	</TreeRoot>
+</template>

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

@@ -0,0 +1,23 @@
+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> {
+}
+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"];
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((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").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>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/composals/index.d.ts

@@ -1,4 +1,3 @@
 export * from './use-active-link.js';
-export * from './use-mod.js';
 export * from './use-style-resolver.js';
 export * from './use-theme.js';

package/dist/runtime/composals/index.js

@@ -1,4 +1,3 @@
 export * from "./use-active-link.js";
-export * from "./use-mod.js";
 export * from "./use-style-resolver.js";
 export * from "./use-theme.js";

package/dist/runtime/utils/get-mod.d.ts

@@ -0,0 +1,2 @@
+export type Mod = Record<string, any>;
+export declare function getMod(props: Mod | Mod[]): Mod;

package/dist/runtime/{composals/use-mod.js → utils/get-mod.js}

@@ -1,7 +1,6 @@
-import { isFalsy } from "@nui/utils";
-import { computed } from "vue";
+import { isFalsy } from "./boolean/is-falsy.js";
 const transformKey = (key) => key.startsWith("data-") ? key : `data-${key}`;
-function getMod(props) {
+export function getMod(props) {
   if (Array.isArray(props)) {
     return props.filter((i) => !isFalsy(i)).reduce((acc, item) => ({ ...acc, ...getMod(item) }), {});
   }
@@ -13,13 +12,3 @@ function getMod(props) {
     return acc;
   }, {});
 }
-export function useMod(mod) {
-  return computed(() => {
-    if (!mod)
-      return null;
-    if (Array.isArray(mod)) {
-      return mod.filter((i) => !isFalsy(i)).reduce((acc, value) => ({ ...acc, ...getMod(value) }), {});
-    }
-    return getMod(mod);
-  });
-}

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

@@ -1,7 +1,9 @@
 export { isFalsy } from './boolean/is-falsy.js';
 export { getGradient } from './color-functions/get-gradient.js';
 export { em, rem } from './converters/rem.js';
+export * from './get-mod.js';
 export { getSafeId } from './get-safe-id.js';
 export * from './get-size/get-size.js';
 export { getThemeColor, parseThemeColor } from './parse-theme-color/parse-theme-color.js';
+export * from './tree.js';
 export { createVariantColorResolver } from './vars-resolver/create-variant-color-resolver.js';

package/dist/runtime/utils/index.js

@@ -1,7 +1,9 @@
 export { isFalsy } from "./boolean/is-falsy.js";
 export { getGradient } from "./color-functions/get-gradient.js";
 export { em, rem } from "./converters/rem.js";
+export * from "./get-mod.js";
 export { getSafeId } from "./get-safe-id.js";
 export * from "./get-size/get-size.js";
 export { getThemeColor, parseThemeColor } from "./parse-theme-color/parse-theme-color.js";
+export * from "./tree.js";
 export { createVariantColorResolver } from "./vars-resolver/create-variant-color-resolver.js";

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

@@ -0,0 +1,88 @@
+/** 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;
+    /** Optional array of child nodes */
+    children?: TreeNode<T>[];
+}
+/**
+ * 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
+ * @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;
+/**
+ * Flattens a tree structure into a single-level array in depth-first order.
+ * @template T - The type of node values
+ * @param {TreeNode<T>[]} tree - The tree to flatten
+ * @returns {TreeNode<T>[]} Flattened array containing all nodes
+ * @example
+ * const tree = [
+ *   { value: 'root', children: [
+ *     { value: 'child1' },
+ *     { value: 'child2' }
+ *   ]}
+ * ]
+ * flatTree(tree) // [{ value: 'root', ... }, { value: 'child1' }, { value: 'child2' }]
+ */
+export declare function flatTree<T extends string = string>(tree: TreeNode<T>[]): TreeNode<T>[];
+/**
+ * Gets all descendant values of a specific node in the tree.
+ *
+ * @template T - The type of node values
+ * @param {TreeNode<T>[]} tree - The tree to search in
+ * @param {T} value - The value of the parent node
+ * @returns {T[]} Array of all descendant values (empty if node not found or has no children)
+ * @example
+ * const tree = [
+ *   { value: 'folder', children: [
+ *     { value: 'file1' },
+ *     { value: 'subfolder', children: [{ value: 'file2' }] }
+ *   ]}
+ * ]
+ * getBranchChildren(tree, 'folder') // ['file1', 'subfolder', 'file2']
+ * getBranchChildren(tree, 'file1') // []
+ */
+export declare function getBranchChildren<T extends string = string>(tree: TreeNode<T>[], value: 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.
+ * Uses a single-pass algorithm that flattens and searches simultaneously.
+ * @template T - The type of node values
+ * @param {TreeNode<T>[]} tree - The tree to search in
+ * @param {T} start - The starting value
+ * @param {T} end - The ending value
+ * @returns {T[]} Array of values between start and end (inclusive), empty if either value not found
+ * @example
+ * const tree = [
+ *   { value: 'a', children: [{ value: 'b' }, { value: 'c' }] },
+ *   { value: 'd' }
+ * ]
+ * getItemsBetween(tree, 'b', 'd') // ['b', 'c', 'd']
+ * getItemsBetween(tree, 'd', 'b') // ['b', 'c', 'd'] (auto-reversed)
+ * getItemsBetween(tree, 'a', 'missing') // []
+ */
+export declare function getTreeItemsBetween<T extends string = string>(tree: TreeNode<T>[], start: T, end: T): T[];
+/**
+ * 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
+ * @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
+ * @example
+ * const tree = [
+ *   { value: 'a', children: [{ value: 'b' }, { value: 'c' }] },
+ *   { value: 'd' }
+ * ]
+ * 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[];

package/dist/runtime/utils/tree.js

@@ -0,0 +1,85 @@
+function traverse(nodes) {
+  const result = [];
+  for (const node of nodes) {
+    result.push(node);
+    if (node.children?.length)
+      result.push(...traverse(node.children));
+  }
+  return result;
+}
+export function findTreeItem(items, value) {
+  for (const item of items) {
+    if (item.value === value)
+      return item;
+    if (item.children?.length) {
+      const found = findTreeItem(item.children, value);
+      if (found)
+        return found;
+    }
+  }
+  return null;
+}
+export function flatTree(tree) {
+  return traverse(tree);
+}
+export function getBranchChildren(tree, value) {
+  const children = [];
+  function findAndExtract(nodes) {
+    for (const node of nodes) {
+      if (node.value === value) {
+        if (node.children?.length) {
+          const extracted = traverse(node.children);
+          children.push(...extracted.map((i) => i.value));
+        }
+        return true;
+      }
+      if (node.children?.length && findAndExtract(node.children))
+        return true;
+    }
+    return false;
+  }
+  findAndExtract(tree);
+  return children;
+}
+export function getTreeItemsBetween(tree, start, end) {
+  const result = [];
+  let startIdx = -1;
+  let endIdx = -1;
+  let currentIdx = 0;
+  function traverseAndFind(nodes) {
+    for (const node of nodes) {
+      if (node.value === start)
+        startIdx = currentIdx;
+      if (node.value === end)
+        endIdx = currentIdx;
+      result.push(node.value);
+      currentIdx++;
+      if (node.children?.length)
+        traverseAndFind(node.children);
+    }
+  }
+  traverseAndFind(tree);
+  if (startIdx === -1 || endIdx === -1)
+    return [];
+  const [from, to] = startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
+  return result.slice(from, to + 1);
+}
+export function removeTreeNodes(tree, valuesToRemove) {
+  const removeSet = new Set(valuesToRemove);
+  function recurse(nodes) {
+    const result = [];
+    for (const node of nodes) {
+      if (removeSet.has(node.value))
+        continue;
+      const newNode = { ...node };
+      if (node.children?.length) {
+        const filteredChildren = recurse(node.children);
+        if (filteredChildren.length > 0)
+          newNode.children = filteredChildren;
+      }
+      result.push(newNode);
+    }
+    return result;
+  }
+  return recurse(tree);
+}

package/package.json

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

package/dist/runtime/composals/use-mod.d.ts

@@ -1,2 +0,0 @@
-export type Mod = Record<string, any>;
-export declare function useMod(mod: Mod | Mod[] | Mod[][] | null | undefined): Mod | null;