npm - vue-apextree - Versions diffs - 1.0.0 - Mend

vue-apextree 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,80 @@
+## 📄 License Options for vue-apextree
+vue-apextree is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.
+---
+### 🔓 Community License (Free)
+For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
+✅ What's allowed:
+- Personal, educational, or non-profit use
+- Commercial use by small orgs (< $2M annual revenue)
+- Modifications and redistribution (with attribution)
+🚫 Not allowed:
+- Use by companies or entities over $2M/year revenue
+- Use in competing charting products
+- Sublicensing under different terms
+➡ By using vue-apextree under this license, you confirm that **you qualify as a Small Organization**.
+---
+### 💼 Commercial License (Paid)
+Required if **you or your affiliated organization earns $2 million USD or more per year**.
+✅ What's included:
+- Use in internal tools and commercial applications
+- Modifications and app-level distribution
+- 12-month subscription with updates & support
+🚫 Not allowed:
+- Redistribution in toolkits, SDKs, or platforms
+- Use by unlicensed developers
+- Competing charting products
+---
+### 🔄 OEM / Redistribution License (Paid)
+Required if you are **embedding vue-apextree into a product or platform used by other people**, such as:
+- No-code dashboards
+- Developer platforms
+- Embedded BI tools
+- White-labeled apps or SDKs
+✅ What's included:
+- Redistribution rights for 1 application or product
+- 12-month subscription with updates & support
+✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
+---
+### ⚠️ License Acceptance
+By installing vue-apextree (e.g., via `npm install vue-apextree`), you are agreeing to the applicable license based on your usage:
+- Community License (if under $2M revenue)
+- Commercial License (if over $2M revenue)
+- OEM License (if redistributing to third-party users)
+---
+### 🛠 Need a License or Have Questions?
+📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)
+📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
+---
+Thank you for supporting ApexCharts!

package/README.md ADDED Viewed

@@ -0,0 +1,329 @@
+# vue-apextree
+Vue 3 wrapper for [ApexTree](https://github.com/apexcharts/apextree) - a JavaScript library for creating organizational and hierarchical charts.
+<img width="811" alt="ApexTree Example" src="https://github.com/apexcharts/tree/assets/17950663/e09212ec-6322-4c68-ac12-9afc524d2abd">
+## Installation
+```bash
+npm install vue-apextree apextree
+```
+> **Note:** `apextree` is a peer dependency and must be installed alongside `vue-apextree`.
+## Basic Usage
+```vue
+<script setup lang="ts">
+import { ApexTreeChart, type NodeData } from 'vue-apextree';
+const data: NodeData = {
+  id: '1',
+  name: 'CEO',
+  children: [
+    {
+      id: '2',
+      name: 'CTO',
+      children: [
+        { id: '3', name: 'Dev Lead' },
+        { id: '4', name: 'QA Lead' },
+      ],
+    },
+    {
+      id: '5',
+      name: 'CFO',
+    },
+  ],
+};
+</script>
+<template>
+  <ApexTreeChart
+    :data="data"
+    :width="800"
+    :height="600"
+    direction="top"
+    :node-width="120"
+    :node-height="80"
+  />
+</template>
+```
+## Setting License Key
+If you have a commercial license, set it once at app initialization:
+```ts
+// main.ts
+import { setApexTreeLicense } from 'vue-apextree';
+setApexTreeLicense('your-license-key');
+```
+## Using Template Ref Methods
+Access methods like `changeLayout`, `collapse`, `expand`, and `fitScreen` via template ref:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ApexTreeChart, type ApexTreeExpose } from 'vue-apextree';
+const treeRef = ref<ApexTreeExpose | null>(null);
+const handleChangeLayout = () => {
+  treeRef.value?.changeLayout('left');
+};
+const handleCollapse = (nodeId: string) => {
+  treeRef.value?.collapse(nodeId);
+};
+const handleExpand = (nodeId: string) => {
+  treeRef.value?.expand(nodeId);
+};
+const handleFitScreen = () => {
+  treeRef.value?.fitScreen();
+};
+</script>
+<template>
+  <div>
+    <button @click="handleChangeLayout">Change Layout</button>
+    <button @click="handleFitScreen">Fit Screen</button>
+    <ApexTreeChart
+      ref="treeRef"
+      :data="data"
+      :width="800"
+      :height="600"
+    />
+  </div>
+</template>
+```
+## Custom Node Templates
+```vue
+<script setup lang="ts">
+import { ApexTreeChart } from 'vue-apextree';
+interface PersonData {
+  name: string;
+  imageURL: string;
+}
+const nodeTemplate = (content: unknown): string => {
+  const person = content as PersonData;
+  return `
+    <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
+      <img
+        src="${person.imageURL}"
+        style="width: 50px; height: 50px; border-radius: 50%;"
+      />
+      <div style="font-weight: bold;">${person.name}</div>
+    </div>
+  `;
+};
+</script>
+<template>
+  <ApexTreeChart
+    :data="data"
+    :width="800"
+    :height="600"
+    content-key="data"
+    :node-width="150"
+    :node-height="100"
+    :node-template="nodeTemplate"
+  />
+</template>
+```
+## Reactivity
+The component automatically re-renders when props change, including deep changes to the `data` object:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ApexTreeChart, type NodeData } from 'vue-apextree';
+const data = ref<NodeData>({
+  id: '1',
+  name: 'Root',
+  children: [],
+});
+// this will trigger a re-render
+const addChild = () => {
+  data.value.children?.push({
+    id: String(Date.now()),
+    name: 'New Node',
+  });
+};
+</script>
+<template>
+  <button @click="addChild">Add Child</button>
+  <ApexTreeChart :data="data" :width="800" :height="600" />
+</template>
+```
+## Events
+```vue
+<script setup lang="ts">
+import { ApexTreeChart, type NodeData } from 'vue-apextree';
+const handleNodeClick = (node: NodeData) => {
+  console.log('Node clicked:', node);
+};
+</script>
+<template>
+  <ApexTreeChart
+    :data="data"
+    :width="800"
+    :height="600"
+    @node-click="handleNodeClick"
+  />
+</template>
+```
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `NodeData` | **required** | Tree data structure |
+| `width` | `number \| string` | `400` | Width of the container |
+| `height` | `number \| string` | `400` | Height of the container |
+| `direction` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Direction of tree growth |
+| `contentKey` | `string` | `'name'` | Key for node content |
+| `siblingSpacing` | `number` | `50` | Spacing between siblings |
+| `childrenSpacing` | `number` | `50` | Spacing between parent and children |
+| `nodeWidth` | `number` | `50` | Width of nodes |
+| `nodeHeight` | `number` | `30` | Height of nodes |
+| `nodeTemplate` | `(content: unknown) => string` | - | Custom HTML template for nodes |
+| `nodeStyle` | `string` | - | CSS styles for nodes |
+| `nodeBGColor` | `string` | `'#FFFFFF'` | Node background color |
+| `nodeBGColorHover` | `string` | `'#FFFFFF'` | Node background color on hover |
+| `borderWidth` | `number` | `1` | Node border width |
+| `borderStyle` | `string` | `'solid'` | Node border style |
+| `borderRadius` | `string` | `'5px'` | Node border radius |
+| `borderColor` | `string` | `'#BCBCBC'` | Node border color |
+| `borderColorHover` | `string` | `'#5C6BC0'` | Node border color on hover |
+| `edgeWidth` | `number` | `1` | Edge line width |
+| `edgeColor` | `string` | `'#BCBCBC'` | Edge line color |
+| `edgeColorHover` | `string` | `'#5C6BC0'` | Edge line color on hover |
+| `fontSize` | `string` | `'14px'` | Font size |
+| `fontFamily` | `string` | - | Font family |
+| `fontWeight` | `string` | `'400'` | Font weight |
+| `fontColor` | `string` | `'#000000'` | Font color |
+| `highlightOnHover` | `boolean` | `true` | Enable highlight on hover |
+| `enableToolbar` | `boolean` | `false` | Show toolbar |
+| `enableExpandCollapse` | `boolean` | `false` | Enable expand/collapse buttons |
+| `enableTooltip` | `boolean` | `false` | Enable tooltips |
+| `tooltipTemplate` | `(content: unknown) => string` | - | Custom tooltip template |
+| `groupLeafNodes` | `boolean` | `false` | Stack leaf nodes |
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `node-click` | `NodeData` | Emitted when a node is clicked |
+## Exposed Methods
+| Method | Description |
+|--------|-------------|
+| `changeLayout(direction?)` | Change tree direction |
+| `collapse(nodeId)` | Collapse a node |
+| `expand(nodeId)` | Expand a node |
+| `fitScreen()` | Fit tree to screen |
+| `getGraph()` | Get the underlying graph instance |
+## Data Structure
+```ts
+interface NodeData<T = unknown> {
+  id: string;           // unique identifier
+  name?: string;        // display name (or use contentKey)
+  data?: T;             // custom data for templates
+  options?: NodeOptions; // per-node styling
+  children?: NodeData<T>[];
+}
+interface NodeOptions {
+  nodeBGColor?: string;
+  nodeBGColorHover?: string;
+  borderColor?: string;
+  borderColorHover?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string | number;
+  fontColor?: string;
+}
+```
+## TypeScript Support
+Full TypeScript support with exported types:
+```ts
+import type {
+  ApexTreeProps,
+  ApexTreeExpose,
+  NodeData,
+  NodeOptions,
+  TreeDirection,
+  GraphInstance,
+} from 'vue-apextree';
+```
+## License
+vue-apextree uses the same dual-license model as ApexCharts. See [LICENSE](./LICENSE) for details.
+- **Free** for individuals, non-profits, and small businesses (< $2M revenue)
+- **Commercial license** required for larger organizations
+## Links
+- [ApexTree Documentation](https://github.com/apexcharts/apextree)
+- [ApexCharts](https://apexcharts.com)
+- [License Information](https://apexcharts.com/license)
+## Development
+### Running the Demo
+The package includes a demo app showcasing various features:
+```bash
+# clone the repo
+git clone https://github.com/apexcharts/vue-apextree.git
+cd vue-apextree
+# install dependencies
+npm install
+cd demo && npm install && cd ..
+# build the library
+npm run build
+# run the demo
+npm run demo
+```
+Then open http://localhost:5173 to see the examples.
+### Available Scripts
+- `npm run build` - Build the library
+- `npm run dev` - Build in watch mode
+- `npm run typecheck` - Run TypeScript type checking
+- `npm run demo` - Run the demo app
+- `npm run demo:build` - Build the demo app

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,160 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { CSSProperties } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { ShallowRef } from 'vue';
+declare type __VLS_Props = ApexTreeProps;
+export declare const ApexTreeChart: DefineComponent<__VLS_Props, {
+changeLayout: (direction?: TreeDirection) => void;
+collapse: (nodeId: string) => void;
+expand: (nodeId: string) => void;
+fitScreen: () => void;
+getGraph: () => GraphInstance | null;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+width: number | string;
+height: number | string;
+direction: TreeDirection;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+/**
+ * methods exposed via defineExpose
+ */
+declare interface ApexTreeExposed {
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+    getGraph: () => GraphInstance | null;
+}
+export { ApexTreeExposed as ApexTreeExpose }
+export { ApexTreeExposed }
+/**
+ * props for the ApexTreeChart Vue component
+ */
+export declare interface ApexTreeProps<T = unknown> {
+    data: NodeData<T>;
+    class?: string;
+    style?: CSSProperties;
+    width?: number | string;
+    height?: number | string;
+    direction?: TreeDirection;
+    siblingSpacing?: number;
+    childrenSpacing?: number;
+    containerClassName?: string;
+    canvasStyle?: string;
+    contentKey?: string;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    nodeTemplate?: (content: unknown) => string;
+    nodeStyle?: string;
+    nodeClassName?: string;
+    nodeBGColor?: string;
+    nodeBGColorHover?: string;
+    borderWidth?: number;
+    borderStyle?: string;
+    borderRadius?: string;
+    borderColor?: string;
+    borderColorHover?: string;
+    edgeWidth?: number;
+    edgeColor?: string;
+    edgeColorHover?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontColor?: string;
+    enableTooltip?: boolean;
+    tooltipId?: string;
+    tooltipTemplate?: (content: unknown) => string;
+    tooltipMaxWidth?: number;
+    tooltipMinWidth?: number;
+    tooltipBorderColor?: string;
+    tooltipBGColor?: string;
+    tooltipFontColor?: string;
+    tooltipFontSize?: string;
+    tooltipPadding?: number;
+    tooltipOffset?: number;
+    highlightOnHover?: boolean;
+    enableToolbar?: boolean;
+    enableExpandCollapse?: boolean;
+    expandCollapseButtonBGColor?: string;
+    expandCollapseButtonBorderColor?: string;
+    groupLeafNodes?: boolean;
+    groupLeafNodesSpacing?: number;
+    onNodeClick?: (node: NodeData<T>) => void;
+}
+/**
+ * graph instance returned by ApexTree.render()
+ */
+export declare interface GraphInstance {
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+}
+/**
+ * node data structure expected by ApexTree
+ */
+export declare interface NodeData<T = unknown> {
+    id: string;
+    name?: string;
+    data?: T;
+    options?: NodeOptions;
+    children?: Array<NodeData<T>>;
+}
+/**
+ * per-node styling options
+ */
+export declare interface NodeOptions {
+    nodeBGColor?: string;
+    nodeBGColorHover?: string;
+    borderColor?: string;
+    borderColorHover?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    fontColor?: string;
+}
+/**
+ * sets the license key for ApexTree
+ * call this at app initialization before rendering any trees
+ *
+ * @example
+ * ```ts
+ * import { setApexTreeLicense } from 'vue-apextree';
+ *
+ * // in main.ts or app entry
+ * setApexTreeLicense('your-license-key');
+ * ```
+ */
+export declare function setApexTreeLicense(key: string): void;
+export declare type TreeDirection = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * composable for managing ApexTree instance
+ * provides reactive tree management with imperative methods
+ */
+export declare function useApexTree(): {
+    graphRef: ShallowRef<GraphInstance | null, GraphInstance | null>;
+    containerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    render: (container: HTMLElement, data: NodeData, options: Record<string, unknown>) => GraphInstance | null;
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+    getGraph: () => GraphInstance | null;
+    cleanup: () => void;
+};
+export { }

package/dist/vue-apextree.js ADDED Viewed

@@ -0,0 +1,151 @@
+import { shallowRef as v, ref as g, onUnmounted as y, defineComponent as m, computed as x, onMounted as B, watch as h, createElementBlock as S, openBlock as b, normalizeStyle as T, normalizeClass as L } from "vue";
+import C from "apextree";
+const _ = ["data", "class", "style"];
+function G(e) {
+  const l = {};
+  for (const [n, a] of Object.entries(e))
+    _.includes(n) || a !== void 0 && (l[n] = a);
+  return l;
+}
+function H() {
+  const e = v(null), l = g(null);
+  function n(o, t, i) {
+    o.innerHTML = "";
+    const f = new C(o, i).render(t);
+    return e.value = f, l.value = o, f;
+  }
+  function a(o) {
+    var t;
+    (t = e.value) == null || t.changeLayout(o);
+  }
+  function c(o) {
+    var t;
+    (t = e.value) == null || t.collapse(o);
+  }
+  function d(o) {
+    var t;
+    (t = e.value) == null || t.expand(o);
+  }
+  function s() {
+    var o;
+    (o = e.value) == null || o.fitScreen();
+  }
+  function u() {
+    return e.value;
+  }
+  function p() {
+    l.value && (l.value.innerHTML = ""), e.value = null;
+  }
+  return y(p), {
+    graphRef: e,
+    containerRef: l,
+    render: n,
+    changeLayout: a,
+    collapse: c,
+    expand: d,
+    fitScreen: s,
+    getGraph: u,
+    cleanup: p
+  };
+}
+const W = /* @__PURE__ */ m({
+  __name: "ApexTreeChart",
+  props: {
+    data: {},
+    class: {},
+    style: {},
+    width: { default: 400 },
+    height: { default: 400 },
+    direction: { default: "top" },
+    siblingSpacing: {},
+    childrenSpacing: {},
+    containerClassName: {},
+    canvasStyle: {},
+    contentKey: {},
+    nodeWidth: {},
+    nodeHeight: {},
+    nodeTemplate: {},
+    nodeStyle: {},
+    nodeClassName: {},
+    nodeBGColor: {},
+    nodeBGColorHover: {},
+    borderWidth: {},
+    borderStyle: {},
+    borderRadius: {},
+    borderColor: {},
+    borderColorHover: {},
+    edgeWidth: {},
+    edgeColor: {},
+    edgeColorHover: {},
+    fontSize: {},
+    fontFamily: {},
+    fontWeight: {},
+    fontColor: {},
+    enableTooltip: { type: Boolean },
+    tooltipId: {},
+    tooltipTemplate: {},
+    tooltipMaxWidth: {},
+    tooltipMinWidth: {},
+    tooltipBorderColor: {},
+    tooltipBGColor: {},
+    tooltipFontColor: {},
+    tooltipFontSize: {},
+    tooltipPadding: {},
+    tooltipOffset: {},
+    highlightOnHover: { type: Boolean },
+    enableToolbar: { type: Boolean },
+    enableExpandCollapse: { type: Boolean },
+    expandCollapseButtonBGColor: {},
+    expandCollapseButtonBorderColor: {},
+    groupLeafNodes: { type: Boolean },
+    groupLeafNodesSpacing: {},
+    onNodeClick: {}
+  },
+  setup(e, { expose: l }) {
+    const n = e, a = g(null), {
+      render: c,
+      changeLayout: d,
+      collapse: s,
+      expand: u,
+      fitScreen: p,
+      getGraph: o
+    } = H(), t = x(() => G(n));
+    function i() {
+      !a.value || !n.data || c(a.value, n.data, t.value);
+    }
+    return B(() => {
+      i();
+    }), h(
+      () => n.data,
+      () => {
+        i();
+      },
+      { deep: !0 }
+    ), h(
+      t,
+      () => {
+        i();
+      },
+      { deep: !0 }
+    ), l({
+      changeLayout: (r) => d(r),
+      collapse: (r) => s(r),
+      expand: (r) => u(r),
+      fitScreen: () => p(),
+      getGraph: () => o()
+    }), (r, f) => (b(), S("div", {
+      ref_key: "containerRef",
+      ref: a,
+      class: L(n.class),
+      style: T(n.style)
+    }, null, 6));
+  }
+});
+function k(e) {
+  C.setLicense(e);
+}
+export {
+  W as ApexTreeChart,
+  k as setApexTreeLicense,
+  H as useApexTree
+};

package/dist/vue-apextree.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,62 @@
+{
+  "name": "vue-apextree",
+  "version": "1.0.0",
+  "description": "Vue wrapper for ApexTree - a JavaScript library for creating organizational and hierarchical charts",
+  "author": "ApexCharts <info@apexcharts.com>",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "main": "./dist/vue-apextree.umd.cjs",
+  "module": "./dist/vue-apextree.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-apextree.js",
+      "require": "./dist/vue-apextree.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "apextree",
+    "tree",
+    "chart",
+    "organizational-chart",
+    "org-chart",
+    "hierarchy",
+    "flowchart",
+    "diagram"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apexcharts/vue-apextree.git"
+  },
+  "bugs": {
+    "url": "https://github.com/apexcharts/vue-apextree/issues"
+  },
+  "homepage": "https://github.com/apexcharts/vue-apextree#readme",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vue-tsc --noEmit && vite build",
+    "typecheck": "vue-tsc --noEmit",
+    "demo": "npm run --prefix demo dev",
+    "demo:build": "npm run --prefix demo build"
+  },
+  "peerDependencies": {
+    "apextree": ">=1.0.0",
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "apextree": "^1.0.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.6",
+    "vite-plugin-dts": "^4.4.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  }
+}