vite-uni-dev-tool 0.0.13 → 0.0.14

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

@@ -0,0 +1,417 @@
+<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="style"
+  >
+    <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"
+      :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="() in Array(indent)" :key="Math.random()">&nbsp;</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="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="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>
+import { getDataType, isFunction, stringToAutoType } from '../../utils';
+import { getValueByPath } from '../../../../utils';
+import Brackets from '../Brackets/index.vue';
+import CheckController from '../CheckController/index.vue';
+import Carets from '../Carets/index.vue';
+
+export default {
+  components: {
+    Brackets,
+    CheckController,
+    Carets,
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      default: 'root',
+    },
+    indent: {
+      type: Number,
+      default: 2,
+    },
+    showDoubleQuotes: {
+      type: Boolean,
+      default: true,
+    },
+    showLine: {
+      type: Boolean,
+      default: true,
+    },
+    selectOnClickNode: {
+      type: Boolean,
+      default: true,
+    },
+    highlightSelectedNode: {
+      type: Boolean,
+      default: true,
+    },
+    theme: {
+      type: String,
+      default: 'light',
+    },
+    showKeyValueSpace: {
+      type: Boolean,
+      default: true,
+    },
+    editableTrigger: {
+      type: String,
+      default: 'click',
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    nodeSelectable: {
+      type: Function,
+      default: () => false,
+    },
+    selectableType: {
+      type: String,
+      default: 'multiple',
+    },
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+    showSelectController: {
+      type: Boolean,
+      default: false,
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+    showLineNumber: {
+      type: Boolean,
+      default: false,
+    },
+    showLength: {
+      type: Boolean,
+      default: false,
+    },
+    showNodeActions: {
+      type: Boolean,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      state: {
+        editing: false,
+      },
+    };
+  },
+  computed: {
+    dataType() {
+      return getDataType(this.node.content);
+    },
+    valueClass() {
+      return `json-pretty-value json-pretty-value-${this.dataType}`;
+    },
+    prettyKey() {
+      return this.showDoubleQuotes ? `"${this.node.key}"` : this.node.key;
+    },
+    isMultiple() {
+      return this.selectableType === 'multiple';
+    },
+    isSingle() {
+      return this.selectableType === 'single';
+    },
+    selectable() {
+      return (
+        isFunction(this.nodeSelectable) &&
+        this.nodeSelectable(this.node) &&
+        (this.isMultiple || this.isSingle)
+      );
+    },
+    defaultValue() {
+      let value = this.node?.content;
+      if (value === null) {
+        value = 'null';
+      } else if (value === undefined) {
+        value = 'undefined';
+      }
+      return this.dataType === 'string' ? `"${value}"` : value?.toString();
+    },
+  },
+  methods: {
+    handleInputBlur(e) {
+      const source = e.detail.value;
+      const value = stringToAutoType(source);
+      this.$emit('valueChange', value, this.node.path);
+      this.state.editing = false;
+    },
+    handleBracketsClick() {
+      this.$emit('bracketsClick', !this.collapsed, this.node);
+    },
+    handleIconClick() {
+      this.$emit('iconClick', !this.collapsed, this.node);
+    },
+    handleSelectedChange() {
+      this.$emit('selectedChange', this.node);
+    },
+    handleNodeClick() {
+      this.$emit('nodeClick', this.node);
+      if (this.selectable && this.selectOnClickNode) {
+        this.$emit('selectedChange', this.node);
+      }
+    },
+    handleNodeMouseover() {
+      this.$emit('nodeMouseover', this.node);
+    },
+    handleValueEdit(e) {
+      if (!this.editable) return;
+      if (!this.state.editing) {
+        this.state.editing = true;
+      }
+    },
+    handleCopy() {
+      const { key, path } = this.node;
+      const rootPath = this.rootPath;
+      const content = getValueByPath(this.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-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: 0px 8px;
+  border: 1px solid #eee;
+  box-shadow: none;
+  box-sizing: border-box;
+  border-radius: 5;
+  font-family: inherit;
+  color: #000;
+  font-weight: 400;
+  background-color: #fff;
+  font: unset;
+  height: 16px;
+}
+</style>

package/dist/v2/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/dist/v2/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
+  };
+}