refactor(style): updated linter config

m4rii0 · Apr 15, 2022 · 6b58ec5 · 6b58ec5
1 parent 39746e0
commit 6b58ec5
Show file tree

Hide file tree

Showing 27 changed files with 1,153 additions and 580 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
   root: true,
-  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript/recommended'],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:vue/vue3-recommended', '@vue/eslint-config-typescript/recommended'],
   env: {
     'vue/setup-compiler-macros': true,
   },

diff --git a/src/App.vue b/src/App.vue
@@ -20,7 +20,10 @@ const themeOverrides = computed(() => styleStore.isDarkTheme ? darkThemeOverride
 </script>
 
 <template>
-  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
+  <n-config-provider
+    :theme="theme"
+    :theme-overrides="themeOverrides"
+  >
     <n-global-style />
     <n-message-provider placement="bottom">
       <component :is="layout">

diff --git a/src/components/MenuLayout.vue b/src/components/MenuLayout.vue
@@ -1,15 +1,28 @@
 <template>
-    <n-layout has-sider>
-        <n-layout-sider bordered collapse-mode="width" :collapsed-width="0" :width="240" :collapsed="isMenuCollapsed"
-            @collapse="isMenuCollapsed = true" @expand="isMenuCollapsed = false" :show-trigger="false"
-            :native-scrollbar="false" :position="siderPosition">
-            <slot name="sider" />
-        </n-layout-sider>
-        <n-layout class="content">
-            <slot name="content" />
-            <div class="overlay" v-show="isSmallScreen && !isMenuCollapsed" @click="isMenuCollapsed = true" />
-        </n-layout>
+  <n-layout has-sider>
+    <n-layout-sider
+      bordered
+      collapse-mode="width"
+      :collapsed-width="0"
+      :width="240"
+      :collapsed="isMenuCollapsed"
+      :show-trigger="false"
+      :native-scrollbar="false"
+      :position="siderPosition"
+      @collapse="isMenuCollapsed = true"
+      @expand="isMenuCollapsed = false"
+    >
+      <slot name="sider" />
+    </n-layout-sider>
+    <n-layout class="content">
+      <slot name="content" />
+      <div
+        v-show="isSmallScreen && !isMenuCollapsed"
+        class="overlay"
+        @click="isMenuCollapsed = true"
+      />
     </n-layout>
+  </n-layout>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -32,19 +32,30 @@ function onSelect(path: string) {
 </script>
 
 <template>
-    <div class="search-bar">
-        <n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
-            :on-select="onSelect">
-            <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
-                <n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
-                    @focus="handleFocus" @blur="handleBlur">
-                    <template #prefix>
-                        <n-icon :component="SearchRound" />
-                    </template>
-                </n-input>
-            </template>
-        </n-auto-complete>
-    </div>
+  <div class="search-bar">
+    <n-auto-complete
+      v-model:value="queryString"
+      :options="options"
+      :input-props="{ autocomplete: 'disabled' }"
+      :on-select="onSelect"
+    >
+      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
+        <n-input
+          round
+          clearable
+          placeholder="Search a tool..."
+          :value="slotValue"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        >
+          <template #prefix>
+            <n-icon :component="SearchRound" />
+          </template>
+        </n-input>
+      </template>
+    </n-auto-complete>
+  </div>
 </template>
 
 

diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
@@ -1,15 +1,24 @@
 <template>
-    <router-link :to="tool.path">
-        <n-card class="tool-card">
-            <n-icon class="icon" size="40" :component="tool.icon" />
-            <n-h3 class="title">
-                <n-ellipsis>{{ tool.name }}</n-ellipsis>
-            </n-h3>
-            <div class="description">
-                <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis>
-            </div>
-        </n-card>
-    </router-link>
+  <router-link :to="tool.path">
+    <n-card class="tool-card">
+      <n-icon
+        class="icon"
+        size="40"
+        :component="tool.icon"
+      />
+      <n-h3 class="title">
+        <n-ellipsis>{{ tool.name }}</n-ellipsis>
+      </n-h3>
+      <div class="description">
+        <n-ellipsis
+          :line-clamp="2"
+          :tooltip="false"
+        >
+          {{ tool.description }}
+        </n-ellipsis>
+      </div>
+    </n-card>
+  </router-link>
 </template>
 
 <script setup lang="ts">