@composy/log-viewer-vue 0.0.1 → 0.0.2

package/esm/style/index.less

@@ -0,0 +1,434 @@
+/* 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/lib/components/LogViewer.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @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                    *
 * ***********************************

package/lib/components/LogViewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogViewer.cjs","names":[],"sources":["../../src/components/LogViewer.vue"],"sourcesContent":["<!--\n  @file 日志查看器组件\n  @description LDesign 日志查看器组件，支持日志过滤、差异对比、异常标记等功能\n-->\n<template>\n  <div ref=\"containerRef\" class=\"lv-vue-root\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, toRefs } from 'vue'\nimport {\n  createLogViewer,\n  type LogViewerConfig,\n  type LogEntry,\n  type FilterConfig,\n  type ThemeMode,\n  type LogViewer as LogViewerInstance,\n} from '@composy/log-viewer-core'\n\nconst props = withDefaults(defineProps<{\n  data?: LogEntry[]\n  filter?: FilterConfig\n  theme?: ThemeMode\n  pageSize?: number\n  showFilter?: boolean\n  showDiff?: boolean\n  showAnomalyBadge?: boolean\n}>(), {\n  data: () => [],\n  theme: 'light',\n  pageSize: 20,\n  showFilter: true,\n  showDiff: true,\n  showAnomalyBadge: true,\n})\n\nconst emit = defineEmits<{\n  'entry-click': [entry: LogEntry]\n  'entry-expand': [entry: LogEntry]\n  'entry-collapse': [entry: LogEntry]\n  'filter-change': [filter: FilterConfig]\n  'theme-change': [theme: ThemeMode]\n  'page-change': [page: number]\n}>()\n\nconst containerRef = ref<HTMLElement | null>(null)\nlet instance: LogViewerInstance | null = null\n\nonMounted(() => {\n  if (!containerRef.value) return\n\n  instance = createLogViewer({\n    container: containerRef.value,\n    data: props.data,\n    filter: props.filter,\n    theme: props.theme,\n    pageSize: props.pageSize,\n    showFilter: props.showFilter,\n    showDiff: props.showDiff,\n    showAnomalyBadge: props.showAnomalyBadge,\n  })\n\n  instance.on('entry:click', (entry: LogEntry) => emit('entry-click', entry))\n  instance.on('entry:expand', (entry: LogEntry) => emit('entry-expand', entry))\n  instance.on('entry:collapse', (entry: LogEntry) => emit('entry-collapse', entry))\n  instance.on('filter:change', (filter: FilterConfig) => emit('filter-change', filter))\n  instance.on('theme:change', (theme: ThemeMode) => emit('theme-change', theme))\n  instance.on('page:change', (page: number) => emit('page-change', page))\n})\n\nwatch(() => props.data, (newData) => {\n  instance?.setData(newData)\n}, { deep: true })\n\nwatch(() => props.filter, (newFilter) => {\n  if (newFilter) instance?.setFilter(newFilter)\n}, { deep: true })\n\nwatch(() => props.theme, (newTheme) => {\n  instance?.setTheme(newTheme)\n})\n\nonUnmounted(() => {\n  instance?.destroy()\n  instance = null\n})\n\ndefineExpose({\n  getInstance: () => instance,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"LogViewer.cjs","names":[],"sources":["../../src/components/LogViewer.vue"],"sourcesContent":["<!--\r\n  @file 日志查看器组件\r\n  @description LDesign 日志查看器组件，支持日志过滤、差异对比、异常标记等功能\r\n-->\r\n<script setup lang=\"ts\">\r\nimport { onMounted, onUnmounted, ref, watch } from 'vue-demi'\r\nimport {\r\n  createLogViewer,\r\n  type LogViewerConfig,\r\n  type LogEntry,\r\n  type FilterConfig,\r\n  type ThemeMode,\r\n  type LogViewer as LogViewerInstance,\r\n} from '@composy/log-viewer-core'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    data?: LogEntry[]\r\n    filter?: FilterConfig\r\n    theme?: ThemeMode\r\n    pageSize?: number\r\n    showFilter?: boolean\r\n    showDiff?: boolean\r\n    showAnomalyBadge?: boolean\r\n  }>(),\r\n  {\r\n    data: () => [],\r\n    theme: 'light',\r\n    pageSize: 20,\r\n    showFilter: true,\r\n    showDiff: true,\r\n    showAnomalyBadge: true,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  entryClick: [entry: LogEntry]\r\n  entryExpand: [entry: LogEntry]\r\n  entryCollapse: [entry: LogEntry]\r\n  filterChange: [filter: FilterConfig]\r\n  themeChange: [theme: ThemeMode]\r\n  pageChange: [page: number]\r\n}>()\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\nlet instance: LogViewerInstance | null = null\r\n\r\nonMounted(() => {\r\n  if (!containerRef.value) return\r\n\r\n  instance = createLogViewer({\r\n    container: containerRef.value,\r\n    data: props.data,\r\n    filter: props.filter,\r\n    theme: props.theme,\r\n    pageSize: props.pageSize,\r\n    showFilter: props.showFilter,\r\n    showDiff: props.showDiff,\r\n    showAnomalyBadge: props.showAnomalyBadge,\r\n  })\r\n\r\n  instance.on('entry:click', (entry: LogEntry) => emit('entryClick', entry))\r\n  instance.on('entry:expand', (entry: LogEntry) => emit('entryExpand', entry))\r\n  instance.on('entry:collapse', (entry: LogEntry) =>\r\n    emit('entryCollapse', entry)\r\n  )\r\n  instance.on('filter:change', (filter: FilterConfig) =>\r\n    emit('filterChange', filter)\r\n  )\r\n  instance.on('theme:change', (theme: ThemeMode) => emit('themeChange', theme))\r\n  instance.on('page:change', (page: number) => emit('pageChange', page))\r\n})\r\n\r\nwatch(\r\n  () => props.data,\r\n  newData => {\r\n    instance?.setData(newData)\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.filter,\r\n  newFilter => {\r\n    instance?.setFilter(newFilter || {})\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.theme,\r\n  newTheme => {\r\n    instance?.setTheme(newTheme)\r\n  }\r\n)\r\n\r\nonUnmounted(() => {\r\n  instance?.destroy()\r\n  instance = null\r\n})\r\n\r\ndefineExpose({\r\n  getInstance: () => instance,\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"containerRef\" class=\"lv-vue-root\"></div>\r\n</template>\r\n"],"mappings":""}

package/lib/components/LogViewer.vue_vue_type_script_setup_true_lang.cjs

@@ -2,13 +2,14 @@
 * ***********************************
 * @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                    *
 * ***********************************
 */
-let vue = require("vue");
+let vue_demi = require("vue-demi");
 let _composy_log_viewer_core = require("@composy/log-viewer-core");
+let vue = require("vue");
 //#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)({
 	__name: "LogViewer",
@@ -49,19 +50,19 @@ var LogViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		}
 	},
 	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,
@@ -73,23 +74,23 @@ var LogViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 				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;
 		});

package/lib/components/LogViewer.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogViewer.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/LogViewer.vue"],"sourcesContent":["<!--\n  @file 日志查看器组件\n  @description LDesign 日志查看器组件，支持日志过滤、差异对比、异常标记等功能\n-->\n<template>\n  <div ref=\"containerRef\" class=\"lv-vue-root\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, toRefs } from 'vue'\nimport {\n  createLogViewer,\n  type LogViewerConfig,\n  type LogEntry,\n  type FilterConfig,\n  type ThemeMode,\n  type LogViewer as LogViewerInstance,\n} from '@composy/log-viewer-core'\n\nconst props = withDefaults(defineProps<{\n  data?: LogEntry[]\n  filter?: FilterConfig\n  theme?: ThemeMode\n  pageSize?: number\n  showFilter?: boolean\n  showDiff?: boolean\n  showAnomalyBadge?: boolean\n}>(), {\n  data: () => [],\n  theme: 'light',\n  pageSize: 20,\n  showFilter: true,\n  showDiff: true,\n  showAnomalyBadge: true,\n})\n\nconst emit = defineEmits<{\n  'entry-click': [entry: LogEntry]\n  'entry-expand': [entry: LogEntry]\n  'entry-collapse': [entry: LogEntry]\n  'filter-change': [filter: FilterConfig]\n  'theme-change': [theme: ThemeMode]\n  'page-change': [page: number]\n}>()\n\nconst containerRef = ref<HTMLElement | null>(null)\nlet instance: LogViewerInstance | null = null\n\nonMounted(() => {\n  if (!containerRef.value) return\n\n  instance = createLogViewer({\n    container: containerRef.value,\n    data: props.data,\n    filter: props.filter,\n    theme: props.theme,\n    pageSize: props.pageSize,\n    showFilter: props.showFilter,\n    showDiff: props.showDiff,\n    showAnomalyBadge: props.showAnomalyBadge,\n  })\n\n  instance.on('entry:click', (entry: LogEntry) => emit('entry-click', entry))\n  instance.on('entry:expand', (entry: LogEntry) => emit('entry-expand', entry))\n  instance.on('entry:collapse', (entry: LogEntry) => emit('entry-collapse', entry))\n  instance.on('filter:change', (filter: FilterConfig) => emit('filter-change', filter))\n  instance.on('theme:change', (theme: ThemeMode) => emit('theme-change', theme))\n  instance.on('page:change', (page: number) => emit('page-change', page))\n})\n\nwatch(() => props.data, (newData) => {\n  instance?.setData(newData)\n}, { deep: true })\n\nwatch(() => props.filter, (newFilter) => {\n  if (newFilter) instance?.setFilter(newFilter)\n}, { deep: true })\n\nwatch(() => props.theme, (newTheme) => {\n  instance?.setTheme(newTheme)\n})\n\nonUnmounted(() => {\n  instance?.destroy()\n  instance = null\n})\n\ndefineExpose({\n  getInstance: () => instance,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAiBd,MAAM,OAAO;EASb,MAAM,gBAAA,GAAA,IAAA,IAAA,CAAuC,IAAI;EACjD,IAAI,WAAqC;EAEzC,CAAA,GAAA,IAAA,UAAA,OAAgB;GACd,IAAI,CAAC,aAAa,OAAO;GAEzB,YAAA,GAAA,yBAAA,gBAAA,CAA2B;IACzB,WAAW,aAAa;IACxB,MAAM,MAAM;IACZ,QAAQ,MAAM;IACd,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,YAAY,MAAM;IAClB,UAAU,MAAM;IAChB,kBAAkB,MAAM;GAC1B,CAAC;GAED,SAAS,GAAG,gBAAgB,UAAoB,KAAK,eAAe,KAAK,CAAC;GAC1E,SAAS,GAAG,iBAAiB,UAAoB,KAAK,gBAAgB,KAAK,CAAC;GAC5E,SAAS,GAAG,mBAAmB,UAAoB,KAAK,kBAAkB,KAAK,CAAC;GAChF,SAAS,GAAG,kBAAkB,WAAyB,KAAK,iBAAiB,MAAM,CAAC;GACpF,SAAS,GAAG,iBAAiB,UAAqB,KAAK,gBAAgB,KAAK,CAAC;GAC7E,SAAS,GAAG,gBAAgB,SAAiB,KAAK,eAAe,IAAI,CAAC;EACxE,CAAC;EAED,CAAA,GAAA,IAAA,MAAA,OAAY,MAAM,OAAO,YAAY;GACnC,UAAU,QAAQ,OAAO;EAC3B,GAAG,EAAE,MAAM,KAAK,CAAC;EAEjB,CAAA,GAAA,IAAA,MAAA,OAAY,MAAM,SAAS,cAAc;GACvC,IAAI,WAAW,UAAU,UAAU,SAAS;EAC9C,GAAG,EAAE,MAAM,KAAK,CAAC;EAEjB,CAAA,GAAA,IAAA,MAAA,OAAY,MAAM,QAAQ,aAAa;GACrC,UAAU,SAAS,QAAQ;EAC7B,CAAC;EAED,CAAA,GAAA,IAAA,YAAA,OAAkB;GAChB,UAAU,QAAQ;GAClB,WAAW;EACb,CAAC;EAED,SAAa,EACX,mBAAmB,SACrB,CAAC;;4DApFmD,OAAA;aAAzC;IAAJ,KAAI;IAAe,OAAM"}
+{"version":3,"file":"LogViewer.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/LogViewer.vue","../../src/components/LogViewer.vue"],"sourcesContent":["<!--\r\n  @file 日志查看器组件\r\n  @description LDesign 日志查看器组件，支持日志过滤、差异对比、异常标记等功能\r\n-->\r\n<script setup lang=\"ts\">\r\nimport { onMounted, onUnmounted, ref, watch } from 'vue-demi'\r\nimport {\r\n  createLogViewer,\r\n  type LogViewerConfig,\r\n  type LogEntry,\r\n  type FilterConfig,\r\n  type ThemeMode,\r\n  type LogViewer as LogViewerInstance,\r\n} from '@composy/log-viewer-core'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    data?: LogEntry[]\r\n    filter?: FilterConfig\r\n    theme?: ThemeMode\r\n    pageSize?: number\r\n    showFilter?: boolean\r\n    showDiff?: boolean\r\n    showAnomalyBadge?: boolean\r\n  }>(),\r\n  {\r\n    data: () => [],\r\n    theme: 'light',\r\n    pageSize: 20,\r\n    showFilter: true,\r\n    showDiff: true,\r\n    showAnomalyBadge: true,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  entryClick: [entry: LogEntry]\r\n  entryExpand: [entry: LogEntry]\r\n  entryCollapse: [entry: LogEntry]\r\n  filterChange: [filter: FilterConfig]\r\n  themeChange: [theme: ThemeMode]\r\n  pageChange: [page: number]\r\n}>()\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\nlet instance: LogViewerInstance | null = null\r\n\r\nonMounted(() => {\r\n  if (!containerRef.value) return\r\n\r\n  instance = createLogViewer({\r\n    container: containerRef.value,\r\n    data: props.data,\r\n    filter: props.filter,\r\n    theme: props.theme,\r\n    pageSize: props.pageSize,\r\n    showFilter: props.showFilter,\r\n    showDiff: props.showDiff,\r\n    showAnomalyBadge: props.showAnomalyBadge,\r\n  })\r\n\r\n  instance.on('entry:click', (entry: LogEntry) => emit('entryClick', entry))\r\n  instance.on('entry:expand', (entry: LogEntry) => emit('entryExpand', entry))\r\n  instance.on('entry:collapse', (entry: LogEntry) =>\r\n    emit('entryCollapse', entry)\r\n  )\r\n  instance.on('filter:change', (filter: FilterConfig) =>\r\n    emit('filterChange', filter)\r\n  )\r\n  instance.on('theme:change', (theme: ThemeMode) => emit('themeChange', theme))\r\n  instance.on('page:change', (page: number) => emit('pageChange', page))\r\n})\r\n\r\nwatch(\r\n  () => props.data,\r\n  newData => {\r\n    instance?.setData(newData)\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.filter,\r\n  newFilter => {\r\n    instance?.setFilter(newFilter || {})\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.theme,\r\n  newTheme => {\r\n    instance?.setTheme(newTheme)\r\n  }\r\n)\r\n\r\nonUnmounted(() => {\r\n  instance?.destroy()\r\n  instance = null\r\n})\r\n\r\ndefineExpose({\r\n  getInstance: () => instance,\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"containerRef\" class=\"lv-vue-root\"></div>\r\n</template>\r\n","<!--\r\n  @file 日志查看器组件\r\n  @description LDesign 日志查看器组件，支持日志过滤、差异对比、异常标记等功能\r\n-->\r\n<script setup lang=\"ts\">\r\nimport { onMounted, onUnmounted, ref, watch } from 'vue-demi'\r\nimport {\r\n  createLogViewer,\r\n  type LogViewerConfig,\r\n  type LogEntry,\r\n  type FilterConfig,\r\n  type ThemeMode,\r\n  type LogViewer as LogViewerInstance,\r\n} from '@composy/log-viewer-core'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    data?: LogEntry[]\r\n    filter?: FilterConfig\r\n    theme?: ThemeMode\r\n    pageSize?: number\r\n    showFilter?: boolean\r\n    showDiff?: boolean\r\n    showAnomalyBadge?: boolean\r\n  }>(),\r\n  {\r\n    data: () => [],\r\n    theme: 'light',\r\n    pageSize: 20,\r\n    showFilter: true,\r\n    showDiff: true,\r\n    showAnomalyBadge: true,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  entryClick: [entry: LogEntry]\r\n  entryExpand: [entry: LogEntry]\r\n  entryCollapse: [entry: LogEntry]\r\n  filterChange: [filter: FilterConfig]\r\n  themeChange: [theme: ThemeMode]\r\n  pageChange: [page: number]\r\n}>()\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\nlet instance: LogViewerInstance | null = null\r\n\r\nonMounted(() => {\r\n  if (!containerRef.value) return\r\n\r\n  instance = createLogViewer({\r\n    container: containerRef.value,\r\n    data: props.data,\r\n    filter: props.filter,\r\n    theme: props.theme,\r\n    pageSize: props.pageSize,\r\n    showFilter: props.showFilter,\r\n    showDiff: props.showDiff,\r\n    showAnomalyBadge: props.showAnomalyBadge,\r\n  })\r\n\r\n  instance.on('entry:click', (entry: LogEntry) => emit('entryClick', entry))\r\n  instance.on('entry:expand', (entry: LogEntry) => emit('entryExpand', entry))\r\n  instance.on('entry:collapse', (entry: LogEntry) =>\r\n    emit('entryCollapse', entry)\r\n  )\r\n  instance.on('filter:change', (filter: FilterConfig) =>\r\n    emit('filterChange', filter)\r\n  )\r\n  instance.on('theme:change', (theme: ThemeMode) => emit('themeChange', theme))\r\n  instance.on('page:change', (page: number) => emit('pageChange', page))\r\n})\r\n\r\nwatch(\r\n  () => props.data,\r\n  newData => {\r\n    instance?.setData(newData)\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.filter,\r\n  newFilter => {\r\n    instance?.setFilter(newFilter || {})\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.theme,\r\n  newTheme => {\r\n    instance?.setTheme(newTheme)\r\n  }\r\n)\r\n\r\nonUnmounted(() => {\r\n  instance?.destroy()\r\n  instance = null\r\n})\r\n\r\ndefineExpose({\r\n  getInstance: () => instance,\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"containerRef\" class=\"lv-vue-root\"></div>\r\n</template>\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAoBd,MAAM,OAAO;EASb,MAAM,gBAAA,GAAA,SAAA,IAAA,CAAuC,IAAI;EACjD,IAAI,WAAqC;EAEzC,CAAA,GAAA,SAAA,UAAA,OAAgB;GACd,IAAI,CAAC,aAAa,OAAO;GAEzB,YAAA,GAAA,yBAAA,gBAAA,CAA2B;IACzB,WAAW,aAAa;IACxB,MAAM,MAAM;IACZ,QAAQ,MAAM;IACd,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,YAAY,MAAM;IAClB,UAAU,MAAM;IAChB,kBAAkB,MAAM;GAC1B,CAAC;GAED,SAAS,GAAG,gBAAgB,UAAoB,KAAK,cAAc,KAAK,CAAC;GACzE,SAAS,GAAG,iBAAiB,UAAoB,KAAK,eAAe,KAAK,CAAC;GAC3E,SAAS,GAAG,mBAAmB,UAC7B,KAAK,iBAAiB,KAAK,CAC7B;GACA,SAAS,GAAG,kBAAkB,WAC5B,KAAK,gBAAgB,MAAM,CAC7B;GACA,SAAS,GAAG,iBAAiB,UAAqB,KAAK,eAAe,KAAK,CAAC;GAC5E,SAAS,GAAG,gBAAgB,SAAiB,KAAK,cAAc,IAAI,CAAC;EACvE,CAAC;EAED,CAAA,GAAA,SAAA,MAAA,OACQ,MAAM,OACZ,YAAW;GACT,UAAU,QAAQ,OAAO;EAC3B,GACA,EAAE,MAAM,KAAK,CACf;EAEA,CAAA,GAAA,SAAA,MAAA,OACQ,MAAM,SACZ,cAAa;GACX,UAAU,UAAU,aAAa,CAAC,CAAC;EACrC,GACA,EAAE,MAAM,KAAK,CACf;EAEA,CAAA,GAAA,SAAA,MAAA,OACQ,MAAM,QACZ,aAAY;GACV,UAAU,SAAS,QAAQ;EAC7B,CACF;EAEA,CAAA,GAAA,SAAA,YAAA,OAAkB;GAChB,UAAU,QAAQ;GAClB,WAAW;EACb,CAAC;EAED,SAAa,EACX,mBAAmB,SACrB,CAAC;;4DCImD,OAAA;aAAzC;IAAJ,KAAI;IAAe,OAAM"}

package/lib/composables/useLogViewer.cjs

@@ -2,29 +2,29 @@
 * ***********************************
 * @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                    *
 * ***********************************
 */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let vue = require("vue");
+let vue_demi = require("vue-demi");
 let _composy_log_viewer_core = require("@composy/log-viewer-core");
 //#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;
@@ -38,9 +38,10 @@ function useLogViewer() {
 		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);
@@ -77,6 +78,14 @@ function useLogViewer() {
 	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;
@@ -84,7 +93,7 @@ function useLogViewer() {
 	function on(event, callback) {
 		return instance.value?.on(event, callback) || (() => {});
 	}
-	(0, vue.onUnmounted)(() => {
+	(0, vue_demi.onUnmounted)(() => {
 		destroy();
 	});
 	return {
@@ -104,6 +113,7 @@ function useLogViewer() {
 		collapseAll,
 		goToPage,
 		refresh,
+		loadData,
 		destroy,
 		on
 	};