Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-04-25 07:18:35 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add a modal dialog component

Browse Source
This commit is contained in:
Matt Isenhower 2022-10-28 16:52:53 -07:00
parent 3a7adb4beb
commit 947e003e51
4 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "splatoon3.ink",
"version": "0.0.0",
"dependencies": {
"@headlessui/vue": "^1.7.3",
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
"console-stamp": "^3.0.6",
"cron": "^2.1.0",
@ -103,6 +104,17 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/@headlessui/vue": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz",
"integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@ -4876,6 +4888,12 @@
"strip-json-comments": "^3.1.1"
}
},
"@headlessui/vue": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz",
"integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
"requires": {}
},
"@humanwhocodes/config-array": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"warmCaches": "node app/index.mjs warmCaches"
},
"dependencies": {
"@headlessui/vue": "^1.7.3",
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
"console-stamp": "^3.0.6",
"cron": "^2.1.0",

36
src/components/ModalDialog.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<TransitionRoot as="template" :show="show" >
<Dialog as="div" class="relative z-20">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-sm" />
</TransitionChild>
<div class="fixed inset-0 z-20 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild as="template" enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<DialogPanel :class="innerClass">
<slot />
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
<script setup>
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
defineProps({
show: {
type: Boolean,
default: true,
},
innerClass: String,
});
</script>

2
src/layouts/MainLayout.vue
View File

@ -1,6 +1,6 @@
<template>
<main class="min-h-screen flex flex-col overflow-hidden">
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 justify-between items-center mx-4 my-4 md:mx-12 z-50">
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 justify-between items-center mx-4 my-4 md:mx-12 z-10">
<div class="font-splatoon1 text-5xl text-shadow-lg">
<router-link to="/">Splatoon 3</router-link>
</div>