-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7dff6ee
commit 83dca08
Showing
9 changed files
with
172 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { useLocalStorage } from '@vueuse/core' | ||
|
|
||
| export function useTheme() { | ||
| const theme = useLocalStorage('vitepress-theme-appearance', () => '') | ||
| return { | ||
| theme, | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <script lang="ts" setup> | ||
| import { computed, onMounted, ref, useSlots } from 'vue' | ||
| import { cn } from '../../lib/utils' | ||
| const props = defineProps({ | ||
| class: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| delay: { | ||
| type: Number, | ||
| default: 1000, | ||
| }, | ||
| }) | ||
| const slots = useSlots() | ||
| const index = ref(0) | ||
| const slotsArray = ref<any>([]) | ||
| onMounted(loadComponents) | ||
| const itemsToShow = computed(() => { | ||
| return slotsArray.value.slice(0, index.value) | ||
| }) | ||
| async function loadComponents() { | ||
| slotsArray.value = slots.default ? slots.default()[0]?.children : [] | ||
| while (index.value < slotsArray.value.length) { | ||
| index.value++ | ||
| await delay(props.delay) | ||
| } | ||
| } | ||
| async function delay(ms: number) { | ||
| return new Promise(resolve => setTimeout(resolve, ms)) | ||
| } | ||
| function getInitial(idx: number) { | ||
| return idx === index.value - 1 | ||
| ? { | ||
| scale: 0, | ||
| opacity: 0, | ||
| } | ||
| : undefined | ||
| } | ||
| function getEnter(idx: number) { | ||
| return idx === index.value - 1 | ||
| ? { | ||
| scale: 1, | ||
| opacity: 1, | ||
| y: 0, | ||
| transition: { | ||
| type: 'spring', | ||
| stiffness: 250, | ||
| damping: 40, | ||
| }, | ||
| } | ||
| : undefined | ||
| } | ||
| function getLeave() { | ||
| return { | ||
| scale: 0, | ||
| opacity: 0, | ||
| y: 0, | ||
| transition: { | ||
| type: 'spring', | ||
| stiffness: 350, | ||
| damping: 40, | ||
| }, | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div :class="cn('border w-[600px] h-[370px] overflow-auto rounded-lg', $props.class)"> | ||
| <transition-group name="animated-beam" tag="div" class="flex flex-col-reverse items-center p-2" move-class="move"> | ||
| <div | ||
| v-for="(item, idx) in itemsToShow" :key="idx" v-motion :initial="getInitial(idx)" | ||
| :enter="getEnter(idx)" :leave="getLeave()" :class="cn('mx-auto w-full mb-4')" | ||
| > | ||
| <component :is="item" /> | ||
| </div> | ||
| </transition-group> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .move { | ||
| transition: transform 0.4s ease-out; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <script setup lang='ts'> | ||
| import { cn } from '../../lib/utils' | ||
| const props = defineProps(['name', 'description', 'icon', 'color', 'time']) | ||
| const className = cn( | ||
| 'relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-2', | ||
| // animation styles | ||
| 'transition-all duration-200 ease-in-out hover:scale-[103%]', | ||
| // light styles | ||
| 'bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]', | ||
| // dark styles | ||
| 'transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]', | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <figure :class="className"> | ||
| <div class="flex flex-row border rounded-xl items-center px-2 gap-4"> | ||
| <div class="flex size-10 items-center justify-center rounded-2xl" :style="{ backgroundColor: props.color }"> | ||
| <span class="text-lg">{{ props.icon }}</span> | ||
| </div> | ||
| <div class="flex flex-col space-y-1 overflow-hidden"> | ||
| <div class="flex flex-row items-center whitespace-pre text-lg font-medium "> | ||
| <span class="text-sm text-black dark:text-white font-semibold sm:text-lg">{{ props.name }}</span> | ||
| <span class="mx-1">·</span> | ||
| <span class="text-xs text-gray-500 dark:text-gray-200">{{ props.time }}</span> | ||
| </div> | ||
| <p class="text-sm font-normal dark:text-white"> | ||
| {{ props.description }} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </figure> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters