Add new dropdown search

app/components/StructureNodeEditor.vue

@@ -175,7 +175,7 @@
           </div>
         </section>
 
-        <section class="space-y-3">
+        <section v-if="allowSubcomponents" class="space-y-3">
           <div class="flex items-center justify-between gap-2">
             <h4 :class="headingClass">Sous-composants</h4>
             <button type="button" class="btn btn-outline btn-xs" @click="addSubComponent">
@@ -197,6 +197,7 @@
               :depth="depth + 1"
               :component-types="componentTypes"
               :piece-types="pieceTypes"
+              :allow-subcomponents="allowSubcomponents"
               @remove="removeSubComponent(index)"
             />
           </div>
@@ -233,6 +234,7 @@ const props = withDefaults(defineProps<{
   isRoot?: boolean
   lockType?: boolean
   lockedTypeLabel?: string
+  allowSubcomponents?: boolean
 }>(), {
   depth: 0,
   componentTypes: () => [],
@@ -240,12 +242,14 @@ const props = withDefaults(defineProps<{
   isRoot: false,
   lockType: false,
   lockedTypeLabel: '',
+  allowSubcomponents: true,
 })
 
 const emit = defineEmits(['remove'])
 
 const componentTypes = computed(() => props.componentTypes ?? [])
 const pieceTypes = computed(() => props.pieceTypes ?? [])
+const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
 
 const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
 const containerClass = computed(() => {
@@ -454,6 +458,9 @@ const removePiece = (index: number) => {
 }
 
 const addSubComponent = () => {
+  if (!allowSubcomponents.value) {
+    return
+  }
   ensureArray('subcomponents')
   props.node.subcomponents.push({
     typeComposantId: '',
@@ -470,6 +477,16 @@ const removeSubComponent = (index: number) => {
   props.node.subcomponents.splice(index, 1)
 }
 
+watch(
+  allowSubcomponents,
+  (allowed) => {
+    if (!allowed && Array.isArray(props.node.subcomponents) && props.node.subcomponents.length) {
+      props.node.subcomponents.splice(0, props.node.subcomponents.length)
+    }
+  },
+  { immediate: true }
+)
+
 watch(componentTypes, () => {
   syncComponentType(props.node)
 }, { deep: true, immediate: true })