vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{JsonPretty → components/JsonPretty}/hooks/useClipboard.ts

@@ -1,21 +1,21 @@
-import { ref } from "vue";
-
-export function useClipboard() {
-  const copied = ref(false);
-
-  const copy = async (source: string) => {
-    try {
-      await navigator.clipboard.writeText(source);
-      copied.value = true;
-      setTimeout(() => {
-        copied.value = false;
-      }, 300);
-    } catch (err) {
-      console.error("[json-pretty] Copy failed: ", err);
-    }
-  };
-
-  return {
-    copy
-  };
-}
+import { ref } from "vue";
+
+export function useClipboard() {
+  const copied = ref(false);
+
+  const copy = async (source: string) => {
+    try {
+      await navigator.clipboard.writeText(source);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 300);
+    } catch (err) {
+      console.error("[json-pretty] Copy failed: ", err);
+    }
+  };
+
+  return {
+    copy
+  };
+}

package/dist/v3/{JsonPretty → components/JsonPretty}/hooks/useError.ts

@@ -1,21 +1,21 @@
-import { watchEffect } from "vue";
-
-type UseErrorOptions = {
-  emitListener: boolean;
-};
-
-export function useError(message: string, { emitListener }: UseErrorOptions) {
-  const emit = () => {
-    throw new Error(`[VueJsonPretty] ${message}`);
-  };
-
-  watchEffect(() => {
-    if (emitListener) {
-      emit();
-    }
-  });
-
-  return {
-    emit
-  };
-}
+import { watchEffect } from "vue";
+
+type UseErrorOptions = {
+  emitListener: boolean;
+};
+
+export function useError(message: string, { emitListener }: UseErrorOptions) {
+  const emit = () => {
+    throw new Error(`[VueJsonPretty] ${message}`);
+  };
+
+  watchEffect(() => {
+    if (emitListener) {
+      emit();
+    }
+  });
+
+  return {
+    emit
+  };
+}

package/dist/v3/{JsonPretty → components/JsonPretty}/index.vue

@@ -3,18 +3,10 @@
     :class="{
       'json-pretty-tree': true,
       'is-virtual': virtual,
+      'show-line-number': showLineNumber,
       dark: theme === 'dark',
     }"
-    :style="
-      showLineNumber
-        ? {
-            paddingLeft: `${
-              Number(originFlatData.length.toString().length) * 12
-            }px`,
-            ...style,
-          }
-        : style
-    ">
+    :style="style">
     <Empty v-if="isEmpty" />
     <VirtualList
       v-else-if="autoVirtual"
@@ -132,7 +124,7 @@ import AutoSize from '../VirtualList/AutoSize.vue';
 import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
 
 import type { NodeDataType, Tree } from './type';
-import { setValueByPath } from '../../utils';
+import { setValueByPath } from '../../../utils';
 import Empty from '../Empty/index.vue';
 
 // 定义 emits 类型
@@ -174,10 +166,16 @@ const props = withDefaults(defineProps<Tree>(), {
 });
 const emits = defineEmits<Emits>();
 
-const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
+const originFlatData = computed(() => {
+  const result = jsonFlatten(props.data, props.rootPath);
+  const total = result.length;
+  return result.map((item) => ({ ...item, total }));
+});
 
 const pageSize = computed(() => {
-  return Math.ceil(props.height / props.itemHeight) + 5;
+  const h = typeof props.height === 'number' ? props.height : 400;
+  const ih = typeof props.itemHeight === 'number' ? props.itemHeight : 20;
+  return Math.ceil(h / ih) + 5;
 });
 
 // 初始化折叠路径
@@ -505,6 +503,11 @@ onUnmounted(() => {
   overflow: auto;
   position: relative;
   width: 100%;
+  box-sizing: border-box;
+}
+
+.json-pretty-tree.show-line-number {
+  padding-left: 10px;
 }
 
 .json-pretty-tree.is-virtual {

package/dist/v3/{JsonPretty → components/JsonPretty}/type.ts

@@ -1,126 +1,127 @@
-import type { CSSProperties } from 'vue';
-
-export type JsonPrettyNodeProps = {
-  data: any;
-  rootPath: string;
-  indent: number;
-  showLength: boolean;
-  showDoubleQuotes: boolean;
-  renderNodeKey: any;
-  renderNodeValue: any;
-};
-export interface NodeDataType extends JSONFlattenReturnType {
-  id: number;
-}
-
-export interface JSONFlattenOptions {
-  key?: string;
-  index?: number;
-  showComma: boolean;
-  length: number;
-  type:
-    | 'content'
-    | 'objectStart'
-    | 'objectEnd'
-    | 'objectCollapsed'
-    | 'arrayStart'
-    | 'arrayEnd'
-    | 'arrayCollapsed';
-}
-
-export type JSONDataType =
-  | string
-  | number
-  | boolean
-  | unknown[]
-  | Record<string, unknown>
-  | null;
-
-export interface JSONFlattenReturnType extends JSONFlattenOptions {
-  content: string | number | null | boolean;
-  level: number;
-  path: string;
-}
-
-export type StyleValue =
-  | false
-  | null
-  | undefined
-  | string
-  | CSSProperties
-  | Array<StyleValue>;
-
-// 定义 Props 类型
-type SelectableType = 'single' | 'multiple' | null;
-
-export type TreeNodeProps = Partial<{
-  data: any;
-  indent: number;
-  showLength: boolean;
-  showDoubleQuotes: boolean;
-  selectableType: SelectableType;
-  showSelectController: boolean;
-  showLine: boolean;
-  showLineNumber: boolean;
-  showNodeActions: boolean;
-  selectOnClickNode: boolean;
-  highlightSelectedNode: boolean;
-  showIcon: boolean;
-  theme: string;
-  showKeyValueSpace: boolean;
-  editable: boolean;
-  editableTrigger: string;
-  node: NodeDataType;
-  checked: boolean;
-  collapsed: boolean;
-  customStyle?: CSSProperties;
-  fontSize: string;
-  onNodeClick: (node: NodeDataType) => void;
-  onNodeMouseover: (node: NodeDataType) => void;
-  onBracketsClick: (collapsed: boolean, node: NodeDataType) => void;
-  onIconClick: (collapsed: boolean, node: NodeDataType) => void;
-  onValueChange: (value: boolean, path: string) => void;
-  onSelectedChange: (node: NodeDataType) => void;
-}> &
-  TreeNodeRequiredProps;
-
-export type TreeNodeRequiredProps = {
-  node: NodeDataType;
-  rootPath: string;
-  nodeSelectable: (node: NodeDataType) => boolean;
-};
-
-export type TreeRequired = TreeNodeRequiredProps & {};
-
-export type Tree = Partial<TreeNodeProps> &
-  Partial<
-    {
-      deep: number;
-      collapsedNodeLength: number;
-      virtual: boolean;
-      itemHeight: number;
-      height: number;
-      selectedValue: string | Array<any>;
-      collapsedOnClickBrackets: boolean;
-      style: CSSProperties;
-      pathCollapsible: (node: NodeDataType) => boolean;
-      /** 超过行数将会自动启用虚拟列表 */
-      autoVirtualRow: number;
-      showCopyAll: boolean;
-    } & TreeRequired
-  >;
-
-export interface ScrollEvent {
-  detail: {
-    scrollLeft: number; // 横向滚动距离
-    scrollTop: number; // 纵向滚动距离
-    scrollHeight: number; // 可滚动区域的高度
-    scrollWidth: number; // 可滚动区域的宽度
-    deltaX: number; // 横向滚动增量
-    deltaY: number; // 纵向滚动增量
-  };
-  target: EventTarget; // 事件源组件
-  currentTarget: EventTarget; // 当前组件
-  timeStamp: number; // 事件触发时间戳
-  type: string; // 事件类型，这里是 'scroll'
-}
+import type { CSSProperties } from 'vue';
+
+export type JsonPrettyNodeProps = {
+  data: any;
+  rootPath: string;
+  indent: number;
+  showLength: boolean;
+  showDoubleQuotes: boolean;
+  renderNodeKey: any;
+  renderNodeValue: any;
+};
+export interface NodeDataType extends JSONFlattenReturnType {
+  id: number;
+  total?: number;
+}
+
+export interface JSONFlattenOptions {
+  key?: string;
+  index?: number;
+  showComma: boolean;
+  length: number;
+  type:
+    | 'content'
+    | 'objectStart'
+    | 'objectEnd'
+    | 'objectCollapsed'
+    | 'arrayStart'
+    | 'arrayEnd'
+    | 'arrayCollapsed';
+}
+
+export type JSONDataType =
+  | string
+  | number
+  | boolean
+  | unknown[]
+  | Record<string, unknown>
+  | null;
+
+export interface JSONFlattenReturnType extends JSONFlattenOptions {
+  content: string | number | null | boolean;
+  level: number;
+  path: string;
+}
+
+export type StyleValue =
+  | false
+  | null
+  | undefined
+  | string
+  | CSSProperties
+  | Array<StyleValue>;
+
+// 定义 Props 类型
+type SelectableType = 'single' | 'multiple' | null;
+
+export type TreeNodeProps = Partial<{
+  data: any;
+  indent: number;
+  showLength: boolean;
+  showDoubleQuotes: boolean;
+  selectableType: SelectableType;
+  showSelectController: boolean;
+  showLine: boolean;
+  showLineNumber: boolean;
+  showNodeActions: boolean;
+  selectOnClickNode: boolean;
+  highlightSelectedNode: boolean;
+  showIcon: boolean;
+  theme: string;
+  showKeyValueSpace: boolean;
+  editable: boolean;
+  editableTrigger: string;
+  node: NodeDataType;
+  checked: boolean;
+  collapsed: boolean;
+  customStyle?: CSSProperties;
+  fontSize: string;
+  onNodeClick: (node: NodeDataType) => void;
+  onNodeMouseover: (node: NodeDataType) => void;
+  onBracketsClick: (collapsed: boolean, node: NodeDataType) => void;
+  onIconClick: (collapsed: boolean, node: NodeDataType) => void;
+  onValueChange: (value: boolean, path: string) => void;
+  onSelectedChange: (node: NodeDataType) => void;
+}> &
+  TreeNodeRequiredProps;
+
+export type TreeNodeRequiredProps = {
+  node: NodeDataType;
+  rootPath: string;
+  nodeSelectable: (node: NodeDataType) => boolean;
+};
+
+export type TreeRequired = TreeNodeRequiredProps & {};
+
+export type Tree = Partial<TreeNodeProps> &
+  Partial<
+    {
+      deep: number;
+      collapsedNodeLength: number;
+      virtual: boolean;
+      itemHeight: number;
+      height: number;
+      selectedValue: string | Array<any>;
+      collapsedOnClickBrackets: boolean;
+      style: CSSProperties;
+      pathCollapsible: (node: NodeDataType) => boolean;
+      /** 超过行数将会自动启用虚拟列表 */
+      autoVirtualRow: number;
+      showCopyAll: boolean;
+    } & TreeRequired
+  >;
+
+export interface ScrollEvent {
+  detail: {
+    scrollLeft: number; // 横向滚动距离
+    scrollTop: number; // 纵向滚动距离
+    scrollHeight: number; // 可滚动区域的高度
+    scrollWidth: number; // 可滚动区域的宽度
+    deltaX: number; // 横向滚动增量
+    deltaY: number; // 纵向滚动增量
+  };
+  target: EventTarget; // 事件源组件
+  currentTarget: EventTarget; // 当前组件
+  timeStamp: number; // 事件触发时间戳
+  type: string; // 事件类型，这里是 'scroll'
+}