@composy/log-viewer-vue 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,57 @@
+# Changelog
+
+## [0.0.2] - 2026-10-12
+
+### ✨ 新功能
+
+- **log-viewer**: 重构项目结构并完善文档与示例 ([7844674](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/78446741f92a4e0fa35e358481246c597c5d3691)) - @swimly
+- **log-viewer**: 添加项目配置文件 ([a952739](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/a9527395a4999212ec4f0444c7f1a54a021da0ca)) - @swimly
+- auto-generated playground + README for log-viewer sub-packages ([a2250ec](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/a2250ecd98551c15e822dde8a61389b02f161725)) - @swimly
+- **log-viewer**: 实现核心库、Vue组件和playground演示 ([ec9764a](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/ec9764a7bc8964b95486f1035ece6783801380a3)) - @swimly
+- init log-viewer project structure ([304c73f](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/304c73f7c9dbd6886abf059806bf619cb724cc84)) - @swimly
+
+### 🐛 Bug 修复
+
+- **log-viewer**: 规范 EventEmitter 类型 ([58545d3](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/58545d346c1031471c84cc972b91614cee4c3858)) - @swimly
+
+### 💄 代码样式
+
+- **vue**: 修复package.json缺失尾部换行符的问题 ([1dd31bb](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/1dd31bb80ba5bc1f776306033e133df2c6c24ee9)) - @swimly
+
+### 📦 构建系统
+
+- **packages**: 更新各包依赖与配置项 ([939d05c](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/939d05c5a3a94e576023c360224cdd0600f73d8f)) - @swimly
+- **vue**: 调整vue包构建配置，修正输出路径与发布文件 ([b953ee4](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/b953ee4568860b63b1acc2281e40e352917da632)) - @swimly
+- 调整本地ldesign依赖为本地链接，更新核心包构建配置 ([1a9d4a1](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/1a9d4a1d8e05ee6773e6e7876eec50663baeaf45)) - @swimly
+- **tsconfig**: 完善 tsconfig 配置，添加声明文件输出与映射配置 ([d5f862a](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/d5f862a0149af874e78e26116ce0d276c3479a6c)) - @swimly
+- **vue**: 更新 Vue 依赖版本至 3.5.32 ([bca3d07](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/bca3d07b4e0fe4b852289d0c7351d6a1a974052e)) - @swimly
+- **vue**: 在发布清单中添加 lib 目录 ([3ba2ba6](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/3ba2ba6d0f105dc5a1dc12eeb49da68b9851cb1d)) - @swimly
+- 为 core 和 vue 包添加 ldesign-builder 配置 ([0ded57e](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/0ded57e7bde3fcfe8fa1a2af05beb9a6c1beb7e1)) - @swimly
+
+### 🔧 其他
+
+- **log-viewer**: 更新项目配置与依赖管理 ([986acd2](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/986acd26bdecd9096450049f32d067bf4ae8b292)) - @swimly
+- **package.json**: 修复文件末尾缺少换行符的问题 ([cec57ce](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/cec57ce71565f1d1583db90caa9a0e0b05d5dfbb)) - @swimly
+- 更新 core 和 vue 包的依赖版本 ([a50b9d7](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/a50b9d79ed2dfb4296ab960bc605394ad233eb2e)) - @swimly
+- update log-viewer (15 files) ([c45bb7d](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/c45bb7d3705ff21255c7900f1547d3e23ff6abd0)) - @swimly
+- 删除不再使用的 shims-vue.d.ts 类型声明文件 ([7a785f5](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/7a785f5d672ade01cb7b8fd2c1447380b2140777)) - @swimly
+- normalize versions, clean artifacts, update gitignore ([1fa0666](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/1fa0666c7516c24c943c3bd5e0edd2ce5c664203)) - @swimly
+- update - chore(code-quality): 完成首轮代码优化与æ  ([ac14af0](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/ac14af054dd10254ed40c7cb2efa4bf9c9b23735)) - @swimly
+- **code-quality**: 完成首轮代码优化与标准化工作 ([82f7750](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/82f77508bedc8f99c2c0db16098c3bc81f05f185)) - @swimly
+- 批量更新 - 规范 .gitignore 清理源码 ([cf22736](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/cf22736fbb924cc0a40506e2b06b304d7aa4356d)) - @swimly
+- unified build config and structure ([b193057](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/b1930571dadec0dbe8240dfc0fcd7fbef046b28e)) - @swimly
+- 添加 ESLint 配置和测试脚本到 core 和 vue 包 ([6742aec](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/6742aec2dc2d11b66d9a8ecbd7db4f5ab0616cf4)) - @swimly
+- add build config, tsconfig, README ([1c1c88f](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/1c1c88fc9c35a9f82161b98e6800a8ac98b811e8)) - @swimly
+- clean up project structure - keep only packages/core/src and packages/vue/src ([fed9abd](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/fed9abd6ac1a5b65123f79d9f60cc394beda1822)) - @swimly
+- 标准化构建配置并更新外部依赖声明 ([645e72d](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/645e72dfa27e428da23270dc6dbbcbaaee88e384)) - @swimly
+- batch commit submodule changes ([dae1c30](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/dae1c30d34b23869b357ee1ef6f954d08b7d5781)) - @swimly
+- set versions to 0.0.1 and pin @ldesign deps ([0b6b3a9](https://gitee.com/ldesign-v1/ldesign-log-viewer/commit/0b6b3a98fb6096a0ac735216166ea9e63ed081b3)) - @swimly
+
+### 👥 Contributors
+
+swimly
+
+### 📊 Statistics
+
+- Total Commits: **30**
+- Contributors: **1**

package/README.md

@@ -1,46 +1,60 @@
 # @composy/log-viewer-vue
 
-审计日志查看器 - 操作日志可视化与追溯（Vue 3 适配层）
-
-## 功能特性
-
-- 🧩 Vue 3 组件
-- 🪝 组合式函数 (Composables)
-- ⚡ 响应式数据绑定
+审计日志查看器的 Vue 2/3 适配层，基于 `@composy/log-viewer-core` 提供 `LogViewer`
+组件、`useLogViewer` 组合式函数和 `LogViewerPlugin` 插件。
 
 ## 安装
 
 ```bash
-npm install @composy/log-viewer-vue
+pnpm add @composy/log-viewer-vue
 ```
 
-## 快速开始
+`vue` 为 peer dependency，Vue 2.7 和 Vue 3 均由 `vue-demi` 适配。
 
-```vue
-<template>
-  <!-- 使用组件 -->
-</template>
+## 入口
 
-<script setup>
-// import { /* 组件 */ } from '@composy/log-viewer-vue'
-</script>
+```ts
+import { LogViewer, LogViewerPlugin, useLogViewer } from '@composy/log-viewer-vue'
+import '@composy/log-viewer-vue/index.css'
 ```
 
-## 目录结构
+核心类型与格式化函数也从 Vue 包重新导出，便于组件项目保持单一入口。
 
-```
+## 目录与构建
+
+```text
 packages/vue/
-├── src/              # 源码
-├── package.json
-├── tsconfig.json     # ESM 构建配置
-└── tsconfig.cjs.json # CJS 构建配置
+├── src/                         # 组件、插件和组合式函数
+├── .ldesign/builder.config.ts   # @composy/builder（rolldown）配置
+├── .ldesign/tsconfig.esm.json  # ESM 类型检查配置
+└── .ldesign/tsconfig.cjs.json  # CJS 类型检查配置
 ```
 
-## 依赖
+```bash
+pnpm --dir packages/vue run build
+pnpm --dir packages/vue run type-check
+pnpm --dir packages/vue run type-check:cjs
+pnpm --dir packages/vue run lint:check
+```
 
-- `@composy/log-viewer-core` — 核心引擎
-- `vue` ^3.3.0 (peerDependency)
+构建输出为 `dist`（压缩 UMD 和 CSS）、`es`（ESM 声明）、`esm`（保留 ESM/样式源）和
+`lib`（CJS）。`exports`、`main`、`module`、`types`、`unpkg` 与 `jsdelivr`
+均指向这些目录中的实际文件。
 
 ## License
 
 MIT
+
+## Adapter behavior
+
+`LogViewer` forwards Core data, filtering, theme, diff, anomaly, and pagination behavior. Component
+events use camelCase names in the type surface (`entryClick`, `entryExpand`, `entryCollapse`,
+`filterChange`, `themeChange`, and `pageChange`); Vue templates can continue to listen with their
+kebab-case equivalents.
+
+`useLogViewer()` exposes `loadData()` alongside the Core instance methods. The composable uses
+`vue-demi` for the Vue 2.7 and Vue 3 peer range and destroys the Core instance on unmount.
+
+Import `@composy/log-viewer-vue/index.css` to receive the tokenized timeline, filter, diff, anomaly,
+and pagination styles. The build removes only dangling CSS source-map comments while retaining
+JavaScript source maps.

package/dist/index.css

@@ -1,3 +1,380 @@
 /* style/index.less */
-
-/*# sourceMappingURL=src/style/index.less.map */
+/* Generated from packages/core/src/styles/index.ts CSS_TEXT. */
+/* ===== CSS Variables ===== */
+.lv-root {
+  --lv-bg: var(--ld-white);
+  --lv-bg-secondary: var(--ld-bg-surface-soft);
+  --lv-bg-hover: var(--ld-primary-50);
+  --lv-border: var(--ld-border);
+  --lv-text: var(--ld-text-primary);
+  --lv-text-secondary: var(--ld-text-secondary);
+  --lv-text-muted: var(--ld-text-muted);
+  --lv-primary: var(--ld-primary-500);
+  --lv-primary-light: var(--ld-primary-50);
+  --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 4%, transparent);
+  --lv-timeline-line: var(--ld-border);
+  --lv-timeline-dot: var(--ld-primary-500);
+  --lv-diff-add-bg: var(--ld-success-50);
+  --lv-diff-add-text: var(--ld-success-700);
+  --lv-diff-del-bg: var(--ld-danger-50);
+  --lv-diff-del-text: var(--ld-danger-700);
+  --lv-anomaly-bg: var(--ld-warning-50);
+  --lv-anomaly-border: var(--ld-warning-300);
+  --lv-radius: var(--ld-radius-md);
+  --lv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --lv-font-mono: "Fira Code", "SF Mono", Consolas, monospace;
+}
+.lv-root[data-theme="dark"] {
+  --lv-bg: var(--ld-bg-surface);
+  --lv-bg-secondary: var(--ld-bg-surface-soft);
+  --lv-bg-hover: var(--ld-primary-50);
+  --lv-border: var(--ld-border-strong);
+  --lv-text: var(--ld-text-primary);
+  --lv-text-secondary: var(--ld-text-secondary);
+  --lv-text-muted: var(--ld-text-muted);
+  --lv-primary: var(--ld-primary-400);
+  --lv-primary-light: var(--ld-primary-50);
+  --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 20%, transparent);
+  --lv-timeline-line: var(--ld-border-strong);
+  --lv-timeline-dot: var(--ld-primary-400);
+  --lv-diff-add-bg: var(--ld-success-50);
+  --lv-diff-add-text: var(--ld-success-700);
+  --lv-diff-del-bg: var(--ld-danger-50);
+  --lv-diff-del-text: var(--ld-danger-700);
+  --lv-anomaly-bg: var(--ld-warning-50);
+  --lv-anomaly-border: var(--ld-warning-700);
+}
+/* ===== Root ===== */
+.lv-root {
+  font-family: var(--lv-font);
+  font-size: var(--ld-px-14);
+  color: var(--lv-text);
+  background: var(--lv-bg);
+  line-height: 1.6;
+}
+/* ===== Filter Bar ===== */
+.lv-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ld-px-10);
+  padding: var(--ld-px-16);
+  background: var(--lv-bg);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--lv-radius);
+  margin-bottom: var(--ld-px-16);
+  align-items: center;
+}
+.lv-filter-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-px-6);
+  font-size: var(--ld-px-13);
+}
+.lv-filter-label {
+  color: var(--lv-text-secondary);
+  font-size: var(--ld-px-12);
+  white-space: nowrap;
+}
+.lv-filter-input {
+  padding: var(--ld-px-5) var(--ld-px-10);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  font-size: var(--ld-px-13);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  outline: none;
+  transition: border-color 0.2s;
+  min-width: var(--ld-px-120);
+}
+.lv-filter-input:focus {
+  border-color: var(--lv-primary);
+}
+.lv-filter-select {
+  padding: var(--ld-px-5) var(--ld-px-10);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  font-size: var(--ld-px-13);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  outline: none;
+  cursor: pointer;
+}
+.lv-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ld-px-4);
+  padding: var(--ld-px-5) var(--ld-px-14);
+  font-size: var(--ld-px-13);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.lv-filter-btn:hover {
+  border-color: var(--lv-primary);
+  color: var(--lv-primary);
+}
+.lv-filter-btn--primary {
+  background: var(--lv-primary);
+  border-color: var(--lv-primary);
+  color: var(--ld-white);
+}
+.lv-filter-btn--primary:hover {
+  opacity: 0.85;
+}
+/* ===== Timeline ===== */
+.lv-timeline {
+  position: relative;
+  padding-left: var(--ld-px-28);
+}
+.lv-timeline::before {
+  content: "";
+  position: absolute;
+  left: var(--ld-px-9);
+  top: 0;
+  bottom: 0;
+  width: var(--ld-px-2);
+  background: var(--lv-timeline-line);
+}
+.lv-timeline-item {
+  position: relative;
+  padding: 0 0 var(--ld-px-20) 0;
+}
+.lv-timeline-dot {
+  position: absolute;
+  left: calc(-1 * var(--ld-px-25));
+  top: var(--ld-px-6);
+  width: var(--ld-px-12);
+  height: var(--ld-px-12);
+  border-radius: 50%;
+  background: var(--lv-bg);
+  border: var(--ld-px-2) solid var(--lv-timeline-dot);
+  z-index: 1;
+}
+.lv-timeline-dot--anomaly {
+  border-color: var(--ld-danger-500);
+  background: var(--ld-danger-50);
+}
+.lv-timeline-card {
+  background: var(--lv-bg);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--lv-radius);
+  padding: var(--ld-px-14) var(--ld-px-18);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 var(--ld-px-1) var(--ld-px-3) var(--lv-shadow);
+}
+.lv-timeline-card:hover {
+  border-color: var(--lv-primary);
+  box-shadow: 0 var(--ld-px-2) var(--ld-px-8) var(--lv-shadow);
+}
+.lv-timeline-card--anomaly {
+  border-left: var(--ld-px-3) solid var(--lv-anomaly-border);
+  background: var(--lv-anomaly-bg);
+}
+.lv-timeline-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-px-10);
+  flex-wrap: wrap;
+  margin-bottom: var(--ld-px-4);
+}
+.lv-timeline-time {
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-muted);
+  font-family: var(--lv-font-mono);
+}
+.lv-timeline-user {
+  font-weight: 600;
+  font-size: var(--ld-px-14);
+}
+.lv-action-tag {
+  display: inline-block;
+  padding: var(--ld-px-1) var(--ld-px-8);
+  font-size: var(--ld-px-12);
+  border-radius: var(--ld-px-4);
+  font-weight: 500;
+  color: var(--ld-white);
+}
+.lv-action-tag--create,
+.lv-action-tag--approve {
+  background: var(--ld-success-500);
+}
+.lv-action-tag--update,
+.lv-action-tag--login {
+  background: var(--ld-primary-500);
+}
+.lv-action-tag--delete,
+.lv-action-tag--reject {
+  background: var(--ld-danger-500);
+}
+.lv-action-tag--query,
+.lv-action-tag--other {
+  background: var(--ld-text-secondary);
+}
+.lv-action-tag--logout {
+  background: var(--ld-primary-700);
+}
+.lv-action-tag--export {
+  background: var(--ld-warning-500);
+}
+.lv-action-tag--import {
+  background: var(--ld-success-500);
+}
+.lv-timeline-module {
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-secondary);
+  background: var(--lv-bg-secondary);
+  padding: var(--ld-px-1) var(--ld-px-8);
+  border-radius: var(--ld-px-4);
+}
+.lv-timeline-ip {
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-muted);
+  font-family: var(--lv-font-mono);
+}
+.lv-anomaly-badge {
+  font-size: var(--ld-px-11);
+  padding: var(--ld-px-1) var(--ld-px-6);
+  border-radius: var(--ld-px-3);
+  background: var(--ld-warning-50);
+  color: var(--ld-warning-700);
+  border: var(--ld-px-1) solid var(--ld-warning-300);
+}
+.lv-timeline-detail {
+  font-size: var(--ld-px-13);
+  color: var(--lv-text-secondary);
+  margin-top: var(--ld-px-6);
+}
+.lv-timeline-expand-hint {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  font-size: var(--ld-px-12);
+  color: var(--lv-primary);
+  margin-top: var(--ld-px-6);
+  cursor: pointer;
+}
+/* ===== Detail Panel ===== */
+.lv-detail {
+  margin-top: var(--ld-px-12);
+  padding-top: var(--ld-px-12);
+  border-top: var(--ld-px-1) dashed var(--lv-border);
+  animation: lv-slide-down 0.2s ease;
+}
+@keyframes lv-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--ld-px-8)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* ===== Diff Table ===== */
+.lv-diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ld-px-13);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  overflow: hidden;
+}
+.lv-diff-table th {
+  background: var(--lv-bg-secondary);
+  padding: var(--ld-px-8) var(--ld-px-12);
+  text-align: left;
+  font-weight: 600;
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-secondary);
+  border-bottom: var(--ld-px-1) solid var(--lv-border);
+}
+.lv-diff-table td {
+  padding: var(--ld-px-8) var(--ld-px-12);
+  border-bottom: var(--ld-px-1) solid var(--lv-border);
+  vertical-align: top;
+}
+.lv-diff-table tr:last-child td {
+  border-bottom: none;
+}
+.lv-diff-old {
+  background: var(--lv-diff-del-bg);
+  color: var(--lv-diff-del-text);
+  text-decoration: line-through;
+  font-family: var(--lv-font-mono);
+  font-size: var(--ld-px-12);
+}
+.lv-diff-new {
+  background: var(--lv-diff-add-bg);
+  color: var(--lv-diff-add-text);
+  font-family: var(--lv-font-mono);
+  font-size: var(--ld-px-12);
+}
+/* ===== Metadata ===== */
+.lv-metadata {
+  margin-top: var(--ld-px-10);
+  background: var(--lv-bg-secondary);
+  border-radius: var(--ld-px-6);
+  padding: var(--ld-px-10) var(--ld-px-14);
+  font-size: var(--ld-px-12);
+  font-family: var(--lv-font-mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--lv-text-secondary);
+}
+/* ===== Pagination ===== */
+.lv-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ld-px-6);
+  padding: var(--ld-px-16) 0;
+}
+.lv-pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ld-px-32);
+  height: var(--ld-px-32);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  font-size: var(--ld-px-13);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.lv-pagination-btn:hover {
+  border-color: var(--lv-primary);
+  color: var(--lv-primary);
+}
+.lv-pagination-btn--active {
+  background: var(--lv-primary);
+  border-color: var(--lv-primary);
+  color: var(--ld-white);
+}
+.lv-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.lv-pagination-info {
+  font-size: var(--ld-px-13);
+  color: var(--lv-text-secondary);
+  margin: 0 var(--ld-px-8);
+}
+/* ===== Empty state ===== */
+.lv-empty {
+  text-align: center;
+  padding: var(--ld-px-48) var(--ld-px-16);
+  color: var(--lv-text-muted);
+  font-size: var(--ld-px-14);
+}
+.lv-empty-icon {
+  font-size: var(--ld-px-48);
+  margin-bottom: var(--ld-px-12);
+  opacity: 0.3;
+}

package/dist/index.js

@@ -2,18 +2,19 @@
 * ***********************************
 * @composy/log-viewer-vue v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:24 *
+* Build time: 2024-10-12 17:44:31 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@composy/log-viewer-core")) : typeof define === "function" && define.amd ? define([
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("vue-demi"), require("@composy/log-viewer-core")) : typeof define === "function" && define.amd ? define([
 		"exports",
 		"vue",
+		"vue-demi",
 		"@composy/log-viewer-core"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignPackagesVue3 = {}, global.Vue, global.ComposyLogViewerCore));
-})(this, function(exports, vue, _composy_log_viewer_core) {
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignLogViewerVue = {}, global.Vue, global.VueDemi, global.ComposyLogViewerCore));
+})(this, function(exports, vue, vue_demi, _composy_log_viewer_core) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region src/components/LogViewer.vue?vue&type=script&setup=true&lang.ts
 	var LogViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -55,19 +56,19 @@
 			}
 		},
 		emits: [
-			"entry-click",
-			"entry-expand",
-			"entry-collapse",
-			"filter-change",
-			"theme-change",
-			"page-change"
+			"entryClick",
+			"entryExpand",
+			"entryCollapse",
+			"filterChange",
+			"themeChange",
+			"pageChange"
 		],
 		setup(__props, { expose: __expose, emit: __emit }) {
 			const props = __props;
 			const emit = __emit;
-			const containerRef = (0, vue.ref)(null);
+			const containerRef = (0, vue_demi.ref)(null);
 			let instance = null;
-			(0, vue.onMounted)(() => {
+			(0, vue_demi.onMounted)(() => {
 				if (!containerRef.value) return;
 				instance = (0, _composy_log_viewer_core.createLogViewer)({
 					container: containerRef.value,
@@ -79,23 +80,23 @@
 					showDiff: props.showDiff,
 					showAnomalyBadge: props.showAnomalyBadge
 				});
-				instance.on("entry:click", (entry) => emit("entry-click", entry));
-				instance.on("entry:expand", (entry) => emit("entry-expand", entry));
-				instance.on("entry:collapse", (entry) => emit("entry-collapse", entry));
-				instance.on("filter:change", (filter) => emit("filter-change", filter));
-				instance.on("theme:change", (theme) => emit("theme-change", theme));
-				instance.on("page:change", (page) => emit("page-change", page));
+				instance.on("entry:click", (entry) => emit("entryClick", entry));
+				instance.on("entry:expand", (entry) => emit("entryExpand", entry));
+				instance.on("entry:collapse", (entry) => emit("entryCollapse", entry));
+				instance.on("filter:change", (filter) => emit("filterChange", filter));
+				instance.on("theme:change", (theme) => emit("themeChange", theme));
+				instance.on("page:change", (page) => emit("pageChange", page));
 			});
-			(0, vue.watch)(() => props.data, (newData) => {
+			(0, vue_demi.watch)(() => props.data, (newData) => {
 				instance?.setData(newData);
 			}, { deep: true });
-			(0, vue.watch)(() => props.filter, (newFilter) => {
-				if (newFilter) instance?.setFilter(newFilter);
+			(0, vue_demi.watch)(() => props.filter, (newFilter) => {
+				instance?.setFilter(newFilter || {});
 			}, { deep: true });
-			(0, vue.watch)(() => props.theme, (newTheme) => {
+			(0, vue_demi.watch)(() => props.theme, (newTheme) => {
 				instance?.setTheme(newTheme);
 			});
-			(0, vue.onUnmounted)(() => {
+			(0, vue_demi.onUnmounted)(() => {
 				instance?.destroy();
 				instance = null;
 			});
@@ -116,19 +117,19 @@
 	//#endregion
 	//#region src/composables/useLogViewer.ts
 	function useLogViewer() {
-		const instance = (0, vue.ref)(null);
-		const data = (0, vue.ref)([]);
-		const filter = (0, vue.ref)({});
-		const theme = (0, vue.ref)("light");
-		const pagination = (0, vue.ref)({
+		const instance = (0, vue_demi.ref)(null);
+		const data = (0, vue_demi.ref)([]);
+		const filter = (0, vue_demi.ref)({});
+		const theme = (0, vue_demi.ref)("light");
+		const pagination = (0, vue_demi.ref)({
 			page: 1,
 			pageSize: 20
 		});
 		function create(container, config) {
 			if (instance.value) instance.value.destroy();
 			instance.value = (0, _composy_log_viewer_core.createLogViewer)({
-				container,
-				...config
+				...config,
+				container
 			});
 			instance.value.on("data:change", (entries) => {
 				data.value = entries;
@@ -142,9 +143,10 @@
 			instance.value.on("page:change", () => {
 				if (instance.value) pagination.value = instance.value.getPagination();
 			});
-			if (config?.data) data.value = config.data;
-			if (config?.theme) theme.value = config.theme;
-			if (config?.filter) filter.value = config.filter;
+			data.value = instance.value.getData();
+			filter.value = instance.value.getFilter();
+			theme.value = instance.value.getTheme();
+			pagination.value = instance.value.getPagination();
 		}
 		function setData(entries) {
 			instance.value?.setData(entries);
@@ -181,6 +183,14 @@
 		function refresh() {
 			instance.value?.refresh();
 		}
+		async function loadData() {
+			const loader = instance.value?.loadData;
+			if (loader) await loader.call(instance.value);
+			if (instance.value) {
+				data.value = instance.value.getData();
+				pagination.value = instance.value.getPagination();
+			}
+		}
 		function destroy() {
 			instance.value?.destroy();
 			instance.value = null;
@@ -188,7 +198,7 @@
 		function on(event, callback) {
 			return instance.value?.on(event, callback) || (() => {});
 		}
-		(0, vue.onUnmounted)(() => {
+		(0, vue_demi.onUnmounted)(() => {
 			destroy();
 		});
 		return {
@@ -208,6 +218,7 @@
 			collapseAll,
 			goToPage,
 			refresh,
+			loadData,
 			destroy,
 			on
 		};