From 80ae1dc5b206c3d56671a805b292eec16dd9acad Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Tue, 9 Jan 2024 13:40:05 +0900
Subject: [PATCH] fix(client/bridge): enable deletion of property on Map/Set
 (#163)

---
 .../components/inspector/InspectorDataField/Actions.vue  | 9 +++++----
 packages/devtools-kit/src/core/component/state/editor.ts | 6 +++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
index 8cf7f012..e57e465f 100644
--- a/packages/client/src/components/inspector/InspectorDataField/Actions.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { toRaw } from 'vue'
 import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 import { getRawValue } from '@vue/devtools-kit'
 import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
@@ -49,7 +50,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
     nodeId: state.value.nodeId,
     state: {
       newKey: null!,
-      value: v,
+      value: toRaw(v),
       type: dataType.value,
       remove,
     },
@@ -95,12 +96,12 @@ function quickEdit(v: unknown, remove: boolean = false) {
       </VueButton>
       <!-- increment/decrement button, numeric value only -->
       <template v-else-if="dataType === 'number'">
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((rawValue as number) + 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit((rawValue as number) + 1)">
           <template #icon>
             <VueIcon icon="i-carbon-add" />
           </template>
         </VueButton>
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((rawValue as number) - 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit((rawValue as number) - 1)">
           <template #icon>
             <VueIcon icon="i-carbon-subtract" />
           </template>
@@ -108,7 +109,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
       </template>
     </template>
     <!-- delete prop, only appear if depth > 0 -->
-    <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit(rawValue, true)">
+    <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit(rawValue, true)">
       <template #icon>
         <VueIcon icon="i-material-symbols-delete-rounded" />
       </template>
diff --git a/packages/devtools-kit/src/core/component/state/editor.ts b/packages/devtools-kit/src/core/component/state/editor.ts
index f46e3a69..9b028f82 100644
--- a/packages/devtools-kit/src/core/component/state/editor.ts
+++ b/packages/devtools-kit/src/core/component/state/editor.ts
@@ -1,5 +1,5 @@
 import type { MaybeRef, Ref } from 'vue'
-import { isReactive, isRef } from 'vue'
+import { isReactive, isRef, toRaw } from 'vue'
 import { getComponentInstance } from '../general'
 import { devtoolsContext } from '../../general'
 
@@ -70,6 +70,10 @@ export class StateEditor {
       if (state.remove || state.newKey) {
         if (Array.isArray(object))
           object.splice(field as number, 1)
+        else if (toRaw(object) instanceof Map && typeof value === 'object' && value && 'key' in value)
+          object.delete(value.key)
+        else if (toRaw(object) instanceof Set)
+          object.delete(value)
         else
           Reflect.deleteProperty(object, field)
       }