docs: fix component preview tab style & use stack for mixed language …

…code blocks Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
motiondivision · Feb 20, 2025 · a4f0159 · a4f0159
1 parent 0164d0d
commit a4f0159
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 48 deletions.
diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue
@@ -64,10 +64,7 @@ const viewType = ref(tabs[0])
       </div>
     </template>
 
-    <div
-      v-else
-      class="border-t"
-    >
+    <div v-else>
       <div class="flex border-b">
         <button
           v-for="(file, index) in props.files"
@@ -89,7 +86,7 @@ const viewType = ref(tabs[0])
         </button>
       </div>
       <div
-        class="[&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none [&>div]:!mb-0"
+        class="[&>div]:rounded-t-none [&>div]:border-none [&>div]:shadow-none [&>div]:!mb-0"
       >
         <slot
           :name="`slot-${activeTab}`"

diff --git a/docs/components/content/Stackblitz.vue b/docs/components/content/Stackblitz.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { src, title } = defineProps<{
+  src: string
+  title: string
+}>()
+</script>
+
+<template>
+  <iframe
+    :src="src"
+    :title="title"
+    style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden; margin-top: 20px;"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
+  />
+</template>
diff --git a/docs/content/3.animation/layout.md b/docs/content/3.animation/layout.md
@@ -14,12 +14,12 @@ like [Motion React](https://motion.dev/docs/react-layout-animations), you can us
 
 <ComponentPreview name="shared-layout" />
 
-<iframe src="https://stackblitz.com/edit/vitejs-vite-e19yd3ez?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="motion-use-spring"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
-   ></iframe>
+::stackblitz
+---
+src: https://stackblitz.com/edit/vitejs-vite-e19yd3ez?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1
+title: motion-use-spring
+---
+::
 
 ## Resources
 

diff --git a/docs/content/4.motion-value/3.use-scroll.md b/docs/content/4.motion-value/3.use-scroll.md
@@ -6,11 +6,15 @@ navigation.icon: 'lucide:scroll'
 
 `useScroll` is used to create scroll-linked animations, like progress indicators and parallax effects.
 
-```vue
-const { scrollYProgress } = useScroll()
+::stack
+  ```ts
+  const { scrollYProgress } = useScroll()
+  ```
 
-<Motion :style="{ scaleX: scrollYProgress }" />
-```
+  ```vue
+  <Motion :style="{ scaleX: scrollYProgress }" />
+  ```
+::
 
 ## Usage
 
@@ -36,12 +40,12 @@ useMotionValueEvent(scrollY, 'change', (latest) => {
 
 For example, we could show a page scroll indicator by passing `scrollYProgress` straight to the `scaleX` style of a progress bar.
 
-<iframe src="https://stackblitz.com/edit/vitejs-vite-eseump?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="motion-use-spring"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
-   ></iframe>
+::stackblitz
+---
+src: https://stackblitz.com/edit/vitejs-vite-eseump?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1
+title: motion-use-spring
+---
+::
 
 As `useScroll` returns motion values, we can compose this scroll info with other motion value hooks like `useTransform` and `useSpring`:
 

diff --git a/docs/content/4.motion-value/5.use-time.md b/docs/content/4.motion-value/5.use-time.md
@@ -8,19 +8,23 @@ navigation.icon: 'lucide:clock'
 
 This is especially useful in generating perpetual animations.
 
-```vue
-const time = useTime()
-const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
-
-<Motion :style="{ rotate }" />
-```
-
-<iframe src="https://stackblitz.com/edit/vitejs-vite-ff3czw?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="motion-use-spring"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
-   ></iframe>
+::stack
+  ```ts
+  const time = useTime()
+  const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
+  ```
+
+  ```vue
+  <Motion :style="{ rotate }" />
+  ```
+::
+
+::stackblitz
+---
+src: https://stackblitz.com/edit/vitejs-vite-ff3czw?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1
+title: motion-use-spring
+---
+::
 
 ## Usage
 

diff --git a/docs/content/4.motion-value/6.use-transform.md b/docs/content/4.motion-value/6.use-transform.md
@@ -30,12 +30,12 @@ useTransform(x, [0, 100], ['#f00', '00f'])
 
 <ComponentPreview name="html-content" />
 
-<iframe src="https://stackblitz.com/edit/vitejs-vite-ff3czw?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="motion-use-spring"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
-   ></iframe>
+::stackblitz
+---
+src: https://stackblitz.com/edit/vitejs-vite-ff3czw?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1
+title: motion-use-spring
+---
+::
 
 ## Resources
 

diff --git a/docs/content/5.hooks/2.use-inview.md b/docs/content/5.hooks/2.use-inview.md
@@ -69,9 +69,9 @@ const isInView = useInView(scope, {
 })
 ```
 
-<iframe src="https://stackblitz.com/edit/qvapj3?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="motion-use-spring"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
-   ></iframe>
+::stackblitz
+---
+src: https://stackblitz.com/edit/qvapj3?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1
+title: motion-use-spring
+---
+::
diff --git a/packages/motion/src/components/__tests__/animate-prop.test.tsx b/packages/motion/src/components/__tests__/animate-prop.test.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { Motion } from '@/components'
 import { motionValue } from 'framer-motion/dom'
-import { computed, h, nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 function createRerender(Component: any) {
   let wrapper: any = null

diff --git a/playground/nuxt/pages/scroll-progress/index.vue b/playground/nuxt/pages/scroll-progress/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 // import { Circle } from 'rc-progress'
 import NumberFlow from '@number-flow/vue'