vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{AppTransition → components/AppTransition}/index.vue

@@ -1,170 +1,176 @@
-<template>
-  <view
-    v-if="renderShow"
-    :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-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>