Merge branch 'break-props-data-computed' of https://github.com/markus…

…sorg/vue-devtools into split-data

package.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "circular-json-es6": "^2.0.0",
     "lodash.debounce": "^4.0.6",
+    "lodash.groupby": "^4.6.0",
     "vue": "^2.0.0",
     "vuex": "^2.0.0"
   }

src/devtools/components/DataField.vue

@@ -11,15 +11,6 @@
       <span class="key">{{ field.key }}</span>
       <span class="colon">:</span>
       <span class="value" :class="valueType">{{ formattedValue }}</span>
-      <div v-if="field.type" :class="['type', hyphen(field.type)]">
-        {{ field.type }}
-        <div class="meta" v-if="field.meta">
-          <div class="meta-field" v-for="(val, key) in field.meta">
-            <span class="key">{{ key }}</span>
-            <span class="value">{{ val }}</span>
-          </div>
-        </div>
-      </div>
     </div>
     <div class="children" v-if="expanded && isExpandableType">
       <data-field

src/devtools/views/components/ComponentInspector.vue

@@ -10,21 +10,47 @@
         <i class="material-icons">visibility</i>
         <span>Inspect DOM</span>
       </a>
+      <div class="search">
+        <i class="material-icons">search</i>
+        <input placeholder="Filter data" v-model.trim="filter">
+      </div>
     </action-header>
     <section v-show="!hasTarget" slot="scroll" class="notice">
       <div>Select a component instance to inspect.</div>
     </section>
-    <section v-show="hasTarget" slot="scroll">
-      <div class="data-fields">
-        <data-field v-for="field in sortedState"
-          :key="field.key"
-          :field="field"
-          :depth="0">
-        </data-field>
-      </div>
-      <div class="notice" v-show="target.state && !target.state.length">
+    <section v-show="hasTarget" slot="scroll" class="data">
+      <div class="notice" v-if="target.state && !target.state.length">
         <div>This instance has no reactive state.</div>
       </div>
+      <div v-else class="data-wrapper">
+        <div class="data-el">
+          <div class="data-type">data</div>
+          <div class="data-fields">
+            <div v-if="filteredState.undefined">
+              <data-field v-for="field in filteredState.undefined" :key="field.key" :field="field" :depth="0"></data-field>
+            </div>
+            <span v-else class="no-fields">No data</span>
+          </div>
+        </div>
+        <div class="data-el">
+          <div class="data-type">computed</div>
+          <div class="data-fields">
+            <div v-if="filteredState.computed">
+              <data-field v-for="field in filteredState.computed" :key="field.key" :field="field" :depth="0"></data-field>
+            </div>
+            <span v-else class="no-fields">No computed data</span>
+          </div>
+        </div>
+        <div class="data-el">
+          <div class="data-type">props</div>
+          <div class="data-fields">
+            <div v-if="filteredState.prop">
+              <data-field v-for="field in filteredState.prop" :key="field.key" :field="field" :depth="0"></data-field>
+            </div>
+            <span v-else class="no-fields">No props</span>
+          </div>
+        </div>
+      </div>
     </section>
   </scroll-pane>
 </template>
@@ -33,6 +59,8 @@
 import DataField from 'components/DataField.vue'
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
+import { searchDeepInObject } from 'src/util'
+import groupBy from 'lodash.groupBy'
 
 const isChrome = typeof chrome !== 'undefined' && chrome.devtools
 
@@ -45,16 +73,17 @@ export default {
   props: {
     target: Object
   },
+  data () {
+    return {
+      filter: ''
+    }
+  },
   computed: {
     hasTarget () {
       return this.target.id != null
     },
-    sortedState () {
-      return this.target.state && this.target.state.slice().sort((a, b) => {
-        if (a.key < b.key) return -1
-        if (a.key > b.key) return 1
-        return 0
-      })
+    filteredState () {
+      return groupBy(this.sort(this.target.state.filter(el => searchDeepInObject({[el.key]: el.value}, this.filter))), 'type')
     }
   },
   methods: {
@@ -67,6 +96,13 @@ export default {
       } else {
         window.alert('DOM inspection is not supported in this shell.')
       }
+    },
+    sort (state) {
+      return state && state.slice().sort((a, b) => {
+        if (a.key < b.key) return -1
+        if (a.key > b.key) return 1
+        return 0
+      })
     }
   }
 }
@@ -84,4 +120,23 @@ export default {
 
 .component-name
   margin 0 10px
+
+.data
+  padding: 20px 0px
+  
+.data-wrapper
+  display: flex;
+  flex-wrap: wrap;
+
+.data-el
+  padding: 0px 10px
+  flex: 1 0 33.33%;
+
+  .data-type 
+    color: #3ba776
+    padding-left: 20px
+
+  .no-fields
+    font-size: 14px
+    color: #ddd
 </style>

src/util.js

@@ -107,3 +107,44 @@ function isPrimitive (data) {
     data instanceof RegExp
   )
 }
+
+export function searchDeepInObject (obj, searchTerm) {
+  var match = false
+  const keys = Object.keys(obj)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = obj[key]
+    if (compare(key, searchTerm) || compare(value, searchTerm)) {
+      match = true
+      break
+    }
+    if (isPlainObject(value)) {
+      match = searchDeepInObject(value, searchTerm)
+      if (match) {
+        break
+      }
+    }
+  }
+  return match
+}
+
+function compare (mixedValue, stringValue) {
+  if (Array.isArray(mixedValue) && searchInArray(mixedValue, stringValue.toLowerCase())) {
+    return true
+  }
+  if (('' + mixedValue).toLowerCase().indexOf(stringValue.toLowerCase()) !== -1) {
+    return true
+  }
+  return false
+}
+
+function searchInArray (arr, searchTerm) {
+  let found = false
+  for (let i = 0; i < arr.length; i++) {
+    if (('' + arr[i]).toLowerCase().indexOf(searchTerm) !== -1) {
+      found = true
+      break
+    }
+  }
+  return found
+}