feat: hide internal components in FormAdd (#88)

Author: mariusheine

packages/former/src/components/FormAdd.vue

@@ -1,19 +1,19 @@
 <template>
   <div v-if="mode === 'build'" class="flex flex-col gap-2">
     <div class="flex flex-col gap-4">
-      <div v-for="(component, i) in components" :key="i" class="flex flex-col gap-2">
+      <div v-for="[name, component] in relevantComponents" :key="name" class="flex flex-col gap-2">
         <span>{{ component.label }}</span>
 
         <div
           class="flex gap-2 w-full items-center cursor-move hover:bg-blue-100 dark:hover:bg-zinc-700"
           draggable="true"
-          @dragstart="startDrag($event, i as string)"
+          @dragstart="startDrag($event, name)"
         >
           <span class="drag-handle p-2">::</span>
 
           <div class="flex flex-grow flex-col border dark:border-zinc-400 rounded p-2 gap-2">
             <div class="pointer-events-none">
-              <component :is="component.component" :id="i" :model-value="undefined" :mode>
+              <component :is="component.component" :id="name" :model-value="undefined" :mode>
                 <slot />
               </component>
             </div>
@@ -39,4 +39,6 @@ provide('schema', ref([]));
 function startDrag(e: DragEvent, nodeType: string) {
   setDragEventData(e, formId.value, 'new_node_type', nodeType);
 }
+
+const relevantComponents = Object.entries(components).filter(([, { internal }]) => !internal);
 </script>

packages/former/src/types.ts

@@ -35,6 +35,7 @@ export type FormFieldType = {
   label: string;
   propsSchema: SchemaNode[];
   component: FormFieldComponent | Raw<FormFieldComponent>;
+  internal?: boolean;
 };
 
 export type FormComponents = { [key: string]: FormFieldType };