@iqual/nuxt-icms 1.4.10 → 1.5.1

package/components/Drupal/Webform/index.vue

@@ -1,200 +1,472 @@
 <template>
-  <div :class="themedClass('wrapperClass')">
-    <Transition name="fade">
-      <div
-        v-if="!submitted && !showThankYou && !showError"
-        :class="themedClass('formWrapperClass')"
-      >
-        <FormKit
-          type="form"
-          :actions="false"
-          :messages-class="themedClass('messagesClass', 'mt-2')"
-          :incomplete-message="
-            $texts(
-              'webform.submission_validation_incomplete',
-              'Please fill in all required fields.',
-            )
-          "
-          use-local-storage
-          @submit="submitWebform"
-        >
-          <div
-            v-for="formElement in formDefinition?.elements"
-            :key="formElement?.metadata?.key"
-            :class="themedClass('elementWrapperClass')"
-          >
-            <NuxtTurnstile
-              v-model="token"
-              v-if="formElement?.metadata?.key === 'actions'"
-            />
-
-            <component
-              v-if="formElement?.metadata?.type"
-              :is="getComponent(formElement?.metadata?.type)"
-              :formElement="formElement"
-              :class="themedClass('elementClass')"
-            />
-          </div>
-        </FormKit>
-      </div>
-    </Transition>
-
-    <Transition name="fade">
-      <div
-        v-if="showThankYou"
-        :class="
-          themedClass(
-            'successMessageClass',
-            'border-success-500 text-success-500 mb-4 rounded-lg border px-6 py-4',
-          )
-        "
-      >
-        <p>
-          {{
-            $texts(
-              'webform.submission_success',
-              'Thank you for submitting the webform.',
-            )
-          }}
-        </p>
-      </div>
-    </Transition>
+  <div :class="themedClass('containerClass')">
+    <UForm
+      :class="themedClass('formClass', 'space-y-4')"
+      :schema="schema"
+      :state="state"
+      @submit="onSubmit"
+      @error="console.log"
+      noValidate
+    >
+      
+      <DesignSystemAtomsButton 
+        v-if="debug" 
+        @click="console.log(schema.safeParse(state))""
+        label="Debug Schema"
+      />
 
-    <Transition name="fade">
       <div
-        v-if="showError"
-        :class="
-          themedClass(
-            'errorMessageClass',
-            'border-error-500 text-error-500 mb-4 rounded-lg border px-6 py-4',
-          )
-        "
+        v-for="formElement in formElements"
+        :key="formElement?.metadata?.key"
+        :class="themedClass('elementWrapperClass')"
       >
-        <p>
-          {{
-            $texts(
-              'webform.submission_error',
-              'There was an error submitting the webform. Please try again.',
-            )
-          }}
-        </p>
+        <!-- <NuxtTurnstile
+          v-model="token"
+          v-if="formElement?.metadata?.key === 'actions'"
+        /> -->
+        
+        <component
+          v-if="formElement?.metadata?.type"
+          :is="getComponent(formElement?.metadata?.type)"
+          :formElement="formElement"
+          v-model="state[formElement.metadata && formElement.metadata.key ? formElement.metadata.key : '']"
+          :class="themedClass('elementClass')"
+          :debug="debug"
+        />
       </div>
-    </Transition>
+      <DesignSystemAtomsButton 
+        v-if="debug" 
+        @click="console.log(schema.safeParse(state))"
+        label="Debug Schema"
+        :buttonStyle="'focus'"
+      />
+    </UForm>
   </div>
 </template>
 
 <script lang="ts" setup>
-import TextInput from '@iqual/nuxt-icms/components/Form/TextInput.vue'
-import TextAreaInput from '@iqual/nuxt-icms/components/Form/TextAreaInput.vue'
-import SelectInput from '@iqual/nuxt-icms/components/Form/SelectInput.vue'
-import CheckboxInput from '@iqual/nuxt-icms/components/Form/CheckboxInput.vue'
-import CheckboxInputs from '@iqual/nuxt-icms/components/Form/CheckboxInputs.vue'
-import RadioButtonsInput from '@iqual/nuxt-icms/components/Form/RadioButtonsInput.vue'
-import FileUploadInput from '@iqual/nuxt-icms/components/Form/FileUploadInput.vue'
-import TextEmailInput from '@iqual/nuxt-icms/components/Form/TextEmailInput.vue'
-import TextPhoneInput from '@iqual/nuxt-icms/components/Form/TextPhoneInput.vue'
-import WebformMarkup from '@iqual/nuxt-icms/components/Form/WebformMarkup.vue'
-import SubmitButton from '@iqual/nuxt-icms/components/Form/SubmitButton.vue'
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import {
+  FormTextInput,
+  FormTextAreaInput,
+  FormSelectInput,
+  FormCheckboxInput,
+  FormCheckboxInputs,
+  FormRadioButtonsInput,
+  FormFileInput,
+  FormTextEmailInput,
+  FormTextPhoneInput,
+  FormWebformMarkup,
+  FormSubmitButton,
+  FormHiddenInput,
+} from '#components'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type {
+  FormElementPreprocessor,
+  SubmissionPreprocessor,
+  WebformElement,
+} from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useDrupalMessages } from '@iqual/nuxt-icms/composables/useDrupalMessages'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-interface FormData {
-  [fieldName: string]:
-    | string
-    | number
-    | boolean
-    | File
-    | string[]
-    | null
-    | undefined
-}
-
+const { $texts } = useNuxtApp()
 const themedClass = useTheme('DrupalWebform')
+const { messages } = useDrupalMessages()
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   formId: string
-  wrapperClass: string
-  formWrapperClass: string
-  messagesClass: string
-  elementWrapperClass: string
-  elementClass: string
-}>()
-
-const { $texts } = useNuxtApp()
+  formElementPreprocessor?: FormElementPreprocessor
+  submissionPreprocessor?: SubmissionPreprocessor
+  debug?: boolean
+  containerClass?: string
+  formClass?: string
+  colorScheme?: ColorScheme
+  floatingLabels?: boolean
+}>(), {
+  floatingLabels: true,
+})
 
-const submitted = ref(false)
-const showThankYou = ref(false)
-const showError = ref(false)
+// Init a state object that will hold
+const state = ref<Record<string, any>>({})
 
+// Asynchronously get the form definition
 const queryKey = `drupalWebform-${props?.formId || '0'}`
-
 const { data: formDefinition } = await useAsyncData(queryKey, async () => {
   return await useGraphqlQuery('webformById', { id: props?.formId }).then(
     (v) => v?.data?.webformById || { elements: [] },
   )
 })
 
-async function submitWebform(data: FormData) {
+const formElements = computed<WebformElement[]>(() => {
+  const elements = (formDefinition.value?.elements ?? []) as WebformElement[]
+
+  return elements.map((element) => {
+    const preprocessedElement =
+      props.formElementPreprocessor?.({
+        formElement: element,
+        formId: props.formId,
+      }) ?? element
+
+    return preprocessedElement
+  })
+})
+
+// Compute a dynamic Zod validation schema based on form definition
+const schema = computed(() => {
+  const shape: Record<string, any> = {}
+
+  formElements.value.forEach((el: WebformElement) => {
+    const metadata = el.metadata
+    const key = metadata?.key
+    const type = metadata?.type
+    const multiple = metadata?.multiple
+    const required = metadata?.required
+
+    if (
+      !key ||
+      typeof type !== 'string' ||
+      ['webform_actions', 'webform_markup', 'processed_text'].includes(type)
+    )
+      return
+
+    let validator: any
+
+    switch (type) {
+      case 'textfield':
+      case 'textarea':
+      case 'email':
+      case 'tel':
+        validator = z.string()
+
+        if (type === 'email') {
+          validator = validator.email(
+            $texts('webform_validation.email', 'Invalid email.'),
+          )
+        }
+
+        if (el.minlength) validator = validator.min(el.minlength)
+        if (el.maxlength) validator = validator.max(el.maxlength)
+        if (el.pattern?.rule)
+          validator = validator.regex(
+            new RegExp(el.pattern.rule),
+            el.pattern.message,
+          )
+
+        if (required) {
+          validator = validator.min(
+            1,
+            metadata?.requiredError ||
+              $texts('webform_validation.required', 'Required'),
+          )
+        } else {
+          validator = validator.optional().or(z.literal(''))
+        }
+        break
+
+      case 'hidden':
+        validator = z.union([z.string(), z.number(), z.boolean()])
+        if (!required) {
+          validator = validator.optional().or(z.literal(''))
+        }
+        break
+
+      case 'select':
+        if (multiple) {
+          validator = z.array(z.string())
+          if (required)
+            validator = validator.min(
+              1,
+              metadata?.requiredError ||
+                $texts('webform_validation.required', 'Required'),
+            )
+        } else {
+          validator = z.string()
+          if (required)
+            validator = validator.min(
+              1,
+              metadata?.requiredError ||
+                $texts('webform_validation.required', 'Required'),
+            )
+          else validator = validator.optional().or(z.literal(''))
+        }
+        break
+
+      case 'checkbox':
+        validator = z.boolean()
+        if (required) {
+          validator = validator.refine((val: boolean) => val === true, {
+            message:
+              metadata?.requiredError ||
+              $texts(
+                'webform_validation.checkbox_required',
+                'You must check this box',
+              ),
+          })
+        }
+        break
+
+      case 'checkboxes':
+        validator = z.array(z.string())
+        if (required) {
+          validator = validator.min(
+            1,
+            metadata?.requiredError ||
+              $texts(
+                'webform_validation.checkboxes_radios_required',
+                'Select at least one option',
+              ),
+          )
+        }
+        break
+
+      case 'radios':
+        validator = z.string()
+        if (required) {
+          validator = validator.min(
+            1,
+            metadata?.requiredError ||
+              $texts('webform_validation.required', 'Required'),
+          )
+        } else {
+          validator = validator.optional().or(z.literal(''))
+        }
+        break
+
+      case 'entity_autocomplete':
+        validator = z.string()
+        if (required) {
+          validator = validator.min(
+            1,
+            metadata?.requiredError ||
+              $texts('webform_validation.required', 'Required'),
+          )
+        } else {
+          validator = validator.optional().or(z.literal(''))
+        }
+        break
+
+      case 'managed_file':
+      case 'webform_image_file':
+      case 'webform_document_file':
+        validator = z.any()
+
+        if (multiple) {
+          validator = z.array(z.any())
+          if (required)
+            validator = validator.min(
+              1,
+              metadata?.requiredError ||
+                $texts('webform_validation.required', 'Required'),
+            )
+        } else {
+          if (required) {
+            validator = z.instanceof(File, {
+              message:
+                metadata?.requiredError ||
+                $texts('webform_validation.required', 'Required'),
+            })
+          } else {
+            validator = z.any().optional().nullable()
+          }
+        }
+
+        if (el.maxFilesize) {
+          const max = el.maxFilesize
+          validator = validator.refine(
+            (val: File | File[] | null | undefined) => {
+              if (!val) return true
+              const files = Array.isArray(val) ? val : [val]
+              return files.every(
+                (file) => file instanceof File && file.size <= max,
+              )
+            },
+            {
+              message:
+                $texts(
+                  'webform_validation.file_max_size',
+                  'File too large. Max size:',
+                ) + `${max / 1024 / 1024}MB`,
+            },
+          )
+        }
+        break
+    }
+
+    if (!validator)
+      return
+
+    shape[key] = validator
+  })
+
+  return z.object(shape)
+})
+type Schema = z.output<typeof schema>
+
+// Generate a dynamic state object when form definition is available
+watch(
+  formElements,
+  (elements) => {
+    if (!elements?.length) return
+
+    elements.forEach((el: WebformElement) => {
+      const metadata = el.metadata
+      const key = metadata?.key
+      const type = metadata?.type
+      const multiple = metadata?.multiple
+
+      if (
+        key &&
+        typeof type === 'string' &&
+        !['webform_actions', 'webform_markup', 'processed_text'].includes(type)
+      ) {
+        if (multiple) {
+          state.value[key] = []
+        } else if (type === 'checkbox') {
+          state.value[key] = false
+        } else {
+          state.value[key] = ''
+        }
+      }
+    })
+  },
+  { immediate: true },
+)
+
+if (props.debug) {
+  console.log('Form definition:', formDefinition)
+
+  watch(
+    state,
+    (newValue) => {
+      console.log('State updated:', newValue)
+    },
+    { deep: true },
+  )
+}
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  const submissionData = event.data as Record<string, unknown>
+  let hasShownErrorMessage = false
+
+  if (props.debug) console.log('[Webform] Event data:', submissionData)
+
   try {
-    const elements = Object.keys(data)
+    const submissionElements = Object.entries(submissionData)
       .filter(
-        (key) =>
-          data[key] !== undefined && data[key] !== null && data[key] !== '',
+        ([_, value]) => value !== '' && value !== null && value !== undefined,
       )
-      .map((key) => ({
+      .map(([key, value]) => ({
         element: key,
-        value: data[key],
+        value: value,
       }))
 
+    const preprocessedSubmission = props.submissionPreprocessor?.({
+      data: submissionData,
+      elements: submissionElements,
+      formId: props.formId,
+    })
+
+    if (Array.isArray(preprocessedSubmission)) {
+      submissionElements.splice(0, submissionElements.length, ...preprocessedSubmission)
+    }
+    else if (preprocessedSubmission?.elements) {
+      submissionElements.splice(0, submissionElements.length, ...preprocessedSubmission.elements)
+    }
+
+    if (props.debug) console.log('[Webform] Payload:', submissionElements)
+
     const response = await useGraphqlMutation('submitWebform', {
-      id: props?.formId,
-      elements,
+      id: props.formId,
+      elements: submissionElements,
     })
 
-    // response.data?.submitWebform?.errors?.length or response.errors.length?
-    if (response.data?.submitWebform?.errors?.length) {
+    const result = response.data?.submitWebform
+    const hasErrors = result?.errors?.length || result?.validationErrors?.length
+
+    if (hasErrors) {
+      if (props.debug) {
+        console.error('[Webform] Validation Errors:', result.validationErrors)
+        console.error('[Webform] Submission Errors:', result.errors)
+      }
+
+      messages.value.push({
+        type: 'error',
+        message: $texts(
+          'webform.submit_error',
+          'The form could not be submitted. Please check your entries and try again.',
+        ),
+      })
+      hasShownErrorMessage = true
+
       throw new Error()
     }
 
-    submitted.value = true
+    messages.value.push({
+      type: 'status',
+      message: $texts(
+        'webform.submit_success',
+        'Your form has been submitted successfully.',
+      ),
+    })
+
+    if (props.debug) console.log('[Webform] Success:', response)
+  } catch (error) {
+    if (!hasShownErrorMessage) {
+      messages.value.push({
+        type: 'error',
+        message: $texts(
+          'webform.submit_error',
+          'The form could not be submitted. Please check your entries and try again.',
+        ),
+      })
+    }
 
-    setTimeout(() => {
-      showThankYou.value = true
-    }, 500)
-  } catch (err) {
-    showError.value = true
+    if (props.debug) console.error('[Webform] Submission Error:', error)
   }
 }
 
 const getComponent = (type: string) => {
   const components: Record<string, any> = {
-    textfield: TextInput,
-    textarea: TextAreaInput,
-    email: TextEmailInput,
-    tel: TextPhoneInput,
-    select: SelectInput,
-    checkbox: CheckboxInput,
-    checkboxes: CheckboxInputs,
-    radios: RadioButtonsInput,
-    managed_file: FileUploadInput,
-    webform_image_file: FileUploadInput,
-    webform_video_file: FileUploadInput,
-    webform_document_file: FileUploadInput,
-    webform_actions: SubmitButton,
-    webform_markup: WebformMarkup,
-    processed_text: WebformMarkup,
+    textfield: FormTextInput,
+    textarea: FormTextAreaInput,
+    email: FormTextEmailInput,
+    tel: FormTextPhoneInput,
+    select: FormSelectInput,
+    checkbox: FormCheckboxInput,
+    checkboxes: FormCheckboxInputs,
+    radios: FormRadioButtonsInput,
+    managed_file: FormFileInput,
+    webform_image_file: FormFileInput,
+    webform_video_file: FormFileInput,
+    webform_document_file: FormFileInput,
+    webform_actions: FormSubmitButton,
+    webform_markup: FormWebformMarkup,
+    processed_text: FormWebformMarkup,
+    hidden: FormHiddenInput,
+    entity_autocomplete: FormTextInput, // Use TextInput for entity_autocomplete
   }
-  return components[type] || TextInput
+  return components[type] || FormTextInput
 }
+
+provide('colorScheme', toRef(props, 'colorScheme'))
+provide('floatingLabels', toRef(props, 'floatingLabels'))
 </script>
 
 <style lang="postcss" scoped>
 .fade-enter-active,
 .fade-leave-active {
-  @apply transition-opacity duration-500 ease-in-out;
+  transition-property: opacity;
+  transition-duration: 500ms;
+  transition-timing-function: var(--ease-in-out);
 }
 
 .fade-enter-from,
 .fade-leave-to {
-  @apply opacity-0;
+  opacity: 0;
+}
+
+:deep(.webform-field-hidden) {
+  @apply hidden;
 }
 </style>

package/components/Drupal/Webform/mutation.graphql

@@ -1,5 +1,9 @@
-mutation submitWebform($id: String!, $elements: [WebformSubmissionElement]) {
-  submitWebform(id: $id, elements: $elements) {
+mutation submitWebform(
+  $id: String!
+  $elements: [WebformSubmissionElement]
+  $files: [WebformSubmissionFile]
+) {
+  submitWebform(id: $id, elements: $elements, files: $files) {
     errors
     validationErrors {
       element

package/components/Drupal/Webform/query.graphql

@@ -16,7 +16,7 @@ query webformById($id: String!) {
       ...webformElementManagedFile
       ...webformElementTermSelect
       ...webformElementWebformFlexbox
-      ...webformElementRadions
+      ...webformElementRadios
       ...webformElementCheckboxes
     }
   }