fix(client):improve code

vuejs · Feb 6, 2024 · d1a9d7c · d1a9d7c
1 parent a055bfe
commit d1a9d7c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<{
   depth: number
   showAddIfNeeded?: boolean
   disableEdit?: boolean
+  disableDelete?: boolean
   rootId: string
 }>(), {
   showAddIfNeeded: true,
@@ -119,7 +120,7 @@ function quickEditNum(v: number | string, offset: 1 | -1) {
       </template>
     </template>
     <!-- delete prop, only appear if depth > 0 -->
-    <VueButton v-if="!props.disableEdit && depth > 0 && props.rootId !== 'getters'" v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit(rawValue, true)">
+    <VueButton v-if="!props.disableEdit && !props.disableDelete && 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/client/src/components/inspector/InspectorState.vue b/packages/client/src/components/inspector/InspectorState.vue
@@ -9,10 +9,13 @@ const props = withDefaults(defineProps<{
   nodeId: string
   inspectorId: string
   disableEdit?: boolean
+  disableDelete?: boolean
 }>(), {
   disableEdit: false,
 })
 
+const undeletableIds = ['getters']
+
 const { isExpanded, toggleCollapse } = useCollapse('inspector-state', props.id)
 // expand the root node by default
 !isExpanded.value && toggleCollapse()
@@ -21,6 +24,7 @@ createStateEditorContext({
   nodeId: props.nodeId!,
   inspectorId: props.inspectorId!,
   disableEdit: props.disableEdit,
+  disableDelete: undeletableIds.includes(props.id),
 })
 </script>
 

diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
@@ -181,7 +181,7 @@ const { isHovering } = useHover(() => containerRef.value)
             <span v-html="normalizedValue" />
           </span>
           <Actions
-            :hovering="isHovering" :disable-edit="state.disableEdit" :root-id="rootId"
+            :hovering="isHovering" :disable-edit="state.disableEdit" :root-id="rootId" :disable-delete="state.disableDelete"
             :data="data" :depth="depth" @enable-edit-input="toggleEditing"
             @add-new-prop="addNewProp"
           />
@@ -201,7 +201,7 @@ const { isHovering } = useHover(() => containerRef.value)
             </span>
             <Actions
               :show-add-if-needed="!draftingNewProp.enable" :root-id="rootId"
-              :hovering="isHovering" :data="data" :disable-edit="state.disableEdit"
+              :hovering="isHovering" :data="data" :disable-edit="state.disableEdit" :disable-delete="state.disableDelete"
               :depth="depth" @enable-edit-input="toggleEditing" @add-new-prop="addNewProp"
             />
           </template>

diff --git a/packages/client/src/composables/inspector.ts b/packages/client/src/composables/inspector.ts
@@ -4,6 +4,7 @@ interface StateEditorContext {
   nodeId: string
   inspectorId: string
   disableEdit: boolean
+  disableDelete: boolean
 }
 const StateEditorSymbolKey: InjectionKey<Ref<StateEditorContext>> = Symbol('StateEditorSymbol')