Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix component preview tab style #74

Merged
merged 1 commit into from
Feb 21, 2025
+69 −48
Merged

docs: fix component preview tab style #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions docs/components/content/ComponentPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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}`"
Expand Down
16 changes: 16 additions & 0 deletions docs/components/content/Stackblitz.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 6 additions & 6 deletions docs/content/3.animation/layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
24 changes: 14 additions & 10 deletions docs/content/4.motion-value/3.use-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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`:

Expand Down
30 changes: 17 additions & 13 deletions docs/content/4.motion-value/5.use-time.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 6 additions & 6 deletions docs/content/4.motion-value/6.use-transform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 6 additions & 6 deletions docs/content/5.hooks/2.use-inview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
---
::
2 changes: 1 addition & 1 deletion packages/motion/src/components/__tests__/animate-prop.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Comment on lines 7 to 8
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function createRerender uses the type any for its parameter Component, which can lead to type safety issues. It's recommended to define a more specific type or interface for the component parameter to leverage TypeScript's type checking. Similarly, the variable wrapper is also typed as any, which could be more precisely typed to improve code safety and clarity.

Recommended Change:

function createRerender(Component: VueComponent) {
  let wrapper: VueWrapper | null = null
}

This change ensures that only Vue components can be passed to createRerender, and wrapper is explicitly typed as either VueWrapper or null.

Expand Down
2 changes: 1 addition & 1 deletion playground/nuxt/pages/scroll-progress/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Loading