vite-uni-dev-tool 0.0.13 → 0.0.15

package/dist/v2/DeviceInfo/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="device-info-content">
+    <JsonPretty :data="deviceInfo" v-if="showJson" />
+    <Empty v-else />
+  </view>
+</template>
+
+<script>
+import Empty from '../Empty/index.vue';
+import JsonPretty from '../JsonPretty/index.vue';
+
+export default {
+  components: {
+    Empty,
+    JsonPretty,
+  },
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    showJson() {
+      try {
+        const str = JSON.stringify(this.deviceInfo);
+        // 判断是否为有效对象且非空
+        if (
+          typeof this.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/dist/v2/Empty/index.vue

@@ -0,0 +1,40 @@
+<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>
+import empty from './empty.png';
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '暂无调试信息',
+    },
+  },
+  data() {
+    return {
+      empty,
+    };
+  },
+};
+</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/dist/v2/FilterInput/index.vue

@@ -0,0 +1,100 @@
+<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>
+import { debounce } from '../../utils';
+
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '请输入',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+
+  methods: {
+    onInput(e) {
+      const value = e.detail.value;
+      this.$emit('update:modelValue', value);
+      this.$emit('search', value);
+    },
+
+    onClear() {
+      this.$emit('update:modelValue', '');
+      this.$emit('search', '');
+    },
+
+    openSearch(open) {
+      this.isActive = open;
+      this.$emit('openSearch', open);
+      if (!open && this.modelValue) {
+        this.$emit('update:modelValue', '');
+        this.$emit('search', '');
+      }
+    },
+  },
+
+  created() {
+    this.debounceInput = debounce(this.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 var(--dev-tool-border-color);
+
+  background-color: var(--dev-tool-bg-color);
+  transition: background-color 0.3s;
+  box-sizing: border-box;
+}
+
+.filter-input {
+  flex: 1;
+  box-shadow: none;
+  box-sizing: border-box;
+  border-radius: 5;
+  font-family: inherit;
+  color: var(--dev-tool-text-color);
+  font-weight: 400;
+  font: unset;
+  height: 24px;
+  transition: color 0.3s;
+}
+
+.filter-input-clear {
+  padding-left: 8px;
+}
+
+.filter-input-icon {
+  width: 24px;
+  height: 24px;
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <view class="json-pretty-tree-brackets" @click="onClick">
+    {{ data }}
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
+
+<style>
+.json-pretty-tree-brackets {
+  cursor: pointer;
+}
+.json-pretty-tree-brackets:hover {
+  color: var(--json-pretty-primary-color);
+}
+</style>

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

@@ -0,0 +1,65 @@
+<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>
+export default {
+  props: {
+    nodeType: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.nodeType === 'objectStart' || this.nodeType === 'arrayStart';
+    },
+    isClose() {
+      return (
+        this.nodeType === 'objectCollapsed' ||
+        this.nodeType === 'arrayCollapsed'
+      );
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$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/dist/v2/JsonPretty/components/CheckController/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <view
+    :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
+    @click="onClick"
+  >
+    <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>
+export default {
+  props: {
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    isMultiple: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    uiType() {
+      return this.isMultiple ? 'checkbox' : 'radio';
+    },
+    model: {
+      get() {
+        return this.checked;
+      },
+      set(val) {
+        this.$emit('update:modelValue', val);
+      },
+    },
+  },
+  methods: {
+    onChange() {
+      this.$emit('change', !this.model);
+    },
+    onClick(e) {
+      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>