fix: improve ui for globs

eslint · Apr 8, 2024 · 2299639 · 2299639
1 parent 31bb86c
commit 2299639
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/app/components/ConfigItem.vue b/app/components/ConfigItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, defineModel, ref, watchEffect } from 'vue'
+import type { Linter } from 'eslint'
 import { filtersRules, isGridView } from '~/composables/state'
 import { stringifyUnquoted } from '~/composables/strings'
 import { useRouter } from '#app/composables/router'
@@ -11,6 +12,7 @@ const props = defineProps<{
   index: number
   filters?: FiltersConfigsPage
   active?: boolean
+  matchedGlobs?: Linter.FlatConfigFileSpec[]
 }>()
 
 const emit = defineEmits<{
@@ -113,7 +115,11 @@ const extraConfigs = computed(() => {
         <div flex="~ col gap-2">
           <div>Applies to files matching</div>
           <div flex="~ gap-2 items-center wrap">
-            <GlobItem v-for="glob, idx of config.files?.flat()" :key="idx" :glob="glob" popup="files" />
+            <GlobItem
+              v-for="glob, idx of config.files?.flat()"
+              :key="idx" :glob="glob" popup="files"
+              :active="matchedGlobs?.includes(glob)"
+            />
           </div>
         </div>
       </div>
@@ -148,7 +154,11 @@ const extraConfigs = computed(() => {
             Ignore
           </div>
           <div flex="~ gap-2 items-center wrap">
-            <GlobItem v-for="glob, idx of config.ignores" :key="idx" :glob="glob" />
+            <GlobItem
+              v-for="glob, idx of config.ignores"
+              :key="idx" :glob="glob"
+              :active="matchedGlobs?.includes(glob)"
+            />
           </div>
         </div>
       </div>

diff --git a/app/components/GlobItem.vue b/app/components/GlobItem.vue
@@ -36,12 +36,13 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
 
 <template>
   <component :is="showsPopup ? VDropdown : Noop">
-    <div
+    <component
+      :is="showsPopup ? 'button' : 'div'"
       border="~ rounded" px2 font-mono
       :class="active === true ? 'border-amber:50 text-amber bg-amber:5' : active === false ? 'border-base bg-gray:5 text-gray op50' : 'border-base bg-gray:5 text-gray'"
     >
       {{ glob }}
-    </div>
+    </component>
     <template #popper="{ shown, hide }">
       <div v-if="shown && popup === 'files'" max-h="30vh" min-w-80 p3 of-auto>
         <div v-if="files?.size" flex="~ col gap-1">

diff --git a/app/pages/configs.vue b/app/pages/configs.vue
@@ -391,6 +391,7 @@ onMounted(async () => {
               :index="idx"
               :filters="filters"
               :active="!!(filters.filepath && config.files)"
+              :matched-globs="fileMatchResult?.globs"
               @badge-click="e => filters.rule = e"
             />
           </template>