#51 Remember toggle state for key-value component members in inspector

* Remember toggle state for key-value component members in inspector

* Switch toggle state memory for kv members from key to absolute path.

Author: garrett-is-a-swann

etc/js/components/widgets/inspector/entity-inspector-component.vue

@@ -70,6 +70,7 @@
     <template v-if="expand && value">
       <div class="component-value">
         <entity-inspector-value
+          :path="fullName"
           :value="value"
           :type="type"
           :readonly="isReadonly"

etc/js/components/widgets/inspector/entity-inspector-kv.vue

@@ -18,6 +18,7 @@
       </entity-inspector-preview>
       <template v-if="expand">
         <entity-inspector-value
+          :path="path"
           :value="value"
           :type="type"
           :readonly="readonly"
@@ -41,9 +42,10 @@ export default { name: "entity-inspector-kv" }
 </script>
 
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue';
+import { defineProps, defineEmits, ref, onMounted } from 'vue';
 
 const props = defineProps({
+  path: {type: String, required: true},
   keyname: {type: String, required: true},
   value: {required: true},
   type: {type: Object, required: true},
@@ -55,6 +57,7 @@ const expand = ref(false);
 
 function toggle() {
   expand.value = !expand.value;
+  localStorage.setItem(`${props.path}.expand`, String(expand.value));
 }
 
 function setValue(evt, key) {
@@ -65,6 +68,10 @@ function setValue(evt, key) {
   }
 }
 
+onMounted(() => {
+  expand.value = localStorage.getItem(`${props.path}.expand`) === "true";
+});
+
 </script>
 
 <style scoped>

etc/js/components/widgets/inspector/entity-inspector-value.vue

@@ -4,6 +4,7 @@
       <div class="prop-grid">
         <template v-for="(value, key) in value">
           <entity-inspector-kv
+            :path="path + '.' + key"
             :keyname="key"
             :value="value"
             :type="type[key]"
@@ -32,6 +33,7 @@ export default { name: "entity-inspector-value" }
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps({
+  path: {type: String, required: true},
   value: {required: true},
   type: {type: Object, required: true},
   readonly: {type: Boolean, required: true}