From 5d1b22115ed62db8d25afadf25eece8160fd281e Mon Sep 17 00:00:00 2001
From: Marius Heine <m.heine@geprog.com>
Date: Mon, 16 Dec 2024 15:12:52 +0100
Subject: [PATCH] sort components by name

---
 packages/former/src/components/FormAdd.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/former/src/components/FormAdd.vue b/packages/former/src/components/FormAdd.vue
index fb8cbb1..1d9e2aa 100644
--- a/packages/former/src/components/FormAdd.vue
+++ b/packages/former/src/components/FormAdd.vue
@@ -1,7 +1,7 @@
 <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="[i, component] in sortedComponents" :key="i" class="flex flex-col gap-2">
         <span>{{ component.label }}</span>
 
         <div
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { inject, provide } from '~/compositions/injectProvide';
 import { setDragEventData } from '~/utils';
 
@@ -35,6 +35,10 @@ const formId = inject('formId');
 provide('data', ref({}));
 provide('schema', ref([]));
 
+const sortedComponents = computed(() => {
+  return Object.entries(components).sort(([, componentA], [, componentB]) => componentA.label.localeCompare(componentB.label));
+});
+
 function startDrag(e: DragEvent, nodeType: string) {
   setDragEventData(e, formId.value, 'new_node_type', nodeType);
 }