@moda-chart/vue2 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 park-taejoon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,4 @@
+# @moda-chart/vue2
+
+`@moda-chart/core`의 Vue 2.7 어댑터 — composable + SFC.
+Vue 2.7의 composition API를 사용한다.

package/dist/ChartView.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import {
+  defineComponent,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+} from "vue";
+import { attachChartView } from "@moda-chart/core";
+import type { ChartCore } from "@moda-chart/core";
+
+// Vue 2.7 렌더러 — 루트 $el에 공용 DOM 렌더러를 연결한다.
+export default defineComponent({
+  name: "ChartView",
+  props: {
+    chart: { type: Object as () => ChartCore, required: true },
+  },
+  setup(props) {
+    const vm = getCurrentInstance();
+    let detach: (() => void) | undefined;
+    onMounted(() => {
+      detach = attachChartView(vm!.proxy!.$el as HTMLElement, props.chart);
+    });
+    onBeforeUnmount(() => detach?.());
+  },
+});
+</script>
+
+<template>
+  <div></div>
+</template>

package/dist/conformance.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=conformance.test.d.ts.map

package/dist/conformance.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformance.test.d.ts","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":""}

package/dist/conformance.test.js

@@ -0,0 +1,26 @@
+// @vitest-environment happy-dom
+import Vue from "vue";
+import { runChartConformance } from "@moda-chart/core/conformance";
+import { ChartCore } from "@moda-chart/core";
+import ChartView from "./ChartView.vue";
+// Vue 2.7 렌더러 — $mount(el)은 el을 대체하므로, 호스트 div에 마운트 결과를 넣는다
+runChartConformance("vue2", async (opts) => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const chart = new ChartCore(opts);
+    const vm = new Vue({
+        render: (h) => h(ChartView, { props: { chart } }),
+    }).$mount();
+    el.appendChild(vm.$el);
+    await vm.$nextTick();
+    return {
+        el,
+        chart,
+        flush: () => vm.$nextTick(),
+        destroy: () => {
+            vm.$destroy();
+            el.remove();
+        },
+    };
+});
+//# sourceMappingURL=conformance.test.js.map

package/dist/conformance.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformance.test.js","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,4DAA4D;AAC5D,mBAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACzC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;QACjB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAgB,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;KACzD,CAAC,CAAC,MAAM,EAAE,CAAC;IACZ,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACvB,MAAM,EAAE,CAAC,SAAS,EAAE,CAAC;IACrB,OAAO;QACL,EAAE;QACF,KAAK;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE;QAC3B,OAAO,EAAE,GAAG,EAAE;YACZ,EAAE,CAAC,QAAQ,EAAE,CAAC;YACd,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { useChart, useChartState } from "./useChart.js";
+export type { UseChartReturn } from "./useChart.js";
+export { default as ChartView } from "./ChartView.vue";
+export type { AnnotationInput, CategoryValue, Chart, ChartCoreOptions, ChartEventHandlers, ChartEventMap, ChartEventType, ChartChordOptions, ChartFlowLink, ChartGaugeOptions, ChartHeatmapOptions, ChartLocale, ChartMapDatum, ChartMapLine, ChartMapOptions, ChartMapPoint, ChartBoxInput, ChartMenuItem, ChartContextMenuOptions, ItemStyle, ItemStyleContext, TooltipRenderContext, ChartDrawingOptions, ChartSearchOptions, ChartPictogramOptions, ChartPyramidPopOptions, ChartState, DrawingInput, DrawingView, DrawTool, SearchLoadArgs, PictoIconView, PictoRowView, SparklineOptions, ChartPointInput, ChartSankeyOptions, ChartSeriesInput, ChartSnapshot, ChartTheme, ChartTreeNode, ChartType, DrilldownLevel, MapProjection, MarkBandInput, MarkLineInput, } from "@moda-chart/core";
+export { ChartCore, mountSparkline, parseDataXml, parseText, sparklineMarkup, WORLD_TOPOLOGY, } from "@moda-chart/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EACV,eAAe,EACf,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,EACb,aAAa,EACb,uBAAuB,EACvB,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,cAAc,EACd,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,cAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,SAAS,EACT,cAAc,EACd,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,GACf,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { useChart, useChartState } from "./useChart.js";
+export { default as ChartView } from "./ChartView.vue";
+export { ChartCore, mountSparkline, parseDataXml, parseText, sparklineMarkup, WORLD_TOPOLOGY, } from "@moda-chart/core";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAgDvD,OAAO,EACL,SAAS,EACT,cAAc,EACd,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,GACf,MAAM,kBAAkB,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+@import "@moda-chart/core/styles.css";

package/dist/useChart.d.ts

@@ -0,0 +1,19 @@
+import type { Ref } from "vue";
+import { ChartCore } from "@moda-chart/core";
+import type { ChartCoreOptions, ChartSnapshot } from "@moda-chart/core";
+export interface UseChartReturn {
+    chart: ChartCore;
+    state: Ref<ChartSnapshot>;
+    unsubscribe(): void;
+}
+/**
+ * Vue 2.7 어댑터 composable — 코어 생성 + 스냅샷을 shallowRef로 구독.
+ * 컴포넌트 스코프 안에서만 getCurrentScope 기반 자동 해제된다.
+ */
+export declare function useChart(options: ChartCoreOptions): UseChartReturn;
+/** 외부에서 만든 ChartCore의 스냅샷만 구독한다 */
+export declare function useChartState(chart: ChartCore): {
+    state: Ref<ChartSnapshot>;
+    unsubscribe: () => void;
+};
+//# sourceMappingURL=useChart.d.ts.map

package/dist/useChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChart.d.ts","sourceRoot":"","sources":["../src/useChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC1B,WAAW,IAAI,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,cAAc,CAQlE;AAED,mCAAmC;AACnC,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG;IAC/C,KAAK,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAOA"}

package/dist/useChart.js

@@ -0,0 +1,27 @@
+import { getCurrentScope, onScopeDispose, shallowRef } from "vue";
+import { ChartCore } from "@moda-chart/core";
+/**
+ * Vue 2.7 어댑터 composable — 코어 생성 + 스냅샷을 shallowRef로 구독.
+ * 컴포넌트 스코프 안에서만 getCurrentScope 기반 자동 해제된다.
+ */
+export function useChart(options) {
+    const chart = new ChartCore(options);
+    const state = shallowRef(chart.getSnapshot());
+    const unsubscribe = chart.subscribe(() => {
+        state.value = chart.getSnapshot();
+    });
+    if (getCurrentScope())
+        onScopeDispose(unsubscribe);
+    return { chart, state: state, unsubscribe };
+}
+/** 외부에서 만든 ChartCore의 스냅샷만 구독한다 */
+export function useChartState(chart) {
+    const state = shallowRef(chart.getSnapshot());
+    const unsubscribe = chart.subscribe(() => {
+        state.value = chart.getSnapshot();
+    });
+    if (getCurrentScope())
+        onScopeDispose(unsubscribe);
+    return { state: state, unsubscribe };
+}
+//# sourceMappingURL=useChart.js.map

package/dist/useChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChart.js","sourceRoot":"","sources":["../src/useChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAS7C;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,OAAyB;IAChD,MAAM,KAAK,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACvC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IACH,IAAI,eAAe,EAAE;QAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAA2B,EAAE,WAAW,EAAE,CAAC;AACpE,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,aAAa,CAAC,KAAgB;IAI5C,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACvC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IACH,IAAI,eAAe,EAAE;QAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,EAAE,KAA2B,EAAE,WAAW,EAAE,CAAC;AAC7D,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@moda-chart/vue2",
+  "version": "0.1.2",
+  "description": "Vue 2.7 adapter for @moda-chart — useChart + ChartView",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue2",
+    "adapter",
+    "headless",
+    "library"
+  ],
+  "dependencies": {
+    "@moda-chart/core": "0.1.2"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.4",
+    "happy-dom": "^20.14.5",
+    "typescript": "~5.9.2",
+    "vitest": "^3.2.7",
+    "vue": "2.7.16"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/styles.css src/ChartView.vue dist/",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "dev": "tsc -p tsconfig.json --watch",
+    "test": "vitest run"
+  },
+  "main": "./dist/index.js"
+}