Merge pull request #30 from Normal-OJ/hotfix/styling

style: formatting by prettier

src/auto/components.d.ts

@@ -2,59 +2,55 @@
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    AnnouncementCard: typeof import('./../components/Announcement/AnnouncementCard.vue')['default']
-    AnnouncementForm: typeof import('./../components/Announcement/AnnouncementForm.vue')['default']
-    CodeEditor: typeof import('./../components/CodeEditor.vue')['default']
-    CourseSideBar: typeof import('./../components/CourseSideBar.vue')['default']
-    CourseTopBar: typeof import('./../components/CourseTopBar.vue')['default']
-    DueCountdown: typeof import('./../components/DueCountdown.vue')['default']
-    HomeworkCard: typeof import('./../components/Homework/HomeworkCard.vue')['default']
-    HomeworkForm: typeof import('./../components/Homework/HomeworkForm.vue')['default']
-    IUilAngleDoubleLeft: typeof import('~icons/uil/angle-double-left')['default']
-    IUilAngleDoubleRight: typeof import('~icons/uil/angle-double-right')['default']
-    IUilAngleDown: typeof import('~icons/uil/angle-down')['default']
-    IUilBars: typeof import('~icons/uil/bars')['default']
-    IUilBookAlt: typeof import('~icons/uil/book-alt')['default']
-    IUilChartLine: typeof import('~icons/uil/chart-line')['default']
-    IUilCheck: typeof import('~icons/uil/check')['default']
-    IUilCheckCircle: typeof import('~icons/uil/check-circle')['default']
-    IUilEdit: typeof import('~icons/uil/edit')['default']
-    IUilExclamationOctagon: typeof import('~icons/uil/exclamation-octagon')['default']
-    IUilFileExclamationAlt: typeof import('~icons/uil/file-exclamation-alt')['default']
-    IUilFileUploadAlt: typeof import('~icons/uil/file-upload-alt')['default']
-    IUilHome: typeof import('~icons/uil/home')['default']
-    IUilMapMarkerInfo: typeof import('~icons/uil/map-marker-info')['default']
-    IUilMoon: typeof import('~icons/uil/moon')['default']
-    IUilPlusCircle: typeof import('~icons/uil/plus-circle')['default']
-    IUilSave: typeof import('~icons/uil/save')['default']
-    IUilSun: typeof import('~icons/uil/sun')['default']
-    IUilTimesCircle: typeof import('~icons/uil/times-circle')['default']
-    IUilTrashAlt: typeof import('~icons/uil/trash-alt')['default']
-    IUilUser: typeof import('~icons/uil/user')['default']
-    IUilWrench: typeof import('~icons/uil/wrench')['default']
-    JudgeStatus: typeof import('./../components/JudgeStatus.vue')['default']
-    LoginSection: typeof import('./../components/LoginSection.vue')['default']
-    MarkdownRenderer: typeof import('./../components/MarkdownRenderer.vue')['default']
-    PaginationButtons: typeof import('./../components/PaginationButtons.vue')['default']
-    ProblemAllowedLanguageSelector: typeof import('./../components/Problem/Forms/ProblemAllowedLanguageSelector.vue')['default']
-    ProblemCard: typeof import('./../components/Problem/ProblemCard.vue')['default']
-    ProblemDescriptionForm: typeof import('./../components/Problem/Forms/ProblemDescriptionForm.vue')['default']
-    ProblemForm: typeof import('./../components/Problem/ProblemForm.vue')['default']
-    ProblemMultiSelect: typeof import('./../components/Homework/Fields/ProblemMultiSelect.vue')['default']
-    ProblemTestdataDescriptionModal: typeof import('./../components/Problem/Forms/ProblemTestdataDescriptionModal.vue')['default']
-    SampleCodeBlock: typeof import('./../components/SampleCodeBlock.vue')['default']
-    SideBar: typeof import('./../components/SideBar.vue')['default']
-    SideBarLink: typeof import('./../components/SideBarLink.vue')['default']
-    SkeletonCard: typeof import('./../components/SkeletonCard.vue')['default']
-    SkeletonPost: typeof import('./../components/SkeletonPost.vue')['default']
-    SkeletonTable: typeof import('./../components/SkeletonTable.vue')['default']
-    SystemAnnouncements: typeof import('./../components/SystemAnnouncements.vue')['default']
-    TopBar: typeof import('./../components/TopBar.vue')['default']
-    UiDialog: typeof import('./../components/ui-dialog.vue')['default']
-    UiSpinner: typeof import('./../components/ui-spinner.vue')['default']
+    AnnouncementCard: typeof import("./../components/Announcement/AnnouncementCard.vue")["default"];
+    AnnouncementForm: typeof import("./../components/Announcement/AnnouncementForm.vue")["default"];
+    CodeEditor: typeof import("./../components/CodeEditor.vue")["default"];
+    CourseSideBar: typeof import("./../components/CourseSideBar.vue")["default"];
+    CourseTopBar: typeof import("./../components/CourseTopBar.vue")["default"];
+    DueCountdown: typeof import("./../components/DueCountdown.vue")["default"];
+    HomeworkCard: typeof import("./../components/Homework/HomeworkCard.vue")["default"];
+    HomeworkForm: typeof import("./../components/Homework/HomeworkForm.vue")["default"];
+    IUilAngleDoubleLeft: typeof import("~icons/uil/angle-double-left")["default"];
+    IUilAngleDoubleRight: typeof import("~icons/uil/angle-double-right")["default"];
+    IUilAngleDown: typeof import("~icons/uil/angle-down")["default"];
+    IUilBars: typeof import("~icons/uil/bars")["default"];
+    IUilBookAlt: typeof import("~icons/uil/book-alt")["default"];
+    IUilChartLine: typeof import("~icons/uil/chart-line")["default"];
+    IUilCheck: typeof import("~icons/uil/check")["default"];
+    IUilEdit: typeof import("~icons/uil/edit")["default"];
+    IUilFileExclamationAlt: typeof import("~icons/uil/file-exclamation-alt")["default"];
+    IUilFileUploadAlt: typeof import("~icons/uil/file-upload-alt")["default"];
+    IUilHome: typeof import("~icons/uil/home")["default"];
+    IUilMapMarkerInfo: typeof import("~icons/uil/map-marker-info")["default"];
+    IUilMoon: typeof import("~icons/uil/moon")["default"];
+    IUilSun: typeof import("~icons/uil/sun")["default"];
+    IUilTimesCircle: typeof import("~icons/uil/times-circle")["default"];
+    IUilTrashAlt: typeof import("~icons/uil/trash-alt")["default"];
+    IUilUser: typeof import("~icons/uil/user")["default"];
+    IUilWrench: typeof import("~icons/uil/wrench")["default"];
+    JudgeStatus: typeof import("./../components/JudgeStatus.vue")["default"];
+    LoginSection: typeof import("./../components/LoginSection.vue")["default"];
+    MarkdownRenderer: typeof import("./../components/MarkdownRenderer.vue")["default"];
+    PaginationButtons: typeof import("./../components/PaginationButtons.vue")["default"];
+    ProblemAllowedLanguageSelector: typeof import("./../components/Problem/Forms/ProblemAllowedLanguageSelector.vue")["default"];
+    ProblemCard: typeof import("./../components/Problem/ProblemCard.vue")["default"];
+    ProblemDescriptionForm: typeof import("./../components/Problem/Forms/ProblemDescriptionForm.vue")["default"];
+    ProblemForm: typeof import("./../components/Problem/ProblemForm.vue")["default"];
+    ProblemMultiSelect: typeof import("./../components/Homework/Fields/ProblemMultiSelect.vue")["default"];
+    ProblemTestdataDescriptionModal: typeof import("./../components/Problem/Forms/ProblemTestdataDescriptionModal.vue")["default"];
+    SampleCodeBlock: typeof import("./../components/SampleCodeBlock.vue")["default"];
+    SideBar: typeof import("./../components/SideBar.vue")["default"];
+    SideBarLink: typeof import("./../components/SideBarLink.vue")["default"];
+    SkeletonCard: typeof import("./../components/SkeletonCard.vue")["default"];
+    SkeletonPost: typeof import("./../components/SkeletonPost.vue")["default"];
+    SkeletonTable: typeof import("./../components/SkeletonTable.vue")["default"];
+    SystemAnnouncements: typeof import("./../components/SystemAnnouncements.vue")["default"];
+    TopBar: typeof import("./../components/TopBar.vue")["default"];
+    UiDialog: typeof import("./../components/ui-dialog.vue")["default"];
+    UiSpinner: typeof import("./../components/ui-spinner.vue")["default"];
   }
 }
 
-export { }
+export {};

src/components/Problem/Forms/ProblemDescriptionForm.vue

@@ -109,7 +109,7 @@ const updateProblem = inject<ProblemUpdater>("updateProblem") as ProblemUpdater;
   <div class="col-span-2 mx-auto">
     <div class="tooltip" data-tip="append new sample">
       <div
-        class="btn btn-sm mr-3"
+        class="btn-sm btn mr-3"
         @click="
           updateProblem('description', {
             ...problem.description,
@@ -123,7 +123,7 @@ const updateProblem = inject<ProblemUpdater>("updateProblem") as ProblemUpdater;
     </div>
     <div class="tooltip" data-tip="remove last sample">
       <div
-        class="btn btn-sm"
+        class="btn-sm btn"
         @click="
           updateProblem('description', {
             ...problem.description,

src/components/Problem/ProblemForm.vue

@@ -123,7 +123,7 @@ watchEffect(() => {
     <div class="form-control col-span-2 w-full">
       <label class="label justify-start">
         <span class="label-text">Testdata</span>
-        <label for="testdata-description" class="modal-button btn btn-xs ml-3">How to pack testdata</label>
+        <label for="testdata-description" class="modal-button btn-xs btn ml-3">How to pack testdata</label>
       </label>
       <div
         :class="['textarea-bordered textarea min-h-[96px] w-full p-4', isDrag ? 'border-accent' : '']"
@@ -143,7 +143,7 @@ watchEffect(() => {
         <template v-else>
           <div class="flex">
             <span class="mr-3">{{ file.name }}</span>
-            <button class="btn btn-sm" @click="file = null">
+            <button class="btn-sm btn" @click="file = null">
               <i-uil-times />
             </button>
           </div>

src/components/SampleCodeBlock.vue

@@ -14,7 +14,7 @@ const { copy, copied, isSupported } = useClipboard();
 <template>
   <div class="relative">
     <pre class="rounded bg-zinc-800 py-2 px-4 text-white"><code>{{ code }}</code></pre>
-    <button v-if="isSupported" class="btn btn-info btn-xs absolute right-1 top-1" @click="copy(code)">
+    <button v-if="isSupported" class="btn-info btn-xs btn absolute right-1 top-1" @click="copy(code)">
       {{ copied ? "Copied!" : "Copy" }}
     </button>
   </div>

src/components/TopBar.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="navbar rounded-box shadow-md">
     <div class="navbar-start">
-      <label for="noj-drawer" class="btn btn-ghost drawer-button btn-circle">
+      <label for="noj-drawer" class="btn-ghost drawer-button btn-circle btn">
         <i-uil-bars class="h-6 w-6" />
       </label>
     </div>
     <div class="navbar-center">
-      <a class="btn btn-ghost text-xl normal-case">Normal OJ</a>
+      <a class="btn-ghost btn text-xl normal-case">Normal OJ</a>
     </div>
     <div class="navbar-end"></div>
   </div>

src/components/ui-dialog.vue

@@ -51,7 +51,7 @@ function closeModal() {
             </div>
 
             <div class="mt-4">
-              <button type="button" class="btn btn-info btn-sm" @click="closeModal">OK</button>
+              <button type="button" class="btn-info btn-sm btn" @click="closeModal">OK</button>
             </div>
           </div>
         </TransitionChild>

src/composables/useProblemSelection.ts

@@ -2,33 +2,36 @@ import { computed, ref } from "vue";
 import { useAxios } from "@vueuse/integrations/useAxios";
 import { fetcher } from "../models/api";
 
-type ProblemSelections = { value: string, text: string }[]
-type ProblemId2Meta = Record<string, { name: string | "-", quota: number | "-" }>
+type ProblemSelections = { value: string; text: string }[];
+type ProblemId2Meta = Record<string, { name: string | "-"; quota: number | "-" }>;
 
 export function useProblemSelection(courseName: string) {
-    const { data: problems, error, isLoading } = useAxios<ProblemList>(
-        `/problem?offset=0&count=-1&course=${courseName}`,
-        fetcher,
-    );
+  const {
+    data: problems,
+    error,
+    isLoading,
+  } = useAxios<ProblemList>(`/problem?offset=0&count=-1&course=${courseName}`, fetcher);
 
-    const problemSelections = computed<ProblemSelections>(() => {
-        if (!problems.value) return [];
-        return problems.value.map(({ problemId, problemName, quota }) => ({
-            value: problemId.toString(),
-            text: `${problemId} - ${problemName}`,
-            quota: quota >= 0 ? quota : "-",
-        }));
-    });
+  const problemSelections = computed<ProblemSelections>(() => {
+    if (!problems.value) return [];
+    return problems.value.map(({ problemId, problemName, quota }) => ({
+      value: problemId.toString(),
+      text: `${problemId} - ${problemName}`,
+      quota: quota >= 0 ? quota : "-",
+    }));
+  });
 
-    const problemId2Meta = computed<ProblemId2Meta>(() => {
-        if (!problems.value) return {};
-        return Object.fromEntries(problems.value.map((p) => [p.problemId.toString(), { name: p.problemName, quota: p.quota }]));
-    });
+  const problemId2Meta = computed<ProblemId2Meta>(() => {
+    if (!problems.value) return {};
+    return Object.fromEntries(
+      problems.value.map((p) => [p.problemId.toString(), { name: p.problemName, quota: p.quota }]),
+    );
+  });
 
-    return {
-        problemSelections,
-        problemId2Meta,
-        error,
-        isLoading,
-    };
+  return {
+    problemSelections,
+    problemId2Meta,
+    error,
+    isLoading,
+  };
 }

src/models/api.ts

@@ -6,17 +6,20 @@ export const fetcher = axios.create({
   withCredentials: true,
 });
 
-fetcher.interceptors.response.use((response) => {
-  return {
-    ...response,
-    ...response.data,
-  };
-}, error => {
-  const global = useGlobal();
-  if (error?.response?.status >= 500) {
-    global.onServerError();
-  }
-});
+fetcher.interceptors.response.use(
+  (response) => {
+    return {
+      ...response,
+      ...response.data,
+    };
+  },
+  (error) => {
+    const global = useGlobal();
+    if (error?.response?.status >= 500) {
+      global.onServerError();
+    }
+  },
+);
 
 const Auth = {
   getSession: () => fetcher.get<UserProperties>("/auth/me"),
@@ -31,7 +34,8 @@ const Problem = {
 };
 
 const Submission = {
-  create: (body: { problemId: number; languageType: number }) => fetcher.post<{ submissionId: string }>("/submission", body),
+  create: (body: { problemId: number; languageType: number }) =>
+    fetcher.post<{ submissionId: string }>("/submission", body),
   modify: (id: string, body: FormData) =>
     fetcher.put(`/submission/${id}`, body, {
       headers: { "Content-Type": "multipart/form-data" },
@@ -48,19 +52,19 @@ const Announcement = {
   create: (body: AnnouncementCreationForm) => fetcher.post<{ annId: string }>("/ann", body),
   modify: (body: AnnouncementEditionForm) => fetcher.put("/ann", body),
   delete: (body: { annId: string }) => fetcher.delete("/ann", { data: body }),
-}
+};
 
 const Homework = {
   create: (body: HomeworkCreationForm) => fetcher.post("/homework", body),
   modify: (id: string, body: HomeworkEditionForm) => fetcher.put(`/homework/${id}`, body),
-  delete: (id: string) => fetcher.delete(`/homework/${id}`)
-}
+  delete: (id: string) => fetcher.delete(`/homework/${id}`),
+};
 
 export default {
   Auth,
   Problem,
   Submission,
   Copycat,
   Announcement,
-  Homework
+  Homework,
 };

src/pages/course/[name]/homeworks/index.vue

@@ -46,7 +46,7 @@ function getProblemMeta(ids: number[]): ProblemMeta {
           Homeworks
           <router-link
             v-if="session.isAdmin"
-            class="btn btn-success"
+            class="btn-success btn"
             :to="`/course/${$route.params.name}/homeworks/new`"
           >
             <i-uil-plus-circle class="mr-1 lg:h-5 lg:w-5" /> New

src/pages/course/[name]/problems.vue

@@ -39,7 +39,7 @@ const maxPage = computed(() => {
 
           <router-link
             v-if="session.isAdmin"
-            class="btn btn-success"
+            class="btn-success btn"
             :to="`/course/${$route.params.name}/problem/new`"
           >
             <i-uil-plus-circle class="mr-1 lg:h-5 lg:w-5" /> New
@@ -82,13 +82,13 @@ const maxPage = computed(() => {
                 {{ problemName }}
               </td>
               <td>
-                <span class="badge badge-info mr-1" v-for="tag in tags" :key="tag">{{ tag }}</span>
+                <span class="badge-info badge mr-1" v-for="tag in tags" :key="tag">{{ tag }}</span>
               </td>
               <td>{{ quota - submitCount }} / {{ quota }}</td>
               <td>
                 <div class="tooltip" data-tip="Stats">
                   <router-link
-                    class="btn btn-ghost btn-sm btn-circle mr-1"
+                    class="btn-ghost btn-sm btn-circle btn mr-1"
                     :to="`/course/${$route.params.name}/problem/${problemId}/stats`"
                   >
                     <i-uil-chart-line class="lg:h-5 lg:w-5" />
@@ -97,7 +97,7 @@ const maxPage = computed(() => {
                 <div class="tooltip" data-tip="Copycat">
                   <router-link
                     v-if="session.isAdmin"
-                    class="btn btn-ghost btn-sm btn-circle mr-1"
+                    class="btn-ghost btn-sm btn-circle btn mr-1"
                     :to="`/course/${$route.params.name}/problem/${problemId}/copycat`"
                   >
                     <i-uil-file-exclamation-alt class="lg:h-5 lg:w-5" />
@@ -106,7 +106,7 @@ const maxPage = computed(() => {
                 <div class="tooltip" data-tip="Edit">
                   <router-link
                     v-if="session.isAdmin"
-                    class="btn btn-ghost btn-sm btn-circle"
+                    class="btn-ghost btn-sm btn-circle btn"
                     :to="`/course/${$route.params.name}/problem/${problemId}/edit`"
                   >
                     <i-uil-edit class="lg:h-5 lg:w-5" />

src/pages/course/[name]/submission/[id].vue

@@ -143,7 +143,7 @@ async function rejudge() {
                 <tr>
                   <td colspan="5">
                     <div
-                      class="btn btn-ghost btn-block btn-sm gap-x-3"
+                      class="btn-ghost btn-block btn-sm btn gap-x-3"
                       @click="expandTasks[taskIndex] = !expandTasks[taskIndex]"
                     >
                       <i-uil-angle-down v-if="!expandTasks[taskIndex]" />
@@ -174,7 +174,7 @@ async function rejudge() {
               <!-- TODO submission?.code should without ? -->
               <button
                 v-if="isSupported && submission"
-                class="btn btn-info btn-xs ml-3"
+                class="btn-info btn-xs btn ml-3"
                 @click="copy(submission?.code || '')"
               >
                 {{ copied ? "Copied!" : "Copy" }}