fix(components): filter with kebab-case, closes #1729

Author: Akryum

packages/app-backend-vue2/src/components/tree.ts

@@ -1,5 +1,5 @@
 import { AppRecord, BackendContext, DevtoolsApi } from '@vue-devtools/app-backend-api'
-import { classify } from '@vue-devtools/shared-utils'
+import { classify, kebabize } from '@vue-devtools/shared-utils'
 import { ComponentTreeNode, ComponentInstance } from '@vue/devtools-api'
 import { getRootElementsFromComponentInstance } from './el'
 import { getInstanceName, getRenderKey, getUniqueId, isBeingDestroyed } from './util'
@@ -120,8 +120,9 @@ function getInternalInstanceChildren (instance): any[] {
  * Check if an instance is qualified.
  */
 function isQualified (instance): boolean {
-  const name = classify(getInstanceName(instance)).toLowerCase()
-  return name.indexOf(filter) > -1
+  const name = getInstanceName(instance)
+  return classify(name).toLowerCase().indexOf(filter) > -1 ||
+    kebabize(name).toLowerCase().indexOf(filter) > -1
 }
 
 function flatten<T> (items: any[]): T[] {

packages/app-backend-vue3/src/components/filter.ts

@@ -1,4 +1,4 @@
-import { classify } from '@vue-devtools/shared-utils'
+import { classify, kebabize } from '@vue-devtools/shared-utils'
 import { getInstanceName } from './util'
 
 export class ComponentFilter {
@@ -15,7 +15,8 @@ export class ComponentFilter {
    * @return {Boolean}
    */
   isQualified (instance) {
-    const name = classify(getInstanceName(instance)).toLowerCase()
-    return name.indexOf(this.filter) > -1
+    const name = getInstanceName(instance)
+    return classify(name).toLowerCase().indexOf(this.filter) > -1 ||
+      kebabize(name).toLowerCase().indexOf(this.filter) > -1
   }
 }

packages/shell-dev-vue3/src/FormSection.vue

@@ -1,3 +1,10 @@
+<script>
+export default {
+  // eslint-disable-next-line vue/name-property-casing
+  name: 'form-section',
+}
+</script>
+
 <template>
   <fieldset>
     <legend>Form section</legend>