vite-uni-dev-tool 0.0.11 → 0.0.13

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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,474 +0,0 @@
-<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
-    "
-  >
-    <VirtualListPro
-      v-if="autoVirtual"
-      :height="state.height"
-      :pageSize="pageSize"
-      :data="flatData"
-    >
-      <template v-slot="{ list, start }">
-        <AutoSize
-          v-for="(item, index) in list"
-          :index="start + index"
-          :key="start + index"
-        >
-          <TreeNode
-            :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` }
-                : {}
-            "
-          />
-        </AutoSize>
-      </template>
-    </VirtualListPro>
-    <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 {
-  reactive,
-  computed,
-  watchEffect,
-  watch,
-  defineEmits,
-  onMounted,
-  onUpdated,
-  onUnmounted,
-} from 'vue';
-import TreeNode from './components/TreeNode/index.vue';
-
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.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 originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
-
-const pageSize = computed(() => {
-  return Math.ceil(props.height / props.itemHeight) + 5;
-});
-
-// 初始化折叠路径
-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>;
-  height: number;
-}
-
-const state = reactive<State>({
-  translateY: 0,
-  visibleData: [],
-  hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
-  height: props.height ?? 400,
-});
-
-// 计算属性
-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 autoVirtual = computed(() => {
-  if (props.virtual) return true;
-  if (typeof props.autoVirtualRow === 'number') {
-    if (flatData.value.length > props.autoVirtualRow) {
-      return true;
-    }
-  }
-  return false;
-});
-
-// 更新可见数据
-// 优化 虚拟列表，每项高度自适应
-const updateVisibleData = (scrollTop: number = 0) => {
-  const flatDataValue = flatData.value ?? [];
-  if (autoVirtual.value) {
-    const visibleCount = props.height / props.itemHeight;
-    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;
-  }
-
-  if (path === props.rootPath) {
-    state.height = collapsed ? props.itemHeight : props.height;
-  }
-};
-
-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);
-  },
-);
-
-// 监听是否折叠，默认不折叠
-watch(
-  () => props.collapsed,
-  (val) => {
-    if (val) {
-      updateCollapsedPaths(true, props.rootPath);
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-// 生命周期钩子
-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;
-}
-
-.dark {
-  /* 深色主题样式 */
-}
-</style>

package/dev/components/JsonPretty/type.ts

@@ -1,125 +0,0 @@
-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;
-      /** 超过行数将会自动启用虚拟列表 */
-      autoVirtualRow: number;
-    } & 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'
-}