npm - vue-apexsankey - Versions diffs - 1.0.0 - Mend

vue-apexsankey 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 (7) hide show

package/LICENSE +76 -0
package/README.md +406 -0
package/dist/index.d.ts +269 -0
package/dist/vue-apexsankey.css +1 -0
package/dist/vue-apexsankey.js +114 -0
package/dist/vue-apexsankey.umd.cjs +1 -0
package/package.json +65 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,76 @@
+## 📄 License Options for vue-apexsankey
+vue-apexsankey 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-apexsankey 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-apexsankey 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-apexsankey (e.g., via `npm install vue-apexsankey`), 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)

package/README.md ADDED Viewed

@@ -0,0 +1,406 @@
+# vue-apexsankey
+Vue 3 wrapper for [ApexSankey](https://github.com/apexcharts/apexsankey) - A JavaScript library to create Sankey diagrams.
+## Installation
+```bash
+npm install vue-apexsankey apexsankey @svgdotjs/svg.js
+```
+Or with yarn:
+```bash
+yarn add vue-apexsankey apexsankey @svgdotjs/svg.js
+```
+Or with pnpm:
+```bash
+pnpm add vue-apexsankey apexsankey @svgdotjs/svg.js
+```
+## Loading ApexSankey
+**Important:** You must load ApexSankey before using the Vue component. Choose one of the following methods:
+### Option 1: ES Module Import (Recommended)
+Import ApexSankey at your app's entry point to register it globally:
+```ts
+// main.ts
+import 'apexsankey'
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
+```
+### Option 2: CDN Script Tags
+Add the scripts to your `index.html` before your app bundle:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/apexsankey/apexsankey.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+```
+## Quick Start
+```vue
+<script setup lang="ts">
+import ApexSankey from 'vue-apexsankey'
+import type { GraphData, SankeyOptions } from 'vue-apexsankey'
+const data: GraphData = {
+  nodes: [
+    { id: 'oil', title: 'Oil' },
+    { id: 'gas', title: 'Natural Gas' },
+    { id: 'coal', title: 'Coal' },
+    { id: 'fossil', title: 'Fossil Fuels' },
+    { id: 'energy', title: 'Energy' }
+  ],
+  edges: [
+    { source: 'oil', target: 'fossil', value: 15 },
+    { source: 'gas', target: 'fossil', value: 20 },
+    { source: 'coal', target: 'fossil', value: 25 },
+    { source: 'fossil', target: 'energy', value: 60 }
+  ]
+}
+const options: Partial<SankeyOptions> = {
+  width: 800,
+  height: 600,
+  nodeWidth: 20
+}
+</script>
+<template>
+  <ApexSankey :data="data" :options="options" />
+</template>
+```
+## License Setup
+If you have a commercial license, set it once at app initialization before rendering any charts:
+```ts
+// main.ts
+import 'apexsankey'
+import { createApp } from 'vue'
+import { setApexSankeyLicense } from 'vue-apexsankey'
+import App from './App.vue'
+// set license before mounting app
+setApexSankeyLicense('your-license-key-here')
+createApp(App).mount('#app')
+```
+## Using Template Refs
+Access the underlying `SankeyGraph` instance via template refs:
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import ApexSankey from 'vue-apexsankey'
+import type { GraphData } from 'vue-apexsankey'
+const chartRef = ref<InstanceType<typeof ApexSankey> | null>(null)
+const data: GraphData = {
+  nodes: [
+    { id: 'a', title: 'A' },
+    { id: 'b', title: 'B' }
+  ],
+  edges: [
+    { source: 'a', target: 'b', value: 10 }
+  ]
+}
+onMounted(() => {
+  if (chartRef.value?.graph) {
+    console.log('Graph instance:', chartRef.value.graph)
+    console.log('Max rank:', chartRef.value.graph.maxRank)
+  }
+})
+</script>
+<template>
+  <ApexSankey ref="chartRef" :data="data" />
+</template>
+```
+## Reactivity
+The component automatically updates when props change:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import ApexSankey from 'vue-apexsankey'
+import type { GraphData, SankeyOptions } from 'vue-apexsankey'
+const data = ref<GraphData>({
+  nodes: [
+    { id: 'a', title: 'A' },
+    { id: 'b', title: 'B' }
+  ],
+  edges: [
+    { source: 'a', target: 'b', value: 10 }
+  ]
+})
+const options = ref<Partial<SankeyOptions>>({
+  nodeWidth: 20
+})
+function updateData() {
+  // chart will automatically re-render
+  data.value = {
+    ...data.value,
+    edges: [
+      { source: 'a', target: 'b', value: 50 }
+    ]
+  }
+}
+function updateOptions() {
+  // chart will recreate with new options
+  options.value = {
+    ...options.value,
+    nodeWidth: 30
+  }
+}
+</script>
+<template>
+  <div>
+    <ApexSankey :data="data" :options="options" />
+    <button @click="updateData">Update Data</button>
+    <button @click="updateOptions">Update Options</button>
+  </div>
+</template>
+```
+## Props
+| Prop      | Type                     | Required | Description                           |
+| --------- | ------------------------ | -------- | ------------------------------------- |
+| `data`    | `GraphData`              | Yes      | Sankey diagram data (nodes and edges) |
+| `options` | `Partial<SankeyOptions>` | No       | Configuration options for the diagram |
+## Data Format
+### Nodes
+```typescript
+interface Node {
+  id: string      // unique identifier
+  title: string   // display label
+  color?: string  // optional custom color
+}
+```
+### Edges
+```typescript
+interface Edge {
+  source: string  // source node id
+  target: string  // target node id
+  value: number   // edge weight/size
+  type?: string   // optional grouping type
+  color?: string  // optional custom color
+}
+```
+### Complete Data Structure
+```typescript
+interface GraphData {
+  nodes: Node[]
+  edges: Edge[]
+  options?: {
+    order?: string[][][]      // custom node ordering
+    alignLinkTypes?: boolean  // align links by type
+  }
+}
+```
+## Options
+| Option             | Type                   | Default                      | Description                                  |
+| ------------------ | ---------------------- | ---------------------------- | -------------------------------------------- |
+| `width`            | `number \| string`     | `800`                        | Width of graph container                     |
+| `height`           | `number \| string`     | `800`                        | Height of graph container                    |
+| `canvasStyle`      | `string`               | `""`                         | CSS styles for canvas root container         |
+| `spacing`          | `number`               | `100`                        | Spacing from top and left of graph container |
+| `nodeWidth`        | `number`               | `20`                         | Width of graph nodes                         |
+| `nodeBorderWidth`  | `number`               | `1`                          | Border width of nodes in pixels              |
+| `nodeBorderColor`  | `string`               | `""`                         | Border color of nodes                        |
+| `onNodeClick`      | `(node: Node) => void` | `undefined`                  | Callback function for node click             |
+| `edgeOpacity`      | `number`               | `0.4`                        | Opacity value for edges (0 to 1)             |
+| `edgeGradientFill` | `boolean`              | `true`                       | Enable gradient fill based on node colors    |
+| `enableTooltip`    | `boolean`              | `false`                      | Enable tooltip on hover                      |
+| `enableToolbar`    | `boolean`              | `false`                      | Enable/disable graph toolbar                 |
+| `tooltipId`        | `string`               | `"sankey-tooltip-container"` | Tooltip HTML element id                      |
+| `tooltipTemplate`  | `(content) => string`  | default template             | HTML template for tooltip                    |
+| `tooltipBorderColor` | `string`             | `"#BCBCBC"`                  | Border color of tooltip                      |
+| `tooltipBGColor`   | `string`               | `"#FFFFFF"`                  | Background color of tooltip                  |
+| `fontSize`         | `string`               | `"14px"`                     | Font size of node labels                     |
+| `fontFamily`       | `string`               | `""`                         | Font family of node labels                   |
+| `fontWeight`       | `string`               | `"400"`                      | Font weight of node labels                   |
+| `fontColor`        | `string`               | `"#000000"`                  | Font color of node labels                    |
+## Custom Node Ordering
+You can specify custom node ordering using the `order` option in data:
+```vue
+<script setup lang="ts">
+import ApexSankey from 'vue-apexsankey'
+import type { GraphData } from 'vue-apexsankey'
+const data: GraphData = {
+  nodes: [
+    { id: 'a', title: 'A' },
+    { id: 'b', title: 'B' },
+    { id: 'c', title: 'C' }
+  ],
+  edges: [
+    { source: 'a', target: 'c', value: 1 },
+    { source: 'b', target: 'c', value: 2 }
+  ],
+  options: {
+    order: [
+      [['a', 'b']], // first layer
+      [['c']]       // second layer
+    ]
+  }
+}
+</script>
+<template>
+  <ApexSankey :data="data" />
+</template>
+```
+## Custom Tooltip
+```vue
+<script setup lang="ts">
+import ApexSankey from 'vue-apexsankey'
+import type { GraphData, SankeyOptions } from 'vue-apexsankey'
+const data: GraphData = {
+  nodes: [
+    { id: 'a', title: 'A' },
+    { id: 'b', title: 'B' }
+  ],
+  edges: [
+    { source: 'a', target: 'b', value: 10 }
+  ]
+}
+const options: Partial<SankeyOptions> = {
+  enableTooltip: true,
+  tooltipTemplate: ({ source, target, value }) => `
+    <div style="padding: 8px;">
+      <strong>${source.title}</strong> → <strong>${target.title}</strong>
+      <br />
+      Value: ${value}
+    </div>
+  `
+}
+</script>
+<template>
+  <ApexSankey :data="data" :options="options" />
+</template>
+```
+## Using the Composable
+For more control, you can use the `useSankey` composable directly:
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSankey } from 'vue-apexsankey'
+import type { GraphData, SankeyOptions } from 'vue-apexsankey'
+const containerRef = ref<HTMLElement | null>(null)
+const data = ref<GraphData>({
+  nodes: [
+    { id: 'a', title: 'A' },
+    { id: 'b', title: 'B' }
+  ],
+  edges: [
+    { source: 'a', target: 'b', value: 10 }
+  ]
+})
+const options = ref<Partial<SankeyOptions>>({
+  nodeWidth: 20
+})
+const { graph, isReady, render, destroy, recreate } = useSankey({
+  containerRef,
+  data,
+  options
+})
+</script>
+<template>
+  <div ref="containerRef" style="width: 800px; height: 600px;" />
+</template>
+```
+## TypeScript
+All types are exported for use in your TypeScript projects:
+```ts
+import ApexSankey, {
+  GraphData,
+  Node,
+  Edge,
+  SankeyOptions,
+  CommonOptions,
+  NodeOptions,
+  EdgeOptions,
+  FontOptions,
+  TooltipOptions,
+  SankeyGraph
+} from 'vue-apexsankey'
+```
+## SSR Support
+This component is SSR-safe. It renders an empty container on the server and only initializes the chart client-side after the component is mounted.
+## Browser Support
+- Vue 3.3+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+## License
+See [LICENSE](./LICENSE) file for details.
+## Links
+- [ApexSankey Documentation](https://apexcharts.com/docs/sankey)
+- [ApexSankey GitHub](https://github.com/apexcharts/apexsankey)

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,269 @@
+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';
+/**
+ * props definition
+ */
+declare type __VLS_Props = {
+    /** sankey diagram data (nodes and edges) */
+    data: GraphData;
+    /** configuration options for the diagram */
+    options?: Partial<SankeyOptions>;
+};
+/**
+ * props for the ApexSankey vue component
+ */
+export declare interface ApexSankeyProps {
+    /** sankey diagram data (nodes and edges) */
+    data: GraphData;
+    /** configuration options for the diagram */
+    options?: Partial<SankeyOptions>;
+    /** css class name for the container element */
+    class?: string;
+    /** inline styles for the container element */
+    style?: CSSProperties;
+}
+/**
+ * exposed ref interface for accessing the sankey instance
+ */
+export declare interface ApexSankeyRef {
+    /** the underlying SankeyGraph instance */
+    graph: SankeyGraph | null;
+    /** the container html element */
+    element: HTMLElement | null;
+}
+/**
+ * common options for the sankey diagram
+ */
+export declare interface CommonOptions {
+    /** css styles for canvas root container */
+    readonly canvasStyle?: string;
+    /** enable/disable graph toolbar */
+    readonly enableToolbar?: boolean;
+    /** height of graph container */
+    readonly height?: number | string;
+    /** spacing from top and left of graph container */
+    readonly spacing?: number;
+    /** viewport height */
+    readonly viewPortHeight?: number;
+    /** viewport width */
+    readonly viewPortWidth?: number;
+    /** width of graph container */
+    readonly width?: number | string;
+}
+/**
+ * data options for custom ordering and link alignment
+ */
+export declare interface DataOptions {
+    /** custom node ordering - list of layers, each containing bands of node ids */
+    readonly order?: string[][][];
+    /** whether to align link types across nodes */
+    readonly alignLinkTypes?: boolean;
+}
+declare const _default: DefineComponent<__VLS_Props, {
+/** the underlying SankeyGraph instance (reactive ref) */
+graph: ShallowRef<SankeyGraph | null, SankeyGraph | null>;
+/** the container html element */
+element: Ref<HTMLElement | null, HTMLElement | null>;
+/** whether the chart is ready */
+isReady: Ref<boolean, boolean>;
+/** manually re-render the chart */
+render: () => void;
+/** destroy the chart */
+destroy: () => void;
+/** recreate the chart with current options */
+recreate: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+export { _default as ApexSankey }
+export default _default;
+/**
+ * edge definition connecting two nodes
+ */
+export declare interface Edge {
+    /** source node id */
+    readonly source: string;
+    /** target node id */
+    readonly target: string;
+    /** edge weight/size */
+    readonly value: number;
+    /** optional grouping type */
+    readonly type?: string;
+    /** optional custom color for the edge */
+    readonly color?: string;
+}
+/**
+ * edge styling options
+ */
+export declare interface EdgeOptions {
+    /** enable gradient fill based on source and target node colors */
+    readonly edgeGradientFill?: boolean;
+    /** opacity value for edges (0 to 1) */
+    readonly edgeOpacity?: number;
+}
+/**
+ * font styling options
+ */
+export declare interface FontOptions {
+    /** font color of node labels */
+    readonly fontColor?: string;
+    /** font family of node labels */
+    readonly fontFamily?: string;
+    /** font size of node labels */
+    readonly fontSize?: string;
+    /** font weight of node labels */
+    readonly fontWeight?: string;
+}
+/**
+ * graph data structure containing nodes, edges, and optional configuration
+ */
+export declare interface GraphData {
+    /** array of nodes */
+    readonly nodes: Node_2[];
+    /** array of edges connecting nodes */
+    readonly edges: Edge[];
+    /** optional data-level options */
+    readonly options?: DataOptions;
+}
+/**
+ * node definition for sankey diagram
+ */
+declare interface Node_2 {
+    /** unique identifier for the node */
+    readonly id: string;
+    /** display label for the node */
+    readonly title: string;
+    /** optional custom color for the node */
+    readonly color?: string;
+}
+export { Node_2 as Node }
+/**
+ * node styling options
+ */
+export declare interface NodeOptions {
+    /** border color of nodes */
+    readonly nodeBorderColor?: string;
+    /** border width of nodes in pixels */
+    readonly nodeBorderWidth?: number;
+    /** width of graph nodes */
+    readonly nodeWidth?: number;
+    /** callback function for node click */
+    readonly onNodeClick?: (node: Node_2) => void;
+}
+/**
+ * sankey graph instance returned by ApexSankey
+ */
+export declare interface SankeyGraph {
+    /** the graphlib graph instance */
+    graph: unknown;
+    /** maximum rank in the graph */
+    maxRank: number;
+    /** re-render the graph */
+    render: (options?: {
+        keepOldPosition?: boolean;
+    }) => void;
+    /** clear the canvas */
+    clear: () => void;
+    /** export to svg */
+    exportToSvg: () => void;
+    /** canvas height */
+    height: number;
+    /** canvas width */
+    width: number;
+    /** canvas spacing */
+    spacing: number;
+}
+/**
+ * complete sankey options combining all option interfaces
+ */
+export declare type SankeyOptions = CommonOptions & NodeOptions & EdgeOptions & FontOptions & TooltipOptions;
+/**
+ * sets the license key for ApexSankey
+ * call this once at app initialization before rendering any charts
+ *
+ * @param key - the license key string
+ *
+ * @example
+ * ```ts
+ * import { setApexSankeyLicense } from 'vue-apexsankey'
+ *
+ * // call at app initialization
+ * setApexSankeyLicense('your-license-key-here')
+ * ```
+ */
+export declare function setApexSankeyLicense(key: string): void;
+/**
+ * content passed to tooltip template function
+ */
+export declare interface TooltipContent {
+    source: Node_2;
+    target: Node_2;
+    value: number;
+}
+/**
+ * tooltip configuration options
+ */
+export declare interface TooltipOptions {
+    /** enable tooltip on hover */
+    readonly enableTooltip?: boolean;
+    /** background color of tooltip */
+    readonly tooltipBGColor?: string;
+    /** border color of tooltip */
+    readonly tooltipBorderColor?: string;
+    /** tooltip html element id */
+    readonly tooltipId?: string;
+    /** html template function for tooltip */
+    readonly tooltipTemplate?: (content: TooltipContent) => string;
+}
+/**
+ * composable for managing ApexSankey instance lifecycle
+ */
+export declare function useSankey({ containerRef, data, options }: UseSankeyOptions): {
+    /** the sankey graph instance */
+    graph: ShallowRef<SankeyGraph | null, SankeyGraph | null>;
+    /** whether the chart is ready */
+    isReady: Ref<boolean, boolean>;
+    /** manually re-render the chart */
+    render: () => void;
+    /** destroy the chart */
+    destroy: () => void;
+    /** recreate the chart with current options */
+    recreate: () => void;
+};
+/**
+ * options for useSankey composable
+ */
+export declare interface UseSankeyOptions {
+    /** ref to the container element */
+    containerRef: Ref<HTMLElement | null>;
+    /** sankey data */
+    data: Ref<GraphData>;
+    /** sankey options */
+    options?: Ref<Partial<SankeyOptions> | undefined>;
+}
+export { }

package/dist/vue-apexsankey.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .apex-sankey-container[data-v-b70ceb71]{width:100%;height:100%}

package/dist/vue-apexsankey.js ADDED Viewed

@@ -0,0 +1,114 @@
+import { shallowRef as y, ref as h, onMounted as w, onBeforeUnmount as m, watch as k, defineComponent as S, toRef as x, computed as g, createElementBlock as _, openBlock as A, normalizeStyle as b } from "vue";
+function L({ containerRef: o, data: a, options: e }) {
+  const n = y(null), r = y(null), s = h(!1);
+  function f() {
+    return typeof window > "u" ? null : window.ApexSankey || null;
+  }
+  function i() {
+    if (!o.value)
+      return;
+    const t = f();
+    if (!t) {
+      console.error(
+        "[vue-apexsankey] ApexSankey not found. Make sure to import apexsankey and @svgdotjs/svg.js before using this component."
+      );
+      return;
+    }
+    r.value = new t(o.value, (e == null ? void 0 : e.value) || {}), n.value = r.value.render(a.value), s.value = !0;
+  }
+  function c() {
+    var t, u;
+    !r.value || !o.value || ((u = (t = n.value) == null ? void 0 : t.clear) == null || u.call(t), n.value = r.value.render(a.value));
+  }
+  function l() {
+    var t, u;
+    n.value && ((u = (t = n.value).clear) == null || u.call(t)), o.value && (o.value.innerHTML = ""), n.value = null, r.value = null, s.value = !1;
+  }
+  function p() {
+    l(), i();
+  }
+  return w(() => {
+    i();
+  }), m(() => {
+    l();
+  }), k(
+    a,
+    () => {
+      s.value && c();
+    },
+    { deep: !0 }
+  ), k(
+    () => e == null ? void 0 : e.value,
+    () => {
+      s.value && p();
+    },
+    { deep: !0 }
+  ), {
+    /** the sankey graph instance */
+    graph: n,
+    /** whether the chart is ready */
+    isReady: s,
+    /** manually re-render the chart */
+    render: c,
+    /** destroy the chart */
+    destroy: l,
+    /** recreate the chart with current options */
+    recreate: p
+  };
+}
+const M = /* @__PURE__ */ S({
+  __name: "ApexSankey",
+  props: {
+    data: {},
+    options: {}
+  },
+  setup(o, { expose: a }) {
+    const e = o, n = h(null), r = x(e, "data"), s = x(e, "options"), { graph: f, isReady: i, render: c, destroy: l, recreate: p } = L({
+      containerRef: n,
+      data: r,
+      options: s
+    }), t = g(() => {
+      var d, v;
+      const u = {};
+      return (d = e.options) != null && d.width && (u.width = typeof e.options.width == "number" ? `${e.options.width}px` : e.options.width), (v = e.options) != null && v.height && (u.height = typeof e.options.height == "number" ? `${e.options.height}px` : e.options.height), u;
+    });
+    return a({
+      /** the underlying SankeyGraph instance (reactive ref) */
+      graph: f,
+      /** the container html element */
+      element: n,
+      /** whether the chart is ready */
+      isReady: i,
+      /** manually re-render the chart */
+      render: c,
+      /** destroy the chart */
+      destroy: l,
+      /** recreate the chart with current options */
+      recreate: p
+    }), (u, d) => (A(), _("div", {
+      ref_key: "containerRef",
+      ref: n,
+      class: "apex-sankey-container",
+      style: b(t.value)
+    }, null, 4));
+  }
+}), R = (o, a) => {
+  const e = o.__vccOpts || o;
+  for (const [n, r] of a)
+    e[n] = r;
+  return e;
+}, j = /* @__PURE__ */ R(M, [["__scopeId", "data-v-b70ceb71"]]);
+function $(o) {
+  if (typeof window > "u")
+    return;
+  const a = window.ApexSankey;
+  a && typeof a.setLicense == "function" ? a.setLicense(o) : console.warn(
+    "[vue-apexsankey] ApexSankey not found. Make sure apexsankey is loaded before calling setApexSankeyLicense."
+  );
+}
+export {
+  j as ApexSankey,
+  j as default,
+  $ as setApexSankeyLicense,
+  L as useSankey
+};

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

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,65 @@
+{
+  "name": "vue-apexsankey",
+  "version": "1.0.0",
+  "description": "Vue 3 wrapper for ApexSankey - A JavaScript library to create Sankey diagrams",
+  "type": "module",
+  "main": "./dist/vue-apexsankey.umd.cjs",
+  "module": "./dist/vue-apexsankey.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/vue-apexsankey.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/vue-apexsankey.umd.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "apexsankey": ">=1.2.0",
+    "vue": ">=3.3.0",
+    "@svgdotjs/svg.js": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0",
+    "apexsankey": "^1.2.5",
+    "@svgdotjs/svg.js": "^3.2.4"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "sankey",
+    "diagram",
+    "chart",
+    "visualization",
+    "apexsankey",
+    "svg"
+  ],
+  "author": "",
+  "license": "See LICENSE in LICENSE",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": ""
+}