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

fix build issues

Browse Source
This commit is contained in:
taskylizard
2023-11-14 20:40:49 +05:30
parent bd530c4afc
commit 529b5182e0
8 changed files with 2363 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.vitepress/theme/components/Feedback.vue
View File

@@ -2,6 +2,7 @@
import { reactive, ref } from "vue";
import { useRoute } from "vitepress";
import type { FeedbackType } from "../../types/Feedback";
import { fetcher } from "itty-fetcher";
const loading = ref<boolean>(false);
const error = ref<unknown>(null);
@@ -69,18 +70,21 @@ async function handleSubmit(type?: FeedbackType["type"]) {
<Transition name="fade" mode="out-in">
<div v-if="!feedback.type" class="step">
<div>
<div>
<div>
<p class="heading">Feedback</p>
</div>
</div>
<div class="button-container">
<button v-for="item in feedbackOptions" :key="item.value" class="btn"
<button
v-for="item in feedbackOptions"
:key="item.value"
class="btn"
@click="handleSubmit(item.value as FeedbackType['type'])">
<span>{{ item.label }}</span>
</button>
</button>
</div>
</div>
<div v-else-if="feedback.type && !success" class="step">
<div v-else-if="feedback.type && !success" class="step">
<div>
<p class="desc">The wiki is... • {{ path }}</p>
<div>
@@ -88,12 +92,16 @@ async function handleSubmit(type?: FeedbackType["type"]) {
<button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
<span class="i-carbon-close-large">close</span>
</button>
</div>
</div>
</div>
<textarea v-model="feedback.message" autofocus class="input" />
<p class="desc">Contacts, so we can get back to you. (Optional)</p>
<textarea v-model="feedback.contact" class="contact-input" />
<button type="submit" class="btn btn-primary" :disabled="feedback.message.length > 1000" @click="handleSubmit()">
<button
type="submit"
class="btn btn-primary"
:disabled="feedback.message.length > 10"
@click="handleSubmit()">
Submit
</button>
</div>
@@ -105,7 +113,7 @@ async function handleSubmit(type?: FeedbackType["type"]) {
</template>
<style scoped>
.step>*+* {
.step > * + * {
margin-top: 1rem;
}

132
.vitepress/theme/components/Feedback2.vue Normal file
View File

@@ -0,0 +1,132 @@
<script setup lang="ts">
import { ref } from "vue";
import {
TransitionRoot,
TransitionChild,
Dialog,
DialogPanel,
DialogTitle,
DialogDescription,
} from "@headlessui/vue";
const isOpen = ref(true);
interface ILogger {
}
const feedbackOptions = [
{
label: "♻️ Suggestion",
value: "suggestion",
},
{
label: "❤️ Appreciation",
value: "appreciate",
},
{ label: "🐞 Bug", value: "bug" },
{ label: "📂 Other", value: "other" },
];
function closeModal() {
isOpen.value = false;
}
function openModal() {
isOpen.value = true;
}
</script>
<template>
<button type="button" class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="openModal" />
<TransitionRoot appear :show="isOpen" as="template">
<Dialog as="div" @close="closeModal" class="relative z-10">
<TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
leave="duration-200 ease-in" leave-from="opacity-100" 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">
<TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
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">
Feedback
</DialogTitle>
<div class="mt-2">
<div class="grid gap-[0.5rem]">
<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">
<span>{{ item.label }}</span>
</button>
</div>
</div>
<div class="mt-2">
<div>
<label for="feedback-input-text" class="field-label">Feedback*</label>
<textarea id="feedback-input-text" placeholder="meow" rows="5" />
</div>
</div>
<div class="mt-4">
<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">
Close
</button>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
<style scoped>
textarea,
input {
font-family: var(--vp-font-family-base);
background: var(--vp-c-bg-soft);
font-size: 14px;
border-radius: 4px;
padding: 16px;
width: 100%;
&::placeholder {
color: var(--vp-c-text-2) !important;
opacity: 1;
}
}
.btn {
border: 1px solid var(--vp-c-divider);
background-color: var(--vp-c-bg);
border-radius: 8px;
transition:
border-color 0.25s,
background-color 0.25s;
display: inline-block;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
margin: 0;
padding: 0.375rem 0.75rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
}
.btn:hover {
border-color: var(--vp-c-brand);
}
</style>