Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 0895916

Browse files
codebender828codebender828
committed
feat: add transitions for router
1 parent da7916a commit 0895916

File tree

13 files changed

+158
-108
lines changed

13 files changed

+158
-108
lines changed

‎packages/c-alert/examples/with-accent.vue

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<template>
2-
<c-alert status="success" mb="3">
3-
<c-alert-title> Solid alert </c-alert-title>
4-
<c-alert-description> Something just happened </c-alert-description>
5-
</c-alert>
6-
<c-alert variant="subtle" status="success" mb="3">
7-
<c-alert-title> Subtle alert </c-alert-title>
8-
<c-alert-description> Something just happened </c-alert-description>
9-
</c-alert>
10-
<c-alert variant="left-accent" status="success" mb="3">
11-
<c-alert-title> Left accent alert </c-alert-title>
12-
<c-alert-description> Something just happened </c-alert-description>
13-
</c-alert>
14-
<c-alert variant="top-accent" status="success" mb="3">
15-
<c-alert-title> Top accent alert </c-alert-title>
16-
<c-alert-description> Something just happened </c-alert-description>
17-
</c-alert>
2+
<div>
3+
<c-alert status="success" mb="3">
4+
<c-alert-title> Solid alert </c-alert-title>
5+
<c-alert-description> Something just happened </c-alert-description>
6+
</c-alert>
7+
<c-alert variant="subtle" status="success" mb="3">
8+
<c-alert-title> Subtle alert </c-alert-title>
9+
<c-alert-description> Something just happened </c-alert-description>
10+
</c-alert>
11+
<c-alert variant="left-accent" status="success" mb="3">
12+
<c-alert-title> Left accent alert </c-alert-title>
13+
<c-alert-description> Something just happened </c-alert-description>
14+
</c-alert>
15+
<c-alert variant="top-accent" status="success" mb="3">
16+
<c-alert-title> Top accent alert </c-alert-title>
17+
<c-alert-description> Something just happened </c-alert-description>
18+
</c-alert>
19+
</div>
1820
</template>

‎packages/c-alert/examples/with-icon.vue

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<template>
2-
<c-alert variant="left-accent" status="info" mb="3">
3-
<c-alert-icon mr="2" />
4-
<c-alert-title> Info alert </c-alert-title>
5-
<c-alert-description> Something just happened </c-alert-description>
6-
</c-alert>
7-
<c-alert variant="left-accent" status="warning" mb="3">
8-
<c-alert-icon mr="2" />
9-
<c-alert-title> Warning alert </c-alert-title>
10-
<c-alert-description> Something just happened </c-alert-description>
11-
</c-alert>
12-
<c-alert variant="left-accent" status="success" mb="3">
13-
<c-alert-icon mr="2" />
14-
<c-alert-title> Success alert </c-alert-title>
15-
<c-alert-description> Something just happened </c-alert-description>
16-
</c-alert>
17-
<c-alert variant="left-accent" status="error" mb="3">
18-
<c-alert-icon mr="2" />
19-
<c-alert-title> Error alert </c-alert-title>
20-
<c-alert-description> Something just happened </c-alert-description>
21-
</c-alert>
2+
<div>
3+
<c-alert variant="left-accent" status="info" mb="3">
4+
<c-alert-icon mr="2" />
5+
<c-alert-title> Info alert </c-alert-title>
6+
<c-alert-description> Something just happened </c-alert-description>
7+
</c-alert>
8+
<c-alert variant="left-accent" status="warning" mb="3">
9+
<c-alert-icon mr="2" />
10+
<c-alert-title> Warning alert </c-alert-title>
11+
<c-alert-description> Something just happened </c-alert-description>
12+
</c-alert>
13+
<c-alert variant="left-accent" status="success" mb="3">
14+
<c-alert-icon mr="2" />
15+
<c-alert-title> Success alert </c-alert-title>
16+
<c-alert-description> Something just happened </c-alert-description>
17+
</c-alert>
18+
<c-alert variant="left-accent" status="error" mb="3">
19+
<c-alert-icon mr="2" />
20+
<c-alert-title> Error alert </c-alert-title>
21+
<c-alert-description> Something just happened </c-alert-description>
22+
</c-alert>
23+
</div>
2224
</template>

‎packages/c-alert/examples/with-status.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-alert status="info" mb="3"> Info alert </c-alert>
3-
<c-alert status="success" mb="3"> Success alert </c-alert>
4-
<c-alert status="warning" mb="3"> Warning alert </c-alert>
5-
<c-alert status="error" mb="3"> Error alert </c-alert>
2+
<div>
3+
<c-alert status="info" mb="3"> Info alert </c-alert>
4+
<c-alert status="success" mb="3"> Success alert </c-alert>
5+
<c-alert status="warning" mb="3"> Warning alert </c-alert>
6+
<c-alert status="error" mb="3"> Error alert </c-alert>
7+
</div>
68
</template>

‎packages/c-alert/examples/with-title.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-alert status="info" mb="3">
3-
<c-alert-title> Info alert </c-alert-title>
4-
<c-alert-description> Something just happened </c-alert-description>
5-
</c-alert>
2+
<div>
3+
<c-alert status="info" mb="3">
4+
<c-alert-title> Info alert </c-alert-title>
5+
<c-alert-description> Something just happened </c-alert-description>
6+
</c-alert>
7+
</div>
68
</template>

‎packages/c-button/examples/with-button-icon.vue

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
2-
<chakra.p mt="3" font-weight="bold">Left icon</chakra.p>
3-
<c-button mr="3" left-icon="email" color-scheme="blue">
4-
Base button
5-
</c-button>
6-
<chakra.p mt="3" font-weight="bold">Right icon</chakra.p>
7-
<c-button mr="3" right-icon="star" color-scheme="blue">
8-
Base button
9-
</c-button>
2+
<div>
3+
<chakra.p mt="3" font-weight="bold">Left icon</chakra.p>
4+
<c-button mr="3" left-icon="email" color-scheme="blue">
5+
Base button
6+
</c-button>
7+
<chakra.p mt="3" font-weight="bold">Right icon</chakra.p>
8+
<c-button mr="3" right-icon="star" color-scheme="blue">
9+
Base button
10+
</c-button>
11+
</div>
1012
</template>

‎packages/c-button/examples/with-button-size.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-button mr="3" size="xs" color-scheme="teal"> Tiny button </c-button>
3-
<c-button mr="3" size="sm" color-scheme="teal"> Small button </c-button>
4-
<c-button mr="3" size="md" color-scheme="teal"> Medium button </c-button>
5-
<c-button mr="3" size="lg" color-scheme="teal"> Large button </c-button>
2+
<div>
3+
<c-button mr="3" size="xs" color-scheme="teal"> Tiny button </c-button>
4+
<c-button mr="3" size="sm" color-scheme="teal"> Small button </c-button>
5+
<c-button mr="3" size="md" color-scheme="teal"> Medium button </c-button>
6+
<c-button mr="3" size="lg" color-scheme="teal"> Large button </c-button>
7+
</div>
68
</template>

‎packages/c-button/examples/with-button-variants.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
3-
<c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
4-
<c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>
5-
<c-button mr="3" variant="link" color-scheme="teal"> Link </c-button>
2+
<div>
3+
<c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
4+
<c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
5+
<c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>
6+
<c-button mr="3" variant="link" color-scheme="teal"> Link </c-button>
7+
</div>
68
</template>

‎packages/c-spinner/examples/with-size.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
2-
<c-spinner size="xs" mr="3" />
3-
<c-spinner size="sm" mr="3" />
4-
<c-spinner size="md" mr="3" />
5-
<c-spinner size="lg" mr="3" />
6-
<c-spinner size="xl" />
2+
<div>
3+
<c-spinner size="xs" mr="3" />
4+
<c-spinner size="sm" mr="3" />
5+
<c-spinner size="md" mr="3" />
6+
<c-spinner size="lg" mr="3" />
7+
<c-spinner size="xl" />
8+
</div>
79
</template>

‎packages/c-visually-hidden/examples/base-visually-hidden.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<template>
2-
<chakra.p>👇🏽 There's actually some visually hidden text here :) 😀 </chakra.p>
3-
<c-visually-hidden> Visually Hidden </c-visually-hidden>
2+
<chakra.div>
3+
<chakra.p
4+
>👇🏽 There's actually some visually hidden text here :) 😀
5+
</chakra.p>
6+
<c-visually-hidden> Visually Hidden </c-visually-hidden>
7+
</chakra.div>
48
</template>

‎playground/src/App.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
<chakra.section d="flex" height="inherit" w="inherit">
44
<sidebar :stories="routes" />
55
<chakra.main w="full" border-left="1px solid" border-color="gray.400" padding="4">
6-
<router-view />
6+
<router-view v-slot="{ Component, route }">
7+
<transition name="fade" mode="out-in">
8+
<component :is="Component" />
9+
</transition>
10+
</router-view>
711
</chakra.main>
812
</chakra.section>
913
</template>
@@ -43,6 +47,16 @@ html {
4347
}
4448
4549
a {
46-
text-decoration: none;
50+
text-decoration: none;
51+
}
52+
53+
.fade-enter-active,
54+
.fade-leave-active {
55+
transition: opacity 0.3s ease-in-out;
56+
}
57+
58+
.fade-enter-from,
59+
.fade-leave-to {
60+
opacity: 0;
4761
}
4862
</style>

0 commit comments

Comments
 (0)