notBrad/FMHYedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format with new style

Browse Source
This commit is contained in:
taskylizard
2024-01-25 16:32:45 +00:00
parent bc3bbaafeb
commit ef422dcda8
43 changed files with 686 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
.vitepress/theme/components/Feedback2.vue
View File

@@ -1,34 +1,34 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref } from 'vue'
import {
TransitionRoot,
TransitionChild,
Dialog,
DialogPanel,
DialogTitle,
DialogDescription,
} from "@headlessui/vue";
DialogDescription
} from '@headlessui/vue'
const isOpen = ref(true);
const isOpen = ref(true)
const feedbackOptions = [
{
label: "💡 Suggestion",
value: "suggestion",
label: '💡 Suggestion',
value: 'suggestion'
},
{
label: "❤️ Appreciation",
value: "appreciate",
label: '❤️ Appreciation',
value: 'appreciate'
},
{ label: "🐞 Bug", value: "bug" },
{ label: "📂 Other", value: "other" },
];
{ label: '🐞 Bug', value: 'bug' },
{ label: '📂 Other', value: 'other' }
]
function closeModal() {
isOpen.value = false;
isOpen.value = false
}
function openModal() {
isOpen.value = true;
isOpen.value = true
}
</script>
@@ -36,7 +36,8 @@ function openModal() {
<button
type="button"
class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
@click="openModal" />
@click="openModal"
/>
<TransitionRoot appear :show="isOpen" as="template">
<Dialog as="div" class="relative z-10" @close="closeModal">
@@ -47,12 +48,15 @@ function openModal() {
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
leave-to="opacity-0">
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-black/25" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-center justify-center p-4 text-center">
<div
class="flex min-h-full items-center justify-center p-4 text-center"
>
<TransitionChild
as="template"
enter="duration-300 ease-out"
@@ -60,10 +64,15 @@ function openModal() {
enter-to="opacity-100 scale-100"
leave="duration-200 ease-in"
leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95">
leave-to="opacity-0 scale-95"
>
<DialogPanel
class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all">
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-text">
class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all"
>
<DialogTitle
as="h3"
class="text-lg font-medium leading-6 text-text"
>
Feedback
</DialogTitle>
@@ -72,7 +81,8 @@ function openModal() {
<button
v-for="item in feedbackOptions"
:key="item.value"
class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
>
<span>{{ item.label }}</span>
</button>
</div>
@@ -90,7 +100,8 @@ function openModal() {
<button
type="button"
class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
@click="closeModal">
@click="closeModal"
>
Close
</button>
</div>