@vuer-ai/vuer-uikit 0.0.98 → 0.0.100

package/dist/chunk-VA3PEYFM.mjs

@@ -1,489 +0,0 @@
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-ZNPI2TYG.mjs';
-import { SyncScroll } from './chunk-BEJIZ56L.mjs';
-import { InputRoot, InputSlot } from './chunk-4XUJBMDE.mjs';
-import { cn } from './chunk-HMN4IKTG.mjs';
-import { Search, CaseSensitive, Regex, ChevronDown } from 'lucide-react';
-import { useState, useMemo, useEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function TreeView({
-  data,
-  getIcon,
-  onVisibleDataChange,
-  onItemHover,
-  className,
-  hoveredId,
-  isSelectable = false,
-  selectedItemId,
-  onSelectChange,
-  isSearchable = true,
-  alwaysShowExpand = false,
-  useSyncScroll = false,
-  // External search state props
-  searchQuery: externalSearchQuery,
-  onSearchQueryChange: externalOnSearchQueryChange,
-  isCaseSensitive: externalIsCaseSensitive,
-  onIsCaseSensitiveChange: externalOnIsCaseSensitiveChange,
-  isRegex: externalIsRegex,
-  onIsRegexChange: externalOnIsRegexChange
-}) {
-  const [expandedItems, setExpandedItems] = useState(() => {
-    const initial = /* @__PURE__ */ new Set();
-    data.forEach((item) => {
-      if (item.isCollapsible) initial.add(item.id);
-    });
-    return initial;
-  });
-  const [internalSearchQuery, setInternalSearchQuery] = useState("");
-  const [internalIsCaseSensitive, setInternalIsCaseSensitive] = useState(false);
-  const [internalIsRegex, setInternalIsRegex] = useState(false);
-  const [isRegexValid, setIsRegexValid] = useState(true);
-  const searchQuery = externalSearchQuery ?? internalSearchQuery;
-  const setSearchQuery = externalOnSearchQueryChange ?? setInternalSearchQuery;
-  const isCaseSensitive = externalIsCaseSensitive ?? internalIsCaseSensitive;
-  const isRegex = externalIsRegex ?? internalIsRegex;
-  const setIsCaseSensitive = (value) => {
-    if (externalOnIsCaseSensitiveChange) {
-      externalOnIsCaseSensitiveChange(value);
-    } else {
-      setInternalIsCaseSensitive(value);
-    }
-  };
-  const setIsRegex = (value) => {
-    if (externalOnIsRegexChange) {
-      externalOnIsRegexChange(value);
-    } else {
-      setInternalIsRegex(value);
-    }
-  };
-  const toggleItem = (id) => {
-    setExpandedItems((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
-    });
-  };
-  const handleItemSelect = (id) => {
-    if (isSelectable && onSelectChange) {
-      onSelectChange(selectedItemId === id ? null : id);
-    }
-  };
-  const hasDescendants = (itemId) => {
-    return (childrenMap.get(itemId) || []).length > 0;
-  };
-  const childrenMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    data.forEach((item) => {
-      if (!map.has(item.parentId)) {
-        map.set(item.parentId, []);
-      }
-      map.get(item.parentId).push(item);
-    });
-    return map;
-  }, [data]);
-  const dataWithMeta = useMemo(() => {
-    const dataMap = new Map(data.map((item) => [item.id, item]));
-    const getAncestors = (item) => {
-      const ancestors = [];
-      let current = item.parentId;
-      while (current) {
-        const parent = dataMap.get(current);
-        if (parent) {
-          ancestors.unshift(parent);
-          current = parent.parentId;
-        } else {
-          break;
-        }
-      }
-      return ancestors;
-    };
-    const sortedData = [];
-    const visited = /* @__PURE__ */ new Set();
-    const traverseNode = (nodeId, depth = 0) => {
-      const children = childrenMap.get(nodeId) || [];
-      children.forEach((child) => {
-        if (!visited.has(child.id)) {
-          visited.add(child.id);
-          sortedData.push(child);
-          traverseNode(child.id, depth + 1);
-        }
-      });
-    };
-    traverseNode(null);
-    return sortedData.map((item) => {
-      const siblings = childrenMap.get(item.parentId) || [];
-      const isLast = siblings.length > 0 && siblings[siblings.length - 1].id === item.id;
-      const ancestors = getAncestors(item);
-      const indent = ancestors.length;
-      return { ...item, indent, isLast, ancestors };
-    });
-  }, [data, childrenMap]);
-  const visibleData = useMemo(() => {
-    const dataMap = new Map(data.map((item) => [item.id, item]));
-    if (!searchQuery) {
-      const isVisible = (item) => {
-        return item.ancestors.every((ancestor) => expandedItems.has(ancestor.id));
-      };
-      return dataWithMeta.filter(isVisible);
-    }
-    const matchingAndAncestorIds = /* @__PURE__ */ new Set();
-    let regex = null;
-    if (isRegex) {
-      try {
-        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
-        if (!isRegexValid) setIsRegexValid(true);
-      } catch {
-        if (isRegexValid) setIsRegexValid(false);
-        return [];
-      }
-    }
-    data.forEach((item) => {
-      let labelMatches = false;
-      if (regex) {
-        labelMatches = regex.test(item.label);
-      } else {
-        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
-        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
-        labelMatches = source.includes(query);
-      }
-      if (labelMatches) {
-        matchingAndAncestorIds.add(item.id);
-        let current = item.parentId;
-        while (current) {
-          const parent = dataMap.get(current);
-          if (parent) {
-            matchingAndAncestorIds.add(parent.id);
-            current = parent.parentId;
-          } else {
-            break;
-          }
-        }
-      }
-    });
-    return dataWithMeta.filter((item) => matchingAndAncestorIds.has(item.id));
-  }, [searchQuery, dataWithMeta, expandedItems, isCaseSensitive, isRegex, isRegexValid, data]);
-  const searchResultsCount = useMemo(() => {
-    if (!searchQuery || !isRegexValid) return 0;
-    let count = 0;
-    let regex = null;
-    if (isRegex) {
-      try {
-        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
-      } catch {
-        return 0;
-      }
-    }
-    data.forEach((item) => {
-      let labelMatches = false;
-      if (regex) {
-        labelMatches = regex.test(item.label);
-      } else {
-        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
-        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
-        labelMatches = source.includes(query);
-      }
-      if (labelMatches) {
-        count++;
-      }
-    });
-    return count;
-  }, [searchQuery, data, isCaseSensitive, isRegex, isRegexValid]);
-  useEffect(() => {
-    onVisibleDataChange?.(visibleData);
-  }, [visibleData, onVisibleDataChange]);
-  const renderLabel = (label) => {
-    if (!searchQuery || !isRegexValid) {
-      return label;
-    }
-    let regex;
-    try {
-      regex = new RegExp(`(${searchQuery})`, isCaseSensitive ? "g" : "gi");
-    } catch {
-      return label;
-    }
-    const parts = label.split(regex);
-    return /* @__PURE__ */ jsx(Fragment, { children: parts.map(
-      (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsx("span", { className: "rounded-uk-xs bg-accent-warning", children: part }, i) : part
-    ) });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    isSearchable && /* @__PURE__ */ jsx(
-      TreeSearchBar,
-      {
-        searchQuery,
-        setSearchQuery,
-        isCaseSensitive,
-        setIsCaseSensitive,
-        isRegex,
-        setIsRegex,
-        isRegexValid,
-        searchResultsCount
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TreeEntries,
-      {
-        visibleData,
-        hoveredId,
-        onItemHover,
-        isSelectable,
-        selectedItemId,
-        handleItemSelect,
-        expandedItems,
-        toggleItem,
-        alwaysShowExpand,
-        hasDescendants,
-        getIcon,
-        renderLabel,
-        dataWithMeta,
-        useSyncScroll
-      }
-    )
-  ] });
-}
-function TreeSearchBar({
-  searchQuery,
-  setSearchQuery,
-  isCaseSensitive,
-  setIsCaseSensitive,
-  isRegex,
-  setIsRegex,
-  isRegexValid,
-  searchResultsCount
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 py-1", children: /* @__PURE__ */ jsxs(
-      InputRoot,
-      {
-        type: "text",
-        placeholder: "Search...",
-        size: "md",
-        className: "flex-1",
-        inputClassName: cn(!isRegexValid && "text-red-500"),
-        value: searchQuery,
-        onChange: (e) => setSearchQuery(e.target.value),
-        children: [
-          /* @__PURE__ */ jsx(InputSlot, { side: "left", children: /* @__PURE__ */ jsx(Search, { className: "text-text-secondary size-4 stroke-1" }) }),
-          /* @__PURE__ */ jsx(InputSlot, { side: "right", children: /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setIsCaseSensitive((prev) => !prev),
-                  className: cn(
-                    "rounded-uk-sm mr-1 p-1",
-                    isCaseSensitive ? "bg-shadow-secondary" : ""
-                  ),
-                  children: /* @__PURE__ */ jsx(CaseSensitive, { className: "size-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Case Sensitive" }) })
-            ] }),
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setIsRegex((prev) => !prev),
-                  className: cn("rounded-uk-sm p-1", isRegex && "bg-shadow-secondary"),
-                  children: /* @__PURE__ */ jsx(Regex, { className: "size-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Use Regular Expression" }) })
-            ] })
-          ] }) })
-        ]
-      }
-    ) }),
-    searchQuery && isRegexValid && /* @__PURE__ */ jsx("div", { className: "flex justify-end px-2 pb-1", children: /* @__PURE__ */ jsxs("span", { className: "text-uk-xs text-text-secondary", children: [
-      searchResultsCount,
-      " result",
-      searchResultsCount !== 1 ? "s" : ""
-    ] }) })
-  ] });
-}
-function TreeEntryItem({
-  item,
-  hoveredId,
-  onItemHover,
-  isSelectable,
-  selectedItemId,
-  handleItemSelect,
-  expandedItems,
-  toggleItem,
-  alwaysShowExpand,
-  hasDescendants,
-  getIcon,
-  renderLabel,
-  dataWithMeta
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "group relative flex h-[32px] items-center",
-        isSelectable && "rounded-uk-md",
-        !item.disable && "cursor-pointer",
-        hoveredId === item.id && !item.disable && "bg-bg-secondary",
-        isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg"
-      ),
-      onMouseEnter: () => onItemHover?.(item.id),
-      onMouseLeave: () => onItemHover?.(null),
-      onClick: () => !item.disable && handleItemSelect(item.id),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-[-0.28rem] z-0 flex h-full items-center", children: [
-          item.ancestors.map((ancestor, index) => {
-            const parentIsLast = dataWithMeta.find((d) => d.id === ancestor.id)?.isLast;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "h-full w-[1.25rem]",
-                  parentIsLast ? "" : "border-l",
-                  "border-line-primary"
-                )
-              },
-              index
-            );
-          }),
-          item.indent > 0 && /* @__PURE__ */ jsxs("div", { className: "relative h-full w-[1.24rem]", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
-                  item.isLast ? "rounded-bl-md" : "",
-                  "border-line-primary"
-                )
-              }
-            ),
-            !item.isLast && /* @__PURE__ */ jsx("div", { className: "border-line-primary absolute top-1/2 left-0 h-1/2 w-1/2 border-l" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "text-uk-md z-10 flex w-full items-center justify-between gap-2 px-2 whitespace-nowrap",
-            style: { paddingLeft: `${item.indent * 1.25 + 0.5}rem` },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                alwaysShowExpand && hasDescendants(item.id) && !expandedItems.has(item.id) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        toggleItem(item.id);
-                      },
-                      className: "flex size-4 cursor-pointer items-center justify-center",
-                      children: /* @__PURE__ */ jsx(
-                        ChevronDown,
-                        {
-                          className: cn(
-                            "size-4 -rotate-90 transition-transform",
-                            item.disable && "text-icon-tertiary"
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "flex size-4 items-center justify-center",
-                        item.disable && "text-icon-tertiary"
-                      ),
-                      children: getIcon(item)
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
-                  item.isCollapsible && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        toggleItem(item.id);
-                      },
-                      className: "absolute z-20 flex cursor-pointer items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
-                      children: /* @__PURE__ */ jsx(
-                        ChevronDown,
-                        {
-                          className: cn(
-                            "size-4 transition-transform",
-                            !expandedItems.has(item.id) && "-rotate-90",
-                            item.disable && "text-icon-tertiary"
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "cursor-pointer transition-opacity",
-                        item.isCollapsible && "group-hover:opacity-0",
-                        item.disable && "text-icon-tertiary"
-                      ),
-                      children: getIcon(item)
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: cn("truncate", item.disable && "text-text-tertiary"), children: renderLabel(item.label) })
-              ] }),
-              item.actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: item.actions })
-            ]
-          }
-        )
-      ]
-    },
-    item.id
-  );
-}
-function TreeEntries({
-  visibleData,
-  hoveredId,
-  onItemHover,
-  isSelectable,
-  selectedItemId,
-  handleItemSelect,
-  expandedItems,
-  toggleItem,
-  alwaysShowExpand,
-  hasDescendants,
-  getIcon,
-  renderLabel,
-  dataWithMeta,
-  useSyncScroll = false,
-  className
-}) {
-  const content = visibleData.map((item) => /* @__PURE__ */ jsx(
-    TreeEntryItem,
-    {
-      item,
-      hoveredId,
-      onItemHover,
-      isSelectable,
-      selectedItemId,
-      handleItemSelect,
-      expandedItems,
-      toggleItem,
-      alwaysShowExpand,
-      hasDescendants,
-      getIcon,
-      renderLabel,
-      dataWithMeta
-    },
-    item.id
-  ));
-  if (useSyncScroll) {
-    return /* @__PURE__ */ jsx(SyncScroll, { className: cn("scrollbar-track-transparent flex-1", className), children: content });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: content });
-}
-
-export { TreeEntries, TreeEntryItem, TreeSearchBar, TreeView };