Add new dropdown search

app/components/ComponentModelStructureEditor.vue

@@ -7,6 +7,7 @@
       :piece-types="availablePieceTypes"
       :lock-type="lockRootType"
       :locked-type-label="displayedRootTypeLabel"
+      :allow-subcomponents="allowSubcomponents"
       is-root
     />
   </div>
@@ -43,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  allowSubcomponents: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -55,6 +60,7 @@ const { componentTypes, loadComponentTypes } = useComponentTypes()
 
 const availablePieceTypes = computed(() => pieceTypes.value ?? [])
 const availableComponentTypes = computed(() => componentTypes.value ?? [])
+const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
 
 const fallbackRootTypeLabel = computed(() => {
   if (!props.rootTypeId) {
@@ -156,4 +162,14 @@ onMounted(async () => {
   }
   syncRootType()
 })
+
+watch(
+  allowSubcomponents,
+  (allowed) => {
+    if (!allowed && Array.isArray(localStructure.subcomponents) && localStructure.subcomponents.length) {
+      localStructure.subcomponents = []
+    }
+  },
+  { immediate: true }
+)
 </script>