@jsonup/vue 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Michael Cocova
+
+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,49 @@
+# @jsonup/vue
+
+供 `jsonup` JSON 查看器使用的 Vue 3 适配器和组件。
+
+## 特性
+
+- **Vue 3 集成**：提供 `<JsonupViewer />` 组件和 `useJsonDocument` 组合式函数。
+- **高性能**：内置支持通过虚拟滚动（由 `virtua` 驱动）平滑渲染 10w+ 级 JSON 节点。
+- **交互性**：支持节点的展开/折叠、选中和复制。
+- **高度可定制**：提供插槽，用于深度定制行、属性和值的渲染。
+
+## 安装
+
+```bash
+npm install @jsonup/vue @jsonup/core @jsonup/themes
+# 或
+pnpm add @jsonup/vue @jsonup/core @jsonup/themes
+# 或
+yarn add @jsonup/vue @jsonup/core @jsonup/themes
+```
+
+## 基础用法
+
+```vue
+<script setup>
+import { githubLight } from "@jsonup/themes";
+import { JsonupViewer } from "@jsonup/vue";
+
+// 引入样式
+import "@jsonup/vue/style.css";
+
+const data = {
+  hello: "world",
+  items: [1, 2, 3],
+};
+</script>
+
+<template>
+  <JsonupViewer :data="data" :theme="githubLight" virtual />
+</template>
+```
+
+## 文档
+
+如需获取完整文档、API 详细信息以及更多示例，请访问 [jsonup 官方文档](https://github.com/cocoa/jsonup)。
+
+## 许可证
+
+[MIT](../../LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,274 @@
+import { CreateDocumentOptions, JsonDocument, JsonInput, JsonNode, JsonNodeId, JsonNodeIdentity } from "@jsonup/core";
+import { InsertInput, MoveOptions } from "@jsonup/operation";
+import { PropType, SlotsType, VNodeChild } from "vue";
+import { JsonupTheme } from "@jsonup/themes";
+
+//#region src/viewer-lines.d.ts
+/**
+ * Jsonup 查看器行类型
+ * - `open`: 展开容器的起始行（包含起始括号）
+ * - `property`: 属性行（包含键值对）
+ * - `close`: 展开容器的结束行（包含结束括号）
+ * - `collapsed`: 折叠的容器行
+ */
+type JsonupViewerLineKind = 'open' | 'property' | 'close' | 'collapsed';
+/**
+ * Jsonup 查看器行接口定义
+ */
+interface JsonupViewerLine {
+  /** 行的唯一标识符 */
+  id: string;
+  /** 行的类型 */
+  kind: JsonupViewerLineKind;
+  /** 关联的 JSON 节点 */
+  node: JsonNode;
+  /** 节点在树中的深度 */
+  depth: number;
+  /** 行的纯文本内容 */
+  text: string;
+  /** 行号（从 1 开始） */
+  lineNumber: number;
+  /** 行是否可交互（例如点击展开/折叠） */
+  interactive: boolean;
+}
+/**
+ * 基于可见节点创建查看器行数组
+ * @param document JSON 文档对象
+ * @param visibleNodes 可见的 JSON 节点数组
+ * @returns 生成的查看器行数组
+ */
+declare function createViewerLines(document: JsonDocument, visibleNodes: JsonNode[]): JsonupViewerLine[];
+//#endregion
+//#region src/JsonupViewer.d.ts
+/**
+ * 查看器行插槽的属性接口
+ */
+interface JsonupViewerLineSlotProps {
+  /** 当前行对象 */
+  line: JsonupViewerLine;
+  /** 行的纯文本内容 */
+  text: string;
+  /** 行号（从 1 开始） */
+  lineNumber: number;
+  /** 切换节点展开/折叠状态的函数 */
+  toggle: () => void;
+}
+/**
+ * JSON 树形查看器组件
+ */
+declare const JsonupViewer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 传入的 JSON 数据或已创建的 JSON 文档对象 */data: {
+    type: PropType<JsonInput | JsonDocument>;
+    required: true;
+  }; /** 是否显示行号 */
+  lineNumbers: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 是否开启虚拟滚动 */
+  virtual: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 默认是否展开根节点 */
+  defaultExpandedRoot: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 默认是否展开所有节点 */
+  defaultExpandedAll: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 默认展开的深度 */
+  defaultExpandedDepth: {
+    type: PropType<number | true>;
+    default: undefined;
+  }; /** 默认展开的节点路径集合 */
+  expandedPaths: {
+    type: PropType<Iterable<string>>;
+    default: undefined;
+  }; /** 节点的身份标识树，用于保持节点状态 */
+  identityTree: {
+    type: PropType<JsonNodeIdentity>;
+    default: undefined;
+  }; /** 是否克隆原始数据（避免修改原对象） */
+  cloneRaw: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 主题配置对象 */
+  theme: {
+    type: PropType<JsonupTheme | null>;
+    default: null;
+  }; /** 是否开启单词换行 */
+  wordWrap: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 传入的 JSON 数据或已创建的 JSON 文档对象 */data: {
+    type: PropType<JsonInput | JsonDocument>;
+    required: true;
+  }; /** 是否显示行号 */
+  lineNumbers: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 是否开启虚拟滚动 */
+  virtual: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 默认是否展开根节点 */
+  defaultExpandedRoot: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 默认是否展开所有节点 */
+  defaultExpandedAll: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 默认展开的深度 */
+  defaultExpandedDepth: {
+    type: PropType<number | true>;
+    default: undefined;
+  }; /** 默认展开的节点路径集合 */
+  expandedPaths: {
+    type: PropType<Iterable<string>>;
+    default: undefined;
+  }; /** 节点的身份标识树，用于保持节点状态 */
+  identityTree: {
+    type: PropType<JsonNodeIdentity>;
+    default: undefined;
+  }; /** 是否克隆原始数据（避免修改原对象） */
+  cloneRaw: {
+    type: BooleanConstructor;
+    default: boolean;
+  }; /** 主题配置对象 */
+  theme: {
+    type: PropType<JsonupTheme | null>;
+    default: null;
+  }; /** 是否开启单词换行 */
+  wordWrap: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>> & Readonly<{}>, {
+  lineNumbers: boolean;
+  virtual: boolean;
+  defaultExpandedRoot: boolean;
+  defaultExpandedAll: boolean;
+  defaultExpandedDepth: number | true;
+  expandedPaths: Iterable<string>;
+  identityTree: JsonNodeIdentity;
+  cloneRaw: boolean;
+  theme: JsonupTheme | null;
+  wordWrap: boolean;
+}, SlotsType<{
+  /** 自定义所有类型行的渲染，优先级低于特定类型的插槽 */line?: (props: JsonupViewerLineSlotProps) => VNodeChild; /** 自定义展开起始行的渲染 */
+  open?: (props: JsonupViewerLineSlotProps) => VNodeChild; /** 自定义属性行的渲染 */
+  property?: (props: JsonupViewerLineSlotProps) => VNodeChild; /** 自定义展开结束行的渲染 */
+  close?: (props: JsonupViewerLineSlotProps) => VNodeChild; /** 自定义折叠行的渲染 */
+  collapsed?: (props: JsonupViewerLineSlotProps) => VNodeChild; /** 自定义行号的渲染 */
+  lineNumber?: (props: JsonupViewerLineSlotProps) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/index.d.ts
+/**
+ * useJsonDocument 组合式函数的选项接口
+ */
+interface UseJsonDocumentOptions extends CreateDocumentOptions {}
+/**
+ * 用于管理和操作 JSON 文档的 Vue 组合式函数
+ * @param input 初始 JSON 输入数据或已存在的 JSON 文档
+ * @param options 创建文档时的配置选项
+ * @returns 包含文档状态和一系列操作方法的对象
+ */
+declare function useJsonDocument(input: JsonInput | JsonDocument, options?: UseJsonDocumentOptions): {
+  /** 当前的 JSON 文档对象 */document: import("vue").ShallowRef<JsonDocument, JsonDocument>; /** 文档中的所有节点列表 */
+  nodes: import("vue").ComputedRef<import("@jsonup/core").JsonNode[]>; /** 当前处于可见状态的节点列表（父节点已展开的节点） */
+  visibleNodes: import("vue").ComputedRef<import("@jsonup/core").JsonNode[]>; /** 当前已展开节点的路径集合 */
+  expandedPaths: import("vue").ComputedRef<Set<string>>;
+  /**
+   * 设置新的文档数据
+   * @param nextInput 新的 JSON 输入数据或文档
+   * @returns 新创建的 JSON 文档对象
+   */
+  setDocument: (nextInput: JsonInput | JsonDocument) => JsonDocument;
+  /**
+   * 重置文档数据（等同于 setDocument）
+   * @param nextInput 新的 JSON 输入数据或文档
+   * @returns 新创建的 JSON 文档对象
+   */
+  reset: (nextInput: JsonInput | JsonDocument) => JsonDocument; /** 文档的当前内部状态 */
+  state: import("vue").ComputedRef<import("@jsonup/core").JsonDocumentState>;
+  /**
+   * 切换指定节点的展开/折叠状态
+   * @param id 节点 ID
+   * @param expanded 可选的强制状态，true 为展开，false 为折叠
+   * @returns 更新后的 JSON 文档对象
+   */
+  toggleExpanded: (id: JsonNodeId, expanded?: boolean) => JsonDocument;
+  /**
+   * 更新指定节点的值
+   * @param id 节点 ID
+   * @param value 新的节点值
+   * @returns 更新后的 JSON 文档对象
+   */
+  updateValue: (id: JsonNodeId, value: unknown) => JsonDocument;
+  /**
+   * 在指定位置插入新节点
+   * @param id 目标节点 ID
+   * @param inputValue 要插入的输入值配置
+   * @returns 更新后的 JSON 文档对象
+   */
+  insert: (id: JsonNodeId, inputValue: InsertInput) => JsonDocument;
+  /**
+   * 移除指定节点
+   * @param id 节点 ID
+   * @returns 更新后的 JSON 文档对象
+   */
+  remove: (id: JsonNodeId) => JsonDocument;
+  /**
+   * 移动节点到新的父节点下
+   * @param id 要移动的节点 ID
+   * @param parentId 目标父节点 ID
+   * @param options 移动操作的高级选项
+   * @returns 更新后的 JSON 文档对象
+   */
+  move: (id: JsonNodeId, parentId: JsonNodeId, options?: MoveOptions) => JsonDocument;
+  /**
+   * 重命名节点键名（仅针对对象属性）
+   * @param id 节点 ID
+   * @param nextKey 新的键名
+   * @returns 更新后的 JSON 文档对象
+   */
+  renameKey: (id: JsonNodeId, nextKey: string) => JsonDocument;
+  /**
+   * 根据 ID 获取节点
+   * @param id 节点 ID
+   * @returns 匹配的节点对象，不存在时抛出错误或返回 null（取决于核心实现）
+   */
+  getNode: (id: JsonNodeId) => import("@jsonup/core").JsonNode | undefined;
+  /**
+   * 根据 ID 获取节点的 JSONPath 路径
+   * @param id 节点 ID
+   * @returns 节点的路径字符串
+   */
+  getPath: (id: JsonNodeId) => string | undefined;
+  /**
+   * 根据 JSONPath 路径查找节点
+   * @param path JSONPath 路径字符串
+   * @returns 匹配的节点对象，不存在时返回 undefined
+   */
+  findByPath: (path: string) => import("@jsonup/core").JsonNode | undefined;
+  /**
+   * 在文档中搜索匹配的节点
+   * @param query 搜索关键字
+   * @returns 匹配的节点 ID 数组
+   */
+  search: (query: string) => import("@jsonup/core").JsonNode[];
+  /**
+   * 将当前文档状态格式化为 JSON 字符串
+   * @param space 缩进的空格数，默认为 2
+   * @returns 格式化后的 JSON 字符串
+   */
+  stringify: (space?: number) => string;
+};
+//#endregion
+export { JsonupViewer, type JsonupViewerLine, type JsonupViewerLineKind, type JsonupViewerLineSlotProps, UseJsonDocumentOptions, createViewerLines, useJsonDocument };