Fixed display bugs when the new prop :get-all-properties="true", this prop can be used to show properties of classes (static properties) and class objects (enumerating also the prototype properties from parents and grand parents when extends inheritance is used).

Enjoy!

Author: infinite-system

vue-dd/demo/App.vue

@@ -1,49 +1,64 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { action, computed, inject, makeObservable, observable } from "*";
- const w = window
- const test = reactive({ 'test': 'test' })
- const test2 = { 'test': ref({test: 'test'}), 'array':['test','test2'] }
 
-abstract class MessagesPresenter {
+const w = window
+const test = reactive({ 'test': 'test' })
+const test2 = { 'test': ref({ test: 'test' }), 'array': ['test', 'test2'] }
 
+abstract class GrandParent {
+  grandParent = 'test'
+
+  get grandParentGetter () {
+    return 'fun'
+  }
+}
+
+abstract class MessagesPresenter extends GrandParent {
 
   showValidationWarning = null
 
+  static _name = 'hi'
 
-  constructor() {
-  }
+  constructor () {
+    super()
 
-  init = () => {
   }
 
-  abstract reset(): void
+  init = () => {}
 
-  get messages() {
-  }
+  abstract reset (): void
 
-  unpackRepositoryPmToVm = (pm, userMessage) => {
+  get messages () {
+    return 'yes'
   }
-}
 
+  unpackRepositoryPmToVm = (pm, userMessage) => {}
+}
+class Auth {
+  test = 1
+}
 class LoginRegisterPresenter extends MessagesPresenter {
 
+  static test = 2
+  static test2 = 2
+
+  static testF () {
+    return 1
+  }
 
   email = null
   password = null
   option = null
 
-  getVm () {
-
-  }
-
   constructor () {
     super()
+    this.auth = new Auth()
   }
 
   //
   get viewTest () {
-    return ''
+    return 'test'
   }
 
   set viewTest (value) {
@@ -72,16 +87,23 @@ class LoginRegisterPresenter extends MessagesPresenter {
 }
 
 const presenter = new LoginRegisterPresenter()
+
+const proto = Object.getPrototypeOf(presenter)
+
 </script>
 <template>
-<h1>Basic Tests</h1>
-  <vue-dd name="window" :get-all-properties="true" v-model="w" />
+  <h1>vue-dd integration tests</h1>
+  <vue-dd name="window" :save-focus="false" :get-all-properties="false" v-model="w" />
   <br />
-  <vue-dd name="test" :get-all-properties="true" v-model="test" />
+  <vue-dd name="test" get-all-properties v-model="test" />
   <br />
-  <vue-dd name="test2" :get-all-properties="true" v-model="test2" />
+  <vue-dd name="test2" get-all-properties v-model="test2" />
   <br />
   <vue-dd name="presenter" :get-all-properties="true" v-model="presenter" />
+  <vue-dd name="LoginRegisterPresenter" :get-all-properties="true" v-model="LoginRegisterPresenter" />
+
+
+
 </template>
 
 

vue-dd/src/NodeComplex.vue

@@ -455,10 +455,43 @@ export default {
     emit (name, ...args) {
       this.emitFn(this, name, ...args)
     },
+    makeClassItems (modelValue) {
+
+      // Get all object properties as well as prototype properties
+      let proto = Object.getPrototypeOf(modelValue)
+
+      let props = []
+      while(proto && proto.constructor.name !== 'Object') {
+        props.push.apply(props, Object.getOwnPropertyNames(proto).filter(el => !['caller', 'callee', 'arguments'].includes(el)))
+        proto = Object.getPrototypeOf(proto.constructor.prototype)
+      }
+
+      let keys = Array.from(
+        new Set(
+          Object.getOwnPropertyNames(modelValue).concat(props)
+        )
+      )
+
+      let keysLength = keys.length;
+
+      if (!this.isOpen) {
+        // handle closed state
+        const preview = parseInt(this.preview)
+        let i = 0;
+        while (i < keysLength) {
+          if (i === preview) break;
+          keys[i] = keys[i]
+          i++
+        }
+      }
+      return { keys, keysLength }
+    },
     makeItems () {
+      let keys = [], i = 0
       switch (true) {
+
         case this.isObject:
-          let keys = [], i = 0;
+
           switch (true) {
             case this.isSet:
               this.getMapSet = Array.from(this.modelValue)
@@ -477,26 +510,9 @@ export default {
 
               if (this.getAllProperties) {
 
-                // Get all object properties
-                const proto = Object.getPrototypeOf(this.modelValue)
-
-                // Converting to and from set, deduplicates the array
-                keys = Array.from(new Set(Object.getOwnPropertyNames(this.modelValue)
-                  .concat(proto && proto.constructor.name !== 'Object' ? Object.getOwnPropertyNames(proto) : [])))
-
-                let keysLength = keys.length;
-
-                if (!this.isOpen) {
-                  // handle closed state
-                  const preview = parseInt(this.preview)
-                  while (i < keysLength) {
-                    if (i === preview) break;
-                    keys[i] = keys[i]
-                    i++
-                  }
-                }
-
-                this.getSize = keysLength
+                const classItems = this.makeClassItems(this.modelValue)
+                keys = classItems.keys
+                this.getSize = classItems.keysLength
 
               } else {
                 // show regular enumerable properties only
@@ -523,6 +539,11 @@ export default {
         case this.isArray:
           this.getSize = this.modelValue.length
           return [...Array(this.modelValue.length).keys()]
+        case this.isClass:
+          const classItems = this.makeClassItems(this.modelValue)
+          keys = classItems.keys
+          this.getSize = classItems.keysLength
+          return keys
         default:
           return this.modelValue
       }
@@ -625,18 +646,18 @@ export default {
       return this.isObject ? 'vue-dd-obj-char' : 'vue-dd-arr-char'
     },
     charOpen () {
-      return this.isObject ? "{" : "["
+      return this.isArray ? "[" : "{"
     },
     charClose () {
-      return this.isObject ? "}" : "]"
+      return this.isArray ? "]" : "}"
     },
     functionInlinePreview () {
-      const length = this.items.toString().length
+      const f = this.items.toString()
       const maxLength = 100
-      if (length > maxLength) {
-        return this.items.toString().substring(0, maxLength) + '...}'
+      if (f.length > maxLength) {
+        return f.substring(0, maxLength) + '...}'
       } else {
-        return this.items.toString()
+        return f
       }
     },
     functionInline () {
@@ -720,7 +741,7 @@ export default {
       return this.isRef || this.isReactive
     },
     isIterable () {
-      return this.isArray || this.isObject
+      return this.isArray || this.isObject || this.isClass
     },
     isArray () {
       return this.type === 'array'
@@ -731,6 +752,9 @@ export default {
     isFunction () {
       return this.type === 'function'
     },
+    isClass () {
+      return this.type === 'class'
+    },
     isPromise () {
       return isPromise(this.modelValue)
     },
@@ -767,7 +791,7 @@ export default {
     // make reactive to startClose prop change
     startClosed () {
       if (this.level === 0) {
-        console.log('start closed changed to', !this.startClosed)
+        // console.log('start closed changed to', !this.startClosed)
         this.setOpen(!this.startClosed, { user: false })
       }
     },
@@ -893,7 +917,6 @@ export default {
       this.useOpenSpecific = this.openSpecific
     }
   },
-  // expose: ['$options', 'open', 'toggle', 'close', 'isOpen'],
   components: {
     NodePrimitive
   }

vue-dd/src/VueDd.vue

@@ -316,7 +316,7 @@ export default defineComponent({
 
         } else {
 
-            // console.log('this.useOpenSpecific', oldFocus, this.useOpenSpecific, this.openSpecific)
+          // console.log('this.useOpenSpecific', oldFocus, this.useOpenSpecific, this.openSpecific)
           if (this.openSpecific.indexOf(oldFocus) === -1){
             const index = this.useOpenSpecific.indexOf(oldFocus);
             if (index > -1) { // only splice array when item is found
@@ -464,10 +464,15 @@ export default defineComponent({
           _type = 'longtext'
         }
       }
+      if (_type === 'function') {
+        if (this.getAllProperties && value.toString()[0] === 'c') {
+          _type = 'class'
+        }
+      }
       return _type;
     },
     isPrimitiveFn (type) {
-      return !(type === 'array' || type === 'object' || type === 'function' || type === 'longtext');
+      return !(type === 'array' || type === 'object' || type === 'function' || type === 'longtext' || type === 'class');
     },
     escapeQuotesFn (text) {
       return this.escapeQuotes ? text.replaceAll('"', '\\"') : text
@@ -539,10 +544,7 @@ export default defineComponent({
     },
     toggle() {
       this.$refs.nodeComplex.toggle()
-    },
-    // isOpen() {
-    //   return this.$refs.nodeComplex.isOpen
-    // }
+    }
   },
   watch: {
     modelValue: {
@@ -561,7 +563,6 @@ export default defineComponent({
       this.useOpenSpecific = this.getOpenSpecific()
     }
   },
-  // expose: ['$options', 'open', 'toggle', 'close', 'isOpen', 'root'],
   components: {
     NodeComplex,
     NodePrimitive