-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
CustomInspectorSelectedNodePane.vue
107 lines (94 loc) · 2.5 KB
/
CustomInspectorSelectedNodePane.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<script lang="ts">
import EmptyPane from '@front/features/layout/EmptyPane.vue'
import { watch, defineComponent, ref } from 'vue'
import { BridgeEvents } from '@vue-devtools/shared-utils'
import { useBridge } from '@front/features/bridge'
import { useCurrentInspector } from './composable'
import StateInspector from '../StateInspector.vue'
export default defineComponent({
components: {
StateInspector,
EmptyPane,
},
setup () {
const {
currentInspector: inspector,
filteredState,
refreshState,
editState,
} = useCurrentInspector()
watch(() => inspector.value?.selectedNodeId, value => {
if (value && !inspector.value.state) {
refreshState()
}
})
const stateInspector = ref(null)
watch(() => inspector.value?.selectedNodeId, () => {
if (stateInspector.value?.$el) {
stateInspector.value.$el.scrollTop = 0
}
})
// Custom actions
const {
bridge,
} = useBridge()
function executeCustomAction (index: number) {
bridge.send(BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_ACTION, {
inspectorId: inspector.value.id,
appId: inspector.value.appId,
actionIndex: index,
actionType: 'nodeActions',
args: [
inspector.value.selectedNodeId,
],
})
}
return {
inspector,
filteredState,
editState,
stateInspector,
executeCustomAction,
}
},
})
</script>
<template>
<div
v-if="inspector.selectedNode"
class="h-full flex flex-col"
>
<div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-700 flex items-center flex-none">
<div>
{{ inspector.selectedNode.label }}
</div>
<VueInput
v-model="inspector.stateFilter"
icon-left="search"
:placeholder="inspector.stateFilterPlaceholder || 'Filter state...'"
class="search flex-1 flat ml-2"
/>
<VueButton
v-for="(action, index) of inspector.nodeActions"
:key="index"
v-tooltip="action.tooltip"
class="icon-button flat"
:icon-left="action.icon"
@click="executeCustomAction(index)"
/>
</div>
<StateInspector
v-if="inspector.state"
ref="stateInspector"
:state="filteredState"
class="flex-1 overflow-y-auto"
@edit-state="editState"
/>
</div>
<EmptyPane
v-else-if="inspector.noSelectionText"
:icon="inspector.icon"
>
{{ inspector.noSelectionText }}
</EmptyPane>
</template>