vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/DeviceInfo/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <view class="device-info-content">
-    <JsonPretty :data="deviceInfo" v-if="showJson" />
-    <Empty v-else />
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-import Empty from '../Empty/index.vue';
-import JsonPretty from '../JsonPretty/index.vue';
-const props = defineProps<{
-  deviceInfo: Record<string, any>;
-}>();
-
-const showJson = computed(() => {
-  try {
-    const str = JSON.stringify(props.deviceInfo);
-    if (typeof props.deviceInfo === 'object' && (str === '' || str === '{}')) {
-      return false;
-    }
-    return true;
-  } catch (error) {
-    return false;
-  }
-});
-</script>
-<style>
-.device-info-content {
-  padding: 16px;
-  font-size: var(--dev-tool-base-font-size);
-}
-</style>

package/dev/components/Empty/index.vue

@@ -1,28 +0,0 @@
-<template>
-  <view class="dev-tool-empty">
-    <image :src="empty" class="dev-tool-empty-image" />
-    <text class="dev-tool-empty-text">{{ text ?? '暂无调试信息' }}</text>
-  </view>
-</template>
-<script lang="ts" setup>
-import empty from './empty.png';
-defineProps<{ text?: string }>();
-</script>
-<style scoped>
-.dev-tool-empty {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-}
-.dev-tool-empty-image {
-  margin-top: 50px;
-  width: 50px;
-  height: 50px;
-}
-
-.dev-tool-empty-text {
-  color: #888;
-}
-</style>

package/dev/components/FilterInput/index.vue

@@ -1,86 +0,0 @@
-<template>
-  <view class="filter-input-wrapper">
-    <input
-      :class="`filter-input`"
-      :value="modelValue"
-      :placeholder="placeholder || '请输入'"
-      @confirm="debounceInput"
-    />
-    <view class="filter-input-clear" @click="onClear"> × </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { debounce } from '../../utils';
-import { ref, onMounted } from 'vue';
-const props = defineProps<{
-  placeholder?: string;
-  modelValue?: string;
-}>();
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search', value: string): void;
-  (e: 'openSearch', value: boolean): void;
-}>();
-
-const isActive = ref(false);
-
-function onInput(e: any) {
-  const value = e.detail.value;
-  emit('update:modelValue', value);
-  emit('search', value);
-}
-
-function onClear() {
-  emit('update:modelValue', '');
-  emit('search', '');
-}
-
-function openSearch(open: boolean) {
-  isActive.value = open;
-  emit('openSearch', open);
-  if (!open && props.modelValue) {
-    emit('update:modelValue', '');
-    emit('search', '');
-  }
-}
-
-const debounceInput = debounce(onInput, 500);
-</script>
-<style scoped>
-.filter-input-wrapper {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  width: 100%;
-  height: 24px;
-
-  border-radius: 4px;
-  border: 1px solid #eee;
-
-  background-color: #fff;
-  transition: max-width 0.3s;
-  box-sizing: border-box;
-}
-
-.filter-input {
-  flex: 1;
-  box-shadow: none;
-  box-sizing: border-box;
-  border-radius: 5;
-  font-family: inherit;
-  color: #000;
-  font-weight: 400;
-  font: unset;
-  height: 24px;
-}
-
-.filter-input-clear {
-  padding-left: 8px;
-}
-
-.filter-input-icon {
-  width: 24px;
-  height: 24px;
-}
-</style>

package/dev/components/JsonPretty/components/Brackets/index.vue

@@ -1,23 +0,0 @@
-<template>
-  <view class="json-pretty-tree-brackets" @click="onClick">
-    {{ data }}
-  </view>
-</template>
-<script lang="ts" setup>
-defineProps<{ data: string }>();
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void;
-}>();
-
-function onClick(e: MouseEvent) {
-  emit('click', e);
-}
-</script>
-<style>
-.json-pretty-tree-brackets {
-  cursor: pointer;
-}
-.json-pretty-tree-brackets:hover {
-  color: var(--json-pretty-primary-color);
-}
-</style>

package/dev/components/JsonPretty/components/Carets/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <view
-    v-if="isOpen || isClose"
-    :class="`json-pretty-carets json-pretty-carets-${
-      isOpen ? 'open' : 'close'
-    }`"
-    @click="onClick"
-  >
-    <view class="json-pretty-caret-down"></view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-// import "./styles.less";
-const props = defineProps<{ nodeType: string }>();
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void;
-}>();
-
-const isOpen = computed(() => {
-  return props.nodeType === 'objectStart' || props.nodeType === 'arrayStart';
-});
-
-const isClose = computed(() => {
-  return (
-    props.nodeType === 'objectCollapsed' || props.nodeType === 'arrayCollapsed'
-  );
-});
-
-function onClick(e: MouseEvent) {
-  emit('click', e);
-}
-</script>
-<style>
-.json-pretty-carets {
-  position: absolute;
-  right: 0;
-  cursor: pointer;
-}
-.json-pretty-carets svg {
-  transition: transform 0.3s;
-}
-
-.json-pretty-carets::hover {
-  color: var(--json-pretty-primary-color);
-}
-
-.json-pretty-carets-close {
-  transform: rotate(-90deg);
-}
-
-.json-pretty-caret-down {
-  margin: 7px 4px;
-  border: 3px solid #000;
-  border-top-color: transparent;
-  border-left-color: transparent;
-  transform: rotate(45deg);
-}
-</style>

package/dev/components/JsonPretty/components/CheckController/index.vue

@@ -1,125 +0,0 @@
-<template>
-  <view
-    :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
-    @click="onClick"
-  >
-    <!-- <view
-      :class="`json-pretty-check-controller-inner is-${uiType}`"
-      @click="onChange"
-    >
-    </view>
-    <input
-      :checked="model"
-      :class="`json-pretty-check-controller-original is-${uiType}`"
-      :type="uiType"
-      @change="onChange"
-    /> -->
-
-    <checkbox
-      v-if="uiType === 'checkbox'"
-      :checked="model"
-      style="transform: scale(0.6)"
-      @change="onChange"
-    />
-    <radio
-      v-if="uiType === 'radio'"
-      :checked="model"
-      style="transform: scale(0.6)"
-      @change="onChange"
-    />
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-const props = defineProps<{ checked: boolean; isMultiple: boolean }>();
-const emit = defineEmits<{
-  (e: 'change', value: boolean): void;
-  (e: 'update:modelValue', value: boolean): void;
-}>();
-
-const uiType = computed(() => (props.isMultiple ? 'checkbox' : 'radio'));
-const model = computed({
-  get: (): boolean => props.checked,
-  set: (val) => emit('update:modelValue', val),
-});
-
-function onChange() {
-  emit('change', !model.value);
-}
-
-function onClick(e: MouseEvent) {
-  e.stopPropagation();
-}
-</script>
-
-<style>
-.json-pretty-check-controller {
-  position: absolute;
-  left: 0;
-}
-.json-pretty-check-controller.is-checked .json-pretty-check-controller-inner {
-  background-color: var(--json-pretty-color-primary);
-  border-color: var(--json-pretty-color-primary);
-}
-.json-pretty-check-controller.is-checked
-  .json-pretty-check-controller-inner.is-checkbox:after {
-  transform: rotate(45deg) scaleY(1);
-}
-.json-pretty-check-controller.is-checked
-  .json-pretty-check-controller-inner.is-radio:after {
-  transform: translate(-50%, -50%) scale(1);
-}
-.json-pretty-check-controller .json-pretty-check-controller-inner {
-  display: inline-block;
-  position: relative;
-  border: 1px solid var(--json-pretty-border-color);
-  border-radius: 2px;
-  vertical-align: middle;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  z-index: 1;
-  cursor: pointer;
-  transition:
-    border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
-}
-.json-pretty-check-controller .json-pretty-check-controller-inner:after {
-  box-sizing: content-box;
-  content: '';
-  border: 2px solid #fff;
-  border-left: 0;
-  border-top: 0;
-  height: 8px;
-  left: 4px;
-  position: absolute;
-  top: 1px;
-  transform: rotate(45deg) scaleY(0);
-  width: 4px;
-  transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s;
-  transform-origin: center;
-}
-.json-pretty-check-controller .json-pretty-check-controller-inner.is-radio {
-  border-radius: 100%;
-}
-.json-pretty-check-controller
-  .json-pretty-check-controller-inner.is-radio:after {
-  border-radius: 100%;
-  height: 4px;
-  background-color: #fff;
-  left: 50%;
-  top: 50%;
-}
-.json-pretty-check-controller .json-pretty-check-controller-original {
-  opacity: 0;
-  outline: none;
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-}
-</style>

package/dev/components/JsonPretty/components/TreeNode/index.vue

@@ -1,349 +0,0 @@
-<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="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-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>