Add delete buttons and bar add/create to sub-objects pane

static/components/ObjectShort.js

@@ -2,8 +2,8 @@ import { h } from 'vue';
 
 // One-line summary row with a drill-down chevron.
 export const ObjectShort = {
-    props: ['label', 'typeTag', 'focused', 'hasChildren', 'readOnly'],
-    emits: ['focus', 'drillDown'],
+    props: ['label', 'typeTag', 'focused', 'hasChildren', 'readOnly', 'deletable'],
+    emits: ['focus', 'drillDown', 'delete'],
     setup(props, { emit }) {
         return () => h('li', {
             class: ['se-object-item', props.focused ? 'focused' : null, props.readOnly ? 'read-only' : null],
@@ -11,6 +11,13 @@ export const ObjectShort = {
         }, [
             props.typeTag ? h('span', { class: 'se-object-type' }, props.typeTag) : null,
             h('span', { class: 'se-object-label' }, props.label),
+            props.deletable
+                ? h('button', {
+                    class: 'se-btn-delete',
+                    title: 'Delete',
+                    onClick: e => { e.stopPropagation(); emit('delete'); },
+                  }, '×')
+                : null,
             props.hasChildren
                 ? h('button', {
                     class: 'se-chevron',