@varlet/cli 2.2.1 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -40,8 +40,6 @@
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
     "@types/inquirer": "^9.0.2",
-    "@varlet/markdown-vite-plugin": "2.2.1",
-    "@varlet/shared": "2.2.1",
     "@vitejs/plugin-vue": "3.0.1",
     "@vitejs/plugin-vue-jsx": "2.0.0",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -69,7 +67,9 @@
     "vite": "3.0.4",
     "vite-plugin-html": "^2.1.0",
     "vue": "3.2.25",
-    "vue-jest": "^5.0.0-alpha.8"
+    "vue-jest": "^5.0.0-alpha.8",
+    "@varlet/markdown-vite-plugin": "2.3.1",
+    "@varlet/shared": "2.3.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -80,19 +80,19 @@
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.7.20",
     "@types/semver": "^7.3.9",
-    "@varlet/icons": "2.2.1",
-    "@varlet/touch-emulator": "2.2.1"
+    "@varlet/touch-emulator": "2.3.1",
+    "@varlet/icons": "2.3.1"
   },
   "peerDependencies": {
-    "@varlet/icons": "2.2.1",
-    "@varlet/touch-emulator": "2.2.1",
     "@vue/runtime-core": "3.2.16",
     "@vue/test-utils": "^2.0.2",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
     "vue": "3.2.25",
-    "vue-router": "4.0.12"
+    "vue-router": "4.0.12",
+    "@varlet/touch-emulator": "2.3.1",
+    "@varlet/icons": "2.3.1"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/pc/components/AnimationBox.vue

@@ -6,16 +6,45 @@ export default defineComponent({
   name: 'AnimationBox',
   setup() {
     const varletLogoAnimationRef = ref<HTMLElement>()
+    const domObserve = new MutationObserver(_onDomChanged)
     animationBoxData.attrs = useAttrs()
 
     onMounted(() => {
       animationEl.value = varletLogoAnimationRef.value
-      animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
+      varletLogoAnimationRef.value && domObserve.observe(varletLogoAnimationRef.value, { childList: true })
+
 
       isMountedCount.value <= 2 && (isMountedCount.value += 1)
     })
 
+    function _onDomChanged(mutations: MutationRecord[]) {
+      if (!mutations.length || !varletLogoAnimationRef.value) return;
+      const normal = animationEl.value?.getBoundingClientRect()
+      const hasFloat: boolean = _onGetNodePosition(varletLogoAnimationRef.value);
+
+      animationElClientRect.value = hasFloat ? normal : {
+        top: (animationEl.value?.getBoundingClientRect().top || 0) + window.scrollY,
+        left: (animationEl.value?.getBoundingClientRect().left || 0),
+        width: animationEl.value?.getBoundingClientRect().width || 0,
+        height: animationEl.value?.getBoundingClientRect().height || 0,
+      }
+    }
+
+    function _onGetNodePosition(node: Element, stopNode = document.body): boolean {
+      const css = window.getComputedStyle(node, null);
+      if (css.position === 'fixed') {
+        return true
+      }
+      if (node === stopNode) {
+        return false
+      }
+
+      return _onGetNodePosition(node.parentElement || document.body)
+    }
+
     onUnmounted(() => {
+      domObserve.disconnect()
+      varletLogoAnimationRef.value = undefined
       animationEl.value = undefined
       animationElClientRect.value = undefined
     })
@@ -28,6 +57,6 @@ export default defineComponent({
 </script>
 
 <template>
-  <div ref="varletLogoAnimationRef" data-animation="port"></div>
+  <div ref="varletLogoAnimationRef"></div>
 </template>
 

package/site/pc/components/LogoAnimation.vue

@@ -3,13 +3,15 @@ import config from '@config'
 import { get } from 'lodash-es'
 import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
 import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
+
 import type { Ref, StyleValue } from 'vue'
+import type { Rect } from '../floating'
 
 export default defineComponent({
   name: 'LogoAnimation',
   setup() {
     const logo: Ref<string> = get(config, 'logo')
-    const proxyRect: Ref<DOMRect | undefined> = ref<DOMRect>()
+    const proxyRect: Ref<Rect | undefined> = ref<Rect>()
     const floatingState: Ref<boolean> = ref<boolean>(false)
 
     watch(animationElClientRect, async (newClientRect) => {

package/site/pc/floating.ts

@@ -1,9 +1,11 @@
 import { reactive, ref } from 'vue'
 
+export type Rect = Pick<DOMRect, 'width' | 'height' | 'top' | 'left'>
+
 export const animationBoxData = reactive<any>({})
 
 export const animationEl = ref<HTMLElement | null>()
 
-export const animationElClientRect = ref<DOMRect | null>()
+export const animationElClientRect = ref<Rect | null>()
 
 export const isMountedCount = ref<number>(0)