vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -1,381 +1,387 @@
-<template>
-  <view
-    :class="{
-      'json-pretty-tree-node': true,
-      'has-selector': showSelectController,
-      'has-carets': showIcon,
-      'is-highlight': highlightSelectedNode && checked,
-      'json-pretty-tree-node-active': state.editing,
-      dark: theme === 'dark',
-    }"
-    @click="handleNodeClick"
-    @mouseover="handleNodeMouseover"
-    :style="customStyle">
-    <view v-if="showLineNumber" class="json-pretty-node-index">
-      {{ node.id + 1 }}
-    </view>
-
-    <CheckController
-      v-if="
-        showSelectController &&
-        selectable &&
-        node.type !== 'objectEnd' &&
-        node.type !== 'arrayEnd'
-      "
-      :isMultiple="isMultiple"
-      :theme="theme"
-      :checked="checked"
-      @change="handleSelectedChange" />
-
-    <view class="json-pretty-indent">
-      <view
-        v-for="(item, index) in Array(node.level)"
-        :key="index"
-        :class="{
-          'json-pretty-indent-unit': true,
-          'has-line': showLine,
-        }">
-        <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>
-
-    <view v-if="node.key" class="json-pretty-key">
-      <slot name="render-node-key" :node="props.node" :default-key="prettyKey">
-        {{ prettyKey }}
-      </slot>
-      <view class="json-pretty-colon">
-        {{ `:${showKeyValueSpace ? ' ' : ''}` }}
-      </view>
-    </view>
-
-    <view class="json-pretty-value-wrapper">
-      <Brackets
-        v-if="node.type !== 'content' && node.content"
-        :data="node.content.toString()"
-        @click="handleBracketsClick" />
-
-      <view v-else :class="valueClass" @click="handleValueEdit">
-        <input
-          v-if="editable && state.editing"
-          class="json-pretty-edit-input"
-          :value="defaultValue"
-          :focus="state.editing"
-          @blur="handleInputBlur" />
-        <view v-else>
-          <slot
-            name="render-node-value"
-            :node="props.node"
-            :default-value="defaultValue">
-            {{ defaultValue }}
-          </slot>
-          <text v-if="node.showComma">,</text>
-        </view>
-      </view>
-
-      <view v-if="showLength && collapsed" class="json-pretty-comment">
-        // {{ node.length }} items
-      </view>
-    </view>
-    <view class="json-pretty-tree-node-actions" v-if="showNodeActions">
-      <slot name="render-node-actions" :copy="handleCopy">
-        <view @click="handleCopy" class="json-pretty-tree-node-actions-item">
-          copy
-        </view>
-      </slot>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { reactive, computed } from 'vue';
-import Brackets from '../Brackets/index.vue';
-import CheckController from '../CheckController/index.vue';
-import Carets from '../Carets/index.vue';
-import { getDataType, isFunction, stringToAutoType } from '../../utils';
-
-import type { NodeDataType, TreeNodeProps } from '../../type';
-import { getValueByPath } from '../../../../utils';
-
-const props = withDefaults(defineProps<TreeNodeProps>(), {
-  rootPath: 'root',
-  indent: 2,
-  showDoubleQuotes: true,
-  showLine: true,
-  selectOnClickNode: true,
-  highlightSelectedNode: true,
-  theme: 'light',
-  showKeyValueSpace: true,
-  editableTrigger: 'click',
-  checked: false,
-
-  nodeSelectable: () => false,
-});
-
-const emit = defineEmits<{
-  (e: 'nodeClick', node: NodeDataType): void;
-  (e: 'nodeMouseover', node: NodeDataType): void;
-  (e: 'bracketsClick', collapsed: boolean, node: NodeDataType): void;
-  (e: 'iconClick', collapsed: boolean, node: NodeDataType): void;
-  (e: 'selectedChange', node: NodeDataType): void;
-  (e: 'valueChange', value: any, path: string): void;
-}>();
-
-const dataType = computed<string>(() => getDataType(props.node.content));
-
-const valueClass = computed(
-  () => `json-pretty-value json-pretty-value-${dataType.value}`,
-);
-
-const prettyKey = computed(() =>
-  props.showDoubleQuotes ? `"${props.node.key}"` : props.node.key,
-);
-
-const isMultiple = computed(() => props.selectableType === 'multiple');
-
-const isSingle = computed(() => props.selectableType === 'single');
-
-const selectable = computed(
-  () =>
-    isFunction(props?.nodeSelectable) &&
-    props?.nodeSelectable?.(props.node) &&
-    (isMultiple.value || isSingle.value),
-);
-
-const state = reactive({
-  editing: false,
-});
-
-const handleInputBlur = (e: FocusEvent) => {
-  const source = (e.detail as any).value;
-  const value = stringToAutoType(source);
-  emit('valueChange', value, props.node.path);
-  state.editing = false;
-};
-
-const defaultValue = computed(() => {
-  let value = props.node?.content;
-  if (value === null) {
-    value = 'null';
-  } else if (value === undefined) {
-    value = 'undefined';
-  }
-  return dataType.value === 'string' ? `"${value}"` : value?.toString();
-});
-
-const handleBracketsClick = () => {
-  emit('bracketsClick', !props.collapsed, props.node);
-};
-
-const handleIconClick = () => {
-  emit('iconClick', !props.collapsed, props.node);
-};
-
-const handleSelectedChange = () => {
-  emit('selectedChange', props.node);
-};
-
-const handleNodeClick = () => {
-  emit('nodeClick', props.node);
-  if (selectable.value && props.selectOnClickNode) {
-    emit('selectedChange', props.node);
-  }
-};
-
-const handleNodeMouseover = () => {
-  emit('nodeMouseover', props.node);
-};
-
-const handleValueEdit = (_e: MouseEvent) => {
-  if (!props.editable) return;
-
-  if (!state.editing) {
-    state.editing = true;
-  }
-};
-
-const handleCopy = () => {
-  const { key, path } = props.node;
-  const rootPath = props.rootPath;
-
-  const content = getValueByPath(props.data, path.slice(rootPath.length));
-
-  const copiedData = JSON.stringify(
-    key ? { [key]: content } : content,
-    null,
-    2,
-  );
-
-  uni.setClipboardData({
-    data: copiedData,
-    success() {
-      uni.showToast({
-        title: '复制成功',
-        icon: 'none',
-      });
-    },
-    fail() {
-      uni.showToast({
-        title: '复制失败',
-        icon: 'none',
-      });
-    },
-  });
-};
-</script>
-<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;
-}
-
-.json-pretty-indent-space {
-  width: 6px;
-}
-
-.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;
-  right: 0;
-  top: 0;
-  padding: 0 4px;
-  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: 0 8px;
-  border: 1px solid #eee;
-  box-shadow: none;
-  box-sizing: border-box;
-  font: unset;
-  border-radius: 5px;
-  font-family: inherit;
-  color: #000;
-  font-weight: 400;
-  background-color: #fff;
-  height: 16px;
-}
-</style>
+<template>
+  <view
+    :class="{
+      'json-pretty-tree-node': true,
+      'has-selector': showSelectController,
+      'has-carets': showIcon,
+      'is-highlight': highlightSelectedNode && checked,
+      'json-pretty-tree-node-active': state.editing,
+      dark: theme === 'dark',
+    }"
+    @click="handleNodeClick"
+    @mouseover="handleNodeMouseover"
+    :style="customStyle">
+    <view
+      v-if="showLineNumber"
+      class="json-pretty-node-index"
+      :style="{
+        width: `${Number(node.total?.toString().length || 1) * 8 + 10}px`,
+      }">
+      {{ node.id + 1 }}
+    </view>
+
+    <CheckController
+      v-if="
+        showSelectController &&
+        selectable &&
+        node.type !== 'objectEnd' &&
+        node.type !== 'arrayEnd'
+      "
+      :isMultiple="isMultiple"
+      :theme="theme"
+      :checked="checked"
+      @change="handleSelectedChange" />
+
+    <view class="json-pretty-indent">
+      <view
+        v-for="(item, index) in Array(node.level)"
+        :key="index"
+        :class="{
+          'json-pretty-indent-unit': true,
+          'has-line': showLine,
+        }">
+        <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>
+
+    <view v-if="node.key" class="json-pretty-key">
+      <slot name="render-node-key" :node="props.node" :default-key="prettyKey">
+        {{ prettyKey }}
+      </slot>
+      <view class="json-pretty-colon">
+        {{ `:${showKeyValueSpace ? ' ' : ''}` }}
+      </view>
+    </view>
+
+    <view class="json-pretty-value-wrapper">
+      <Brackets
+        v-if="node.type !== 'content' && node.content"
+        :data="node.content.toString()"
+        @click="handleBracketsClick" />
+
+      <view v-else :class="valueClass" @click="handleValueEdit">
+        <input
+          v-if="editable && state.editing"
+          class="json-pretty-edit-input"
+          :value="defaultValue"
+          :focus="state.editing"
+          @blur="handleInputBlur" />
+        <view v-else>
+          <slot
+            name="render-node-value"
+            :node="props.node"
+            :default-value="defaultValue">
+            {{ defaultValue }}
+          </slot>
+          <text v-if="node.showComma">,</text>
+        </view>
+      </view>
+
+      <view v-if="showLength && collapsed" class="json-pretty-comment">
+        // {{ node.length }} items
+      </view>
+    </view>
+    <view class="json-pretty-tree-node-actions" v-if="showNodeActions">
+      <slot name="render-node-actions" :copy="handleCopy">
+        <view @click="handleCopy" class="json-pretty-tree-node-actions-item">
+          copy
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { reactive, computed } from 'vue';
+import Brackets from '../Brackets/index.vue';
+import CheckController from '../CheckController/index.vue';
+import Carets from '../Carets/index.vue';
+import { getDataType, isFunction, stringToAutoType } from '../../utils';
+
+import type { NodeDataType, TreeNodeProps } from '../../type';
+import { getValueByPath } from '../../../../../utils';
+
+const props = withDefaults(defineProps<TreeNodeProps>(), {
+  rootPath: 'root',
+  indent: 2,
+  showDoubleQuotes: true,
+  showLine: true,
+  selectOnClickNode: true,
+  highlightSelectedNode: true,
+  theme: 'light',
+  showKeyValueSpace: true,
+  editableTrigger: 'click',
+  checked: false,
+
+  nodeSelectable: () => false,
+});
+
+const emit = defineEmits<{
+  (e: 'nodeClick', node: NodeDataType): void;
+  (e: 'nodeMouseover', node: NodeDataType): void;
+  (e: 'bracketsClick', collapsed: boolean, node: NodeDataType): void;
+  (e: 'iconClick', collapsed: boolean, node: NodeDataType): void;
+  (e: 'selectedChange', node: NodeDataType): void;
+  (e: 'valueChange', value: any, path: string): void;
+}>();
+
+const dataType = computed<string>(() => getDataType(props.node.content));
+
+const valueClass = computed(
+  () => `json-pretty-value json-pretty-value-${dataType.value}`,
+);
+
+const prettyKey = computed(() =>
+  props.showDoubleQuotes ? `"${props.node.key}"` : props.node.key,
+);
+
+const isMultiple = computed(() => props.selectableType === 'multiple');
+
+const isSingle = computed(() => props.selectableType === 'single');
+
+const selectable = computed(
+  () =>
+    isFunction(props?.nodeSelectable) &&
+    props?.nodeSelectable?.(props.node) &&
+    (isMultiple.value || isSingle.value),
+);
+
+const state = reactive({
+  editing: false,
+});
+
+const handleInputBlur = (e: FocusEvent) => {
+  const source = (e.detail as any).value;
+  const value = stringToAutoType(source);
+  emit('valueChange', value, props.node.path);
+  state.editing = false;
+};
+
+const defaultValue = computed(() => {
+  let value = props.node?.content;
+  if (value === null) {
+    value = 'null';
+  } else if (value === undefined) {
+    value = 'undefined';
+  }
+  return dataType.value === 'string' ? `"${value}"` : value?.toString();
+});
+
+const handleBracketsClick = () => {
+  emit('bracketsClick', !props.collapsed, props.node);
+};
+
+const handleIconClick = () => {
+  emit('iconClick', !props.collapsed, props.node);
+};
+
+const handleSelectedChange = () => {
+  emit('selectedChange', props.node);
+};
+
+const handleNodeClick = () => {
+  emit('nodeClick', props.node);
+  if (selectable.value && props.selectOnClickNode) {
+    emit('selectedChange', props.node);
+  }
+};
+
+const handleNodeMouseover = () => {
+  emit('nodeMouseover', props.node);
+};
+
+const handleValueEdit = (_e: MouseEvent) => {
+  if (!props.editable) return;
+
+  if (!state.editing) {
+    state.editing = true;
+  }
+};
+
+const handleCopy = () => {
+  const { key, path } = props.node;
+  const rootPath = props.rootPath;
+
+  const content = getValueByPath(props.data, path.slice(rootPath.length));
+
+  const copiedData = JSON.stringify(
+    key ? { [key]: content } : content,
+    null,
+    2,
+  );
+
+  uni.setClipboardData({
+    data: copiedData,
+    success() {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'none',
+      });
+    },
+    fail() {
+      uni.showToast({
+        title: '复制失败',
+        icon: 'none',
+      });
+    },
+  });
+};
+</script>
+<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;
+}
+
+.json-pretty-indent-space {
+  width: 6px;
+}
+
+.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;
+  right: 0;
+  top: 0;
+  padding: 0 4px;
+  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 {
+  flex-shrink: 0;
+  text-align: right;
+  margin-right: 12px;
+  color: var(--json-pretty-comment-color);
+  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: 0 8px;
+  border: 1px solid #eee;
+  box-shadow: none;
+  box-sizing: border-box;
+  font: unset;
+  border-radius: 5px;
+  font-family: inherit;
+  color: #000;
+  font-weight: 400;
+  background-color: #fff;
+  height: 16px;
+}
+</style>