vite-uni-dev-tool 0.0.1

package/dev/components/JsonPretty/hooks/useClipboard.ts

@@ -0,0 +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
+  };
+}

package/dev/components/JsonPretty/hooks/useError.ts

@@ -0,0 +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
+  };
+}

package/dev/components/JsonPretty/index.vue

@@ -0,0 +1,463 @@
+<template>
+  <view
+    :class="{
+      'json-pretty-tree': true,
+      'is-virtual': virtual,
+      dark: theme === 'dark',
+    }"
+    :style="
+      showLineNumber
+        ? {
+            paddingLeft: `${
+              Number(originFlatData.length.toString().length) * 12
+            }px`,
+            ...style,
+          }
+        : style
+    "
+  >
+    <scroll-view
+      v-if="virtual"
+      class="json-pretty-tree-list"
+      scroll-y
+      scroll-x
+      :style="{ height: `${height}px` }"
+      @scroll="handleTreeScroll"
+      ref="treeRef"
+    >
+      <view
+        class="json-pretty-tree-list-holder"
+        :style="{ height: `${flatData.length * itemHeight}px` }"
+      >
+        <view
+          class="json-pretty-tree-list-holder-inner"
+          :style="{ transform: `translateY(${state.translateY}px)` }"
+        >
+          <TreeNode
+            v-for="item in state?.visibleData"
+            :key="item.id"
+            :data="data"
+            :rootPath="rootPath"
+            :indent="indent"
+            :node="item"
+            :collapsed="!!state.hiddenPaths[item.path]"
+            :theme="theme"
+            :showDoubleQuotes="showDoubleQuotes"
+            :showLength="showLength"
+            :checked="selectedPaths.includes(item.path)"
+            :selectableType="selectableType"
+            :showLine="showLine"
+            :showLineNumber="showLineNumber"
+            :showSelectController="showSelectController"
+            :selectOnClickNode="selectOnClickNode"
+            :nodeSelectable="nodeSelectable"
+            :highlightSelectedNode="highlightSelectedNode"
+            :editable="editable"
+            :editableTrigger="editableTrigger"
+            :showIcon="showIcon"
+            :showKeyValueSpace="showKeyValueSpace"
+            :showNodeActions="showNodeActions"
+            @nodeClick="handleNodeClick"
+            @nodeMouseover="handleNodeMouseover"
+            @bracketsClick="handleBracketsClick"
+            @iconClick="handleIconClick"
+            @selectedChange="handleSelectedChange"
+            @valueChange="handleValueChange"
+            :style="
+              itemHeight && itemHeight !== 20
+                ? { lineHeight: `${itemHeight}px` }
+                : {}
+            "
+          />
+        </view>
+      </view>
+    </scroll-view>
+    <template v-else>
+      <TreeNode
+        v-for="item in state?.visibleData"
+        :key="item.id"
+        :data="data"
+        :rootPath="rootPath"
+        :indent="indent"
+        :node="item"
+        :collapsed="!!state.hiddenPaths[item.path]"
+        :theme="theme"
+        :showDoubleQuotes="showDoubleQuotes"
+        :showLength="showLength"
+        :checked="selectedPaths.includes(item.path)"
+        :selectableType="selectableType"
+        :showLine="showLine"
+        :showLineNumber="showLineNumber"
+        :showSelectController="showSelectController"
+        :selectOnClickNode="selectOnClickNode"
+        :nodeSelectable="nodeSelectable"
+        :highlightSelectedNode="highlightSelectedNode"
+        :editable="editable"
+        :editableTrigger="editableTrigger"
+        :showIcon="showIcon"
+        :showKeyValueSpace="showKeyValueSpace"
+        :showNodeActions="showNodeActions"
+        @nodeClick="handleNodeClick"
+        @nodeMouseover="handleNodeMouseover"
+        @bracketsClick="handleBracketsClick"
+        @iconClick="handleIconClick"
+        @selectedChange="handleSelectedChange"
+        @valueChange="handleValueChange"
+        :style="
+          itemHeight && itemHeight !== 20
+            ? { lineHeight: `${itemHeight}px` }
+            : {}
+        "
+      />
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  reactive,
+  computed,
+  watchEffect,
+  watch,
+  defineEmits,
+  onMounted,
+  onUpdated,
+  onUnmounted,
+} from 'vue';
+import TreeNode from './components/TreeNode/index.vue';
+
+import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
+
+import type { NodeDataType, ScrollEvent, Tree } from './type';
+import { setValueByPath } from '../../utils';
+
+// 定义 emits 类型
+type Emits = {
+  (event: 'nodeClick', node: NodeDataType): void;
+  (event: 'nodeMouseover', node: NodeDataType): void;
+  (event: 'bracketsClick', collapsed: boolean, node: NodeDataType): void;
+  (event: 'iconClick', collapsed: boolean, node: NodeDataType): void;
+  (
+    event: 'selectedChange',
+    newVal: string | string[],
+    oldVal: string | string[],
+  ): void;
+  (event: 'update:selectedValue', value: string | string[]): void;
+  (event: 'update:data', data: any): void;
+};
+
+// 定义 props 和 emits
+const props = withDefaults(defineProps<Tree>(), {
+  fontSize: '12px',
+  itemHeight: 20,
+  height: 400,
+  deep: Infinity,
+  collapsedNodeLength: Infinity,
+  collapsedOnClickBrackets: true,
+  pathCollapsible: () => false,
+  nodeSelectable: () => false,
+
+  rootPath: 'root',
+  indent: 2,
+  showDoubleQuotes: true,
+  showLine: true,
+  selectOnClickNode: true,
+  highlightSelectedNode: true,
+  theme: 'light',
+  showKeyValueSpace: true,
+  editableTrigger: 'click',
+});
+const emits = defineEmits<Emits>();
+
+// 初始化数据
+const treeRef = ref<HTMLElement | null>(null);
+
+const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
+
+// 初始化折叠路径
+const initHiddenPaths = (
+  deep: number,
+  collapsedNodeLength: number,
+): Record<string, 1> => {
+  return originFlatData.value.reduce((acc, item) => {
+    const doCollapse = item.level >= deep || item.length >= collapsedNodeLength;
+    const pathComparison =
+      isFunction(props?.pathCollapsible) &&
+      props?.pathCollapsible?.(item as NodeDataType);
+    if (
+      (item.type === 'objectStart' || item.type === 'arrayStart') &&
+      (doCollapse || pathComparison)
+    ) {
+      return {
+        ...acc,
+        [item.path]: 1,
+      };
+    }
+    return acc;
+  }, {});
+};
+
+// 响应式状态
+interface State {
+  translateY: number;
+  visibleData: NodeDataType[] | null;
+  hiddenPaths: Record<string, 1>;
+}
+
+const state = reactive<State>({
+  translateY: 0,
+  visibleData: [],
+  hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
+});
+
+// 计算属性
+const flatData = computed(() => {
+  let startHiddenItem: null | NodeDataType = null;
+  const data: NodeDataType[] = [];
+  const length = originFlatData.value.length;
+  for (let i = 0; i < length; i++) {
+    const cur = originFlatData.value[i];
+    const item: NodeDataType = {
+      ...cur,
+      id: i,
+    };
+    const isHidden = state.hiddenPaths[item.path];
+    if (startHiddenItem && startHiddenItem.path === item.path) {
+      const isObject = startHiddenItem.type === 'objectStart';
+      const mergeItem: NodeDataType = {
+        ...item,
+        ...startHiddenItem,
+        showComma: item.showComma,
+        content: isObject ? '{...}' : '[...]',
+        type: isObject ? 'objectCollapsed' : 'arrayCollapsed',
+      };
+      startHiddenItem = null;
+      data.push(mergeItem);
+    } else if (isHidden && !startHiddenItem) {
+      startHiddenItem = item;
+      continue;
+    } else {
+      if (startHiddenItem) continue;
+      else data.push(item);
+    }
+  }
+  return data;
+});
+
+const selectedPaths = computed(() => {
+  const value = props.selectedValue;
+  if (value && props.selectableType === 'multiple' && Array.isArray(value)) {
+    return value;
+  }
+  return [value];
+});
+
+const propsErrorMessage = computed(() => {
+  const error =
+    props.selectableType &&
+    !props.selectOnClickNode &&
+    !props.showSelectController;
+  return error
+    ? 'When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail.'
+    : '';
+});
+
+// 更新可见数据
+const updateVisibleData = (scrollTop: number = 0) => {
+  const flatDataValue = flatData.value ?? [];
+  if (props.virtual) {
+    const visibleCount = props.height / props.itemHeight;
+    // const scrollTop = treeRef.value?.scrollTop || 0;
+    const scrollCount = Math.floor(scrollTop / props.itemHeight);
+    let start =
+      scrollCount < 0
+        ? 0
+        : scrollCount + visibleCount > flatDataValue.length
+          ? flatDataValue.length - visibleCount
+          : scrollCount;
+    if (start < 0) {
+      start = 0;
+    }
+    const end = start + visibleCount;
+    state.translateY = start * props.itemHeight;
+    state.visibleData = flatDataValue.filter(
+      (item, index) => index >= start && index < end,
+    );
+  } else {
+    state.visibleData = flatDataValue;
+  }
+};
+
+// 事件处理
+const handleTreeScroll = (e: ScrollEvent) => {
+  updateVisibleData(e?.detail?.scrollTop ?? 0);
+};
+
+const handleSelectedChange = ({ path }: NodeDataType) => {
+  const type = props.selectableType;
+  if (type === 'multiple') {
+    const index = selectedPaths.value.findIndex((item) => item === path);
+    const newVal = [...selectedPaths.value];
+    if (index !== -1) {
+      newVal.splice(index, 1);
+    } else {
+      newVal.push(path);
+    }
+    emits('update:selectedValue', newVal);
+
+    emits('selectedChange', newVal, [...selectedPaths.value]);
+  } else if (type === 'single') {
+    if (selectedPaths.value[0] !== path) {
+      const [oldVal] = selectedPaths.value;
+      const newVal = path;
+      emits('update:selectedValue', newVal);
+      emits('selectedChange', newVal, oldVal);
+    }
+  }
+};
+
+const handleNodeClick = (node: NodeDataType) => {
+  emits('nodeClick', node);
+};
+
+const handleNodeMouseover = (node: NodeDataType) => {
+  emits('nodeMouseover', node);
+};
+
+const updateCollapsedPaths = (collapsed: boolean, path: string) => {
+  if (collapsed) {
+    state.hiddenPaths = {
+      ...state.hiddenPaths,
+      [path]: 1,
+    };
+  } else {
+    const newPaths = { ...state.hiddenPaths };
+    delete newPaths[path];
+    state.hiddenPaths = newPaths;
+  }
+};
+
+const handleBracketsClick = (collapsed: boolean, node: NodeDataType) => {
+  if (props.collapsedOnClickBrackets) {
+    updateCollapsedPaths(collapsed, node.path);
+  }
+  emits('bracketsClick', collapsed, node);
+};
+
+const handleIconClick = (collapsed: boolean, node: NodeDataType) => {
+  updateCollapsedPaths(collapsed, node.path);
+  emits('iconClick', collapsed, node);
+};
+
+const handleValueChange = (value: unknown, path: string) => {
+  const newData = cloneDeep(props.data);
+  const rootPath = props.rootPath;
+  const key = path.slice(rootPath.length);
+  setValueByPath(newData, key, value);
+  emits('update:data', newData);
+};
+
+// 监听和副作用
+watchEffect(() => {
+  if (propsErrorMessage.value) {
+    emitError(propsErrorMessage.value);
+  }
+});
+
+watchEffect(() => {
+  if (flatData.value) {
+    updateVisibleData();
+  }
+});
+
+watch(
+  () => props.deep,
+  (val) => {
+    if (val)
+      state.hiddenPaths = initHiddenPaths(val, props.collapsedNodeLength);
+  },
+);
+
+watch(
+  () => props.collapsedNodeLength,
+  (val) => {
+    if (val) state.hiddenPaths = initHiddenPaths(props.deep, val);
+  },
+);
+
+// 生命周期钩子
+onMounted(() => {
+  updateVisibleData();
+});
+
+onUpdated(() => {
+  // 可选的更新后操作
+});
+
+onUnmounted(() => {
+  // 清理操作
+});
+</script>
+
+<style>
+.json-pretty-tree {
+  /* theme color */
+  --json-pretty-color-primary: #9254de;
+  --json-pretty-color-info: #1d8ce0;
+  --json-pretty-color-error: #ff4d4f;
+  --json-pretty-color-success: #888888;
+  --json-pretty-color-nil: #020201;
+
+  /* field values color */
+  --json-pretty-color-string: var(--json-pretty-color-success);
+  --json-pretty-color-number: var(--json-pretty-color-info);
+  --json-pretty-color-boolean: var(--json-pretty-color-info);
+  --json-pretty-color-null: var(--json-pretty-color-nil);
+  --json-pretty-color-undefined: var(--json-pretty-color-nil);
+
+  /* highlight */
+  --json-pretty-highlight-bg-color: rgba(146, 84, 222, 0.1);
+  --json-pretty-highlight-bg-color-dark: #2e4558;
+
+  /* comment */
+  --json-pretty-comment-color: #bfcbd9;
+
+  /* common border-color */
+  --json-pretty-border-color: #bfcbd9;
+
+  font-family:
+    'Monaco', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace;
+  font-size: v-bind(fontSize);
+  text-align: left;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+
+.json-pretty-tree.is-virtual {
+  overflow: auto;
+}
+
+.json-pretty-tree-node {
+  white-space: nowrap;
+}
+
+.json-pretty-tree-list {
+  overflow: auto;
+  position: relative;
+}
+
+.json-pretty-tree-list-holder {
+  position: relative;
+}
+
+.json-pretty-tree-list-holder-inner {
+  position: absolute;
+  width: 100%;
+}
+
+.dark {
+  /* 深色主题样式 */
+}
+</style>

package/dev/components/JsonPretty/type.ts

@@ -0,0 +1,123 @@
+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;
+  style: 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;
+    } & 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'
+}