Form Editor v2.5

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,50 +2,66 @@
   <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>
 </template>
 
 <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 =
-        this.form.errors.get(this.field) ??
-        (subErrorsKeys.length ? "This field has some errors:" : null)
+      let baseError
+        = this.form.errors.get(this.fieldId)
+        ?? (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(
-        (key) => {
-          return "<li>" + this.getSubError(key) + "</li>"
-        },
-      )}</ul>`
+      // Check if baseError starts with "The {field.name} field" and replace if necessary
+      console.log(this.fieldName, baseError,baseError.startsWith(`The ${this.fieldName} field`))
+      if (baseError.startsWith(`The ${this.fieldName} field`)) {
+        baseError = baseError.replace(`The ${this.fieldName} field`, 'This field')
+      }
+
+      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 }}
-      </label>
+      {{ content }}
     </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
-      v-if="!isHideTitle"
-      class="mb-4 px-2"
-      :class="{'mt-4':isEmbedPopup}"
-      v-text="form.title"
-    />
+    <template v-if="!isHideTitle">
+      <EditableTag
+        v-if="adminPreview"
+        v-model="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,15 +68,15 @@
           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"
         />
         <div
           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"