refactor: lint

components/graphql/Type.vue

@@ -1,65 +1,79 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-2 m-2">
-    <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
+    <div
+      class="font-bold type-title"
+      :class="{ 'type-highlighted': isHighlighted }"
+    >
       <span v-if="isInput" class="font-normal text-acColor">input </span>
-      <span v-else-if="isInterface" class="font-normal text-acColor">interface </span>
+      <span v-else-if="isInterface" class="font-normal text-acColor"
+        >interface
+      </span>
       <span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
       {{ gqlType.name }}
     </div>
-    <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
+    <div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0" class="mb-2">
       <h5>{{ $t("interfaces") }}</h5>
-      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
-        <GraphqlTypeLink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
+      <div
+        v-for="gqlInterface in interfaces"
+        :key="gqlInterface.name"
+        class="m-2 ml-4"
+      >
+        <GraphqlTypeLink
+          :gql-type="gqlInterface"
+          :jump-type-callback="jumpTypeCallback"
+        />
       </div>
     </div>
     <div v-if="children.length > 0" class="mb-2">
       <h5>{{ $t("children") }}</h5>
       <div v-for="child in children" :key="child.name" class="m-2 ml-4">
-        <GraphqlTypeLink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
+        <GraphqlTypeLink
+          :gql-type="child"
+          :jump-type-callback="jumpTypeCallback"
+        />
       </div>
     </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
         <GraphqlField
-          :gqlField="field"
-          :isHighlighted="isFieldHighlighted({ field })"
-          :jumpTypeCallback="jumpTypeCallback"
+          :gql-field="field"
+          :is-highlighted="isFieldHighlighted({ field })"
+          :jump-type-callback="jumpTypeCallback"
         />
       </div>
     </div>
     <div v-if="isEnum">
       <h5>{{ $t("values") }}</h5>
-      <div :key="value.name" v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
+      <div
+        v-for="value in gqlType.getValues()"
+        :key="value.name"
+        class="m-4"
+        v-text="value.name"
+      ></div>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.type-highlighted {
-  @apply text-acColor;
-}
-</style>
-
 <script>
-import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInterfaceType,
+} from "graphql"
 
 export default {
   props: {
+    // eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
     gqlType: {},
-    gqlTypes: Array,
-    jumpTypeCallback: Function,
+    gqlTypes: { type: Array, default: () => [] },
+    jumpTypeCallback: { type: Function, default: () => {} },
     isHighlighted: { type: Boolean, default: false },
     highlightedFields: { type: Array, default: () => [] },
   },
-  methods: {
-    isFieldHighlighted({ field }) {
-      return !!this.highlightedFields.find(({ name }) => name === field.name)
-    },
-  },
   computed: {
     isInput() {
       return this.gqlType instanceof GraphQLInputObjectType
@@ -75,9 +89,21 @@ export default {
     },
     children() {
       return this.gqlTypes.filter(
-        (type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
+        (type) =>
+          type.getInterfaces && type.getInterfaces().includes(this.gqlType)
       )
     },
   },
+  methods: {
+    isFieldHighlighted({ field }) {
+      return !!this.highlightedFields.find(({ name }) => name === field.name)
+    },
+  },
 }
 </script>
+
+<style scoped lang="scss">
+.type-highlighted {
+  @apply text-acColor;
+}
+</style>