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/open/editors/EditorRightSidebar.vue

@@ -3,7 +3,8 @@
     <div
       v-if="show"
       ref="sidebar"
-      class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-30"
+      :class="widthClass"
+      class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll  flex-shrink-0 z-30"
     >
       <slot />
     </div>
@@ -11,14 +12,18 @@
 </template>
 
 <script setup>
-import { slideRight, useMotion } from "@vueuse/motion"
-import { watch } from "vue"
+import { slideRight, useMotion } from '@vueuse/motion'
+import { watch } from 'vue'
 
 const props = defineProps({
   show: {
     type: Boolean,
     default: false,
   },
+  widthClass: {
+    type: String,
+    default: 'md:max-w-[20rem]',
+  },
 })
 
 const sidebar = ref(null)

client/components/open/editors/UndoRedo.vue

@@ -2,6 +2,7 @@
   <UButtonGroup
     size="sm"
     orientation="horizontal"
+    class="shadow-none"
   >
     <UTooltip 
       text="Undo" 
@@ -12,7 +13,7 @@
         :disabled="!canUndo"
         color="white"
         icon="i-material-symbols-undo"
-        class="disabled:text-gray-500"
+        class="disabled:text-gray-500 shadow-none"
         @click="undo"
       />
     </UTooltip>
@@ -25,7 +26,7 @@
         :disabled="!canRedo"
         icon="i-material-symbols-redo"
         color="white"
-        class="disabled:text-gray-500"
+        class="disabled:text-gray-500 shadow-none"
         @click="redo"
       />
     </UTooltip>