feat: support editing nested custom values

vuejs · May 8, 2022 · 6f3532e · 6f3532e
1 parent f64b1c7
commit 6f3532e
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 16 deletions.
diff --git a/packages/app-backend-vue3/src/components/data.ts b/packages/app-backend-vue3/src/components/data.ts
@@ -202,7 +202,6 @@ export function getCustomObjectDetails (object: any, proto: string): CustomState
  _custom: {
  type: objectType.toLowerCase(),
  objectType,
- readOnly: true,
  value,
  ...raw ? { tooltip: `<span class="font-mono">${raw}</span>` } : {},
  },

diff --git a/packages/app-frontend/src/features/inspector/DataField.vue b/packages/app-frontend/src/features/inspector/DataField.vue
@@ -68,11 +68,15 @@ export default defineComponent({
  return valueType(this.field.value)
  },
 
+ interpretedValueType (): string {
+ return valueType(this.field.value, false)
+ },
+
  valueDetails (): string {
  return valueDetails(this.field.value)
  },
 
- rawValueType (): string {
+ nativeValueType (): string {
  return typeof this.field.value
  },
 
@@ -190,7 +194,7 @@ export default defineComponent({
  },
 
  valueClass (): string[] {
- const cssClass = [this.valueType, `raw-${this.rawValueType}`]
+ const cssClass = [this.valueType, `raw-${this.nativeValueType}`]
  if (this.valueType === 'custom') {
  const value = this.field.value
  value._custom.type && cssClass.push(`type-${value._custom.type}`)

diff --git a/packages/app-frontend/src/mixins/data-field-edit.js b/packages/app-frontend/src/mixins/data-field-edit.js
@@ -71,7 +71,7 @@ export default {
  },
 
  isValueEditable () {
- const type = this.valueType
+ const type = this.interpretedValueType
  return this.isEditable &&
  (
  type === 'null' ||
@@ -83,7 +83,7 @@ export default {
  },
 
  isSubfieldsEditable () {
- return this.isEditable && (this.valueType === 'array' || this.valueType === 'plain-object')
+ return this.isEditable && (this.interpretedValueType === 'array' || this.interpretedValueType === 'plain-object')
  },
 
  valueValid () {
@@ -145,7 +145,12 @@ export default {
  if (currentEditedField && currentEditedField !== this) {
  currentEditedField.cancelEdit()
  }
- this.editedValue = this.transformSpecialTokens(JSON.stringify(this.field.value), true)
+ let valueToEdit = this.field.value
+ // Edit custom value (we don't want to edit the whole custom value data object)
+ if (this.valueType === 'custom') {
+ valueToEdit = valueToEdit._custom.value
+ }
+ this.editedValue = this.transformSpecialTokens(JSON.stringify(valueToEdit), true)
  this.editedKey = this.field.key
  this.editing = true
  currentEditedField = this
@@ -166,7 +171,16 @@ export default {
  submitEdit () {
  if (this.editValid) {
  this.editing = false
- const value = this.transformSpecialTokens(this.editedValue, false)
+ let value = this.transformSpecialTokens(this.editedValue, false)
+ // We need to send the entire custom value data object
+ if (this.valueType === 'custom') {
+ value = JSON.stringify({
+ _custom: {
+ ...this.field.value._custom,
+ value: JSON.parse(value), // Input
+ },
+ })
+ }
  const newKey = this.editedKey !== this.field.key ? this.editedKey : undefined
  this.sendEdit({ value, newKey })
  this.$emit('submit-edit')
@@ -212,9 +226,9 @@ export default {
 
  addNewValue () {
  let key
- if (this.valueType === 'array') {
+ if (this.interpretedValueType === 'array') {
  key = this.field.value.length
- } else if (this.valueType === 'plain-object') {
+ } else if (this.interpretedValueType === 'plain-object') {
  let i = 1
  while (this.field.value.hasOwnProperty(key = `prop${i}`)) i++
  }

diff --git a/packages/shell-dev-vue3/src/SetupScript.vue b/packages/shell-dev-vue3/src/SetupScript.vue
@@ -12,6 +12,10 @@ const double = computed(() => count.value * 2)
 
 const answer = 42
 
+const state2 = reactive({
+ n: ref(0),
+})
+
 function onClick () {
  count.value++
 }
@@ -26,4 +30,6 @@ function onClick () {
  </button>
 
  <Child />
+
+ <pre>{{ state2 }}</pre>
 </template>
diff --git a/packages/shell-dev-vue3/src/devtools-plugin/index.js b/packages/shell-dev-vue3/src/devtools-plugin/index.js
@@ -108,13 +108,7 @@ export default {
  type: 'fail',
  key: 'state',
  editable: true,
- value: {
- _custom: {
- type: null,
- readOnly: false,
- value: reactive({ n: ref(0) }),
- },
- },
+ value: reactive({ n: ref(0) }),
  })
 
  return api.getComponentBounds(payload.componentInstance).then(bounds => {