@freereportjs/vue 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,86 @@
+FreeReport License
+Version 1.0, 2026-10-15
+
+Copyright (c) 2026 2nd Korea (세컨드코리아). All rights reserved.
+Contact: help@2nd-korea.com · https://freereport.app/pricing/
+
+This license covers the FreeReport software, including the packages @freereportjs/core,
+@freereportjs/react, @freereportjs/vue, @freereportjs/svelte and @freereportjs/angular, the
+FreeReport Windows programs, their source code and the files built from them (the "Software").
+
+1. Personal use is free
+
+   An individual may use, copy and modify the Software free of charge for personal,
+   educational, research or other non-commercial purposes, including personal websites,
+   open-source projects that are not run by a company, and learning or evaluation.
+
+2. Company use needs a domain license
+
+   Any use by or for a company, organization, public body or other business ("Company"),
+   whether the product is sold, used internally or offered to customers, requires a paid
+   Company License. A Company may evaluate the Software for up to 30 days without a license.
+
+   - A Company License is issued for one domain (for example example.com) and covers that
+     domain and its www host (www.example.com). Each other subdomain (for example
+     erp.example.com) needs its own Company License, unless the license is issued for
+     *.example.com. Applications without a domain (intranets reached by address, desktop
+     applications) count as one domain per installation site.
+   - Annual license: KRW 500,000 per domain per year. Valid for one year from the date it is
+     issued; renewable. All updates released during the term are included.
+   - Perpetual license: KRW 900,000 per domain, paid once. It does not expire. Versions
+     released within one year of the issue date are covered; later versions need a renewal
+     of updates.
+   - With the FreeReport Windows programs (such as the local print agent) the fees are doubled:
+     KRW 1,000,000 per domain per year, or KRW 1,800,000 perpetual.
+   - Fees exclude VAT. There is no limit on developers, end users or output volume.
+   - A license key is provided with each Company License. Setting the key removes the
+     console notice described in section 5.
+
+3. Conditions for all users
+
+   - Keep this license and the copyright notice in copies of the Software.
+   - Do not sell, rent or sublicense the Software itself, or offer it as a standalone
+     reporting component or library, with or without changes.
+   - Do not remove or work around the license check, or share license keys outside the
+     licensed domain.
+
+4. No warranty
+
+   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 ARISING FROM THE SOFTWARE OR ITS USE.
+
+5. Usage report
+
+   When the Software runs on a public domain (not localhost or a private network address),
+   it sends the domain name, the page address without query string, the Software version
+   and whether a license key is set to freereport.app once a day. No report data and no
+   information about end users is sent. Without a license key on such a domain it also
+   prints a notice in the browser developer console.
+
+---------------------------------------------------------------------------------------
+
+FreeReport 라이선스 (요약, 한국어)
+
+- 개인: 개인적·교육·연구 등 비상업적 용도로 무료로 사용, 복제, 수정할 수 있습니다.
+- 회사: 회사, 단체, 공공기관 등 업무용으로 쓰려면 판매용·내부용·고객 제공용 모두 유료
+  회사 라이선스가 필요합니다. 30일 동안은 평가 목적으로 라이선스 없이 써 볼 수 있습니다.
+  - 도메인 1개(www 포함) 또는 사내망 설치처 1곳 기준입니다. 다른 서브도메인은 별도
+    라이선스가 필요하며, *.example.com으로 발급하면 모든 서브도메인에 적용됩니다.
+  - 연간: 도메인당 연 500,000원. 발급일로부터 1년간 유효하며 기간 중 업데이트를 포함합니다.
+  - 영구: 도메인당 900,000원(1회). 기간 제한 없이 쓸 수 있고, 발급 후 1년 안에 나온
+    버전까지 포함합니다.
+  - Windows 프로그램(로컬 인쇄 에이전트 등)을 함께 쓰면 2배입니다: 연 1,000,000원 또는
+    영구 1,800,000원.
+  - 부가세 별도이며, 개발자·사용자·출력 건수 제한은 없습니다.
+  - 라이선스마다 키를 발급하며, 키를 설정하면 콘솔 안내가 사라집니다.
+- 모든 사용자: 저작권과 이 라이선스 문구를 유지해야 하며, 소프트웨어 자체를 판매하거나
+  별도 리포팅 라이브러리로 재배포할 수 없고, 라이선스 확인을 제거하거나 키를 다른
+  도메인에 공유할 수 없습니다.
+- 보증 없음: 소프트웨어는 있는 그대로 제공됩니다.
+- 사용 보고: 공개 도메인에서 실행되면 하루 한 번 도메인 이름, 쿼리 문자열을 뺀 페이지
+  주소, 버전, 라이선스 키 설정 여부를 freereport.app으로 보냅니다. 보고서 데이터나 최종
+  사용자 정보는 보내지 않습니다.
+
+문의: help@2nd-korea.com · 대표번호 070-7768-1326

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# @freereportjs/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.
+Vue 3 components for [FreeReport](https://freereport.app): the report viewer and the banded report designer.
+
+```bash
+npm i @freereportjs/core @freereportjs/vue
+```
+
+```vue
+<script setup>
+import { FreeReportDesigner, FreeReportViewer } from '@freereportjs/vue';
+import '@freereportjs/core/styles.css';
+</script>
+
+<template>
+  <FreeReportViewer ref="viewer" :definition="def" :data="{ rows }" lang="en" :height="720" />
+  <FreeReportDesigner v-model:definition="def" :data="{ rows }" @save="save" />
+</template>
+```
+
+The viewer exposes `viewer` and `report`, the designer `designer`. The designer emits `change` / `update:definition`
+after edits and `save`. Both default to `height: 100%` with a 480px minimum (`height` / `min-height` props).
+Docs: https://freereport.app/docs/
+
+## License
+
+Free for personal use. Company use needs a domain license: KRW 500,000 per domain per year, or KRW 900,000 once (perpetual)
+(VAT separate). See https://freereport.app/pricing/ and the LICENSE file.
+
+개인은 무료, 회사는 도메인당 연 50만 원 또는 영구 90만 원(부가세 별도)입니다. 자세한 내용은 https://freereport.app/pricing/
+
+```js
+import { setLicenseKey } from '@freereportjs/core';
+setLicenseKey('FR1....');   // or the licenseKey prop
+```

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { ReportDefinition, ReportData, DesignerOptions, ViewerOptions } from '@freereportjs/core';
+export { Designer, DesignerOptions, LayoutResult, OutputEvent, Report, ReportData, ReportDefinition, ReportOptions, Viewer, ViewerOptions, createReport, layoutReport } from '@freereportjs/core';
+
+/**
+ * `<FreeReportViewer :definition="def" :data="data" />`: toolbar, parameter panel and paged report.
+ * `definition`, `data`, `params` and `zoom` update the viewer in place; other props recreate it.
+ * Exposes `viewer` and `report` (template ref).
+ */
+declare const FreeReportViewer: vue.DefineComponent<vue.ExtractPropTypes<{
+    definition: {
+        type: PropType<ReportDefinition>;
+        required: true;
+    };
+    data: PropType<ReportData>;
+    /** Parameter values (merged over the definition's defaults). */
+    params: PropType<Record<string, unknown>>;
+    lang: PropType<ViewerOptions["lang"]>;
+    zoom: PropType<ViewerOptions["zoom"]>;
+    toolbar: PropType<ViewerOptions["toolbar"]>;
+    licenseKey: StringConstructor;
+    /** Called before every print/export; return false to cancel it. */
+    onOutput: PropType<ViewerOptions["onOutput"]>;
+    pdfSecurity: PropType<ViewerOptions["pdfSecurity"]>;
+    fileName: StringConstructor;
+    fetchData: PropType<ViewerOptions["fetchData"]>;
+    /** Host height; number = px. */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    minHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    definition: {
+        type: PropType<ReportDefinition>;
+        required: true;
+    };
+    data: PropType<ReportData>;
+    /** Parameter values (merged over the definition's defaults). */
+    params: PropType<Record<string, unknown>>;
+    lang: PropType<ViewerOptions["lang"]>;
+    zoom: PropType<ViewerOptions["zoom"]>;
+    toolbar: PropType<ViewerOptions["toolbar"]>;
+    licenseKey: StringConstructor;
+    /** Called before every print/export; return false to cancel it. */
+    onOutput: PropType<ViewerOptions["onOutput"]>;
+    pdfSecurity: PropType<ViewerOptions["pdfSecurity"]>;
+    fileName: StringConstructor;
+    fetchData: PropType<ViewerOptions["fetchData"]>;
+    /** Host height; number = px. */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    minHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    height: string | number;
+    minHeight: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * `<FreeReportDesigner v-model:definition="def" />`: the banded report designer.
+ * Emits `change` (and `update:definition`) after edits, debounced; `save` when the user presses Save
+ * (without a listener Save downloads the JSON). A new `definition` replaces the document, except the one it just emitted.
+ * Exposes `designer` (template ref).
+ */
+declare const FreeReportDesigner: vue.DefineComponent<vue.ExtractPropTypes<{
+    definition: PropType<ReportDefinition>;
+    /** Sample data for the field list and the preview. */
+    data: PropType<ReportData>;
+    lang: PropType<DesignerOptions["lang"]>;
+    zoom: NumberConstructor;
+    licenseKey: StringConstructor;
+    /** Host height; number = px. */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    minHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    change: (_def: ReportDefinition) => true;
+    'update:definition': (_def: ReportDefinition) => true;
+    save: (_def: ReportDefinition) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    definition: PropType<ReportDefinition>;
+    /** Sample data for the field list and the preview. */
+    data: PropType<ReportData>;
+    lang: PropType<DesignerOptions["lang"]>;
+    zoom: NumberConstructor;
+    licenseKey: StringConstructor;
+    /** Host height; number = px. */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    minHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{
+    onChange?: ((_def: ReportDefinition) => any) | undefined;
+    "onUpdate:definition"?: ((_def: ReportDefinition) => any) | undefined;
+    onSave?: ((_def: ReportDefinition) => any) | undefined;
+}>, {
+    height: string | number;
+    minHeight: string | number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FreeReportDesigner, FreeReportViewer };

package/dist/index.js

@@ -0,0 +1,144 @@
+// src/index.ts
+import {
+  createDesigner,
+  createViewer
+} from "@freereportjs/core";
+import { defineComponent, getCurrentInstance, h, onBeforeUnmount, onMounted, ref, toRaw, watch } from "vue";
+import { createReport, layoutReport } from "@freereportjs/core";
+var css = (v) => typeof v === "number" ? `${v}px` : v;
+var frame = (height, minHeight, inner) => h("div", { style: { position: "relative", height: css(height), minHeight: css(minHeight) } }, [
+  h("div", { ref: inner, style: { position: "absolute", inset: "0" } })
+]);
+var FreeReportViewer = defineComponent({
+  name: "FreeReportViewer",
+  props: {
+    definition: { type: Object, required: true },
+    data: [Object, Array],
+    /** Parameter values (merged over the definition's defaults). */
+    params: Object,
+    lang: String,
+    zoom: [Number, String],
+    toolbar: Object,
+    licenseKey: String,
+    /** Called before every print/export; return false to cancel it. */
+    onOutput: Function,
+    pdfSecurity: Object,
+    fileName: String,
+    fetchData: Function,
+    /** Host height; number = px. */
+    height: { type: [Number, String], default: "100%" },
+    minHeight: { type: [Number, String], default: 480 }
+  },
+  setup(props, { expose }) {
+    const host = ref(null);
+    let viewer = null;
+    const create = () => {
+      viewer?.destroy();
+      viewer = createViewer(host.value, {
+        definition: props.definition,
+        data: props.data,
+        params: props.params,
+        lang: props.lang,
+        zoom: props.zoom,
+        toolbar: props.toolbar,
+        licenseKey: props.licenseKey,
+        pdfSecurity: props.pdfSecurity,
+        fileName: props.fileName,
+        onOutput: (e) => props.onOutput?.(e),
+        fetchData: props.fetchData && ((params) => props.fetchData(params))
+      });
+    };
+    onMounted(create);
+    onBeforeUnmount(() => {
+      viewer?.destroy();
+      viewer = null;
+    });
+    watch(() => [props.definition, props.data], ([def, data], [oldDef, oldData]) => {
+      if (!viewer) return;
+      if (def !== oldDef) viewer.report.setDefinition(def);
+      if (data !== oldData) viewer.report.setData(data ?? {});
+      void viewer.refresh();
+    });
+    watch(() => props.params, (p) => void viewer?.setParams(p ?? {}));
+    watch(() => props.zoom, (z) => viewer?.setZoom(z ?? "width"));
+    watch(
+      () => JSON.stringify([props.lang, props.toolbar, props.licenseKey, props.pdfSecurity, props.fileName, !!props.fetchData]),
+      () => {
+        if (viewer) create();
+      }
+    );
+    expose({
+      get viewer() {
+        return viewer;
+      },
+      get report() {
+        return viewer?.report ?? null;
+      }
+    });
+    return () => frame(props.height, props.minHeight, host);
+  }
+});
+var FreeReportDesigner = defineComponent({
+  name: "FreeReportDesigner",
+  props: {
+    definition: Object,
+    /** Sample data for the field list and the preview. */
+    data: [Object, Array],
+    lang: String,
+    zoom: Number,
+    licenseKey: String,
+    /** Host height; number = px. */
+    height: { type: [Number, String], default: "100%" },
+    minHeight: { type: [Number, String], default: 480 }
+  },
+  emits: {
+    change: (_def) => true,
+    "update:definition": (_def) => true,
+    save: (_def) => true
+  },
+  setup(props, { emit, expose }) {
+    const host = ref(null);
+    const hasSave = !!getCurrentInstance()?.vnode.props?.onSave;
+    let designer = null;
+    let emitted = null;
+    const create = () => {
+      const current = designer?.getDefinition();
+      designer?.destroy();
+      designer = createDesigner(host.value, {
+        definition: current ?? (props.definition && toRaw(props.definition)),
+        data: props.data,
+        lang: props.lang,
+        zoom: props.zoom,
+        licenseKey: props.licenseKey,
+        onChange: (def) => {
+          emitted = def;
+          emit("change", def);
+          emit("update:definition", def);
+        },
+        onSave: hasSave ? (def) => emit("save", def) : void 0
+      });
+    };
+    onMounted(create);
+    onBeforeUnmount(() => {
+      designer?.destroy();
+      designer = null;
+    });
+    watch(() => props.definition, (def) => {
+      if (def && toRaw(def) !== emitted) designer?.setDefinition(toRaw(def));
+    });
+    watch(() => props.data, (d) => designer?.setData(d ?? {}));
+    watch(() => [props.lang, props.licenseKey], () => {
+      if (designer) create();
+    });
+    expose({ get designer() {
+      return designer;
+    } });
+    return () => frame(props.height, props.minHeight, host);
+  }
+});
+export {
+  FreeReportDesigner,
+  FreeReportViewer,
+  createReport,
+  layoutReport
+};

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@freereportjs/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Vue 3 components for FreeReport, the web reporting engine: report viewer and banded report designer (free for personal use).",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@freereportjs/core": "^0.1.0",
+    "vue": ">=3.3"
+  },
+  "devDependencies": {
+    "@freereportjs/core": "^0.1.0",
+    "@vue/test-utils": "^2.5.1",
+    "jsdom": "^30.1.2",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "vitest": "^5.0.4",
+    "vue": ">=3.3"
+  },
+  "keywords": [
+    "report",
+    "reporting",
+    "report-designer",
+    "vue",
+    "pdf",
+    "@freereportjs/core"
+  ],
+  "homepage": "https://freereport.app",
+  "author": "secondkorea",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json"
+  }
 }