vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/VuexList/index.vue

@@ -1,84 +1,84 @@
-<template>
-  <view class="vuex-content">
-    <view class="vuex-control">
-      <DevToolTitle>{{ t('vuex.title') }}</DevToolTitle>
-    </view>
-    <view class="vuex-json-wrapper">
-      <JsonPretty
-        editable
-        showLength
-        virtual
-        v-if="showJson"
-        :data="vuexList"
-        :theme="theme"
-        :height="contentHeight - 32 - 32"
-        :nodeSelectable="() => false"
-        :pathCollapsible="() => false"
-        @update:data="onUpdateData"
-        @nodeClick="onNodeClick"
-      />
-      <Empty v-else />
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-import JsonPretty from '../../../components/JsonPretty/index.vue';
-import Empty from '../../../components/Empty/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../../../i18n';
-
-const { t } = useI18n();
-const props = defineProps<{
-  vuexList: Record<string, any>;
-  theme?: string;
-  contentHeight: number;
-}>();
-const emit = defineEmits<{
-  (e: 'update:vuexList', data: Record<string, any>): void;
-  (e: 'change', value: any): void;
-}>();
-const showJson = computed(() => {
-  try {
-    const str = JSON.stringify(props.vuexList);
-    if (typeof props.vuexList === 'object' && (str === '' || str === '{}')) {
-      return false;
-    }
-    return true;
-  } catch (_error) {
-    return false;
-  }
-});
-
-let currentSelect: any;
-function onUpdateData(data: Record<string, any>) {
-  const firstKey = currentSelect?.path?.split('.')?.slice(1)?.[0];
-  emit('change', {
-    [firstKey]: data[firstKey],
-  });
-}
-function onNodeClick(node: any) {
-  currentSelect = node;
-}
-</script>
-<style scoped>
-.vuex-content {
-  font-size: var(--dev-tool-base-font-size);
-  height: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.vuex-control {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.vuex-json-wrapper {
-  padding: 0 16px;
-}
-</style>
+<template>
+  <view class="vuex-content">
+    <view class="vuex-control">
+      <DevToolTitle>{{ t('vuex.title') }}</DevToolTitle>
+    </view>
+    <view class="vuex-json-wrapper">
+      <JsonPretty
+        editable
+        showLength
+        virtual
+        v-if="showJson"
+        :data="vuexList"
+        :theme="theme"
+        :height="contentHeight - 32 - 32"
+        :nodeSelectable="() => false"
+        :pathCollapsible="() => false"
+        @update:data="onUpdateData"
+        @nodeClick="onNodeClick"
+      />
+      <Empty v-else />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+const props = defineProps<{
+  vuexList: Record<string, any>;
+  theme?: string;
+  contentHeight: number;
+}>();
+const emit = defineEmits<{
+  (e: 'update:vuexList', data: Record<string, any>): void;
+  (e: 'change', value: any): void;
+}>();
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.vuexList);
+    if (typeof props.vuexList === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (_error) {
+    return false;
+  }
+});
+
+let currentSelect: any;
+function onUpdateData(data: Record<string, any>) {
+  const firstKey = currentSelect?.path?.split('.')?.slice(1)?.[0];
+  emit('change', {
+    [firstKey]: data[firstKey],
+  });
+}
+function onNodeClick(node: any) {
+  currentSelect = node;
+}
+</script>
+<style scoped>
+.vuex-content {
+  font-size: var(--dev-tool-base-font-size);
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vuex-control {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.vuex-json-wrapper {
+  padding: 0 16px;
+}
+</style>

package/dist/v3/DevTool/index.vue

@@ -319,6 +319,7 @@ function handleCoreMessage(msg: any) {
       performanceVisible.value = data;
       break;
     case MSG_TYPE.DATA_UPDATE:
+    case MSG_TYPE.OPTION_UPDATE:
       onDevOptionSend(data);
       break;
     case MSG_TYPE.BARRAGE_VISIBLE:

package/dist/v3/components/AppTransition/index.vue

@@ -1,176 +1,176 @@
-<template>
-  <view
-    v-if="renderShow"
-    class="transition-root"
-    :class="[showContainer ? 'transition-fixed' : '']"
-    :style="[showContainer ? { zIndex } : {}]">
-    <view
-      class="transition-container"
-      :class="customClass"
-      :style="[mergedStyle, transitionStyle, customStyle]">
-      <view
-        class="transition-content"
-        :class="{ 'pointer-events-auto': isActive && !isLeaving }">
-        <slot></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue';
-
-const props = withDefaults(
-  defineProps<{
-    show?: boolean;
-    name?:
-      | 'fade'
-      | 'slide-top'
-      | 'slide-bottom'
-      | 'slide-left'
-      | 'slide-right'
-      | 'zoom'
-      | 'reveal';
-    duration?: number;
-    customStyle?: Record<string, any> | string;
-    customClass?: string;
-    zIndex?: number;
-    showContainer?: boolean;
-    origin?: { x: number; y: number };
-    animated?: boolean;
-  }>(),
-  {
-    name: 'fade',
-    duration: 300,
-    showContainer: true,
-    animated: true,
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'after-enter'): void;
-  (e: 'after-leave'): void;
-}>();
-
-const renderShow = ref(props.show);
-const isActive = ref(false);
-const isLeaving = ref(false);
-
-const mergedStyle = computed(() => {
-  return {
-    '--transition-duration': props.animated ? `${props.duration}ms` : '0ms',
-    '--transition-timing': 'cubic-bezier(0.4, 0, 0.2, 1)',
-  };
-});
-
-const transitionStyle = computed(() => {
-  const styles: Record<string, string> = {
-    transition: props.animated
-      ? 'transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), clip-path var(--transition-duration) var(--transition-timing)'
-      : 'none',
-  };
-
-  const active = isActive.value && !isLeaving.value;
-  const x = props.origin?.x || 0;
-  const y = props.origin?.y || 0;
-
-  if (props.origin) {
-    styles.transformOrigin = `${x}px ${y}px`;
-  }
-
-  if (props.name === 'fade') {
-    styles.opacity = active ? '1' : '0';
-  } else if (props.name === 'slide-bottom') {
-    styles.transform = active ? 'translateY(0)' : 'translateY(100%)';
-  } else if (props.name === 'slide-top') {
-    styles.transform = active ? 'translateY(0)' : 'translateY(-100%)';
-  } else if (props.name === 'slide-left') {
-    styles.transform = active ? 'translateX(0)' : 'translateX(-100%)';
-  } else if (props.name === 'slide-right') {
-    styles.transform = active ? 'translateX(0)' : 'translateX(100%)';
-  } else if (props.name === 'zoom') {
-    styles.transform = active ? 'scale(1)' : 'scale(0)';
-    styles.opacity = active ? '1' : '0';
-  } else if (props.name === 'reveal') {
-    styles.clipPath = active
-      ? `circle(150% at ${x}px ${y}px)`
-      : `circle(0% at ${x}px ${y}px)`;
-  }
-
-  return styles;
-});
-
-watch(
-  () => props.show,
-  (val, oldVal) => {
-    if (val) {
-      renderShow.value = true;
-      isLeaving.value = false;
-
-      if (!props.animated) {
-        isActive.value = true;
-        emit('after-enter');
-        return;
-      }
-
-      // 必须分两步：1. 插入DOM 2. 触发Transition
-      nextTick(() => {
-        setTimeout(() => {
-          isActive.value = true;
-          const duration = props.animated ? props.duration : 0;
-          setTimeout(() => {
-            emit('after-enter');
-          }, duration);
-        }, 30);
-      });
-    } else if (oldVal !== undefined) {
-      isLeaving.value = true;
-      isActive.value = false;
-
-      const duration = props.animated ? props.duration : 0;
-
-      setTimeout(() => {
-        renderShow.value = false;
-        isLeaving.value = false;
-        emit('after-leave');
-      }, duration);
-    }
-  },
-  { immediate: true },
-);
-</script>
-
-<style scoped>
-.transition-root {
-  width: 100%;
-  height: 100%;
-}
-
-.transition-container {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  will-change: transform, opacity;
-  pointer-events: none;
-}
-
-.transition-content {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.pointer-events-auto {
-  pointer-events: auto;
-}
-
-.transition-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-</style>
+<template>
+  <view
+    v-if="renderShow"
+    class="transition-root"
+    :class="[showContainer ? 'transition-fixed' : '']"
+    :style="[showContainer ? { zIndex } : {}]">
+    <view
+      class="transition-container"
+      :class="customClass"
+      :style="[mergedStyle, transitionStyle, customStyle]">
+      <view
+        class="transition-content"
+        :class="{ 'pointer-events-auto': isActive && !isLeaving }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, nextTick } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    show?: boolean;
+    name?:
+      | 'fade'
+      | 'slide-top'
+      | 'slide-bottom'
+      | 'slide-left'
+      | 'slide-right'
+      | 'zoom'
+      | 'reveal';
+    duration?: number;
+    customStyle?: Record<string, any> | string;
+    customClass?: string;
+    zIndex?: number;
+    showContainer?: boolean;
+    origin?: { x: number; y: number };
+    animated?: boolean;
+  }>(),
+  {
+    name: 'fade',
+    duration: 300,
+    showContainer: true,
+    animated: true,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'after-enter'): void;
+  (e: 'after-leave'): void;
+}>();
+
+const renderShow = ref(props.show);
+const isActive = ref(false);
+const isLeaving = ref(false);
+
+const mergedStyle = computed(() => {
+  return {
+    '--transition-duration': props.animated ? `${props.duration}ms` : '0ms',
+    '--transition-timing': 'cubic-bezier(0.4, 0, 0.2, 1)',
+  };
+});
+
+const transitionStyle = computed(() => {
+  const styles: Record<string, string> = {
+    transition: props.animated
+      ? 'transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), clip-path var(--transition-duration) var(--transition-timing)'
+      : 'none',
+  };
+
+  const active = isActive.value && !isLeaving.value;
+  const x = props.origin?.x || 0;
+  const y = props.origin?.y || 0;
+
+  if (props.origin) {
+    styles.transformOrigin = `${x}px ${y}px`;
+  }
+
+  if (props.name === 'fade') {
+    styles.opacity = active ? '1' : '0';
+  } else if (props.name === 'slide-bottom') {
+    styles.transform = active ? 'translateY(0)' : 'translateY(100%)';
+  } else if (props.name === 'slide-top') {
+    styles.transform = active ? 'translateY(0)' : 'translateY(-100%)';
+  } else if (props.name === 'slide-left') {
+    styles.transform = active ? 'translateX(0)' : 'translateX(-100%)';
+  } else if (props.name === 'slide-right') {
+    styles.transform = active ? 'translateX(0)' : 'translateX(100%)';
+  } else if (props.name === 'zoom') {
+    styles.transform = active ? 'scale(1)' : 'scale(0)';
+    styles.opacity = active ? '1' : '0';
+  } else if (props.name === 'reveal') {
+    styles.clipPath = active
+      ? `circle(150% at ${x}px ${y}px)`
+      : `circle(0% at ${x}px ${y}px)`;
+  }
+
+  return styles;
+});
+
+watch(
+  () => props.show,
+  (val, oldVal) => {
+    if (val) {
+      renderShow.value = true;
+      isLeaving.value = false;
+
+      if (!props.animated) {
+        isActive.value = true;
+        emit('after-enter');
+        return;
+      }
+
+      // 必须分两步：1. 插入DOM 2. 触发Transition
+      nextTick(() => {
+        setTimeout(() => {
+          isActive.value = true;
+          const duration = props.animated ? props.duration : 0;
+          setTimeout(() => {
+            emit('after-enter');
+          }, duration);
+        }, 30);
+      });
+    } else if (oldVal !== undefined) {
+      isLeaving.value = true;
+      isActive.value = false;
+
+      const duration = props.animated ? props.duration : 0;
+
+      setTimeout(() => {
+        renderShow.value = false;
+        isLeaving.value = false;
+        emit('after-leave');
+      }, duration);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.transition-root {
+  width: 100%;
+  height: 100%;
+}
+
+.transition-container {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.transition-content {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.transition-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+</style>