Form editor v2 (#579)

* Form editor v2

* fix template test

* setFormDefaults when save

* fix form cleaning dark mode

* improvements on open sidebar

* UI polish

* Fix change type button

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/global/EditableTag.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <component
+    :is="element"
     ref="parentRef"
     tabindex="0"
     :class="{
@@ -8,7 +9,7 @@
     }"
     class="relative"
     :style="{ height: editing ? divHeight + 'px' : 'auto' }"
-    @focus="startEditing"
+    @click="startEditing"
   >
     <slot
       v-if="!editing"
@@ -20,20 +21,20 @@
     </slot>
     <div
       v-if="editing"
-      class="absolute inset-0 border-2 transition-colors"
+      class="absolute inset-0 border rounded-md border-inset transition-colors"
       :class="{ 'border-transparent': !editing, 'border-blue-500': editing }"
     >
       <input
         ref="editInputRef"
         v-model="content"
-        class="absolute inset-0 focus:outline-none bg-white transition-colors"
+        class="absolute inset-0 focus:outline-none bg-white rounded-md transition-colors px-2"
         :class="[{ 'bg-blue-50': editing }, contentClass]"
         @blur="editing = false"
         @keyup.enter="editing = false"
         @input="handleInput"
       >
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup>
@@ -43,6 +44,7 @@ const props = defineProps({
   modelValue: { type: String, required: true },
   textAlign: { type: String, default: "left" },
   contentClass: { type: String, default: "" },
+  element: { type: String, default: 'div' }, // New prop for element type
 })
 
 const emit = defineEmits(['update:modelValue'])

client/components/global/Modal.vue

@@ -4,7 +4,7 @@
       <div
         v-if="show"
         ref="backdrop"
-        class="fixed z-30 top-0 inset-0 px-2 sm:px-4 flex items-top justify-center bg-gray-700/75 w-full h-screen overflow-y-scroll"
+        class="fixed z-40 top-0 inset-0 px-2 sm:px-4 flex items-top justify-center bg-gray-700/75 w-full h-screen overflow-y-scroll"
         :class="{ 'backdrop-blur-sm': backdropBlur }"
         @click.self="close"
       >

client/components/global/Settings/SettingsSection.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-show="isActive"
+    class="settings-section"
+  >
+    <h3 class="text-xl font-medium mb-1">
+      {{ name }}
+    </h3>
+    <slot />
+  </div>
+</template>
+  
+<script setup>
+import { inject, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    required: true
+  }
+})
+
+const activeSection = inject('activeSection', ref(''))
+const registerSection = inject('registerSection', () => {})
+const unregisterSection = inject('unregisterSection', () => {})
+
+const isActive = computed(() => activeSection.value === props.name)
+
+onMounted(() => {
+  registerSection(props.name, props.icon)
+})
+
+onBeforeUnmount(() => {
+  unregisterSection(props.name)
+})
+</script>

client/components/global/Settings/SettingsSubSection.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="mb-8 flex">
+    <div class="w-1/3 pr-8">
+      <h3 class="text-lg font-semibold mb-1">
+        {{ title }}
+      </h3>
+      <p class="text-sm text-gray-500">
+        {{ description }}
+      </p>
+    </div>
+    <div class="w-2/3">
+      <UCard class="divide-y divide-gray-200">
+        <slot />
+      </UCard>
+    </div>
+  </div>
+</template>
+  
+  <script setup>
+  defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    }
+  })
+  </script>

client/components/global/Settings/SettingsWrapper.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-grow h-full relative">
+    <!-- Sidebar -->
+    <nav class="w-64 flex-shrink-0 overflow-y-auto border-r p-4 sticky top-0 bg-gray-50">
+      <ul class="space-y-2">
+        <li
+          v-for="section in sections"
+          :key="section.name"
+        >
+          <UButton
+            :icon="section.icon"
+            :label="section.name"
+            :color="activeSection === section.name ? 'primary' : 'gray'"
+            :variant="activeSection === section.name ? 'soft' : 'ghost'"
+            class="w-full justify-start"
+          
+            @click="activeSection = section.name"
+          />
+        </li>
+      </ul>
+    </nav>
+
+    <!-- Main content -->
+    <div class="flex items-start h-full px-4 md:px-8 py-4 flex-grow">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide } from 'vue'
+
+const sections = ref([])
+const activeSection = ref('')
+
+const registerSection = (name, icon) => {
+  const existingIndex = sections.value.findIndex(section => section.name === name)
+  if (existingIndex !== -1) {
+    sections.value[existingIndex] = { name, icon }
+  } else {
+    sections.value.push({ name, icon })
+    if (sections.value.length === 1) {
+      activeSection.value = name
+    }
+  }
+}
+
+const unregisterSection = (name) => {
+  const index = sections.value.findIndex(section => section.name === name)
+  if (index !== -1) {
+    sections.value.splice(index, 1)
+    if (activeSection.value === name && sections.value.length > 0) {
+      activeSection.value = sections.value[0].name
+    }
+  }
+}
+
+// Provide active section and registration function to child components
+provide('activeSection', activeSection)
+provide('registerSection', registerSection)
+provide('unregisterSection', unregisterSection)
+</script>