feat(stage-web): info action
This commit is contained in:
Neko Ayaka
@@ -142,6 +142,7 @@
|
||||
"clustr": "^0.0.3",
|
||||
"histoire": "1.0.0-alpha.2",
|
||||
"unocss": "^66.3.3",
|
||||
"unplugin-info": "^1.2.2",
|
||||
"unplugin-yaml": "^3.0.1",
|
||||
"vite": "^6.3.5",
|
||||
"vue": "^3.5.17"
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
|
||||
import { DialogContent, DialogOverlay, DialogPortal, DialogRoot } from 'reka-ui'
|
||||
import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const showDialog = defineModel({ type: Boolean, default: false, required: false })
|
||||
|
||||
const isDesktop = useMediaQuery('(min-width: 768px)')
|
||||
const screenSafeArea = useScreenSafeArea()
|
||||
|
||||
useResizeObserver(document.documentElement, () => screenSafeArea.update())
|
||||
onMounted(() => screenSafeArea.update())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot v-if="isDesktop" :open="showDialog" @update:open="value => showDialog = value">
|
||||
<slot name="trigger" />
|
||||
<DialogPortal>
|
||||
<DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm" />
|
||||
<DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-[9999] max-h-full max-w-2xl w-[92dvw] transform overflow-y-scroll rounded-2xl bg-white p-6 shadow-xl outline-none backdrop-blur-md scrollbar-none -translate-x-1/2 -translate-y-1/2 dark:bg-neutral-900">
|
||||
<slot />
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</DialogRoot>
|
||||
<DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
|
||||
<DrawerPortal>
|
||||
<DrawerOverlay class="fixed inset-0" />
|
||||
<DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
|
||||
<DrawerHandle />
|
||||
<slot />
|
||||
</DrawerContent>
|
||||
</DrawerPortal>
|
||||
</DrawerRoot>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as AboutDialog } from './Dialog.vue'
|
||||
@@ -32,7 +32,7 @@ onMounted(() => screenSafeArea.update())
|
||||
<DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
|
||||
<DrawerPortal>
|
||||
<DrawerOverlay class="fixed inset-0" />
|
||||
<DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 12)}px` }">
|
||||
<DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
|
||||
<DrawerHandle />
|
||||
<Onboarding @configured="emit('configured')" @skipped="emit('skipped')" />
|
||||
</DrawerContent>
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export * from './About'
|
||||
export * from './Onboarding'
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
<Variant title="Quanlai Sans">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-quanlai>
|
||||
<div font-quanlai mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
<Variant title="Xiaolai Sans">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-xiaolai>
|
||||
<div font-xiaolai mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
@@ -63,17 +63,17 @@
|
||||
|
||||
<Variant title="Cute Sans">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-cuteen>
|
||||
<div font-cuteen mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
<div font-cuteen>
|
||||
Hello, world!
|
||||
</div>
|
||||
<div font-cute>
|
||||
<div font-cutejp>
|
||||
こんにちは、世界！
|
||||
</div>
|
||||
<div font-cute>
|
||||
<div font-cutejp>
|
||||
你好，世界！
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,17 +82,17 @@
|
||||
|
||||
<Variant title="Jura Sans">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-jura>
|
||||
<div font-jura mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
<div font-jura>
|
||||
Hello, world!
|
||||
</div>
|
||||
<div bg="red-100 dark:red-900" w-fit font-jura>
|
||||
<div bg="red-100 dark:red-900" font-jura w-fit>
|
||||
こんにちは、世界！
|
||||
</div>
|
||||
<div bg="red-100 dark:red-900" w-fit font-jura>
|
||||
<div bg="red-100 dark:red-900" font-jura w-fit>
|
||||
你好，世界！
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,17 +101,17 @@
|
||||
|
||||
<Variant title="Tech Sans">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-quicksand>
|
||||
<div font-quicksand mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
<div font-quicksand>
|
||||
Hello, world!
|
||||
</div>
|
||||
<div bg="red-100 dark:red-900" w-fit font-quicksand>
|
||||
<div bg="red-100 dark:red-900" font-quicksand w-fit>
|
||||
こんにちは、世界！
|
||||
</div>
|
||||
<div bg="red-100 dark:red-900" w-fit font-quicksand>
|
||||
<div bg="red-100 dark:red-900" font-quicksand w-fit>
|
||||
你好，世界！
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,17 +120,17 @@
|
||||
|
||||
<Variant title="Urbanist">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-urbanist>
|
||||
<div font-urbanist mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
<div font-urbanist>
|
||||
Hello, world!
|
||||
</div>
|
||||
<div bg="red-100 dark:red-900" w-fit font-quicksand>
|
||||
<div bg="red-100 dark:red-900" font-quicksand w-fit>
|
||||
こんにちは、世界！
|
||||
</div>
|
||||
<div bg="red-100 dark:red-900" w-fit font-quicksand>
|
||||
<div bg="red-100 dark:red-900" font-quicksand w-fit>
|
||||
你好，世界！
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
<Variant title="M PLUS Rounded 1c">
|
||||
<div flex flex-col gap-1>
|
||||
<div mb-3 text-4xl font-bold tracking-wide font-m-plus-rounded>
|
||||
<div font-m-plus-rounded mb-3 text-4xl font-bold tracking-wide>
|
||||
<span text="neutral-500 dark:neutral-400">Project</span> <span text-pink>AIRI</span>
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
"resolveJsonModule": true,
|
||||
"types": [
|
||||
"vitest",
|
||||
"vite/client"
|
||||
"vite/client",
|
||||
"unplugin-info/client"
|
||||
],
|
||||
"allowJs": true,
|
||||
"strict": true,
|
||||
|
||||
Reference in New Issue
Block a user