Form Editor v2.5 (#599)

* Form Editor v2.5

* Remove log debug

---------

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

client/components/forms/FileInput.vue

@@ -19,6 +19,7 @@
     </div>
     <div
       v-else
+      :style="inputStyle"
       class="flex flex-col w-full items-center justify-center transition-colors duration-40"
       :class="[
         {'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
@@ -29,12 +30,18 @@
         theme.fileInput.spacing.horizontal,
         theme.fileInput.spacing.vertical,
         theme.fileInput.fontSize,
-        theme.fileInput.minHeight
+        theme.fileInput.minHeight,
+        {'border-red-500 border-2':hasError},
+        'focus:outline-none focus:ring-2'
       ]"
+      tabindex="0"
+      role="button"
+      :aria-label="multiple ? 'Choose files or drag here' : 'Choose a file or drag here'"
       @dragover.prevent="uploadDragoverEvent=true"
       @dragleave.prevent="uploadDragoverEvent=false"
       @drop.prevent="onUploadDropEvent"
       @click="openFileUpload"
+      @keydown.enter.prevent="openFileUpload"
     >
       <div class="flex w-full items-center justify-center">
         <div

client/components/forms/TextAreaInput.vue

@@ -19,7 +19,7 @@
           '!cursor-not-allowed !bg-gray-200': disabled,
         },
       ]"
-      class="resize-y"
+      class="resize-y block"
       :name="name"
       :style="inputStyle"
       :placeholder="placeholder"
@@ -63,7 +63,6 @@ export default {
   props: {
     ...inputProps,
     maxCharLimit: {type: Number, required: false, default: null},
-    showCharLimit: {type: Boolean, required: false, default: false},
   },
 
   setup(props, context) {

client/components/forms/TextInput.vue

@@ -31,6 +31,8 @@
       :maxlength="maxCharLimit"
       @change="onChange"
       @keydown.enter.prevent="onEnterPress"
+      @focus="onFocus"
+      @blur="onBlur"
     >
 
     <template
@@ -74,7 +76,6 @@ export default {
     max: {type: Number, required: false, default: null},
     autocomplete: {type: [Boolean, String, Object], default: null},
     maxCharLimit: {type: Number, required: false, default: null},
-    showCharLimit: {type: Boolean, required: false, default: false},
     pattern: {type: String, default: null},
   },
 

client/components/forms/components/InputLabel.vue

@@ -4,7 +4,7 @@
     class="input-label"
     :class="[
       theme.default.label,
-      { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels },
+      { 'uppercase text-xs': uppercaseLabels, 'text-sm/none': !uppercaseLabels },
     ]"
   >
     <slot>

client/components/forms/components/InputWrapper.vue

@@ -45,7 +45,8 @@
       <has-error
         v-if="hasValidation && form"
         :form="form"
-        :field="name"
+        :field-id="name"
+        :field-name="label"
       />
     </slot>
   </div>

client/components/forms/components/VSelect.vue

@@ -10,7 +10,11 @@
       :class="[
         theme.SelectInput.input,
         theme.SelectInput.borderRadius,
-        { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled },
+        { 
+          '!ring-red-500 !ring-2 !border-transparent': hasError, 
+          '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled,
+          'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError
+        },
         inputClass
       ]"
     >
@@ -19,12 +23,14 @@
         aria-haspopup="listbox"
         aria-expanded="true"
         aria-labelledby="listbox-label"
-        class="cursor-pointer w-full flex-grow relative"
+        class="cursor-pointer w-full flex-grow relative focus:outline-none"
         :class="[
           theme.SelectInput.spacing.horizontal,
           theme.SelectInput.spacing.vertical
         ]"
         @click="toggleDropdown"
+        @focus="onFocus"
+        @blur="onBlur"
       >
         <div
           class="flex items-center"
@@ -237,12 +243,13 @@ export default {
     allowCreation: {type: Boolean, default: false},
     disabled: {type: Boolean, default: false}
   },
-  emits: ['update:modelValue', 'update-options'],
+  emits: ['update:modelValue', 'update-options', 'focus', 'blur'],
   data() {
     return {
       isOpen: false,
       searchTerm: '',
-      defaultValue: this.modelValue ?? null
+      defaultValue: this.modelValue ?? null,
+      isFocused: false
     }
   },
   computed: {
@@ -311,11 +318,26 @@ export default {
       }
       return this.modelValue === value
     },
+    onFocus(event) {
+      this.isFocused = true
+      this.$emit('focus', event)
+    },
+
+    onBlur(event) {
+      this.isFocused = false
+      this.$emit('blur', event)
+    },
+
     toggleDropdown() {
       if (this.disabled) {
         this.isOpen = false
       } else {
         this.isOpen = !this.isOpen
+        if (this.isOpen) {
+          this.onFocus()
+        } else {
+          this.onBlur()
+        }
       }
       if (!this.isOpen) {
         this.searchTerm = ''

client/components/forms/useFormInput.js

@@ -88,6 +88,14 @@ export function useFormInput(props, context, options = {}) {
     return wrapperProps
   })
 
+  const onFocus = (event) => {
+    context.emit('focus', event)
+  }
+
+  const onBlur = (event) => {
+    context.emit('blur', event)
+  }
+
   // Watch for changes in props.modelValue and update the local content
   watch(
     () => props.modelValue,
@@ -104,5 +112,7 @@ export function useFormInput(props, context, options = {}) {
     hasValidation,
     hasError,
     inputWrapperProps,
+    onFocus,
+    onBlur,
   }
 }

client/components/forms/validation/HasError.vue

@@ -2,7 +2,7 @@
   <transition name="fade">
     <div
       v-if="errorMessage"
-      class="has-error text-sm text-red-500 -bottom-3"
+      class="has-error text-xs text-red-500 mt-1"
       v-html="errorMessage"
     />
   </transition>
@@ -10,42 +10,57 @@
 
 <script>
 export default {
-  name: "HasError",
+  name: 'HasError',
   props: {
     form: {
       type: Object,
       required: true,
     },
-    field: {
+    fieldId: {
       type: String,
       required: true,
     },
+    fieldName: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     errorMessage() {
-      if (!this.form || !this.form.errors || !this.form.errors.any())
+      if (!this.form.errors || !this.form.errors.any())
         return null
       const subErrorsKeys = Object.keys(this.form.errors.all()).filter(
         (key) => {
-          return key.startsWith(this.field) && key !== this.field
+          return key.startsWith(this.fieldId) && key !== this.fieldId
         },
       )
-      const baseError =
+      let baseError
-        this.form.errors.get(this.field) ??
+        = this.form.errors.get(this.fieldId)
-        (subErrorsKeys.length ? "This field has some errors:" : null)
+        ?? (subErrorsKeys.length ? 'This field has some errors:' : null)
       // If no error and no sub errors, return
-      if (!baseError) return null
+      if (!baseError)
+        return null
 
-      return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map(
+      // Check if baseError starts with "The {field.name} field" and replace if necessary
-        (key) => {
+      if (baseError.startsWith(`The ${this.fieldName} field`)) {
-          return "<li>" + this.getSubError(key) + "</li>"
+        baseError = baseError.replace(`The ${this.fieldName} field`, 'This field')
-        },
+      }
-      )}</ul>`
+
+      const coreError = `<p class='text-red-500'>${baseError}</p>`
+      if (subErrorsKeys.length) {
+        return coreError + `<ul class='list-disc list-inside'>${subErrorsKeys.map(
+          (key) => {
+            return `<li>${this.getSubError(key)}</li>`
+          },
+        )}</ul>`
+      }
+
+      return coreError
     },
   },
   methods: {
     getSubError(subErrorKey) {
-      return this.form.errors.get(subErrorKey).replace(subErrorKey, "item")
+      return this.form.errors.get(subErrorKey).replace(subErrorKey, 'item')
     },
   },
 }

client/components/global/EditableTag.vue

@@ -15,9 +15,7 @@
       v-if="!editing"
       :content="content"
     >
-      <label class="cursor-pointer truncate w-full">
+      {{ content }}
-        {{ content }}
-      </label>
     </slot>
     <div
       v-if="editing"
@@ -55,7 +53,11 @@ const divHeight = ref(0)
 const parentRef = ref(null) // Ref for parent element
 const editInputRef = ref(null) // Ref for edit input element
 
-const startEditing = () => {
+const startEditing = (event) => {
+  if (editing.value || (event.type === 'keydown' && event.target !== parentRef.value)) {
+    return
+  }
+
   if (parentRef.value) {
     divHeight.value = parentRef.value.offsetHeight
     editing.value = true

client/components/open/forms/OpenCompleteForm.vue

@@ -10,12 +10,19 @@
       :href="getFontUrl"
     >
     
-    <h1
+    <template v-if="!isHideTitle">
-      v-if="!isHideTitle"
+      <EditableTag
-      class="mb-4 px-2"
+        v-if="adminPreview"
-      :class="{'mt-4':isEmbedPopup}"
+        v-model="form.title"
-      v-text="form.title"
+        element="h1"
-    />
+        class="mb-2"
+      />
+      <h1
+        v-else
+        class="mb-2 px-2"
+        v-text="form.title"
+      />
+    </template>
 
     <div v-if="isPublicFormPage && form.is_password_protected">
       <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">

client/components/open/forms/OpenForm.vue

@@ -88,7 +88,7 @@
         />
         <has-error
           :form="dataForm"
-          field="h-captcha-response"
+          field-id="h-captcha-response"
         />
       </div>
     </template>

client/components/open/forms/OpenFormField.vue

@@ -19,7 +19,7 @@
     >
       <div
         v-if="adminPreview"
-        class="absolute translate-y-full lg:translate-y-0 -bottom-1.5 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
+        class="absolute translate-y-full lg:translate-y-0 -bottom-1 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
       >
         <div
           class="flex lg:flex-col bg-gray-100 dark:bg-gray-800 border rounded-md"
@@ -68,7 +68,7 @@
           v-if="field.type === 'nf-text' && field.content"
           :id="field.id"
           :key="field.id"
-          class="nf-text w-full mb-3"
+          class="nf-text w-full my-1.5"
           :class="[getFieldAlignClasses(field)]"
           v-html="field.content"
         />
@@ -76,7 +76,7 @@
           v-if="field.type === 'nf-code' && field.content"
           :id="field.id"
           :key="field.id"
-          class="nf-code w-full px-2 mb-3"
+          class="nf-code w-full px-2 my-1.5"
           v-html="field.content"
         />
         <div
@@ -91,6 +91,7 @@
           :key="field.id"
           class="my-4 w-full px-2"
           :class="[getFieldAlignClasses(field)]"
+          @dblclick="editFieldOptions"
         >
           <div
             v-if="!field.image_block"
@@ -115,7 +116,7 @@
         class="hidden group-hover/nffield:flex translate-x-full absolute right-0 top-0 h-full w-5 flex-col justify-center pl-1 pt-3"
       >
         <div
-          class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle"
+          class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle min-h-[40px]"
         >
           <Icon
             name="clarity:drag-handle-line"

client/components/open/forms/components/FormEditor.vue

@@ -4,6 +4,13 @@
     id="form-editor"
     class="relative flex w-full flex-col grow max-h-screen"
   >
+    <!-- Loading overlay -->
+    <div
+      v-if="updateFormLoading"
+      class="absolute inset-0 bg-white bg-opacity-70 z-50 flex items-center justify-center"
+    >
+      <loader class="h-6 w-6 text-blue-500" />
+    </div>
     <div
       class="border-b bg-white md:hidden fixed inset-0 w-full z-50 flex flex-col items-center justify-center"
     >
@@ -175,6 +182,7 @@ export default {
 
   mounted() {
     this.$emit("mounted")
+    this.workingFormStore.activeTab = 0
     useAmplitude().logEvent('form_editor_viewed')
     this.appStore.hideNavbar()
     if (!this.isEdit) {
@@ -292,6 +300,8 @@ export default {
               slug: this.createdFormSlug,
               new_form: response.users_first_form,
             },
+          }).then(() => {
+            this.updateFormLoading = false
           })
         })
         .catch((error) => {
@@ -304,8 +314,6 @@ export default {
             )
             captureException(error)
           }
-        })
-        .finally(() => {
           this.updateFormLoading = false
         })
     },

client/components/open/forms/components/FormEditorNavbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full border-b p-2 flex gap-x-3 items-center bg-white">
+  <div class="w-full border-b p-2 flex gap-x-2 items-center bg-white">
     <a
       v-if="backButton"
       href="#"
@@ -13,38 +13,39 @@
     </a>
 
 
-    <EditableTag
+    <UTabs
-      v-model="form.title"
+      id="form-editor-navbar-tabs"
-      element="h3"
+      v-model="activeTab"
-      class="font-medium py-1 text-md w-48 text-gray-500 truncate"
+      :items="[
+        { label: 'Build' },
+        { label: 'Design'},
+        { label: 'Settings'}
+      ]"
     />
 
-    <UBadge
-      v-if="form.visibility == 'draft'"
-      color="yellow"
-      variant="soft"
-      label="Draft"
-    />
-    <UBadge
-      v-else-if="form.visibility == 'closed'"
-      color="gray"
-      variant="soft"
-      label="Closed"
-    />
-
-    <UndoRedo />
-
     <div class="flex-grow flex justify-center">
-      <UTabs
+      <EditableTag
-        v-model="activeTab"
+        id="form-editor-title"
-        :items="[
+        v-model="form.title"
-          { label: 'Build' },
+        element="h3"
-          { label: 'Design'},
+        class="font-medium py-1 text-md w-48 text-gray-500 truncate form-editor-title"
-          { label: 'Settings'}
+      />
-        ]"
+      <UBadge
+        v-if="form.visibility == 'draft'"
+        color="yellow"
+        variant="soft"
+        label="Draft"
+      />
+      <UBadge
+        v-else-if="form.visibility == 'closed'"
+        color="gray"
+        variant="soft"
+        label="Closed"
       />
     </div>
 
+    <UndoRedo />
+
     <div
       class="flex items-stretch gap-x-2"
     >

client/components/open/forms/components/FormFieldsEditor.vue

@@ -52,7 +52,7 @@
 
               <UTooltip :text="element.hidden ? 'Show Block' : 'Hide Block'">
                 <button
-                  class="hidden cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
+                  class="hidden !cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
                   :class="{
                     'text-gray-300 hover:text-blue-500 md:group-hover:flex': !element.hidden,
                     'text-gray-300 hover:text-gray-500 md:flex': element.hidden,

client/components/open/forms/components/form-components/AddFormBlock.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div class="py-2 px-4">
-      <p class="text-sm font-medium my-2">
+      <p class="text-gray-500 text-xs font-medium my-2">
         Input Blocks
       </p>
       <draggable
@@ -34,7 +34,7 @@
       >
         <template #item="{element}">
           <div
-            class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2"
+            class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2 group"
             role="button"
             @click.prevent="addBlock(element.name)"
           >

client/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -22,7 +22,7 @@
         <div class="bg-red-500 rounded-full w-2.5 h-2.5" />
         <div class="bg-yellow-500 rounded-full w-2.5 h-2.5" />
         <div class="bg-green-500 rounded-full w-2.5 h-2.5" />
-        <p class="text-sm text-gray-500/70 text-sm ml-4">
+        <p class="text-sm text-gray-500/70 text-sm ml-4 select-none">
           Form Preview
         </p>
         <div class="flex-grow" />

client/components/open/forms/components/templates/QuestionsEditor.vue

@@ -99,7 +99,7 @@
     <has-error
       v-if="hasValidation"
       :form="form"
-      :field="name"
+      :field-id="name"
     />
   </div>
 </template>

client/components/open/forms/fields/components/BlockOptions.vue

@@ -53,7 +53,7 @@
 
     <div
       v-if="field.type == 'nf-text'"
-      class="border-t py-2"
+      class="border-t mt-4"
     >
       <rich-text-area-input
         class="mx-4"
@@ -85,7 +85,7 @@
 
     <div
       v-else-if="field.type == 'nf-image'"
-      class="border-t py-2"
+      class="border-t mt-4"
     >
       <image-input
         name="image_block"

client/components/open/forms/fields/components/HiddenRequiredDisabled.vue

@@ -7,7 +7,7 @@
       :class="[
         option.class ? (typeof option.class === 'function' ? option.class(isSelected(option.name)) : option.class) : {},
         {
-          'border-blue-500': isSelected(option.name),
+          'border-blue-500 bg-blue-50': isSelected(option.name),
           'hover:bg-gray-100 border-gray-300': !isSelected(option.name)
         }
       ]"

client/lib/forms/themes/form-themes.js

@@ -5,9 +5,9 @@ export const themes = {
   default: {
     default: {
       wrapper: {
-        sm: 'relative mb-2',
+        sm: 'relative my-1',
-        md: 'relative mb-3',
+        md: 'relative my-1.5',
-        lg: 'relative mb-3',
+        lg: 'relative my-1.5',
       },
       label: 'text-gray-700 dark:text-gray-300 font-medium',
       input:
@@ -156,9 +156,9 @@ export const themes = {
   simple: {
     default: {
       wrapper: {
-        sm: 'relative mb-2',
+        sm: 'relative my-1',
-        md: 'relative mb-3',
+        md: 'relative my-1.5',
-        lg: 'relative mb-3',
+        lg: 'relative my-1.5',
       },
       label: 'text-gray-700 dark:text-gray-300 font-medium',
       input:
@@ -301,9 +301,9 @@ export const themes = {
   notion: {
     default: {
       wrapper: {
-        sm: 'relative mb-2',
+        sm: 'relative my-1',
-        md: 'relative mb-3',
+        md: 'relative my-1.5',
-        lg: 'relative mb-3',
+        lg: 'relative my-1.5',
       },
       label: 'text-gray-900 dark:text-gray-100 mb-1 block mt-4',
       input:

client/scss/app.scss

@@ -23,7 +23,7 @@ body.dark * {
   }
 
   h1 {
-    @apply text-3xl sm:text-4xl font-semibold;
+    @apply text-2xl sm:text-3xl font-extrabold;
   }
 
   h2 {

client/stores/working_form.js

@@ -73,6 +73,14 @@ export const useWorkingFormStore = defineStore("working_form", {
     },
 
     prefillDefault(data) {
+      // If a field already has this name, we need to make it unique with a number at the end
+      let baseName = data.name
+      let counter = 1
+      while (this.content.properties.some(prop => prop.name === data.name)) {
+        counter++
+        data.name = `${baseName} ${counter}`
+      }
+      
       if (data.type === "nf-text") {
         data.content = "<p>This is a text block.</p>"
       } else if (data.type === "nf-page-break") {