chore: lint fix

vuejs-jp · Aug 10, 2024 · e0d00d6 · e0d00d6
1 parent e21f7dd
commit e0d00d6
Show file tree

Hide file tree

Showing 18 changed files with 526 additions and 365 deletions.
diff --git a/app/components/AppAlert.vue b/app/components/AppAlert.vue
@@ -1,18 +1,18 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import IconCheckCircle from './icons/IconCheckCircle.vue'
-import IconXCircle from './icons/IconXCircle.vue'
-import AppModal from './AppModal.vue'
+import { defineComponent } from "vue";
+import IconCheckCircle from "./icons/IconCheckCircle.vue";
+import IconXCircle from "./icons/IconXCircle.vue";
+import AppModal from "./AppModal.vue";
 
 interface Data {
-  type: 'success' | 'error'
-  title: string
-  text: string
+  type: "success" | "error";
+  title: string;
+  text: string;
 }
 
 interface Classes {
-  success: boolean
-  error: boolean
+  success: boolean;
+  error: boolean;
 }
 
 export default defineComponent({
@@ -21,40 +21,46 @@ export default defineComponent({
   },
 
   computed: {
-    data (): Data {
-      return this.$store.state.modal.data
+    data(): Data {
+      return this.$store.state.modal.data;
     },
 
-    classes (): Classes {
+    classes(): Classes {
       return {
-        success: this.data.type === 'success',
-        error: this.data.type === 'error'
-      }
+        success: this.data.type === "success",
+        error: this.data.type === "error"
+      };
     },
 
-    icon () {
-      if (this.data.type === 'error') {
-        return IconXCircle
+    icon() {
+      if (this.data.type === "error") {
+        return IconXCircle;
       }
 
-      return IconCheckCircle
+      return IconCheckCircle;
     }
   },
 
   methods: {
-    close (): void {
-      this.$store.dispatch('alert/close')
+    close(): void {
+      this.$store.dispatch("alert/close");
     }
   }
-})
+});
 </script>
 
 <template>
   <AppModal name="alert">
-    <div class="AppAlert" :class="classes">
+    <div
+      class="AppAlert"
+      :class="classes"
+    >
       <div class="box">
         <div class="status">
-          <component :is="icon" class="status-icon" />
+          <component
+            :is="icon"
+            class="status-icon"
+          />
         </div>
 
         <div class="body">
@@ -67,15 +73,18 @@ export default defineComponent({
         </div>
 
         <div class="action">
-          <button class="button" @click="close">{{ $t('components.AppAlert.close') }}</button>
+          <button
+            class="button"
+            @click="close"
+          >
+            {{ $t('components.AppAlert.close') }}
+          </button>
         </div>
       </div>
     </div>
   </AppModal>
 </template>
 
-
-
 <style lang="postcss" scoped>
 @import '@/assets/styles/variables';
 

diff --git a/app/components/AppBackdrop.vue b/app/components/AppBackdrop.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ show: boolean}>(), { show: false });
+withDefaults(defineProps<{ show: boolean }>(), { show: false });
 </script>
 
 <template>

diff --git a/app/components/AppDialog.vue b/app/components/AppDialog.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import IconPreloaderDark from './icons/IconPreloaderDark.vue'
-import AppModal from './AppModal.vue'
+import { defineComponent } from "vue";
+import IconPreloaderDark from "./icons/IconPreloaderDark.vue";
+import AppModal from "./AppModal.vue";
 
 export default defineComponent({
   components: {
@@ -10,11 +10,11 @@ export default defineComponent({
   },
 
   computed: {
-    title (): string {
-      return this.$store.state.modal.data.title
+    title(): string {
+      return this.$store.state.modal.data.title;
     }
   }
-})
+});
 </script>
 
 <template>
@@ -33,8 +33,6 @@ export default defineComponent({
   </AppModal>
 </template>
 
-
-
 <style lang="postcss" scoped>
 @import '@/assets/styles/variables';
 

diff --git a/app/components/AppModal.vue b/app/components/AppModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 
 export default defineComponent({
   props: {
@@ -8,24 +8,25 @@ export default defineComponent({
 
   computed: {
     show(): boolean {
-      return (this.$store as any).state.modal.name === this.name
+      return (this.$store as any).state.modal.name === this.name;
     }
   }
-})
+});
 </script>
 
 <template>
   <portal to="modal">
     <transition name="fade">
-      <div v-if="show" class="AppModal">
+      <div
+        v-if="show"
+        class="AppModal"
+      >
         <slot />
       </div>
     </transition>
   </portal>
 </template>
 
-
-
 <style lang="postcss" scoped>
 @import '@/assets/styles/variables';
 

diff --git a/app/components/ButtonOutline.vue b/app/components/ButtonOutline.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { isExternalLink } from '~/_legacy/support/Url'
+import { defineComponent } from "vue";
+import { isExternalLink } from "~/_legacy/support/Url";
 
 export default defineComponent({
   props: {
-    tag: { type: String, default: 'button' },
+    tag: { type: String, default: "button" },
     block: { type: Boolean, default: false },
     icon: { type: Object, default: null },
     label: { type: String, required: true },
@@ -13,25 +13,40 @@ export default defineComponent({
   },
 
   computed: {
-    link (): string | null {
-      return this.href || this.to
+    link(): string | null {
+      return this.href || this.to;
     },
 
-    isExternalLink (): boolean {
-      return this.link ? isExternalLink(this.link) : false
+    isExternalLink(): boolean {
+      return this.link ? isExternalLink(this.link) : false;
     },
 
-    target (): string {
-      return this.isExternalLink ? '_blank' : '_self'
+    target(): string {
+      return this.isExternalLink ? "_blank" : "_self";
     }
   }
-})
+});
 </script>
 
 <template>
-  <div class="ButtonOutline" role="button" :class="{ block }" @click="$emit('click')">
-    <Component :is="tag" class="button" :to="href" :href="href" :target="target">
-      <Component :is="icon" v-if="icon" class="icon" />
+  <div
+    class="ButtonOutline"
+    role="button"
+    :class="{ block }"
+    @click="$emit('click')"
+  >
+    <Component
+      :is="tag"
+      class="button"
+      :to="href"
+      :href="href"
+      :target="target"
+    >
+      <Component
+        :is="icon"
+        v-if="icon"
+        class="icon"
+      />
       <span class="label">{{ label }}</span>
     </Component>
   </div>

diff --git a/app/components/ChatStack.vue b/app/components/ChatStack.vue
@@ -1,32 +1,26 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropOptions } from 'vue'
-import ChatStackItem from './ChatStackItem.vue'
-
-
-interface Chat {
-  direction: 'left' | 'right'
-  avatar: string
-  alt: string
-  name: string
-  time: string
-  body: string
-}
-
-export default defineComponent({
-  components: {
-    ChatStackItem
-  },
-
-  props: {
-    chats: { type: Array, required: true } as PropOptions<Chat[]>
-  }
-})
+<script setup lang="ts">
+import ChatStackItem from "./ChatStackItem.vue";
+
+defineProps<{
+  chats: {
+    direction: "left" | "right";
+    avatar: string;
+    alt: string;
+    name: string;
+    time: string;
+    body: string;
+  }[];
+}>();
 </script>
 
 <template>
   <div class="ChatStack">
-    <div v-for="(chat, index) in chats" :key="index" class="chat" :class="chat.direction">
+    <div
+      v-for="(chat, index) in chats"
+      :key="index"
+      class="chat"
+      :class="chat.direction"
+    >
       <ChatStackItem :chat="chat" />
     </div>
   </div>

diff --git a/app/components/ChatStackItem.vue b/app/components/ChatStackItem.vue
@@ -1,27 +1,27 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropOptions } from 'vue'
-
-interface Chat {
-  direction: 'left' | 'right'
-  avatar: string
-  alt: string
-  name: string
-  time: string
-  body: string
-}
-
-export default defineComponent({
-  props: {
-    chat: { type: Object, required: true } as PropOptions<Chat>
-  }
-})
+<script setup lang="ts">
+defineProps<{
+  chat: {
+    direction: "left" | "right";
+    avatar: string;
+    alt: string;
+    name: string;
+    time: string;
+    body: string;
+  };
+}>();
 </script>
 
 <template>
-  <div class="ChatStackItem" :class="chat.direction">
+  <div
+    class="ChatStackItem"
+    :class="chat.direction"
+  >
     <figure class="avatar">
-      <img class="avatar-img" :src="chat.avatar" :alt="chat.alt">
+      <img
+        class="avatar-img"
+        :src="chat.avatar"
+        :alt="chat.alt"
+      >
     </figure>
 
     <div class="box">