@qwik.dev/devtools 0.1.1 → 0.2.0

package/dist/ui/components/Tree/Tree.qwik.mjs

@@ -0,0 +1,126 @@
+import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, $ } from "@qwik.dev/core";
+import { HiChevronUpMini } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+const TreeNodeComponent = component$((props) => {
+  const isExpanded = useSignal(props.expandLevel <= props.level);
+  const hasChildren = props.node.children && props.node.children.length > 0;
+  const handleNodeClick = $(() => {
+    props.onNodeClick(props.node);
+    if (hasChildren) {
+      isExpanded.value = !isExpanded.value;
+    }
+  });
+  const iterateProps = (porps) => {
+    const displayProp = [
+      "q:id",
+      "q:key"
+    ];
+    return displayProp.reduce((totalStr, prop) => {
+      if (porps[prop]) {
+        totalStr += `${prop}="${porps[prop]}" `;
+      }
+      return totalStr;
+    }, "");
+  };
+  const isActive = props.isHover ? props.node.id === props.activeNodeId : false;
+  const duration = props.animationDuration ?? 200;
+  const shouldShowChildren = hasChildren && !isExpanded.value;
+  const renderChildren = props.node.children?.map((child) => /* @__PURE__ */ jsx(TreeNodeComponent, {
+    isHover: props.isHover,
+    node: child,
+    gap: props.gap,
+    expandLevel: props.expandLevel,
+    level: props.level + 1,
+    activeNodeId: props.activeNodeId,
+    onNodeClick: props.onNodeClick,
+    renderNode: props.renderNode,
+    animate: props.animate,
+    animationDuration: props.animationDuration
+  }, child.id));
+  return /* @__PURE__ */ jsxs("div", {
+    class: "w-full",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        style: {
+          paddingLeft: `${props.level * props.gap}px`
+        },
+        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-700/40 font-semibold" : ""}`,
+        onClick$: handleNodeClick,
+        children: /* @__PURE__ */ jsxs("div", {
+          class: `inline-flex items-center rounded-md  px-2 py-1`,
+          children: [
+            hasChildren ? /* @__PURE__ */ jsx(HiChevronUpMini, {
+              class: `mr-2 h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
+            }) : /* @__PURE__ */ jsx("div", {
+              class: "mr-2 w-4 flex-shrink-0"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "cursor-pointer whitespace-nowrap text-sm",
+              children: props.renderNode ? /* @__PURE__ */ jsx(Fragment, {
+                children: props.renderNode(props.node)
+              }) : /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-foreground/70",
+                    children: "<"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-violet-400 dark:text-violet-300",
+                    children: props.node.label || props.node.name
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    class: "text-muted-foreground",
+                    children: [
+                      ` ${iterateProps(props.node.props || {})}`,
+                      ">"
+                    ]
+                  })
+                ]
+              })
+            })
+          ]
+        })
+      }),
+      hasChildren ? props.animate ? /* @__PURE__ */ jsx("div", {
+        class: `overflow-hidden transition-all ease-in-out`,
+        style: {
+          maxHeight: shouldShowChildren ? "1000px" : "0px",
+          opacity: shouldShowChildren ? "1" : "0",
+          transition: `max-height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`
+        },
+        children: renderChildren
+      }) : shouldShowChildren && /* @__PURE__ */ jsx(Fragment, {
+        children: renderChildren
+      }) : null
+    ]
+  });
+});
+const Tree = component$((props) => {
+  const ref = useSignal();
+  const store = props.data;
+  const activeNodeId = useSignal("");
+  const setActiveNode = $((node) => {
+    ref.value.scrollLeft = ref.value.scrollWidth;
+    activeNodeId.value = node.id;
+    props.onNodeClick && props.onNodeClick(node);
+  });
+  return /* @__PURE__ */ jsx("div", {
+    class: "h-full w-full overflow-x-auto overflow-y-auto",
+    ref,
+    children: store.value.map((rootNode) => /* @__PURE__ */ jsx(TreeNodeComponent, {
+      isHover: props.isHover === false ? false : true,
+      gap: props.gap || 20,
+      node: rootNode,
+      level: 0,
+      expandLevel: props.expandLevel ?? 2,
+      activeNodeId: activeNodeId.value,
+      onNodeClick: setActiveNode,
+      renderNode: props.renderNode,
+      animate: props.animate ?? true,
+      animationDuration: props.animationDuration
+    }, rootNode.id))
+  });
+});
+export {
+  Tree
+};

package/dist/ui/components/Tree/filterVnode.qwik.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const internal = require("@qwik.dev/core/internal");
+const vnode = require("./vnode.qwik.cjs");
+const location = require("../../utils/location.qwik.cjs");
+require("../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
+const constants = require("../../packages/kit/src/constants.qwik.cjs");
+require("../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
+let index = 0;
+function initVnode({ name = "text", props = {}, element = {}, children = [] }) {
+  return {
+    name,
+    props,
+    element,
+    children,
+    label: name,
+    id: `vnode-${index++}`
+  };
+}
+function vnode_toObject(vnodeItem) {
+  if (vnodeItem === null || vnodeItem === void 0) {
+    return null;
+  }
+  return buildTreeRecursive(vnodeItem);
+}
+const container = location.htmlContainer();
+function buildTreeRecursive(vnode$1, materialize) {
+  if (!vnode$1) {
+    return [];
+  }
+  const result = [];
+  let currentVNode = vnode$1;
+  while (currentVNode) {
+    const isVirtual = internal._vnode_isVirtualVNode(currentVNode);
+    const isFragment = isVirtual && typeof container.getHostProp(currentVNode, constants.QRENDERFN) === "function";
+    if (isFragment) {
+      const vnodeObject = initVnode({
+        element: currentVNode
+      });
+      internal._vnode_getAttrKeys(currentVNode).forEach((key) => {
+        if (key === constants.QTYPE) return;
+        const value = container.getHostProp(currentVNode, key);
+        internal._vnode_getProps(currentVNode)[internal._vnode_getProps(currentVNode).indexOf(key) + 1] = value;
+        vnodeObject.props[key] = internal._vnode_getAttr(currentVNode, key);
+        if (key === constants.QRENDERFN) {
+          vnodeObject.label = vnode.normalizeName(value.getSymbol());
+          vnodeObject.name = vnode.normalizeName(value.getSymbol());
+        }
+      });
+      const firstChild = internal._vnode_getFirstChild(currentVNode);
+      const children = firstChild ? buildTreeRecursive(firstChild) : [];
+      if (children.length > 0) {
+        vnodeObject.children = children;
+      }
+      result.push(vnodeObject);
+    } else if (internal._vnode_isMaterialized(currentVNode) || isVirtual && !isFragment) {
+      const firstChild = internal._vnode_getFirstChild(currentVNode);
+      if (firstChild) {
+        result.push(...buildTreeRecursive(firstChild));
+      }
+    }
+    currentVNode = internal._vnode_getNextSibling(currentVNode);
+  }
+  return result;
+}
+exports.vnode_toObject = vnode_toObject;

package/dist/ui/components/Tree/filterVnode.qwik.mjs

@@ -0,0 +1,66 @@
+import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getProps, _vnode_getAttr, _vnode_getFirstChild, _vnode_isMaterialized, _vnode_getNextSibling } from "@qwik.dev/core/internal";
+import { normalizeName } from "./vnode.qwik.mjs";
+import { htmlContainer } from "../../utils/location.qwik.mjs";
+import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
+import { QRENDERFN, QTYPE } from "../../packages/kit/src/constants.qwik.mjs";
+import "../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.mjs";
+let index = 0;
+function initVnode({ name = "text", props = {}, element = {}, children = [] }) {
+  return {
+    name,
+    props,
+    element,
+    children,
+    label: name,
+    id: `vnode-${index++}`
+  };
+}
+function vnode_toObject(vnodeItem) {
+  if (vnodeItem === null || vnodeItem === void 0) {
+    return null;
+  }
+  return buildTreeRecursive(vnodeItem);
+}
+const container = htmlContainer();
+function buildTreeRecursive(vnode, materialize) {
+  if (!vnode) {
+    return [];
+  }
+  const result = [];
+  let currentVNode = vnode;
+  while (currentVNode) {
+    const isVirtual = _vnode_isVirtualVNode(currentVNode);
+    const isFragment = isVirtual && typeof container.getHostProp(currentVNode, QRENDERFN) === "function";
+    if (isFragment) {
+      const vnodeObject = initVnode({
+        element: currentVNode
+      });
+      _vnode_getAttrKeys(currentVNode).forEach((key) => {
+        if (key === QTYPE) return;
+        const value = container.getHostProp(currentVNode, key);
+        _vnode_getProps(currentVNode)[_vnode_getProps(currentVNode).indexOf(key) + 1] = value;
+        vnodeObject.props[key] = _vnode_getAttr(currentVNode, key);
+        if (key === QRENDERFN) {
+          vnodeObject.label = normalizeName(value.getSymbol());
+          vnodeObject.name = normalizeName(value.getSymbol());
+        }
+      });
+      const firstChild = _vnode_getFirstChild(currentVNode);
+      const children = firstChild ? buildTreeRecursive(firstChild) : [];
+      if (children.length > 0) {
+        vnodeObject.children = children;
+      }
+      result.push(vnodeObject);
+    } else if (_vnode_isMaterialized(currentVNode) || isVirtual && !isFragment) {
+      const firstChild = _vnode_getFirstChild(currentVNode);
+      if (firstChild) {
+        result.push(...buildTreeRecursive(firstChild));
+      }
+    }
+    currentVNode = _vnode_getNextSibling(currentVNode);
+  }
+  return result;
+}
+export {
+  vnode_toObject
+};

package/dist/ui/components/Tree/type.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ISDEVTOOL = "Qwikdevtools";
+exports.ISDEVTOOL = ISDEVTOOL;

package/dist/ui/components/Tree/type.qwik.mjs

@@ -0,0 +1,4 @@
+const ISDEVTOOL = "Qwikdevtools";
+export {
+  ISDEVTOOL
+};

package/dist/ui/components/Tree/vnode.qwik.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function normalizeName(str) {
+  const array = str.split("_");
+  if (array.length > 0) {
+    const componentName = array[0];
+    return componentName.charAt(0).toUpperCase() + componentName.slice(1).toLowerCase();
+  } else {
+    return "";
+  }
+}
+function removeNodeFromTree(tree, callback) {
+  return tree.filter((node) => {
+    if (callback(node)) {
+      return false;
+    }
+    if (node.children && node.children.length > 0) {
+      node.children = removeNodeFromTree(node.children, callback);
+    }
+    return true;
+  });
+}
+exports.normalizeName = normalizeName;
+exports.removeNodeFromTree = removeNodeFromTree;

package/dist/ui/components/Tree/vnode.qwik.mjs

@@ -0,0 +1,24 @@
+function normalizeName(str) {
+  const array = str.split("_");
+  if (array.length > 0) {
+    const componentName = array[0];
+    return componentName.charAt(0).toUpperCase() + componentName.slice(1).toLowerCase();
+  } else {
+    return "";
+  }
+}
+function removeNodeFromTree(tree, callback) {
+  return tree.filter((node) => {
+    if (callback(node)) {
+      return false;
+    }
+    if (node.children && node.children.length > 0) {
+      node.children = removeNodeFromTree(node.children, callback);
+    }
+    return true;
+  });
+}
+export {
+  normalizeName,
+  removeNodeFromTree
+};

package/dist/ui/components/router-head/theme-script.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const themeStorageKey = "vueuse-color-scheme";
+exports.themeStorageKey = themeStorageKey;

package/dist/ui/components/router-head/theme-script.qwik.mjs

@@ -0,0 +1,4 @@
+const themeStorageKey = "vueuse-color-scheme";
+export {
+  themeStorageKey
+};