@moda-chart/vue 0.0.0-stage → 0.1.3

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

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @moda-chart/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@moda-chart/core`의 Vue 3 어댑터 — composable + SFC.
+
+```vue
+<script setup>
+import { ChartView, useChart } from "@moda-chart/vue";
+import "@moda-chart/vue/styles.css";
+const { chart } = useChart({ type: "line", series, categories });
+</script>
+
+<template><ChartView :chart="chart" /></template>
+```

package/dist/ChartView.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import { attachChartView } from "@moda-chart/core";
+import type { ChartCore } from "@moda-chart/core";
+
+// Vue 3 렌더러 — 공용 DOM 렌더러를 호스트 div에 연결한다.
+const props = defineProps<{ chart: ChartCore }>();
+const el = ref<HTMLDivElement>();
+let detach: (() => void) | undefined;
+
+onMounted(() => {
+  detach = attachChartView(el.value!, props.chart);
+});
+onUnmounted(() => detach?.());
+</script>
+
+<template>
+  <div ref="el"></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,24 @@
+// @vitest-environment happy-dom
+import { createApp, h, nextTick } from "vue";
+import { runChartConformance } from "@moda-chart/core/conformance";
+import { ChartCore } from "@moda-chart/core";
+import ChartView from "./ChartView.vue";
+// Vue 3 렌더러 — createApp 마운트 + nextTick flush
+runChartConformance("vue", async (opts) => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const chart = new ChartCore(opts);
+    const app = createApp({ render: () => h(ChartView, { chart }) });
+    app.mount(el);
+    await nextTick();
+    return {
+        el,
+        chart,
+        flush: () => nextTick(),
+        destroy: () => {
+            app.unmount();
+            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,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,6CAA6C;AAC7C,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACxC,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,GAAG,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IACjE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACd,MAAM,QAAQ,EAAE,CAAC;IACjB,OAAO;QACL,EAAE;QACF,KAAK;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;QACvB,OAAO,EAAE,GAAG,EAAE;YACZ,GAAG,CAAC,OAAO,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,21 @@
+import type { ShallowRef } from "vue";
+import { ChartCore } from "@moda-chart/core";
+import type { ChartCoreOptions, ChartSnapshot } from "@moda-chart/core";
+export interface UseChartReturn {
+    /** 헤드리스 코어 — 액션 호출용 */
+    chart: ChartCore;
+    /** 렌더용 스냅샷 (ShallowRef — 통째 교체 구조) */
+    state: ShallowRef<ChartSnapshot>;
+    unsubscribe(): void;
+}
+/**
+ * Vue 3 어댑터 composable — 코어 생성 + 스냅샷을 ShallowRef로 구독.
+ * 컴포넌트/이펙트 스코프 안에서 호출하면 onScopeDispose로 자동 해제된다.
+ */
+export declare function useChart(options: ChartCoreOptions): UseChartReturn;
+/** 외부에서 만든 ChartCore의 스냅샷만 구독한다 */
+export declare function useChartState(chart: ChartCore): {
+    state: ShallowRef<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,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,WAAW,cAAc;IAC7B,uBAAuB;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACjC,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,UAAU,CAAC,aAAa,CAAC,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAOA"}

package/dist/useChart.js

@@ -0,0 +1,25 @@
+import { onScopeDispose, shallowRef } from "vue";
+import { ChartCore } from "@moda-chart/core";
+/**
+ * Vue 3 어댑터 composable — 코어 생성 + 스냅샷을 ShallowRef로 구독.
+ * 컴포넌트/이펙트 스코프 안에서 호출하면 onScopeDispose로 자동 해제된다.
+ */
+export function useChart(options) {
+    const chart = new ChartCore(options);
+    const state = shallowRef(chart.getSnapshot());
+    const unsubscribe = chart.subscribe(() => {
+        state.value = chart.getSnapshot();
+    });
+    onScopeDispose(unsubscribe, true);
+    return { chart, state: state, unsubscribe };
+}
+/** 외부에서 만든 ChartCore의 스냅샷만 구독한다 */
+export function useChartState(chart) {
+    const state = shallowRef(chart.getSnapshot());
+    const unsubscribe = chart.subscribe(() => {
+        state.value = chart.getSnapshot();
+    });
+    onScopeDispose(unsubscribe, true);
+    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,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAW7C;;;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,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAkC,EAAE,WAAW,EAAE,CAAC;AAC3E,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,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,EAAE,KAAK,EAAE,KAAkC,EAAE,WAAW,EAAE,CAAC;AACpE,CAAC"}

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@moda-chart/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.3",
+  "description": "Vue 3 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": [
+    "vue",
+    "adapter",
+    "headless",
+    "library"
+  ],
+  "dependencies": {
+    "@moda-chart/core": "0.1.3"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "happy-dom": "^20.14.5",
+    "typescript": "~5.9.2",
+    "vitest": "^3.2.7",
+    "vue": "^3.5.0"
+  },
+  "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"
 }