Skip to content

Commit 1b233cd

Browse files
BobbieGoedeBobbieGoede
committed
docs: tweaks
1 parent 7663732 commit 1b233cd

File tree

13 files changed

+223
-99
lines changed

13 files changed

+223
-99
lines changed

‎docs/components/content/PresetSection.vue

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { ref } from 'vue'
33
import type { PropType } from 'vue'
44
import { useMotion } from '@vueuse/motion'
5+
import defu from 'defu'
56
import { slugify } from '../../../src/utils/slugify'
67
import Face from './Face.vue'
78
@@ -18,9 +19,38 @@ const isReplaying = ref(false)
1819
const replayButton = ref<SVGElement>()
1920
const demoElement = ref<HTMLElement>()
2021
22+
const tweaks: Record<'delay' | 'duration', number> = {
23+
duration: 600,
24+
delay: 0,
25+
}
26+
27+
const configWithDuration = computed(() => {
28+
const config = defu({}, structuredClone(props.preset || {}))
29+
30+
for (const transitionKey of ['delay', 'duration'] as const) {
31+
if (!tweaks[transitionKey])
32+
continue
33+
34+
const transitionValueParsed = tweaks[transitionKey]
35+
36+
// TODO: extract to utility function
37+
// Apply transition property to existing variants where applicable
38+
for (const variantKey of ['enter', 'visible', 'visibleOnce'] as const) {
39+
const variantConfig = config[variantKey]
40+
41+
if (variantConfig == null)
42+
continue
43+
44+
variantConfig.transition ??= {}
45+
variantConfig.transition[transitionKey] = transitionValueParsed
46+
}
47+
}
48+
49+
return config
50+
})
51+
2152
const { apply, set } = useMotion(demoElement, {
22-
...props.preset,
23-
duration: 2000,
53+
...configWithDuration.value,
2454
})
2555
2656
const replayInstance = useMotion(replayButton, {
@@ -41,11 +71,14 @@ async function replay() {
4171
4272
await set(props.preset.initial)
4373
44-
if (props.preset.visible) await apply(props.preset.visible)
74+
if (props.preset.visible)
75+
await apply(props.preset.visible)
4576
46-
if (props.preset.visibleOnce) await apply(props.preset.visibleOnce)
77+
if (props.preset.visibleOnce)
78+
await apply(props.preset.visibleOnce)
4779
48-
if (props.preset.enter) await apply(props.preset.enter)
80+
if (props.preset.enter)
81+
await apply(props.preset.enter)
4982
5083
isReplaying.value = false
5184
}
@@ -55,16 +88,16 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
5588
[
5689
`::code-group`,
5790
...[
58-
'```vue [v-motion]',
91+
'```vue [<Motion />]',
5992
'<template>',
60-
` <div v-motion-${slugify(props.name)} />`,
93+
` <Motion preset="${props.name}" :duration="600" />`,
6194
'</template>',
6295
'```',
6396
],
6497
...[
65-
'```vue [<Motion />]',
98+
'```vue [v-motion]',
6699
'<template>',
67-
` <Motion preset="${props.name}" />`,
100+
` <div v-motion-${slugify(props.name)} :duration="600" />`,
68101
'</template>',
69102
'```',
70103
],
@@ -75,8 +108,7 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
75108
],
76109
`::`,
77110
].join('\n'),
78-
),
79-
)
111+
))
80112
</script>
81113

82114
<template>

‎docs/components/content/ProseA.vue

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
1-
<template>
2-
<Motion
3-
:initial="{ y: '0em', opacity: 1, scaleY: 1.15, scaleX: 0.95, transition: {damping:5,mass:1 } }"
4-
:visible-once="{ y: '0em', opacity: 1,rotate: 0, scaleY: 1, scaleX: 1, transition: {damping:5,mass:1 } }"
5-
:hovered="{scaleY: 1.05, scaleX: 1.05, rotate: -0.25, transition: {damping:5,mass:1 }}"
6-
:tapped="{scaleY: 0.95, scaleX:0.95, rotate: 0.25, transition: {damping:5,mass:1 }}"
7-
is="span"
8-
style="display: inline-block"
9-
>
10-
<NuxtLink :href="href" :target="target">
11-
<slot />
12-
</NuxtLink>
13-
</Motion>
14-
</template>
15-
161
<script setup lang="ts">
172
import type { PropType } from 'vue'
183
@@ -36,3 +21,18 @@ defineProps({
3621
},
3722
})
3823
</script>
24+
25+
<template>
26+
<Motion
27+
is="span"
28+
:initial="{ y: '0em', opacity: 1, scaleY: 1.15, scaleX: 0.95, transition: { damping: 5, mass: 1 } }"
29+
:visible-once="{ y: '0em', opacity: 1, rotate: 0, scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 1 } }"
30+
:hovered="{ scaleY: 1.05, scaleX: 1.05, rotate: -0.25, transition: { damping: 5, mass: 1 } }"
31+
:tapped="{ scaleY: 0.95, scaleX: 0.95, rotate: 0.25, transition: { damping: 5, mass: 1 } }"
32+
style="display: inline-block"
33+
>
34+
<NuxtLink :href="href" :target="target">
35+
<slot />
36+
</NuxtLink>
37+
</Motion>
38+
</template>

‎docs/components/content/ProseCode.vue

Lines changed: 83 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,88 @@
1-
<template>
1+
<!-- <template>
22
<Motion
33
is="code"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
9+
</template> -->
10+
11+
<script setup lang="ts">
12+
import type { PropType } from 'vue'
13+
14+
defineProps({
15+
code: {
16+
type: String,
17+
required: true,
18+
},
19+
icon: {
20+
type: String,
21+
default: undefined,
22+
},
23+
language: {
24+
type: String,
25+
default: undefined,
26+
},
27+
hideHeader: {
28+
type: Boolean,
29+
default: false,
30+
},
31+
filename: {
32+
type: String,
33+
default: undefined,
34+
},
35+
highlights: {
36+
type: Array as PropType<number[]>,
37+
default: undefined,
38+
},
39+
meta: {
40+
type: String,
41+
default: undefined,
42+
},
43+
})
44+
45+
const config = {
46+
wrapper: '[&>pre]:!rounded-t-none [&>pre]:!my-0 my-5',
47+
header: 'flex items-center gap-1.5 border border-gray-200 dark:border-gray-700 border-b-0 relative rounded-t-md px-4 py-3 not-prose',
48+
icon: {
49+
base: '',
50+
},
51+
button: {
52+
base: 'absolute top-2.5 right-2.5',
53+
},
54+
filename: 'text-gray-700 dark:text-gray-200 text-sm/6',
55+
}
56+
57+
const { ui } = useUI('content.prose.code', undefined, config, undefined, true)
58+
</script>
59+
60+
<template>
61+
<Motion
62+
:initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
63+
:visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
64+
class="relative prose-code" :class="!!filename && ui.wrapper"
65+
>
66+
<div v-if="filename && !hideHeader" :class="ui.header">
67+
<ProseCodeIcon :icon="icon" :filename="filename" :class="ui.icon.base" />
68+
69+
<span :class="ui.filename">{{ filename }}</span>
70+
</div>
71+
72+
<ProseCodeButton :code="code" :class="ui.button.base" />
73+
74+
<slot />
75+
</Motion>
876
</template>
77+
78+
<style scoped>
79+
.prose-code pre {
80+
margin-top: 0;
81+
margin-bottom: 0;
82+
}
83+
pre code .line {
84+
display: block;
85+
min-height: 1rem;
86+
87+
}
88+
</style>

‎docs/components/content/ProseH1.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
is="h1"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .85, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .85, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
89
</template>

‎docs/components/content/ProseH2.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
is="h2"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .75, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .75, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
89
</template>

‎docs/components/content/ProseH3.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
is="h3"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
89
</template>

‎docs/components/content/ProseH4.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
is="h4"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
89
</template>

‎docs/components/content/ProseH5.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
is="h5"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
89
</template>

‎docs/components/content/ProseP.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
is="p"
44
:initial="{ y: 100, opacity: 0, transition: { mass: .5, damping: 10 } }"
55
:visible-once="{ y: 0, opacity: 1, transition: { mass: .5, damping: 10 } }"
6-
><slot
7-
/></Motion>
6+
>
7+
<slot />
8+
</Motion>
89
</template>

‎docs/components/content/ProsePre.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<template>
2-
<Motion
3-
is="pre"
4-
:initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
5-
:visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
6-
:class="$props.class"
7-
><slot
8-
/></Motion>
9-
</template>
10-
111
<script setup lang="ts">
122
defineProps({
133
code: {
@@ -37,6 +27,18 @@ defineProps({
3727
})
3828
</script>
3929

30+
<template>
31+
<Motion
32+
is="pre"
33+
v-bind="{ ...$attrs, ...$props }"
34+
:initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
35+
:visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
36+
:class="$props.class"
37+
>
38+
<slot />
39+
</Motion>
40+
</template>
41+
4042
<style>
4143
pre code .line {
4244
display: block;

0 commit comments

Comments
 (0)