feat: add input filter property (#4)

Author: jevin98

entrypoints/devtools-panel/devtools-panel.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElOption, ElSelect, ElTable, ElTableColumn, ElText, ElTooltip } from 'element-plus'
+import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElInput, ElOption, ElSelect, ElTable, ElTableColumn, ElText, ElTooltip } from 'element-plus'
+import { defineComponent, h } from 'vue'
 import { useDevToolsPanel } from './hooks/useDevToolsPanel'
 import { filterJoin } from './utils'
 
 const {
+  inputValue,
+
   selectedEl,
   renderCssDiffs,
   isAllProperty,
@@ -12,6 +15,28 @@ const {
   onTableRowClassName,
   handleCopyStyle,
 } = useDevToolsPanel()
+
+const PropertyNode = defineComponent({
+  props: {
+    text: {
+      type: String,
+    },
+  },
+  setup(props) {
+    return () => {
+      if (!inputValue.value) {
+        return h('div', props.text)
+      }
+      else {
+        const result = inputValue.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const reg = new RegExp(`(${result})`, 'gi')
+
+        const text = props.text!.replace(reg, '<span class=\'text-[#409eff]\'>$1</span>')
+        return h('div', { innerHTML: text })
+      }
+    }
+  },
+})
 </script>
 
 <template>
@@ -38,7 +63,9 @@ const {
       {{ $t('selectedInfo') }}
     </ElText>
 
-    <div class="flex justify-end">
+    <div class="flex justify-between my-3">
+      <ElInput v-model="inputValue" :placeholder="$t('inputPlaceholder')" clearable class="!w-[50%]" />
+
       <ElCheckbox v-model="isAllProperty" :label="$t('isAllProperty')" />
     </div>
     <ElTable
@@ -49,7 +76,11 @@ const {
       :row-class-name="onTableRowClassName"
       @cell-click="handleCopyStyle"
     >
-      <ElTableColumn prop="property" :label="$t('property')" />
+      <ElTableColumn prop="property" :label="$t('property')">
+        <template #default="scope">
+          <PropertyNode :text="scope.row.property" />
+        </template>
+      </ElTableColumn>
       <template v-for="(el) in selectedEl" :key="el.valueType">
         <ElTableColumn :prop="el.valueType">
           <template #header>

entrypoints/devtools-panel/hooks/useDevToolsPanel.ts

@@ -7,6 +7,7 @@ import { formatStyle, type FormatStyleValue } from '../utils'
 
 export function useDevToolsPanel() {
   const { t } = useI18n()
+  const inputValue = ref('')
 
   const selectedEl: Array<SelectedElType> = reactive([])
   const cssDiffs: Array<CssDiffsType> = reactive([])
@@ -106,15 +107,19 @@ export function useDevToolsPanel() {
   }
 
   const renderCssDiffs = computed(() => {
-    return isAllProperty.value
+    return inputValueFilter(isAllProperty.value
       ? cssDiffs
-      : cssDiffs.filter(css => css.isDiff)
+      : cssDiffs.filter(css => css.isDiff), inputValue.value)
   })
 
+  function inputValueFilter(cssDiffs: Array<CssDiffsType>, inputValue: string) {
+    return !inputValue
+      ? cssDiffs
+      : cssDiffs.filter(c => c.property.includes(inputValue))
+  }
+
   function onTableCellClassName({ columnIndex }: { columnIndex: number }) {
-    if (!columnIndex) {
-      return 'text-[var(--el-table-text-color)] cursor-auto'
-    }
+    return !columnIndex ? 'text-[var(--el-table-text-color)] cursor-auto' : ''
   }
 
   function onTableRowClassName({ row }: { row: CssDiffsType }) {
@@ -156,6 +161,8 @@ export function useDevToolsPanel() {
   }
 
   return {
+    inputValue,
+
     selectedEl,
     renderCssDiffs,
     isAllProperty,

entrypoints/devtools-panel/lang.ts

@@ -7,6 +7,7 @@ export default {
     isAllProperty: 'Show all',
     tableColumnInfo: 'The header name is concatenated from the DOM\'s `TagName`, `Id`, and `Class` attributes using `$$`.',
     copyInfo: 'Copy Success',
+    inputPlaceholder: 'Please enter the css property you want to view',
   },
 
   'zh-CN': {
@@ -17,5 +18,6 @@ export default {
     isAllProperty: '显示全部',
     tableColumnInfo: '表头名称由DOM的 `TagName`、`Id`、`Class` 属性使用 `$$` 拼接而成。',
     copyInfo: '复制成功',
+    inputPlaceholder: '请输入需要查看的css属性',
   },
 }

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "./.wxt/tsconfig.json"
+  "extends": "./.wxt/tsconfig.json",
+  "compilerOptions": {
+    "types": ["element-plus/global"]
+  }
 }