vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/JsonPretty/components/TreeNode/index.vue

@@ -10,8 +10,7 @@
     }"
     @click="handleNodeClick"
     @mouseover="handleNodeMouseover"
-    :style="customStyle"
-  >
+    :style="customStyle">
     <view v-if="showLineNumber" class="json-pretty-node-index">
       {{ node.id + 1 }}
     </view>
@@ -24,9 +23,9 @@
         node.type !== 'arrayEnd'
       "
       :isMultiple="isMultiple"
+      :theme="theme"
       :checked="checked"
-      @change="handleSelectedChange"
-    />
+      @change="handleSelectedChange" />
 
     <view class="json-pretty-indent">
       <view
@@ -35,13 +34,11 @@
         :class="{
           'json-pretty-indent-unit': true,
           'has-line': showLine,
-        }"
-      >
+        }">
         <view
-          v-for="() in Array(indent)"
-          :key="Math.random()"
-          class="json-pretty-indent-space"
-        ></view>
+          v-for="(_, i) in indent"
+          :key="i"
+          class="json-pretty-indent-space"></view>
       </view>
       <Carets v-if="showIcon" :nodeType="node.type" @click="handleIconClick" />
     </view>
@@ -59,8 +56,7 @@
       <Brackets
         v-if="node.type !== 'content' && node.content"
         :data="node.content.toString()"
-        @click="handleBracketsClick"
-      />
+        @click="handleBracketsClick" />
 
       <view v-else :class="valueClass" @click="handleValueEdit">
         <input
@@ -68,14 +64,12 @@
           class="json-pretty-edit-input"
           :value="defaultValue"
           :focus="state.editing"
-          @blur="handleInputBlur"
-        />
+          @blur="handleInputBlur" />
         <view v-else>
           <slot
             name="render-node-value"
             :node="props.node"
-            :default-value="defaultValue"
-          >
+            :default-value="defaultValue">
             {{ defaultValue }}
           </slot>
           <text v-if="node.showComma">,</text>
@@ -195,7 +189,7 @@ const handleNodeMouseover = () => {
   emit('nodeMouseover', props.node);
 };
 
-const handleValueEdit = (e: MouseEvent) => {
+const handleValueEdit = (_e: MouseEvent) => {
   if (!props.editable) return;
 
   if (!state.editing) {
@@ -235,30 +229,37 @@ const handleCopy = () => {
 <style scoped>
 .json-pretty-tree-node {
   display: flex;
+
   /* align-items: center; */
   position: relative;
   line-height: 20px;
 }
+
 .json-pretty-tree-node.has-carets {
   padding-left: 15px;
 }
+
 .json-pretty-tree-node.has-selector,
 .json-pretty-tree-node.has-carets.has-selector {
   padding-left: 30px;
 }
+
 .json-pretty-tree-node.is-highlight,
 .json-pretty-tree-node:hover {
   background-color: var(--json-pretty-highlight-bg-color);
   border-radius: 4px;
 }
+
 .json-pretty-tree-node.is-highlight .json-pretty-tree-node-actions,
 .json-pretty-tree-node:hover .json-pretty-tree-node-actions {
   display: block;
 }
+
 .json-pretty-tree-node .json-pretty-indent {
   display: flex;
   position: relative;
 }
+
 .json-pretty-tree-node .json-pretty-indent-unit {
   display: flex;
 }
@@ -270,6 +271,7 @@ const handleCopy = () => {
 .json-pretty-tree-node .json-pretty-indent-unit.has-line {
   border-left: 1px dashed var(--json-pretty-border-color);
 }
+
 .json-pretty-tree-node .json-pretty-tree-node-actions {
   display: none;
   position: absolute;
@@ -279,81 +281,101 @@ const handleCopy = () => {
   background-color: var(--json-pretty-highlight-bg-color);
   border-radius: 4px;
 }
+
 .json-pretty-tree-node
   .json-pretty-tree-node-actions
   .json-pretty-tree-node-actions-item {
   cursor: pointer;
 }
+
 .json-pretty-tree-node
   .json-pretty-tree-node-actions
   .json-pretty-tree-node-actions-item:hover {
   color: var(--json-pretty-color-primary);
 }
+
 .json-pretty-tree-node.dark.is-highlight,
 .json-pretty-tree-node.dark:hover {
   background-color: var(--json-pretty-highlight-bg-color-dark);
 }
+
 .json-pretty-tree-node.dark .json-pretty-tree-node-actions {
   background-color: var(--json-pretty-highlight-bg-color-dark);
 }
+
 .json-pretty-tree-node-active {
   background-color: var(--json-pretty-highlight-bg-color);
   border-radius: 4px;
 }
+
 .json-pretty-tree-node-active .json-pretty-tree-node-actions {
   display: block;
 }
+
 .json-pretty-node-index {
   position: absolute;
   right: 100%;
   margin-right: 4px;
   user-select: none;
 }
+
 .json-pretty-colon {
   white-space: pre;
 }
+
 .json-pretty-comment {
   color: var(--json-pretty-color-primary);
 }
+
 .json-pretty-key {
   display: flex;
 }
+
 .json-pretty-value-wrapper {
   display: flex;
   align-items: center;
 }
+
 .json-pretty-value {
   /* word-break: break-all; */
+
   /* white-space: normal; */
+
   /* white-space: pre-line; */
   white-space: nowrap;
 }
+
 .json-pretty-value-null {
   color: var(--json-pretty-color-null);
 }
+
 .json-pretty-value-undefined {
   color: var(--json-pretty-color-undefined);
 }
+
 .json-pretty-value-number {
   color: var(--json-pretty-color-number);
 }
+
 .json-pretty-value-boolean {
   color: var(--json-pretty-color-boolean);
 }
+
 .json-pretty-value-string {
   color: var(--json-pretty-color-string);
 }
+
 .json-pretty-edit-input {
-  padding: 0px 8px;
+  padding: 0 8px;
   border: 1px solid #eee;
   box-shadow: none;
   box-sizing: border-box;
-  border-radius: 5;
+  font: unset;
+  border-radius: 5px;
   font-family: inherit;
   color: #000;
   font-weight: 400;
   background-color: #fff;
-  font: unset;
   height: 16px;
 }
 </style>

package/dist/v3/JsonPretty/index.vue

@@ -14,25 +14,23 @@
             ...style,
           }
         : style
-    "
-  >
-    <VirtualListPro
-      v-if="autoVirtual"
+    ">
+    <Empty v-if="isEmpty" />
+    <VirtualList
+      v-else-if="autoVirtual"
       :height="state.height"
       :pageSize="pageSize"
       :data="flatData"
       scroll-with-animation
       showBackTop
-      scrollX
-    >
+      scrollX>
       <template v-slot="{ list, start, itemsHeight, onSizeChange }">
         <AutoSize
           v-for="(item, index) in list"
           :index="start + index"
           :key="start + index"
           :itemsHeight="itemsHeight"
-          :onSizeChange="onSizeChange"
-        >
+          :onSizeChange="onSizeChange">
           <TreeNode
             :data="data"
             :rootPath="rootPath"
@@ -65,11 +63,10 @@
               itemHeight && itemHeight !== 20
                 ? { lineHeight: `${itemHeight}px` }
                 : {}
-            "
-          />
+            " />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
     <template v-else>
       <TreeNode
         v-for="item in flatData"
@@ -105,11 +102,13 @@
           itemHeight && itemHeight !== 20
             ? { lineHeight: `${itemHeight}px` }
             : {}
-        "
-      />
+        " />
     </template>
 
-    <view v-if="showCopyAll" class="json-pretty-tree-copy" @click="onCopyAll">
+    <view
+      v-if="showCopyAll && !isEmpty"
+      class="json-pretty-tree-copy"
+      @click="onCopyAll">
       Copy All
     </view>
   </view>
@@ -121,20 +120,20 @@ import {
   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 VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
 
 import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
 
-import type { NodeDataType, ScrollEvent, Tree } from './type';
+import type { NodeDataType, Tree } from './type';
 import { setValueByPath } from '../../utils';
+import Empty from '../Empty/index.vue';
 
 // 定义 emits 类型
 type Emits = {
@@ -281,9 +280,17 @@ const autoVirtual = computed(() => {
   return false;
 });
 
+const isEmpty = computed(() => {
+  return (
+    !props.data ||
+    (Array.isArray(props.data) && props.data.length === 0) ||
+    (typeof props.data === 'object' && Object.keys(props.data).length === 0)
+  );
+});
+
 // 更新可见数据
 // 优化 虚拟列表，每项高度自适应
-const updateVisibleData = (scrollTop: number = 0) => {
+const _updateVisibleData = (scrollTop: number = 0) => {
   const flatDataValue = flatData.value ?? [];
   if (autoVirtual.value) {
     const visibleCount = props.height / props.itemHeight;
@@ -439,6 +446,13 @@ watch(
   },
 );
 
+watch(
+  () => props.height,
+  (val) => {
+    state.height = val;
+  },
+);
+
 // 生命周期钩子
 onMounted(() => {
   // updateVisibleData();
@@ -455,12 +469,12 @@ onUnmounted(() => {
 
 <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;
+  /* theme color - link to global theme variables */
+  --json-pretty-color-primary: var(--dev-tool-main-color, #9254de);
+  --json-pretty-color-info: var(--dev-tool-number-color, #1d8ce0);
+  --json-pretty-color-error: var(--dev-tool-error-color, #ff4d4f);
+  --json-pretty-color-success: var(--dev-tool-string-color, #888);
+  --json-pretty-color-nil: var(--dev-tool-nil-color, #020201);
 
   /* field values color */
   --json-pretty-color-string: var(--json-pretty-color-success);
@@ -470,17 +484,22 @@ onUnmounted(() => {
   --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;
+  --json-pretty-highlight-bg-color: var(
+    --dev-tool-active-bg-color,
+    rgb(146 84 222 / 10%)
+  );
+  --json-pretty-highlight-bg-color-dark: var(
+    --dev-tool-active-bg-color,
+    #2e4558
+  );
 
   /* comment */
-  --json-pretty-comment-color: #bfcbd9;
+  --json-pretty-comment-color: var(--dev-tool-note-color, #bfcbd9);
 
   /* common border-color */
-  --json-pretty-border-color: #bfcbd9;
+  --json-pretty-border-color: var(--dev-tool-border-color, #bfcbd9);
 
-  font-family:
-    'Monaco', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace;
+  font-family: Monaco, Menlo, Consolas, 'Bitstream Vera Sans Mono', monospace;
   font-size: v-bind(fontSize);
   text-align: left;
   overflow: auto;
@@ -496,12 +515,6 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 
-.dark {
-  /* 深色主题样式 */
-  --json-pretty-color-nil: #bfcbd9;
-  --json-pretty-color-undefined: var(--json-pretty-color-nil);
-}
-
 .json-pretty-tree-copy {
   padding: 0 12px;
   position: absolute;
@@ -512,4 +525,14 @@ onUnmounted(() => {
   border-radius: 4px;
   background-color: var(--json-pretty-highlight-bg-color);
 }
+
+.json-pretty-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  min-height: 60px;
+}
 </style>

package/dist/v3/JsonPretty/utils/index.ts

@@ -1,8 +1,8 @@
 import type {
   JSONDataType,
   JSONFlattenOptions,
-  JSONFlattenReturnType
-} from "../type";
+  JSONFlattenReturnType,
+} from '../type';
 
 export function emitError(message: string): void {
   throw new Error(`[JsonPretty] ${message}`);
@@ -14,46 +14,46 @@ export function getDataType(value: unknown): string {
 
 export function jsonFlatten(
   data: JSONDataType,
-  path = "root",
+  path = 'root',
   level = 0,
-  options?: JSONFlattenOptions
+  options?: JSONFlattenOptions,
 ): JSONFlattenReturnType[] {
   const {
     key,
     index,
-    type = "content",
+    type = 'content',
     showComma = false,
-    length = 1
+    length = 1,
   } = options || ({} as JSONFlattenOptions);
   const dataType = getDataType(data);
 
-  if (dataType === "array") {
+  if (dataType === 'array') {
     const inner = arrFlat(
       (data as JSONDataType[]).map((item, idx, arr) =>
         jsonFlatten(item, `${path}[${idx}]`, level + 1, {
           index: idx,
           showComma: idx !== arr.length - 1,
           length,
-          type
-        })
-      )
+          type,
+        }),
+      ),
     ) as JSONFlattenReturnType[];
     return [
-      jsonFlatten("[", path, level, {
+      jsonFlatten('[', path, level, {
         showComma: false,
         key,
         length: (data as unknown[]).length,
-        type: "arrayStart"
-      })[0]
+        type: 'arrayStart',
+      })[0],
     ].concat(
       inner,
-      jsonFlatten("]", path, level, {
+      jsonFlatten(']', path, level, {
         showComma,
         length: (data as unknown[]).length,
-        type: "arrayEnd"
-      })[0]
+        type: 'arrayEnd',
+      })[0],
     );
-  } else if (dataType === "object") {
+  } else if (dataType === 'object') {
     const keys = Object.keys(data as Record<string, JSONDataType>);
     const inner = arrFlat(
       keys.map((objKey, idx, arr) =>
@@ -67,45 +67,45 @@ export function jsonFlatten(
             key: objKey,
             showComma: idx !== arr.length - 1,
             length,
-            type
-          }
-        )
-      )
+            type,
+          },
+        ),
+      ),
     ) as JSONFlattenReturnType[];
     return [
-      jsonFlatten("{", path, level, {
+      jsonFlatten('{', path, level, {
         showComma: false,
         key,
         index,
         length: keys.length,
-        type: "objectStart"
-      })[0]
+        type: 'objectStart',
+      })[0],
     ].concat(
       inner,
-      jsonFlatten("}", path, level, {
+      jsonFlatten('}', path, level, {
         showComma,
         length: keys.length,
-        type: "objectEnd"
-      })[0]
+        type: 'objectEnd',
+      })[0],
     );
   }
 
   return [
     {
-      content: data as JSONFlattenReturnType["content"],
+      content: data as JSONFlattenReturnType['content'],
       level,
       key,
       index,
       path,
       showComma,
       length,
-      type
-    }
+      type,
+    },
   ];
 }
 
 export function arrFlat<T extends unknown[]>(arr: T): unknown[] {
-  if (typeof Array.prototype.flat === "function") {
+  if (typeof Array.prototype.flat === 'function') {
     return arr.flat();
   }
   const stack = [...arr];
@@ -121,14 +121,11 @@ export function arrFlat<T extends unknown[]>(arr: T): unknown[] {
   return result;
 }
 
-export function cloneDeep<T extends unknown>(
-  source: T,
-  hash = new WeakMap()
-): T {
+export function cloneDeep<T>(source: T, hash = new WeakMap()): T {
   if (source === null || source === undefined) return source;
   if (source instanceof Date) return new Date(source) as T;
   if (source instanceof RegExp) return new RegExp(source) as T;
-  if (typeof source !== "object") return source;
+  if (typeof source !== 'object') return source;
   if (hash.get(source as Record<string, unknown>))
     return hash.get(source as Record<string, unknown>);
 
@@ -147,18 +144,18 @@ export function cloneDeep<T extends unknown>(
 
 export function stringToAutoType(source: string): unknown {
   let value;
-  if (source === "null") value = null;
-  else if (source === "undefined") value = undefined;
-  else if (source === "true") value = true;
-  else if (source === "false") value = false;
+  if (source === 'null') value = null;
+  else if (source === 'undefined') value = undefined;
+  else if (source === 'true') value = true;
+  else if (source === 'false') value = false;
   else if (
     source[0] + source[source.length - 1] === '""' ||
     source[0] + source[source.length - 1] === "''"
   ) {
     value = source.slice(1, -1);
   } else if (
-    (typeof Number(source) === "number" && !isNaN(Number(source))) ||
-    source === "NaN"
+    (typeof Number(source) === 'number' && !isNaN(Number(source))) ||
+    source === 'NaN'
   ) {
     value = Number(source);
   } else {
@@ -167,6 +164,6 @@ export function stringToAutoType(source: string): unknown {
   return value;
 }
 
-export function isFunction(value: unknown): value is Function {
-  return typeof value === "function";
+export function isFunction(value: unknown): value is (...args: any[]) => any {
+  return typeof value === 'function';
 }

package/dist/v3/MovableContainer/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <movable-area class="movable-area" :style="areaStyle">
+    <movable-view
+      class="movable-view"
+      :style="viewStyle"
+      :x="localX"
+      :y="localY"
+      direction="all"
+      @change="onChange">
+      <slot></slot>
+    </movable-view>
+  </movable-area>
+</template>
+
+<script setup lang="ts">
+import { debounce } from '../../utils';
+import { ref, computed, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    x?: number;
+    y?: number;
+    width?: string;
+    height?: string;
+    zIndex?: number;
+    customStyle?: Record<string, any>;
+    contentHeight?: number;
+  }>(),
+  {
+    x: 0,
+    y: 0,
+    width: '100px',
+    height: '100px',
+    zIndex: 1000,
+    contentHeight: 0,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:x', val: number): void;
+  (e: 'update:y', val: number): void;
+  (e: 'change', detail: any): void;
+}>();
+
+const localX = ref(props.x);
+const localY = ref(props.y);
+
+watch([() => props.x, () => props.y], ([newX, newY]) => {
+  if (newX !== undefined) localX.value = newX;
+  if (newY !== undefined) localY.value = newY;
+});
+
+const areaStyle = computed(() => {
+  const { _paddingBottom, paddingTop, ...rest } = (props.customStyle ||
+    {}) as any;
+  return {
+    ...rest,
+    top: paddingTop || 0,
+    height: props.contentHeight + 'px',
+    position: 'fixed' as const,
+    left: 0,
+    width: '100vw',
+    pointerEvents: 'none' as const,
+    zIndex: props.zIndex,
+  };
+});
+
+const viewStyle = computed(() => ({
+  width: props.width,
+  height: props.height,
+  pointerEvents: 'auto' as const,
+}));
+
+const onChange = debounce((e: any) => {
+  localX.value = e.detail.x;
+  localY.value = e.detail.y;
+  emit('update:x', e.detail.x);
+  emit('update:y', e.detail.y);
+  emit('change', e);
+}, 500);
+</script>
+
+<style scoped>
+.movable-area {
+  height: 100vh;
+  width: 100vw;
+  touch-action: none;
+}
+</style>